Size Change: +79 B (0%)

Total Size: 1.42 MB

_{compressed-size-action}

Thanks so much for trying this. As noted, those default margin values, but top and bottom, left and right, have caused headaches for a long time.

This PR is a step in the right direction for block themes, but the increased specificity of the .wp-block selector as you note, is causing some headaches even just in this branch, as they now override theme specificity in all the themes I tried:

If we were able to output the old block styles in a separate stylesheet that was not loaded for block themes, essentially a back-compat style, that seems like it would be able to keep the legacy specificity intact, while not burdening block themes. Is this what you'd prefer to avoid (based on the second comment)?

One alternative I can think of is to invert the styles, to something like this:

.wp-block {
	margin-left: auto;
	margin-right: auto;
	margin-top: $default-block-margin;
	margin-bottom: $default-block-margin;
}

.supports-layout .wp-block {
	margin-left: revert;
	margin-right: revert;
	margin-top: revert;
	margin-bottom: revert;
}

But that puts the extra specificity burden on block themes.

A 3rd option is to load a separate additional stylesheet just for block themes, one that includes only these styles:

.wp-block {
	margin-left: revert;
	margin-right: revert;
	margin-top: revert;
	margin-bottom: revert;
}

The only option of those three that I like, is to output the legacy styles in a separate stylesheet, loaded conditionally. What's in trunk currently is already a bit of a headache (see again #30337).

Thanks for the feedback @jasmussen I implemented your first suggestion, let me know what you think.

This separate file is my preferred solution as well.
✅ wp-editor-classic-layout-styles-css, classic.css, loads when I activate a non FSE theme.

Twenty Twenty One is broken.

Before, with current Gutenberg trunk only:

With PR applied:

The sample content is the Block: Cover post from the theme unit test.

✅ Random selection of blocks in an FSE theme, with no top and bottom margins:

Seedlet (.org version) with PR applied, same content as above:

Twenty Nineteen with PR applied, same content as above:

Thanks so much Riad, this is working really well for me, and the split seems like it will provide us with a way to support both paths forward in as best a possible way. I think this'll work well, though I'd encourage additional thoughts. @mcsf?

I'm seeing the same issue as Carolina, even with the demo content:

The rules are output correctly it appears:

The new lower specificity (which, amazing, by the way), now gets overridden by this:

Perhaps we can lower the specificity on that reset as well?

Perhaps we can lower the specificity on that reset as well?

That's not possible, these are there to override wp-admin default styles.

The bug should be fixed now, I restored the specificity that was applied to these rules before #29335 and in trunk as well.

This is super duper solid. Here's TwentyTwentyOne in this branch:

Buttons are good again:

Here's trunk:

Big fan of this approach. It could use a good bit of testing, but 👍 👍 from here. Thank you Riad!

Looks like this PR fixes some issues in 10.3.1. If we do a 10.3.2 we could consider including this one.

@WunderBart, it looks like we have 2 candidates for 10.3.2, including your #30540.