@wordpress/block-editor 8.4.0 → 8.5.0

package/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -7,7 +7,12 @@ import { first, last } from 'lodash';
  * WordPress dependencies
  */
 import { useEffect, useRef } from '@wordpress/element';
-import { focus, isTextField, placeCaretAtHorizontalEdge } from '@wordpress/dom';
+import {
+	focus,
+	isFormElement,
+	isTextField,
+	placeCaretAtHorizontalEdge,
+} from '@wordpress/dom';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -15,7 +20,6 @@ import { useSelect } from '@wordpress/data';
  */
 import { isInsideRootBlock } from '../../../utils/dom';
 import { store as blockEditorStore } from '../../../store';
-import { setContentEditableWrapper } from './use-multi-selection';
 
 /** @typedef {import('@wordpress/element').RefObject} RefObject */
 
@@ -32,7 +36,6 @@ function useInitialPosition( clientId ) {
 		( select ) => {
 			const {
 				getSelectedBlocksInitialCaretPosition,
-				isMultiSelecting,
 				isNavigationMode,
 				isBlockSelected,
 			} = select( blockEditorStore );
@@ -41,7 +44,7 @@ function useInitialPosition( clientId ) {
 				return;
 			}
 
-			if ( isMultiSelecting() || isNavigationMode() ) {
+			if ( isNavigationMode() ) {
 				return;
 			}
 
@@ -52,16 +55,6 @@ function useInitialPosition( clientId ) {
 	);
 }
 
-function isFormElement( element ) {
-	const { tagName } = element;
-	return (
-		tagName === 'INPUT' ||
-		tagName === 'BUTTON' ||
-		tagName === 'SELECT' ||
-		tagName === 'TEXTAREA'
-	);
-}
-
 /**
  * Transitions focus to the block or inner tabbable when the block becomes
  * selected and an initial position is set.
@@ -73,8 +66,14 @@ function isFormElement( element ) {
 export function useFocusFirstElement( clientId ) {
 	const ref = useRef();
 	const initialPosition = useInitialPosition( clientId );
+	const { isBlockSelected, isMultiSelecting } = useSelect( blockEditorStore );
 
 	useEffect( () => {
+		// Check if the block is still selected at the time this effect runs.
+		if ( ! isBlockSelected( clientId ) || isMultiSelecting() ) {
+			return;
+		}
+
 		if ( initialPosition === undefined || initialPosition === null ) {
 			return;
 		}
@@ -107,27 +106,21 @@ export function useFocusFirstElement( clientId ) {
 		}
 
 		// Check to see if element is focussable before a generic caret insert.
-		if ( ! target.getAttribute( 'contenteditable' ) ) {
-			const focusElement = focus.tabbable.findNext( target );
-			// Make sure focusElement is valid, form field, and within the current target element.
-			// Ensure is not block inserter trigger, don't want to focus that in the event of the group block which doesn't contain any other focussable elements.
+		if ( ! ref.current.getAttribute( 'contenteditable' ) ) {
+			const focusElement = focus.tabbable.findNext( ref.current );
+			// Make sure focusElement is valid, contained in the same block, and a form field.
 			if (
 				focusElement &&
-				isFormElement( focusElement ) &&
-				target.contains( focusElement ) &&
-				! focusElement.classList.contains(
-					'block-editor-button-block-appender'
-				)
+				isInsideRootBlock( ref.current, focusElement ) &&
+				isFormElement( focusElement )
 			) {
 				focusElement.focus();
 				return;
 			}
 		}
 
-		setContentEditableWrapper( ref.current, false );
-
 		placeCaretAtHorizontalEdge( target, isReverse );
-	}, [ initialPosition ] );
+	}, [ initialPosition, clientId ] );
 
 	return ref;
 }

package/src/components/block-list/use-block-props/use-focus-handler.js

@@ -30,6 +30,14 @@ export function useFocusHandler( clientId ) {
 			 * @param {FocusEvent} event Focus event.
 			 */
 			function onFocus( event ) {
+				// When the whole editor is editable, let writing flow handle
+				// selection.
+				if (
+					node.parentElement.closest( '[contenteditable="true"]' )
+				) {
+					return;
+				}
+
 				// Check synchronously because a non-selected block might be
 				// getting data through `useSelect` asynchronously.
 				if ( isBlockSelected( clientId ) ) {

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

@@ -73,6 +73,11 @@ function BlockListAppender( {
 				'block-list-appender wp-block',
 				className
 			) }
+			// Needed in case the whole editor is content editable (for multi
+			// selection). It fixes an edge case where ArrowDown and ArrowRight
+			// should collapse the selection to the end of that selection and
+			// not into the appender.
+			contentEditable={ false }
 			// The appender exists to let you add the first Paragraph before
 			// any is inserted. To that end, this appender should visually be
 			// presented as a block. That means theme CSS should style it as if

package/src/components/block-lock/menu-item.js

@@ -14,16 +14,19 @@ import BlockLockModal from './modal';
 import { store as blockEditorStore } from '../../store';
 
 export default function BlockLockMenuItem( { clientId } ) {
-	const { isLocked } = useSelect(
+	const { canLockBlock, isLocked } = useSelect(
 		( select ) => {
 			const {
 				canMoveBlock,
 				canRemoveBlock,
+				canLockBlockType,
+				getBlockName,
 				getBlockRootClientId,
 			} = select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientId );
 
 			return {
+				canLockBlock: canLockBlockType( getBlockName( clientId ) ),
 				isLocked:
 					! canMoveBlock( clientId, rootClientId ) ||
 					! canRemoveBlock( clientId, rootClientId ),
@@ -37,6 +40,10 @@ export default function BlockLockMenuItem( { clientId } ) {
 		false
 	);
 
+	if ( ! canLockBlock ) {
+		return null;
+	}
+
 	const label = isLocked ? __( 'Unlock' ) : __( 'Lock' );
 
 	return (

package/src/components/block-lock/modal.js

@@ -11,7 +11,7 @@ import {
 	Icon,
 	Modal,
 } from '@wordpress/components';
-import { dragHandle, trash } from '@wordpress/icons';
+import { lock as lockIcon, unlock as unlockIcon } from '@wordpress/icons';
 import { useInstanceId } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 
@@ -54,15 +54,8 @@ export default function BlockLockModal( { clientId, onClose } ) {
 	}, [ canMove, canRemove ] );
 
 	const isAllChecked = Object.values( lock ).every( Boolean );
-
-	let ariaChecked;
-	if ( isAllChecked ) {
-		ariaChecked = 'true';
-	} else if ( Object.values( lock ).some( Boolean ) ) {
-		ariaChecked = 'mixed';
-	} else {
-		ariaChecked = 'false';
-	}
+	const isIndeterminate =
+		Object.values( lock ).some( Boolean ) && ! isAllChecked;
 
 	return (
 		<Modal
@@ -98,7 +91,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 							<span id={ instanceId }>{ __( 'Lock all' ) }</span>
 						}
 						checked={ isAllChecked }
-						aria-checked={ ariaChecked }
+						indeterminate={ isIndeterminate }
 						onChange={ ( newValue ) =>
 							setLock( {
 								move: newValue,
@@ -112,7 +105,13 @@ export default function BlockLockModal( { clientId, onClose } ) {
 								label={
 									<>
 										{ __( 'Disable movement' ) }
-										<Icon icon={ dragHandle } />
+										<Icon
+											icon={
+												lock.move
+													? lockIcon
+													: unlockIcon
+											}
+										/>
 									</>
 								}
 								checked={ lock.move }
@@ -129,7 +128,13 @@ export default function BlockLockModal( { clientId, onClose } ) {
 								label={
 									<>
 										{ __( 'Prevent removal' ) }
-										<Icon icon={ trash } />
+										<Icon
+											icon={
+												lock.remove
+													? lockIcon
+													: unlockIcon
+											}
+										/>
 									</>
 								}
 								checked={ lock.remove }

package/src/components/block-lock/style.scss

@@ -13,7 +13,6 @@
 }
 
 .block-editor-block-lock-modal__options-title {
-	border-bottom: 1px solid $gray-300;
 	padding: $grid-unit-15 0;
 
 	.components-checkbox-control__label {
@@ -27,9 +26,8 @@
 	}
 }
 .block-editor-block-lock-modal__checklist-item {
-	border-bottom: 1px solid $gray-300;
 	margin-bottom: 0;
-	padding: $grid-unit-15 0 $grid-unit-15 $grid-unit-15;
+	padding: $grid-unit-15 0 $grid-unit-15 $grid-unit-40;
 
 	.components-base-control__field {
 		align-items: center;
@@ -48,6 +46,11 @@
 			fill: $gray-900;
 		}
 	}
+
+	&:hover {
+		background-color: $gray-100;
+		border-radius: $radius-block-ui;
+	}
 }
 
 .block-editor-block-lock-modal__actions {

package/src/components/block-lock/toolbar.js

@@ -16,13 +16,19 @@ import { store as blockEditorStore } from '../../store';
 
 export default function BlockLockToolbar( { clientId } ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const { canMove, canRemove } = useSelect(
+	const { canMove, canRemove, canLockBlock } = useSelect(
 		( select ) => {
-			const { canMoveBlock, canRemoveBlock } = select( blockEditorStore );
+			const {
+				canMoveBlock,
+				canRemoveBlock,
+				canLockBlockType,
+				getBlockName,
+			} = select( blockEditorStore );
 
 			return {
 				canMove: canMoveBlock( clientId ),
 				canRemove: canRemoveBlock( clientId ),
+				canLockBlock: canLockBlockType( getBlockName( clientId ) ),
 			};
 		},
 		[ clientId ]
@@ -33,6 +39,10 @@ export default function BlockLockToolbar( { clientId } ) {
 		false
 	);
 
+	if ( ! canLockBlock ) {
+		return null;
+	}
+
 	if ( canMove && canRemove ) {
 		return null;
 	}

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

@@ -95,6 +95,9 @@ function BlockMover( {
 	);
 }
 
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-mover/README.md
+ */
 export default withSelect( ( select, { clientIds } ) => {
 	const {
 		getBlock,

package/src/components/block-mover/style.scss

@@ -22,6 +22,10 @@
 		@include break-small() {
 			flex-direction: column;
 		}
+
+		// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
+		// This is best fixed by making the mover control area a proper single toolbar group.
+		padding: 0;
 	}
 
 	&.is-horizontal .block-editor-block-mover__move-button-container,

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -6,12 +6,17 @@ import { castArray, flow, noop } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { getBlockType, serialize } from '@wordpress/blocks';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { moreVertical } from '@wordpress/icons';
-import { Children, cloneElement, useCallback } from '@wordpress/element';
-import { serialize } from '@wordpress/blocks';
+import {
+	Children,
+	cloneElement,
+	useCallback,
+	useRef,
+} from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { useCopyToClipboard } from '@wordpress/compose';
 
@@ -19,12 +24,14 @@ import { useCopyToClipboard } from '@wordpress/compose';
  * Internal dependencies
  */
 import BlockActions from '../block-actions';
+import BlockIcon from '../block-icon';
 import BlockModeToggle from './block-mode-toggle';
 import BlockHTMLConvertButton from './block-html-convert-button';
 import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
+import { useShowMoversGestures } from '../block-toolbar/utils';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
@@ -47,7 +54,10 @@ export function BlockSettingsDropdown( {
 	const count = blockClientIds.length;
 	const firstBlockClientId = blockClientIds[ 0 ];
 	const {
+		firstParentClientId,
+		hasReducedUI,
 		onlyBlock,
+		parentBlockType,
 		previousBlockClientId,
 		nextBlockClientId,
 		selectedBlockClientIds,
@@ -55,12 +65,23 @@ export function BlockSettingsDropdown( {
 		( select ) => {
 			const {
 				getBlockCount,
+				getBlockName,
+				getBlockParents,
 				getPreviousBlockClientId,
 				getNextBlockClientId,
 				getSelectedBlockClientIds,
+				getSettings,
 			} = select( blockEditorStore );
+
+			const parents = getBlockParents( firstBlockClientId );
+			const _firstParentClientId = parents[ parents.length - 1 ];
+			const parentBlockName = getBlockName( _firstParentClientId );
+
 			return {
+				firstParentClientId: _firstParentClientId,
+				hasReducedUI: getSettings().hasReducedUI,
 				onlyBlock: 1 === getBlockCount(),
+				parentBlockType: getBlockType( parentBlockName ),
 				previousBlockClientId: getPreviousBlockClientId(
 					firstBlockClientId
 				),
@@ -87,6 +108,10 @@ export function BlockSettingsDropdown( {
 		};
 	}, [] );
 
+	const { selectBlock, toggleBlockHighlight } = useDispatch(
+		blockEditorStore
+	);
+
 	const updateSelectionAfterDuplicate = useCallback(
 		__experimentalSelectBlock
 			? async ( clientIdsPromise ) => {
@@ -135,6 +160,19 @@ export function BlockSettingsDropdown( {
 	);
 	const removeBlockLabel = count === 1 ? label : __( 'Remove blocks' );
 
+	// Allows highlighting the parent block outline when focusing or hovering
+	// the parent block selector within the child.
+	const selectParentButtonRef = useRef();
+	const { gestures: showParentOutlineGestures } = useShowMoversGestures( {
+		ref: selectParentButtonRef,
+		onChange( isFocused ) {
+			if ( isFocused && hasReducedUI ) {
+				return;
+			}
+			toggleBlockHighlight( firstParentClientId, isFocused );
+		},
+	} );
+
 	return (
 		<BlockActions
 			clientIds={ clientIds }
@@ -167,6 +205,26 @@ export function BlockSettingsDropdown( {
 								<__unstableBlockSettingsMenuFirstItem.Slot
 									fillProps={ { onClose } }
 								/>
+								{ firstParentClientId !== undefined && (
+									<MenuItem
+										{ ...showParentOutlineGestures }
+										ref={ selectParentButtonRef }
+										icon={
+											<BlockIcon
+												icon={ parentBlockType.icon }
+											/>
+										}
+										onClick={ () =>
+											selectBlock( firstParentClientId )
+										}
+									>
+										{ sprintf(
+											/* translators: %s: Name of the block's parent. */
+											__( 'Select parent block (%s)' ),
+											parentBlockType.title
+										) }
+									</MenuItem>
+								) }
 								{ count === 1 && (
 									<BlockHTMLConvertButton
 										clientId={ firstBlockClientId }

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

@@ -20,7 +20,7 @@ import {
 	isTemplatePart,
 } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { stack } from '@wordpress/icons';
+import { copy } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -69,7 +69,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 				// appropriate icon to communicate the non-uniformity.
 				_icon = isSelectionOfSameType
 					? getBlockType( firstBlockName )?.icon
-					: stack;
+					: copy;
 			}
 			return {
 				possibleBlockTransformations: getBlockTransformItems(

package/src/components/block-switcher/style.scss

@@ -1,5 +1,13 @@
 .block-editor-block-switcher {
 	position: relative;
+	padding: 0 ($grid-unit-15 * 0.5);
+
+	// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
+	// This is best fixed by making the mover control area a proper single toolbar group.
+	// It needs specificity due to style inherited from .components-accessible-toolbar .components-button.has-icon.has-icon.
+	.components-button.components-dropdown-menu__toggle.has-icon.has-icon {
+		min-width: $button-size;
+	}
 }
 
 // Show an indicator triangle.
@@ -8,7 +16,6 @@
 	position: relative;
 }
 
-
 .components-button.block-editor-block-switcher__toggle,
 .components-button.block-editor-block-switcher__no-switcher-icon {
 	margin: 0;

package/src/components/block-switcher/test/index.js

@@ -10,7 +10,7 @@ import { useSelect } from '@wordpress/data';
 import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
 import { DOWN } from '@wordpress/keycodes';
 import { Button } from '@wordpress/components';
-import { stack } from '@wordpress/icons';
+import { copy } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -131,7 +131,7 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 	test( 'should render disabled block switcher with multi block of different types when no transforms', () => {
 		useSelect.mockImplementation( () => ( {
 			possibleBlockTransformations: [],
-			icon: stack,
+			icon: copy,
 		} ) );
 		const wrapper = shallow(
 			<BlockSwitcherDropdownMenu

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

@@ -14,8 +14,8 @@ import useBlockDisplayTitle from './use-block-display-title';
  * <BlockTitle clientId="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1" maximumLength={ 17 }/>
  * ```
  *
- * @param {Object} props
- * @param {string} props.clientId Client ID of block.
+ * @param {Object}           props
+ * @param {string}           props.clientId      Client ID of block.
  * @param {number|undefined} props.maximumLength The maximum length that the block title string may be before truncated.
  *
  * @return {JSX.Element} Block title.

package/src/components/block-title/use-block-display-title.js

@@ -29,7 +29,7 @@ import { store as blockEditorStore } from '../../store';
  * useBlockDisplayTitle( 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1', 17 );
  * ```
  *
- * @param {string} clientId Client ID of block.
+ * @param {string}           clientId      Client ID of block.
  * @param {number|undefined} maximumLength The maximum length that the block title string may be before truncated.
  * @return {?string} Block title.
  */

package/src/components/block-toolbar/block-name-context.js

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+const __unstableBlockNameContext = createContext( '' );
+
+export default __unstableBlockNameContext;

package/src/components/block-toolbar/block-toolbar-last-item.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill: __unstableBlockToolbarLastItem, Slot } = createSlotFill(
+	'__unstableBlockToolbarLastItem'
+);
+
+__unstableBlockToolbarLastItem.Slot = Slot;
+
+export default __unstableBlockToolbarLastItem;

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

@@ -19,12 +19,15 @@ import BlockMover from '../block-mover';
 import BlockParentSelector from '../block-parent-selector';
 import BlockSwitcher from '../block-switcher';
 import BlockControls from '../block-controls';
+import __unstableBlockToolbarLastItem from './block-toolbar-last-item';
 import BlockSettingsMenu from '../block-settings-menu';
 import { BlockLockToolbar } from '../block-lock';
+import { BlockGroupToolbar } from '../convert-to-group-buttons';
 import { useShowMoversGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
+import __unstableBlockNameContext from './block-name-context';
 
-export default function BlockToolbar( { hideDragHandle } ) {
+const BlockToolbar = ( { hideDragHandle } ) => {
 	const {
 		blockClientIds,
 		blockClientId,
@@ -127,6 +130,9 @@ export default function BlockToolbar( { hideDragHandle } ) {
 					</ToolbarGroup>
 				) }
 			</div>
+			{ shouldShowVisualToolbar && isMultiToolbar && (
+				<BlockGroupToolbar />
+			) }
 			{ shouldShowVisualToolbar && (
 				<>
 					<BlockControls.Slot
@@ -146,9 +152,19 @@ export default function BlockToolbar( { hideDragHandle } ) {
 						group="other"
 						className="block-editor-block-toolbar__slot"
 					/>
+					<__unstableBlockNameContext.Provider
+						value={ blockType?.name }
+					>
+						<__unstableBlockToolbarLastItem.Slot />
+					</__unstableBlockNameContext.Provider>
 				</>
 			) }
 			<BlockSettingsMenu clientIds={ blockClientIds } />
 		</div>
 	);
-}
+};
+
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-toolbar/README.md
+ */
+export default BlockToolbar;

package/src/components/block-toolbar/style.scss

@@ -95,6 +95,12 @@
 	.block-editor-block-lock-toolbar {
 		margin-left: -$grid-unit-15 * 0.5 !important;
 	}
+
+	// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
+	// This is best fixed by making the mover control area a proper single toolbar group.
+	.components-toolbar-group {
+		padding: 0;
+	}
 }
 
 .block-editor-block-toolbar,

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

@@ -92,25 +92,6 @@ export default function BlockTools( {
 				event.preventDefault();
 				insertBeforeBlock( first( clientIds ) );
 			}
-		} else if (
-			isMatch( 'core/block-editor/delete-multi-selection', event )
-		) {
-			/**
-			 * Check if the target element is a text area, input or
-			 * event.defaultPrevented and return early. In all these
-			 * cases backspace could be handled elsewhere.
-			 */
-			if (
-				[ 'INPUT', 'TEXTAREA' ].includes( event.target.nodeName ) ||
-				event.defaultPrevented
-			) {
-				return;
-			}
-			const clientIds = getSelectedBlockClientIds();
-			if ( clientIds.length > 1 ) {
-				event.preventDefault();
-				removeBlocks( clientIds );
-			}
 		} else if ( isMatch( 'core/block-editor/unselect', event ) ) {
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length > 1 ) {

package/src/components/block-tools/style.scss

@@ -312,16 +312,14 @@
 // Size multiple sequential buttons to be optically balanced.
 // Icons are 36px, as set by a 24px icon and 12px padding.
 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot, // When a plugin adds to a slot, the segment has a `components-toolbar` class.
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot, // When no plugin adds to slots, the segment has a `components-toolbar-group` class.
 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar, // The nesting order is sometimes reversed.
 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown, // Targets unique markup for the "Replace" button.
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group { // Inline formatting tools use this class.
+.block-editor-block-toolbar .components-toolbar-group {
 	padding-left: $grid-unit-15 * 0.5; // 6px.
 	padding-right: $grid-unit-15 * 0.5;
 
-	> .components-button,
-	> div > .components-button,
-	> .components-dropdown .components-button {
+	.components-button,
+	.components-button.has-icon.has-icon {
 		min-width: $block-toolbar-height - $grid-unit-15;
 		padding-left: $grid-unit-15 * 0.5; // 6px.
 		padding-right: $grid-unit-15 * 0.5;