@wordpress/block-library 8.34.0 → 8.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.34.0",
+	"version": "8.35.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,41 +31,41 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.57.0",
-		"@wordpress/api-fetch": "^6.54.0",
-		"@wordpress/autop": "^3.57.0",
-		"@wordpress/blob": "^3.57.0",
-		"@wordpress/block-editor": "^12.25.0",
-		"@wordpress/blocks": "^12.34.0",
-		"@wordpress/components": "^27.5.0",
-		"@wordpress/compose": "^6.34.0",
-		"@wordpress/core-data": "^6.34.0",
-		"@wordpress/data": "^9.27.0",
-		"@wordpress/date": "^4.57.0",
-		"@wordpress/deprecated": "^3.57.0",
-		"@wordpress/dom": "^3.57.0",
-		"@wordpress/element": "^5.34.0",
-		"@wordpress/escape-html": "^2.57.0",
-		"@wordpress/hooks": "^3.57.0",
-		"@wordpress/html-entities": "^3.57.0",
-		"@wordpress/i18n": "^4.57.0",
-		"@wordpress/icons": "^9.48.0",
-		"@wordpress/interactivity": "^5.6.0",
-		"@wordpress/interactivity-router": "^1.7.0",
-		"@wordpress/keyboard-shortcuts": "^4.34.0",
-		"@wordpress/keycodes": "^3.57.0",
-		"@wordpress/notices": "^4.25.0",
-		"@wordpress/patterns": "^1.18.0",
-		"@wordpress/primitives": "^3.55.0",
-		"@wordpress/private-apis": "^0.39.0",
-		"@wordpress/reusable-blocks": "^4.34.0",
-		"@wordpress/rich-text": "^6.34.0",
-		"@wordpress/server-side-render": "^4.34.0",
-		"@wordpress/url": "^3.58.0",
-		"@wordpress/viewport": "^5.34.0",
-		"@wordpress/wordcount": "^3.57.0",
+		"@wordpress/a11y": "^3.58.0",
+		"@wordpress/api-fetch": "^6.55.0",
+		"@wordpress/autop": "^3.58.0",
+		"@wordpress/blob": "^3.58.0",
+		"@wordpress/block-editor": "^12.26.0",
+		"@wordpress/blocks": "^12.35.0",
+		"@wordpress/components": "^27.6.0",
+		"@wordpress/compose": "^6.35.0",
+		"@wordpress/core-data": "^6.35.0",
+		"@wordpress/data": "^9.28.0",
+		"@wordpress/date": "^4.58.0",
+		"@wordpress/deprecated": "^3.58.0",
+		"@wordpress/dom": "^3.58.0",
+		"@wordpress/element": "^5.35.0",
+		"@wordpress/escape-html": "^2.58.0",
+		"@wordpress/hooks": "^3.58.0",
+		"@wordpress/html-entities": "^3.58.0",
+		"@wordpress/i18n": "^4.58.0",
+		"@wordpress/icons": "^9.49.0",
+		"@wordpress/interactivity": "^5.7.0",
+		"@wordpress/interactivity-router": "^1.8.0",
+		"@wordpress/keyboard-shortcuts": "^4.35.0",
+		"@wordpress/keycodes": "^3.58.0",
+		"@wordpress/notices": "^4.26.0",
+		"@wordpress/patterns": "^1.19.0",
+		"@wordpress/primitives": "^3.56.0",
+		"@wordpress/private-apis": "^0.40.0",
+		"@wordpress/reusable-blocks": "^4.35.0",
+		"@wordpress/rich-text": "^6.35.0",
+		"@wordpress/server-side-render": "^4.35.0",
+		"@wordpress/url": "^3.59.0",
+		"@wordpress/viewport": "^5.35.0",
+		"@wordpress/wordcount": "^3.58.0",
 		"change-case": "^4.1.2",
-		"classnames": "^2.3.1",
+		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"escape-html": "^1.0.3",
 		"fast-average-color": "^9.1.1",
@@ -81,5 +81,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
+	"gitHead": "42f38f287506a6b3ed8ccba839b18ad066821044"
 }

package/src/audio/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -107,7 +107,7 @@ function AudioEdit( {
 		} );
 	}
 
-	const classes = classnames( className, {
+	const classes = clsx( className, {
 		'is-transient': isTemporaryAudio,
 	} );
 

package/src/avatar/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -124,7 +124,7 @@ const ResizableAvatar = ( {
 				<img
 					src={ doubledSizedSrc }
 					alt={ avatar.alt }
-					className={ classnames(
+					className={ clsx(
 						'avatar',
 						'avatar-' + attributes.size,
 						'photo',

package/src/block/edit.js

@@ -1,14 +1,18 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { useRegistry, useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useRef, useMemo, useEffect } from '@wordpress/element';
-import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
+import {
+	useEntityRecord,
+	store as coreStore,
+	useEntityBlockEditor,
+} from '@wordpress/core-data';
 import {
 	Placeholder,
 	Spinner,
@@ -20,7 +24,6 @@ import {
 	useInnerBlocksProps,
 	RecursionProvider,
 	useHasRecursion,
-	InnerBlocks,
 	useBlockProps,
 	Warning,
 	privateApis as blockEditorPrivateApis,
@@ -28,8 +31,7 @@ import {
 	BlockControls,
 } from '@wordpress/block-editor';
 import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
-import { parse, cloneBlock, store as blocksStore } from '@wordpress/blocks';
-import { RichTextData } from '@wordpress/rich-text';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -42,25 +44,6 @@ const { isOverridableBlock } = 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();
 
@@ -99,112 +82,6 @@ function hasOverridableBlocks( blocks ) {
 	} );
 }
 
-function getOverridableAttributes( block ) {
-	return Object.entries( block.attributes.metadata.bindings )
-		.filter(
-			( [ , binding ] ) => binding.source === 'core/pattern-overrides'
-		)
-		.map( ( [ attributeKey ] ) => attributeKey );
-}
-
-function applyInitialContentValuesToInnerBlocks(
-	blocks,
-	content = {},
-	defaultValues,
-	legacyIdMap
-) {
-	return blocks.map( ( block ) => {
-		const innerBlocks = applyInitialContentValuesToInnerBlocks(
-			block.innerBlocks,
-			content,
-			defaultValues,
-			legacyIdMap
-		);
-		const metadataName =
-			legacyIdMap?.[ block.clientId ] ?? block.attributes.metadata?.name;
-
-		if ( ! metadataName || ! isOverridableBlock( block ) ) {
-			return { ...block, innerBlocks };
-		}
-
-		const attributes = getOverridableAttributes( block );
-		const newAttributes = { ...block.attributes };
-		for ( const attributeKey of attributes ) {
-			defaultValues[ metadataName ] ??= {};
-			defaultValues[ metadataName ][ attributeKey ] =
-				block.attributes[ attributeKey ];
-
-			const contentValues = content[ metadataName ];
-			if ( contentValues?.[ attributeKey ] !== undefined ) {
-				newAttributes[ attributeKey ] = contentValues[ attributeKey ];
-			}
-		}
-		return {
-			...block,
-			attributes: newAttributes,
-			innerBlocks,
-		};
-	} );
-}
-
-function isAttributeEqual( attribute1, attribute2 ) {
-	if (
-		attribute1 instanceof RichTextData &&
-		attribute2 instanceof RichTextData
-	) {
-		return attribute1.toString() === attribute2.toString();
-	}
-	return attribute1 === attribute2;
-}
-
-function getContentValuesFromInnerBlocks( blocks, defaultValues, legacyIdMap ) {
-	/** @type {Record<string, { values: Record<string, unknown>}>} */
-	const content = {};
-	for ( const block of blocks ) {
-		if ( block.name === patternBlockName ) {
-			continue;
-		}
-		if ( block.innerBlocks.length ) {
-			Object.assign(
-				content,
-				getContentValuesFromInnerBlocks(
-					block.innerBlocks,
-					defaultValues,
-					legacyIdMap
-				)
-			);
-		}
-		const metadataName =
-			legacyIdMap?.[ block.clientId ] ?? block.attributes.metadata?.name;
-		if ( ! metadataName || ! isOverridableBlock( block ) ) {
-			continue;
-		}
-
-		const attributes = getOverridableAttributes( block );
-
-		for ( const attributeKey of attributes ) {
-			if (
-				! isAttributeEqual(
-					block.attributes[ attributeKey ],
-					defaultValues?.[ metadataName ]?.[ attributeKey ]
-				)
-			) {
-				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[ 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.
-						  // Currently only the `linkTarget` attribute of `core/button` is affected.
-						  ''
-						: block.attributes[ attributeKey ];
-			}
-		}
-	}
-	return Object.keys( content ).length > 0 ? content : undefined;
-}
-
 function setBlockEditMode( setEditMode, blocks, mode ) {
 	blocks.forEach( ( block ) => {
 		const editMode =
@@ -232,6 +109,8 @@ function RecursionWarning() {
 	);
 }
 
+const NOOP = () => {};
+
 // Wrap the main Edit function for the pattern block with a recursion wrapper
 // that allows short-circuiting rendering as early as possible, before any
 // of the other effects in the block edit have run.
@@ -257,33 +136,22 @@ function ReusableBlockEdit( {
 	clientId: patternClientId,
 	setAttributes,
 } ) {
-	const registry = useRegistry();
-	const { record, editedRecord, hasResolved } = useEntityRecord(
+	const { record, hasResolved } = useEntityRecord(
 		'postType',
 		'wp_block',
 		ref
 	);
+	const [ blocks ] = useEntityBlockEditor( 'postType', 'wp_block', {
+		id: ref,
+	} );
 	const isMissing = hasResolved && ! record;
 
-	// The value of the `content` attribute, stored in a `ref` to avoid triggering the effect
-	// that runs `applyInitialContentValuesToInnerBlocks` unnecessarily.
-	const contentRef = useRef( content );
-
-	// The default content values from the original pattern for overridable attributes.
-	// Set by the `applyInitialContentValuesToInnerBlocks` function.
-	const defaultContent = useRef( {} );
-
-	const {
-		replaceInnerBlocks,
-		__unstableMarkNextChangeAsNotPersistent,
-		setBlockEditingMode,
-	} = useDispatch( blockEditorStore );
-	const { syncDerivedUpdates } = unlock( useDispatch( blockEditorStore ) );
+	const { setBlockEditingMode, __unstableMarkLastChangeAsPersistent } =
+		useDispatch( blockEditorStore );
 
 	const {
 		innerBlocks,
 		userCanEdit,
-		getBlockEditingMode,
 		onNavigateToEntityRecord,
 		editingMode,
 		hasPatternOverridesSource,
@@ -296,12 +164,11 @@ function ReusableBlockEdit( {
 				getBlockEditingMode: _getBlockEditingMode,
 			} = select( blockEditorStore );
 			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
-			const blocks = getBlocks( patternClientId );
 			const canEdit = canUser( 'update', 'blocks', ref );
 
 			// For editing link to the site editor if the theme and user permissions support it.
 			return {
-				innerBlocks: blocks,
+				innerBlocks: getBlocks( patternClientId ),
 				userCanEdit: canEdit,
 				getBlockEditingMode: _getBlockEditingMode,
 				onNavigateToEntityRecord:
@@ -333,115 +200,31 @@ function ReusableBlockEdit( {
 	] );
 
 	const canOverrideBlocks = useMemo(
-		() => hasPatternOverridesSource && hasOverridableBlocks( innerBlocks ),
-		[ hasPatternOverridesSource, 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 ]
+		() => hasPatternOverridesSource && hasOverridableBlocks( blocks ),
+		[ hasPatternOverridesSource, blocks ]
 	);
 
-	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,
-			contentRef.current
-		);
-		defaultContent.current = {};
-		const originalEditingMode = getBlockEditingMode( patternClientId );
-		// Replace the contents of the blocks with the overrides.
-		registry.batch( () => {
-			setBlockEditingMode( patternClientId, 'default' );
-			syncDerivedUpdates( () => {
-				const blocks = hasPatternOverridesSource
-					? applyInitialContentValuesToInnerBlocks(
-							initialBlocks,
-							contentRef.current,
-							defaultContent.current,
-							legacyIdMap.current
-					  )
-					: initialBlocks;
-
-				replaceInnerBlocks( patternClientId, blocks );
-			} );
-			setBlockEditingMode( patternClientId, originalEditingMode );
-		} );
-	}, [
-		hasPatternOverridesSource,
-		__unstableMarkNextChangeAsNotPersistent,
-		patternClientId,
-		initialBlocks,
-		replaceInnerBlocks,
-		registry,
-		getBlockEditingMode,
-		setBlockEditingMode,
-		syncDerivedUpdates,
-	] );
-
-	const { alignment, layout } = useInferredLayout(
-		innerBlocks,
-		parentLayout
-	);
+	const { alignment, layout } = useInferredLayout( blocks, parentLayout );
 	const layoutClasses = useLayoutClasses( { layout }, name );
 
 	const blockProps = useBlockProps( {
-		className: classnames(
+		className: clsx(
 			'block-library-block__reusable-block-container',
 			layout && layoutClasses,
 			{ [ `align${ alignment }` ]: alignment }
 		),
 	} );
 
+	// Use `blocks` variable until `innerBlocks` is populated, which has the proper clientIds.
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		templateLock: 'contentOnly',
+		templateLock: 'all',
 		layout,
-		renderAppender: innerBlocks?.length
-			? undefined
-			: InnerBlocks.ButtonBlockAppender,
+		value: innerBlocks.length > 0 ? innerBlocks : blocks,
+		onInput: NOOP,
+		onChange: NOOP,
+		renderAppender: blocks?.length ? undefined : blocks.ButtonBlockAppender,
 	} );
 
-	// 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( () => {
-			const blocks = getBlocks( patternClientId );
-			if ( blocks !== prevBlocks ) {
-				prevBlocks = blocks;
-				syncDerivedUpdates( () => {
-					const updatedContent = getContentValuesFromInnerBlocks(
-						blocks,
-						defaultContent.current,
-						legacyIdMap.current
-					);
-					setAttributes( {
-						content: updatedContent,
-					} );
-					contentRef.current = updatedContent;
-				} );
-			}
-		}, blockEditorStore );
-	}, [
-		hasPatternOverridesSource,
-		syncDerivedUpdates,
-		patternClientId,
-		registry,
-		setAttributes,
-	] );
-
 	const handleEditOriginal = () => {
 		onNavigateToEntityRecord( {
 			postId: ref,
@@ -451,7 +234,9 @@ function ReusableBlockEdit( {
 
 	const resetContent = () => {
 		if ( content ) {
-			replaceInnerBlocks( patternClientId, initialBlocks );
+			// Make sure any previous changes are persisted before resetting.
+			__unstableMarkLastChangeAsPersistent();
+			setAttributes( { content: undefined } );
 		}
 	};
 

package/src/block/editor.scss

@@ -16,17 +16,19 @@
 }
 
 .edit-post-visual-editor .block-editor-block-list__block:not(.remove-outline).is-reusable {
-	&.is-highlighted,
-	&.is-selected {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+
+	&.is-highlighted::after,
+	&.is-selected::after {
+		outline-color: var(--wp-block-synced-color);
 	}
 
 	&.block-editor-block-list__block:not([contenteditable]):focus {
 		&::after {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+			outline-color: var(--wp-block-synced-color);
+
 			// Show a light color for dark themes.
 			.is-dark-theme & {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
+				outline-color: $dark-theme-focus;
 			}
 		}
 	}

package/src/button/block.json

@@ -73,6 +73,7 @@
 	},
 	"supports": {
 		"anchor": true,
+		"splitting": true,
 		"align": false,
 		"alignWide": false,
 		"color": {

package/src/button/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -58,7 +58,7 @@ function migrateAlign( attributes ) {
 	const { align, ...otherAttributes } = attributes;
 	return {
 		...otherAttributes,
-		className: classnames(
+		className: clsx(
 			otherAttributes.className,
 			`align${ attributes.align }`
 		),
@@ -226,7 +226,7 @@ const v11 = {
 		const borderProps = getBorderClassesAndStyles( attributes );
 		const colorProps = getColorClassesAndStyles( attributes );
 		const spacingProps = getSpacingClassesAndStyles( attributes );
-		const buttonClasses = classnames(
+		const buttonClasses = clsx(
 			'wp-block-button__link',
 			colorProps.className,
 			borderProps.className,
@@ -246,7 +246,7 @@ const v11 = {
 		// if it had already been assigned, for the sake of backward-compatibility.
 		// A title will no longer be assigned for new or updated button block links.
 
-		const wrapperClasses = classnames( className, {
+		const wrapperClasses = clsx( className, {
 			[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 			[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
 		} );
@@ -352,7 +352,7 @@ const v10 = {
 		const borderProps = getBorderClassesAndStyles( attributes );
 		const colorProps = getColorClassesAndStyles( attributes );
 		const spacingProps = getSpacingClassesAndStyles( attributes );
-		const buttonClasses = classnames(
+		const buttonClasses = clsx(
 			'wp-block-button__link',
 			colorProps.className,
 			borderProps.className,
@@ -372,7 +372,7 @@ const v10 = {
 		// if it had already been assigned, for the sake of backward-compatibility.
 		// A title will no longer be assigned for new or updated button block links.
 
-		const wrapperClasses = classnames( className, {
+		const wrapperClasses = clsx( className, {
 			[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 			[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
 		} );
@@ -468,7 +468,7 @@ const deprecated = [
 
 			const borderRadius = style?.border?.radius;
 			const colorProps = getColorClassesAndStyles( attributes );
-			const buttonClasses = classnames(
+			const buttonClasses = clsx(
 				'wp-block-button__link',
 				colorProps.className,
 				{
@@ -484,7 +484,7 @@ const deprecated = [
 			// if it had already been assigned, for the sake of backward-compatibility.
 			// A title will no longer be assigned for new or updated button block links.
 
-			const wrapperClasses = classnames( className, {
+			const wrapperClasses = clsx( className, {
 				[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 				[ `has-custom-font-size` ]:
 					fontSize || style?.typography?.fontSize,
@@ -558,7 +558,7 @@ const deprecated = [
 			const { borderRadius, linkTarget, rel, text, title, url, width } =
 				attributes;
 			const colorProps = getColorClassesAndStyles( attributes );
-			const buttonClasses = classnames(
+			const buttonClasses = clsx(
 				'wp-block-button__link',
 				colorProps.className,
 				{
@@ -574,7 +574,7 @@ const deprecated = [
 			// if it had already been assigned, for the sake of backward-compatibility.
 			// A title will no longer be assigned for new or updated button block links.
 
-			const wrapperClasses = classnames( className, {
+			const wrapperClasses = clsx( className, {
 				[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 			} );
 
@@ -646,7 +646,7 @@ const deprecated = [
 			const { borderRadius, linkTarget, rel, text, title, url, width } =
 				attributes;
 			const colorProps = getColorClassesAndStyles( attributes );
-			const buttonClasses = classnames(
+			const buttonClasses = clsx(
 				'wp-block-button__link',
 				colorProps.className,
 				{
@@ -662,7 +662,7 @@ const deprecated = [
 			// if it had already been assigned, for the sake of backward-compatibility.
 			// A title will no longer be assigned for new or updated button block links.
 
-			const wrapperClasses = classnames( className, {
+			const wrapperClasses = clsx( className, {
 				[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 			} );
 
@@ -725,7 +725,7 @@ const deprecated = [
 		save( { attributes } ) {
 			const { borderRadius, linkTarget, rel, text, title, url } =
 				attributes;
-			const buttonClasses = classnames( 'wp-block-button__link', {
+			const buttonClasses = clsx( 'wp-block-button__link', {
 				'no-border-radius': borderRadius === 0,
 			} );
 			const buttonStyle = {
@@ -823,7 +823,7 @@ const deprecated = [
 				getColorClassName( 'background-color', backgroundColor );
 			const gradientClass = __experimentalGetGradientClass( gradient );
 
-			const buttonClasses = classnames( 'wp-block-button__link', {
+			const buttonClasses = clsx( 'wp-block-button__link', {
 				'has-text-color': textColor || customTextColor,
 				[ textClass ]: textClass,
 				'has-background':
@@ -941,7 +941,7 @@ const deprecated = [
 				backgroundColor
 			);
 
-			const buttonClasses = classnames( 'wp-block-button__link', {
+			const buttonClasses = clsx( 'wp-block-button__link', {
 				'has-text-color': textColor || customTextColor,
 				[ textClass ]: textClass,
 				'has-background': backgroundColor || customBackgroundColor,
@@ -1009,7 +1009,7 @@ const deprecated = [
 				backgroundColor
 			);
 
-			const buttonClasses = classnames( 'wp-block-button__link', {
+			const buttonClasses = clsx( 'wp-block-button__link', {
 				'has-text-color': textColor || customTextColor,
 				[ textClass ]: textClass,
 				'has-background': backgroundColor || customBackgroundColor,