@wordpress/block-library 11.0.0 → 11.1.0

package/src/gallery/index.php

@@ -87,6 +87,83 @@ function block_core_gallery_get_column_gap_value( $gap, $fallback_gap ) {
 	return '0' === $gap_column ? '0px' : $gap_column;
 }
 
+/**
+ * Returns whether a value can be used as a Gallery aspect ratio.
+ *
+ * Aspect ratios are interpolated into a generated stylesheet instead of being
+ * set as an inline style, so only the numeric forms produced by aspect ratio
+ * presets (and `auto`) are accepted. A value from saved content that isn't one
+ * of those is ignored rather than emitted, so it can't close the rule early and
+ * inject declarations of its own. The editor applies the same restriction in
+ * `isValidGalleryAspectRatio()`.
+ *
+ * @since 7.1.0
+ *
+ * @param mixed $value Value to check.
+ * @return bool Whether the value is a valid aspect ratio.
+ */
+function block_core_gallery_is_valid_aspect_ratio( $value ) {
+	return is_string( $value ) && 1 === preg_match( '#^(auto|\d+(\.\d+)?(\s*/\s*\d+(\.\d+)?)?)$#', trim( $value ) );
+}
+
+/**
+ * Returns Gallery-specific responsive aspect ratio rules for a viewport.
+ *
+ * Unlike the column and crop rules, these are not scoped to the Flex layout:
+ * the aspect ratio applies to the images in every Gallery layout. They also
+ * cover dynamic galleries, whose images are rendered by the Gallery rather than
+ * carrying their own block attributes.
+ *
+ * @since 7.1.0
+ *
+ * @param string $selector       Gallery block selector.
+ * @param mixed  $viewport_style Viewport style data.
+ * @param string $media_query    Viewport media query.
+ * @return array[] Gallery responsive aspect ratio rules.
+ */
+function block_core_gallery_get_responsive_aspect_ratio_style_rules( $selector, $viewport_style, $media_query ) {
+	if ( ! is_array( $viewport_style ) || ! is_string( $media_query ) ) {
+		return array();
+	}
+
+	$aspect_ratio = $viewport_style['aspectRatio'] ?? null;
+	if ( ! block_core_gallery_is_valid_aspect_ratio( $aspect_ratio ) ) {
+		return array();
+	}
+
+	$aspect_ratio = trim( $aspect_ratio );
+
+	/*
+	 * The base aspect ratio is an inline style on each image, so these
+	 * declarations have to be important to win for the viewport.
+	 *
+	 * Original cancels the base ratio, which means rolling the declaration out
+	 * of the cascade rather than giving it a value. `auto` - and `initial`,
+	 * `unset` and `revert`, which all compute to it - would override the
+	 * `width`/`height` presentational hint that gives a lazy-loaded image its
+	 * placeholder ratio, collapsing the image to zero height until it loads:
+	 * the Featured Image bug fixed in #80386. `revert-layer` drops the
+	 * declaration instead, so the image falls back to that hint while loading,
+	 * to its natural ratio once loaded, and to any ratio a theme set in a lower
+	 * cascade layer. `object-fit` is left as the base set it, so a cropped
+	 * Gallery still crops.
+	 */
+	$declarations = 'auto' === $aspect_ratio
+		? array( 'aspect-ratio' => 'revert-layer !important' )
+		: array(
+			'aspect-ratio' => "{$aspect_ratio} !important",
+			'object-fit'   => 'cover !important',
+		);
+
+	return array(
+		array(
+			'selector'     => "{$selector}.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img",
+			'declarations' => $declarations,
+			'rules_group'  => $media_query,
+		),
+	);
+}
+
 /**
  * Returns Gallery-specific responsive Flex rules for a viewport.
  *
@@ -474,96 +551,133 @@ function block_core_gallery_render( $attributes, $content, $block ) {
 	$processed_content = new WP_HTML_Tag_Processor( $content );
 	$processed_content->next_tag();
 
-	if ( $is_flex_layout ) {
-		// Add a style tag for the --wp--style--unstable-gallery-gap var. The
-		// Gallery's custom Flex layout recalculates Image block widths based on
-		// the current gap so it can maintain the selected number of columns.
-		$style_attr = is_array( $attributes['style'] ?? null )
-			? $attributes['style']
-			: array();
+	$style_attr = is_array( $attributes['style'] ?? null )
+		? $attributes['style']
+		: array();
+	if (
+		defined( 'IS_GUTENBERG_PLUGIN' ) &&
+		IS_GUTENBERG_PLUGIN &&
+		function_exists( 'gutenberg_resolve_style_state_aliases' )
+	) {
+		$style_attr = gutenberg_resolve_style_state_aliases( $style_attr, 'core/gallery' );
+	}
+
+	$global_settings          = wp_get_global_settings();
+	$viewport_settings        = $global_settings['viewport'] ?? null;
+	$responsive_media_queries = array();
+	foreach ( array( 'WP_Theme_JSON_Gutenberg', 'WP_Theme_JSON' ) as $theme_json_class_name ) {
+		if ( method_exists( $theme_json_class_name, 'get_viewport_media_queries' ) ) {
+			$responsive_media_queries = $theme_json_class_name::get_viewport_media_queries( $viewport_settings );
+			break;
+		}
+	}
+
+	// Columns and cropping are Flex-only, but the aspect ratio applies in every
+	// layout, so a Gallery with a viewport aspect ratio needs the per-instance
+	// stylesheet (and the class scoping it) even when it isn't a Flex Gallery.
+	$has_viewport_aspect_ratio = false;
+	foreach ( $responsive_media_queries as $breakpoint => $media_query ) {
+		$viewport_style = $style_attr[ $breakpoint ] ?? null;
 		if (
-			defined( 'IS_GUTENBERG_PLUGIN' ) &&
-			IS_GUTENBERG_PLUGIN &&
-			function_exists( 'gutenberg_resolve_style_state_aliases' )
+			is_array( $viewport_style ) &&
+			block_core_gallery_is_valid_aspect_ratio( $viewport_style['aspectRatio'] ?? null )
 		) {
-			$style_attr = gutenberg_resolve_style_state_aliases( $style_attr, 'core/gallery' );
+			$has_viewport_aspect_ratio = true;
+			break;
 		}
+	}
+
+	/*
+	 * Only generate the gap styles — and, when nothing else needs it, the unique
+	 * classname that exists solely to scope them — if the theme has not opted out
+	 * of layout styles. The responsive aspect ratio rules are not layout styles,
+	 * so they keep rendering either way.
+	 */
+	$should_generate_gap_styles = $is_flex_layout && ! current_theme_supports( 'disable-layout-styles' );
 
+	if ( $should_generate_gap_styles || $has_viewport_aspect_ratio ) {
 		$unique_gallery_classname = wp_unique_id( 'wp-block-gallery-' );
 		$processed_content->add_class( $unique_gallery_classname );
+		$gallery_styles = array();
 
-		// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
-		// gap on the gallery.
-		$fallback_gap = 'var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )';
+		if ( $should_generate_gap_styles ) {
+			// Add a style tag for the --wp--style--unstable-gallery-gap var. The
+			// Gallery's custom Flex layout recalculates Image block widths based on
+			// the current gap so it can maintain the selected number of columns.
 
-		if ( null === $global_styles ) {
-			$global_styles = function_exists( 'wp_get_global_styles' ) ? wp_get_global_styles() : array();
-		}
+			// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
+			// gap on the gallery.
+			$fallback_gap = 'var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )';
 
-		$global_gallery_styles = $global_styles['blocks']['core/gallery'] ?? array();
-		$global_gallery_gap    = $global_gallery_styles['spacing']['blockGap'] ?? $fallback_gap;
-		$has_block_gap         = is_array( $style_attr['spacing'] ?? null ) && array_key_exists( 'blockGap', $style_attr['spacing'] );
-		// Prefer the block's own gap value, then Gallery global styles. Missing
-		// values fall back to the Gallery blockGap default.
-		$block_gap  = $has_block_gap
-			? $style_attr['spacing']['blockGap']
-			: $global_gallery_gap;
-		$gap_column = block_core_gallery_get_column_gap_value( $block_gap, $fallback_gap );
-
-		// Set the CSS variable to the column value for Gallery's flex width calculations.
-		$gallery_styles = array(
-			array(
+			if ( null === $global_styles ) {
+				$global_styles = function_exists( 'wp_get_global_styles' ) ? wp_get_global_styles() : array();
+			}
+
+			$global_gallery_styles = $global_styles['blocks']['core/gallery'] ?? array();
+			$global_gallery_gap    = $global_gallery_styles['spacing']['blockGap'] ?? $fallback_gap;
+			$has_block_gap         = is_array( $style_attr['spacing'] ?? null ) && array_key_exists( 'blockGap', $style_attr['spacing'] );
+			// Prefer the block's own gap value, then Gallery global styles. Missing
+			// values fall back to the Gallery blockGap default.
+			$block_gap  = $has_block_gap
+				? $style_attr['spacing']['blockGap']
+				: $global_gallery_gap;
+			$gap_column = block_core_gallery_get_column_gap_value( $block_gap, $fallback_gap );
+
+			// Set the CSS variable to the column value for Gallery's flex width calculations.
+			$gallery_styles[] = array(
 				'selector'     => ".wp-block-gallery.{$unique_gallery_classname}",
 				'declarations' => array(
 					'--wp--style--unstable-gallery-gap' => $gap_column,
 				),
-			),
-		);
-
-		$global_settings          = wp_get_global_settings();
-		$viewport_settings        = $global_settings['viewport'] ?? null;
-		$responsive_media_queries = array();
-		foreach ( array( 'WP_Theme_JSON_Gutenberg', 'WP_Theme_JSON' ) as $theme_json_class_name ) {
-			if ( method_exists( $theme_json_class_name, 'get_viewport_media_queries' ) ) {
-				$responsive_media_queries = $theme_json_class_name::get_viewport_media_queries( $viewport_settings );
-				break;
-			}
+			);
 		}
 
 		foreach ( $responsive_media_queries as $breakpoint => $media_query ) {
-			$viewport_style                = $style_attr[ $breakpoint ] ?? null;
-			$has_viewport_block_gap        = is_array( $viewport_style ) &&
-				is_array( $viewport_style['spacing'] ?? null ) &&
-				array_key_exists( 'blockGap', $viewport_style['spacing'] );
-			$has_global_viewport_block_gap = is_array( $global_gallery_styles[ $breakpoint ]['spacing'] ?? null ) &&
-				array_key_exists( 'blockGap', $global_gallery_styles[ $breakpoint ]['spacing'] );
-
-			// Viewport-specific block values win. Gallery global viewport values
-			// only apply when the block has no base gap, so they do not override an instance value.
-			if ( $has_viewport_block_gap ) {
-				$viewport_gap = $viewport_style['spacing']['blockGap'];
-			} elseif ( ! $has_block_gap && $has_global_viewport_block_gap ) {
-				$viewport_gap = $global_gallery_styles[ $breakpoint ]['spacing']['blockGap'];
-			} else {
-				$viewport_gap = null;
-			}
+			$viewport_style = $style_attr[ $breakpoint ] ?? null;
+
+			if ( $should_generate_gap_styles ) {
+				$has_viewport_block_gap        = is_array( $viewport_style ) &&
+					is_array( $viewport_style['spacing'] ?? null ) &&
+					array_key_exists( 'blockGap', $viewport_style['spacing'] );
+				$has_global_viewport_block_gap = is_array( $global_gallery_styles[ $breakpoint ]['spacing'] ?? null ) &&
+					array_key_exists( 'blockGap', $global_gallery_styles[ $breakpoint ]['spacing'] );
+
+				// Viewport-specific block values win. Gallery global viewport values
+				// only apply when the block has no base gap, so they do not override an instance value.
+				if ( $has_viewport_block_gap ) {
+					$viewport_gap = $viewport_style['spacing']['blockGap'];
+				} elseif ( ! $has_block_gap && $has_global_viewport_block_gap ) {
+					$viewport_gap = $global_gallery_styles[ $breakpoint ]['spacing']['blockGap'];
+				} else {
+					$viewport_gap = null;
+				}
 
-			if ( null !== $viewport_gap ) {
-				$gallery_styles[] = array(
-					'selector'     => ".wp-block-gallery.{$unique_gallery_classname}",
-					'declarations' => array(
-						'--wp--style--unstable-gallery-gap' => block_core_gallery_get_column_gap_value(
-							$viewport_gap,
-							$fallback_gap
+				if ( null !== $viewport_gap ) {
+					$gallery_styles[] = array(
+						'selector'     => ".wp-block-gallery.{$unique_gallery_classname}",
+						'declarations' => array(
+							'--wp--style--unstable-gallery-gap' => block_core_gallery_get_column_gap_value(
+								$viewport_gap,
+								$fallback_gap
+							),
 						),
-					),
-					'rules_group'  => $media_query,
+						'rules_group'  => $media_query,
+					);
+				}
+
+				$gallery_styles = array_merge(
+					$gallery_styles,
+					block_core_gallery_get_responsive_flex_style_rules(
+						".{$unique_gallery_classname}",
+						$viewport_style,
+						$media_query
+					)
 				);
 			}
 
 			$gallery_styles = array_merge(
 				$gallery_styles,
-				block_core_gallery_get_responsive_flex_style_rules(
+				block_core_gallery_get_responsive_aspect_ratio_style_rules(
 					".{$unique_gallery_classname}",
 					$viewport_style,
 					$media_query

package/src/gallery/responsive-styles.js

@@ -8,6 +8,28 @@ export function isValidGalleryColumns( value ) {
 	return Number.isInteger( value ) && value >= 1 && value <= MAX_COLUMNS;
 }
 
+/*
+ * Aspect ratios are interpolated into a generated stylesheet instead of being
+ * set as an inline style, so only the numeric forms produced by aspect ratio
+ * presets (and `auto`) are accepted. A value from saved content that isn't one
+ * of those is ignored rather than emitted, so it can't close the rule early and
+ * inject declarations of its own. The frontend applies the same restriction in
+ * `block_core_gallery_is_valid_aspect_ratio()`.
+ */
+const ASPECT_RATIO_PATTERN = /^(auto|\d+(\.\d+)?(\s*\/\s*\d+(\.\d+)?)?)$/;
+
+/**
+ * Returns whether a value can be used as a Gallery aspect ratio.
+ *
+ * @param {*} value Value to check.
+ * @return {boolean} Whether the value is a valid aspect ratio.
+ */
+export function isValidGalleryAspectRatio( value ) {
+	return (
+		typeof value === 'string' && ASPECT_RATIO_PATTERN.test( value.trim() )
+	);
+}
+
 /**
  * Returns Gallery styles for a viewport.
  *
@@ -75,11 +97,15 @@ export function getUpdatedGalleryStyle( {
 }
 
 function getGallerySelector( selector ) {
-	return `${ selector }.wp-block-gallery.has-nested-images:where(.is-layout-flex)`;
+	return `${ selector }.wp-block-gallery.has-nested-images`;
+}
+
+function getFlexGallerySelector( selector ) {
+	return `${ getGallerySelector( selector ) }:where(.is-layout-flex)`;
 }
 
 function getImageSelector( selector ) {
-	return `${ getGallerySelector(
+	return `${ getFlexGallerySelector(
 		selector
 	) } figure.wp-block-image:not(#individual-image)`;
 }
@@ -92,7 +118,7 @@ function getColumnsCSS( selector, columns ) {
 			? '100%'
 			: `calc((100% - (var(--wp--style--unstable-gallery-gap, 16px) * ${
 					columns - 1
-			  })) / ${ columns })`;
+				})) / ${ columns })`;
 
 	return `${ getImageSelector( selector ) }{width:${ width } !important;}`;
 }
@@ -110,15 +136,39 @@ function getImageCropCSS( selector, imageCrop ) {
 	return `${ imageSelector }{align-self:auto !important;margin-top:0 !important;margin-bottom:auto !important;}${ wrapperSelector }{display:block !important;}${ linkSelector }{display:inline-block !important;}${ mediaSelector }{width:auto !important;flex:0 1 auto !important;height:auto !important;object-fit:fill !important;}`;
 }
 
+function getAspectRatioCSS( selector, aspectRatio ) {
+	const imageSelector = `${ getGallerySelector(
+		selector
+	) } figure.wp-block-image:not(#individual-image) img`;
+	const ratio = aspectRatio.trim();
+
+	if ( ratio === 'auto' ) {
+		/*
+		 * We need an explicit value here to cancel out the base aspect ratio. `auto` — and
+		 * `initial`, `unset` and `revert`, which all compute to it — would
+		 * override the `width`/`height` presentational hint that gives a
+		 * lazy-loaded image its placeholder ratio, collapsing the image to zero
+		 * height until it loads.
+		 * `revert-layer` drops the declaration instead, so the image falls back
+		 * to that hint while loading, to its natural ratio once loaded, and to
+		 * any ratio a theme set in a lower cascade layer. `object-fit` is left
+		 * as the base set it, so a cropped Gallery still crops.
+		 */
+		return `${ imageSelector }{aspect-ratio:revert-layer !important;}`;
+	}
+
+	return `${ imageSelector }{aspect-ratio:${ ratio } !important;object-fit:cover !important;}`;
+}
+
 /**
- * Generates Gallery-specific responsive Flex CSS.
+ * Generates Gallery-specific responsive CSS.
  *
  * @param {string} selector     Gallery block selector.
  * @param {Object} style        Gallery block style attribute.
  * @param {Object} mediaQueries Map of viewport keys to media queries.
  * @return {string} Responsive Gallery CSS.
  */
-export function getGalleryResponsiveFlexCSS( selector, style, mediaQueries ) {
+export function getGalleryResponsiveCSS( selector, style, mediaQueries ) {
 	if ( ! isObject( mediaQueries ) ) {
 		return '';
 	}
@@ -140,6 +190,10 @@ export function getGalleryResponsiveFlexCSS( selector, style, mediaQueries ) {
 				css += getImageCropCSS( selector, viewportStyle.imageCrop );
 			}
 
+			if ( isValidGalleryAspectRatio( viewportStyle.aspectRatio ) ) {
+				css += getAspectRatioCSS( selector, viewportStyle.aspectRatio );
+			}
+
 			return css ? `${ mediaQuery }{${ css }}` : '';
 		} )
 		.join( '' );

package/src/gallery/test/edit.jsdom.test.js

@@ -26,6 +26,22 @@ const IMAGE_ATTRIBUTES = {
 
 const VIEWPORT_STATE_INITIALIZER = 'test/viewport-state-initializer';
 
+// The Gallery only offers its aspect ratio control when the theme or the
+// defaults provide ratios to choose from.
+const ASPECT_RATIO_SETTINGS = {
+	__experimentalFeatures: {
+		dimensions: {
+			defaultAspectRatios: true,
+			aspectRatios: {
+				default: [
+					{ name: 'Square - 1:1', slug: 'square', ratio: '1' },
+					{ name: 'Wide - 16:9', slug: '16-9', ratio: '16/9' },
+				],
+			},
+		},
+	},
+};
+
 function ViewportStateInitializer() {
 	const { setResponsiveEditing, setStyleStateViewport } = unlock(
 		useDispatch( blockEditorStore )
@@ -43,10 +59,11 @@ function ViewportStateInitializer() {
  * Registers the core blocks up front so inner blocks can be created before the
  * editor is initialized, then renders the given block.
  *
- * @param {Object} block Block to render, created with `createBlock`.
+ * @param {Object} block    Block to render, created with `createBlock`.
+ * @param {Object} settings Additional editor settings.
  */
-async function setup( block ) {
-	return initializeEditor( block, false );
+async function setup( block, settings ) {
+	return initializeEditor( block, false, settings );
 }
 
 describe( 'Gallery block', () => {
@@ -151,6 +168,57 @@ describe( 'Gallery block', () => {
 			).not.toBeInTheDocument();
 		} );
 
+		test( 'offers the aspect ratio for a viewport state in a non-Flex layout', async () => {
+			await setup(
+				[
+					createGallery( { layout: { type: 'grid' } } ),
+					createBlock( VIEWPORT_STATE_INITIALIZER ),
+				],
+				ASPECT_RATIO_SETTINGS
+			);
+			await selectBlock( 'Block: Gallery Grid' );
+
+			// Columns and crop to fit are Flex-only, but the aspect ratio
+			// applies in every layout, so the Grid Gallery has a viewport
+			// setting to show.
+			expect(
+				await screen.findByRole( 'combobox', { name: 'Aspect ratio' } )
+			).toBeInTheDocument();
+			expect(
+				screen.queryByLabelText( 'Crop images to fit' )
+			).not.toBeInTheDocument();
+		} );
+
+		test( 'stores a viewport aspect ratio on the Gallery instead of the images', async () => {
+			await setup(
+				[ createGallery(), createBlock( VIEWPORT_STATE_INITIALIZER ) ],
+				ASPECT_RATIO_SETTINGS
+			);
+			await selectBlock( 'Block: Gallery' );
+
+			await userEvent.selectOptions(
+				await screen.findByRole( 'combobox', { name: 'Aspect ratio' } ),
+				'16/9'
+			);
+
+			// The ratio is rendered from the Gallery's own responsive CSS for
+			// the viewport, so the images keep their base inline style.
+			screen.getAllByRole( 'img' ).forEach( ( image ) => {
+				// eslint-disable-next-line jest-dom/prefer-to-have-style -- toHaveStyle() is disallowed in jsdom tests.
+				expect( image.style.aspectRatio ).not.toBe( '16/9' );
+			} );
+			// The generated stylesheet has no accessible query to find it by.
+			// eslint-disable-next-line testing-library/no-node-access
+			const styleElements = document.querySelectorAll( 'style' );
+			expect(
+				Array.from( styleElements ).some( ( element ) =>
+					element.textContent.includes(
+						'aspect-ratio:16/9 !important'
+					)
+				)
+			).toBe( true );
+		} );
+
 		test( 'preserves layout settings when switching Gallery variations', async () => {
 			await setup(
 				createGallery( {

package/src/gallery/test/responsive-styles.js

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import {
-	getGalleryResponsiveFlexCSS,
+	getGalleryResponsiveCSS,
 	getUpdatedGalleryStyle,
 } from '../responsive-styles';
 
@@ -9,7 +9,7 @@ const MEDIA_QUERIES = {
 	'@mobile': '@media (width <= 480px)',
 };
 
-describe( 'Gallery responsive Flex styles', () => {
+describe( 'Gallery responsive styles', () => {
 	it( 'updates crop to fit for the active viewport', () => {
 		expect(
 			getUpdatedGalleryStyle( {
@@ -51,7 +51,7 @@ describe( 'Gallery responsive Flex styles', () => {
 	} );
 
 	it( 'applies a viewport-specific column count', () => {
-		const css = getGalleryResponsiveFlexCSS(
+		const css = getGalleryResponsiveCSS(
 			'#block-test',
 			{
 				'@mobile': {
@@ -75,7 +75,7 @@ describe( 'Gallery responsive Flex styles', () => {
 	] )(
 		'applies crop to fit set to %s for a viewport',
 		( imageCrop, objectFitRule, wrapperDisplayRule ) => {
-			const css = getGalleryResponsiveFlexCSS(
+			const css = getGalleryResponsiveCSS(
 				'#block-test',
 				{
 					'@tablet': {
@@ -90,13 +90,57 @@ describe( 'Gallery responsive Flex styles', () => {
 		}
 	);
 
+	it( 'removes a viewport aspect ratio that matches the base value', () => {
+		expect(
+			getUpdatedGalleryStyle( {
+				style: { '@mobile': { aspectRatio: '4/3', columns: 1 } },
+				viewport: '@mobile',
+				baseSettings: { aspectRatio: '16/9' },
+				settings: { aspectRatio: '16/9' },
+			} )
+		).toEqual( { '@mobile': { columns: 1 } } );
+	} );
+
+	it( 'applies a viewport-specific aspect ratio in every Gallery layout', () => {
+		const css = getGalleryResponsiveCSS(
+			'#block-test',
+			{ '@mobile': { aspectRatio: '16/9' } },
+			MEDIA_QUERIES
+		);
+
+		expect( css ).toContain( '@media (width <= 480px)' );
+		expect( css ).toContain( 'aspect-ratio:16/9 !important' );
+		expect( css ).toContain( 'object-fit:cover !important' );
+		// Columns and cropping are Flex-only, but an aspect ratio applies to
+		// the images whichever layout the Gallery uses.
+		expect( css ).not.toContain( 'is-layout-flex' );
+	} );
+
+	it( 'cancels the base aspect ratio for a viewport set to Original', () => {
+		const css = getGalleryResponsiveCSS(
+			'#block-test',
+			{ '@tablet': { aspectRatio: 'auto' } },
+			MEDIA_QUERIES
+		);
+
+		// `auto` would override the `width`/`height` presentational hint a
+		// lazy-loaded image relies on for its placeholder ratio, so the
+		// declaration is rolled out of the cascade instead.
+		expect( css ).toContain( 'aspect-ratio:revert-layer !important' );
+		expect( css ).not.toContain( 'aspect-ratio:auto' );
+		// The base `object-fit` is left in place so a cropped Gallery keeps
+		// cropping at this viewport.
+		expect( css ).not.toContain( 'object-fit' );
+	} );
+
 	it( 'ignores malformed viewport Gallery values', () => {
-		const css = getGalleryResponsiveFlexCSS(
+		const css = getGalleryResponsiveCSS(
 			'#block-test',
 			{
 				'@tablet': {
 					columns: '3',
 					imageCrop: 'false',
+					aspectRatio: 16 / 9,
 				},
 				'@mobile': [],
 			},
@@ -105,4 +149,14 @@ describe( 'Gallery responsive Flex styles', () => {
 
 		expect( css ).toBe( '' );
 	} );
+
+	it( 'ignores an aspect ratio that would break out of the generated rule', () => {
+		const css = getGalleryResponsiveCSS(
+			'#block-test',
+			{ '@mobile': { aspectRatio: '16/9;} body{display:none;' } },
+			MEDIA_QUERIES
+		);
+
+		expect( css ).toBe( '' );
+	} );
 } );

package/src/group/README.md

@@ -48,6 +48,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
   - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
+  - `textColumns`: `true`
 - [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout):
   - [`allowSizingOnChildren`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowsizingonchildren): `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):

package/src/group/block.json

@@ -75,6 +75,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"textColumns": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,

package/src/heading/README.md

@@ -28,9 +28,14 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
 - [`className`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#classname): `true`
 - [`splitting`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#splitting): `true`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
   - `padding`: `true`
@@ -38,6 +43,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
   - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
   - [`textAlign`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-textalign): `true`
+  - [`textShadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-textshadow): `true`
   - `fitText`: `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`

package/src/heading/block.json

@@ -30,6 +30,15 @@
 		"anchor": true,
 		"className": true,
 		"splitting": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,
@@ -44,6 +53,7 @@
 				"text": true
 			}
 		},
+		"shadow": true,
 		"spacing": {
 			"margin": true,
 			"padding": true,
@@ -63,6 +73,7 @@
 			"__experimentalTextTransform": true,
 			"__experimentalTextDecoration": true,
 			"__experimentalWritingMode": true,
+			"textShadow": true,
 			"fitText": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true