@wordpress/block-library 8.29.0 → 8.31.0

package/src/block/edit.js

@@ -28,7 +28,7 @@ import {
 	BlockControls,
 } from '@wordpress/block-editor';
 import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
-import { parse, cloneBlock } from '@wordpress/blocks';
+import { parse, cloneBlock, store as blocksStore } from '@wordpress/blocks';
 import { RichTextData } from '@wordpress/rich-text';
 
 /**
@@ -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.
@@ -229,6 +265,7 @@ export default function ReusableBlockEdit( {
 		getBlockEditingMode,
 		onNavigateToEntityRecord,
 		editingMode,
+		hasPatternOverridesSource,
 	} = useSelect(
 		( select ) => {
 			const { canUser } = select( coreStore );
@@ -237,6 +274,7 @@ export default function ReusableBlockEdit( {
 				getSettings,
 				getBlockEditingMode: _getBlockEditingMode,
 			} = select( blockEditorStore );
+			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
 			const blocks = getBlocks( patternClientId );
 			const canEdit = canUser( 'update', 'blocks', ref );
 
@@ -248,6 +286,9 @@ export default function ReusableBlockEdit( {
 				onNavigateToEntityRecord:
 					getSettings().onNavigateToEntityRecord,
 				editingMode: _getBlockEditingMode( patternClientId ),
+				hasPatternOverridesSource: !! getBlockBindingsSource(
+					'core/pattern-overrides'
+				),
 			};
 		},
 		[ patternClientId, ref ]
@@ -259,13 +300,20 @@ export default function ReusableBlockEdit( {
 			setBlockEditingMode,
 			innerBlocks,
 			// Disable editing if the pattern itself is disabled.
-			editingMode === 'disabled' ? 'disabled' : undefined
+			editingMode === 'disabled' || ! hasPatternOverridesSource
+				? 'disabled'
+				: undefined
 		);
-	}, [ editingMode, innerBlocks, setBlockEditingMode ] );
+	}, [
+		editingMode,
+		innerBlocks,
+		setBlockEditingMode,
+		hasPatternOverridesSource,
+	] );
 
 	const canOverrideBlocks = useMemo(
-		() => hasOverridableBlocks( innerBlocks ),
-		[ innerBlocks ]
+		() => hasPatternOverridesSource && hasOverridableBlocks( innerBlocks ),
+		[ hasPatternOverridesSource, innerBlocks ]
 	);
 
 	const initialBlocks = useMemo(
@@ -278,26 +326,36 @@ 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.
 		registry.batch( () => {
 			setBlockEditingMode( patternClientId, 'default' );
 			syncDerivedUpdates( () => {
-				replaceInnerBlocks(
-					patternClientId,
-					applyInitialContentValuesToInnerBlocks(
-						initialBlocks,
-						initialContent.current,
-						defaultContent.current
-					)
-				);
+				const blocks = hasPatternOverridesSource
+					? applyInitialContentValuesToInnerBlocks(
+							initialBlocks,
+							initialContent.current,
+							defaultContent.current,
+							legacyIdMap.current
+					  )
+					: initialBlocks;
+
+				replaceInnerBlocks( patternClientId, blocks );
 			} );
 			setBlockEditingMode( patternClientId, originalEditingMode );
 		} );
 	}, [
+		hasPatternOverridesSource,
 		__unstableMarkNextChangeAsNotPersistent,
 		patternClientId,
 		initialBlocks,
@@ -333,6 +391,9 @@ export default function ReusableBlockEdit( {
 	// Sync the `content` attribute from the updated blocks to the pattern block.
 	// `syncDerivedUpdates` is used here to avoid creating an additional undo level.
 	useEffect( () => {
+		if ( ! hasPatternOverridesSource ) {
+			return;
+		}
 		const { getBlocks } = registry.select( blockEditorStore );
 		let prevBlocks = getBlocks( patternClientId );
 		return registry.subscribe( () => {
@@ -343,13 +404,20 @@ export default function ReusableBlockEdit( {
 					setAttributes( {
 						content: getContentValuesFromInnerBlocks(
 							blocks,
-							defaultContent.current
+							defaultContent.current,
+							legacyIdMap.current
 						),
 					} );
 				} );
 			}
 		}, blockEditorStore );
-	}, [ syncDerivedUpdates, patternClientId, registry, setAttributes ] );
+	}, [
+		hasPatternOverridesSource,
+		syncDerivedUpdates,
+		patternClientId,
+		registry,
+		setAttributes,
+	] );
 
 	const handleEditOriginal = () => {
 		onNavigateToEntityRecord( {

package/src/block/index.php

@@ -8,6 +8,10 @@
 /**
  * Renders the `core/block` block on server.
  *
+ * @since 5.0.0
+ *
+ * @global WP_Embed $wp_embed
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Rendered HTML of the referenced block.
@@ -46,26 +50,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'];
@@ -86,6 +99,8 @@ function render_block_core_block( $attributes ) {
 
 /**
  * Registers the `core/block` block.
+ *
+ * @since 5.3.0
  */
 function register_block_core_block() {
 	register_block_type_from_metadata(

package/src/block/test/edit.native.js

@@ -6,6 +6,8 @@ import {
 	initializeEditor,
 	fireEvent,
 	within,
+	setupApiFetch,
+	triggerBlockListLayout,
 } from 'test/helpers';
 
 /**
@@ -42,6 +44,7 @@ const getMockedReusableBlock = ( id ) => ( {
 	id,
 	title: { raw: `Reusable block - ${ id }` },
 	type: 'wp_block',
+	meta: { footnotes: '' },
 } );
 
 beforeAll( () => {
@@ -187,4 +190,68 @@ describe( 'Synced patterns', () => {
 		expect( reusableBlock ).toBeDefined();
 		expect( headingInnerBlock ).toBeDefined();
 	} );
+
+	it( 'renders block after content is updated due to a side effect', async () => {
+		// We have to use different ids because entities are cached in memory.
+		const id = 5;
+		const initialHtml = `<!-- wp:block {"ref":${ id }} /-->`;
+		const endpoint = `/wp/v2/blocks/${ id }`;
+		const fetchMedia = {
+			request: {
+				path: `/wp/v2/media/1?context=edit`,
+			},
+			response: {
+				source_url: 'https://cldup.com/cXyG__fTLN.jpg',
+				id: 1,
+				// We need to include the sizes to trigger the side effect.
+				media_details: {
+					sizes: {
+						large: {
+							source_url:
+								'https://cldup.com/cXyG__fTLN.jpg?w=500',
+						},
+					},
+				},
+			},
+		};
+
+		// Return mocked response for the block endpoint.
+		fetchRequest.mockImplementation( ( { path } ) => {
+			let response = {};
+			if ( path.startsWith( endpoint ) ) {
+				response = getMockedReusableBlock( id );
+			}
+			// Replace content with an Image block to trigger a side effect.
+			// The side effect will be produced when the `source` attribute is replaced
+			// with an URL that includes the width query parameter:
+			// https://cldup.com/cXyG__fTLN.jpg => https://cldup.com/cXyG__fTLN.jpg?w=500
+			response.content.raw = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></figure>
+<!-- /wp:image -->`;
+			return Promise.resolve( response );
+		} );
+
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		const reusableBlock = await screen.findByLabelText(
+			/Pattern Block\. Row 1/
+		);
+
+		// Mock media fetch requests
+		setupApiFetch( [ fetchMedia ] );
+
+		await triggerBlockListLayout(
+			within( reusableBlock ).getByTestId( 'block-list-wrapper' )
+		);
+
+		const imageBlock =
+			await within( reusableBlock ).getByLabelText(
+				'Image Block. Row 1'
+			);
+
+		expect( reusableBlock ).toBeDefined();
+		expect( imageBlock ).toBeDefined();
+	} );
 } );

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';
@@ -123,7 +124,7 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
 	}
 
 	return (
-		<PanelBody title={ __( 'Width settings' ) }>
+		<PanelBody title={ __( 'Settings' ) }>
 			<ButtonGroup aria-label={ __( 'Button width' ) }>
 				{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
 					return (
@@ -239,7 +240,7 @@ function ButtonEdit( props ) {
 			}
 
 			const blockBindingsSource = unlock(
-				select( blockEditorStore )
+				select( blocksStore )
 			).getBlockBindingsSource( metadata?.bindings?.url?.source );
 
 			return {
@@ -328,7 +329,7 @@ function ButtonEdit( props ) {
 						title={ __( 'Unlink' ) }
 						shortcut={ displayShortcut.primaryShift( 'k' ) }
 						onClick={ unlink }
-						isActive={ true }
+						isActive
 					/>
 				) }
 			</BlockControls>

package/src/buttons/edit.native.js

@@ -106,7 +106,7 @@ export default function ButtonsEdit( {
 	const renderFooterAppender = useRef( () => (
 		<View style={ styles.appenderContainer }>
 			<InnerBlocks.ButtonBlockAppender
-				isFloating={ true }
+				isFloating
 				onAddBlock={ onAddNextButton }
 			/>
 		</View>

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/calendar/index.php

@@ -8,6 +8,11 @@
 /**
  * Renders the `core/calendar` block on server.
  *
+ * @since 5.2.0
+ *
+ * @global int $monthnum.
+ * @global int $year.
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Returns the block content.
@@ -76,6 +81,8 @@ function render_block_core_calendar( $attributes ) {
 
 /**
  * Registers the `core/calendar` block on server.
+ *
+ * @since 5.2.0
  */
 function register_block_core_calendar() {
 	register_block_type_from_metadata(
@@ -94,6 +101,8 @@ add_action( 'init', 'register_block_core_calendar' );
  * Used to hide the calendar block when there are no published posts.
  * This compensates for a known Core bug: https://core.trac.wordpress.org/ticket/12016
  *
+ * @since 5.9.0
+ *
  * @return bool Has any published posts or not.
  */
 function block_core_calendar_has_published_posts() {
@@ -117,6 +126,10 @@ function block_core_calendar_has_published_posts() {
  * Queries the database for any published post and saves
  * a flag whether any published post exists or not.
  *
+ * @since 5.9.0
+ *
+ * @global wpdb $wpdb WordPress database abstraction object.
+ *
  * @return bool Has any published posts or not.
  */
 function block_core_calendar_update_has_published_posts() {
@@ -132,6 +145,8 @@ if ( ! is_multisite() ) {
 	/**
 	 * Handler for updating the has published posts flag when a post is deleted.
 	 *
+	 * @since 5.9.0
+	 *
 	 * @param int $post_id Deleted post ID.
 	 */
 	function block_core_calendar_update_has_published_post_on_delete( $post_id ) {
@@ -147,6 +162,8 @@ if ( ! is_multisite() ) {
 	/**
 	 * Handler for updating the has published posts flag when a post status changes.
 	 *
+	 * @since 5.9.0
+	 *
 	 * @param string  $new_status The status the post is changing to.
 	 * @param string  $old_status The status the post is changing from.
 	 * @param WP_Post $post       Post object.

package/src/categories/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/categories` block on server.
  *
+ * @since 5.0.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Returns the categories list/dropdown markup.
@@ -63,6 +65,8 @@ function render_block_core_categories( $attributes ) {
 /**
  * Generates the inline script for a categories dropdown field.
  *
+ * @since 5.0.0
+ *
  * @param string $dropdown_id ID of the dropdown field.
  *
  * @return string Returns the dropdown onChange redirection script.
@@ -87,6 +91,8 @@ function build_dropdown_script_block_core_categories( $dropdown_id ) {
 
 /**
  * Registers the `core/categories` block on server.
+ *
+ * @since 5.0.0
  */
 function register_block_core_categories() {
 	register_block_type_from_metadata(

package/src/code/save.js

@@ -16,7 +16,13 @@ export default function save( { attributes } ) {
 				// To do: `escape` encodes characters in shortcodes and URLs to
 				// prevent embedding in PHP. Ideally checks for the code block,
 				// or pre/code tags, should be made on the PHP side?
-				value={ escape( attributes.content.toString() ) }
+				value={ escape(
+					typeof attributes.content === 'string'
+						? attributes.content
+						: attributes.content.toHTMLString( {
+								preserveWhiteSpace: true,
+						  } )
+				) }
 			/>
 		</pre>
 	);

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/columns/edit.js

@@ -139,18 +139,19 @@ function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
 			// If adding a new column, assign width to the new column equal to
 			// as if it were `1 / columns` of the total available space.
 			const newColumnWidth = toWidthPrecision( 100 / newColumns );
+			const newlyAddedColumns = newColumns - previousColumns;
 
 			// Redistribute in consideration of pending block insertion as
 			// constraining the available working width.
 			const widths = getRedistributedColumnWidths(
 				innerBlocks,
-				100 - newColumnWidth
+				100 - newColumnWidth * newlyAddedColumns
 			);
 
 			innerBlocks = [
 				...getMappedColumnWidths( innerBlocks, widths ),
 				...Array.from( {
-					length: newColumns - previousColumns,
+					length: newlyAddedColumns,
 				} ).map( () => {
 					return createBlock( 'core/column', {
 						width: `${ newColumnWidth }%`,

package/src/comment-author-avatar/edit.js

@@ -48,7 +48,7 @@ export default function Edit( {
 
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Avatar Settings' ) }>
+			<PanelBody title={ __( 'Settings' ) }>
 				<RangeControl
 					__nextHasNoMarginBottom
 					__next40pxDefaultSize