Gutenberg Bug Nested WP Element Styles Broken

[timdix]

I'm noticing some very weird behavior in the latest version of Gutenberg. It appears that the logic for inline styles is broken. Here's a video showing, 6.2.2, and an unmodified twenty twenty three theme

​https://www.youtube.com/watch?v=YRpz5xJfHZw

It seems to me that WordPress is unable to output the styles in the correct order, causing the wrong styles to override. WordPress is combining multiple styles when the color is the same, which causes specific styles on descendant elements to be hoisted to a higher level.

[timdix]

Added gutenberg github repo ticket: ​https://github.com/WordPress/gutenberg/issues/52646

[costdev]

Hi @timdix, thanks for reporting this bug and for posting an issue on the Gutenberg repository!

I'm also seeing this in 6.3-beta4. As this bug has been merged to WordPress trunk, I'm milestoning this ticket for 6.3 for visibility and tracking the merge from Gutenberg when it's ready.

[timdix]

This might not be an issue in the Gutenberg repo, but in WordPress core:

​https://github.com/WordPress/gutenberg/issues/52646#issuecomment-1636200731

[costdev]

@timdix The mentioned file still appears to be maintained in the Gutenberg repository. See ​here.

Actually, given the guard at the top of that file... I'm not so sure now. Pinging @mamaduka and @sergeybiryukov for clarification.

[audrasjb]

Just wanted to confirm that this file can be patched on Core side (see the file history on Github/Trac).

Setting the default optimization option to false.

Trac ticket: https://core.trac.wordpress.org/ticket/58811

[rajinsharwar]

Passing the default optimization option to be false, rather than to be true as stated in the comment in code itself.

PHP Unit tests are failing, I think they need to be modified accordingly.

[audrasjb]

Since PHP Unit tests are failing and still need to be updated, I'm inclined to punt this ticket to 6.4.

Pinging @isabel_brison as committer and Editor Tech Lead: what do you think?

[ramonopoly]

Given that this appears to have been around for a while it might be okay to punt to 6.4.

It would also give the plugin time to address it in a holistic way so that we don't have to disable optimization as a work around.

Optimization groups selectors for common style declarations and can potentially save many bytes in output.

I'll create a corresponding issue on the Gutenberg repo.

cc @aristath and @andrewserong, who also have knowledge in this area

Thanks for the patch.

There's a corresponding Gutenberg issue:

• ​https://github.com/WordPress/gutenberg/issues/52646

I think it should be addressed there unless there's urgency in Core.

Thanks for this patch!

Here's an equivalent Gutenberg PR with tests:

​https://github.com/WordPress/gutenberg/pull/53085

[rajinsharwar]

Modified Unit tests added, and now unit tests are succeeding: ​https://github.com/WordPress/wordpress-develop/pull/4902

[rajinsharwar]

Improved annotations as per the suggestion of @ramonopoly and @mukesh27

Thanks for the PR! If optimize is no longer enabled by default, then a few other DocBlocks will have to be updated as well, see r55820 for all the instances that should be changed to Default false.

Thanks for letting me know @SergeyBiryukov. Just updated the other DocBlocks.

[JeffPaul]

Glad to see progress here, but I concur with @audrasjb that this is a solid candidate to punt unless someone wants to more formally own this and see it through to commit in the very near future?

[rajinsharwar]

Updated the Doc bLock as per the suggestion of @audrasjb.

[audrasjb]

We are too close to the release date to commit this in the 6.3 cycle, thus let's move it to milestone 6.4.

[rajinsharwar]

Taking the ownership of the ticket, and marking it for commit.

[isabel_brison]

In 56574:

Editor: disable default style engine optimisation.

Stops style engine from combining CSS selectors by default so that rule order is preserved.

Props ramonopoly, rajinsharwar, timdix, costdev, audrasjb, SergeyBiryukov, JeffPaul, mukesh27.
Fixes #58811.

Committed in r56574.