Description

Using the option to “inherit default layout” adds a custom inline style block to the markup. Thanks to the unique ID-based class name applied per block, the highly-specific descendant selector rules, and the use of !important, it's difficult to override the rules with theme or plugin CSS.

e.g.

.wp-container-61810012475e7 > * {max-width: 660px;margin-left: auto !important;margin-right: auto !important;}.wp-container-61810012475e7 > .alignwide { max-width: 1140px;}.wp-container-61810012475e7 .alignfull { max-width: none; }.wp-container-61810012475e7 .alignleft { float: left; margin-right: 2em; }.wp-container-61810012475e7 .alignright { float: right; margin-left: 2em; }

Step-by-step reproduction instructions

1. Use a nested block with the option “inherit default layout” activated.
2. Try to set a custom max-width on a child element with alignwide applied using theme CSS.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes