@wordpress/block-library 8.25.1-next.79a6196f.0 → 8.27.0

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.25.1-next.79a6196f.0",
+	"version": "8.27.0",
 	"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.48.1-next.79a6196f.0",
-		"@wordpress/api-fetch": "^6.45.1-next.79a6196f.0",
-		"@wordpress/autop": "^3.48.1-next.79a6196f.0",
-		"@wordpress/blob": "^3.48.1-next.79a6196f.0",
-		"@wordpress/block-editor": "^12.16.1-next.79a6196f.0",
-		"@wordpress/blocks": "^12.25.1-next.79a6196f.0",
-		"@wordpress/components": "^25.15.1-next.79a6196f.0",
-		"@wordpress/compose": "^6.25.1-next.79a6196f.0",
-		"@wordpress/core-data": "^6.25.1-next.79a6196f.0",
-		"@wordpress/data": "^9.18.1-next.79a6196f.0",
-		"@wordpress/date": "^4.48.1-next.79a6196f.0",
-		"@wordpress/deprecated": "^3.48.1-next.79a6196f.0",
-		"@wordpress/dom": "^3.48.1-next.79a6196f.0",
-		"@wordpress/element": "^5.25.1-next.79a6196f.0",
-		"@wordpress/escape-html": "^2.48.1-next.79a6196f.0",
-		"@wordpress/hooks": "^3.48.1-next.79a6196f.0",
-		"@wordpress/html-entities": "^3.48.1-next.79a6196f.0",
-		"@wordpress/i18n": "^4.48.1-next.79a6196f.0",
-		"@wordpress/icons": "^9.39.1-next.79a6196f.0",
-		"@wordpress/interactivity": "^3.1.2-next.79a6196f.0",
-		"@wordpress/keycodes": "^3.48.1-next.79a6196f.0",
-		"@wordpress/notices": "^4.16.1-next.79a6196f.0",
-		"@wordpress/primitives": "^3.46.1-next.79a6196f.0",
-		"@wordpress/private-apis": "^0.30.1-next.79a6196f.0",
-		"@wordpress/reusable-blocks": "^4.25.1-next.79a6196f.0",
-		"@wordpress/rich-text": "^6.25.1-next.79a6196f.0",
-		"@wordpress/server-side-render": "^4.25.1-next.79a6196f.0",
-		"@wordpress/url": "^3.49.1-next.79a6196f.0",
-		"@wordpress/viewport": "^5.25.1-next.79a6196f.0",
-		"@wordpress/wordcount": "^3.48.1-next.79a6196f.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.0",
+		"@wordpress/blocks": "^12.27.0",
+		"@wordpress/components": "^25.16.0",
+		"@wordpress/compose": "^6.27.0",
+		"@wordpress/core-data": "^6.27.0",
+		"@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.0",
+		"@wordpress/primitives": "^3.48.0",
+		"@wordpress/private-apis": "^0.32.0",
+		"@wordpress/reusable-blocks": "^4.27.0",
+		"@wordpress/rich-text": "^6.27.0",
+		"@wordpress/server-side-render": "^4.27.0",
+		"@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": "1e74b942ac0119a22ceaaf5c9594263f3ec516ab"
+	"gitHead": "45de2cb4212fed7f2763e95f10300d1ff9d0ec08"
 }

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,6 +27,7 @@ import {
 	store as blockEditorStore,
 	BlockControls,
 } from '@wordpress/block-editor';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
 import { parse, cloneBlock } from '@wordpress/blocks';
 
 /**
@@ -35,10 +36,13 @@ import { 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 (
-		'core/paragraph' === block.name &&
+		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'
@@ -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",

package/src/button/edit.js

@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import { NEW_TAB_TARGET, NOFOLLOW_REL } from './constants';
 import { getUpdatedLinkAttributes } from './get-updated-link-attributes';
 import removeAnchorTag from '../utils/remove-anchor-tag';
+import { unlock } from '../lock-unlock';
 
 /**
  * WordPress dependencies
@@ -32,9 +33,11 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUseColorProps as useColorProps,
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
+	__experimentalUseShadowProps as useShadowProps,
 	__experimentalLinkControl as LinkControl,
 	__experimentalGetElementClassName,
 	store as blockEditorStore,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
 import { link, linkOff } from '@wordpress/icons';
@@ -163,6 +166,7 @@ function ButtonEdit( props ) {
 		text,
 		url,
 		width,
+		metadata,
 	} = attributes;
 
 	const TagName = tagName || 'a';
@@ -183,12 +187,14 @@ function ButtonEdit( props ) {
 	const borderProps = useBorderProps( attributes );
 	const colorProps = useColorProps( attributes );
 	const spacingProps = useSpacingProps( attributes );
+	const shadowProps = useShadowProps( attributes );
 	const ref = useRef();
 	const richTextRef = useRef();
 	const blockProps = useBlockProps( {
 		ref: useMergeRefs( [ setPopoverAnchor, ref ] ),
 		onKeyDown,
 	} );
+	const blockEditingMode = useBlockEditingMode();
 
 	const [ isEditingURL, setIsEditingURL ] = useState( false );
 	const isURLSet = !! url;
@@ -226,6 +232,27 @@ function ButtonEdit( props ) {
 	const useEnterRef = useEnter( { content: text, clientId } );
 	const mergedRef = useMergeRefs( [ useEnterRef, richTextRef ] );
 
+	const { lockUrlControls = false } = useSelect(
+		( select ) => {
+			if ( ! isSelected ) {
+				return {};
+			}
+
+			const { getBlockBindingsSource } = unlock(
+				select( blockEditorStore )
+			);
+
+			return {
+				lockUrlControls:
+					!! metadata?.bindings?.url &&
+					getBlockBindingsSource(
+						metadata?.bindings?.url?.source?.name
+					)?.lockAttributesEditing === true,
+			};
+		},
+		[ isSelected ]
+	);
+
 	return (
 		<>
 			<div
@@ -264,6 +291,7 @@ function ButtonEdit( props ) {
 						...borderProps.style,
 						...colorProps.style,
 						...spacingProps.style,
+						...shadowProps.style,
 					} }
 					onSplit={ ( value ) =>
 						createBlock( 'core/button', {
@@ -277,13 +305,15 @@ function ButtonEdit( props ) {
 				/>
 			</div>
 			<BlockControls group="block">
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-				{ ! isURLSet && isLinkTag && (
+				{ blockEditingMode === 'default' && (
+					<AlignmentControl
+						value={ textAlign }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { textAlign: nextAlign } );
+						} }
+					/>
+				) }
+				{ ! isURLSet && isLinkTag && ! lockUrlControls && (
 					<ToolbarButton
 						name="link"
 						icon={ link }
@@ -292,7 +322,7 @@ function ButtonEdit( props ) {
 						onClick={ startEditing }
 					/>
 				) }
-				{ isURLSet && isLinkTag && (
+				{ isURLSet && isLinkTag && ! lockUrlControls && (
 					<ToolbarButton
 						name="link"
 						icon={ linkOff }
@@ -303,43 +333,46 @@ function ButtonEdit( props ) {
 					/>
 				) }
 			</BlockControls>
-			{ isLinkTag && isSelected && ( isEditingURL || isURLSet ) && (
-				<Popover
-					placement="bottom"
-					onClose={ () => {
-						setIsEditingURL( false );
-						richTextRef.current?.focus();
-					} }
-					anchor={ popoverAnchor }
-					focusOnMount={ isEditingURL ? 'firstElement' : false }
-					__unstableSlotName={ '__unstable-block-tools-after' }
-					shift
-				>
-					<LinkControl
-						value={ linkValue }
-						onChange={ ( {
-							url: newURL,
-							opensInNewTab: newOpensInNewTab,
-							nofollow: newNofollow,
-						} ) =>
-							setAttributes(
-								getUpdatedLinkAttributes( {
-									rel,
-									url: newURL,
-									opensInNewTab: newOpensInNewTab,
-									nofollow: newNofollow,
-								} )
-							)
-						}
-						onRemove={ () => {
-							unlink();
+			{ isLinkTag &&
+				isSelected &&
+				( isEditingURL || isURLSet ) &&
+				! lockUrlControls && (
+					<Popover
+						placement="bottom"
+						onClose={ () => {
+							setIsEditingURL( false );
 							richTextRef.current?.focus();
 						} }
-						forceIsEditingLink={ isEditingURL }
-						settings={ LINK_SETTINGS }
-					/>
-				</Popover>
-			) }
+						anchor={ popoverAnchor }
+						focusOnMount={ isEditingURL ? 'firstElement' : false }
+						__unstableSlotName={ '__unstable-block-tools-after' }
+						shift
+					>
+						<LinkControl
+							value={ linkValue }
+							onChange={ ( {
+								url: newURL,
+								opensInNewTab: newOpensInNewTab,
+								nofollow: newNofollow,
+							} ) =>
+								setAttributes(
+									getUpdatedLinkAttributes( {
+										rel,
+										url: newURL,
+										opensInNewTab: newOpensInNewTab,
+										nofollow: newNofollow,
+									} )
+								)
+							}
+							onRemove={ () => {
+								unlink();
+								richTextRef.current?.focus();
+							} }
+							forceIsEditingLink={ isEditingURL }
+							settings={ LINK_SETTINGS }
+						/>
+					</Popover>
+				) }
 			<InspectorControls>
 				<WidthPanel
 					selectedWidth={ width }

package/src/button/save.js

@@ -12,6 +12,7 @@ import {
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 
@@ -40,6 +41,7 @@ export default function save( { attributes, className } ) {
 	const borderProps = getBorderClassesAndStyles( attributes );
 	const colorProps = getColorClassesAndStyles( attributes );
 	const spacingProps = getSpacingClassesAndStyles( attributes );
+	const shadowProps = getShadowClassesAndStyles( attributes );
 	const buttonClasses = classnames(
 		'wp-block-button__link',
 		colorProps.className,
@@ -56,6 +58,7 @@ export default function save( { attributes, className } ) {
 		...borderProps.style,
 		...colorProps.style,
 		...spacingProps.style,
+		...shadowProps.style,
 	};
 
 	// The use of a `title` attribute here is soft-deprecated, but still applied