Skip to content

Add support for aspect ratio and related controls in viewport states #12077

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
tellthemachines wants to merge 2 commits into from
Closed

Add support for aspect ratio and related controls in viewport states #12077

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0e3946e
Add support for aspect ratio and related controls in viewport states
tellthemachines Jun 4, 2026
6832566
update to match final state
tellthemachines Jun 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 23 additions & 3 deletions src/wp-includes/block-supports/dimensions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,25 @@ function wp_apply_dimensions_support( $block_type, $block_attributes ) {
return $attributes;
}

/**
* Checks whether an aspectRatio block-support value is explicitly set.
*
* @since 7.1.0
* @access private
*
* @param mixed $aspect_ratio Aspect-ratio value.
* @return bool Whether the value is an explicit aspect ratio.
*/
function wp_is_explicit_aspect_ratio_value( $aspect_ratio ) {
if ( ! is_string( $aspect_ratio ) && ! is_numeric( $aspect_ratio ) ) {
return false;
}

$aspect_ratio = strtolower( trim( (string) $aspect_ratio ) );

return '' !== $aspect_ratio && 'auto' !== $aspect_ratio;
}

/**
* Renders server-side dimensions styles to the block wrapper.
* This block support uses the `render_block` hook to ensure that
Expand Down Expand Up @@ -113,11 +132,12 @@ function wp_render_dimensions_support( $block_content, $block ) {
$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.
// To ensure the aspect ratio does not get overridden by `minHeight` or `height` unset any existing rule.
if (
isset( $dimensions_block_styles['aspectRatio'] )
wp_is_explicit_aspect_ratio_value( $dimensions_block_styles['aspectRatio'] )
) {
$dimensions_block_styles['minHeight'] = 'unset';
$dimensions_block_styles['height'] = 'unset';
} elseif (
isset( $block_attributes['style']['dimensions']['minHeight'] ) ||
isset( $block_attributes['minHeight'] )
Expand Down Expand Up @@ -149,7 +169,7 @@ function wp_render_dimensions_support( $block_content, $block ) {
foreach ( explode( ' ', $styles['classnames'] ) as $class_name ) {
if (
str_contains( $class_name, 'aspect-ratio' ) &&
! isset( $block_attributes['style']['dimensions']['aspectRatio'] )
! wp_is_explicit_aspect_ratio_value( $block_attributes['style']['dimensions']['aspectRatio'] ?? null )
) {
continue;
}
Expand Down
57 changes: 54 additions & 3 deletions src/wp-includes/block-supports/states.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,56 @@ function wp_get_state_declarations_with_background_resets( $declarations ) {
return $declarations;
}

/**
* Adds fallback dimension styles for aspectRatio and height block-support values.
*
* @since 7.1.0
*
* @param array $state_style State style object.
* @return array State style object with fallback dimension styles applied where needed.
*/
function wp_get_state_style_with_fallback_dimension_styles( $state_style ) {
if ( ! is_array( $state_style ) ) {
return $state_style;
}

$dimensions = isset( $state_style['dimensions'] ) && is_array( $state_style['dimensions'] )
? $state_style['dimensions']
: array();

if ( empty( $dimensions ) ) {
return $state_style;
}

if ( wp_is_explicit_aspect_ratio_value( $dimensions['aspectRatio'] ?? null ) ) {
return array_replace_recursive(
$state_style,
array(
'dimensions' => array(
'minHeight' => 'unset',
'height' => 'unset',
),
)
);
}

$has_min_height = isset( $dimensions['minHeight'] ) && ( is_string( $dimensions['minHeight'] ) || is_numeric( $dimensions['minHeight'] ) ) && '' !== trim( (string) $dimensions['minHeight'] );
$has_height = isset( $dimensions['height'] ) && ( is_string( $dimensions['height'] ) || is_numeric( $dimensions['height'] ) ) && '' !== trim( (string) $dimensions['height'] );

if ( $has_min_height || $has_height ) {
return array_replace_recursive(
$state_style,
array(
'dimensions' => array(
'aspectRatio' => 'unset',
),
)
);
}

return $state_style;
}

/**
* Adds a style fragment to a selector-keyed state style group.
*
Expand Down Expand Up @@ -267,8 +317,9 @@ function wp_get_block_state_style_rules( $state_styles, $block_type, $rules_grou
}

foreach ( wp_get_state_style_groups( $state_style, $block_selectors ) as $group ) {
$style = wp_get_state_style_with_fallback_dimension_styles( $group['style'] );
$compiled = wp_style_engine_get_styles(
wp_normalize_state_style_for_css_output( $group['style'] )
wp_normalize_state_style_for_css_output( $style )
);

if ( ! empty( $compiled['declarations'] ) ) {
Expand Down Expand Up @@ -490,8 +541,8 @@ function wp_render_block_states_support( $block_content, $block ) {
*/
$style_rules = array();
foreach ( $css_rules as $rule ) {
$declarations = array();
foreach ( $rule['declarations'] as $property => $value ) {
$declarations = $rule['declarations'];
foreach ( $declarations as $property => $value ) {
$declarations[ $property ] = is_string( $value ) && str_contains( $value, '!important' )
? $value
: $value . ' !important';
Expand Down
6 changes: 6 additions & 0 deletions src/wp-includes/style-engine/class-wp-style-engine.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,12 @@ final class WP_Style_Engine {
'dimension' => '--wp--preset--dimension--$slug',
),
),
'objectFit' => array(
'property_keys' => array(
'default' => 'object-fit',
),
'path' => array( 'dimensions', 'objectFit' ),
),
'width' => array(
'property_keys' => array(
'default' => 'width',
Expand Down
81 changes: 81 additions & 0 deletions tests/phpunit/tests/block-supports/states.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,87 @@ public function test_no_background_reset_when_no_background_color() {
$this->assertSame( $input, $actual );
}

/**
* Tests that fallback dimension styles are added for aspect ratio.
*
* @covers ::wp_get_state_style_with_fallback_dimension_styles
*
* @ticket 65239
*/
public function test_adds_fallback_dimension_styles_for_aspect_ratio() {
$actual = wp_get_state_style_with_fallback_dimension_styles(
array(
'dimensions' => array(
'aspectRatio' => '16/9',
),
)
);

$this->assertSame(
array(
'dimensions' => array(
'aspectRatio' => '16/9',
'minHeight' => 'unset',
'height' => 'unset',
),
),
$actual
);
}

/**
* Tests that fallback dimension styles are not added for the default aspect ratio.
*
* @covers ::wp_get_state_style_with_fallback_dimension_styles
*
* @ticket 65239
*/
public function test_does_not_add_fallback_dimension_styles_for_default_aspect_ratio() {
$actual = wp_get_state_style_with_fallback_dimension_styles(
array(
'dimensions' => array(
'aspectRatio' => 'auto',
),
)
);

$this->assertSame(
array(
'dimensions' => array(
'aspectRatio' => 'auto',
),
),
$actual
);
}

/**
* Tests that fallback aspectRatio styles are added for height.
*
* @covers ::wp_get_state_style_with_fallback_dimension_styles
*
* @ticket 65239
*/
public function test_adds_fallback_aspect_ratio_style_for_height() {
$actual = wp_get_state_style_with_fallback_dimension_styles(
array(
'dimensions' => array(
'height' => '20rem',
),
)
);

$this->assertSame(
array(
'dimensions' => array(
'height' => '20rem',
'aspectRatio' => 'unset',
),
),
$actual
);
}

/**
* Tests that modifier classes on the first compound selector are preserved
* when state selectors are scoped to the block wrapper.
Expand Down
50 changes: 47 additions & 3 deletions tests/phpunit/tests/block-supports/wpRenderDimensionsSupport.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ public function test_dimensions_block_support( $theme_name, $block_name, $dimens
*/
public function data_dimensions_block_support() {
return array(
'aspect ratio style is applied, with min-height unset' => array(
'aspect ratio style is applied, with min-height and height unset' => array(
'theme_name' => 'block-theme-child-with-fluid-typography',
'block_name' => 'test/dimensions-rules-are-output',
'dimensions_settings' => array(
Expand All @@ -130,7 +130,7 @@ public function data_dimensions_block_support() {
'dimensions_style' => array(
'aspectRatio' => '16/9',
),
'expected_wrapper' => '<div class="has-aspect-ratio" style="aspect-ratio:16/9;min-height:unset;">Content</div>',
'expected_wrapper' => '<div class="has-aspect-ratio" style="aspect-ratio:16/9;height:unset;min-height:unset;">Content</div>',
'wrapper' => '<div>Content</div>',
),
'dimensions style is appended if a style attribute already exists' => array(
Expand All @@ -142,7 +142,7 @@ public function data_dimensions_block_support() {
'dimensions_style' => array(
'aspectRatio' => '16/9',
),
'expected_wrapper' => '<div class="wp-block-test has-aspect-ratio" style="color:red;aspect-ratio:16/9;min-height:unset;">Content</div>',
'expected_wrapper' => '<div class="wp-block-test has-aspect-ratio" style="color:red;aspect-ratio:16/9;height:unset;min-height:unset;">Content</div>',
'wrapper' => '<div class="wp-block-test" style="color:red;">Content</div>',
),
'aspect ratio style is unset if block has min-height set' => array(
Expand Down Expand Up @@ -171,4 +171,48 @@ public function data_dimensions_block_support() {
),
);
}

/**
* Tests that fallback height styles are not added for the default aspect ratio.
*
* @ticket 65239
*
* @covers ::wp_render_dimensions_support
*/
public function test_default_aspect_ratio_does_not_unset_height_styles() {
$this->test_block_name = 'test/default-aspect-ratio-does-not-unset-height-styles';
register_block_type(
$this->test_block_name,
array(
'api_version' => 3,
'attributes' => array(
'style' => array(
'type' => 'object',
),
),
'supports' => array(
'dimensions' => array(
'aspectRatio' => true,
),
),
)
);

$actual = wp_render_dimensions_support(
'<div class="wp-block-test">Hello</div>',
array(
'blockName' => $this->test_block_name,
'attrs' => array(
'style' => array(
'dimensions' => array(
'aspectRatio' => 'auto',
),
),
),
)
);

$this->assertStringNotContainsString( 'height:unset', $actual );
$this->assertStringNotContainsString( 'min-height:unset', $actual );
}
}
12 changes: 7 additions & 5 deletions tests/phpunit/tests/style-engine/styleEngine.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,16 +122,18 @@ public function data_wp_style_engine_get_styles() {
'inline_valid_dimension_preset_style' => array(
'block_styles' => array(
'dimensions' => array(
'width' => 'var:preset|dimension|large',
'height' => 'var:preset|dimension|modestly-small',
'width' => 'var:preset|dimension|large',
'height' => 'var:preset|dimension|modestly-small',
'objectFit' => 'cover',
),
),
'options' => null,
'expected_output' => array(
'css' => 'height:var(--wp--preset--dimension--modestly-small);width:var(--wp--preset--dimension--large);',
'css' => 'height:var(--wp--preset--dimension--modestly-small);object-fit:cover;width:var(--wp--preset--dimension--large);',
'declarations' => array(
'height' => 'var(--wp--preset--dimension--modestly-small)',
'width' => 'var(--wp--preset--dimension--large)',
'height' => 'var(--wp--preset--dimension--modestly-small)',
'object-fit' => 'cover',
'width' => 'var(--wp--preset--dimension--large)',
),
),
),
Expand Down
Loading