@wordpress/block-editor 12.23.0 → 12.25.0

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

@@ -211,7 +211,7 @@ export default function BlockList( {
 		);
 	};
 
-	const { blockToolbar, headerToolbar, floatingToolbar } = styles;
+	const { blockToolbar, floatingToolbar } = styles;
 
 	const containerStyle = {
 		flex: isRootList ? 1 : 0,
@@ -224,7 +224,6 @@ export default function BlockList( {
 	const isMultiBlocks = blockClientIds.length > 1;
 	const { isWider } = alignmentHelpers;
 	const extraScrollHeight =
-		headerToolbar.height +
 		blockToolbar.height +
 		( isFloatingToolbarVisible ? floatingToolbar.height : 0 );
 
@@ -245,14 +244,10 @@ export default function BlockList( {
 					<BlockDraggableWrapper isRTL={ isRTL }>
 						{ ( { onScroll } ) => (
 							<KeyboardAwareFlatList
-								{ ...( Platform.OS === 'android'
-									? { removeClippedSubviews: false }
-									: {} ) } // Disable clipping on Android to fix focus losing. See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
 								accessibilityLabel="block-list"
 								ref={ scrollRef }
 								extraScrollHeight={ extraScrollHeight }
 								keyboardShouldPersistTaps="always"
-								scrollViewStyle={ { flex: 1 } }
 								extraData={ getExtraData() }
 								scrollEnabled={ isRootList }
 								contentContainerStyle={ [

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

@@ -86,7 +86,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		blockTitle,
 		isSelected,
 		isSubtreeDisabled,
-		isOutlineEnabled,
 		hasOverlay,
 		initialPosition,
 		blockEditingMode,
@@ -96,7 +95,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		isReusable,
 		isDragging,
 		hasChildSelected,
-		removeOutline,
 		isBlockMovingMode,
 		canInsertMovingBlock,
 		isEditingDisabled,
@@ -116,7 +114,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		useFocusHandler( clientId ),
 		useEventHandlers( { clientId, isSelected } ),
 		useNavModeExit( clientId ),
-		useIsHovered( { isEnabled: isOutlineEnabled } ),
+		useIsHovered(),
 		useIntersectionObserver(),
 		useMovingAnimation( { triggerAnimationOnChange: index, clientId } ),
 		useDisabled( { isDisabled: ! hasOverlay } ),
@@ -130,7 +128,11 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	const hasBlockBindings = !! blockEditContext[ blockBindingsKey ];
 	const bindingsStyle =
 		hasBlockBindings && canBindBlock( name )
-			? { '--wp-admin-theme-color': 'var(--wp-bound-block-color)' }
+			? {
+					'--wp-admin-theme-color': 'var(--wp-block-synced-color)',
+					'--wp-admin-theme-color--rgb':
+						'var(--wp-block-synced-color--rgb)',
+			  }
 			: {};
 
 	// Ensures it warns only inside the `edit` implementation for the block.
@@ -140,6 +142,16 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		);
 	}
 
+	let hasNegativeMargin = false;
+	if (
+		wrapperProps?.style?.marginTop?.charAt( 0 ) === '-' ||
+		wrapperProps?.style?.marginBottom?.charAt( 0 ) === '-' ||
+		wrapperProps?.style?.marginLeft?.charAt( 0 ) === '-' ||
+		wrapperProps?.style?.marginRight?.charAt( 0 ) === '-'
+	) {
+		hasNegativeMargin = true;
+	}
+
 	return {
 		tabIndex: blockEditingMode === 'disabled' ? -1 : 0,
 		...wrapperProps,
@@ -165,11 +177,11 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				'is-reusable': isReusable,
 				'is-dragging': isDragging,
 				'has-child-selected': hasChildSelected,
-				'remove-outline': removeOutline,
 				'is-block-moving-mode': isBlockMovingMode,
 				'can-insert-moving-block': canInsertMovingBlock,
 				'is-editing-disabled': isEditingDisabled,
 				'has-editable-outline': hasEditableOutline,
+				'has-negative-margin': hasNegativeMargin,
 				'is-content-locked-temporarily-editing-as-blocks':
 					isTemporarilyEditingAsBlocks,
 			},

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

@@ -1,14 +1,8 @@
 /**
  * WordPress dependencies
  */
-import {
-	useContext,
-	useLayoutEffect,
-	useMemo,
-	useRef,
-	useState,
-} from '@wordpress/element';
-import { useRefEffect } from '@wordpress/compose';
+import { useContext, useMemo, useRef } from '@wordpress/element';
+import { useRefEffect, useObservableValue } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -26,60 +20,40 @@ import { BlockRefs } from '../../provider/block-refs-provider';
  * @return {RefCallback} Ref callback.
  */
 export function useBlockRefProvider( clientId ) {
-	const { refs, callbacks } = useContext( BlockRefs );
-	const ref = useRef();
-	useLayoutEffect( () => {
-		refs.set( ref, clientId );
-		return () => {
-			refs.delete( ref );
-		};
-	}, [ clientId ] );
+	const { refsMap } = useContext( BlockRefs );
 	return useRefEffect(
 		( element ) => {
-			// Update the ref in the provider.
-			ref.current = element;
-			// Call any update functions.
-			callbacks.forEach( ( id, setElement ) => {
-				if ( clientId === id ) {
-					setElement( element );
-				}
-			} );
+			refsMap.set( clientId, element );
+			return () => refsMap.delete( clientId );
 		},
 		[ clientId ]
 	);
 }
 
 /**
- * Gets a ref pointing to the current block element. Continues to return a
- * stable ref even if the block client ID changes.
+ * Gets a ref pointing to the current block element. Continues to return the same
+ * stable ref object even if the `clientId` argument changes. This hook is not
+ * reactive, i.e., it won't trigger a rerender of the calling component if the
+ * ref value changes. For reactive use cases there is the `useBlockElement` hook.
  *
  * @param {string} clientId The client ID to get a ref for.
  *
  * @return {RefObject} A ref containing the element.
  */
 function useBlockRef( clientId ) {
-	const { refs } = useContext( BlockRefs );
-	const freshClientId = useRef();
-	freshClientId.current = clientId;
+	const { refsMap } = useContext( BlockRefs );
+	const latestClientId = useRef();
+	latestClientId.current = clientId;
+
 	// Always return an object, even if no ref exists for a given client ID, so
 	// that `current` works at a later point.
 	return useMemo(
 		() => ( {
 			get current() {
-				let element = null;
-
-				// Multiple refs may be created for a single block. Find the
-				// first that has an element set.
-				for ( const [ ref, id ] of refs.entries() ) {
-					if ( id === freshClientId.current && ref.current ) {
-						element = ref.current;
-					}
-				}
-
-				return element;
+				return refsMap.get( latestClientId.current ) ?? null;
 			},
 		} ),
-		[]
+		[ refsMap ]
 	);
 }
 
@@ -92,22 +66,8 @@ function useBlockRef( clientId ) {
  * @return {Element|null} The block's wrapper element.
  */
 function useBlockElement( clientId ) {
-	const { callbacks } = useContext( BlockRefs );
-	const ref = useBlockRef( clientId );
-	const [ element, setElement ] = useState( null );
-
-	useLayoutEffect( () => {
-		if ( ! clientId ) {
-			return;
-		}
-
-		callbacks.set( setElement, clientId );
-		return () => {
-			callbacks.delete( setElement );
-		};
-	}, [ clientId ] );
-
-	return ref.current || element;
+	const { refsMap } = useContext( BlockRefs );
+	return useObservableValue( refsMap, clientId ) ?? null;
 }
 
 export { useBlockRef as __unstableUseBlockRef };

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

@@ -28,11 +28,16 @@ import { store as blockEditorStore } from '../../../store';
  */
 export function useFocusFirstElement( { clientId, initialPosition } ) {
 	const ref = useRef();
-	const { isBlockSelected, isMultiSelecting } = useSelect( blockEditorStore );
+	const { isBlockSelected, isMultiSelecting, __unstableGetEditorMode } =
+		useSelect( blockEditorStore );
 
 	useEffect( () => {
 		// Check if the block is still selected at the time this effect runs.
-		if ( ! isBlockSelected( clientId ) || isMultiSelecting() ) {
+		if (
+			! isBlockSelected( clientId ) ||
+			isMultiSelecting() ||
+			__unstableGetEditorMode() === 'zoom-out'
+		) {
 			return;
 		}
 
@@ -80,7 +85,6 @@ export function useFocusFirstElement( { clientId, initialPosition } ) {
 				return;
 			}
 		}
-
 		placeCaretAtHorizontalEdge( target, isReverse );
 	}, [ initialPosition, clientId ] );
 

package/src/components/block-list/use-block-props/use-is-hovered.js

@@ -18,22 +18,17 @@ function listener( event ) {
  * Adds `is-hovered` class when the block is hovered and in navigation or
  * outline mode.
  */
-export function useIsHovered( { isEnabled } ) {
-	return useRefEffect(
-		( node ) => {
-			if ( isEnabled ) {
-				node.addEventListener( 'mouseout', listener );
-				node.addEventListener( 'mouseover', listener );
+export function useIsHovered() {
+	return useRefEffect( ( node ) => {
+		node.addEventListener( 'mouseout', listener );
+		node.addEventListener( 'mouseover', listener );
 
-				return () => {
-					node.removeEventListener( 'mouseout', listener );
-					node.removeEventListener( 'mouseover', listener );
+		return () => {
+			node.removeEventListener( 'mouseout', listener );
+			node.removeEventListener( 'mouseover', listener );
 
-					// Remove class in case it lingers.
-					node.classList.remove( 'is-hovered' );
-				};
-			}
-		},
-		[ isEnabled ]
-	);
+			// Remove class in case it lingers.
+			node.classList.remove( 'is-hovered' );
+		};
+	}, [] );
 }

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

@@ -90,7 +90,9 @@ export const BlockMover = ( {
 		const option = blockPageMoverOptions.find(
 			( el ) => el.value === value
 		);
-		if ( option && option.onSelect ) option.onSelect();
+		if ( option && option.onSelect ) {
+			option.onSelect();
+		}
 	};
 
 	const onLongPressMoveUp = useCallback(

package/src/components/block-patterns-list/style.scss

@@ -50,9 +50,7 @@
 		&:hover,
 		&:focus {
 			.block-editor-block-preview__container {
-				box-shadow:
-					0 0 0 2px var(--wp-block-synced-color),
-					0 15px 25px rgb(0 0 0 / 7%);
+				box-shadow: 0 0 0 2px var(--wp-block-synced-color);
 			}
 		}
 	}

package/src/components/block-patterns-paging/index.js

@@ -45,6 +45,7 @@ export default function Pagination( {
 							onClick={ () => changePage( 1 ) }
 							disabled={ currentPage === 1 }
 							aria-label={ __( 'First page' ) }
+							__experimentalIsFocusable
 						>
 							<span>«</span>
 						</Button>
@@ -53,6 +54,7 @@ export default function Pagination( {
 							onClick={ () => changePage( currentPage - 1 ) }
 							disabled={ currentPage === 1 }
 							aria-label={ __( 'Previous page' ) }
+							__experimentalIsFocusable
 						>
 							<span>‹</span>
 						</Button>
@@ -75,6 +77,7 @@ export default function Pagination( {
 							onClick={ () => changePage( currentPage + 1 ) }
 							disabled={ currentPage === numPages }
 							aria-label={ __( 'Next page' ) }
+							__experimentalIsFocusable
 						>
 							<span>›</span>
 						</Button>
@@ -84,6 +87,7 @@ export default function Pagination( {
 							disabled={ currentPage === numPages }
 							aria-label={ __( 'Last page' ) }
 							size="default"
+							__experimentalIsFocusable
 						>
 							<span>»</span>
 						</Button>

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

@@ -49,30 +49,28 @@
 	z-index: 1;
 }
 
-// Restrict these shadows to the context of the inspector.
-.interface-interface-skeleton__sidebar {
-	.block-editor-block-patterns-list__list-item {
-		.block-editor-block-preview__container {
-			box-shadow: 0 0 $border-width rgba($black, 0.1);
-		}
-		&:hover {
-			.block-editor-block-preview__container {
-				box-shadow: 0 0 0 2px $gray-900;
-			}
-		}
-	}
-}
-
 // Restrict these shadows to the context of the inserter.
 .editor-inserter-sidebar {
-	.block-editor-block-patterns-list__list-item {
+	.block-editor-block-patterns-list__item {
 		.block-editor-block-preview__container {
 			box-shadow: 0 15px 25px rgb(0 0 0 / 7%);
 		}
+		&:focus,
 		&:hover {
 			.block-editor-block-preview__container {
 				box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
 			}
 		}
+
+		&.block-editor-block-patterns-list__list-item-synced {
+			&:hover,
+			&:focus {
+				.block-editor-block-preview__container {
+					box-shadow:
+						0 0 0 2px var(--wp-block-synced-color),
+						0 15px 25px rgb(0 0 0 / 7%);
+				}
+			}
+		}
 	}
 }

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

@@ -8,9 +8,8 @@ import {
 	TextControl,
 	Modal,
 } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useState, useId } from '@wordpress/element';
 import { speak } from '@wordpress/a11y';
 
 /**
@@ -23,8 +22,12 @@ export default function BlockRenameModal( {
 	originalBlockName,
 	onClose,
 	onSave,
+	// Pattern Overrides is a WordPress-only feature but it also uses the Block Binding API.
+	// Ideally this should not be inside the block editor package, but we keep it here for simplicity.
+	hasOverridesWarning,
 } ) {
 	const [ editedBlockName, setEditedBlockName ] = useState( blockName );
+	const descriptionId = useId();
 
 	const nameHasChanged = editedBlockName !== blockName;
 	const nameIsOriginal = editedBlockName === originalBlockName;
@@ -34,11 +37,6 @@ export default function BlockRenameModal( {
 
 	const autoSelectInputText = ( event ) => event.target.select();
 
-	const dialogDescription = useInstanceId(
-		BlockRenameModal,
-		`block-editor-rename-modal__description`
-	);
-
 	const handleSubmit = () => {
 		const message =
 			nameIsOriginal || nameIsEmpty
@@ -66,14 +64,10 @@ export default function BlockRenameModal( {
 			title={ __( 'Rename' ) }
 			onRequestClose={ onClose }
 			overlayClassName="block-editor-block-rename-modal"
-			aria={ {
-				describedby: dialogDescription,
-			} }
 			focusOnMount="firstContentElement"
+			aria={ { describedby: descriptionId } }
+			size="small"
 		>
-			<p id={ dialogDescription }>
-				{ __( 'Enter a custom name for this block.' ) }
-			</p>
 			<form
 				onSubmit={ ( e ) => {
 					e.preventDefault();
@@ -85,6 +79,9 @@ export default function BlockRenameModal( {
 					handleSubmit();
 				} }
 			>
+				<p id={ descriptionId }>
+					{ __( 'Enter a custom name for this block.' ) }
+				</p>
 				<VStack spacing="3">
 					<TextControl
 						__nextHasNoMarginBottom
@@ -92,6 +89,13 @@ export default function BlockRenameModal( {
 						value={ editedBlockName }
 						label={ __( 'Block name' ) }
 						hideLabelFromVision
+						help={
+							hasOverridesWarning
+								? __(
+										'This block allows overrides. Changing the name can cause problems with content entered into instances of this pattern.'
+								  )
+								: undefined
+						}
 						placeholder={ originalBlockName }
 						onChange={ setEditedBlockName }
 						onFocus={ autoSelectInputText }

package/src/components/block-rename/rename-control.js

@@ -32,11 +32,17 @@ export default function BlockRenameControl( { clientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	const customName = metadata?.name;
+	const hasPatternOverrides =
+		!! customName &&
+		!! metadata?.bindings &&
+		Object.values( metadata.bindings ).some(
+			( binding ) => binding.source === 'core/pattern-overrides'
+		);
 
 	function onChange( newName ) {
 		updateBlockAttributes( [ clientId ], {
 			metadata: {
-				...( metadata && metadata ),
+				...metadata,
 				name: newName,
 			},
 		} );
@@ -59,6 +65,7 @@ export default function BlockRenameControl( { clientId } ) {
 				<BlockRenameModal
 					blockName={ customName || '' }
 					originalBlockName={ blockInformation?.title }
+					hasOverridesWarning={ hasPatternOverrides }
 					onClose={ () => setRenamingBlock( false ) }
 					onSave={ ( newName ) => {
 						// If the new value is the block's original name (e.g. `Group`)

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

@@ -12,10 +12,7 @@ import { moreVertical } from '@wordpress/icons';
 import { Children, cloneElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { displayShortcut } from '@wordpress/keycodes';
-import {
-	store as keyboardShortcutsStore,
-	__unstableUseShortcutEventMatch,
-} from '@wordpress/keyboard-shortcuts';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { pipe, useCopyToClipboard } from '@wordpress/compose';
 
 /**
@@ -125,7 +122,6 @@ export function BlockSettingsDropdown( {
 			),
 		};
 	}, [] );
-	const isMatch = __unstableUseShortcutEventMatch();
 	const hasSelectedBlocks = selectedBlockClientIds.length > 0;
 
 	async function updateSelectionAfterDuplicate( clientIdsPromise ) {
@@ -213,52 +209,6 @@ export function BlockSettingsDropdown( {
 					open={ open }
 					onToggle={ onToggle }
 					noIcons
-					menuProps={ {
-						/**
-						 * @param {KeyboardEvent} event
-						 */
-						onKeyDown( event ) {
-							if ( event.defaultPrevented ) return;
-
-							if (
-								isMatch( 'core/block-editor/remove', event ) &&
-								canRemove
-							) {
-								event.preventDefault();
-								onRemove();
-								updateSelectionAfterRemove();
-							} else if (
-								isMatch(
-									'core/block-editor/duplicate',
-									event
-								) &&
-								canDuplicate
-							) {
-								event.preventDefault();
-								updateSelectionAfterDuplicate( onDuplicate() );
-							} else if (
-								isMatch(
-									'core/block-editor/insert-after',
-									event
-								) &&
-								canInsertBlock
-							) {
-								event.preventDefault();
-								setOpenedBlockSettingsMenu( undefined );
-								onInsertAfter();
-							} else if (
-								isMatch(
-									'core/block-editor/insert-before',
-									event
-								) &&
-								canInsertBlock
-							) {
-								event.preventDefault();
-								setOpenedBlockSettingsMenu( undefined );
-								onInsertBefore();
-							}
-						},
-					} }
 					{ ...props }
 				>
 					{ ( { onClose } ) => (

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

@@ -34,7 +34,9 @@ function PatternTransformationsMenu( {
 } ) {
 	const [ showTransforms, setShowTransforms ] = useState( false );
 	const patterns = useTransformedPatterns( statePatterns, blocks );
-	if ( ! patterns.length ) return null;
+	if ( ! patterns.length ) {
+		return null;
+	}
 
 	return (
 		<MenuGroup className="block-editor-block-switcher__pattern__transforms__menugroup">

package/src/components/block-switcher/use-transformed-patterns.js

@@ -62,7 +62,9 @@ export const getPatternTransformedBlocks = (
 				selectedBlock.name,
 				consumedBlocks
 			);
-			if ( ! match ) continue;
+			if ( ! match ) {
+				continue;
+			}
 			isMatch = true;
 			consumedBlocks.add( match.clientId );
 			// We update (mutate) the matching pattern block.
@@ -71,7 +73,9 @@ export const getPatternTransformedBlocks = (
 			break;
 		}
 		// Bail eary if a selected block has not been matched.
-		if ( ! isMatch ) return;
+		if ( ! isMatch ) {
+			return;
+		}
 	}
 	return _patternBlocks;
 };

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

@@ -22,8 +22,12 @@ export const getMatchingBlockByName = (
 ) => {
 	const { clientId, name, innerBlocks = [] } = block;
 	// Check if block has been consumed already.
-	if ( consumedBlocks.has( clientId ) ) return;
-	if ( name === selectedBlockName ) return block;
+	if ( consumedBlocks.has( clientId ) ) {
+		return;
+	}
+	if ( name === selectedBlockName ) {
+		return block;
+	}
 	// Try to find a matching block from InnerBlocks recursively.
 	for ( const innerBlock of innerBlocks ) {
 		const match = getMatchingBlockByName(
@@ -31,7 +35,9 @@ export const getMatchingBlockByName = (
 			selectedBlockName,
 			consumedBlocks
 		);
-		if ( match ) return match;
+		if ( match ) {
+			return match;
+		}
 	}
 };
 
@@ -47,11 +53,14 @@ export const getMatchingBlockByName = (
  */
 export const getRetainedBlockAttributes = ( name, attributes ) => {
 	const contentAttributes = getBlockAttributesNamesByRole( name, 'content' );
-	if ( ! contentAttributes?.length ) return attributes;
+	if ( ! contentAttributes?.length ) {
+		return attributes;
+	}
 
 	return contentAttributes.reduce( ( _accumulator, attribute ) => {
-		if ( attributes[ attribute ] )
+		if ( attributes[ attribute ] ) {
 			_accumulator[ attribute ] = attributes[ attribute ];
+		}
 		return _accumulator;
 	}, {} );
 };

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

@@ -170,29 +170,33 @@ export function PrivateBlockToolbar( {
 				{ isUsingBindings && canBindBlock( blockName ) && (
 					<BlockBindingsIndicator />
 				) }
-				{ ( shouldShowVisualToolbar || isMultiToolbar ) && (
-					<div ref={ nodeRef } { ...showHoveredOrFocusedGestures }>
-						<ToolbarGroup className="block-editor-block-toolbar__block-controls">
-							<BlockSwitcher
-								clientIds={ blockClientIds }
-								disabled={ ! isDefaultEditingMode }
-							/>
-							{ isDefaultEditingMode && (
-								<>
-									{ ! isMultiToolbar && (
-										<BlockLockToolbar
-											clientId={ blockClientId }
+				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
+					( isDefaultEditingMode || isSynced ) && (
+						<div
+							ref={ nodeRef }
+							{ ...showHoveredOrFocusedGestures }
+						>
+							<ToolbarGroup className="block-editor-block-toolbar__block-controls">
+								<BlockSwitcher
+									clientIds={ blockClientIds }
+									disabled={ ! isDefaultEditingMode }
+								/>
+								{ isDefaultEditingMode && (
+									<>
+										{ ! isMultiToolbar && (
+											<BlockLockToolbar
+												clientId={ blockClientId }
+											/>
+										) }
+										<BlockMover
+											clientIds={ blockClientIds }
+											hideDragHandle={ hideDragHandle }
 										/>
-									) }
-									<BlockMover
-										clientIds={ blockClientIds }
-										hideDragHandle={ hideDragHandle }
-									/>
-								</>
-							) }
-						</ToolbarGroup>
-					</div>
-				) }
+									</>
+								) }
+							</ToolbarGroup>
+						</div>
+					) }
 				<Shuffle clientId={ blockClientId } />
 				{ shouldShowVisualToolbar && isMultiToolbar && (
 					<BlockGroupToolbar />