Try adding global styles support

WordPress · Dec 20, 2023 · c071b77 · c071b77
1 parent c5e6c1a
commit c071b77
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -46,6 +46,7 @@ export interface Style {
 		left?: BorderIndividualStyles< 'left' >;
 	};
 	dimensions?: {
+		aspectRatio?: CSSProperties[ 'aspectRatio' ];
 		minHeight?: CSSProperties[ 'minHeight' ];
 	};
 	spacing?: {