Make WordPress Core

Changeset 53085


Ignore:
Timestamp:
04/06/2022 11:39:55 AM (2 years ago)
Author:
gziolo
Message:

Editor: Update layout handling for block supports

Backports changes applied in the Gutenberg plugin planned for WordPress 6.0 release. See https://github.com/WordPress/gutenberg/issues/39889.

Props ramonopoly, youknowriad.
See #55505.

Location:
trunk
Files:
1 added
1 edited

Legend:

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

    r53012 r53085  
    3636 * @access private
    3737 *
    38  * @param string $selector              CSS selector.
    39  * @param array  $layout                Layout object. The one that is passed has already checked
    40  *                                      the existence of default block layout.
    41  * @param bool   $has_block_gap_support Whether the theme has support for the block gap.
    42  * @param string $gap_value             The block gap value to apply.
     38 * @param string  $selector                      CSS selector.
     39 * @param array   $layout                        Layout object. The one that is passed has already checked
     40 *                                               the existence of default block layout.
     41 * @param boolean $has_block_gap_support         Whether the theme has support for the block gap.
     42 * @param string  $gap_value                     The block gap value to apply.
     43 * @param boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor.
    4344 * @return string CSS style.
    4445 */
    45 function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null ) {
     46function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false ) {
    4647    $layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';
    4748
     
    5859        $wide_max_width_value = safecss_filter_attr( explode( ';', $wide_max_width_value )[0] );
    5960
    60         $style = '';
    6161        if ( $content_size || $wide_size ) {
    62             $style  = "$selector > * {";
     62            $style  = "$selector > :where(:not(.alignleft):not(.alignright)) {";
    6363            $style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';';
    6464            $style .= 'margin-left: auto !important;';
     
    7070        }
    7171
    72         $style .= "$selector .alignleft { float: left; margin-right: 2em; }";
    73         $style .= "$selector .alignright { float: right; margin-left: 2em; }";
     72        $style .= "$selector > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }";
     73        $style .= "$selector > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }";
     74        $style .= "$selector > .aligncenter { margin-left: auto !important; margin-right: auto !important; }";
    7475        if ( $has_block_gap_support ) {
    75             $gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap )';
    76             $style    .= "$selector > * { margin-top: 0; margin-bottom: 0; }";
    77             $style    .= "$selector > * + * { margin-top: $gap_style;  margin-bottom: 0; }";
     76            if ( is_array( $gap_value ) ) {
     77                $gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null;
     78            }
     79            $gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : 'var( --wp--style--block-gap )';
     80            $style    .= "$selector > * { margin-block-start: 0; margin-block-end: 0; }";
     81            $style    .= "$selector > * + * { margin-block-start: $gap_style; margin-block-end: 0; }";
    7882        }
    7983    } elseif ( 'flex' === $layout_type ) {
     
    98102        $style .= 'display: flex;';
    99103        if ( $has_block_gap_support ) {
    100             $gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap, 0.5em )';
     104            if ( is_array( $gap_value ) ) {
     105                $gap_row    = isset( $gap_value['top'] ) ? $gap_value['top'] : '0.5em';
     106                $gap_column = isset( $gap_value['left'] ) ? $gap_value['left'] : '0.5em';
     107                $gap_value  = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
     108            }
     109            $gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : 'var( --wp--style--block-gap, 0.5em )';
    101110            $style    .= "gap: $gap_style;";
    102111        } else {
    103112            $style .= 'gap: 0.5em;';
    104113        }
     114
    105115        $style .= "flex-wrap: $flex_wrap;";
    106         $style .= 'align-items: center;';
    107116        if ( 'horizontal' === $layout_orientation ) {
    108117            $style .= 'align-items: center;';
     
    119128            if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
    120129                $style .= "align-items: {$justify_content_options[ $layout['justifyContent'] ]};";
     130            } else {
     131                $style .= 'align-items: flex-start;';
    121132            }
    122133        }
     
    164175    // Regex for CSS value borrowed from `safecss_filter_attr`, and used here
    165176    // because we only want to match against the value, not the CSS attribute.
    166     $gap_value = preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
    167     $style     = wp_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value );
     177    if ( is_array( $gap_value ) ) {
     178        foreach ( $gap_value as $key => $value ) {
     179            $gap_value[ $key ] = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value;
     180        }
     181    } else {
     182        $gap_value = $gap_value && preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
     183    }
     184
     185    // If a block's block.json skips serialization for spacing or spacing.blockGap,
     186    // don't apply the user-defined value to the styles.
     187    $should_skip_gap_serialization = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
     188    $style                         = wp_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization );
    168189    // This assumes the hook only applies to blocks with a single wrapper.
    169190    // I think this is a reasonable limitation for that particular hook.
     
    209230
    210231    if (
    211         'core/group' !== $block['blockName'] ||
    212232        WP_Theme_JSON_Resolver::theme_has_support() ||
    213233        1 === preg_match( $group_with_inner_container_regex, $block_content ) ||
     
    231251}
    232252
    233 add_filter( 'render_block', 'wp_restore_group_inner_container', 10, 2 );
     253add_filter( 'render_block_core/group', 'wp_restore_group_inner_container', 10, 2 );
     254
     255/**
     256 * For themes without theme.json file, make sure
     257 * to restore the outer div for the aligned image block
     258 * to avoid breaking styles relying on that div.
     259 *
     260 * @since 6.0.0
     261 * @access private
     262 *
     263 * @param string $block_content Rendered block content.
     264 * @param  array  $block        Block object.
     265 * @return string Filtered block content.
     266 */
     267function wp_restore_image_outer_container( $block_content, $block ) {
     268    $image_with_align = "
     269/# 1) everything up to the class attribute contents
     270(
     271    ^\s*
     272    <figure\b
     273    [^>]*
     274    \bclass=
     275    [\"']
     276)
     277# 2) the class attribute contents
     278(
     279    [^\"']*
     280    \bwp-block-image\b
     281    [^\"']*
     282    \b(?:alignleft|alignright|aligncenter)\b
     283    [^\"']*
     284)
     285# 3) everything after the class attribute contents
     286(
     287    [\"']
     288    [^>]*
     289    >
     290    .*
     291    <\/figure>
     292)/iUx";
     293
     294    if (
     295        WP_Theme_JSON_Resolver::theme_has_support() ||
     296        0 === preg_match( $image_with_align, $block_content, $matches )
     297    ) {
     298        return $block_content;
     299    }
     300
     301    $wrapper_classnames = array( 'wp-block-image' );
     302
     303    // If the block has a classNames attribute these classnames need to be removed from the content and added back
     304    // to the new wrapper div also.
     305    if ( ! empty( $block['attrs']['className'] ) ) {
     306        $wrapper_classnames = array_merge( $wrapper_classnames, explode( ' ', $block['attrs']['className'] ) );
     307    }
     308    $content_classnames          = explode( ' ', $matches[2] );
     309    $filtered_content_classnames = array_diff( $content_classnames, $wrapper_classnames );
     310
     311    return '<div class="' . implode( ' ', $wrapper_classnames ) . '">' . $matches[1] . implode( ' ', $filtered_content_classnames ) . $matches[3] . '</div>';
     312}
     313
     314add_filter( 'render_block_core/image', 'wp_restore_image_outer_container', 10, 2 );
Note: See TracChangeset for help on using the changeset viewer.