@wordpress/block-library 8.26.0 → 8.27.1

package/build-style/style.css

@@ -618,8 +618,7 @@
   justify-content: center;
   align-items: center;
   padding: 1em;
-  overflow: hidden;
-  overflow: clip;
+  overflow-x: clip;
   box-sizing: border-box;
   /*rtl:raw: direction: ltr; */
   /**
@@ -930,8 +929,7 @@
   height: 100%;
   max-width: none;
   max-height: none;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   outline: none;
   border: none;
   box-shadow: none;
@@ -1288,8 +1286,7 @@ textarea.wp-block-form-input__input {
   width: 100%;
   height: 100%;
   flex: 1;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item,
 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,
@@ -1511,8 +1508,7 @@ figure.wp-block-gallery.has-nested-images {
   width: 100%;
   flex: 1 0 0%;
   height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
   width: 100%;
@@ -3002,7 +2998,7 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
 }
 
 .wp-block-pullquote {
-  padding: 3em 0;
+  padding: 4em 0;
   text-align: center;
   overflow-wrap: break-word;
   box-sizing: border-box;
@@ -3012,6 +3008,15 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
 .wp-block-pullquote cite {
   color: inherit;
 }
+.wp-block-pullquote blockquote {
+  margin: 0;
+}
+.wp-block-pullquote p {
+  margin-top: 0;
+}
+.wp-block-pullquote p:last-child {
+  margin-bottom: 0;
+}
 .wp-block-pullquote.alignleft, .wp-block-pullquote.alignright {
   max-width: 420px;
 }
@@ -3283,7 +3288,8 @@ ul.wp-block-rss.is-grid li {
   min-width: 3rem;
   border: 1px solid #949494;
   text-decoration: unset !important;
-  appearance: initial;
+  -webkit-appearance: initial;
+          appearance: initial;
 }
 
 .wp-block-search.wp-block-search__button-only .wp-block-search__button {
@@ -4033,8 +4039,7 @@ pre.wp-block-verse {
 }
 @supports (position: sticky) {
   .wp-block-video [poster] {
-    -o-object-fit: cover;
-       object-fit: cover;
+    object-fit: cover;
   }
 }
 .wp-block-video.aligncenter {
@@ -4173,6 +4178,7 @@ a[data-fn].fn::after {
 .screen-reader-text {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
+  -webkit-clip-path: inset(50%);
   clip-path: inset(50%);
   height: 1px;
   margin: -1px;
@@ -4186,7 +4192,8 @@ a[data-fn].fn::after {
 .screen-reader-text:focus {
   background-color: #ddd;
   clip: auto !important;
-  clip-path: none;
+  -webkit-clip-path: none;
+          clip-path: none;
   color: #444;
   display: block;
   font-size: 1em;

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

@@ -95,8 +95,7 @@
 }
 @supports (position: sticky) {
   .wp-block-video [poster] {
-    -o-object-fit: cover;
-       object-fit: cover;
+    object-fit: cover;
   }
 }
 .wp-block-video.aligncenter {

package/build-style/video/style.css

@@ -95,8 +95,7 @@
 }
 @supports (position: sticky) {
   .wp-block-video [poster] {
-    -o-object-fit: cover;
-       object-fit: cover;
+    object-fit: cover;
   }
 }
 .wp-block-video.aligncenter {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.26.0",
+	"version": "8.27.1",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,36 +31,38 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.49.0",
-		"@wordpress/api-fetch": "^6.46.0",
-		"@wordpress/autop": "^3.49.0",
-		"@wordpress/blob": "^3.49.0",
-		"@wordpress/block-editor": "^12.17.0",
-		"@wordpress/blocks": "^12.26.0",
-		"@wordpress/components": "^25.15.0",
-		"@wordpress/compose": "^6.26.0",
-		"@wordpress/core-data": "^6.26.0",
-		"@wordpress/data": "^9.19.0",
-		"@wordpress/date": "^4.49.0",
-		"@wordpress/deprecated": "^3.49.0",
-		"@wordpress/dom": "^3.49.0",
-		"@wordpress/element": "^5.26.0",
-		"@wordpress/escape-html": "^2.49.0",
-		"@wordpress/hooks": "^3.49.0",
-		"@wordpress/html-entities": "^3.49.0",
-		"@wordpress/i18n": "^4.49.0",
-		"@wordpress/icons": "^9.40.0",
-		"@wordpress/interactivity": "^3.2.0",
-		"@wordpress/keycodes": "^3.49.0",
-		"@wordpress/notices": "^4.17.0",
-		"@wordpress/primitives": "^3.47.0",
-		"@wordpress/private-apis": "^0.31.0",
-		"@wordpress/reusable-blocks": "^4.26.0",
-		"@wordpress/rich-text": "^6.26.0",
-		"@wordpress/server-side-render": "^4.26.0",
-		"@wordpress/url": "^3.50.0",
-		"@wordpress/viewport": "^5.26.0",
-		"@wordpress/wordcount": "^3.49.0",
+		"@wordpress/a11y": "^3.50.0",
+		"@wordpress/api-fetch": "^6.47.0",
+		"@wordpress/autop": "^3.50.0",
+		"@wordpress/blob": "^3.50.0",
+		"@wordpress/block-editor": "^12.18.1",
+		"@wordpress/blocks": "^12.27.1",
+		"@wordpress/components": "^25.16.0",
+		"@wordpress/compose": "^6.27.0",
+		"@wordpress/core-data": "^6.27.1",
+		"@wordpress/data": "^9.20.0",
+		"@wordpress/date": "^4.50.0",
+		"@wordpress/deprecated": "^3.50.0",
+		"@wordpress/dom": "^3.50.0",
+		"@wordpress/element": "^5.27.0",
+		"@wordpress/escape-html": "^2.50.0",
+		"@wordpress/hooks": "^3.50.0",
+		"@wordpress/html-entities": "^3.50.0",
+		"@wordpress/i18n": "^4.50.0",
+		"@wordpress/icons": "^9.41.0",
+		"@wordpress/interactivity": "^4.0.0",
+		"@wordpress/interactivity-router": "^1.0.0",
+		"@wordpress/keycodes": "^3.50.0",
+		"@wordpress/notices": "^4.18.0",
+		"@wordpress/patterns": "^1.11.1",
+		"@wordpress/primitives": "^3.48.0",
+		"@wordpress/private-apis": "^0.32.0",
+		"@wordpress/reusable-blocks": "^4.27.1",
+		"@wordpress/rich-text": "^6.27.0",
+		"@wordpress/server-side-render": "^4.27.1",
+		"@wordpress/url": "^3.51.0",
+		"@wordpress/viewport": "^5.27.0",
+		"@wordpress/wordcount": "^3.50.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -78,5 +80,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5e6f9caa205d3bfdbac131952b7bf9c6ec60569b"
+	"gitHead": "c2f6d07ffab7d68b9ac3c423ce7e11af91f6e45e"
 }

package/src/avatar/edit.js

@@ -192,22 +192,12 @@ const UserEdit = ( { attributes, context, setAttributes, isSelected } ) => {
 				avatar={ avatar }
 				setAttributes={ setAttributes }
 			/>
-			<div>
-				{ attributes.isLink ? (
-					<a
-						href="#avatar-pseudo-link"
-						className="wp-block-avatar__link"
-						onClick={ ( event ) => event.preventDefault() }
-					>
-						<ResizableAvatar
-							attributes={ attributes }
-							avatar={ avatar }
-							blockProps={ blockProps }
-							isSelected={ isSelected }
-							setAttributes={ setAttributes }
-						/>
-					</a>
-				) : (
+			{ attributes.isLink ? (
+				<a
+					href="#avatar-pseudo-link"
+					className="wp-block-avatar__link"
+					onClick={ ( event ) => event.preventDefault() }
+				>
 					<ResizableAvatar
 						attributes={ attributes }
 						avatar={ avatar }
@@ -215,8 +205,16 @@ const UserEdit = ( { attributes, context, setAttributes, isSelected } ) => {
 						isSelected={ isSelected }
 						setAttributes={ setAttributes }
 					/>
-				) }
-			</div>
+				</a>
+			) : (
+				<ResizableAvatar
+					attributes={ attributes }
+					avatar={ avatar }
+					blockProps={ blockProps }
+					isSelected={ isSelected }
+					setAttributes={ setAttributes }
+				/>
+			) }
 		</>
 	);
 };

package/src/block/block.json

@@ -10,6 +10,9 @@
 	"attributes": {
 		"ref": {
 			"type": "number"
+		},
+		"overrides": {
+			"type": "object"
 		}
 	},
 	"supports": {

package/src/block/edit.js

@@ -18,8 +18,8 @@ import {
 import { __ } from '@wordpress/i18n';
 import {
 	useInnerBlocksProps,
-	__experimentalRecursionProvider as RecursionProvider,
-	__experimentalUseHasRecursion as useHasRecursion,
+	RecursionProvider,
+	useHasRecursion,
 	InnerBlocks,
 	useBlockProps,
 	Warning,
@@ -27,7 +27,8 @@ import {
 	store as blockEditorStore,
 	BlockControls,
 } from '@wordpress/block-editor';
-import { getBlockSupport, parse, cloneBlock } from '@wordpress/blocks';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import { parse, cloneBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -35,20 +36,23 @@ import { getBlockSupport, parse, cloneBlock } from '@wordpress/blocks';
 import { unlock } from '../lock-unlock';
 
 const { useLayoutClasses } = unlock( blockEditorPrivateApis );
+const { PARTIAL_SYNCING_SUPPORTED_BLOCKS } = unlock( patternsPrivateApis );
 
 function isPartiallySynced( block ) {
 	return (
-		!! getBlockSupport( block.name, '__experimentalConnections', false ) &&
-		!! block.attributes.connections?.attributes &&
-		Object.values( block.attributes.connections.attributes ).some(
-			( connection ) => connection.source === 'pattern_attributes'
+		Object.keys( PARTIAL_SYNCING_SUPPORTED_BLOCKS ).includes(
+			block.name
+		) &&
+		!! block.attributes.metadata?.bindings &&
+		Object.values( block.attributes.metadata.bindings ).some(
+			( binding ) => binding.source.name === 'pattern_attributes'
 		)
 	);
 }
 function getPartiallySyncedAttributes( block ) {
-	return Object.entries( block.attributes.connections.attributes )
+	return Object.entries( block.attributes.metadata.bindings )
 		.filter(
-			( [ , connection ] ) => connection.source === 'pattern_attributes'
+			( [ , binding ] ) => binding.source.name === 'pattern_attributes'
 		)
 		.map( ( [ attributeKey ] ) => attributeKey );
 }
@@ -84,6 +88,26 @@ const useInferredLayout = ( blocks, parentLayout ) => {
 	}, [ blocks, parentLayout ] );
 };
 
+/**
+ * Enum for patch operations.
+ * We use integers here to minimize the size of the serialized data.
+ * This has to be deserialized accordingly on the server side.
+ * See block-bindings/sources/pattern.php
+ */
+const PATCH_OPERATIONS = {
+	/** @type {0} */
+	Remove: 0,
+	/** @type {1} */
+	Replace: 1,
+	// Other operations are reserved for future use. (e.g. Add)
+};
+
+/**
+ * @typedef {[typeof PATCH_OPERATIONS.Remove]} RemovePatch
+ * @typedef {[typeof PATCH_OPERATIONS.Replace, unknown]} ReplacePatch
+ * @typedef {RemovePatch | ReplacePatch} OverridePatch
+ */
+
 function applyInitialOverrides( blocks, overrides = {}, defaultValues ) {
 	return blocks.map( ( block ) => {
 		const innerBlocks = applyInitialOverrides(
@@ -100,9 +124,15 @@ function applyInitialOverrides( blocks, overrides = {}, defaultValues ) {
 			defaultValues[ blockId ] ??= {};
 			defaultValues[ blockId ][ attributeKey ] =
 				block.attributes[ attributeKey ];
-			if ( overrides[ blockId ] ) {
-				newAttributes[ attributeKey ] =
-					overrides[ blockId ][ attributeKey ];
+			/** @type {OverridePatch} */
+			const overrideAttribute = overrides[ blockId ]?.[ attributeKey ];
+			if ( ! overrideAttribute ) {
+				continue;
+			}
+			if ( overrideAttribute[ 0 ] === PATCH_OPERATIONS.Remove ) {
+				delete newAttributes[ attributeKey ];
+			} else if ( overrideAttribute[ 0 ] === PATCH_OPERATIONS.Replace ) {
+				newAttributes[ attributeKey ] = overrideAttribute[ 1 ];
 			}
 		}
 		return {
@@ -114,13 +144,14 @@ function applyInitialOverrides( blocks, overrides = {}, defaultValues ) {
 }
 
 function getOverridesFromBlocks( blocks, defaultValues ) {
-	/** @type {Record<string, Record<string, unknown>>} */
+	/** @type {Record<string, Record<string, OverridePatch>>} */
 	const overrides = {};
 	for ( const block of blocks ) {
 		Object.assign(
 			overrides,
 			getOverridesFromBlocks( block.innerBlocks, defaultValues )
 		);
+		/** @type {string} */
 		const blockId = block.attributes.metadata?.id;
 		if ( ! isPartiallySynced( block ) || ! blockId ) continue;
 		const attributes = getPartiallySyncedAttributes( block );
@@ -130,8 +161,23 @@ function getOverridesFromBlocks( blocks, defaultValues ) {
 				defaultValues[ blockId ][ attributeKey ]
 			) {
 				overrides[ blockId ] ??= {};
-				overrides[ blockId ][ attributeKey ] =
-					block.attributes[ attributeKey ];
+				/**
+				 * Create a patch operation for the binding attribute.
+				 * We use a tuple here to minimize the size of the serialized data.
+				 * The first item is the operation type, the second item is the value if any.
+				 */
+				if ( block.attributes[ attributeKey ] === undefined ) {
+					/** @type {RemovePatch} */
+					overrides[ blockId ][ attributeKey ] = [
+						PATCH_OPERATIONS.Remove,
+					];
+				} else {
+					/** @type {ReplacePatch} */
+					overrides[ blockId ][ attributeKey ] = [
+						PATCH_OPERATIONS.Replace,
+						block.attributes[ attributeKey ],
+					];
+				}
 			}
 		}
 	}
@@ -147,6 +193,13 @@ function setBlockEditMode( setEditMode, blocks, mode ) {
 	} );
 }
 
+function getHasOverridableBlocks( blocks ) {
+	return blocks.some( ( block ) => {
+		if ( isPartiallySynced( block ) ) return true;
+		return getHasOverridableBlocks( block.innerBlocks );
+	} );
+}
+
 export default function ReusableBlockEdit( {
 	name,
 	attributes: { ref, overrides },
@@ -208,15 +261,23 @@ export default function ReusableBlockEdit( {
 		[ innerBlocks, setBlockEditingMode ]
 	);
 
-	// Apply the initial overrides from the pattern block to the inner blocks.
-	useEffect( () => {
-		const initialBlocks =
+	const hasOverridableBlocks = useMemo(
+		() => getHasOverridableBlocks( innerBlocks ),
+		[ innerBlocks ]
+	);
+
+	const initialBlocks = useMemo(
+		() =>
 			// Clone the blocks to generate new client IDs.
 			editedRecord.blocks?.map( ( block ) => cloneBlock( block ) ) ??
 			( editedRecord.content && typeof editedRecord.content !== 'function'
 				? parse( editedRecord.content )
-				: [] );
+				: [] ),
+		[ editedRecord.blocks, editedRecord.content ]
+	);
 
+	// Apply the initial overrides from the pattern block to the inner blocks.
+	useEffect( () => {
 		defaultValuesRef.current = {};
 		const editingMode = getBlockEditingMode( patternClientId );
 		// Replace the contents of the blocks with the overrides.
@@ -237,7 +298,7 @@ export default function ReusableBlockEdit( {
 	}, [
 		__unstableMarkNextChangeAsNotPersistent,
 		patternClientId,
-		editedRecord,
+		initialBlocks,
 		replaceInnerBlocks,
 		registry,
 		getBlockEditingMode,
@@ -293,6 +354,12 @@ export default function ReusableBlockEdit( {
 		editOriginalProps.onClick( event );
 	};
 
+	const resetOverrides = () => {
+		if ( overrides ) {
+			replaceInnerBlocks( patternClientId, initialBlocks );
+		}
+	};
+
 	let children = null;
 
 	if ( hasAlreadyRendered ) {
@@ -333,6 +400,21 @@ export default function ReusableBlockEdit( {
 					</ToolbarGroup>
 				</BlockControls>
 			) }
+
+			{ hasOverridableBlocks && (
+				<BlockControls>
+					<ToolbarGroup>
+						<ToolbarButton
+							onClick={ resetOverrides }
+							disabled={ ! overrides }
+							__experimentalIsFocusable
+						>
+							{ __( 'Reset to original' ) }
+						</ToolbarButton>
+					</ToolbarGroup>
+				</BlockControls>
+			) }
+
 			{ children === null ? (
 				<div { ...innerBlocksProps } />
 			) : (

package/src/block/{v1/edit.native.js → edit.native.js}

@@ -27,8 +27,8 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import {
-	__experimentalRecursionProvider as RecursionProvider,
-	__experimentalUseHasRecursion as useHasRecursion,
+	RecursionProvider,
+	useHasRecursion,
 	InnerBlocks,
 	Warning,
 	store as blockEditorStore,
@@ -42,8 +42,8 @@ import { store as noticesStore } from '@wordpress/notices';
 /**
  * Internal dependencies
  */
-import styles from '../editor.scss';
-import EditTitle from '../edit-title';
+import styles from './editor.scss';
+import EditTitle from './edit-title';
 
 export default function ReusableBlockEdit( {
 	attributes: { ref },

package/src/block/index.js

@@ -8,15 +8,14 @@ import { symbol as icon } from '@wordpress/icons';
  */
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
-import editV1 from './v1/edit';
-import editV2 from './edit';
+import edit from './edit';
 
 const { name } = metadata;
 
 export { metadata, name };
 
 export const settings = {
-	edit: window.__experimentalPatternPartialSyncing ? editV2 : editV1,
+	edit,
 	icon,
 };
 

package/src/block/index.php

@@ -46,17 +46,14 @@ function render_block_core_block( $attributes ) {
 	$content = $wp_embed->run_shortcode( $reusable_block->post_content );
 	$content = $wp_embed->autoembed( $content );
 
-	$gutenberg_experiments        = get_option( 'gutenberg-experiments' );
-	$has_partial_synced_overrides = $gutenberg_experiments
-		&& array_key_exists( 'gutenberg-pattern-partial-syncing', $gutenberg_experiments )
-		&& isset( $attributes['overrides'] );
+	$has_pattern_overrides = isset( $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.
 	 */
-	if ( $has_partial_synced_overrides ) {
+	if ( $has_pattern_overrides ) {
 		$filter_block_context = static function ( $context ) use ( $attributes ) {
 			$context['pattern/overrides'] = $attributes['overrides'];
 			return $context;
@@ -67,7 +64,7 @@ function render_block_core_block( $attributes ) {
 	$content = do_blocks( $content );
 	unset( $seen_refs[ $attributes['ref'] ] );
 
-	if ( $has_partial_synced_overrides ) {
+	if ( $has_pattern_overrides ) {
 		remove_filter( 'render_block_context', $filter_block_context, 1 );
 	}
 
@@ -86,28 +83,3 @@ function register_block_core_block() {
 	);
 }
 add_action( 'init', 'register_block_core_block' );
-
-$gutenberg_experiments = get_option( 'gutenberg-experiments' );
-if ( $gutenberg_experiments && array_key_exists( 'gutenberg-pattern-partial-syncing', $gutenberg_experiments ) ) {
-	/**
-	 * Registers the overrides attribute for core/block.
-	 *
-	 * @param array  $args       Array of arguments for registering a block type.
-	 * @param string $block_name Block name including namespace.
-	 * @return array $args
-	 */
-	function register_block_core_block_args( $args, $block_name ) {
-		if ( 'core/block' === $block_name ) {
-			$args['attributes'] = array_merge(
-				$args['attributes'],
-				array(
-					'overrides' => array(
-						'type' => 'object',
-					),
-				)
-			);
-		}
-		return $args;
-	}
-	add_filter( 'register_block_type_args', 'register_block_core_block_args', 10, 2 );
-}

package/src/button/block.json

@@ -8,6 +8,7 @@
 	"description": "Prompt visitors to take action with a button-style link.",
 	"keywords": [ "link" ],
 	"textdomain": "default",
+	"usesContext": [ "pattern/overrides" ],
 	"attributes": {
 		"tagName": {
 			"type": "string",