Innerblocks blocks should not be styled by parent alignment

[rogerlos]

The parent container of an Innerblocks block should be able to be aligned without that alignment affecting the child blocks within Innerblocks.

As an example, let's say you add a block, container, which has an Innerblocks area. You should be able to align the container left, to float it as a pseudo-sidebar, say, without all of the children of Innerblocks in the editor also being floated left.

This does not affect the front end output, but is a big hassle in the editor itself.

This is because the rules which use [data-align=""] are not limited in scope using the > selector, so all children continue to inherit the rules, including special paddings and margins set on various bits of the editor interface.

[garciaalvaro]

I just found out about the bug and was going to open an issue. Are there any news on this?

[aduth]

Steps to Reproduce:

1. Navigate to Posts > Add New
2. Insert a Cover Image block
3. Assign an image
4. Align the Cover Image block as align-left
5. Inspect the auto-generated paragraph block
6. Note that the .block-editor-block-list__block-edit for the paragraph block has float: left styling, despite the float being assigned to the cover image block.

This is because the rules which use [data-align=""] are not limited in scope using the > selector, so all children continue to inherit the rules, including special paddings and margins set on various bits of the editor interface.

Implementation Notes:

These styles are here:

gutenberg/packages/block-editor/src/components/block-list/style.scss

Lines 358 to 398 in 48e06de

	// Left
	&[data-align="left"] {
	// This is in the editor only; the image should be floated on the frontend.
	.block-editor-block-list__block-edit {
	/*!rtl:begin:ignore*/
	float: left;
	margin-right: 2em;
	/*!rtl:end:ignore*/
	}
	// Align block toolbar to floated content.
	@include break-small() {
	.block-editor-block-toolbar {
	/*!rtl:begin:ignore*/
	left: $block-padding;
	right: auto;
	/*!rtl:end:ignore*/
	}
	}
	}
	// Right
	&[data-align="right"] {
	// Right: This is in the editor only; the image should be floated on the frontend.
	> .block-editor-block-list__block-edit {
	/*!rtl:begin:ignore*/
	float: right;
	margin-left: 2em;
	/*!rtl:end:ignore*/
	}
	// Align block toolbar to floated content.
	@include break-small() {
	.block-editor-block-toolbar {
	/*!rtl:begin:ignore*/
	right: $block-padding;
	left: auto;
	/*!rtl:end:ignore*/
	}
	}
	}

Notably, there is a descendent selector for right-align.

It's possible this was simply overlooked in #10085 to apply also to the left-aligned (cc @jasmussen )?

[jasmussen]

It's possible this was simply overlooked in #10085 to apply also to the left-aligned (cc @jasmussen )?

Yes, that appears to be the case. I have some things on my table and can't push a fix today, but I can take a look in a few days or next week, probably?

[youknowriad]

I think this is fixed now.