Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-11-17 16:15:24 +01:00
Code Issues Projects Releases Wiki Activity

Editor: introduce dimensions.aspectRatio block support.

Browse Source 
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.

Built from https://develop.svn.wordpress.org/trunk@57491


git-svn-id: http://core.svn.wordpress.org/trunk@56992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
isabel_brison 2024-01-31 02:54:17 +00:00
parent 04eb7ecf30
commit 2140b001bd
4 changed files with 114 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
wp-includes/block-supports/dimensions.php
View File

@ -83,6 +83,86 @@ function wp_apply_dimensions_support( $block_type, $block_attributes ) {
return $attributes;
}
/**
* Renders server-side dimensions styles to the block wrapper.
* This block support uses the `render_block` hook to ensure that
* it is also applied to non-server-rendered blocks.
*
* @since 6.5.0
* @access private
*
* @param string $block_content Rendered block content.
* @param array $block Block object.
* @return string Filtered block content.
*/
function wp_render_dimensions_support( $block_content, $block ) {
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
$block_attributes = ( isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) ? $block['attrs'] : array();
$has_aspect_ratio_support = block_has_support( $block_type, array( 'dimensions', 'aspectRatio' ), false );
if (
! $has_aspect_ratio_support ||
wp_should_skip_block_supports_serialization( $block_type, 'dimensions', 'aspectRatio' )
) {
return $block_content;
}
$dimensions_block_styles = array();
$dimensions_block_styles['aspectRatio'] = $block_attributes['style']['dimensions']['aspectRatio'] ?? null;
// To ensure the aspect ratio does not get overridden by `minHeight` unset any existing rule.
if (
isset( $dimensions_block_styles['aspectRatio'] )
) {
$dimensions_block_styles['minHeight'] = 'unset';
} elseif (
isset( $block_attributes['style']['dimensions']['minHeight'] ) ||
isset( $block_attributes['minHeight'] )
) {
$dimensions_block_styles['aspectRatio'] = 'unset';
}
$styles = wp_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) );
if ( ! empty( $styles['css'] ) ) {
// Inject dimensions styles to the first element, presuming it's the wrapper, if it exists.
$tags = new WP_HTML_Tag_Processor( $block_content );
if ( $tags->next_tag() ) {
$existing_style = $tags->get_attribute( 'style' );
$updated_style = '';
if ( ! empty( $existing_style ) ) {
$updated_style = $existing_style;
if ( ! str_ends_with( $existing_style, ';' ) ) {
$updated_style .= ';';
}
}
$updated_style .= $styles['css'];
$tags->set_attribute( 'style', $updated_style );
if ( ! empty( $styles['classnames'] ) ) {
foreach ( explode( ' ', $styles['classnames'] ) as $class_name ) {
if (
str_contains( $class_name, 'aspect-ratio' ) &&
! isset( $block_attributes['style']['dimensions']['aspectRatio'] )
) {
continue;
}
$tags->add_class( $class_name );
}
}
}
return $tags->get_updated_html();
}
return $block_content;
}
add_filter( 'render_block', 'wp_render_dimensions_support', 10, 2 );
// Register the block support.
WP_Block_Supports::get_instance()->register(
'dimensions',

26
wp-includes/class-wp-theme-json.php
View File

@ -204,10 +204,12 @@ class WP_Theme_JSON {
* @since 6.2.0 Added `outline-*`, and `min-height` properties.
* @since 6.3.0 Added `column-count` property.
* @since 6.4.0 Added `writing-mode` property.
* @since 6.5.0 Added `aspect-ratio` property.
*
* @var array
*/
const PROPERTIES_METADATA = array(
'aspect-ratio' => array( 'dimensions', 'aspectRatio' ),
'background' => array( 'color', 'gradient' ),
'background-color' => array( 'color', 'background' ),
'border-radius' => array( 'border', 'radius' ),
@ -344,8 +346,8 @@ class WP_Theme_JSON {
* @since 6.3.0 Added support for `typography.textColumns`, removed `layout.definitions`.
* @since 6.4.0 Added support for `layout.allowEditing`, `background.backgroundImage`,
* `typography.writingMode`, `lightbox.enabled` and `lightbox.allowEditing`.
* @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize` and
* `background.backgroundSize`.
* @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize`,
* `background.backgroundSize` and `dimensions.aspectRatio`.
* @var array
*/
const VALID_SETTINGS = array(
@ -380,7 +382,8 @@ class WP_Theme_JSON {
),
'custom' => null,
'dimensions' => array(
'minHeight' => null,
'aspectRatio' => null,
'minHeight' => null,
),
'layout' => array(
'contentSize' => null,
@ -438,6 +441,7 @@ class WP_Theme_JSON {
* updated `blockGap` to be allowed at any level.
* @since 6.2.0 Added `outline`, and `minHeight` properties.
* @since 6.3.0 Added support for `typography.textColumns`.
* @since 6.5.0 Added support for `dimensions.aspectRatio`.
*
* @var array
*/
@ -458,7 +462,8 @@ class WP_Theme_JSON {
'text' => null,
),
'dimensions' => array(
'minHeight' => null,
'aspectRatio' => null,
'minHeight' => null,
),
'filter' => array(
'duotone' => null,
@ -575,7 +580,7 @@ class WP_Theme_JSON {
* @since 6.0.0
* @since 6.2.0 Added `dimensions.minHeight` and `position.sticky`.
* @since 6.4.0 Added `background.backgroundImage`.
* @since 6.5.0 Added `background.backgroundSize`.
* @since 6.5.0 Added `background.backgroundSize` and `dimensions.aspectRatio`.
* @var array
*/
const APPEARANCE_TOOLS_OPT_INS = array(
@ -589,6 +594,7 @@ class WP_Theme_JSON {
array( 'color', 'heading' ),
array( 'color', 'button' ),
array( 'color', 'caption' ),
array( 'dimensions', 'aspectRatio' ),
array( 'dimensions', 'minHeight' ),
array( 'position', 'sticky' ),
array( 'spacing', 'blockGap' ),
@ -1921,6 +1927,7 @@ class WP_Theme_JSON {
* @since 5.8.0
* @since 5.9.0 Added the `$settings` and `$properties` parameters.
* @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters.
* @since 6.5.0 Output a `min-height: unset` rule when `aspect-ratio` is set.
*
* @param array $styles Styles to process.
* @param array $settings Theme settings.
@ -1992,6 +1999,15 @@ class WP_Theme_JSON {
$value = wp_get_typography_font_size_value( array( 'size' => $value ) );
}
if ( 'aspect-ratio' === $css_property ) {
// For aspect ratio to work, other dimensions rules must be unset.
// This ensures that a fixed height does not override the aspect ratio.
$declarations[] = array(
'name' => 'min-height',
'value' => 'unset',
);
}
$declarations[] = array(
'name' => $css_property,
'value' => $value,

14
wp-includes/style-engine/class-wp-style-engine.php
View File

@ -23,7 +23,8 @@
* @since 6.1.0
* @since 6.3.0 Added support for text-columns.
* @since 6.4.0 Added support for background.backgroundImage.
* @since 6.5.0 Added support for background.backgroundPosition and background.backgroundRepeat.
* @since 6.5.0 Added support for background.backgroundPosition,
* background.backgroundRepeat and dimensions.aspectRatio.
*/
#[AllowDynamicProperties]
final class WP_Style_Engine {
@ -190,7 +191,16 @@ final class WP_Style_Engine {
),
),
'dimensions' => array(
'minHeight' => array(
'aspectRatio' => array(
'property_keys' => array(
'default' => 'aspect-ratio',
),
'path' => array( 'dimensions', 'aspectRatio' ),
'classnames' => array(
'has-aspect-ratio' => true,
),
),
'minHeight' => array(
'property_keys' => array(
'default' => 'min-height',
),

2
wp-includes/version.php
View File

@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '6.5-alpha-57490';
$wp_version = '6.5-alpha-57491';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.