@wordpress/block-editor 16.1.0 → 16.2.0

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
 import {
 	store as blocksStore,
@@ -10,10 +7,6 @@ import {
 } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 import { symbol } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
@@ -38,7 +31,7 @@ import { unlock } from '../../lock-unlock';
  * @param {Object} attributes Block attributes.
  * @return {string} The position type label.
  */
-function getPositionTypeLabel( attributes ) {
+export function getPositionTypeLabel( attributes ) {
 	const positionType = attributes?.style?.position?.type;
 
 	if ( positionType === 'sticky' ) {

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

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import { render } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { symbol } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import useBlockDisplayInformation from '../';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { useCallback, useState } from '@wordpress/element';
 import {
@@ -13,10 +10,6 @@ import {
 	isUnmodifiedDefaultBlock as getIsUnmodifiedDefaultBlock,
 	store as blocksStore,
 } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import useOnBlockDrop from '../use-on-block-drop';
 import {
 	getDistanceToNearestEdge,

package/src/components/use-block-drop-zone/test/index.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { getDropTargetPosition } from '..';
 
 const elementData = [

package/src/components/use-flash-editable-blocks/index.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 

package/src/components/use-list-view-panel-state/index.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { useSelect, useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 

package/src/components/use-moving-animation/index.js

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import { Controller } from '@react-spring/web';
-
-/**
- * WordPress dependencies
- */
 import { useLayoutEffect, useMemo, useRef } from '@wordpress/element';
 import { getScrollContainer } from '@wordpress/dom';
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 
 /**
@@ -121,8 +110,11 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) {
 			return;
 		}
 
-		// Make sure the other blocks move under the selected block(s).
-		const zIndex = isPartOfSelection ? '1' : '';
+		// Make sure the other blocks move under the selected block(s). This has to
+		// clear the in-block UI of the blocks being moved past (z-index 1 and 2),
+		// which a plain `1` ties with and loses to on DOM order. Matches
+		// `.block-editor-block-list__block.is-selected`.
+		const zIndex = isPartOfSelection ? '20' : '';
 
 		const controller = new Controller( {
 			x: 0,
@@ -140,7 +132,10 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) {
 				ref.current.style.transform = finishedMoving
 					? null // Set to `null` to explicitly remove the transform.
 					: `translate3d(${ x }px,${ y }px,0)`;
-				ref.current.style.zIndex = zIndex;
+				// Only needed while moving. Left behind, it makes the block a
+				// stacking context and clamps overflowing UI inside it, e.g. a
+				// Navigation submenu flyout renders behind its siblings.
+				ref.current.style.zIndex = finishedMoving ? null : zIndex;
 				preserveScrollPosition();
 			},
 		} );

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useCallback } from '@wordpress/element';
 import {
 	cloneBlock,
@@ -13,10 +10,6 @@ import {
 } from '@wordpress/blocks';
 import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { getFilesFromDataTransfer } from '@wordpress/dom';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 
 /** @typedef {React.SyntheticEvent} SyntheticEvent */

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

@@ -1,11 +1,5 @@
-/**
- * Internal dependencies
- */
-import { parseDropEvent, onFilesDrop, onHTMLDrop, onBlockDrop } from '..';
-/**
- * WordPress dependencies
- */
 import { findTransform, pasteHandler } from '@wordpress/blocks';
+import { parseDropEvent, onFilesDrop, onHTMLDrop, onBlockDrop } from '..';
 
 const noop = () => {};
 

package/src/components/use-paste-styles/index.js

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { useCallback } from '@wordpress/element';
 import { getBlockType, parse } from '@wordpress/blocks';
 import { useDispatch, useRegistry } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import {
 	hasAlignSupport,

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import deprecated from '@wordpress/deprecated';
 
 /**

package/src/components/use-settings/index.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
 import { useBlockEditContext } from '../block-edit';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';

package/src/components/warning/index.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { moreVertical } from '@wordpress/icons';

package/src/components/warning/stories/index.story.jsx

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import Warning from '../';
 
 const meta = {

package/src/components/warning/test/index.js

@@ -1,12 +1,5 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
 import Warning from '../index';
 
 describe( 'Warning', () => {

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

@@ -1,19 +1,8 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { useMergeRefs, useRefEffect } from '@wordpress/compose';
 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';

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

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
 import { isNavigationCandidate } from '../use-arrow-nav';
 
 describe( 'isNavigationCandidate', () => {

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	computeCaretRect,
 	focus,
@@ -14,11 +11,12 @@ import {
 import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { getBlockClientId, getSelectionEditableElement } from '../../utils/dom';
+import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
+import {
+	getBlockClientId,
+	getSelectionEditableElement,
+	isInSameBlock,
+} from '../../utils/dom';
 import { store as blockEditorStore } from '../../store';
 import { setContentEditableWrapper } from './utils';
 
@@ -116,17 +114,26 @@ export function getClosestTabbable(
 	}
 
 	function isTabCandidate( node ) {
-		// If it's a block wrapper (not itself a contenteditable editing surface)
-		// and there are nested focusable nodes, skip because there are better
-		// candidates. We must not skip contenteditable nodes that happen to
-		// contain links or other focusable inline elements, since those are the
-		// correct navigation targets.
-		//
-		// See https://github.com/WordPress/gutenberg/pull/77474
-		// TODO: Consider fixing focus.tabbable
+		// Skip if there's only one child that is content editable (and thus a
+		// better candidate).
+		if (
+			node.children.length === 1 &&
+			isInSameBlock( node, node.firstElementChild ) &&
+			node.firstElementChild.getAttribute( 'contenteditable' ) === 'true'
+		) {
+			return;
+		}
+
+		// Wrappers that merge with the text flow dissolve into it: their
+		// content is the better candidate. Any other container is a
+		// boundary the caret stops on.
+		const blockType = getBlockType( node.getAttribute( 'data-type' ) );
 		if (
 			node.contentEditable !== 'true' &&
 			getBlockClientId( node ) &&
+			blockType &&
+			( blockType.merge ||
+				hasBlockSupport( blockType, '__experimentalOnMerge' ) ) &&
 			focus.focusable
 				.find( node )
 				// Exclude form elements for now because primary+a cannot be

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

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { setContentEditableWrapper } from './utils';
 import { getBlockClientId } from '../../utils/dom';

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	pasteHandler,
 	findTransform,
@@ -11,17 +8,39 @@ import {
 import {
 	documentHasSelection,
 	documentHasUncollapsedSelection,
+	isEntirelySelected,
 } from '@wordpress/dom';
 import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { useNotifyCopy } from '../../utils/use-notify-copy';
 import { setClipboardBlocks, setContentEditableWrapper } from './utils';
 import { getPasteEventData } from '../../utils/pasting';
+import { getBlockClientId } from '../../utils/dom';
+
+/**
+ * Whether the DOM selection entirely spans the content of the given block,
+ * and the block's editable element is the block element itself, like a
+ * heading or a paragraph, not a field within a larger block, like a caption.
+ *
+ * @param {Document} ownerDocument The block's document.
+ * @param {string}   clientId      The block's client ID.
+ *
+ * @return {boolean} Whether the block is entirely selected.
+ */
+function isBlockEntirelySelected( ownerDocument, clientId ) {
+	const selection = ownerDocument.defaultView.getSelection();
+
+	if ( getBlockClientId( selection.anchorNode ) !== clientId ) {
+		return false;
+	}
+
+	const blockElement = ownerDocument.getElementById( `block-${ clientId }` );
+
+	return (
+		!! blockElement?.isContentEditable && isEntirelySelected( blockElement )
+	);
+}
 
 export default function useClipboardHandler() {
 	const registry = useRegistry();
@@ -61,11 +80,25 @@ export default function useClipboardHandler() {
 				return;
 			}
 
+			// Whether the entire content of a block whose editable element
+			// is the block itself is selected: copying all of a heading's
+			// text should copy the heading block. Fields within a larger
+			// block, like a caption, are not the block element and keep
+			// the native copy.
+			// Whether the entire text of a single selected block is
+			// copied, in which case the block itself is copied.
+			const isWholeSingleBlockCopy =
+				event.type === 'copy' &&
+				! hasMultiSelection() &&
+				isBlockEntirelySelected(
+					event.target.ownerDocument,
+					selectedBlockClientIds[ 0 ]
+				);
+
 			// Let native copy/paste behaviour take over in input fields.
 			// But always handle multiple selected blocks.
 			if ( ! hasMultiSelection() ) {
-				const { target } = event;
-				const { ownerDocument } = target;
+				const { ownerDocument } = event.target;
 				// If copying, only consider actual text selection as selection.
 				// Otherwise, any focus on an input field is considered.
 				const hasSelection =
@@ -75,7 +108,7 @@ export default function useClipboardHandler() {
 						  ! ownerDocument.activeElement.isContentEditable;
 
 				// Let native copy behaviour take over in input fields.
-				if ( hasSelection ) {
+				if ( hasSelection && ! isWholeSingleBlockCopy ) {
 					return;
 				}
 			}
@@ -88,7 +121,9 @@ export default function useClipboardHandler() {
 
 			const isSelectionMergeable = __unstableIsSelectionMergeable();
 			const shouldHandleWholeBlocks =
-				__unstableIsSelectionCollapsed() || __unstableIsFullySelected();
+				__unstableIsSelectionCollapsed() ||
+				__unstableIsFullySelected() ||
+				isWholeSingleBlockCopy;
 			const expandSelectionIsNeeded =
 				! shouldHandleWholeBlocks && ! isSelectionMergeable;
 			if ( event.type === 'copy' || event.type === 'cut' ) {
@@ -199,6 +234,25 @@ export default function useClipboardHandler() {
 					return;
 				}
 
+				// Pasting over an entirely selected block replaces it, the
+				// equivalent of pasting into an empty block.
+				if (
+					! hasMultiSelection() &&
+					isBlockEntirelySelected(
+						event.target.ownerDocument,
+						selectedBlockClientIds[ 0 ]
+					)
+				) {
+					replaceBlocks(
+						selectedBlockClientIds,
+						blocks,
+						blocks.length - 1,
+						-1
+					);
+					event.preventDefault();
+					return;
+				}
+
 				// If a block doesn't support splitting, let rich text paste
 				// inline.
 				if (

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

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { setContentEditableWrapper } from './utils';
 

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

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 import { useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { getBlockClientId, getSelectionEditableElement } from '../../utils/dom';
 import { BlockRefs } from '../provider/block-refs-provider';

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

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { useRegistry, useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { setContentEditableWrapper } from './utils';
 import { getBlockClientId, getSelectionEditableElement } from '../../utils/dom';

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

@@ -1,13 +1,6 @@
-/**
- * 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';
 

package/src/components/writing-flow/use-input.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 import { ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
@@ -11,10 +8,6 @@ import {
 	getBlockTransforms,
 	findTransform,
 } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { setContentEditableWrapper } from './utils';
 import { getSelectionEditableElement } from '../../utils/dom';

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

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { setContentEditableWrapper } from './utils';
 

package/src/components/writing-flow/use-preview-mode-nav.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { TAB, UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 
 /**

package/src/components/writing-flow/use-select-all.js

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { isEntirelySelected } from '@wordpress/dom';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 import { useRefEffect } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import {
 	isInsideRootBlock,

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 import {
@@ -8,10 +5,6 @@ import {
 	privateApis as richTextPrivateApis,
 } from '@wordpress/rich-text';
 import { isSelectionForward } from '@wordpress/dom';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { getBlockClientId } from '../../utils/dom';
 import { setContentEditableWrapper } from './utils';

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

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { focus, isFormElement } from '@wordpress/dom';
 import { TAB } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect, useMergeRefs } from '@wordpress/compose';
 import { useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { isInSameBlock, isInsideRootBlock } from '../../utils/dom';
 import { unlock } from '../../lock-unlock';
@@ -176,7 +169,13 @@ export default function useTabNav() {
 		}
 
 		function onFocusOut( event ) {
-			setLastFocus( { ...getLastFocus(), current: event.target } );
+			// `focusout` also fires when focus moves between elements within the
+			// canvas, but only the element focus left the canvas from is of
+			// interest. `contains` is false for a null `relatedTarget`, which is
+			// what focus moving to another document reports.
+			if ( ! node.contains( event.relatedTarget ) ) {
+				setLastFocus( { current: event.target } );
+			}
 
 			const { ownerDocument } = node;