@wordpress/block-editor 12.10.2 → 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/global-styles/hooks.js

@@ -117,7 +117,7 @@ export function useGlobalSetting( propertyPath, blockName, source = 'all' ) {
 					`settings${ appendedBlockPath }.${ setting }`
 				) ??
 				getValueFromObjectPath( configToUse, `settings.${ setting }` );
-			if ( value ) {
+			if ( value !== undefined ) {
 				result = setImmutably( result, setting.split( '.' ), value );
 			}
 		} );

package/src/components/global-styles/test/use-global-styles-output.js

@@ -14,6 +14,7 @@ import {
 	toCustomProperties,
 	toStyles,
 	getStylesDeclarations,
+	processCSSNesting,
 } from '../use-global-styles-output';
 import { ROOT_BLOCK_SELECTOR } from '../utils';
 
@@ -967,4 +968,42 @@ describe( 'global styles renderer', () => {
 			] );
 		} );
 	} );
+
+	describe( 'processCSSNesting', () => {
+		it( 'should return processed CSS without any nested selectors', () => {
+			expect(
+				processCSSNesting( 'color: red; margin: auto;', '.foo' )
+			).toEqual( '.foo{color: red; margin: auto;}' );
+		} );
+		it( 'should return processed CSS with nested selectors', () => {
+			expect(
+				processCSSNesting(
+					'color: red; margin: auto; &.one{color: blue;} & .two{color: green;}',
+					'.foo'
+				)
+			).toEqual(
+				'.foo{color: red; margin: auto;}.foo.one{color: blue;}.foo .two{color: green;}'
+			);
+		} );
+		it( 'should return processed CSS with pseudo elements', () => {
+			expect(
+				processCSSNesting(
+					'color: red; margin: auto; &::before{color: blue;} & ::before{color: green;}  &.one::before{color: yellow;} & .two::before{color: purple;}',
+					'.foo'
+				)
+			).toEqual(
+				'.foo{color: red; margin: auto;}.foo::before{color: blue;}.foo ::before{color: green;}.foo.one::before{color: yellow;}.foo .two::before{color: purple;}'
+			);
+		} );
+		it( 'should return processed CSS with multiple root selectors', () => {
+			expect(
+				processCSSNesting(
+					'color: red; margin: auto; &.one{color: blue;} & .two{color: green;} &::before{color: yellow;} & ::before{color: purple;}  &.three::before{color: orange;} & .four::before{color: skyblue;}',
+					'.foo, .bar'
+				)
+			).toEqual(
+				'.foo, .bar{color: red; margin: auto;}.foo.one, .bar.one{color: blue;}.foo .two, .bar .two{color: green;}.foo::before, .bar::before{color: yellow;}.foo ::before, .bar ::before{color: purple;}.foo.three::before, .bar.three::before{color: orange;}.foo .four::before, .bar .four::before{color: skyblue;}'
+			);
+		} );
+	} );
 } );

package/src/components/global-styles/use-global-styles-output.js

@@ -15,7 +15,12 @@ import { getCSSRules } from '@wordpress/style-engine';
 /**
  * Internal dependencies
  */
-import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils';
+import {
+	PRESET_METADATA,
+	ROOT_BLOCK_SELECTOR,
+	scopeSelector,
+	appendToSelector,
+} from './utils';
 import { getBlockCSSSelector } from './get-block-css-selector';
 import {
 	getTypographyFontSizeValue,
@@ -1124,18 +1129,33 @@ function updateConfigWithSeparator( config ) {
 	return config;
 }
 
-const processCSSNesting = ( css, blockSelector ) => {
+export function processCSSNesting( css, blockSelector ) {
 	let processedCSS = '';
 
 	// Split CSS nested rules.
 	const parts = css.split( '&' );
 	parts.forEach( ( part ) => {
-		processedCSS += ! part.includes( '{' )
-			? blockSelector + '{' + part + '}' // If the part doesn't contain braces, it applies to the root level.
-			: blockSelector + part; // Prepend the selector, which effectively replaces the "&" character.
+		const isRootCss = ! part.includes( '{' );
+		if ( isRootCss ) {
+			// If the part doesn't contain braces, it applies to the root level.
+			processedCSS += `${ blockSelector }{${ part.trim() }}`;
+		} else {
+			// If the part contains braces, it's a nested CSS rule.
+			const splittedPart = part.replace( '}', '' ).split( '{' );
+			if ( splittedPart.length !== 2 ) {
+				return;
+			}
+
+			const [ nestedSelector, cssValue ] = splittedPart;
+			const combinedSelector = nestedSelector.startsWith( ' ' )
+				? scopeSelector( blockSelector, nestedSelector )
+				: appendToSelector( blockSelector, nestedSelector );
+
+			processedCSS += `${ combinedSelector }{${ cssValue.trim() }}`;
+		}
 	} );
 	return processedCSS;
-};
+}
 
 /**
  * Returns the global styles output using a global styles configuration.

package/src/components/global-styles/utils.js

@@ -393,6 +393,27 @@ export function scopeSelector( scope, selector ) {
 	return selectorsScoped.join( ', ' );
 }
 
+/**
+ * Appends a sub-selector to an existing one.
+ *
+ * Given the compounded `selector` "h1, h2, h3"
+ * and the `toAppend` selector ".some-class" the result will be
+ * "h1.some-class, h2.some-class, h3.some-class".
+ *
+ * @param {string} selector Original selector.
+ * @param {string} toAppend Selector to append.
+ *
+ * @return {string} The new selector.
+ */
+export function appendToSelector( selector, toAppend ) {
+	if ( ! selector.includes( ',' ) ) {
+		return selector + toAppend;
+	}
+	const selectors = selector.split( ',' );
+	const newSelectors = selectors.map( ( sel ) => sel + toAppend );
+	return newSelectors.join( ',' );
+}
+
 /**
  * Compares global style variations according to their styles and settings properties.
  *

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 }>