@wordpress/block-editor 15.22.1 → 16.0.0

package/src/components/use-block-display-information/test/index.js

@@ -14,7 +14,6 @@ import { symbol } from '@wordpress/icons';
  * Internal dependencies
  */
 import useBlockDisplayInformation from '../';
-import { isIsolatedEditorKey } from '../../../store/private-keys';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
 jest.mock( '../../../lock-unlock', () => ( {
@@ -26,6 +25,7 @@ jest.mock( '../../../lock-unlock', () => ( {
 } ) );
 
 const groupIcon = 'group-icon';
+const templatePartIcon = 'template-part-icon';
 
 function TestComponent( { onChange } ) {
 	const blockInformation = useBlockDisplayInformation( 'client-id' );
@@ -56,19 +56,17 @@ function setupUseSelect( {
 		description: 'Gather blocks in a layout container.',
 	},
 	getActiveBlockVariation = () => null,
-	settings = {},
-	isWithinEditedSection = false,
+	isSectionBlock = true,
 } = {} ) {
 	useSelect.mockImplementation( ( mapSelect ) =>
 		mapSelect( () => ( {
 			getBlockName: () => blockName,
 			getBlockAttributes: () => attributes,
-			getSettings: () => settings,
 			__experimentalGetParsedPattern: () => ( {
 				title: 'Hero pattern',
 				description: 'Pattern description.',
 			} ),
-			isWithinEditedContentOnlySection: () => isWithinEditedSection,
+			isSectionBlock: () => isSectionBlock,
 			getBlockType: () => blockType,
 			getActiveBlockVariation,
 		} ) )
@@ -97,7 +95,7 @@ describe( 'useBlockDisplayInformation', () => {
 	} );
 
 	it( 'displays block information for a pattern section that is being edited', () => {
-		setupUseSelect( { isWithinEditedSection: true } );
+		setupUseSelect( { isSectionBlock: false } );
 		const onChange = jest.fn();
 
 		render( <TestComponent onChange={ onChange } /> );
@@ -120,9 +118,7 @@ describe( 'useBlockDisplayInformation', () => {
 					patternName: 'theme/header-wrapper',
 				},
 			},
-			settings: {
-				[ isIsolatedEditorKey ]: true,
-			},
+			isSectionBlock: false,
 		} );
 		const onChange = jest.fn();
 
@@ -137,4 +133,46 @@ describe( 'useBlockDisplayInformation', () => {
 			} )
 		);
 	} );
+
+	it( 'displays block information for a pattern wrapper when content-only editing is disabled', () => {
+		setupUseSelect( {
+			isSectionBlock: false,
+		} );
+		const onChange = jest.fn();
+
+		render( <TestComponent onChange={ onChange } /> );
+
+		expect( onChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				title: 'Group',
+				icon: groupIcon,
+				description: 'Gather blocks in a layout container.',
+				name: 'Hero pattern',
+			} )
+		);
+	} );
+
+	it( 'displays block information for section blocks without pattern metadata', () => {
+		setupUseSelect( {
+			attributes: {},
+			blockName: 'core/template-part',
+			blockType: {
+				name: 'core/template-part',
+				title: 'Template Part',
+				icon: templatePartIcon,
+				description: 'A template part.',
+			},
+		} );
+		const onChange = jest.fn();
+
+		render( <TestComponent onChange={ onChange } /> );
+
+		expect( onChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				title: 'Template Part',
+				icon: templatePartIcon,
+				description: 'A template part.',
+			} )
+		);
+	} );
 } );

package/src/components/use-on-block-drop/index.js

@@ -5,6 +5,7 @@ import { useCallback } from '@wordpress/element';
 import {
 	cloneBlock,
 	createBlock,
+	cloneSanitizedBlock,
 	findTransform,
 	getBlockTransforms,
 	pasteHandler,
@@ -266,13 +267,9 @@ export default function useOnBlockDrop(
 					blocks.unshift( targetBlock );
 				}
 
-				const groupInnerBlocks = blocks.map( ( block ) => {
-					return createBlock(
-						block.name,
-						block.attributes,
-						block.innerBlocks
-					);
-				} );
+				const groupInnerBlocks = blocks.map( ( block ) =>
+					cloneSanitizedBlock( block )
+				);
 
 				const areAllImages = blocks.every( ( block ) => {
 					return block.name === 'core/image';

package/src/components/use-resize-canvas/index.js

@@ -1,79 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useState } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
- * Function to resize the editor window.
+ * Previously returned inline styles that sized the editor canvas to emulate a
+ * device preview width. Device preview is now handled by the editor's resizable
+ * canvas, so this hook is a no-op kept for backward compatibility.
  *
- * @param {string} deviceType Used for determining the size of the container (e.g. Desktop, Tablet, Mobile)
- *
- * @return {Object} Inline styles to be added to resizable container.
+ * @deprecated
  */
-export default function useResizeCanvas( deviceType ) {
-	const [ actualWidth, updateActualWidth ] = useState( window.innerWidth );
-
-	useEffect( () => {
-		if ( deviceType === 'Desktop' ) {
-			return;
-		}
-
-		const resizeListener = () => updateActualWidth( window.innerWidth );
-		window.addEventListener( 'resize', resizeListener );
-
-		return () => {
-			window.removeEventListener( 'resize', resizeListener );
-		};
-	}, [ deviceType ] );
-
-	const getCanvasWidth = ( device ) => {
-		let deviceWidth;
-
-		/*
-		 * Matches the breakpoints in packages/base-styles/_breakpoints.scss,
-		 * and breakpoints in packages/compose/src/hooks/use-viewport-match/index.js.
-		 * minus 1 to trigger the media query for device preview.
-		 */
-		switch ( device ) {
-			case 'Tablet':
-				deviceWidth = 782 - 1; // preview for useViewportMatch( 'medium', '<' )
-				break;
-			case 'Mobile':
-				deviceWidth = 480 - 1; // preview for useViewportMatch( 'mobile', '<' )
-				break;
-			default:
-				return null;
-		}
-
-		return deviceWidth < actualWidth ? deviceWidth : actualWidth;
-	};
-
-	const contentInlineStyles = ( device ) => {
-		const height = device === 'Mobile' ? '768px' : '1024px';
-		const marginVertical = '40px';
-		const marginHorizontal = 'auto';
-
-		switch ( device ) {
-			case 'Tablet':
-			case 'Mobile':
-				return {
-					width: getCanvasWidth( device ),
-					// Keeping margin styles separate to avoid warnings
-					// when those props get overridden in the iframe component
-					marginTop: marginVertical,
-					marginBottom: marginVertical,
-					marginLeft: marginHorizontal,
-					marginRight: marginHorizontal,
-					height,
-					overflowY: 'auto',
-				};
-			default:
-				return {
-					marginLeft: marginHorizontal,
-					marginRight: marginHorizontal,
-				};
-		}
-	};
-
-	return contentInlineStyles( deviceType );
+export default function useResizeCanvas() {
+	deprecated( 'wp.blockEditor.useResizeCanvas', {
+		since: '7.1',
+		hint: 'Device preview is now handled by the editor canvas. This hook no longer does anything.',
+	} );
 }

package/src/components/writing-flow/index.js

@@ -14,6 +14,8 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import useEditableRoot from './use-editable-root';
+import useHomeEnd from './use-home-end';
 import useMultiSelection from './use-multi-selection';
 import useTabNav from './use-tab-nav';
 import useArrowNav from './use-arrow-nav';
@@ -39,6 +41,8 @@ export function useWritingFlow() {
 			ref,
 			useClipboardHandler(),
 			useInput(),
+			useEditableRoot(),
+			useHomeEnd(),
 			useDragSelection(),
 			useSelectionObserver(),
 			useClickSelection(),
@@ -64,7 +68,17 @@ export function useWritingFlow() {
 
 					return () => {
 						delete node.dataset.hasMultiSelection;
-						node.removeAttribute( 'aria-label' );
+						// The wrapper may remain the editing host (the
+						// collapsed block supports `editableRoot`): keep it
+						// named, as the textbox role requires.
+						if ( node.contentEditable === 'true' ) {
+							node.setAttribute(
+								'aria-label',
+								__( 'Editor canvas' )
+							);
+						} else {
+							node.removeAttribute( 'aria-label' );
+						}
 					};
 				},
 				[ hasMultiSelection ]

package/src/components/writing-flow/use-arrow-nav.js

@@ -18,8 +18,9 @@ import { useRefEffect } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { getBlockClientId } from '../../utils/dom';
+import { getBlockClientId, getSelectionEditableElement } from '../../utils/dom';
 import { store as blockEditorStore } from '../../store';
+import { setContentEditableWrapper } from './utils';
 
 /**
  * Returns true if the element should consider edge navigation upon a keyboard
@@ -141,8 +142,16 @@ export function getClosestTabbable(
 			return false;
 		}
 
-		// Skip focusable elements such as links within content editable nodes.
-		if ( node.isContentEditable && node.contentEditable !== 'true' ) {
+		// Skip focusable elements such as links within content editable
+		// nodes: nodes whose closest editable host is an editable element
+		// within a block. When an editable root (e.g. the canvas wrapper)
+		// is the editing host, everything within it is content editable,
+		// but focusables like block wrappers are not text content.
+		if (
+			node.isContentEditable &&
+			node.contentEditable !== 'true' &&
+			getBlockClientId( node.closest( '[contenteditable="true"]' ) )
+		) {
 			return false;
 		}
 
@@ -198,8 +207,17 @@ export default function useArrowNav() {
 				return;
 			}
 
-			const { keyCode, target, shiftKey, ctrlKey, altKey, metaKey } =
-				event;
+			const { keyCode, shiftKey, ctrlKey, altKey, metaKey } = event;
+			// When the wrapper is contentEditable and holds focus (the
+			// selected block supports `editableRoot`), the event targets the
+			// wrapper; resolve the editable element containing the selection.
+			const target =
+				( event.target === node &&
+					getSelectionEditableElement(
+						node.ownerDocument.defaultView.getSelection(),
+						node
+					) ) ||
+				event.target;
 			const isUp = keyCode === UP;
 			const isDown = keyCode === DOWN;
 			const isLeft = keyCode === LEFT;
@@ -271,13 +289,22 @@ export default function useArrowNav() {
 			const { keepCaretInsideBlock } = getSettings();
 
 			if ( shiftKey ) {
-				if (
-					isClosestTabbableABlock( target, isReverse ) &&
-					isNavEdge( target, isReverse )
-				) {
-					node.contentEditable = true;
-					// Firefox doesn't automatically move focus.
-					node.focus();
+				if ( isNavEdge( target, isReverse ) ) {
+					if ( isClosestTabbableABlock( target, isReverse ) ) {
+						setContentEditableWrapper( node, true );
+					} else if ( node.contentEditable === 'true' ) {
+						// There is no block to extend the selection into.
+						// Within an editable wrapper the selection could
+						// natively escape into surrounding editable elements
+						// (e.g. the post title), so keep it inside the block
+						// by extending it to the block's edge.
+						const selection = defaultView.getSelection();
+						selection.extend(
+							target,
+							isReverse ? 0 : target.childNodes.length
+						);
+						event.preventDefault();
+					}
 				}
 			} else if (
 				isVertical &&

package/src/components/writing-flow/use-click-selection.js

@@ -8,6 +8,7 @@ import { useRefEffect } from '@wordpress/compose';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { setContentEditableWrapper } from './utils';
 import { getBlockClientId } from '../../utils/dom';
 
 export default function useClickSelection() {
@@ -30,9 +31,7 @@ export default function useClickSelection() {
 					// When selecting a single block in a document by holding the shift key,
 					// don't mark this action as multiselection.
 					if ( startClientId && startClientId !== clickedClientId ) {
-						node.contentEditable = true;
-						// Firefox doesn't automatically move focus.
-						node.focus();
+						setContentEditableWrapper( node, true );
 					}
 				} else if ( hasMultiSelection() ) {
 					// Allow user to escape out of a multi-selection to a

package/src/components/writing-flow/use-clipboard-handler.js

@@ -20,7 +20,7 @@ import { useRefEffect } from '@wordpress/compose';
  */
 import { store as blockEditorStore } from '../../store';
 import { useNotifyCopy } from '../../utils/use-notify-copy';
-import { setClipboardBlocks } from './utils';
+import { setClipboardBlocks, setContentEditableWrapper } from './utils';
 import { getPasteEventData } from '../../utils/pasting';
 
 export default function useClipboardHandler() {
@@ -130,7 +130,10 @@ export default function useClipboardHandler() {
 				if ( shouldHandleWholeBlocks && ! expandSelectionIsNeeded ) {
 					removeBlocks( selectedBlockClientIds );
 				} else {
-					event.target.ownerDocument.activeElement.contentEditable = false;
+					setContentEditableWrapper(
+						event.target.ownerDocument.activeElement,
+						false
+					);
 					__unstableDeleteSelection();
 				}
 			} else if ( event.type === 'paste' ) {

package/src/components/writing-flow/use-drag-selection.js

@@ -8,20 +8,7 @@ import { useRefEffect } from '@wordpress/compose';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-
-/**
- * Sets the `contenteditable` wrapper element to `value`.
- *
- * @param {HTMLElement} node  Block element.
- * @param {boolean}     value `contentEditable` value (true or false)
- */
-function setContentEditableWrapper( node, value ) {
-	node.contentEditable = value;
-	// Firefox doesn't automatically move focus.
-	if ( value ) {
-		node.focus();
-	}
-}
+import { setContentEditableWrapper } from './utils';
 
 /**
  * Sets a multi-selection based on the native selection across blocks.

package/src/components/writing-flow/use-editable-root.js

@@ -0,0 +1,182 @@
+/**
+ * WordPress dependencies
+ */
+import { useRegistry, useSelect } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+import { hasBlockSupport } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { setContentEditableWrapper } from './utils';
+import { getBlockClientId, getSelectionEditableElement } from '../../utils/dom';
+import { unlock } from '../../lock-unlock';
+
+/**
+ * Returns true when the writing flow wrapper can host editing for the given
+ * block: it supports `editableRoot`, is edited visually in the default
+ * editing mode, and has sibling blocks for a native selection to extend
+ * into, all of them editable.
+ *
+ * @param {Object} select   Bound block editor store selectors.
+ * @param {string} clientId Block client ID.
+ *
+ * @return {boolean} Whether an editing host can host the block.
+ */
+export function canHostEditableRoot( select, clientId ) {
+	const {
+		getBlockName,
+		getBlockEditingMode,
+		getBlockMode,
+		getBlockRootClientId,
+		getBlockOrder,
+	} = select;
+
+	if (
+		! clientId ||
+		getBlockEditingMode( clientId ) !== 'default' ||
+		// Not when the block is edited as HTML: there is no rich text to
+		// host then, only a textarea, which the editing host would
+		// interfere with.
+		getBlockMode( clientId ) !== 'visual' ||
+		! hasBlockSupport( getBlockName( clientId ), 'editableRoot', false )
+	) {
+		return false;
+	}
+
+	// Only host when the block has sibling blocks for a native selection to
+	// extend into, all of them editable. A lone block (e.g. a single
+	// paragraph nested in an HTML block) is edited on its own element, and
+	// read-only siblings (e.g. pattern content without overrides enabled)
+	// must not become editable by inheriting from the host.
+	const siblings = getBlockOrder( getBlockRootClientId( clientId ) );
+	return (
+		siblings.length > 1 &&
+		siblings.every(
+			( siblingClientId ) =>
+				getBlockEditingMode( siblingClientId ) === 'default'
+		)
+	);
+}
+
+/**
+ * Returns true when the writing flow wrapper should be contentEditable: the
+ * selected block supports `editableRoot`.
+ *
+ * @return {boolean} Whether the wrapper should be editable.
+ */
+export function useHasEditableRoot() {
+	return useSelect( ( select ) => {
+		const selectors = select( blockEditorStore );
+		return canHostEditableRoot(
+			selectors,
+			selectors.getSelectedBlockClientId()
+		);
+	}, [] );
+}
+
+/**
+ * Keeps the writing flow wrapper contentEditable while the selected block
+ * supports `editableRoot`, so the native selection can extend across blocks.
+ * While the wrapper is editable it must also hold focus: a nested editable
+ * element cannot retain focus once an ancestor becomes an editing host (the
+ * first DOM mutation moves focus to the host, inconsistently across
+ * browsers).
+ */
+/**
+ * Keeps the writing flow wrapper contentEditable while the selected block
+ * supports `editableRoot`, so the native selection can extend across blocks.
+ * While the wrapper is editable it must also hold focus: a nested editable
+ * element cannot retain focus once an ancestor becomes an editing host (the
+ * first DOM mutation moves focus to the host, inconsistently across
+ * browsers).
+ */
+export default function useEditableRoot() {
+	const registry = useRegistry();
+	const isZoomOut = useSelect(
+		( select ) => unlock( select( blockEditorStore ) ).isZoomOut(),
+		[]
+	);
+	const enabled = useHasEditableRoot() && ! isZoomOut;
+
+	return useRefEffect(
+		( node ) => {
+			if ( ! enabled ) {
+				return;
+			}
+
+			const {
+				getSelectedBlockClientId,
+				hasMultiSelection,
+				isMultiSelecting,
+			} = registry.select( blockEditorStore );
+
+			// Focus is moved separately below, only when an editable
+			// element belonging to the selected block holds it.
+			if ( ! setContentEditableWrapper( node, true, { focus: false } ) ) {
+				return;
+			}
+
+			// Move focus from the block's editable element to the wrapper,
+			// but only when an editable element belonging to the selected
+			// block has focus. Never steal focus from other regions (e.g.
+			// List View), UI elements (e.g. buttons), or other editables
+			// within the wrapper (e.g. the post title). The selection is
+			// preserved. If the selection is still outside the focused
+			// element, a mousedown just focused it and the browser has not
+			// placed the caret yet; moving focus now would cancel the
+			// pending caret placement. The selection observer moves focus
+			// once the selection lands.
+			const { activeElement } = node.ownerDocument;
+			const selection = node.ownerDocument.defaultView.getSelection();
+			if (
+				activeElement !== node &&
+				activeElement?.isContentEditable &&
+				node.contains( activeElement ) &&
+				getBlockClientId( activeElement ) ===
+					getSelectedBlockClientId() &&
+				selection.anchorNode &&
+				activeElement.contains( selection.anchorNode )
+			) {
+				node.focus();
+			}
+
+			return () => {
+				// A multi-selection owns the wrapper as its editing host
+				// now: the host and its textbox semantics remain, and the
+				// selection observer disables both together when the
+				// selection collapses. Removing the attributes here would
+				// strip the accessible name off the focused editing host at
+				// the moment cross-block editing begins.
+				if ( hasMultiSelection() || isMultiSelecting() ) {
+					return;
+				}
+
+				setContentEditableWrapper( node, false );
+
+				// If the wrapper held focus, return focus to the editable
+				// element containing the selection, which is focusable
+				// again now that the wrapper is no longer an editing host.
+				// Only do so if that element belongs to the selected block:
+				// when the selection moved to another block through the
+				// store, the stale DOM selection must not reclaim block
+				// selection through its focus handler.
+				if ( node.ownerDocument.activeElement === node ) {
+					const editable = getSelectionEditableElement(
+						node.ownerDocument.defaultView.getSelection(),
+						node
+					);
+					if (
+						editable &&
+						getBlockClientId( editable ) ===
+							getSelectedBlockClientId()
+					) {
+						editable.focus();
+					}
+				}
+			};
+		},
+		[ enabled, registry ]
+	);
+}

package/src/components/writing-flow/use-home-end.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { HOME, END } from '@wordpress/keycodes';
+import { useSelect } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { getSelectionEditableElement } from '../../utils/dom';
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * While the wrapper is the contentEditable editing host (a selected block
+ * supports `editableRoot`), browsers don't perform the default caret
+ * movement for Home and End. Perform the equivalent movement with
+ * `Selection.modify()`.
+ */
+export default function useHomeEnd() {
+	const { hasMultiSelection } = useSelect( blockEditorStore );
+	return useRefEffect( ( node ) => {
+		function onKeyDown( event ) {
+			if ( event.defaultPrevented ) {
+				return;
+			}
+
+			if ( event.keyCode !== HOME && event.keyCode !== END ) {
+				return;
+			}
+
+			if ( event.metaKey || event.ctrlKey || event.altKey ) {
+				return;
+			}
+
+			if (
+				node.contentEditable !== 'true' ||
+				node.ownerDocument.activeElement !== node ||
+				hasMultiSelection()
+			) {
+				return;
+			}
+
+			const selection = node.ownerDocument.defaultView.getSelection();
+
+			if ( ! getSelectionEditableElement( selection, node ) ) {
+				return;
+			}
+
+			event.preventDefault();
+			selection.modify(
+				event.shiftKey ? 'extend' : 'move',
+				event.keyCode === HOME ? 'backward' : 'forward',
+				'lineboundary'
+			);
+		}
+
+		node.addEventListener( 'keydown', onKeyDown );
+		return () => {
+			node.removeEventListener( 'keydown', onKeyDown );
+		};
+	}, [] );
+}