Gutenberg: Copied wide-aligned blocks keep the alignment even in themes that don't support it

[webmandesign]

How to recreate

Copy the sample Gutenberg post content from https://wordpress.org/gutenberg/ (by switching to "Code Editor" view). And paste it into a test post on a website using a _theme that does not support wide/full alignment_ of blocks.

Everything works as expected on a website front-end, however, when editing the post user keeps seeing the cover image full aligned. But there are no wide/full alignment buttons when editing the block.

When the block alignment is changed to left/right/center, the block is displayed correctly in admin too, matching the width of the other content elements/blocks.

The issue

This might bring a confusion to a user copying content from one source to another. User might want to recreate the full alignment, but failing doing so, and failing understanding how it actually works.

Expected behavior

When copying wide/full aligned block from a website that supports such alignment into a website that does not, the block should not be wide/full aligned when editing the post.

Screenshots

Additional context

• Gutenberg v4.5.1

[designsimply]

I tried the following steps and couldn't see copied alignfull images appear as full-width in the editor. I tested with the Twenty Fifteen theme and used Firefox on macOS for my test.

1. Go to https://wordpress.org/gutenberg/
2. Go to More > Code Editor and copy the code.
3. Activate a theme that does not have support full or wide images (e.g. Twenty Fifteen).
4. Paste the content from step 2 into a new post.

Result: the image at the top which is alignfull at https://wordpress.org/gutenberg/ did not have the alignfull designation after pasting.

^{Seen at https://tan-otter.jurassic.ninja/wp-admin/post.php?post=123&action=edit running WordPress 4.9.8 and Gutenberg 4.5.1 using Firefox 63.0.3 on macOS 10.13.6.}

Do you see anything different in my testing steps compared to yours?

What OS and browser version did you use for testing?

What theme did you use for testing?

[webmandesign]

Oh, I see. You've basically pasted the copied content directly into Gutenberg's Visual Editor mode. I didn't realize this was actually possible.
Here is what I did instead (and that's where you get the image fullwidth):

1. Go to https://wordpress.org/gutenberg/
2. In "Show more tools & options" (3 vertical dots in upper right corner) choose Code Editor
3. Copy the post content code
4. Create a new post on a test website using Gutenberg, set post title
5. In "Show more tools & options" switch over to Code Editor
6. Paste the copied content code into the _"Start writing with text or HTML"_ field
7. In "Show more tools & options" switch back to Visual Editor

_For information, I've used super-plain testing theme (download zip if further tests needed)._

[designsimply]

@manake also pointed out in #12948 that disabling align-wide doesn't refresh the block and I think we can consolidate that report here as well:

Steps to reproduce the behavior:

1. In functions.php add add_theme_support( 'align-wide' );
2. Create a new post with a full wide image and save it.
3. In functions.php remove add_theme_support( 'align-wide' );
4. Open the post editing screen and see that the image is still full wide.

[designsimply]

I added the Needs Decision label to ask specifically what should happen when align-wide content is opened in a theme that does not have align-wide support.

[manake]

Can I remove data-align="full" by myself as a workaround before there is an official solution?

How would I do that?

Maybe there exists some wp.refreshGutenberg() that would do it that I could call on $(document).ready()?