@wordpress/block-editor 12.17.0 → 12.18.0

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

@@ -13,6 +13,7 @@ import {
 	useBlockEditContext,
 	mayDisplayControlsKey,
 	mayDisplayParentControlsKey,
+	blockEditingModeKey,
 } from './context';
 
 /**
@@ -28,6 +29,7 @@ export { useBlockEditContext };
 export default function BlockEdit( {
 	mayDisplayControls,
 	mayDisplayParentControls,
+	blockEditingMode,
 	// The remaining props are passed through the BlockEdit filters and are thus
 	// public API!
 	...props
@@ -59,6 +61,7 @@ export default function BlockEdit( {
 					// usage outside of the package (this context is exposed).
 					[ mayDisplayControlsKey ]: mayDisplayControls,
 					[ mayDisplayParentControlsKey ]: mayDisplayParentControls,
+					[ blockEditingModeKey ]: blockEditingMode,
 				} ),
 				[
 					name,
@@ -69,6 +72,7 @@ export default function BlockEdit( {
 					__unstableLayoutClassNames,
 					mayDisplayControls,
 					mayDisplayParentControls,
+					blockEditingMode,
 				]
 			) }
 		>

package/src/components/block-editing-mode/index.js

@@ -8,7 +8,10 @@ import { useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { useBlockEditContext } from '../block-edit/context';
+import {
+	useBlockEditContext,
+	blockEditingModeKey,
+} from '../block-edit/context';
 
 /**
  * @typedef {'disabled'|'contentOnly'|'default'} BlockEditingMode
@@ -45,14 +48,16 @@ import { useBlockEditContext } from '../block-edit/context';
  * @return {BlockEditingMode} The current editing mode.
  */
 export function useBlockEditingMode( mode ) {
-	const { clientId = '' } = useBlockEditContext();
-	const blockEditingMode = useSelect(
+	const context = useBlockEditContext();
+	const { clientId = '' } = context;
+	const { setBlockEditingMode, unsetBlockEditingMode } =
+		useDispatch( blockEditorStore );
+	const globalBlockEditingMode = useSelect(
 		( select ) =>
-			select( blockEditorStore ).getBlockEditingMode( clientId ),
+			// Avoid adding the subscription if not needed!
+			clientId ? null : select( blockEditorStore ).getBlockEditingMode(),
 		[ clientId ]
 	);
-	const { setBlockEditingMode, unsetBlockEditingMode } =
-		useDispatch( blockEditorStore );
 	useEffect( () => {
 		if ( mode ) {
 			setBlockEditingMode( clientId, mode );
@@ -63,5 +68,5 @@ export function useBlockEditingMode( mode ) {
 			}
 		};
 	}, [ clientId, mode, setBlockEditingMode, unsetBlockEditingMode ] );
-	return blockEditingMode;
+	return clientId ? context[ blockEditingModeKey ] : globalBlockEditingMode;
 }

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

@@ -93,8 +93,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			topLevelLockedBlock:
 				__unstableGetContentLockingParent( _selectedBlockClientId ) ||
 				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly' ||
-				( _selectedBlockName === 'core/block' &&
-					window.__experimentalPatternPartialSyncing )
+				_selectedBlockName === 'core/block'
 					? _selectedBlockClientId
 					: undefined ),
 		};
@@ -307,6 +306,10 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 						label={ __( 'Background' ) }
 					/>
 					<PositionControls />
+					<InspectorControls.Slot
+						group="effects"
+						label={ __( 'Effects' ) }
+					/>
 					<div>
 						<AdvancedControls />
 					</div>

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

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useCallback, RawHTML, useContext } from '@wordpress/element';
+import { memo, useCallback, RawHTML, useContext } from '@wordpress/element';
 import {
 	getBlockType,
 	getSaveContent,
@@ -21,7 +21,7 @@ import {
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
-import { compose, pure } from '@wordpress/compose';
+import { compose } from '@wordpress/compose';
 import { safeHTML } from '@wordpress/dom';
 
 /**
@@ -133,6 +133,7 @@ function BlockListBlock( {
 			}
 			mayDisplayControls={ mayDisplayControls }
 			mayDisplayParentControls={ mayDisplayParentControls }
+			blockEditingMode={ context.blockEditingMode }
 		/>
 	);
 
@@ -482,7 +483,7 @@ BlockListBlock = compose(
 )( BlockListBlock );
 
 // This component provides all the information we need through a single store
-// subscription (useSelect mapping). Only the necesssary props are passed down
+// subscription (useSelect mapping). Only the necessary props are passed down
 // to the BlockListBlock component, which is a filtered component, so these
 // props are public API. To avoid adding to the public API, we use a private
 // context to pass the rest of the information to the filtered BlockListBlock
@@ -738,4 +739,4 @@ function BlockListBlockProvider( props ) {
 	);
 }
 
-export default pure( BlockListBlockProvider );
+export default memo( BlockListBlockProvider );

package/src/components/block-list/block.native.js

@@ -7,7 +7,13 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useCallback, useMemo, useState, useRef } from '@wordpress/element';
+import {
+	useCallback,
+	useMemo,
+	useState,
+	useRef,
+	memo,
+} from '@wordpress/element';
 import {
 	GlobalStylesContext,
 	getMergedGlobalStyles,
@@ -29,7 +35,7 @@ import {
 	withDispatch,
 	withSelect,
 } from '@wordpress/data';
-import { compose, ifCondition, pure } from '@wordpress/compose';
+import { compose, ifCondition } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -183,6 +189,7 @@ function BlockListBlock( {
 		isParentSelected,
 		order,
 		mayDisplayControls,
+		blockEditingMode,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -196,6 +203,7 @@ function BlockListBlock( {
 				getBlockName,
 				isFirstMultiSelectedBlock,
 				getMultiSelectedBlockClientIds,
+				getBlockEditingMode,
 			} = select( blockEditorStore );
 			const currentBlockType = getBlockType( name || 'core/missing' );
 			const currentBlockCategory = currentBlockType?.category;
@@ -249,6 +257,7 @@ function BlockListBlock( {
 						getMultiSelectedBlockClientIds().every(
 							( id ) => getBlockName( id ) === name
 						) ),
+				blockEditingMode: getBlockEditingMode( clientId ),
 			};
 		},
 		[ clientId, isSelected, name, rootClientId ]
@@ -393,6 +402,7 @@ function BlockListBlock( {
 							}
 							wrapperProps={ wrapperProps }
 							mayDisplayControls={ mayDisplayControls }
+							blockEditingMode={ blockEditingMode }
 						/>
 						<View onLayout={ onLayout } />
 					</GlobalStylesContext.Provider>
@@ -678,7 +688,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 } );
 
 export default compose(
-	pure,
+	memo,
 	applyWithSelect,
 	applyWithDispatch,
 	// Block is sometimes not mounted at the right time, causing it be undefined

package/src/components/block-list/content.scss

@@ -26,7 +26,7 @@
 /* stylelint-disable */
 _::-webkit-full-page-media, _:future, :root .block-editor-block-list__layout::selection,
 _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-block-list__layout::selection {
-	background-color: transparent; 
+	background-color: transparent;
 }
 /* stylelint-enable */
 
@@ -89,7 +89,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	.block-editor-block-list__block.is-highlighted,
 	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
 	&.is-navigate-mode .block-editor-block-list__block.is-selected,
-	.block-editor-block-list__block:not([contenteditable]):focus {
+	.block-editor-block-list__block:not([contenteditable="true"]):focus {
 		outline: none;
 
 		// We're using a pseudo element to overflow placeholder borders
@@ -199,9 +199,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		width: 100%;
 
 		.components-notice {
-			margin-left: 0;
-			margin-right: 0;
-
 			.components-notice__content {
 				font-size: $default-font-size;
 			}
@@ -303,6 +300,38 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	}
 }
 
+// Indicate which blocks are editable within a locked context.
+// 1. User must be hovering an editor with renderingMode = 'template-lock'; or...
+.is-template-locked:hover,
+// ...a container block.
+.block-editor-block-list__block:hover {
+	// 2. Look for locked blocks; or...
+	.block-editor-block-list__block.is-editing-disabled,
+	// ...container blocks that have locked children.
+	&:has(> .block-editor-block-list__block.is-editing-disabled) {
+		// 3. Highlight any unlocked children of that locked block.
+		& > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected) {
+			&::after {
+				content: "";
+				border-style: dotted;
+				position: absolute;
+				pointer-events: none;
+				top: $border-width;
+				left: $border-width;
+				right: $border-width;
+				bottom: $border-width;
+				border: 1px dotted var(--wp-admin-theme-color);
+				border-radius: $radius-block-ui - $border-width;
+			}
+
+			&.is-hovered::after {
+				background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
+				border: none;
+			}
+		}
+	}
+}
+
 // Spotlight mode. Fade out blocks unless they contain a selected block.
 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
 	opacity: 0.2;

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

@@ -17,7 +17,12 @@ import {
 	useMergeRefs,
 	useDebounce,
 } from '@wordpress/compose';
-import { createContext, useMemo, useCallback } from '@wordpress/element';
+import {
+	createContext,
+	useMemo,
+	useCallback,
+	useEffect,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -34,6 +39,7 @@ import {
 	DEFAULT_BLOCK_EDIT_CONTEXT,
 } from '../block-edit/context';
 import { useTypingObserver } from '../observe-typing';
+import { unlock } from '../../lock-unlock';
 
 export const IntersectionObserver = createContext();
 const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
@@ -113,6 +119,27 @@ function Root( { className, ...settings } ) {
 	);
 }
 
+function StopEditingAsBlocksOnOutsideSelect( { clientId } ) {
+	const { stopEditingAsBlocks } = unlock( useDispatch( blockEditorStore ) );
+	const isBlockOrDescendantSelected = useSelect(
+		( select ) => {
+			const { isBlockSelected, hasSelectedInnerBlock } =
+				select( blockEditorStore );
+			return (
+				isBlockSelected( clientId ) ||
+				hasSelectedInnerBlock( clientId, true )
+			);
+		},
+		[ clientId ]
+	);
+	useEffect( () => {
+		if ( ! isBlockOrDescendantSelected ) {
+			stopEditingAsBlocks( clientId );
+		}
+	}, [ isBlockOrDescendantSelected, clientId, stopEditingAsBlocks ] );
+	return null;
+}
+
 export default function BlockList( settings ) {
 	return (
 		<BlockEditContextProvider value={ DEFAULT_BLOCK_EDIT_CONTEXT }>
@@ -128,21 +155,25 @@ function Items( {
 	__experimentalAppenderTagName,
 	layout = defaultLayout,
 } ) {
-	const { order, selectedBlocks, visibleBlocks } = useSelect(
-		( select ) => {
-			const {
-				getBlockOrder,
-				getSelectedBlockClientIds,
-				__unstableGetVisibleBlocks,
-			} = select( blockEditorStore );
-			return {
-				order: getBlockOrder( rootClientId ),
-				selectedBlocks: getSelectedBlockClientIds(),
-				visibleBlocks: __unstableGetVisibleBlocks(),
-			};
-		},
-		[ rootClientId ]
-	);
+	const { order, selectedBlocks, visibleBlocks, temporarilyEditingAsBlocks } =
+		useSelect(
+			( select ) => {
+				const {
+					getBlockOrder,
+					getSelectedBlockClientIds,
+					__unstableGetVisibleBlocks,
+					__unstableGetTemporarilyEditingAsBlocks,
+				} = select( blockEditorStore );
+				return {
+					order: getBlockOrder( rootClientId ),
+					selectedBlocks: getSelectedBlockClientIds(),
+					visibleBlocks: __unstableGetVisibleBlocks(),
+					temporarilyEditingAsBlocks:
+						__unstableGetTemporarilyEditingAsBlocks(),
+				};
+			},
+			[ rootClientId ]
+		);
 
 	return (
 		<LayoutProvider value={ layout }>
@@ -163,6 +194,11 @@ function Items( {
 				</AsyncModeProvider>
 			) ) }
 			{ order.length < 1 && placeholder }
+			{ !! temporarilyEditingAsBlocks && (
+				<StopEditingAsBlocksOnOutsideSelect
+					clientId={ temporarilyEditingAsBlocks }
+				/>
+			) }
 			<BlockListAppender
 				tagName={ __experimentalAppenderTagName }
 				rootClientId={ rootClientId }

package/src/components/block-list/private-block-context.js

@@ -3,4 +3,4 @@
  */
 import { createContext } from '@wordpress/element';
 
-export const PrivateBlockContext = createContext( null );
+export const PrivateBlockContext = createContext( {} );

package/src/components/block-list/use-in-between-inserter.js

@@ -77,8 +77,7 @@ export function useInBetweenInserter() {
 				if (
 					getTemplateLock( rootClientId ) ||
 					getBlockEditingMode( rootClientId ) === 'disabled' ||
-					( getBlockName( rootClientId ) === 'core/block' &&
-						window.__experimentalPatternPartialSyncing )
+					getBlockName( rootClientId ) === 'core/block'
 				) {
 					return;
 				}

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

@@ -33,16 +33,24 @@ export default function BlockLockToolbar( { clientId } ) {
 		}
 	}, [ isLocked ] );
 
-	if ( ! canLock || ( ! isLocked && ! hasLockButtonShown.current ) ) {
+	if ( ! isLocked && ! hasLockButtonShown.current ) {
 		return null;
 	}
 
+	let label = isLocked ? __( 'Unlock' ) : __( 'Lock' );
+
+	if ( ! canLock && isLocked ) {
+		label = __( 'Locked' );
+	}
+
 	return (
 		<>
 			<ToolbarGroup className="block-editor-block-lock-toolbar">
 				<ToolbarButton
+					accessibleWhenDisabled
+					disabled={ ! canLock }
 					icon={ isLocked ? lock : unlock }
-					label={ isLocked ? __( 'Unlock' ) : __( 'Lock' ) }
+					label={ label }
 					onClick={ toggleModal }
 					aria-expanded={ isModalOpen }
 					aria-haspopup="dialog"

package/src/components/block-popover/inbetween.js

@@ -33,6 +33,8 @@ function BlockPopoverInbetween( {
 	children,
 	__unstablePopoverSlot,
 	__unstableContentRef,
+	operation = 'insert',
+	nearestSide = 'right',
 	...props
 } ) {
 	// This is a temporary hack to get the inbetween inserter to recompute properly.
@@ -81,7 +83,10 @@ function BlockPopoverInbetween( {
 			return undefined;
 		}
 
-		const contextElement = previousElement || nextElement;
+		const contextElement =
+			operation === 'group'
+				? nextElement || previousElement
+				: previousElement || nextElement;
 
 		return {
 			contextElement,
@@ -98,7 +103,20 @@ function BlockPopoverInbetween( {
 				let width = 0;
 				let height = 0;
 
-				if ( isVertical ) {
+				if ( operation === 'group' ) {
+					const targetRect = nextRect || previousRect;
+					top = targetRect.top;
+					// No spacing is likely around blocks in this operation.
+					// So width of the inserter containing rect is set to 0.
+					width = 0;
+					height = targetRect.bottom - targetRect.top;
+					// Popover calculates its distance from mid-block so some
+					// adjustments are needed to make it appear in the right place.
+					left =
+						nearestSide === 'left'
+							? targetRect.left - 2
+							: targetRect.right - 2;
+				} else if ( isVertical ) {
 					// vertical
 					top = previousRect ? previousRect.bottom : nextRect.top;
 					width = previousRect ? previousRect.width : nextRect.width;
@@ -141,6 +159,8 @@ function BlockPopoverInbetween( {
 		popoverRecomputeCounter,
 		isVertical,
 		isVisible,
+		operation,
+		nearestSide,
 	] );
 
 	const popoverScrollRef = usePopoverScroll( __unstableContentRef );

package/src/components/block-preview/auto.js

@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useResizeObserver, pure, useRefEffect } from '@wordpress/compose';
+import { useResizeObserver, useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
+import { memo, useMemo } from '@wordpress/element';
 import { Disabled } from '@wordpress/components';
 
 /**
@@ -55,7 +55,7 @@ function ScaledBlockPreview( {
 	}, [ styles, additionalStyles ] );
 
 	// Initialize on render instead of module top level, to avoid circular dependency issues.
-	MemoizedBlockList = MemoizedBlockList || pure( BlockList );
+	MemoizedBlockList = MemoizedBlockList || memo( BlockList );
 
 	const scale = containerWidth / viewportWidth;
 	const aspectRatio = contentHeight

package/src/components/block-removal-warning-modal/index.js

@@ -50,11 +50,12 @@ export function BlockRemovalWarningModal( { rules } ) {
 		<Modal
 			title={ __( 'Be careful!' ) }
 			onRequestClose={ clearBlockRemovalPrompt }
+			size="medium"
 		>
 			<p>
 				{ _n(
-					'Post or page content will not be displayed if you delete this block.',
-					'Post or page content will not be displayed if you delete these blocks.',
+					'Deleting this block will stop your post or page content from displaying on this template. It is not recommended.',
+					'Deleting these blocks will stop your post or page content from displaying on this template. It is not recommended.',
 					blockNamesForPrompt.length
 				) }
 			</p>

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

@@ -41,9 +41,7 @@ const POPOVER_PROPS = {
 
 function CopyMenuItem( { blocks, onCopy, label } ) {
 	const ref = useCopyToClipboard( () => serialize( blocks ), onCopy );
-	const copyMenuItemBlocksLabel =
-		blocks.length > 1 ? __( 'Copy blocks' ) : __( 'Copy' );
-	const copyMenuItemLabel = label ? label : copyMenuItemBlocksLabel;
+	const copyMenuItemLabel = label ? label : __( 'Copy' );
 	return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
 }
 
@@ -202,9 +200,6 @@ export function BlockSettingsDropdown( {
 		getSelectedBlockClientIds,
 	] );
 
-	const removeBlockLabel =
-		count === 1 ? __( 'Delete' ) : __( 'Delete blocks' );
-
 	// This can occur when the selected block (the parent)
 	// displays child blocks within a List View.
 	const parentBlockIsSelected =
@@ -411,7 +406,7 @@ export function BlockSettingsDropdown( {
 										) }
 										shortcut={ shortcuts.remove }
 									>
-										{ removeBlockLabel }
+										{ __( 'Delete' ) }
 									</MenuItem>
 								</MenuGroup>
 							) }

package/src/components/block-switcher/block-transformations-menu.js

@@ -37,7 +37,7 @@ function useGroupedTransforms( possibleBlockTransformations ) {
 		const priorityTextTranformsNames = Object.keys(
 			priorityContentTranformationBlocks
 		);
-		return possibleBlockTransformations.reduce(
+		const groupedPossibleTransforms = possibleBlockTransformations.reduce(
 			( accumulator, item ) => {
 				const { name } = item;
 				if ( priorityTextTranformsNames.includes( name ) ) {
@@ -49,6 +49,23 @@ function useGroupedTransforms( possibleBlockTransformations ) {
 			},
 			{ priorityTextTransformations: [], restTransformations: [] }
 		);
+		/**
+		 * If there is only one priority text transformation and it's a Quote,
+		 * is should move to the rest transformations. This is because Quote can
+		 * be a container for any block type, so in multi-block selection it will
+		 * always be suggested, even for non-text blocks.
+		 */
+		if (
+			groupedPossibleTransforms.priorityTextTransformations.length ===
+				1 &&
+			groupedPossibleTransforms.priorityTextTransformations[ 0 ].name ===
+				'core/quote'
+		) {
+			const singleQuote =
+				groupedPossibleTransforms.priorityTextTransformations.pop();
+			groupedPossibleTransforms.restTransformations.push( singleQuote );
+		}
+		return groupedPossibleTransforms;
 	}, [ possibleBlockTransformations ] );
 
 	// Order the priority text transformations.