[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:  Themes        |    Version:
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 Originally reported in Gutenberg repo:
 https://github.com/WordPress/gutenberg/issues/60352

 TT4 defines block styles for some blocks and the actual block style CSS is
 defined via `inline_style` property. This CSS only contains selectors for
 block styles, so it affects all blocks. For example, if you copy a block
 style or enter its CSS class name in the Advanced panel.

 The `register_block_style()` function itself targets a specific block.
 Furthermore, in TT4, I don't think these styles are expected to be applied
 to anything other than the target block.

 Therefore, I would like to suggest updating the inline style, for example,
 as shown below.

 From:


 {{{
 function twentytwentyfour_block_styles() {
         register_block_style(
                 'core/details',
                 array(
                         'name'         => 'arrow-icon-details',
                         'label'        => __( 'Arrow icon',
 'twentytwentyfour' ),
                         'inline_style' => '
                         .is-style-arrow-icon-details {
                         }',
                 )
         );
         // ...
 }
 }}}

 To:

 {{{
 function twentytwentyfour_block_styles() {
         register_block_style(
                 'core/details',
                 array(
                         'name'         => 'arrow-icon-details',
                         'label'        => __( 'Arrow icon',
 'twentytwentyfour' ),
                         'inline_style' => '
                         .wp-block-details.is-style-arrow-icon-details {
                         }',
                 )
         );
         // ...
 }
 }}}

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