@wordpress/block-library 8.28.3 → 8.28.5

package/build-style/style-rtl.css

@@ -613,7 +613,8 @@
   justify-content: center;
   align-items: center;
   padding: 1em;
-  overflow-x: clip;
+  overflow: hidden;
+  overflow: clip;
   box-sizing: border-box; direction: ltr;
   /**
    * Set a default background color for has-background-dim _unless_ it includes another
@@ -3252,6 +3253,8 @@ ul.wp-block-rss.is-grid li {
 .wp-block-search__button svg {
   min-width: 24px;
   min-height: 24px;
+  width: 1.25em;
+  height: 1.25em;
   fill: currentColor;
   vertical-align: text-bottom;
 }

package/build-style/style.css

@@ -618,7 +618,8 @@
   justify-content: center;
   align-items: center;
   padding: 1em;
-  overflow-x: clip;
+  overflow: hidden;
+  overflow: clip;
   box-sizing: border-box;
   /*rtl:raw: direction: ltr; */
   /**
@@ -3286,6 +3287,8 @@ ul.wp-block-rss.is-grid li {
 .wp-block-search__button svg {
   min-width: 24px;
   min-height: 24px;
+  width: 1.25em;
+  height: 1.25em;
   fill: currentColor;
   vertical-align: text-bottom;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.28.3",
+	"version": "8.28.5",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,11 +35,11 @@
 		"@wordpress/api-fetch": "^6.48.1",
 		"@wordpress/autop": "^3.51.1",
 		"@wordpress/blob": "^3.51.1",
-		"@wordpress/block-editor": "^12.19.3",
-		"@wordpress/blocks": "^12.28.3",
-		"@wordpress/components": "^26.0.2",
+		"@wordpress/block-editor": "^12.19.5",
+		"@wordpress/blocks": "^12.28.5",
+		"@wordpress/components": "^26.0.4",
 		"@wordpress/compose": "^6.28.1",
-		"@wordpress/core-data": "^6.28.3",
+		"@wordpress/core-data": "^6.28.5",
 		"@wordpress/data": "^9.21.1",
 		"@wordpress/date": "^4.51.1",
 		"@wordpress/deprecated": "^3.51.1",
@@ -49,17 +49,17 @@
 		"@wordpress/hooks": "^3.51.1",
 		"@wordpress/html-entities": "^3.51.1",
 		"@wordpress/i18n": "^4.51.1",
-		"@wordpress/icons": "^9.42.1",
-		"@wordpress/interactivity": "^5.0.1",
-		"@wordpress/interactivity-router": "^1.1.1",
+		"@wordpress/icons": "^9.42.3",
+		"@wordpress/interactivity": "^5.0.3",
+		"@wordpress/interactivity-router": "^1.1.3",
 		"@wordpress/keycodes": "^3.51.1",
 		"@wordpress/notices": "^4.19.1",
-		"@wordpress/patterns": "^1.12.3",
+		"@wordpress/patterns": "^1.12.5",
 		"@wordpress/primitives": "^3.49.1",
 		"@wordpress/private-apis": "^0.33.1",
-		"@wordpress/reusable-blocks": "^4.28.3",
-		"@wordpress/rich-text": "^6.28.2",
-		"@wordpress/server-side-render": "^4.28.3",
+		"@wordpress/reusable-blocks": "^4.28.5",
+		"@wordpress/rich-text": "^6.28.3",
+		"@wordpress/server-side-render": "^4.28.5",
 		"@wordpress/url": "^3.52.1",
 		"@wordpress/viewport": "^5.28.1",
 		"@wordpress/wordcount": "^3.51.1",
@@ -80,5 +80,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b12d75c5c5256fda2a0509bb432e20ddd3354d5e"
+	"gitHead": "4927ea437069f9aed12f696df294a79bd8e12fd5"
 }

package/src/block/deprecated.js

@@ -1,4 +1,75 @@
-// v1: Migrate and rename the `overrides` attribute to the `content` attribute.
+const isObject = ( obj ) =>
+	typeof obj === 'object' && ! Array.isArray( obj ) && obj !== null;
+
+// v2: Migrate to a more condensed version of the 'content' attribute attribute.
+const v2 = {
+	attributes: {
+		ref: {
+			type: 'number',
+		},
+		content: {
+			type: 'object',
+		},
+	},
+	supports: {
+		customClassName: false,
+		html: false,
+		inserter: false,
+		renaming: false,
+	},
+	// Force this deprecation to run whenever there's a values sub-property that's an object.
+	//
+	// This could fail in the future if a block ever has binding to a `values` attribute.
+	// Some extra protection is added to ensure `values` is an object, but this only reduces
+	// the likelihood, it doesn't solve it completely.
+	isEligible( { content } ) {
+		return (
+			!! content &&
+			Object.keys( content ).every(
+				( contentKey ) =>
+					content[ contentKey ].values &&
+					isObject( content[ contentKey ].values )
+			)
+		);
+	},
+	/*
+	 * Old attribute format:
+	 * content: {
+	 *     "V98q_x": {
+	 * 	   		// The attribute values are now stored as a 'values' sub-property.
+	 *         values: { content: 'My content value' },
+	 * 	       // ... additional metadata, like the block name can be stored here.
+	 *     }
+	 * }
+	 *
+	 * New attribute format:
+	 * content: {
+	 *     "V98q_x": {
+	 *         content: 'My content value',
+	 *     }
+	 * }
+	 */
+	migrate( attributes ) {
+		const { content, ...retainedAttributes } = attributes;
+
+		if ( content && Object.keys( content ).length ) {
+			const updatedContent = { ...content };
+
+			for ( const contentKey in content ) {
+				updatedContent[ contentKey ] = content[ contentKey ].values;
+			}
+
+			return {
+				...retainedAttributes,
+				content: updatedContent,
+			};
+		}
+
+		return attributes;
+	},
+};
+
+// v1: Rename the `overrides` attribute to the `content` attribute.
 const v1 = {
 	attributes: {
 		ref: {
@@ -23,16 +94,12 @@ const v1 = {
 	 * overrides: {
 	 *     // An key is an id that represents a block.
 	 *     // The values are the attribute values of the block.
-	 *     "V98q_x": { content: 'dwefwefwefwe' }
+	 *     "V98q_x": { content: 'My content value' }
 	 * }
 	 *
 	 * New attribute format:
 	 * content: {
-	 *     "V98q_x": {
-	 * 	   		// The attribute values are now stored as a 'values' sub-property.
-	 *         values: { content: 'dwefwefwefwe' },
-	 * 	       // ... additional metadata, like the block name can be stored here.
-	 *     }
+	 *     "V98q_x": { content: 'My content value' }
 	 * }
 	 *
 	 */
@@ -42,9 +109,7 @@ const v1 = {
 		const content = {};
 
 		Object.keys( overrides ).forEach( ( id ) => {
-			content[ id ] = {
-				values: overrides[ id ],
-			};
+			content[ id ] = overrides[ id ];
 		} );
 
 		return {
@@ -54,4 +119,4 @@ const v1 = {
 	},
 };
 
-export default [ v1 ];
+export default [ v2, v1 ];

package/src/block/edit.js

@@ -42,6 +42,25 @@ const { PARTIAL_SYNCING_SUPPORTED_BLOCKS } = unlock( patternsPrivateApis );
 
 const fullAlignments = [ 'full', 'wide', 'left', 'right' ];
 
+function getLegacyIdMap( blocks, content, nameCount = {} ) {
+	let idToClientIdMap = {};
+	for ( const block of blocks ) {
+		if ( block?.innerBlocks?.length ) {
+			idToClientIdMap = {
+				...idToClientIdMap,
+				...getLegacyIdMap( block.innerBlocks, content, nameCount ),
+			};
+		}
+
+		const id = block.attributes.metadata?.id;
+		const clientId = block.clientId;
+		if ( id && content?.[ id ] ) {
+			idToClientIdMap[ clientId ] = id;
+		}
+	}
+	return idToClientIdMap;
+}
+
 const useInferredLayout = ( blocks, parentLayout ) => {
 	const initialInferredAlignmentRef = useRef();
 
@@ -101,25 +120,31 @@ function getOverridableAttributes( block ) {
 function applyInitialContentValuesToInnerBlocks(
 	blocks,
 	content = {},
-	defaultValues
+	defaultValues,
+	legacyIdMap
 ) {
 	return blocks.map( ( block ) => {
 		const innerBlocks = applyInitialContentValuesToInnerBlocks(
 			block.innerBlocks,
 			content,
-			defaultValues
+			defaultValues,
+			legacyIdMap
 		);
-		const blockId = block.attributes.metadata?.id;
-		if ( ! hasOverridableAttributes( block ) || ! blockId )
+		const metadataName =
+			legacyIdMap?.[ block.clientId ] ?? block.attributes.metadata?.name;
+
+		if ( ! metadataName || ! hasOverridableAttributes( block ) ) {
 			return { ...block, innerBlocks };
+		}
+
 		const attributes = getOverridableAttributes( block );
 		const newAttributes = { ...block.attributes };
 		for ( const attributeKey of attributes ) {
-			defaultValues[ blockId ] ??= {};
-			defaultValues[ blockId ][ attributeKey ] =
+			defaultValues[ metadataName ] ??= {};
+			defaultValues[ metadataName ][ attributeKey ] =
 				block.attributes[ attributeKey ];
 
-			const contentValues = content[ blockId ]?.values;
+			const contentValues = content[ metadataName ];
 			if ( contentValues?.[ attributeKey ] !== undefined ) {
 				newAttributes[ attributeKey ] = contentValues[ attributeKey ];
 			}
@@ -142,29 +167,40 @@ function isAttributeEqual( attribute1, attribute2 ) {
 	return attribute1 === attribute2;
 }
 
-function getContentValuesFromInnerBlocks( blocks, defaultValues ) {
+function getContentValuesFromInnerBlocks( blocks, defaultValues, legacyIdMap ) {
 	/** @type {Record<string, { values: Record<string, unknown>}>} */
 	const content = {};
 	for ( const block of blocks ) {
 		if ( block.name === patternBlockName ) continue;
-		Object.assign(
-			content,
-			getContentValuesFromInnerBlocks( block.innerBlocks, defaultValues )
-		);
-		const blockId = block.attributes.metadata?.id;
-		if ( ! hasOverridableAttributes( block ) || ! blockId ) continue;
+		if ( block.innerBlocks.length ) {
+			Object.assign(
+				content,
+				getContentValuesFromInnerBlocks(
+					block.innerBlocks,
+					defaultValues,
+					legacyIdMap
+				)
+			);
+		}
+		const metadataName =
+			legacyIdMap?.[ block.clientId ] ?? block.attributes.metadata?.name;
+		if ( ! metadataName || ! hasOverridableAttributes( block ) ) {
+			continue;
+		}
+
 		const attributes = getOverridableAttributes( block );
+
 		for ( const attributeKey of attributes ) {
 			if (
 				! isAttributeEqual(
 					block.attributes[ attributeKey ],
-					defaultValues[ blockId ][ attributeKey ]
+					defaultValues?.[ metadataName ]?.[ attributeKey ]
 				)
 			) {
-				content[ blockId ] ??= { values: {}, blockName: block.name };
+				content[ metadataName ] ??= {};
 				// TODO: We need a way to represent `undefined` in the serialized overrides.
 				// Also see: https://github.com/WordPress/gutenberg/pull/57249#discussion_r1452987871
-				content[ blockId ].values[ attributeKey ] =
+				content[ metadataName ][ attributeKey ] =
 					block.attributes[ attributeKey ] === undefined
 						? // TODO: We use an empty string to represent undefined for now until
 						  // we support a richer format for overrides and the block binding API.
@@ -278,8 +314,15 @@ export default function ReusableBlockEdit( {
 		[ editedRecord.blocks, editedRecord.content ]
 	);
 
+	const legacyIdMap = useRef( {} );
+
 	// Apply the initial overrides from the pattern block to the inner blocks.
 	useEffect( () => {
+		// Build a map of clientIds to the old nano id system to provide back compat.
+		legacyIdMap.current = getLegacyIdMap(
+			initialBlocks,
+			initialContent.current
+		);
 		defaultContent.current = {};
 		const originalEditingMode = getBlockEditingMode( patternClientId );
 		// Replace the contents of the blocks with the overrides.
@@ -291,7 +334,8 @@ export default function ReusableBlockEdit( {
 					applyInitialContentValuesToInnerBlocks(
 						initialBlocks,
 						initialContent.current,
-						defaultContent.current
+						defaultContent.current,
+						legacyIdMap.current
 					)
 				);
 			} );
@@ -343,7 +387,8 @@ export default function ReusableBlockEdit( {
 					setAttributes( {
 						content: getContentValuesFromInnerBlocks(
 							blocks,
-							defaultContent.current
+							defaultContent.current,
+							legacyIdMap.current
 						),
 					} );
 				} );

package/src/block/index.php

@@ -46,26 +46,35 @@ function render_block_core_block( $attributes ) {
 	$content = $wp_embed->run_shortcode( $reusable_block->post_content );
 	$content = $wp_embed->autoembed( $content );
 
-	// Back compat, the content attribute was previously named overrides and
-	// had a slightly different format. For blocks that have not been migrated,
-	// also convert the format here so that the provided `pattern/overrides`
-	// context is correct.
-	if ( isset( $attributes['overrides'] ) && ! isset( $attributes['content'] ) ) {
-		$migrated_content = array();
-		foreach ( $attributes['overrides'] as $id => $values ) {
-			$migrated_content[ $id ] = array(
-				'values' => $values,
-			);
+	// Back compat.
+	// For blocks that have not been migrated in the editor, add some back compat
+	// so that front-end rendering continues to work.
+
+	// This matches the `v2` deprecation. Removes the inner `values` property
+	// from every item.
+	if ( isset( $attributes['content'] ) ) {
+		foreach ( $attributes['content'] as &$content_data ) {
+			if ( isset( $content_data['values'] ) ) {
+				$is_assoc_array = is_array( $content_data['values'] ) && ! wp_is_numeric_array( $content_data['values'] );
+
+				if ( $is_assoc_array ) {
+					$content_data = $content_data['values'];
+				}
+			}
 		}
-		$attributes['content'] = $migrated_content;
 	}
-	$has_pattern_overrides = isset( $attributes['content'] );
+
+	// This matches the `v1` deprecation. Rename `overrides` to `content`.
+	if ( isset( $attributes['overrides'] ) && ! isset( $attributes['content'] ) ) {
+		$attributes['content'] = $attributes['overrides'];
+	}
 
 	/**
 	 * We set the `pattern/overrides` context through the `render_block_context`
 	 * filter so that it is available when a pattern's inner blocks are
 	 * rendering via do_blocks given it only receives the inner content.
 	 */
+	$has_pattern_overrides = isset( $attributes['content'] );
 	if ( $has_pattern_overrides ) {
 		$filter_block_context = static function ( $context ) use ( $attributes ) {
 			$context['pattern/overrides'] = $attributes['content'];

package/src/button/edit.js

@@ -45,6 +45,7 @@ import {
 	createBlock,
 	cloneBlock,
 	getDefaultBlockName,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { useMergeRefs, useRefEffect } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -239,7 +240,7 @@ function ButtonEdit( props ) {
 			}
 
 			const blockBindingsSource = unlock(
-				select( blockEditorStore )
+				select( blocksStore )
 			).getBlockBindingsSource( metadata?.bindings?.url?.source );
 
 			return {

package/src/buttons/transforms.js

@@ -4,6 +4,11 @@
 import { createBlock } from '@wordpress/blocks';
 import { __unstableCreateElement as createElement } from '@wordpress/rich-text';
 
+/**
+ * Internal dependencies
+ */
+import { getTransformedMetadata } from '../utils/get-transformed-metadata';
+
 const transforms = {
 	from: [
 		{
@@ -33,10 +38,8 @@ const transforms = {
 					{},
 					// Loop the selected buttons.
 					buttons.map( ( attributes ) => {
-						const element = createElement(
-							document,
-							attributes.content
-						);
+						const { content, metadata } = attributes;
+						const element = createElement( document, content );
 						// Remove any HTML tags.
 						const text = element.innerText || '';
 						// Get first url.
@@ -46,6 +49,13 @@ const transforms = {
 						return createBlock( 'core/button', {
 							text,
 							url,
+							metadata: getTransformedMetadata(
+								metadata,
+								'core/button',
+								( { content: contentBinding } ) => ( {
+									text: contentBinding,
+								} )
+							),
 						} );
 					} )
 				),

package/src/code/transforms.js

@@ -4,6 +4,11 @@
 import { createBlock } from '@wordpress/blocks';
 import { create, toHTMLString } from '@wordpress/rich-text';
 
+/**
+ * Internal dependencies
+ */
+import { getTransformedMetadata } from '../utils/get-transformed-metadata';
+
 const transforms = {
 	from: [
 		{
@@ -14,17 +19,21 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/paragraph' ],
-			transform: ( { content } ) =>
-				createBlock( 'core/code', { content } ),
+			transform: ( { content, metadata } ) =>
+				createBlock( 'core/code', {
+					content,
+					metadata: getTransformedMetadata( metadata, 'core/code' ),
+				} ),
 		},
 		{
 			type: 'block',
 			blocks: [ 'core/html' ],
-			transform: ( { content: text } ) => {
+			transform: ( { content: text, metadata } ) => {
 				return createBlock( 'core/code', {
 					// The HTML is plain text (with plain line breaks), so
 					// convert it to rich text.
 					content: toHTMLString( { value: create( { text } ) } ),
+					metadata: getTransformedMetadata( metadata, 'core/code' ),
 				} );
 			},
 		},
@@ -51,8 +60,14 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/paragraph' ],
-			transform: ( { content } ) =>
-				createBlock( 'core/paragraph', { content } ),
+			transform: ( { content, metadata } ) =>
+				createBlock( 'core/paragraph', {
+					content,
+					metadata: getTransformedMetadata(
+						metadata,
+						'core/paragraph'
+					),
+				} ),
 		},
 	],
 };

package/src/cover/edit/block-controls.js

@@ -8,6 +8,7 @@ import {
 	MediaReplaceFlow,
 	__experimentalBlockAlignmentMatrixControl as BlockAlignmentMatrixControl,
 	__experimentalBlockFullHeightAligmentControl as FullHeightAlignmentControl,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
@@ -15,6 +16,9 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { ALLOWED_MEDIA_TYPES } from '../shared';
+import { unlock } from '../../lock-unlock';
+
+const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
 
 export default function CoverBlockControls( {
 	attributes,
@@ -30,7 +34,10 @@ export default function CoverBlockControls( {
 	const [ prevMinHeightValue, setPrevMinHeightValue ] = useState( minHeight );
 	const [ prevMinHeightUnit, setPrevMinHeightUnit ] =
 		useState( minHeightUnit );
-	const isMinFullHeight = minHeightUnit === 'vh' && minHeight === 100;
+	const isMinFullHeight =
+		minHeightUnit === 'vh' &&
+		minHeight === 100 &&
+		! attributes?.style?.dimensions?.aspectRatio;
 	const toggleMinFullHeight = () => {
 		if ( isMinFullHeight ) {
 			// If there aren't previous values, take the default ones.
@@ -51,10 +58,17 @@ export default function CoverBlockControls( {
 		setPrevMinHeightValue( minHeight );
 		setPrevMinHeightUnit( minHeightUnit );
 
-		// Set full height.
+		// Set full height, and clear any aspect ratio value.
 		return setAttributes( {
 			minHeight: 100,
 			minHeightUnit: 'vh',
+			style: cleanEmptyObject( {
+				...attributes?.style,
+				dimensions: {
+					...attributes?.style?.dimensions,
+					aspectRatio: undefined, // Reset aspect ratio when minHeight is set.
+				},
+			} ),
 		} );
 	};
 

package/src/cover/edit/inspector-controls.js

@@ -308,7 +308,11 @@ export default function CoverInspectorControls( {
 					panelId={ clientId }
 				>
 					<CoverHeightInput
-						value={ minHeight }
+						value={
+							attributes?.style?.dimensions?.aspectRatio
+								? ''
+								: minHeight
+						}
 						unit={ minHeightUnit }
 						onChange={ ( newMinHeight ) =>
 							setAttributes( {

package/src/cover/style.scss

@@ -8,9 +8,10 @@
 	align-items: center;
 	padding: 1em;
 	// Prevent the `wp-block-cover__background` span from overflowing the container when border-radius is applied.
+	// `overflow: hidden` is provided as a fallback for browsers that don't support `overflow: clip`.
+	overflow: hidden;
 	// Use clip instead of overflow: hidden so that sticky position works on child elements.
-	// Use overflow-x instead of overflow so that aspect-ratio allows content to expand the area of the cover block.
-	overflow-x: clip;
+	overflow: clip;
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 	// Keep the flex layout direction to the physical direction (LTR) in RTL languages.

package/src/footnotes/index.php

@@ -105,7 +105,7 @@ function register_block_core_footnotes_post_meta() {
 		}
 	}
 }
-/**
+/*
  * Most post types are registered at priority 10, so use priority 20 here in
  * order to catch them.
 */

package/src/heading/transforms.js

@@ -7,6 +7,7 @@ import { createBlock, getBlockAttributes } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { getLevelFromHeadingNodeName } from './shared';
+import { getTransformedMetadata } from '../utils/get-transformed-metadata';
 
 const transforms = {
 	from: [
@@ -15,12 +16,20 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
-				attributes.map( ( { content, anchor, align: textAlign } ) =>
-					createBlock( 'core/heading', {
-						content,
-						anchor,
-						textAlign,
-					} )
+				attributes.map(
+					( { content, anchor, align: textAlign, metadata } ) =>
+						createBlock( 'core/heading', {
+							content,
+							anchor,
+							textAlign,
+							metadata: getTransformedMetadata(
+								metadata,
+								'core/heading',
+								( { content: contentBinding } ) => ( {
+									content: contentBinding,
+								} )
+							),
+						} )
 				),
 		},
 		{
@@ -82,8 +91,18 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
-				attributes.map( ( { content, textAlign: align } ) =>
-					createBlock( 'core/paragraph', { content, align } )
+				attributes.map( ( { content, textAlign: align, metadata } ) =>
+					createBlock( 'core/paragraph', {
+						content,
+						align,
+						metadata: getTransformedMetadata(
+							metadata,
+							'core/paragraph',
+							( { content: contentBinding } ) => ( {
+								content: contentBinding,
+							} )
+						),
+					} )
 				),
 		},
 	],