Make WordPress Core


Ignore:
Timestamp:
06/23/2022 11:07:11 PM (2 years ago)
Author:
SergeyBiryukov
Message:

Editor: Add utility classnames back to blocks that have layout attributes specified.

In 5.9 these utility classnames were removed, which removed the ability for theme/plugin authors to assign their own custom CSS related to specific layout selections. This was mostly related to the Button block.

This commit adds these classes dynamically based on attributes, rather than saving them to the serialized content.

Original PR from Gutenberg repository:

Props glendaviesnz, peterwilsoncc, andrewserong, zieladam, matveb, samikeijonen.
See #56058.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/block-supports/layout.php

    r53421 r53568  
    171171    }
    172172
    173     $class_name = wp_unique_id( 'wp-container-' );
    174     $gap_value  = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
     173    $class_names     = array();
     174    $container_class = wp_unique_id( 'wp-container-' );
     175    $class_names[]   = $container_class;
     176
     177    // The following section was added to reintroduce a small set of layout classnames that were
     178    // removed in the 5.9 release (https://github.com/WordPress/gutenberg/issues/38719). It is
     179    // not intended to provide an extended set of classes to match all block layout attributes
     180    // here.
     181    if ( ! empty( $block['attrs']['layout']['orientation'] ) ) {
     182        $class_names[] = 'is-' . sanitize_title( $block['attrs']['layout']['orientation'] );
     183    }
     184
     185    if ( ! empty( $block['attrs']['layout']['justifyContent'] ) ) {
     186        $class_names[] = 'is-content-justification-' . sanitize_title( $block['attrs']['layout']['justifyContent'] );
     187    }
     188
     189    if ( ! empty( $block['attrs']['layout']['flexWrap'] ) && 'nowrap' === $block['attrs']['layout']['flexWrap'] ) {
     190        $class_names[] = 'is-nowrap';
     191    }
     192
     193    $gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
    175194    // Skip if gap value contains unsupported characters.
    176195    // Regex for CSS value borrowed from `safecss_filter_attr`, and used here
     
    189208    // don't apply the user-defined value to the styles.
    190209    $should_skip_gap_serialization = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
    191     $style                         = wp_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value );
     210    $style                         = wp_get_layout_style( ".$container_class", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value );
    192211    // This assumes the hook only applies to blocks with a single wrapper.
    193212    // I think this is a reasonable limitation for that particular hook.
    194213    $content = preg_replace(
    195214        '/' . preg_quote( 'class="', '/' ) . '/',
    196         'class="' . esc_attr( $class_name ) . ' ',
     215        'class="' . esc_attr( implode( ' ', $class_names ) ) . ' ',
    197216        $block_content,
    198217        1
Note: See TracChangeset for help on using the changeset viewer.