[wp-trac] [WordPress Trac] #60877: Twenty Twenty-Four: Many block styles affect all blocks

[WordPress Trac]

#60877: Twenty Twenty-Four: Many block styles affect all blocks
---------------------------+------------------------------
 Reporter:  wildworks      |       Owner:  (none)
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  Awaiting Review
Component:  Bundled Theme  |     Version:
 Severity:  normal         |  Resolution:
 Keywords:                 |     Focuses:
---------------------------+------------------------------

Comment (by wildworks):

 > If a user adds a class in the CSS class field in the Advanced panel,
 that is a deliberate action, and I would expect the style to continue
 working the same as it has since release.

 That is certainly true. However, I suspect that very few users understand
 the class names generated by block styles and add them explicitly, or use
 the "Paste Styles" action to apply a particular block style to other
 blocks as well. Personally, I think this is a bug that should be fixed.

 Additionally, if users define their own block style and its slug matches
 the slug of their theme's block style, a style conflict will occour, even
 if the targeted blocks are different. Using TT4 as an example, let's say a
 user adds a style called `asterisk` to a paragraph block. At the same
 time, the astarisk style for the Heading block defined by the theme will
 also be applied to the Paragraph block.

 > we should check if other bundled themes have the same issue.

 Based on my research, this issue may also occur in other themes, albeit to
 a limited extent. Most of them are selectors called `.is-style-outline
 .wp-block-button__link`. For example, if you wrap a Buttons block in a
 Group block and add a CSS class called `is-style-outline` to the Group
 block, the Button inside will have unintended styles applied.

 Below is a list of themes that have this style.

 - [https://github.com/WordPress/wordpress-
 develop/blob/5b45d4537f4609f8ebff03126adaa9fcc98f5f49/src/wp-
 content/themes/twentyeleven/blocks.css#L254 Twenty Eleven]
 - [https://github.com/WordPress/wordpress-
 develop/blob/5b45d4537f4609f8ebff03126adaa9fcc98f5f49/src/wp-
 content/themes/twentyfourteen/css/blocks.css#L260 Twenty Fourteen:]
 - [https://github.com/WordPress/wordpress-
 develop/blob/5b45d4537f4609f8ebff03126adaa9fcc98f5f49/src/wp-
 content/themes/twentyfifteen/css/blocks.css#L404 Twenty Fifteen]
 - [https://github.com/WordPress/wordpress-
 develop/blob/5b45d4537f4609f8ebff03126adaa9fcc98f5f49/src/wp-
 content/themes/twentysixteen/css/blocks.css#L269 Twenty Sixteen]
 - [https://github.com/WordPress/wordpress-
 develop/blob/5b45d4537f4609f8ebff03126adaa9fcc98f5f49/src/wp-
 content/themes/twentyseventeen/assets/css/blocks.css#L225 Twenty
 Seventeen]
 - [https://github.com/WordPress/wordpress-
 develop/blob/5b45d4537f4609f8ebff03126adaa9fcc98f5f49/src/wp-
 content/themes/twentytwenty/style.css#L3046 Twenty Twenty]

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/60877#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform