@wordpress/block-library 8.30.0 → 8.32.0

package/build-style/theme-rtl.css

@@ -95,7 +95,7 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
-.wp-block-audio {
+:where(.wp-block-audio) {
   margin: 0 0 1em 0;
 }
 
@@ -115,7 +115,7 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
-.wp-block-embed {
+:where(.wp-block-embed) {
   margin: 0 0 1em 0;
 }
 
@@ -137,16 +137,17 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
-.wp-block-image {
+:where(.wp-block-image) {
   margin: 0 0 1em 0;
 }
 
-.wp-block-pullquote {
+:where(.wp-block-pullquote) {
   border-top: 4px solid currentColor;
   border-bottom: 4px solid currentColor;
   margin-bottom: 1.75em;
   color: currentColor;
 }
+
 .wp-block-pullquote cite,
 .wp-block-pullquote footer, .wp-block-pullquote__citation {
   color: currentColor;
@@ -155,29 +156,29 @@
   font-style: normal;
 }
 
-.wp-block-quote {
+:where(.wp-block-quote) {
   border-right: 0.25em solid currentColor;
   margin: 0 0 1.75em 0;
   padding-right: 1em;
 }
-.wp-block-quote cite,
-.wp-block-quote footer {
+:where(.wp-block-quote) cite,
+:where(.wp-block-quote) footer {
   color: currentColor;
   font-size: 0.8125em;
   position: relative;
   font-style: normal;
 }
-.wp-block-quote.has-text-align-right {
+:where(.wp-block-quote).has-text-align-right {
   border-right: none;
   border-left: 0.25em solid currentColor;
   padding-right: 0;
   padding-left: 1em;
 }
-.wp-block-quote.has-text-align-center {
+:where(.wp-block-quote).has-text-align-center {
   border: none;
   padding-right: 0;
 }
-.wp-block-quote.is-style-plain, .wp-block-quote.is-style-large, .wp-block-quote.is-large {
+:where(.wp-block-quote).is-style-plain, :where(.wp-block-quote).is-style-large, :where(.wp-block-quote).is-large {
   border: none;
 }
 
@@ -218,9 +219,6 @@
   height: 2px;
 }
 
-.wp-block-table {
-  margin: 0 0 1em 0;
-}
 .wp-block-table td,
 .wp-block-table th {
   word-break: normal;
@@ -234,6 +232,10 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
+:where(.wp-block-table) {
+  margin: 0 0 1em 0;
+}
+
 .wp-block-video figcaption {
   color: #555;
   font-size: 13px;
@@ -243,11 +245,11 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
-.wp-block-video {
+:where(.wp-block-video) {
   margin: 0 0 1em 0;
 }
 
-.wp-block-template-part.has-background {
+:where(.wp-block-template-part).has-background {
   padding: 1.25em 2.375em;
   margin-top: 0;
   margin-bottom: 0;

package/build-style/theme.css

@@ -95,7 +95,7 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
-.wp-block-audio {
+:where(.wp-block-audio) {
   margin: 0 0 1em 0;
 }
 
@@ -115,7 +115,7 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
-.wp-block-embed {
+:where(.wp-block-embed) {
   margin: 0 0 1em 0;
 }
 
@@ -137,16 +137,17 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
-.wp-block-image {
+:where(.wp-block-image) {
   margin: 0 0 1em 0;
 }
 
-.wp-block-pullquote {
+:where(.wp-block-pullquote) {
   border-top: 4px solid currentColor;
   border-bottom: 4px solid currentColor;
   margin-bottom: 1.75em;
   color: currentColor;
 }
+
 .wp-block-pullquote cite,
 .wp-block-pullquote footer, .wp-block-pullquote__citation {
   color: currentColor;
@@ -155,29 +156,29 @@
   font-style: normal;
 }
 
-.wp-block-quote {
+:where(.wp-block-quote) {
   border-left: 0.25em solid currentColor;
   margin: 0 0 1.75em 0;
   padding-left: 1em;
 }
-.wp-block-quote cite,
-.wp-block-quote footer {
+:where(.wp-block-quote) cite,
+:where(.wp-block-quote) footer {
   color: currentColor;
   font-size: 0.8125em;
   position: relative;
   font-style: normal;
 }
-.wp-block-quote.has-text-align-right {
+:where(.wp-block-quote).has-text-align-right {
   border-left: none;
   border-right: 0.25em solid currentColor;
   padding-left: 0;
   padding-right: 1em;
 }
-.wp-block-quote.has-text-align-center {
+:where(.wp-block-quote).has-text-align-center {
   border: none;
   padding-left: 0;
 }
-.wp-block-quote.is-style-plain, .wp-block-quote.is-style-large, .wp-block-quote.is-large {
+:where(.wp-block-quote).is-style-plain, :where(.wp-block-quote).is-style-large, :where(.wp-block-quote).is-large {
   border: none;
 }
 
@@ -218,9 +219,6 @@
   height: 2px;
 }
 
-.wp-block-table {
-  margin: 0 0 1em 0;
-}
 .wp-block-table td,
 .wp-block-table th {
   word-break: normal;
@@ -234,6 +232,10 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
+:where(.wp-block-table) {
+  margin: 0 0 1em 0;
+}
+
 .wp-block-video figcaption {
   color: #555;
   font-size: 13px;
@@ -243,11 +245,11 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
-.wp-block-video {
+:where(.wp-block-video) {
   margin: 0 0 1em 0;
 }
 
-.wp-block-template-part.has-background {
+:where(.wp-block-template-part).has-background {
   padding: 1.25em 2.375em;
   margin-top: 0;
   margin-bottom: 0;

package/build-style/video/theme-rtl.css

@@ -95,6 +95,6 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
-.wp-block-video {
+:where(.wp-block-video) {
   margin: 0 0 1em 0;
 }

package/build-style/video/theme.css

@@ -95,6 +95,6 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
-.wp-block-video {
+:where(.wp-block-video) {
   margin: 0 0 1em 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.30.0",
+	"version": "8.32.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,38 +31,38 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.53.0",
-		"@wordpress/api-fetch": "^6.50.0",
-		"@wordpress/autop": "^3.53.0",
-		"@wordpress/blob": "^3.53.0",
-		"@wordpress/block-editor": "^12.21.0",
-		"@wordpress/blocks": "^12.30.0",
-		"@wordpress/components": "^27.1.0",
-		"@wordpress/compose": "^6.30.0",
-		"@wordpress/core-data": "^6.30.0",
-		"@wordpress/data": "^9.23.0",
-		"@wordpress/date": "^4.53.0",
-		"@wordpress/deprecated": "^3.53.0",
-		"@wordpress/dom": "^3.53.0",
-		"@wordpress/element": "^5.30.0",
-		"@wordpress/escape-html": "^2.53.0",
-		"@wordpress/hooks": "^3.53.0",
-		"@wordpress/html-entities": "^3.53.0",
-		"@wordpress/i18n": "^4.53.0",
-		"@wordpress/icons": "^9.44.0",
-		"@wordpress/interactivity": "^5.2.0",
-		"@wordpress/interactivity-router": "^1.3.0",
-		"@wordpress/keycodes": "^3.53.0",
-		"@wordpress/notices": "^4.21.0",
-		"@wordpress/patterns": "^1.14.0",
-		"@wordpress/primitives": "^3.51.0",
-		"@wordpress/private-apis": "^0.35.0",
-		"@wordpress/reusable-blocks": "^4.30.0",
-		"@wordpress/rich-text": "^6.30.0",
-		"@wordpress/server-side-render": "^4.30.0",
-		"@wordpress/url": "^3.54.0",
-		"@wordpress/viewport": "^5.30.0",
-		"@wordpress/wordcount": "^3.53.0",
+		"@wordpress/a11y": "^3.55.0",
+		"@wordpress/api-fetch": "^6.52.0",
+		"@wordpress/autop": "^3.55.0",
+		"@wordpress/blob": "^3.55.0",
+		"@wordpress/block-editor": "^12.23.0",
+		"@wordpress/blocks": "^12.32.0",
+		"@wordpress/components": "^27.3.0",
+		"@wordpress/compose": "^6.32.0",
+		"@wordpress/core-data": "^6.32.0",
+		"@wordpress/data": "^9.25.0",
+		"@wordpress/date": "^4.55.0",
+		"@wordpress/deprecated": "^3.55.0",
+		"@wordpress/dom": "^3.55.0",
+		"@wordpress/element": "^5.32.0",
+		"@wordpress/escape-html": "^2.55.0",
+		"@wordpress/hooks": "^3.55.0",
+		"@wordpress/html-entities": "^3.55.0",
+		"@wordpress/i18n": "^4.55.0",
+		"@wordpress/icons": "^9.46.0",
+		"@wordpress/interactivity": "^5.4.0",
+		"@wordpress/interactivity-router": "^1.5.0",
+		"@wordpress/keycodes": "^3.55.0",
+		"@wordpress/notices": "^4.23.0",
+		"@wordpress/patterns": "^1.16.0",
+		"@wordpress/primitives": "^3.53.0",
+		"@wordpress/private-apis": "^0.37.0",
+		"@wordpress/reusable-blocks": "^4.32.0",
+		"@wordpress/rich-text": "^6.32.0",
+		"@wordpress/server-side-render": "^4.32.0",
+		"@wordpress/url": "^3.56.0",
+		"@wordpress/viewport": "^5.32.0",
+		"@wordpress/wordcount": "^3.55.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -80,5 +80,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ac3c3e465a083081a86a4da6ee6fb817b41e5130"
+	"gitHead": "ac2b13783c28f959770cf029a797a712f59e1958"
 }

package/src/archives/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/archives` block on server.
  *
+ * @since 5.0.0
+ *
  * @see WP_Widget_Archives
  *
  * @param array $attributes The block attributes.
@@ -106,6 +108,8 @@ function render_block_core_archives( $attributes ) {
 
 /**
  * Register archives block.
+ *
+ * @since 5.0.0
  */
 function register_block_core_archives() {
 	register_block_type_from_metadata(

package/src/audio/theme.scss

@@ -2,6 +2,6 @@
 	@include caption-style-theme();
 }
 
-.wp-block-audio {
+:where(.wp-block-audio) {
 	margin: 0 0 1em 0;
 }

package/src/avatar/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/avatar` block on the server.
  *
+ * @since 6.0.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -99,6 +101,8 @@ function render_block_core_avatar( $attributes, $content, $block ) {
  * Generates class names and styles to apply the border support styles for
  * the Avatar block.
  *
+ * @since 6.3.0
+ *
  * @param array $attributes The block attributes.
  * @return array The border-related classnames and styles for the block.
  */
@@ -149,6 +153,8 @@ function get_block_core_avatar_border_attributes( $attributes ) {
 
 /**
  * Registers the `core/avatar` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_avatar() {
 	register_block_type_from_metadata(

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';
 
 /**
@@ -38,7 +38,7 @@ import { name as patternBlockName } from './index';
 import { unlock } from '../lock-unlock';
 
 const { useLayoutClasses } = unlock( blockEditorPrivateApis );
-const { PARTIAL_SYNCING_SUPPORTED_BLOCKS } = unlock( patternsPrivateApis );
+const { isOverridableBlock } = unlock( patternsPrivateApis );
 
 const fullAlignments = [ 'full', 'wide', 'left', 'right' ];
 
@@ -90,21 +90,9 @@ const useInferredLayout = ( blocks, parentLayout ) => {
 	}, [ blocks, parentLayout ] );
 };
 
-function hasOverridableAttributes( block ) {
-	return (
-		Object.keys( PARTIAL_SYNCING_SUPPORTED_BLOCKS ).includes(
-			block.name
-		) &&
-		!! block.attributes.metadata?.bindings &&
-		Object.values( block.attributes.metadata.bindings ).some(
-			( binding ) => binding.source === 'core/pattern-overrides'
-		)
-	);
-}
-
 function hasOverridableBlocks( blocks ) {
 	return blocks.some( ( block ) => {
-		if ( hasOverridableAttributes( block ) ) return true;
+		if ( isOverridableBlock( block ) ) return true;
 		return hasOverridableBlocks( block.innerBlocks );
 	} );
 }
@@ -133,7 +121,7 @@ function applyInitialContentValuesToInnerBlocks(
 		const metadataName =
 			legacyIdMap?.[ block.clientId ] ?? block.attributes.metadata?.name;
 
-		if ( ! metadataName || ! hasOverridableAttributes( block ) ) {
+		if ( ! metadataName || ! isOverridableBlock( block ) ) {
 			return { ...block, innerBlocks };
 		}
 
@@ -184,7 +172,7 @@ function getContentValuesFromInnerBlocks( blocks, defaultValues, legacyIdMap ) {
 		}
 		const metadataName =
 			legacyIdMap?.[ block.clientId ] ?? block.attributes.metadata?.name;
-		if ( ! metadataName || ! hasOverridableAttributes( block ) ) {
+		if ( ! metadataName || ! isOverridableBlock( block ) ) {
 			continue;
 		}
 
@@ -217,7 +205,7 @@ function setBlockEditMode( setEditMode, blocks, mode ) {
 	blocks.forEach( ( block ) => {
 		const editMode =
 			mode ||
-			( hasOverridableAttributes( block ) ? 'contentOnly' : 'disabled' );
+			( isOverridableBlock( block ) ? 'contentOnly' : 'disabled' );
 		setEditMode( block.clientId, editMode );
 
 		setBlockEditMode(
@@ -265,6 +253,7 @@ export default function ReusableBlockEdit( {
 		getBlockEditingMode,
 		onNavigateToEntityRecord,
 		editingMode,
+		hasPatternOverridesSource,
 	} = useSelect(
 		( select ) => {
 			const { canUser } = select( coreStore );
@@ -273,6 +262,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 );
 
@@ -284,6 +274,9 @@ export default function ReusableBlockEdit( {
 				onNavigateToEntityRecord:
 					getSettings().onNavigateToEntityRecord,
 				editingMode: _getBlockEditingMode( patternClientId ),
+				hasPatternOverridesSource: !! getBlockBindingsSource(
+					'core/pattern-overrides'
+				),
 			};
 		},
 		[ patternClientId, ref ]
@@ -295,13 +288,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(
@@ -329,19 +329,21 @@ export default function ReusableBlockEdit( {
 		registry.batch( () => {
 			setBlockEditingMode( patternClientId, 'default' );
 			syncDerivedUpdates( () => {
-				replaceInnerBlocks(
-					patternClientId,
-					applyInitialContentValuesToInnerBlocks(
-						initialBlocks,
-						initialContent.current,
-						defaultContent.current,
-						legacyIdMap.current
-					)
-				);
+				const blocks = hasPatternOverridesSource
+					? applyInitialContentValuesToInnerBlocks(
+							initialBlocks,
+							initialContent.current,
+							defaultContent.current,
+							legacyIdMap.current
+					  )
+					: initialBlocks;
+
+				replaceInnerBlocks( patternClientId, blocks );
 			} );
 			setBlockEditingMode( patternClientId, originalEditingMode );
 		} );
 	}, [
+		hasPatternOverridesSource,
 		__unstableMarkNextChangeAsNotPersistent,
 		patternClientId,
 		initialBlocks,
@@ -377,6 +379,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( () => {
@@ -394,7 +399,13 @@ export default function ReusableBlockEdit( {
 				} );
 			}
 		}, blockEditorStore );
-	}, [ syncDerivedUpdates, patternClientId, registry, setAttributes ] );
+	}, [
+		hasPatternOverridesSource,
+		syncDerivedUpdates,
+		patternClientId,
+		registry,
+		setAttributes,
+	] );
 
 	const handleEditOriginal = () => {
 		onNavigateToEntityRecord( {

package/src/block/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/block` block on server.
  *
+ * @since 5.0.0
+ *
  * @global WP_Embed $wp_embed
  *
  * @param array $attributes The block attributes.
@@ -97,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.native.js

@@ -494,7 +494,7 @@ function ButtonEdit( props ) {
 					<View pointerEvents="none" style={ outLineStyles } />
 				) }
 				<RichText
-					setRef={ onSetRef }
+					ref={ onSetRef }
 					placeholder={ placeholderText }
 					value={ text }
 					onChange={ onChangeText }