Make WordPress Core


Ignore:
Timestamp:
01/31/2024 02:52:25 AM (4 months ago)
Author:
isabel_brison
Message:

Editor: introduce dimensions.aspectRatio block support.

Adds front end rendering logic for the dimensions.aspectRatio block support as well as the required logic in WP_Theme_JSON and the style engine.

Props andrewserong.
Fixes #60365.

File:
1 edited

Legend:

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

    r56753 r57491  
    8484}
    8585
     86/**
     87 * Renders server-side dimensions styles to the block wrapper.
     88 * This block support uses the `render_block` hook to ensure that
     89 * it is also applied to non-server-rendered blocks.
     90 *
     91 * @since 6.5.0
     92 * @access private
     93 *
     94 * @param  string $block_content Rendered block content.
     95 * @param  array  $block         Block object.
     96 * @return string                Filtered block content.
     97 */
     98function wp_render_dimensions_support( $block_content, $block ) {
     99    $block_type               = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
     100    $block_attributes         = ( isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) ? $block['attrs'] : array();
     101    $has_aspect_ratio_support = block_has_support( $block_type, array( 'dimensions', 'aspectRatio' ), false );
     102
     103    if (
     104        ! $has_aspect_ratio_support ||
     105        wp_should_skip_block_supports_serialization( $block_type, 'dimensions', 'aspectRatio' )
     106    ) {
     107        return $block_content;
     108    }
     109
     110    $dimensions_block_styles                = array();
     111    $dimensions_block_styles['aspectRatio'] = $block_attributes['style']['dimensions']['aspectRatio'] ?? null;
     112
     113    // To ensure the aspect ratio does not get overridden by `minHeight` unset any existing rule.
     114    if (
     115        isset( $dimensions_block_styles['aspectRatio'] )
     116    ) {
     117        $dimensions_block_styles['minHeight'] = 'unset';
     118    } elseif (
     119        isset( $block_attributes['style']['dimensions']['minHeight'] ) ||
     120        isset( $block_attributes['minHeight'] )
     121    ) {
     122        $dimensions_block_styles['aspectRatio'] = 'unset';
     123    }
     124
     125    $styles = wp_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) );
     126
     127    if ( ! empty( $styles['css'] ) ) {
     128        // Inject dimensions styles to the first element, presuming it's the wrapper, if it exists.
     129        $tags = new WP_HTML_Tag_Processor( $block_content );
     130
     131        if ( $tags->next_tag() ) {
     132            $existing_style = $tags->get_attribute( 'style' );
     133            $updated_style  = '';
     134
     135            if ( ! empty( $existing_style ) ) {
     136                $updated_style = $existing_style;
     137                if ( ! str_ends_with( $existing_style, ';' ) ) {
     138                    $updated_style .= ';';
     139                }
     140            }
     141
     142            $updated_style .= $styles['css'];
     143            $tags->set_attribute( 'style', $updated_style );
     144
     145            if ( ! empty( $styles['classnames'] ) ) {
     146                foreach ( explode( ' ', $styles['classnames'] ) as $class_name ) {
     147                    if (
     148                        str_contains( $class_name, 'aspect-ratio' ) &&
     149                        ! isset( $block_attributes['style']['dimensions']['aspectRatio'] )
     150                    ) {
     151                        continue;
     152                    }
     153                    $tags->add_class( $class_name );
     154                }
     155            }
     156        }
     157
     158        return $tags->get_updated_html();
     159    }
     160
     161    return $block_content;
     162}
     163
     164add_filter( 'render_block', 'wp_render_dimensions_support', 10, 2 );
     165
    86166// Register the block support.
    87167WP_Block_Supports::get_instance()->register(
Note: See TracChangeset for help on using the changeset viewer.