Make WordPress Core

Changeset 57491


Ignore:
Timestamp:
01/31/2024 02:52:25 AM (3 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.

Location:
trunk
Files:
1 added
5 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(
  • trunk/src/wp-includes/class-wp-theme-json.php

    r57490 r57491  
    205205     * @since 6.3.0 Added `column-count` property.
    206206     * @since 6.4.0 Added `writing-mode` property.
     207     * @since 6.5.0 Added `aspect-ratio` property.
    207208     *
    208209     * @var array
    209210     */
    210211    const PROPERTIES_METADATA = array(
     212        'aspect-ratio'                      => array( 'dimensions', 'aspectRatio' ),
    211213        'background'                        => array( 'color', 'gradient' ),
    212214        'background-color'                  => array( 'color', 'background' ),
     
    345347     * @since 6.4.0 Added support for `layout.allowEditing`, `background.backgroundImage`,
    346348     *              `typography.writingMode`, `lightbox.enabled` and `lightbox.allowEditing`.
    347      * @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize` and
    348      *              `background.backgroundSize`.
     349     * @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize`,
     350     *              `background.backgroundSize` and `dimensions.aspectRatio`.
    349351     * @var array
    350352     */
     
    381383        'custom'                        => null,
    382384        'dimensions'                    => array(
    383             'minHeight' => null,
     385            'aspectRatio' => null,
     386            'minHeight'   => null,
    384387        ),
    385388        'layout'                        => array(
     
    439442     * @since 6.2.0 Added `outline`, and `minHeight` properties.
    440443     * @since 6.3.0 Added support for `typography.textColumns`.
     444     * @since 6.5.0 Added support for `dimensions.aspectRatio`.
    441445     *
    442446     * @var array
     
    459463        ),
    460464        'dimensions' => array(
    461             'minHeight' => null,
     465            'aspectRatio' => null,
     466            'minHeight'   => null,
    462467        ),
    463468        'filter'     => array(
     
    576581     * @since 6.2.0 Added `dimensions.minHeight` and `position.sticky`.
    577582     * @since 6.4.0 Added `background.backgroundImage`.
    578      * @since 6.5.0 Added `background.backgroundSize`.
     583     * @since 6.5.0 Added `background.backgroundSize` and `dimensions.aspectRatio`.
    579584     * @var array
    580585     */
     
    590595        array( 'color', 'button' ),
    591596        array( 'color', 'caption' ),
     597        array( 'dimensions', 'aspectRatio' ),
    592598        array( 'dimensions', 'minHeight' ),
    593599        array( 'position', 'sticky' ),
     
    19221928     * @since 5.9.0 Added the `$settings` and `$properties` parameters.
    19231929     * @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters.
     1930     * @since 6.5.0 Output a `min-height: unset` rule when `aspect-ratio` is set.
    19241931     *
    19251932     * @param array   $styles Styles to process.
     
    19911998                 */
    19921999                $value = wp_get_typography_font_size_value( array( 'size' => $value ) );
     2000            }
     2001
     2002            if ( 'aspect-ratio' === $css_property ) {
     2003                // For aspect ratio to work, other dimensions rules must be unset.
     2004                // This ensures that a fixed height does not override the aspect ratio.
     2005                $declarations[] = array(
     2006                    'name'  => 'min-height',
     2007                    'value' => 'unset',
     2008                );
    19932009            }
    19942010
  • trunk/src/wp-includes/style-engine/class-wp-style-engine.php

    r57254 r57491  
    2424 * @since 6.3.0 Added support for text-columns.
    2525 * @since 6.4.0 Added support for background.backgroundImage.
    26  * @since 6.5.0 Added support for background.backgroundPosition and background.backgroundRepeat.
     26 * @since 6.5.0 Added support for background.backgroundPosition,
     27 *              background.backgroundRepeat and dimensions.aspectRatio.
    2728 */
    2829#[AllowDynamicProperties]
     
    191192        ),
    192193        'dimensions' => array(
    193             'minHeight' => array(
     194            'aspectRatio' => array(
     195                'property_keys' => array(
     196                    'default' => 'aspect-ratio',
     197                ),
     198                'path'          => array( 'dimensions', 'aspectRatio' ),
     199                'classnames'    => array(
     200                    'has-aspect-ratio' => true,
     201                ),
     202            ),
     203            'minHeight'   => array(
    194204                'property_keys' => array(
    195205                    'default' => 'min-height',
  • trunk/tests/phpunit/tests/style-engine/styleEngine.php

    r57254 r57491  
    185185            ),
    186186
     187            'inline_valid_aspect_ratio_style'              => array(
     188                'block_styles'    => array(
     189                    'dimensions' => array(
     190                        'aspectRatio' => '4/3',
     191                        'minHeight'   => 'unset',
     192                    ),
     193                ),
     194                'options'         => null,
     195                'expected_output' => array(
     196                    'css'          => 'aspect-ratio:4/3;min-height:unset;',
     197                    'declarations' => array(
     198                        'aspect-ratio' => '4/3',
     199                        'min-height'   => 'unset',
     200                    ),
     201                    'classnames'   => 'has-aspect-ratio',
     202                ),
     203            ),
     204
    187205            'inline_valid_shadow_style'                    => array(
    188206                'block_styles'    => array(
  • trunk/tests/phpunit/tests/theme/wpThemeJson.php

    r57361 r57491  
    280280            ),
    281281            'dimensions' => array(
    282                 'minHeight' => true,
     282                'aspectRatio' => true,
     283                'minHeight'   => true,
    283284            ),
    284285            'position'   => array(
     
    317318                    ),
    318319                    'dimensions' => array(
    319                         'minHeight' => true,
     320                        'aspectRatio' => true,
     321                        'minHeight'   => true,
    320322                    ),
    321323                    'position'   => array(
     
    496498     * @ticket 58549
    497499     * @ticket 58550
     500     * @ticket 60365
    498501     */
    499502    public function test_get_stylesheet() {
     
    568571                    ),
    569572                    'blocks'   => array(
     573                        'core/cover'        => array(
     574                            'dimensions' => array(
     575                                'aspectRatio' => '16/9',
     576                            ),
     577                        ),
    570578                        'core/group'        => array(
    571579                            'color'    => array(
     
    646654
    647655        $variables = 'body{--wp--preset--color--grey: grey;--wp--preset--gradient--custom-gradient: linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%);--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}';
    648         $styles    = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}body{color: var(--wp--preset--color--grey);}a:where(:not(.wp-element-button)){background-color: #333;color: #111;}.wp-element-button, .wp-block-button__link{box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}.wp-block-group{background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;padding: 24px;}.wp-block-group a:where(:not(.wp-element-button)){color: #111;}.wp-block-heading{color: #123456;}.wp-block-heading a:where(:not(.wp-element-button)){background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a:where(:not(.wp-element-button)){background-color: #777;color: #555;}.wp-block-post-excerpt{column-count: 2;}.wp-block-image{margin-bottom: 30px;}.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}.wp-block-image img, .wp-block-image .components-placeholder{filter: var(--wp--preset--duotone--custom-duotone);}';
     656        $styles    = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}body{color: var(--wp--preset--color--grey);}a:where(:not(.wp-element-button)){background-color: #333;color: #111;}.wp-element-button, .wp-block-button__link{box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}.wp-block-cover{min-height: unset;aspect-ratio: 16/9;}.wp-block-group{background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;padding: 24px;}.wp-block-group a:where(:not(.wp-element-button)){color: #111;}.wp-block-heading{color: #123456;}.wp-block-heading a:where(:not(.wp-element-button)){background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a:where(:not(.wp-element-button)){background-color: #777;color: #555;}.wp-block-post-excerpt{column-count: 2;}.wp-block-image{margin-bottom: 30px;}.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}.wp-block-image img, .wp-block-image .components-placeholder{filter: var(--wp--preset--duotone--custom-duotone);}';
    649657        $presets   = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-custom-gradient-gradient-background{background: var(--wp--preset--gradient--custom-gradient) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}';
    650658        $all       = $variables . $styles . $presets;
Note: See TracChangeset for help on using the changeset viewer.