diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js index 218d3b9815180..0d486e2945263 100644 --- a/packages/block-editor/src/components/global-styles/dimensions-panel.js +++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js @@ -378,7 +378,6 @@ export default function DimensionsPanel( { const aspectRatioValue = decodeValue( inheritedValue?.dimensions?.aspectRatio ); - // Gotta change something here const setAspectRatioValue = ( newValue ) => { const tempValue = setImmutably( value, diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index 1cd63ef4d03f0..ac51a0ca443db 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js @@ -434,6 +434,12 @@ export function getStylesDeclarations( ); } + // For aspect ratio to work, other dimensions rules (and Cover block defaults) must be unset. + // This ensures that a fixed height does not override the aspect ratio. + if ( cssProperty === 'aspect-ratio' ) { + output.push( 'min-height: unset' ); + } + output.push( `${ cssProperty }: ${ ruleValue }` ); } ); diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index 1ea6610496bec..6f03ddac2c650 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -157,13 +157,13 @@ export function hasDimensionsSupport( blockName, feature = 'any' ) { export default { useBlockProps, - attributeKeys: [ 'style' ], + attributeKeys: [ 'minHeight', 'style' ], hasSupport( name ) { return hasDimensionsSupport( name, 'aspectRatio' ); }, }; -function useBlockProps( { name, style } ) { +function useBlockProps( { name, minHeight, style } ) { if ( ! hasDimensionsSupport( name, 'aspectRatio' ) || shouldSkipSerialization( name, DIMENSIONS_SUPPORT_KEY, 'aspectRatio' ) @@ -175,7 +175,25 @@ function useBlockProps( { name, style } ) { 'has-aspect-ratio': !! style?.dimensions?.aspectRatio, } ); - return { className }; + // Allow dimensions-based inline style overrides to override any global styles rules that + // might be set for the block, and therefore affect the display of the aspect ratio. + const inlineStyleOverrides = {}; + + // Apply rules to unset incompatible styles. + // Note that a set `aspectRatio` will win out if both an aspect ratio and a minHeight are set. + // This is because the aspect ratio is a newer block support, so (in theory) any aspect ratio + // that is set should be intentional and should override any existing minHeight. The Cover block + // and dimensions controls have logic that will manually clear the aspect ratio if a minHeight + // is set. + if ( style?.dimensions?.aspectRatio ) { + // To ensure the aspect ratio does not get overridden by `minHeight` unset any existing rule. + inlineStyleOverrides.minHeight = 'unset'; + } else if ( minHeight || style?.dimensions?.minHeight ) { + // To ensure the minHeight does not get overridden by `aspectRatio` unset any existing rule. + inlineStyleOverrides.aspectRatio = 'unset'; + } + + return { className, style: inlineStyleOverrides }; } /** diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index a619318c5dbe8..3b4eac41a0d3b 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -2,6 +2,7 @@ .wp-block-cover { position: relative; background-position: center center; + min-height: 430px; display: flex; justify-content: center; align-items: center; @@ -15,12 +16,6 @@ // Keep the flex layout direction to the physical direction (LTR) in RTL languages. /*rtl:raw: direction: ltr; */ - // When an aspect ratio is set, the height is calculated based on the width, so don't - // manually set a min-height. - &:where(:not(.has-aspect-ratio)) { - min-height: 430px; - } - /** * Set a default background color for has-background-dim _unless_ it includes another * background-color class (e.g. has-green-background-color). The presence of another diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index 42f926e8592f4..31c18e56e34d8 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -203,12 +203,6 @@ final class WP_Style_Engine { 'spacing' => '--wp--preset--spacing--$slug', ), ), - 'width' => array( - 'property_keys' => array( - 'default' => 'width', - ), - 'path' => array( 'dimensions', 'width' ), - ), ), 'spacing' => array( 'padding' => array( diff --git a/packages/style-engine/src/styles/dimensions/index.ts b/packages/style-engine/src/styles/dimensions/index.ts index 6222861664f48..4ffb33e65686d 100644 --- a/packages/style-engine/src/styles/dimensions/index.ts +++ b/packages/style-engine/src/styles/dimensions/index.ts @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import type { GeneratedCSSRule, Style, StyleOptions } from '../../types'; +import type { Style, StyleOptions } from '../../types'; import { generateRule } from '../utils'; const minHeight = { @@ -19,31 +19,12 @@ const minHeight = { const aspectRatio = { name: 'aspectRatio', generate: ( style: Style, options: StyleOptions ) => { - const _aspectRatio = style?.dimensions?.aspectRatio; - - const styleRules: GeneratedCSSRule[] = []; - - if ( ! _aspectRatio ) { - return styleRules; - } - - // To ensure the aspect ratio does not get overridden by `minHeight` unset any existing rule. - styleRules.push( { - selector: options.selector, - key: 'minHeight', - value: 'unset', - } ); - - styleRules.push( - ...generateRule( - style, - options, - [ 'dimensions', 'aspectRatio' ], - 'aspectRatio' - ) + return generateRule( + style, + options, + [ 'dimensions', 'aspectRatio' ], + 'aspectRatio' ); - - return styleRules; }, };