@wordpress/block-editor 8.3.0 → 8.5.0

package/src/components/block-list/use-block-props/index.js

@@ -31,9 +31,7 @@ import { useBlockMovingModeClassNames } from './use-block-moving-mode-class-name
 import { useFocusHandler } from './use-focus-handler';
 import { useEventHandlers } from './use-selected-block-event-handlers';
 import { useNavModeExit } from './use-nav-mode-exit';
-import { useScrollIntoView } from './use-scroll-into-view';
 import { useBlockRefProvider } from './use-block-refs';
-import { useMultiSelection } from './use-multi-selection';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { store as blockEditorStore } from '../../../store';
 
@@ -115,11 +113,8 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	const mergedRefs = useMergeRefs( [
 		props.ref,
 		useFocusFirstElement( clientId ),
-		// Must happen after focus because we check for focus in the block.
-		useScrollIntoView( clientId ),
 		useBlockRefProvider( clientId ),
 		useFocusHandler( clientId ),
-		useMultiSelection( clientId ),
 		useEventHandlers( clientId ),
 		useNavModeExit( clientId ),
 		useIsHovered(),

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;
 			}
 
@@ -63,8 +66,14 @@ function useInitialPosition( clientId ) {
 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;
 		}
@@ -96,10 +105,22 @@ export function useFocusFirstElement( clientId ) {
 			return;
 		}
 
-		setContentEditableWrapper( ref.current, false );
+		// Check to see if element is focussable before a generic caret insert.
+		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 &&
+				isInsideRootBlock( ref.current, focusElement ) &&
+				isFormElement( focusElement )
+			) {
+				focusElement.focus();
+				return;
+			}
+		}
 
 		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/index.js

@@ -0,0 +1,3 @@
+export { default as BlockLockMenuItem } from './menu-item';
+export { default as BlockLockModal } from './modal';
+export { default as BlockLockToolbar } from './toolbar';

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

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useReducer } from '@wordpress/element';
+import { MenuItem } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { lock, unlock } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import BlockLockModal from './modal';
+import { store as blockEditorStore } from '../../store';
+
+export default function BlockLockMenuItem( { clientId } ) {
+	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 ),
+			};
+		},
+		[ clientId ]
+	);
+
+	const [ isModalOpen, toggleModal ] = useReducer(
+		( isActive ) => ! isActive,
+		false
+	);
+
+	if ( ! canLockBlock ) {
+		return null;
+	}
+
+	const label = isLocked ? __( 'Unlock' ) : __( 'Lock' );
+
+	return (
+		<>
+			<MenuItem icon={ isLocked ? unlock : lock } onClick={ toggleModal }>
+				{ label }
+			</MenuItem>
+			{ isModalOpen && (
+				<BlockLockModal clientId={ clientId } onClose={ toggleModal } />
+			) }
+		</>
+	);
+}

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

@@ -0,0 +1,170 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useEffect, useState } from '@wordpress/element';
+import {
+	Button,
+	CheckboxControl,
+	Flex,
+	FlexItem,
+	Icon,
+	Modal,
+} from '@wordpress/components';
+import { lock as lockIcon, unlock as unlockIcon } from '@wordpress/icons';
+import { useInstanceId } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import useBlockDisplayInformation from '../use-block-display-information';
+import { store as blockEditorStore } from '../../store';
+
+export default function BlockLockModal( { clientId, onClose } ) {
+	const [ lock, setLock ] = useState( { move: false, remove: false } );
+	const { canMove, canRemove } = useSelect(
+		( select ) => {
+			const {
+				canMoveBlock,
+				canRemoveBlock,
+				getBlockRootClientId,
+			} = select( blockEditorStore );
+			const rootClientId = getBlockRootClientId( clientId );
+
+			return {
+				canMove: canMoveBlock( clientId, rootClientId ),
+				canRemove: canRemoveBlock( clientId, rootClientId ),
+			};
+		},
+		[ clientId ]
+	);
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const blockInformation = useBlockDisplayInformation( clientId );
+	const instanceId = useInstanceId(
+		BlockLockModal,
+		'block-editor-block-lock-modal__options-title'
+	);
+
+	useEffect( () => {
+		setLock( {
+			move: ! canMove,
+			remove: ! canRemove,
+		} );
+	}, [ canMove, canRemove ] );
+
+	const isAllChecked = Object.values( lock ).every( Boolean );
+	const isIndeterminate =
+		Object.values( lock ).some( Boolean ) && ! isAllChecked;
+
+	return (
+		<Modal
+			title={ sprintf(
+				/* translators: %s: Name of the block. */
+				__( 'Lock %s' ),
+				blockInformation.title
+			) }
+			overlayClassName="block-editor-block-lock-modal"
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ onClose }
+		>
+			<form
+				onSubmit={ ( event ) => {
+					event.preventDefault();
+					updateBlockAttributes( [ clientId ], { lock } );
+					onClose();
+				} }
+			>
+				<p>
+					{ __(
+						'Choose specific attributes to restrict or lock all available options.'
+					) }
+				</p>
+				<div
+					role="group"
+					aria-labelledby={ instanceId }
+					className="block-editor-block-lock-modal__options"
+				>
+					<CheckboxControl
+						className="block-editor-block-lock-modal__options-title"
+						label={
+							<span id={ instanceId }>{ __( 'Lock all' ) }</span>
+						}
+						checked={ isAllChecked }
+						indeterminate={ isIndeterminate }
+						onChange={ ( newValue ) =>
+							setLock( {
+								move: newValue,
+								remove: newValue,
+							} )
+						}
+					/>
+					<ul className="block-editor-block-lock-modal__checklist">
+						<li className="block-editor-block-lock-modal__checklist-item">
+							<CheckboxControl
+								label={
+									<>
+										{ __( 'Disable movement' ) }
+										<Icon
+											icon={
+												lock.move
+													? lockIcon
+													: unlockIcon
+											}
+										/>
+									</>
+								}
+								checked={ lock.move }
+								onChange={ ( move ) =>
+									setLock( ( prevLock ) => ( {
+										...prevLock,
+										move,
+									} ) )
+								}
+							/>
+						</li>
+						<li className="block-editor-block-lock-modal__checklist-item">
+							<CheckboxControl
+								label={
+									<>
+										{ __( 'Prevent removal' ) }
+										<Icon
+											icon={
+												lock.remove
+													? lockIcon
+													: unlockIcon
+											}
+										/>
+									</>
+								}
+								checked={ lock.remove }
+								onChange={ ( remove ) =>
+									setLock( ( prevLock ) => ( {
+										...prevLock,
+										remove,
+									} ) )
+								}
+							/>
+						</li>
+					</ul>
+				</div>
+				<Flex
+					className="block-editor-block-lock-modal__actions"
+					justify="flex-end"
+					expanded={ false }
+				>
+					<FlexItem>
+						<Button variant="tertiary" onClick={ onClose }>
+							{ __( 'Cancel' ) }
+						</Button>
+					</FlexItem>
+					<FlexItem>
+						<Button variant="primary" type="submit">
+							{ __( 'Apply' ) }
+						</Button>
+					</FlexItem>
+				</Flex>
+			</form>
+		</Modal>
+	);
+}

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

@@ -0,0 +1,70 @@
+.block-editor-block-lock-modal {
+	z-index: z-index(".block-editor-block-lock-modal");
+
+	.components-modal__frame {
+		@include break-small() {
+			max-width: $break-mobile;
+		}
+	}
+}
+
+.block-editor-block-lock-modal__checklist {
+	margin: 0;
+}
+
+.block-editor-block-lock-modal__options-title {
+	padding: $grid-unit-15 0;
+
+	.components-checkbox-control__label {
+		font-weight: 600;
+	}
+
+	.components-base-control__field {
+		align-items: center;
+		display: flex;
+		margin: 0;
+	}
+}
+.block-editor-block-lock-modal__checklist-item {
+	margin-bottom: 0;
+	padding: $grid-unit-15 0 $grid-unit-15 $grid-unit-40;
+
+	.components-base-control__field {
+		align-items: center;
+		display: flex;
+		margin: 0;
+	}
+
+	.components-checkbox-control__label {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex-grow: 1;
+
+		svg {
+			margin-right: $grid-unit-15;
+			fill: $gray-900;
+		}
+	}
+
+	&:hover {
+		background-color: $gray-100;
+		border-radius: $radius-block-ui;
+	}
+}
+
+.block-editor-block-lock-modal__actions {
+	margin-top: $grid-unit-30;
+}
+
+.block-editor-block-lock-toolbar {
+	.components-button.has-icon {
+		min-width: $button-size-small + $grid-unit-15 !important;
+		padding-left: 0 !important;
+
+		&:focus::before {
+			left: 0 !important;
+			right: $grid-unit-15 !important;
+		}
+	}
+}

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

@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { useReducer } from '@wordpress/element';
+import { lock } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import BlockLockModal from './modal';
+import useBlockDisplayInformation from '../use-block-display-information';
+import { store as blockEditorStore } from '../../store';
+
+export default function BlockLockToolbar( { clientId } ) {
+	const blockInformation = useBlockDisplayInformation( clientId );
+	const { canMove, canRemove, canLockBlock } = useSelect(
+		( select ) => {
+			const {
+				canMoveBlock,
+				canRemoveBlock,
+				canLockBlockType,
+				getBlockName,
+			} = select( blockEditorStore );
+
+			return {
+				canMove: canMoveBlock( clientId ),
+				canRemove: canRemoveBlock( clientId ),
+				canLockBlock: canLockBlockType( getBlockName( clientId ) ),
+			};
+		},
+		[ clientId ]
+	);
+
+	const [ isModalOpen, toggleModal ] = useReducer(
+		( isActive ) => ! isActive,
+		false
+	);
+
+	if ( ! canLockBlock ) {
+		return null;
+	}
+
+	if ( canMove && canRemove ) {
+		return null;
+	}
+
+	return (
+		<>
+			<ToolbarGroup className="block-editor-block-lock-toolbar">
+				<ToolbarButton
+					icon={ lock }
+					label={ sprintf(
+						/* translators: %s: block name */
+						__( 'Unlock %s' ),
+						blockInformation.title
+					) }
+					onClick={ toggleModal }
+				/>
+			</ToolbarGroup>
+			{ isModalOpen && (
+				<BlockLockModal clientId={ clientId } onClose={ toggleModal } />
+			) }
+		</>
+	);
+}

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,