@wordpress/block-editor 12.24.0 → 12.26.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -56,10 +56,11 @@ function Root( { className, ...settings } ) {
 			getSettings,
 			__unstableGetEditorMode,
 			getTemporarilyEditingAsBlocks,
+			isTyping,
 		} = unlock( select( blockEditorStore ) );
 		const { outlineMode, focusMode } = getSettings();
 		return {
-			isOutlineMode: outlineMode,
+			isOutlineMode: outlineMode && ! isTyping(),
 			isFocusMode: focusMode,
 			editorMode: __unstableGetEditorMode(),
 			temporarilyEditingAsBlocks: getTemporarilyEditingAsBlocks(),
@@ -110,7 +111,7 @@ function Root( { className, ...settings } ) {
 				useInBetweenInserter(),
 				useTypingObserver(),
 			] ),
-			className: classnames( 'is-root-container', className, {
+			className: clsx( 'is-root-container', className, {
 				'is-outline-mode': isOutlineMode,
 				'is-focus-mode': isFocusMode && isLargeViewport,
 				'is-navigate-mode': editorMode === 'navigation',
@@ -204,11 +205,10 @@ function Items( {
 					visibleBlocks: __unstableGetVisibleBlocks(),
 					shouldRenderAppender:
 						hasAppender &&
+						__unstableGetEditorMode() !== 'zoom-out' &&
 						( hasCustomAppender
 							? ! getTemplateLock( rootClientId ) &&
-							  getBlockEditingMode( rootClientId ) !==
-									'disabled' &&
-							  __unstableGetEditorMode() !== 'zoom-out'
+							  getBlockEditingMode( rootClientId ) !== 'disabled'
 							: rootClientId === selectedBlockClientId ||
 							  ( ! rootClientId &&
 									! selectedBlockClientId &&

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -28,6 +28,7 @@ import { useEventHandlers } from './use-selected-block-event-handlers';
 import { useNavModeExit } from './use-nav-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
+import { useScrollIntoView } from './use-scroll-into-view';
 import { useFlashEditableBlocks } from '../../use-flash-editable-blocks';
 import { canBindBlock } from '../../../hooks/use-bindings-attributes';
 
@@ -86,7 +87,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		blockTitle,
 		isSelected,
 		isSubtreeDisabled,
-		isOutlineEnabled,
 		hasOverlay,
 		initialPosition,
 		blockEditingMode,
@@ -96,7 +96,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		isReusable,
 		isDragging,
 		hasChildSelected,
-		removeOutline,
 		isBlockMovingMode,
 		canInsertMovingBlock,
 		isEditingDisabled,
@@ -116,7 +115,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 } ),
@@ -124,6 +123,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			clientId,
 			isEnabled: name === 'core/block' || templateLock === 'contentOnly',
 		} ),
+		useScrollIntoView( { isSelected } ),
 	] );
 
 	const blockEditContext = useBlockEditContext();
@@ -144,6 +144,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,
@@ -156,7 +166,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		'data-type': name,
 		'data-title': blockTitle,
 		inert: isSubtreeDisabled ? 'true' : undefined,
-		className: classnames(
+		className: clsx(
 			'block-editor-block-list__block',
 			{
 				// The wp-block className is important for editor styles.
@@ -169,11 +179,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-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-list/use-block-props/use-scroll-into-view.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useReducedMotion, useRefEffect } from '@wordpress/compose';
+
+export function useScrollIntoView( { isSelected } ) {
+	const prefersReducedMotion = useReducedMotion();
+	return useRefEffect(
+		( node ) => {
+			if ( isSelected ) {
+				const { ownerDocument } = node;
+				const { defaultView } = ownerDocument;
+				if ( ! defaultView.IntersectionObserver ) {
+					return;
+				}
+				const observer = new defaultView.IntersectionObserver(
+					( entries ) => {
+						// Once observing starts, we always get an initial
+						// entry with the intersecting state.
+						if ( ! entries[ 0 ].isIntersecting ) {
+							node.scrollIntoView( {
+								behavior: prefersReducedMotion
+									? 'instant'
+									: 'smooth',
+							} );
+						}
+						observer.disconnect();
+					}
+				);
+				observer.observe( node );
+				return () => {
+					observer.disconnect();
+				};
+			}
+		},
+		[ isSelected ]
+	);
+}

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -76,7 +76,7 @@ export default function BlockListAppender( {
 			//
 			// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
 			tabIndex={ -1 }
-			className={ classnames( 'block-list-appender wp-block', className, {
+			className={ clsx( 'block-list-appender wp-block', className, {
 				'is-drag-over': isDragOver,
 			} ) }
 			// Needed in case the whole editor is content editable (for multi

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -130,7 +130,7 @@ const BlockMoverButton = forwardRef(
 			<>
 				<Button
 					ref={ ref }
-					className={ classnames(
+					className={ clsx(
 						'block-editor-block-mover-button',
 						`is-${ direction }-button`
 					) }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -64,7 +64,7 @@ function BlockMover( {
 
 	return (
 		<ToolbarGroup
-			className={ classnames( 'block-editor-block-mover', {
+			className={ clsx( 'block-editor-block-mover', {
 				'is-horizontal': orientation === 'horizontal',
 			} ) }
 		>

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/index.js

@@ -1,12 +1,13 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { useEffect, useState, forwardRef } from '@wordpress/element';
+import { cloneBlock } from '@wordpress/blocks';
+import { useEffect, useState, forwardRef, useMemo } from '@wordpress/element';
 import {
 	VisuallyHidden,
 	Tooltip,
@@ -47,16 +48,38 @@ function BlockPattern( {
 	onHover,
 	showTitle = true,
 	showTooltip,
+	category,
 } ) {
 	const [ isDragging, setIsDragging ] = useState( false );
 	const { blocks, viewportWidth } = pattern;
 	const instanceId = useInstanceId( BlockPattern );
 	const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`;
 
+	// When we have a selected category and the pattern is draggable, we need to update the
+	// pattern's categories in metadata to only contain the selected category, and pass this to
+	// InserterDraggableBlocks component. We do that because we use this information for pattern
+	// shuffling and it makes more sense to show only the ones from the initially selected category during insertion.
+	const patternBlocks = useMemo( () => {
+		if ( ! category || ! isDraggable ) {
+			return blocks;
+		}
+		return ( blocks ?? [] ).map( ( block ) => {
+			const clonedBlock = cloneBlock( block );
+			if (
+				clonedBlock.attributes.metadata?.categories?.includes(
+					category
+				)
+			) {
+				clonedBlock.attributes.metadata.categories = [ category ];
+			}
+			return clonedBlock;
+		} );
+	}, [ blocks, isDraggable, category ] );
+
 	return (
 		<InserterDraggableBlocks
 			isEnabled={ isDraggable }
-			blocks={ blocks }
+			blocks={ patternBlocks }
 			pattern={ pattern }
 		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
@@ -94,7 +117,7 @@ function BlockPattern( {
 											? descriptionId
 											: undefined
 									}
-									className={ classnames(
+									className={ clsx(
 										'block-editor-block-patterns-list__item',
 										{
 											'block-editor-block-patterns-list__list-item-synced':
@@ -173,6 +196,7 @@ function BlockPatternsList(
 		onClickPattern,
 		orientation,
 		label = __( 'Block patterns' ),
+		category,
 		showTitle = true,
 		showTitlesAsTooltip,
 		pagingProps,
@@ -209,6 +233,7 @@ function BlockPatternsList(
 						isDraggable={ isDraggable }
 						showTitle={ showTitle }
 						showTooltip={ showTitlesAsTooltip }
+						category={ category }
 					/>
 				) : (
 					<BlockPatternPlaceholder key={ pattern.name } />

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-popover/README.md

@@ -30,7 +30,7 @@ This determines whether the block popover always shifts into the viewport or rem
 -	Required: No
 -	Default: `true`
 
-## BlockPopoverInbetween
+## BlockPopoverInbetween - Private Component
 
 ### Props
 

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

@@ -7,10 +7,17 @@ import { useEffect, useState, useMemo, forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
-import BlockPopover from '.';
+import { PrivateBlockPopover } from '.';
 
 function BlockPopoverCover(
-	{ clientId, bottomClientId, children, shift = false, ...props },
+	{
+		clientId,
+		bottomClientId,
+		children,
+		shift = false,
+		additionalStyles,
+		...props
+	},
 	ref
 ) {
 	bottomClientId ??= clientId;
@@ -18,7 +25,7 @@ function BlockPopoverCover(
 	const selectedElement = useBlockElement( clientId );
 
 	return (
-		<BlockPopover
+		<PrivateBlockPopover
 			ref={ ref }
 			clientId={ clientId }
 			bottomClientId={ bottomClientId }
@@ -26,17 +33,24 @@ function BlockPopoverCover(
 			{ ...props }
 		>
 			{ selectedElement && clientId === bottomClientId ? (
-				<CoverContainer selectedElement={ selectedElement }>
+				<CoverContainer
+					selectedElement={ selectedElement }
+					additionalStyles={ additionalStyles }
+				>
 					{ children }
 				</CoverContainer>
 			) : (
 				children
 			) }
-		</BlockPopover>
+		</PrivateBlockPopover>
 	);
 }
 
-function CoverContainer( { selectedElement, children } ) {
+function CoverContainer( {
+	selectedElement,
+	additionalStyles = {},
+	children,
+} ) {
 	const [ width, setWidth ] = useState( selectedElement.offsetWidth );
 	const [ height, setHeight ] = useState( selectedElement.offsetHeight );
 
@@ -54,8 +68,9 @@ function CoverContainer( { selectedElement, children } ) {
 			position: 'absolute',
 			width,
 			height,
+			...additionalStyles,
 		};
-	}, [ width, height ] );
+	}, [ width, height, additionalStyles ] );
 
 	return <div style={ style }>{ children }</div>;
 }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -241,7 +241,7 @@ function BlockPopoverInbetween( {
 			// This makes sure the popover doesn't animate from its previous position.
 			key={ nextClientId + '--' + rootClientId }
 			{ ...props }
-			className={ classnames(
+			className={ clsx(
 				'block-editor-block-popover',
 				'block-editor-block-popover__inbetween',
 				props.className

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -144,10 +144,7 @@ function BlockPopover(
 			flip={ false }
 			shift={ shift }
 			{ ...props }
-			className={ classnames(
-				'block-editor-block-popover',
-				props.className
-			) }
+			className={ clsx( 'block-editor-block-popover', props.className ) }
 			variant="unstyled"
 		>
 			{ children }
@@ -155,4 +152,25 @@ function BlockPopover(
 	);
 }
 
-export default forwardRef( BlockPopover );
+export const PrivateBlockPopover = forwardRef( BlockPopover );
+
+const PublicBlockPopover = (
+	{ clientId, bottomClientId, children, ...props },
+	ref
+) => (
+	<PrivateBlockPopover
+		{ ...props }
+		bottomClientId={ bottomClientId }
+		clientId={ clientId }
+		__unstableContentRef={ undefined }
+		__unstablePopoverSlot={ undefined }
+		ref={ ref }
+	>
+		{ children }
+	</PrivateBlockPopover>
+);
+
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-popover/README.md
+ */
+export default forwardRef( PublicBlockPopover );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -148,7 +148,7 @@ export function useBlockPreview( { blocks, props = {}, layout } ) {
 	return {
 		...props,
 		ref,
-		className: classnames(
+		className: clsx(
 			props.className,
 			'block-editor-block-preview__live-content',
 			'components-disabled'