@wordpress/block-editor 12.16.0 → 12.16.1-next.79a6196f.0

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

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useMemo, useCallback, RawHTML } from '@wordpress/element';
+import { useCallback, RawHTML, useContext } from '@wordpress/element';
 import {
 	getBlockType,
 	getSaveContent,
@@ -15,16 +15,13 @@ import {
 	switchToBlockType,
 	getDefaultBlockName,
 	isUnmodifiedBlock,
+	isReusableBlock,
+	getBlockDefaultClassName,
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
-import {
-	withDispatch,
-	withSelect,
-	useDispatch,
-	useSelect,
-} from '@wordpress/data';
-import { compose, pure, ifCondition } from '@wordpress/compose';
+import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
+import { compose, pure } from '@wordpress/compose';
 import { safeHTML } from '@wordpress/dom';
 
 /**
@@ -38,7 +35,9 @@ import BlockHtml from './block-html';
 import { useBlockProps } from './use-block-props';
 import { store as blockEditorStore } from '../../store';
 import { useLayout } from './layout';
-import { BlockListBlockContext } from './block-list-block-context';
+import { PrivateBlockContext } from './private-block-context';
+
+import { unlock } from '../../lock-unlock';
 
 /**
  * Merges wrapper props with special handling for classNames and styles.
@@ -101,44 +100,11 @@ function BlockListBlock( {
 	toggleSelection,
 } ) {
 	const {
-		themeSupportsLayout,
-		isTemporarilyEditingAsBlocks,
-		blockEditingMode,
 		mayDisplayControls,
 		mayDisplayParentControls,
-	} = useSelect(
-		( select ) => {
-			const {
-				getSettings,
-				__unstableGetTemporarilyEditingAsBlocks,
-				getBlockEditingMode,
-				getBlockName,
-				isFirstMultiSelectedBlock,
-				getMultiSelectedBlockClientIds,
-				hasSelectedInnerBlock,
-			} = select( blockEditorStore );
-			const { hasBlockSupport } = select( blocksStore );
-			return {
-				themeSupportsLayout: getSettings().supportsLayout,
-				isTemporarilyEditingAsBlocks:
-					__unstableGetTemporarilyEditingAsBlocks() === clientId,
-				blockEditingMode: getBlockEditingMode( clientId ),
-				mayDisplayControls:
-					isSelected ||
-					( isFirstMultiSelectedBlock( clientId ) &&
-						getMultiSelectedBlockClientIds().every(
-							( id ) => getBlockName( id ) === name
-						) ),
-				mayDisplayParentControls:
-					hasBlockSupport(
-						getBlockName( clientId ),
-						'__experimentalExposeControlsToChildren',
-						false
-					) && hasSelectedInnerBlock( clientId ),
-			};
-		},
-		[ clientId, isSelected, name ]
-	);
+		themeSupportsLayout,
+		...context
+	} = useContext( PrivateBlockContext );
 	const { removeBlock } = useDispatch( blockEditorStore );
 	const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
 
@@ -172,12 +138,6 @@ function BlockListBlock( {
 
 	const blockType = getBlockType( name );
 
-	if ( blockEditingMode === 'disabled' ) {
-		wrapperProps = {
-			...wrapperProps,
-			tabIndex: -1,
-		};
-	}
 	// Determine whether the block has props to apply to the wrapper.
 	if ( blockType?.getEditWrapperProps ) {
 		wrapperProps = mergeWrapperProps(
@@ -241,30 +201,28 @@ function BlockListBlock( {
 	} else if ( blockType?.apiVersion > 1 ) {
 		block = blockEdit;
 	} else {
-		block = <Block { ...wrapperProps }>{ blockEdit }</Block>;
+		block = <Block>{ blockEdit }</Block>;
 	}
 
 	const { 'data-align': dataAlign, ...restWrapperProps } = wrapperProps ?? {};
 
-	const value = {
-		clientId,
-		className: classnames(
-			{
-				'is-editing-disabled': blockEditingMode === 'disabled',
-				'is-content-locked-temporarily-editing-as-blocks':
-					isTemporarilyEditingAsBlocks,
-			},
-			dataAlign && themeSupportsLayout && `align${ dataAlign }`,
-			! ( dataAlign && isSticky ) && className
-		),
-		wrapperProps: restWrapperProps,
-		isAligned,
-	};
-
-	const memoizedValue = useMemo( () => value, Object.values( value ) );
+	restWrapperProps.className = classnames(
+		restWrapperProps.className,
+		dataAlign && themeSupportsLayout && `align${ dataAlign }`,
+		! ( dataAlign && isSticky ) && className
+	);
 
+	// We set a new context with the adjusted and filtered wrapperProps (through
+	// `editor.BlockListBlock`), which the `BlockListBlockProvider` did not have
+	// access to.
 	return (
-		<BlockListBlockContext.Provider value={ memoizedValue }>
+		<PrivateBlockContext.Provider
+			value={ {
+				wrapperProps: restWrapperProps,
+				isAligned,
+				...context,
+			} }
+		>
 			<BlockCrashBoundary
 				fallback={
 					<Block className="has-warning">
@@ -274,52 +232,10 @@ function BlockListBlock( {
 			>
 				{ block }
 			</BlockCrashBoundary>
-		</BlockListBlockContext.Provider>
+		</PrivateBlockContext.Provider>
 	);
 }
 
-const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => {
-	const {
-		isBlockSelected,
-		getBlockMode,
-		isSelectionEnabled,
-		getTemplateLock,
-		__unstableGetBlockWithoutInnerBlocks,
-		canRemoveBlock,
-		canMoveBlock,
-	} = select( blockEditorStore );
-	const block = __unstableGetBlockWithoutInnerBlocks( clientId );
-	const isSelected = isBlockSelected( clientId );
-	const templateLock = getTemplateLock( rootClientId );
-	const canRemove = canRemoveBlock( clientId, rootClientId );
-	const canMove = canMoveBlock( clientId, rootClientId );
-
-	// The fallback to `{}` is a temporary fix.
-	// This function should never be called when a block is not present in
-	// the state. It happens now because the order in withSelect rendering
-	// is not correct.
-	const { name, attributes, isValid } = block || {};
-
-	// Do not add new properties here, use `useSelect` instead to avoid
-	// leaking new props to the public API (editor.BlockListBlock filter).
-	return {
-		mode: getBlockMode( clientId ),
-		isSelectionEnabled: isSelectionEnabled(),
-		isLocked: !! templateLock,
-		canRemove,
-		canMove,
-		// Users of the editor.BlockListBlock filter used to be able to
-		// access the block prop.
-		// Ideally these blocks would rely on the clientId prop only.
-		// This is kept for backward compatibility reasons.
-		block,
-		name,
-		attributes,
-		isValid,
-		isSelected,
-	};
-} );
-
 const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 	const {
 		updateBlockAttributes,
@@ -558,13 +474,268 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 	};
 } );
 
-export default compose(
-	pure,
-	applyWithSelect,
+// This component is used by the BlockListBlockProvider component below. It will
+// add the props necessary for the `editor.BlockListBlock` filters.
+BlockListBlock = compose(
 	applyWithDispatch,
-	// Block is sometimes not mounted at the right time, causing it be undefined
-	// see issue for more info
-	// https://github.com/WordPress/gutenberg/issues/17013
-	ifCondition( ( { block } ) => !! block ),
 	withFilters( 'editor.BlockListBlock' )
 )( BlockListBlock );
+
+// This component provides all the information we need through a single store
+// subscription (useSelect mapping). Only the necesssary 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
+// component, and useBlockProps.
+function BlockListBlockProvider( props ) {
+	const { clientId, rootClientId } = props;
+	const selectedProps = useSelect(
+		( select ) => {
+			const {
+				isBlockSelected,
+				getBlockMode,
+				isSelectionEnabled,
+				getTemplateLock,
+				__unstableGetBlockWithoutInnerBlocks,
+				canRemoveBlock,
+				canMoveBlock,
+
+				getSettings,
+				__unstableGetTemporarilyEditingAsBlocks,
+				getBlockEditingMode,
+				getBlockName,
+				isFirstMultiSelectedBlock,
+				getMultiSelectedBlockClientIds,
+				hasSelectedInnerBlock,
+
+				getBlockIndex,
+				isTyping,
+				isBlockMultiSelected,
+				isBlockSubtreeDisabled,
+				isBlockHighlighted,
+				__unstableIsFullySelected,
+				__unstableSelectionHasUnmergeableBlock,
+				isBlockBeingDragged,
+				hasBlockMovingClientId,
+				canInsertBlockType,
+				getBlockRootClientId,
+				__unstableHasActiveBlockOverlayActive,
+				__unstableGetEditorMode,
+				getSelectedBlocksInitialCaretPosition,
+			} = unlock( select( blockEditorStore ) );
+			const block = __unstableGetBlockWithoutInnerBlocks( clientId );
+
+			// This is a temporary fix.
+			// This function should never be called when a block is not
+			// present in the state. It happens now because the order in
+			// withSelect rendering is not correct.
+			if ( ! block ) {
+				return;
+			}
+
+			const {
+				hasBlockSupport: _hasBlockSupport,
+				getActiveBlockVariation,
+			} = select( blocksStore );
+			const _isSelected = isBlockSelected( clientId );
+			const templateLock = getTemplateLock( rootClientId );
+			const canRemove = canRemoveBlock( clientId, rootClientId );
+			const canMove = canMoveBlock( clientId, rootClientId );
+			const { name: blockName, attributes, isValid } = block;
+			const blockType = getBlockType( blockName );
+			const match = getActiveBlockVariation( blockName, attributes );
+			const { outlineMode, supportsLayout } = getSettings();
+			const isMultiSelected = isBlockMultiSelected( clientId );
+			const checkDeep = true;
+			const isAncestorOfSelectedBlock = hasSelectedInnerBlock(
+				clientId,
+				checkDeep
+			);
+			const typing = isTyping();
+			const hasLightBlockWrapper = blockType?.apiVersion > 1;
+			const movingClientId = hasBlockMovingClientId();
+
+			return {
+				mode: getBlockMode( clientId ),
+				isSelectionEnabled: isSelectionEnabled(),
+				isLocked: !! templateLock,
+				canRemove,
+				canMove,
+				// Users of the editor.BlockListBlock filter used to be able to
+				// access the block prop.
+				// Ideally these blocks would rely on the clientId prop only.
+				// This is kept for backward compatibility reasons.
+				block,
+				name: blockName,
+				attributes,
+				isValid,
+				isSelected: _isSelected,
+				themeSupportsLayout: supportsLayout,
+				isTemporarilyEditingAsBlocks:
+					__unstableGetTemporarilyEditingAsBlocks() === clientId,
+				blockEditingMode: getBlockEditingMode( clientId ),
+				mayDisplayControls:
+					_isSelected ||
+					( isFirstMultiSelectedBlock( clientId ) &&
+						getMultiSelectedBlockClientIds().every(
+							( id ) => getBlockName( id ) === blockName
+						) ),
+				mayDisplayParentControls:
+					_hasBlockSupport(
+						getBlockName( clientId ),
+						'__experimentalExposeControlsToChildren',
+						false
+					) && hasSelectedInnerBlock( clientId ),
+				index: getBlockIndex( clientId ),
+				blockApiVersion: blockType?.apiVersion || 1,
+				blockTitle: match?.title || blockType?.title,
+				isSubtreeDisabled: isBlockSubtreeDisabled( clientId ),
+				isOutlineEnabled: outlineMode,
+				hasOverlay: __unstableHasActiveBlockOverlayActive( clientId ),
+				initialPosition:
+					_isSelected && __unstableGetEditorMode() === 'edit'
+						? getSelectedBlocksInitialCaretPosition()
+						: undefined,
+				isHighlighted: isBlockHighlighted( clientId ),
+				isMultiSelected,
+				isPartiallySelected:
+					isMultiSelected &&
+					! __unstableIsFullySelected() &&
+					! __unstableSelectionHasUnmergeableBlock(),
+				isReusable: isReusableBlock( blockType ),
+				isDragging: isBlockBeingDragged( clientId ),
+				hasChildSelected: isAncestorOfSelectedBlock,
+				removeOutline: _isSelected && outlineMode && typing,
+				isBlockMovingMode: !! movingClientId,
+				canInsertMovingBlock:
+					movingClientId &&
+					canInsertBlockType(
+						getBlockName( movingClientId ),
+						getBlockRootClientId( clientId )
+					),
+				isEditingDisabled:
+					getBlockEditingMode( clientId ) === 'disabled',
+				className: hasLightBlockWrapper
+					? attributes.className
+					: undefined,
+				defaultClassName: hasLightBlockWrapper
+					? getBlockDefaultClassName( blockName )
+					: undefined,
+			};
+		},
+		[ clientId, rootClientId ]
+	);
+
+	const {
+		mode,
+		isSelectionEnabled,
+		isLocked,
+		canRemove,
+		canMove,
+		block,
+		name,
+		attributes,
+		isValid,
+		isSelected,
+		themeSupportsLayout,
+		isTemporarilyEditingAsBlocks,
+		blockEditingMode,
+		mayDisplayControls,
+		mayDisplayParentControls,
+		index,
+		blockApiVersion,
+		blockTitle,
+		isSubtreeDisabled,
+		isOutlineEnabled,
+		hasOverlay,
+		initialPosition,
+		isHighlighted,
+		isMultiSelected,
+		isPartiallySelected,
+		isReusable,
+		isDragging,
+		hasChildSelected,
+		removeOutline,
+		isBlockMovingMode,
+		canInsertMovingBlock,
+		isEditingDisabled,
+		className,
+		defaultClassName,
+	} = selectedProps;
+
+	// Block is sometimes not mounted at the right time, causing it be
+	// undefined see issue for more info
+	// https://github.com/WordPress/gutenberg/issues/17013
+	if ( ! selectedProps ) {
+		return null;
+	}
+
+	const privateContext = {
+		clientId,
+		className,
+		index,
+		mode,
+		name,
+		blockApiVersion,
+		blockTitle,
+		isSelected,
+		isSubtreeDisabled,
+		isOutlineEnabled,
+		hasOverlay,
+		initialPosition,
+		blockEditingMode,
+		isHighlighted,
+		isMultiSelected,
+		isPartiallySelected,
+		isReusable,
+		isDragging,
+		hasChildSelected,
+		removeOutline,
+		isBlockMovingMode,
+		canInsertMovingBlock,
+		isEditingDisabled,
+		isTemporarilyEditingAsBlocks,
+		defaultClassName,
+		mayDisplayControls,
+		mayDisplayParentControls,
+		themeSupportsLayout,
+	};
+
+	// Here we separate between the props passed to BlockListBlock and any other
+	// information we selected for internal use. BlockListBlock is a filtered
+	// component and thus ALL the props are PUBLIC API.
+
+	// Note that the context value doesn't have to be memoized in this case
+	// because when it changes, this component will be re-rendered anyway, and
+	// none of the consumers (BlockListBlock and useBlockProps) are memoized or
+	// "pure". This is different from the public BlockEditContext, where
+	// consumers might be memoized or "pure".
+	return (
+		<PrivateBlockContext.Provider value={ privateContext }>
+			<BlockListBlock
+				{ ...props }
+				// WARNING: all the following props are public API (through the
+				// editor.BlockListBlock filter) and normally nothing new should
+				// be added to it.
+				{ ...{
+					mode,
+					isSelectionEnabled,
+					isLocked,
+					canRemove,
+					canMove,
+					// Users of the editor.BlockListBlock filter used to be able
+					// to access the block prop. Ideally these blocks would rely
+					// on the clientId prop only. This is kept for backward
+					// compatibility reasons.
+					block,
+					name,
+					attributes,
+					isValid,
+					isSelected,
+				} }
+			/>
+		</PrivateBlockContext.Provider>
+	);
+}
+
+export default pure( BlockListBlockProvider );

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

@@ -2,16 +2,18 @@
  * External dependencies
  */
 import { Pressable, View } from 'react-native';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { useCallback, useMemo, useState } from '@wordpress/element';
+import { useCallback, useMemo, useState, useRef } from '@wordpress/element';
 import {
 	GlobalStylesContext,
 	getMergedGlobalStyles,
 	useMobileGlobalStylesColors,
 	useGlobalStyles,
+	withFilters,
 } from '@wordpress/components';
 import {
 	__experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel,
@@ -38,24 +40,41 @@ import BlockInvalidWarning from './block-invalid-warning';
 import BlockOutline from './block-outline';
 import { store as blockEditorStore } from '../../store';
 import { useLayout } from './layout';
+import useScrollUponInsertion from './use-scroll-upon-insertion';
 import { useSettings } from '../use-settings';
 
 const EMPTY_ARRAY = [];
 
-// Helper function to memoize the wrapperProps since getEditWrapperProps always returns a new reference.
-const wrapperPropsCache = new WeakMap();
-const emptyObj = {};
-function getWrapperProps( value, getWrapperPropsFunction ) {
-	if ( ! getWrapperPropsFunction ) {
-		return emptyObj;
+/**
+ * Merges wrapper props with special handling for classNames and styles.
+ *
+ * @param {Object} propsA
+ * @param {Object} propsB
+ *
+ * @return {Object} Merged props.
+ */
+function mergeWrapperProps( propsA, propsB ) {
+	const newProps = {
+		...propsA,
+		...propsB,
+	};
+
+	// May be set to undefined, so check if the property is set!
+	if (
+		propsA?.hasOwnProperty( 'className' ) &&
+		propsB?.hasOwnProperty( 'className' )
+	) {
+		newProps.className = classnames( propsA.className, propsB.className );
 	}
-	const cachedValue = wrapperPropsCache.get( value );
-	if ( ! cachedValue ) {
-		const wrapperProps = getWrapperPropsFunction( value );
-		wrapperPropsCache.set( value, wrapperProps );
-		return wrapperProps;
+
+	if (
+		propsA?.hasOwnProperty( 'style' ) &&
+		propsB?.hasOwnProperty( 'style' )
+	) {
+		newProps.style = { ...propsA.style, ...propsB.style };
 	}
-	return cachedValue;
+
+	return newProps;
 }
 
 function BlockWrapper( {
@@ -85,6 +104,18 @@ function BlockWrapper( {
 	];
 	const accessible = ! ( isSelected || isDescendentBlockSelected );
 
+	const ref = useRef();
+	const [ isLayoutCalculated, setIsLayoutCalculated ] = useState();
+	useScrollUponInsertion( {
+		clientId,
+		isSelected,
+		isLayoutCalculated,
+		elementRef: ref,
+	} );
+	const onLayout = useCallback( () => {
+		setIsLayoutCalculated( true );
+	}, [] );
+
 	return (
 		<Pressable
 			accessibilityLabel={ accessibilityLabel }
@@ -93,6 +124,8 @@ function BlockWrapper( {
 			disabled={ ! isTouchable }
 			onPress={ onFocus }
 			style={ blockWrapperStyle }
+			ref={ ref }
+			onLayout={ onLayout }
 		>
 			<BlockOutline
 				blockCategory={ blockCategory }
@@ -136,6 +169,7 @@ function BlockListBlock( {
 	rootClientId,
 	setAttributes,
 	toggleSelection,
+	wrapperProps,
 } ) {
 	const {
 		baseGlobalStyles,
@@ -252,12 +286,11 @@ function BlockListBlock( {
 		[ blockWidth, setBlockWidth ]
 	);
 
-	// Block level styles.
-	let wrapperProps = {};
+	// Determine whether the block has props to apply to the wrapper.
 	if ( blockType?.getEditWrapperProps ) {
-		wrapperProps = getWrapperProps(
-			attributes,
-			blockType.getEditWrapperProps
+		wrapperProps = mergeWrapperProps(
+			wrapperProps,
+			blockType.getEditWrapperProps( attributes )
 		);
 	}
 
@@ -266,7 +299,7 @@ function BlockListBlock( {
 		return getMergedGlobalStyles(
 			baseGlobalStyles,
 			globalStyle,
-			wrapperProps.style,
+			wrapperProps?.style,
 			attributes,
 			defaultColors,
 			name,
@@ -284,7 +317,7 @@ function BlockListBlock( {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		JSON.stringify( globalStyle ),
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-		JSON.stringify( wrapperProps.style ),
+		JSON.stringify( wrapperProps?.style ),
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		JSON.stringify(
 			Object.fromEntries(
@@ -651,5 +684,6 @@ export default compose(
 	// Block is sometimes not mounted at the right time, causing it be undefined
 	// see issue for more info
 	// https://github.com/WordPress/gutenberg/issues/17013
-	ifCondition( ( { block } ) => !! block )
+	ifCondition( ( { block } ) => !! block ),
+	withFilters( 'editor.BlockListBlock' )
 )( BlockListBlock );

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

@@ -17,6 +17,20 @@
 	}
 }
 
+
+// Hide selections on this element, otherwise Safari will include it stacked
+// under your actual selection.
+// This uses a CSS hack to show the rules to Safari only. Failing here is okay,
+// it just makes the selection indication slightly less precise. That makes this
+// hack a progressive enhancement. Stylelint is disabled to allow the hack to work.
+/* 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; 
+}
+/* stylelint-enable */
+
+
 // Note to developers refactoring this, please test navigation mode, and
 // multi selection and hovering the block switcher to highlight the block.
 // Also be sure to test partial selections in Safari, as it draws the
@@ -24,16 +38,6 @@
 .block-editor-block-list__layout {
 	position: relative;
 
-	// Hide selections on this element, otherwise Safari will include it stacked
-	// under your actual selection.
-	&::selection {
-		background: transparent;
-	}
-
-	.has-multi-selection &::selection {
-		background: transparent;
-	}
-
 	// Block multi selection
 	// Apply a rounded radius to the entire block when multi selected, but with low specificity
 	// so explicit radii set by tools are preserved.

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

@@ -139,7 +139,7 @@ export default function BlockList( {
 		insertBlock( newBlock, blockCount );
 	};
 
-	const scrollViewRef = useRef( null );
+	const scrollRef = useRef( null );
 
 	const shouldFlatListPreventAutomaticScroll = () =>
 		blockInsertionPointIsVisible;
@@ -239,7 +239,7 @@ export default function BlockList( {
 				<BlockListProvider
 					value={ {
 						...DEFAULT_BLOCK_LIST_CONTEXT,
-						scrollRef: scrollViewRef.current,
+						scrollRef: scrollRef.current,
 					} }
 				>
 					<BlockDraggableWrapper isRTL={ isRTL }>
@@ -249,9 +249,7 @@ export default function BlockList( {
 									? { 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"
-								innerRef={ ( ref ) => {
-									scrollViewRef.current = ref;
-								} }
+								ref={ scrollRef }
 								extraScrollHeight={ extraScrollHeight }
 								keyboardShouldPersistTaps="always"
 								scrollViewStyle={ { flex: 1 } }

package/src/components/block-list/{block-list-block-context.js → private-block-context.js}

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