@wordpress/block-editor 12.25.0 → 13.0.0

package/src/components/block-content-overlay/content.scss

@@ -1,46 +1,13 @@
 .block-editor-block-list__block.has-block-overlay {
 	cursor: default;
 
-	&::before {
-		content: "";
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background: transparent;
-		border: none;
-		border-radius: $radius-block-ui;
-		z-index: z-index(".block-editor-block-list__block.has-block-overlay");
-	}
-
-	&:not(.is-multi-selected)::after {
-		content: none !important;
-	}
-
-	&:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before {
-		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
-	}
-
-	&.is-reusable:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before,
-	&.wp-block-template-part:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before {
-		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
-		box-shadow: 0 0 0 $border-width var(--wp-block-synced-color) inset;
-	}
-
-	&.is-selected:not(.is-dragging-blocks)::before {
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
-	}
-
 	.block-editor-block-list__block {
 		pointer-events: none;
 	}
 
-	.block-editor-iframe__body.is-zoomed-out &::before {
-		// Unfortunately because of the vw unit, this is not always going to be exact
-		// When the scrollbar is visible, the frame exceeds the canvas by a few pixels.
-		width: calc(100vw);
-		left: calc(( 100% - 100vw ) / 2);
+	.block-editor-block-list__block.has-block-overlay::before {
+		left: 0;
+		right: 0;
+		width: auto;
 	}
 }

package/src/components/block-draggable/test/helpers.native.js

@@ -108,11 +108,11 @@ export const initializeWithBlocksLayouts = async ( blocks ) => {
 /**
  * Fires long-press gesture event on a block.
  *
- * @param {HTMLElement} block                  Block test instance.
- * @param {string}      testID                 Id for querying the draggable trigger element.
- * @param {Object}      [options]              Configuration options for the gesture event.
- * @param {boolean}     [options.failed]       Determines if the gesture should fail.
- * @param {number}      [options.triggerIndex] In case there are multiple draggable triggers, this specifies the index to use.
+ * @param {import('react-test-renderer').ReactTestInstance} block                  Block test instance.
+ * @param {string}                                          testID                 Id for querying the draggable trigger element.
+ * @param {Object}                                          [options]              Configuration options for the gesture event.
+ * @param {boolean}                                         [options.failed]       Determines if the gesture should fail.
+ * @param {number}                                          [options.triggerIndex] In case there are multiple draggable triggers, this specifies the index to use.
  */
 export const fireLongPress = (
 	block,
@@ -140,8 +140,8 @@ export const fireLongPress = (
 /**
  * Fires pan gesture event on a BlockDraggable component.
  *
- * @param {HTMLElement} blockDraggable BlockDraggable test instance.
- * @param {Object}      [touchEvents]  Array of touch events to dispatch on the pan gesture.
+ * @param {import('react-test-renderer').ReactTestInstance} blockDraggable BlockDraggable test instance.
+ * @param {Object}                                          [touchEvents]  Array of touch events to dispatch on the pan gesture.
  */
 export const firePanGesture = (
 	blockDraggable,
@@ -169,7 +169,7 @@ export const firePanGesture = (
  *
  * @param {import('@testing-library/react-native').RenderAPI} screen The Testing Library screen.
  *
- * @return {HTMLElement} Draggable chip test instance.
+ * @return {import('react-test-renderer').ReactTestInstance} Draggable chip test instance.
  */
 export const getDraggableChip = ( { getByTestId } ) => {
 	let draggableChip;

package/src/components/block-edit/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -75,7 +75,7 @@ const EditWithGeneratedProps = ( props ) => {
 	const generatedClassName = hasBlockSupport( blockType, 'className', true )
 		? getBlockDefaultClassName( name )
 		: null;
-	const className = classnames(
+	const className = clsx(
 		generatedClassName,
 		attributes.className,
 		props.className

package/src/components/block-edit/index.js

@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
-
+import { useMemo, useContext } from '@wordpress/element';
 import { hasBlockSupport } from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
@@ -17,6 +17,8 @@ import {
 	blockBindingsKey,
 	isPreviewModeKey,
 } from './context';
+import { MultipleUsageWarning } from './multiple-usage-warning';
+import { PrivateBlockContext } from '../block-list/private-block-context';
 
 /**
  * The `useBlockEditContext` hook provides information about the block this hook is being used in.
@@ -49,6 +51,8 @@ export default function BlockEdit( {
 	const layoutSupport =
 		hasBlockSupport( name, 'layout', false ) ||
 		hasBlockSupport( name, '__experimentalLayout', false );
+	const { originalBlockClientId } = useContext( PrivateBlockContext );
+
 	return (
 		<BlockEditContextProvider
 			// It is important to return the same object if props haven't
@@ -85,6 +89,13 @@ export default function BlockEdit( {
 			) }
 		>
 			<Edit { ...props } />
+			{ originalBlockClientId && (
+				<MultipleUsageWarning
+					originalBlockClientId={ originalBlockClientId }
+					name={ name }
+					onReplace={ props.onReplace }
+				/>
+			) }
 		</BlockEditContextProvider>
 	);
 }

package/src/components/block-edit/multiple-usage-warning.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockType } from '@wordpress/blocks';
+import { Button } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import Warning from '../warning';
+
+export function MultipleUsageWarning( {
+	originalBlockClientId,
+	name,
+	onReplace,
+} ) {
+	const { selectBlock } = useDispatch( blockEditorStore );
+	const blockType = getBlockType( name );
+
+	return (
+		<Warning
+			actions={ [
+				<Button
+					key="find-original"
+					variant="secondary"
+					onClick={ () => selectBlock( originalBlockClientId ) }
+				>
+					{ __( 'Find original' ) }
+				</Button>,
+				<Button
+					key="remove"
+					variant="secondary"
+					onClick={ () => onReplace( [] ) }
+				>
+					{ __( 'Remove' ) }
+				</Button>,
+			] }
+		>
+			<strong>{ blockType?.title }: </strong>
+			{ __( 'This block can only be used once.' ) }
+		</Warning>
+	);
+}

package/src/components/block-icon/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -30,7 +30,7 @@ function BlockIcon( { icon, showColors = false, className, context } ) {
 	return (
 		<span
 			style={ style }
-			className={ classnames( 'block-editor-block-icon', className, {
+			className={ clsx( 'block-editor-block-icon', className, {
 				'has-colors': showColors,
 			} ) }
 		>

package/src/components/block-inspector/index.js

@@ -95,7 +95,8 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			blockType: _blockType,
 			topLevelLockedBlock:
 				getContentLockingParent( _selectedBlockClientId ) ||
-				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly'
+				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly' ||
+				_selectedBlockName === 'core/block'
 					? _selectedBlockClientId
 					: undefined ),
 		};
@@ -110,10 +111,8 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 	// displays based on the relationship between the selected block
 	// and its parent, and only enable it if the parent is controlling
 	// its children blocks.
-	const blockInspectorAnimationSettings = useBlockInspectorAnimationSettings(
-		blockType,
-		selectedBlockClientId
-	);
+	const blockInspectorAnimationSettings =
+		useBlockInspectorAnimationSettings( blockType );
 
 	const borderPanelLabel = useBorderPanelLabel( {
 		blockName: selectedBlockName,

package/src/components/block-inspector/useBlockInspectorAnimationSettings.js

@@ -8,10 +8,7 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as blockEditorStore } from '../../store';
 
-export default function useBlockInspectorAnimationSettings(
-	blockType,
-	selectedBlockClientId
-) {
+export default function useBlockInspectorAnimationSettings( blockType ) {
 	return useSelect(
 		( select ) => {
 			if ( blockType ) {
@@ -48,6 +45,6 @@ export default function useBlockInspectorAnimationSettings(
 			}
 			return null;
 		},
-		[ selectedBlockClientId, blockType ]
+		[ blockType ]
 	);
 }

package/src/components/block-list/block-invalid-warning.native.js

@@ -54,7 +54,7 @@ export default function BlockInvalidWarning( { clientId } ) {
 		<TouchableWithoutFeedback
 			onPress={ attemptBlockRecovery }
 			accessible
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 		>
 			<Warning
 				title={ blockTitle }

package/src/components/block-list/block.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -23,6 +23,7 @@ import {
 	isUnmodifiedBlock,
 	isReusableBlock,
 	getBlockDefaultClassName,
+	hasBlockSupport,
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
@@ -64,7 +65,7 @@ function mergeWrapperProps( propsA, propsB ) {
 		propsA?.hasOwnProperty( 'className' ) &&
 		propsB?.hasOwnProperty( 'className' )
 	) {
-		newProps.className = classnames( propsA.className, propsB.className );
+		newProps.className = clsx( propsA.className, propsB.className );
 	}
 
 	if (
@@ -177,7 +178,7 @@ function BlockListBlock( {
 	if ( isAligned ) {
 		blockEdit = (
 			<div
-				className={ classnames( 'wp-block', isSticky && className ) }
+				className={ clsx( 'wp-block', isSticky && className ) }
 				data-align={ wrapperProps[ 'data-align' ] }
 			>
 				{ blockEdit }
@@ -216,12 +217,14 @@ function BlockListBlock( {
 	}
 
 	const { 'data-align': dataAlign, ...restWrapperProps } = wrapperProps ?? {};
-
-	restWrapperProps.className = classnames(
-		restWrapperProps.className,
-		dataAlign && themeSupportsLayout && `align${ dataAlign }`,
-		! ( dataAlign && isSticky ) && className
-	);
+	const updatedWrapperProps = {
+		...restWrapperProps,
+		className: clsx(
+			restWrapperProps.className,
+			dataAlign && themeSupportsLayout && `align${ dataAlign }`,
+			! ( dataAlign && isSticky ) && className
+		),
+	};
 
 	// We set a new context with the adjusted and filtered wrapperProps (through
 	// `editor.BlockListBlock`), which the `BlockListBlockProvider` did not have
@@ -234,7 +237,7 @@ function BlockListBlock( {
 	return (
 		<PrivateBlockContext.Provider
 			value={ {
-				wrapperProps: restWrapperProps,
+				wrapperProps: updatedWrapperProps,
 				isAligned,
 				...context,
 			} }
@@ -262,6 +265,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 		__unstableMarkLastChangeAsPersistent,
 		moveBlocksToPosition,
 		removeBlock,
+		selectBlock,
 	} = dispatch( blockEditorStore );
 
 	// Do not add new properties here, use `useDispatch` instead to avoid
@@ -303,6 +307,28 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 				canInsertBlockType,
 			} = registry.select( blockEditorStore );
 
+			function switchToDefaultOrRemove() {
+				const block = getBlock( clientId );
+				const defaultBlockName = getDefaultBlockName();
+				if ( getBlockName( clientId ) !== defaultBlockName ) {
+					const replacement = switchToBlockType(
+						block,
+						defaultBlockName
+					);
+					if ( replacement && replacement.length ) {
+						replaceBlocks( clientId, replacement );
+					}
+				} else if ( isUnmodifiedDefaultBlock( block ) ) {
+					const nextBlockClientId = getNextBlockClientId( clientId );
+					if ( nextBlockClientId ) {
+						registry.batch( () => {
+							removeBlock( clientId );
+							selectBlock( nextBlockClientId );
+						} );
+					}
+				}
+			}
+
 			/**
 			 * Moves the block with clientId up one level. If the block type
 			 * cannot be inserted at the new location, it will be attempted to
@@ -342,7 +368,16 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 								getDefaultBlockName()
 							);
 
-							if ( replacement && replacement.length ) {
+							if (
+								replacement &&
+								replacement.length &&
+								replacement.every( ( block ) =>
+									canInsertBlockType(
+										block.name,
+										targetRootClientId
+									)
+								)
+							) {
 								insertBlocks(
 									replacement,
 									getBlockIndex( _clientId ),
@@ -350,6 +385,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 									changeSelection
 								);
 								removeBlock( firstClientId, false );
+							} else {
+								switchToDefaultOrRemove();
 							}
 						}
 
@@ -460,16 +497,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 					}
 
 					moveFirstItemUp( rootClientId );
-				} else if (
-					getBlockName( clientId ) !== getDefaultBlockName()
-				) {
-					const replacement = switchToBlockType(
-						getBlock( clientId ),
-						getDefaultBlockName()
-					);
-					if ( replacement && replacement.length ) {
-						replaceBlocks( clientId, replacement );
-					}
+				} else {
+					switchToDefaultOrRemove();
 				}
 			}
 		},
@@ -532,6 +561,7 @@ function BlockListBlockProvider( props ) {
 				isFirstMultiSelectedBlock,
 				getMultiSelectedBlockClientIds,
 				hasSelectedInnerBlock,
+				getBlocksByName,
 
 				getBlockIndex,
 				isBlockMultiSelected,
@@ -605,6 +635,17 @@ function BlockListBlockProvider( props ) {
 			const movingClientId = hasBlockMovingClientId();
 			const blockEditingMode = getBlockEditingMode( clientId );
 
+			const multiple = hasBlockSupport( blockName, 'multiple', true );
+
+			// For block types with `multiple` support, there is no "original
+			// block" to be found in the content, as the block itself is valid.
+			const blocksWithSameName = multiple
+				? []
+				: getBlocksByName( blockName );
+			const isInvalid =
+				blocksWithSameName.length &&
+				blocksWithSameName[ 0 ] !== clientId;
+
 			return {
 				...previewContext,
 				mode: getBlockMode( clientId ),
@@ -662,6 +703,9 @@ function BlockListBlockProvider( props ) {
 				hasEditableOutline:
 					blockEditingMode !== 'disabled' &&
 					getBlockEditingMode( rootClientId ) === 'disabled',
+				originalBlockClientId: isInvalid
+					? blocksWithSameName[ 0 ]
+					: false,
 			};
 		},
 		[ clientId, rootClientId ]
@@ -705,6 +749,7 @@ function BlockListBlockProvider( props ) {
 		hasEditableOutline,
 		className,
 		defaultClassName,
+		originalBlockClientId,
 	} = selectedProps;
 
 	// Users of the editor.BlockListBlock filter used to be able to
@@ -752,6 +797,7 @@ function BlockListBlockProvider( props ) {
 		defaultClassName,
 		mayDisplayControls,
 		mayDisplayParentControls,
+		originalBlockClientId,
 		themeSupportsLayout,
 	};
 

package/src/components/block-list/block.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Pressable, View } from 'react-native';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -14,13 +14,7 @@ import {
 	useRef,
 	memo,
 } from '@wordpress/element';
-import {
-	GlobalStylesContext,
-	getMergedGlobalStyles,
-	useMobileGlobalStylesColors,
-	useGlobalStyles,
-	withFilters,
-} from '@wordpress/components';
+import { withFilters } from '@wordpress/components';
 import {
 	__experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel,
 	getBlockType,
@@ -51,6 +45,12 @@ import { useSettings } from '../use-settings';
 import { unlock } from '../../lock-unlock';
 import BlockCrashBoundary from './block-crash-boundary';
 import BlockCrashWarning from './block-crash-warning';
+import {
+	getMergedGlobalStyles,
+	GlobalStylesContext,
+	useGlobalStyles,
+	useMobileGlobalStylesColors,
+} from '../global-styles/use-global-styles-context';
 
 const EMPTY_ARRAY = [];
 
@@ -73,7 +73,7 @@ function mergeWrapperProps( propsA, propsB ) {
 		propsA?.hasOwnProperty( 'className' ) &&
 		propsB?.hasOwnProperty( 'className' )
 	) {
-		newProps.className = classnames( propsA.className, propsB.className );
+		newProps.className = clsx( propsA.className, propsB.className );
 	}
 
 	if (
@@ -669,8 +669,16 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 					}
 
 					moveFirstItemUp( rootClientId );
-				} else {
-					removeBlock( clientId );
+				} else if (
+					getBlockName( clientId ) !== getDefaultBlockName()
+				) {
+					const replacement = switchToBlockType(
+						getBlock( clientId ),
+						getDefaultBlockName()
+					);
+					if ( replacement && replacement.length ) {
+						replaceBlocks( clientId, replacement );
+					}
 				}
 			}
 		},