@wordpress/block-editor 12.10.3 → 12.11.0

package/src/components/copy-handler/index.js

@@ -1,304 +1,34 @@
 /**
  * WordPress dependencies
  */
-import { useCallback } from '@wordpress/element';
-import {
-	serialize,
-	pasteHandler,
-	store as blocksStore,
-	createBlock,
-	findTransform,
-	getBlockTransforms,
-} from '@wordpress/blocks';
-import {
-	documentHasSelection,
-	documentHasUncollapsedSelection,
-	__unstableStripHTML as stripHTML,
-} from '@wordpress/dom';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { __, _n, sprintf } from '@wordpress/i18n';
-import { store as noticesStore } from '@wordpress/notices';
-import { useRefEffect } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
-import { getPasteEventData } from '../../utils/pasting';
-import { store as blockEditorStore } from '../../store';
-
-export function useNotifyCopy() {
-	const { getBlockName } = useSelect( blockEditorStore );
-	const { getBlockType } = useSelect( blocksStore );
-	const { createSuccessNotice } = useDispatch( noticesStore );
-
-	return useCallback( ( eventType, selectedBlockClientIds ) => {
-		let notice = '';
-		if ( selectedBlockClientIds.length === 1 ) {
-			const clientId = selectedBlockClientIds[ 0 ];
-			const title = getBlockType( getBlockName( clientId ) )?.title;
-			notice =
-				eventType === 'copy'
-					? sprintf(
-							// Translators: Name of the block being copied, e.g. "Paragraph".
-							__( 'Copied "%s" to clipboard.' ),
-							title
-					  )
-					: sprintf(
-							// Translators: Name of the block being cut, e.g. "Paragraph".
-							__( 'Moved "%s" to clipboard.' ),
-							title
-					  );
-		} else {
-			notice =
-				eventType === 'copy'
-					? sprintf(
-							// Translators: %d: Number of blocks being copied.
-							_n(
-								'Copied %d block to clipboard.',
-								'Copied %d blocks to clipboard.',
-								selectedBlockClientIds.length
-							),
-							selectedBlockClientIds.length
-					  )
-					: sprintf(
-							// Translators: %d: Number of blocks being cut.
-							_n(
-								'Moved %d block to clipboard.',
-								'Moved %d blocks to clipboard.',
-								selectedBlockClientIds.length
-							),
-							selectedBlockClientIds.length
-					  );
-		}
-		createSuccessNotice( notice, {
-			type: 'snackbar',
-		} );
-	}, [] );
-}
-
-export function useClipboardHandler() {
-	const {
-		getBlocksByClientId,
-		getSelectedBlockClientIds,
-		hasMultiSelection,
-		getSettings,
-		__unstableIsFullySelected,
-		__unstableIsSelectionCollapsed,
-		__unstableIsSelectionMergeable,
-		__unstableGetSelectedBlocksWithPartialSelection,
-		canInsertBlockType,
-	} = useSelect( blockEditorStore );
-	const {
-		flashBlock,
-		removeBlocks,
-		replaceBlocks,
-		__unstableDeleteSelection,
-		__unstableExpandSelection,
-		insertBlocks,
-	} = useDispatch( blockEditorStore );
-	const notifyCopy = useNotifyCopy();
-
-	return useRefEffect( ( node ) => {
-		function handler( event ) {
-			if ( event.defaultPrevented ) {
-				// This was likely already handled in rich-text/use-paste-handler.js.
-				return;
-			}
-
-			const selectedBlockClientIds = getSelectedBlockClientIds();
-
-			if ( selectedBlockClientIds.length === 0 ) {
-				return;
-			}
-
-			// Always handle multiple selected blocks.
-			if ( ! hasMultiSelection() ) {
-				const { target } = event;
-				const { ownerDocument } = target;
-				// If copying, only consider actual text selection as selection.
-				// Otherwise, any focus on an input field is considered.
-				const hasSelection =
-					event.type === 'copy' || event.type === 'cut'
-						? documentHasUncollapsedSelection( ownerDocument )
-						: documentHasSelection( ownerDocument );
-
-				// Let native copy behaviour take over in input fields.
-				if ( hasSelection ) {
-					return;
-				}
-			}
-
-			if ( ! node.contains( event.target.ownerDocument.activeElement ) ) {
-				return;
-			}
-
-			event.preventDefault();
-
-			const isSelectionMergeable = __unstableIsSelectionMergeable();
-			const shouldHandleWholeBlocks =
-				__unstableIsSelectionCollapsed() || __unstableIsFullySelected();
-			const expandSelectionIsNeeded =
-				! shouldHandleWholeBlocks && ! isSelectionMergeable;
-			if ( event.type === 'copy' || event.type === 'cut' ) {
-				if ( selectedBlockClientIds.length === 1 ) {
-					flashBlock( selectedBlockClientIds[ 0 ] );
-				}
-				// If we have a partial selection that is not mergeable, just
-				// expand the selection to the whole blocks.
-				if ( expandSelectionIsNeeded ) {
-					__unstableExpandSelection();
-				} else {
-					notifyCopy( event.type, selectedBlockClientIds );
-					let blocks;
-					// Check if we have partial selection.
-					if ( shouldHandleWholeBlocks ) {
-						blocks = getBlocksByClientId( selectedBlockClientIds );
-					} else {
-						const [ head, tail ] =
-							__unstableGetSelectedBlocksWithPartialSelection();
-						const inBetweenBlocks = getBlocksByClientId(
-							selectedBlockClientIds.slice(
-								1,
-								selectedBlockClientIds.length - 1
-							)
-						);
-						blocks = [ head, ...inBetweenBlocks, tail ];
-					}
-
-					const wrapperBlockName = event.clipboardData.getData(
-						'__unstableWrapperBlockName'
-					);
-
-					if ( wrapperBlockName ) {
-						blocks = createBlock(
-							wrapperBlockName,
-							JSON.parse(
-								event.clipboardData.getData(
-									'__unstableWrapperBlockAttributes'
-								)
-							),
-							blocks
-						);
-					}
-
-					const serialized = serialize( blocks );
-
-					event.clipboardData.setData(
-						'text/plain',
-						toPlainText( serialized )
-					);
-					event.clipboardData.setData( 'text/html', serialized );
-				}
-			}
-
-			if ( event.type === 'cut' ) {
-				// We need to also check if at the start we needed to
-				// expand the selection, as in this point we might have
-				// programmatically fully selected the blocks above.
-				if ( shouldHandleWholeBlocks && ! expandSelectionIsNeeded ) {
-					removeBlocks( selectedBlockClientIds );
-				} else {
-					event.target.ownerDocument.activeElement.contentEditable = false;
-					__unstableDeleteSelection();
-				}
-			} else if ( event.type === 'paste' ) {
-				const {
-					__experimentalCanUserUseUnfilteredHTML:
-						canUserUseUnfilteredHTML,
-				} = getSettings();
-				const { plainText, html, files } = getPasteEventData( event );
-				let blocks = [];
-
-				if ( files.length ) {
-					const fromTransforms = getBlockTransforms( 'from' );
-					blocks = files
-						.reduce( ( accumulator, file ) => {
-							const transformation = findTransform(
-								fromTransforms,
-								( transform ) =>
-									transform.type === 'files' &&
-									transform.isMatch( [ file ] )
-							);
-							if ( transformation ) {
-								accumulator.push(
-									transformation.transform( [ file ] )
-								);
-							}
-							return accumulator;
-						}, [] )
-						.flat();
-				} else {
-					blocks = pasteHandler( {
-						HTML: html,
-						plainText,
-						mode: 'BLOCKS',
-						canUserUseUnfilteredHTML,
-					} );
-				}
-
-				if ( selectedBlockClientIds.length === 1 ) {
-					const [ selectedBlockClientId ] = selectedBlockClientIds;
-
-					if (
-						blocks.every( ( block ) =>
-							canInsertBlockType(
-								block.name,
-								selectedBlockClientId
-							)
-						)
-					) {
-						insertBlocks(
-							blocks,
-							undefined,
-							selectedBlockClientId
-						);
-						return;
-					}
-				}
-
-				replaceBlocks(
-					selectedBlockClientIds,
-					blocks,
-					blocks.length - 1,
-					-1
-				);
-			}
-		}
-
-		node.ownerDocument.addEventListener( 'copy', handler );
-		node.ownerDocument.addEventListener( 'cut', handler );
-		node.ownerDocument.addEventListener( 'paste', handler );
-
-		return () => {
-			node.ownerDocument.removeEventListener( 'copy', handler );
-			node.ownerDocument.removeEventListener( 'cut', handler );
-			node.ownerDocument.removeEventListener( 'paste', handler );
-		};
-	}, [] );
-}
-
-function CopyHandler( { children } ) {
-	return <div ref={ useClipboardHandler() }>{ children }</div>;
-}
+import useClipboardHandler from '../writing-flow/use-clipboard-handler';
 
 /**
- * Given a string of HTML representing serialized blocks, returns the plain
- * text extracted after stripping the HTML of any tags and fixing line breaks.
- *
- * @param {string} html Serialized blocks.
- * @return {string} The plain-text content with any html removed.
+ * @deprecated
  */
-function toPlainText( html ) {
-	// Manually handle BR tags as line breaks prior to `stripHTML` call
-	html = html.replace( /<br>/g, '\n' );
-
-	const plainText = stripHTML( html ).trim();
-
-	// Merge any consecutive line breaks
-	return plainText.replace( /\n\n+/g, '\n\n' );
-}
+export const __unstableUseClipboardHandler = () => {
+	deprecated( '__unstableUseClipboardHandler', {
+		alternative: 'BlockCanvas or WritingFlow',
+		since: '6.4',
+		version: '6.7',
+	} );
+	return useClipboardHandler();
+};
 
 /**
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/copy-handler/README.md
+ * @deprecated
+ * @param {Object} props
  */
-export default CopyHandler;
+export default function CopyHandler( props ) {
+	deprecated( 'CopyHandler', {
+		alternative: 'BlockCanvas or WritingFlow',
+		since: '6.4',
+		version: '6.7',
+	} );
+	return <div { ...props } ref={ useClipboardHandler() } />;
+}

package/src/components/dimensions-tool/index.js

@@ -47,7 +47,7 @@ import WidthHeightTool from './width-height-tool';
  *
  * @param {DimensionsControlsProps} props The component props.
  *
- * @return {WPElement} The dimensions controls.
+ * @return {Element} The dimensions controls.
  */
 function DimensionsTool( {
 	panelId,

package/src/components/dimensions-tool/scale-tool.js

@@ -76,7 +76,7 @@ const DEFAULT_SCALE_OPTIONS = [
  *
  * @param {ScaleToolProps} props
  *
- * @return {import('@wordpress/element').WPElement} The scale tool.
+ * @return {import('react').ReactElement} The scale tool.
  */
 export default function ScaleTool( {
 	panelId,

package/src/components/dimensions-tool/width-height-tool.js

@@ -46,7 +46,7 @@ const SingleColumnToolsPanelItem = styled( ToolsPanelItem )`
  *
  * @param {WidthHeightToolProps} props The component props.
  *
- * @return {import('@wordpress/element').WPElement} The width and height tool.
+ * @return {import('react').ReactElement} The width and height tool.
  */
 export default function WidthHeightTool( {
 	panelId,

package/src/components/duotone-control/index.js

@@ -12,8 +12,10 @@ import {
 import { __ } from '@wordpress/i18n';
 import { DOWN } from '@wordpress/keycodes';
 import { Icon, filter } from '@wordpress/icons';
+import { useInstanceId } from '@wordpress/compose';
 
 function DuotoneControl( {
+	id: idProp,
 	colorPalette,
 	duotonePalette,
 	disableCustomColors,
@@ -31,6 +33,11 @@ function DuotoneControl( {
 	} else {
 		toolbarIcon = <Icon icon={ filter } />;
 	}
+
+	const actionLabel = __( 'Apply duotone filter' );
+	const id = useInstanceId( DuotoneControl, 'duotone-control', idProp );
+	const descriptionId = `${ id }__description`;
+
 	return (
 		<Dropdown
 			popoverProps={ {
@@ -51,19 +58,24 @@ function DuotoneControl( {
 						aria-haspopup="true"
 						aria-expanded={ isOpen }
 						onKeyDown={ openOnArrowDown }
-						label={ __( 'Apply duotone filter' ) }
+						label={ actionLabel }
 						icon={ toolbarIcon }
 					/>
 				);
 			} }
 			renderContent={ () => (
 				<MenuGroup label={ __( 'Duotone' ) }>
-					<div className="block-editor-duotone-control__description">
+					<div
+						id={ descriptionId }
+						className="block-editor-duotone-control__description"
+					>
 						{ __(
 							'Create a two-tone color effect without losing your original image.'
 						) }
 					</div>
 					<DuotonePicker
+						aria-label={ actionLabel }
+						aria-describedby={ descriptionId }
 						colorPalette={ colorPalette }
 						duotonePalette={ duotonePalette }
 						disableCustomColors={ disableCustomColors }

package/src/components/editable-text/README.md

@@ -62,7 +62,7 @@ wp.blocks.registerBlockType( /* ... */, {
 	},
 
 	edit: function( props ) {
-		return wp.element.createElement( wp.editor.EditableText, {
+		return React.createElement( wp.editor.EditableText, {
 			className: props.className,
 			value: props.attributes.content,
 			onChange: function( content ) {
@@ -72,7 +72,7 @@ wp.blocks.registerBlockType( /* ... */, {
 	},
 
 	save: function( props ) {
-		return wp.element.createElement( wp.editor.EditableText.Content, {
+		return React.createElement( wp.editor.EditableText.Content, {
 			value: props.attributes.content
 		} );
 	}

package/src/components/font-appearance-control/index.js

@@ -80,7 +80,7 @@ const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {
  *
  * @param {Object} props Component props.
  *
- * @return {WPElement} Font appearance control.
+ * @return {Element} Font appearance control.
  */
 export default function FontAppearanceControl( props ) {
 	const {

package/src/components/font-family/README.md

@@ -9,8 +9,8 @@ Optionally, you can provide a `fontFamilies` prop that overrides the predefined
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { FontFamilyControl } from '@wordpress/block-editor';
-import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 // ...

package/src/components/height-control/README.md

@@ -16,8 +16,8 @@ _Note:_ It is worth noting that the minimum height option is an opt-in feature.
 Renders the markup for height control component, to be used in the block inspector.
 
 ```jsx
+import { useState } from 'react';
 import { HeightControl } from '@wordpress/block-editor';
-import { useState } from '@wordpress/element';
 
 const MyLineHeightControl = () => (
 	const [ value, setValue ] = useState();

package/src/components/height-control/index.js

@@ -38,7 +38,7 @@ const RANGE_CONTROL_CUSTOM_SETTINGS = {
  * @param {( value: string ) => void } props.onChange Called when the height changes.
  * @param {string}                     props.value    The current height value.
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 export default function HeightControl( {
 	label = __( 'Height' ),

package/src/components/image-size-control/README.md

@@ -7,8 +7,8 @@ Allow users to control the width & height of an image.
 Render a ImageSizeControl.
 
 ```jsx
+import { useState } from 'react';
 import { __experimentalImageSizeControl as ImageSizeControl } from '@wordpress/block-editor';
-import { useState } from '@wordpress/element';
 
 const MyImageSizeControl = () => {
 	const [ size, setSize ] = useState( { width: null, height: null } );
@@ -36,7 +36,7 @@ The component accepts the following props:
 
 If this property is added, a help text will be generated for the image size control, using imageSizeHelp property as the content.
 
--   Type: `String|WPElement`
+-   Type: `String|Element`
 -   Required: No
 
 ### slug

package/src/components/index.js

@@ -128,7 +128,7 @@ export { default as BlockToolbar } from './block-toolbar';
 export { default as BlockTools } from './block-tools';
 export {
 	default as CopyHandler,
-	useClipboardHandler as __unstableUseClipboardHandler,
+	__unstableUseClipboardHandler,
 } from './copy-handler';
 export { default as DefaultBlockAppender } from './default-block-appender';
 export { default as __unstableEditorStyles } from './editor-styles';

package/src/components/inner-blocks/constants.native.js

@@ -0,0 +1,5 @@
+// Hermes has a limit for the call stack depth to avoid infinite recursion.
+// When creating a deep nested structure of inner blocks, the editor might exceed
+// this limit and crash. In order to avoid this, we set a maximum depth level where
+// we stop rendering blocks.
+export const MAX_NESTING_DEPTH = 10;

package/src/components/inner-blocks/index.native.js

@@ -3,6 +3,7 @@
  */
 import { __unstableGetInnerBlocksProps as getInnerBlocksProps } from '@wordpress/blocks';
 import { useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -21,6 +22,9 @@ import { useBlockEditContext } from '../block-edit/context';
 import useBlockSync from '../provider/use-block-sync';
 import { BlockContextProvider } from '../block-context';
 import { defaultLayout, LayoutProvider } from '../block-list/layout';
+import { store as blockEditorStore } from '../../store';
+import WarningMaxDepthExceeded from './warning-max-depth-exceeded';
+import { MAX_NESTING_DEPTH } from './constants';
 
 /**
  * This hook is used to lightly mark an element as an inner blocks wrapper
@@ -122,6 +126,17 @@ function UncontrolledInnerBlocks( props ) {
 		templateInsertUpdatesSelection
 	);
 
+	const nestingLevel = useSelect(
+		( select ) => {
+			return select( blockEditorStore ).getBlockParents( clientId )
+				?.length;
+		},
+		[ clientId ]
+	);
+	if ( nestingLevel >= MAX_NESTING_DEPTH ) {
+		return <WarningMaxDepthExceeded clientId={ clientId } />;
+	}
+
 	return (
 		<LayoutProvider value={ layout }>
 			<BlockContextProvider value={ context }>

package/src/components/inner-blocks/warning-max-depth-exceeded.native.js

@@ -0,0 +1,100 @@
+/**
+ * External dependencies
+ */
+import { TouchableWithoutFeedback, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import Warning from '../warning';
+import UnsupportedBlockDetails from '../unsupported-block-details';
+import { store as blockEditorStore } from '../../store';
+import { MAX_NESTING_DEPTH } from './constants';
+import useUnsupportedBlockEditor from '../use-unsupported-block-editor';
+
+const WarningMaxDepthExceeded = ( { clientId } ) => {
+	const [ showDetails, setShowDetails ] = useState( false );
+
+	const { isSelected, innerBlocks } = useSelect(
+		( select ) => {
+			const { getBlock, isBlockSelected } = select( blockEditorStore );
+			return {
+				innerBlocks: getBlock( clientId )?.innerBlocks || [],
+				isSelected: isBlockSelected( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+
+	const {
+		isUnsupportedBlockEditorSupported,
+		canEnableUnsupportedBlockEditor,
+	} = useUnsupportedBlockEditor( clientId );
+
+	const onUngroup = () => {
+		if ( ! innerBlocks.length ) {
+			return;
+		}
+
+		replaceBlocks( clientId, innerBlocks );
+	};
+
+	let description;
+	// When UBE can't be used, the description mentions using the web browser to edit the block.
+	if (
+		! isUnsupportedBlockEditorSupported &&
+		! canEnableUnsupportedBlockEditor
+	) {
+		/* translators: Warning related to having blocks deeply nested. %d: The deepest nesting level. */
+		const descriptionFormat = __(
+			'Blocks nested deeper than %d levels may not render properly in the mobile editor. For this reason, we recommend flattening the content by ungrouping the block or editing the block using your web browser.'
+		);
+		description = sprintf( descriptionFormat, MAX_NESTING_DEPTH );
+	}
+	// Otherwise, the description mentions using the web editor (i.e. UBE).
+	else {
+		/* translators: Warning related to having blocks deeply nested. %d: The deepest nesting level. */
+		const descriptionFormat = __(
+			'Blocks nested deeper than %d levels may not render properly in the mobile editor. For this reason, we recommend flattening the content by ungrouping the block or editing the block using the web editor.'
+		);
+		description = sprintf( descriptionFormat, MAX_NESTING_DEPTH );
+	}
+
+	return (
+		<TouchableWithoutFeedback
+			disabled={ ! isSelected }
+			accessibilityLabel={ __( 'Warning message' ) }
+			accessibilityRole={ 'button' }
+			accessibilityHint={ __( 'Tap here to show more details.' ) }
+			onPress={ () => setShowDetails( true ) }
+		>
+			<View>
+				<Warning
+					message={ __(
+						'Block cannot be rendered because it is deeply nested. Tap here for more details.'
+					) }
+				/>
+				<UnsupportedBlockDetails
+					clientId={ clientId }
+					showSheet={ showDetails }
+					onCloseSheet={ () => setShowDetails( false ) }
+					title={ __( 'Deeply nested block' ) }
+					description={ description }
+					customActions={ [
+						{ label: __( 'Ungroup block' ), onPress: onUngroup },
+					] }
+				/>
+			</View>
+		</TouchableWithoutFeedback>
+	);
+};
+
+export default WarningMaxDepthExceeded;