Block Alignment Settings Copied to Widget Area Cannot be Changed, Don't Reset to Default

[NoHopeRadio]

Quick summary

This is a little esoteric and may soon be entirely irrelevant, however, it came up once and could again. So! Say you make a full-width block in a regular page in the block editor and then decide to copy and paste that block into the widget area.

When you paste it into the widget area, you won't be able to change the alignment settings of that block:

The columns block itself still has the alignfull property, and generally, even this won't come up too often because it will conform to the size of its parent element, but for some themes, Karuna for one, we might end up applying custom CSS for the alignfull property because the usual full alignment settings don't go all the way to the sides. Here's a snippet we often use

/* something like.. */
.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: auto;
}

and in this case, the content of the block in the widget area gets very confused.

It's hard to see exactly what going on, but my guess is that the widget area's alignment is being added into these properties.

Anyway! It seems like it would make sense that if the property can't be changed in the widget menu, that property should be stripped out of code. There is still the option of adding the custom class from the advanced settings, if there is a situation where a workaround might be needed.

Steps to reproduce

1. Create full width block (columns block perhaps) on non-FSE site with block widget editor.
2. Copy the block with the full width settings.
3. Paste into widget area.
4. In browser inspector for updated page, you can confirm that property is still applied to block.

5. Further behavior may depend on rules for property, but the settings applied here may function differently.

What you expected to happen

Either that the property wouldn't be there, or that applying rules to it would function as they do elsewhere.

What actually happened

The property remains, though it can't be changed in the editor, and at least for this workaround for full-width elements, doesn't act the same way.

Context

#4796865-zd

Simple, Atomic or both?

No response

Theme-specific issue?

No response

Browser, operating system and other notes

No response

Reproducibility

No response

Severity

No response

Available workarounds?

No response

Workaround details

No response

[kimerlin81]

Thanks for submitting this detailed report @NoHopeRadio! This issue has been trained as I was able to reproduce it on my tests sites today.

[NoHopeRadio]

I have an addition to this that might increase the priority, and that's that a similar behavior occurs with moving a columns block with full alignment set into any group block. The alignfull setting is still active on the columns block, but the option to change that setting no longer appears until the block is unnested. Combined with the fact that a block with alignment: none will appear as very narrow, so a user well might set full alignment as one their first steps, I think some fix might be even more welcome.

This was a source of confusion in 4880521-zen

[inaikem]

@kimerlin81 👋 I'm moving this back into the "needs triage" queue to confirm that you tested and replicated on Simple, AT and self-hosted sites. I see you mention testing above but that aspect's not clear.

If the issue was replicated on a self-hosted instance we should move this to the Gutenberg repo as a core issue, thanks!

[Greatdane]

I am unable to choose full width for any block in core with the example Karuna theme.

After some reading, it looks like core only allows full width on themes that support it, while Calypso allows it on all themes? I could not find a theme at least in Calypso did not allow the full width settings.

This makes me think this is a Calypso only issue on how it handles the full width property.

Thoughts @inaikem @kimerlin81 ?