Gutenberg: Centered button identified as "modified externally"

[jasmussen]

Issue Overview

A centered button is misreported as having been modified externally, offering an overwrite.

Steps to Reproduce (for bugs)

1. Insert a button, add a label
2. Save
3. Center button, save
4. Reload

Now it identifies the button as modified externally, and if you click "overwrite", it will left align the button.

[jasmussen]

From @gziolo: it is likely that it complains because no href is set.

[gziolo]

It looks like something else causes it, when you don't use align it works perfectly fine. Once you pick any alignment option it breaks.

[youknowriad]

Looks like a bug backend side (maybe in the PHP block parser). I think all comment blocks are stripped server-side which may break several blocks. For example, applying a color to a text block. Seems to be a recent regression

Edit: It's probably a regression introduced by #2806

[mcsf]

Edit: It's probably a regression introduced by #2806

~I believe #2806 only better surfaced a regression actually introduced by #2743.~

Edit: Spoke too soon. It seems that something in the way that gutenberg_parse_blocks is called from within gutenberg_wpautop_block_content/wp_insert_post_data leads to missing attributes in the parse tree, but not when calling the parser in other circumstances (e.g. standalone PHP test).

[ephox-mogran]

I haven't really looked at the back-end yet, so just thought I'd ask the question:

This content is sent to the server:

content: "<!-- wp:button {"align":"right"} -->↵<div class="wp-block-button alignright"><a>Button</a></div>↵<!-- /wp:button -->"

This is the response:

content.raw: <!-- wp:core/button -->↵<div class="wp-block-button alignright"><a>Button</a></div>↵<!-- /wp:core/button -->

Is this expected? I assume the missing {"align":"right"} information in the comment is causing the problem? That's what you're referring to @youknowriad ?

[mcsf]

When called from wp_insert_post_data, the raw content includes backslashes in block attributes JSON:

<!-- wp:core/button {\"align\":\"center\"} -->
<div class=\"wp-block-button aligncenter\"><a>Label</a></div>
<!-- /wp:core/button -->

<!-- wp:core/latest-posts {\"displayPostDate\":true} /-->

Stripping them out fixes the issue for me.

[gziolo]

Questions unrelated to this PR, @mtias & @pento, is it expected to have wp:button on the client side and wp:core/button on the server side?

[mcsf]

@gziolo, do you mean #2950?

[gziolo]

@mcsf, yes, this one.