From c071b7753fee72ebfbf828daf118b024e85c99c5 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 20 Dec 2023 12:27:33 +1100 Subject: [PATCH] Try adding global styles support --- lib/block-supports/dimensions.php | 10 ++++++ lib/class-wp-theme-json-gutenberg.php | 11 +++++++ packages/block-library/src/common.scss | 5 --- packages/block-library/src/cover/style.scss | 4 --- .../style-engine/class-wp-style-engine.php | 6 ++++ .../src/styles/dimensions/index.ts | 33 +++++++++++++++---- packages/style-engine/src/types.ts | 1 + 7 files changed, 55 insertions(+), 15 deletions(-) diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php index 8c1a64bdb4dda..357f132b2b6d9 100644 --- a/lib/block-supports/dimensions.php +++ b/lib/block-supports/dimensions.php @@ -98,6 +98,16 @@ function gutenberg_render_dimensions_support( $block_content, $block ) { $dimensions_block_styles = array(); $dimensions_block_styles['aspectRatio'] = $block_attributes['style']['dimensions']['aspectRatio'] ?? null; + // For aspect ratio to work, the width must be 100%. + // While there is not (yet) a width block support, the following is a defensive check. + // The `width: 100%;` rule will only be output if the block does not have a width set. + if ( + isset( $dimensions_block_styles['aspectRatio'] ) && + ! isset( $block_attributes['style']['dimensions']['width'] ) + ) { + $dimensions_block_styles['width'] = '100%'; + } + $styles = gutenberg_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) ); if ( ! empty( $styles['css'] ) ) { diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 6fd0ae8d369b9..d859d457c8b53 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -211,6 +211,7 @@ class WP_Theme_JSON_Gutenberg { * @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' ), @@ -2094,6 +2095,16 @@ protected static function compute_style_properties( $styles, $settings = array() $value = gutenberg_get_typography_font_size_value( array( 'size' => $value ) ); } + if ( 'aspect-ratio' === $css_property ) { + // For aspect ratio to work, the width must be 100%. + // If a width support is added in the future, this should be updated + // to check if a width value is present before outputting this rule. + $declarations[] = array( + 'name' => 'width', + 'value' => '100%', + ); + } + $declarations[] = array( 'name' => $css_property, 'value' => $value, diff --git a/packages/block-library/src/common.scss b/packages/block-library/src/common.scss index 7243811bb4af7..2e1c2b8b706bc 100644 --- a/packages/block-library/src/common.scss +++ b/packages/block-library/src/common.scss @@ -180,8 +180,3 @@ html :where(.is-position-sticky) { /* stylelint-enable length-zero-no-unit */ } } - -// TODO: Put this rule somewhere else -.has-aspect-ratio { - width: 100%; -} diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 5ead64d1fe83a..2857d48fea279 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -22,10 +22,6 @@ min-height: 430px; } - &:where(.has-aspect-ratio) { - width: 100%; - } - /** * 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 39991560f6598..1206547707b4a 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -191,6 +191,12 @@ 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 4ffb33e65686d..a9b510a60e5fc 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 { Style, StyleOptions } from '../../types'; +import type { GeneratedCSSRule, Style, StyleOptions } from '../../types'; import { generateRule } from '../utils'; const minHeight = { @@ -19,12 +19,33 @@ const minHeight = { const aspectRatio = { name: 'aspectRatio', generate: ( style: Style, options: StyleOptions ) => { - return generateRule( - style, - options, - [ 'dimensions', 'aspectRatio' ], - 'aspectRatio' + const _aspectRatio = style?.dimensions?.aspectRatio; + + const styleRules: GeneratedCSSRule[] = []; + + if ( ! _aspectRatio ) { + return styleRules; + } + + // For aspect ratio to work, the width must be 100%. + // If a width support is added in the future, this should be updated + // to check if a width value is present before outputting this rule. + styleRules.push( { + selector: options.selector, + key: 'width', + value: '100%', + } ); + + styleRules.push( + ...generateRule( + style, + options, + [ 'dimensions', 'aspectRatio' ], + 'aspectRatio' + ) ); + + return styleRules; }, }; diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts index f09f2c213eabb..235b9a2fa36ee 100644 --- a/packages/style-engine/src/types.ts +++ b/packages/style-engine/src/types.ts @@ -46,6 +46,7 @@ export interface Style { left?: BorderIndividualStyles< 'left' >; }; dimensions?: { + aspectRatio?: CSSProperties[ 'aspectRatio' ]; minHeight?: CSSProperties[ 'minHeight' ]; }; spacing?: {