@wordpress/block-library 8.33.0 → 8.35.0

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();
 
@@ -92,115 +75,13 @@ const useInferredLayout = ( blocks, parentLayout ) => {
 
 function hasOverridableBlocks( blocks ) {
 	return blocks.some( ( block ) => {
-		if ( isOverridableBlock( block ) ) return true;
-		return hasOverridableBlocks( block.innerBlocks );
-	} );
-}
-
-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 ];
-			}
+		if ( isOverridableBlock( block ) ) {
+			return true;
 		}
-		return {
-			...block,
-			attributes: newAttributes,
-			innerBlocks,
-		};
+		return hasOverridableBlocks( block.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 =
@@ -228,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.
@@ -253,32 +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 initial value of the `content` attribute.
-	const initialContent = 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,
@@ -291,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:
@@ -328,113 +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,
-			initialContent.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,
-							initialContent.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: '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( () => {
-					setAttributes( {
-						content: getContentValuesFromInnerBlocks(
-							blocks,
-							defaultContent.current,
-							legacyIdMap.current
-						),
-					} );
-				} );
-			}
-		}, blockEditorStore );
-	}, [
-		hasPatternOverridesSource,
-		syncDerivedUpdates,
-		patternClientId,
-		registry,
-		setAttributes,
-	] );
-
 	const handleEditOriginal = () => {
 		onNavigateToEntityRecord( {
 			postId: ref,
@@ -444,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/block-keyboard-shortcuts/index.js

@@ -0,0 +1,113 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	useShortcut,
+	store as keyboardShortcutsStore,
+} from '@wordpress/keyboard-shortcuts';
+import { __ } from '@wordpress/i18n';
+import { createBlock } from '@wordpress/blocks';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+function BlockKeyboardShortcuts() {
+	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
+		useSelect( blockEditorStore );
+
+	const handleTransformHeadingAndParagraph = ( event, level ) => {
+		event.preventDefault();
+
+		const currentClientId = getSelectedBlockClientId();
+		if ( currentClientId === null ) {
+			return;
+		}
+
+		const blockName = getBlockName( currentClientId );
+		const isParagraph = blockName === 'core/paragraph';
+		const isHeading = blockName === 'core/heading';
+
+		if ( ! isParagraph && ! isHeading ) {
+			return;
+		}
+
+		const destinationBlockName =
+			level === 0 ? 'core/paragraph' : 'core/heading';
+
+		const attributes = getBlockAttributes( currentClientId );
+
+		// Avoid unnecessary block transform when attempting to transform to
+		// the same block type and/or same level.
+		if (
+			( isParagraph && level === 0 ) ||
+			( isHeading && attributes.level === level )
+		) {
+			return;
+		}
+
+		const textAlign =
+			blockName === 'core/paragraph' ? 'align' : 'textAlign';
+		const destinationTextAlign =
+			destinationBlockName === 'core/paragraph' ? 'align' : 'textAlign';
+
+		replaceBlocks(
+			currentClientId,
+			createBlock( destinationBlockName, {
+				level,
+				content: attributes.content,
+				...{ [ destinationTextAlign ]: attributes[ textAlign ] },
+			} )
+		);
+	};
+
+	useEffect( () => {
+		registerShortcut( {
+			name: 'core/block-editor/transform-heading-to-paragraph',
+			category: 'block-library',
+			description: __( 'Transform heading to paragraph.' ),
+			keyCombination: {
+				modifier: 'access',
+				character: '0',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: '7',
+				},
+			],
+		} );
+
+		[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
+			registerShortcut( {
+				name: `core/block-editor/transform-paragraph-to-heading-${ level }`,
+				category: 'block-library',
+				description: __( 'Transform paragraph to heading.' ),
+				keyCombination: {
+					modifier: 'access',
+					character: `${ level }`,
+				},
+			} );
+		} );
+	}, [] );
+
+	useShortcut(
+		'core/block-editor/transform-heading-to-paragraph',
+		( event ) => handleTransformHeadingAndParagraph( event, 0 )
+	);
+
+	[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
+		//the loop is based off on a constant therefore
+		//the hook will execute the same way every time
+		//eslint-disable-next-line react-hooks/rules-of-hooks
+		useShortcut(
+			`core/block-editor/transform-paragraph-to-heading-${ level }`,
+			( event ) => handleTransformHeadingAndParagraph( event, level )
+		);
+	} );
+
+	return null;
+}
+
+export default BlockKeyboardShortcuts;

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,

package/src/button/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -257,7 +257,7 @@ function ButtonEdit( props ) {
 		<>
 			<div
 				{ ...blockProps }
-				className={ classnames( blockProps.className, {
+				className={ clsx( blockProps.className, {
 					[ `has-custom-width wp-block-button__width-${ width }` ]:
 						width,
 					[ `has-custom-font-size` ]: blockProps.style.fontSize,
@@ -274,7 +274,7 @@ function ButtonEdit( props ) {
 						} )
 					}
 					withoutInteractiveFormatting
-					className={ classnames(
+					className={ clsx(
 						className,
 						'wp-block-button__link',
 						colorProps.className,
@@ -293,12 +293,6 @@ function ButtonEdit( props ) {
 						...spacingProps.style,
 						...shadowProps.style,
 					} }
-					onSplit={ ( value ) =>
-						createBlock( 'core/button', {
-							...attributes,
-							text: value,
-						} )
-					}
 					onReplace={ onReplace }
 					onMerge={ mergeBlocks }
 					identifier="text"