@wordpress/block-editor 12.0.0 → 12.2.0

package/src/autocompleters/block.js

@@ -16,6 +16,7 @@ import useBlockTypesState from '../components/inserter/hooks/use-block-types-sta
 import BlockIcon from '../components/block-icon';
 import { store as blockEditorStore } from '../store';
 import { orderBy } from '../utils/sorting';
+import { orderInserterBlockItems } from '../utils/order-inserter-block-items';
 
 const noop = () => {};
 const SHOWN_BLOCK_TYPES = 9;
@@ -34,23 +35,26 @@ function createBlockCompleter() {
 		triggerPrefix: '/',
 
 		useItems( filterValue ) {
-			const { rootClientId, selectedBlockName } = useSelect(
-				( select ) => {
+			const { rootClientId, selectedBlockName, prioritizedBlocks } =
+				useSelect( ( select ) => {
 					const {
 						getSelectedBlockClientId,
 						getBlockName,
 						getBlockInsertionPoint,
+						getBlockListSettings,
 					} = select( blockEditorStore );
 					const selectedBlockClientId = getSelectedBlockClientId();
+					const _rootClientId = getBlockInsertionPoint().rootClientId;
 					return {
 						selectedBlockName: selectedBlockClientId
 							? getBlockName( selectedBlockClientId )
 							: null,
-						rootClientId: getBlockInsertionPoint().rootClientId,
+						rootClientId: _rootClientId,
+						prioritizedBlocks:
+							getBlockListSettings( _rootClientId )
+								?.prioritizedInserterBlocks,
 					};
-				},
-				[]
-			);
+				}, [] );
 			const [ items, categories, collections ] = useBlockTypesState(
 				rootClientId,
 				noop
@@ -64,7 +68,10 @@ function createBlockCompleter() {
 							collections,
 							filterValue
 					  )
-					: orderBy( items, 'frecency', 'desc' );
+					: orderInserterBlockItems(
+							orderBy( items, 'frecency', 'desc' ),
+							prioritizedBlocks
+					  );
 
 				return initialFilteredItems
 					.filter( ( item ) => item.name !== selectedBlockName )
@@ -75,6 +82,7 @@ function createBlockCompleter() {
 				items,
 				categories,
 				collections,
+				prioritizedBlocks,
 			] );
 
 			const options = useMemo(

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

@@ -11,6 +11,7 @@ import { chevronRightSmall, Icon } from '@wordpress/icons';
  */
 import BlockTitle from '../block-title';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Block breadcrumb component, displaying the hierarchy of the current block selection as a breadcrumb.
@@ -22,11 +23,18 @@ import { store as blockEditorStore } from '../../store';
 function BlockBreadcrumb( { rootLabelText } ) {
 	const { selectBlock, clearSelectedBlock } = useDispatch( blockEditorStore );
 	const { clientId, parents, hasSelection } = useSelect( ( select ) => {
-		const { getSelectionStart, getSelectedBlockClientId, getBlockParents } =
-			select( blockEditorStore );
+		const {
+			getSelectionStart,
+			getSelectedBlockClientId,
+			getBlockParents,
+			getBlockEditingMode,
+		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientId = getSelectedBlockClientId();
 		return {
-			parents: getBlockParents( selectedBlockClientId ),
+			parents: getBlockParents( selectedBlockClientId ).filter(
+				( parentClientId ) =>
+					getBlockEditingMode( parentClientId ) !== 'disabled'
+			),
 			clientId: selectedBlockClientId,
 			hasSelection: !! getSelectionStart().clientId,
 		};

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

@@ -46,7 +46,8 @@
 		right: $border-width;
 		bottom: $border-width;
 		left: $border-width;
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+		@include button-style__focus();
 	}
 }
 

package/src/components/block-controls/slot.js

@@ -7,6 +7,7 @@ import {
 	ToolbarGroup,
 	__experimentalUseSlotFills as useSlotFills,
 } from '@wordpress/components';
+import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
@@ -15,11 +16,14 @@ import groups from './groups';
 
 export default function BlockControlsSlot( { group = 'default', ...props } ) {
 	const accessibleToolbarState = useContext( ToolbarContext );
-	const Slot = groups[ group ].Slot;
-	const fills = useSlotFills( Slot.__unstableName );
-	const hasFills = Boolean( fills && fills.length );
+	const Slot = groups[ group ]?.Slot;
+	const fills = useSlotFills( Slot?.__unstableName );
+	if ( ! Slot ) {
+		warning( `Unknown BlockControls group "${ group }" provided.` );
+		return null;
+	}
 
-	if ( ! hasFills ) {
+	if ( ! fills?.length ) {
 		return null;
 	}
 

package/src/components/block-controls/slot.native.js

@@ -6,6 +6,7 @@ import {
 	__experimentalToolbarContext as ToolbarContext,
 	ToolbarGroup,
 } from '@wordpress/components';
+import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
@@ -14,7 +15,11 @@ import groups from './groups';
 
 export default function BlockControlsSlot( { group = 'default', ...props } ) {
 	const accessibleToolbarState = useContext( ToolbarContext );
-	const Slot = groups[ group ].Slot;
+	const Slot = groups[ group ]?.Slot;
+	if ( ! Slot ) {
+		warning( `Unknown BlockControls group "${ group }" provided.` );
+		return null;
+	}
 
 	if ( group === 'default' ) {
 		return <Slot { ...props } fillProps={ accessibleToolbarState } />;

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

@@ -67,14 +67,18 @@ const BlockDraggable = ( {
 			__experimentalTransferDataType="wp-blocks"
 			transferData={ transferData }
 			onDragStart={ ( event ) => {
-				startDraggingBlocks( clientIds );
-				isDragging.current = true;
+				// Defer hiding the dragged source element to the next
+				// frame to enable dragging.
+				window.requestAnimationFrame( () => {
+					startDraggingBlocks( clientIds );
+					isDragging.current = true;
 
-				startScrolling( event );
+					startScrolling( event );
 
-				if ( onDragStart ) {
-					onDragStart();
-				}
+					if ( onDragStart ) {
+						onDragStart();
+					}
+				} );
 			} }
 			onDragOver={ scrollOnDragOver }
 			onDragEnd={ () => {

package/src/components/block-draggable/use-scroll-when-dragging.js

@@ -78,7 +78,10 @@ export default function useScrollWhenDragging() {
 					SCROLL_INACTIVE_DISTANCE_PX,
 				0
 			);
-			const distancePercentage = dragDistance / moveableDistance;
+			const distancePercentage =
+				moveableDistance === 0 || dragDistance === 0
+					? 0
+					: dragDistance / moveableDistance;
 			velocityY.current = VELOCITY_MULTIPLIER * distancePercentage;
 		} else if ( event.clientY < offsetDragStartPosition ) {
 			// User is dragging upwards.
@@ -92,7 +95,10 @@ export default function useScrollWhenDragging() {
 					SCROLL_INACTIVE_DISTANCE_PX,
 				0
 			);
-			const distancePercentage = dragDistance / moveableDistance;
+			const distancePercentage =
+				moveableDistance === 0 || dragDistance === 0
+					? 0
+					: dragDistance / moveableDistance;
 			velocityY.current = -VELOCITY_MULTIPLIER * distancePercentage;
 		} else {
 			velocityY.current = 0;

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

@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useContext, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import { BlockListBlockContext } from '../block-list/block-list-block-context';
+
+/**
+ * @typedef {'disabled'|'contentOnly'|'default'} BlockEditingMode
+ */
+
+/**
+ * Allows a block to restrict the user interface that is displayed for editing
+ * that block and its inner blocks.
+ *
+ * @example
+ * ```js
+ * function MyBlock( { attributes, setAttributes } ) {
+ *     useBlockEditingMode( 'disabled' );
+ *     return <div { ...useBlockProps() }></div>;
+ * }
+ * ```
+ *
+ * `mode` can be one of three options:
+ *
+ * - `'disabled'`: Prevents editing the block entirely, i.e. it cannot be
+ *   selected.
+ * - `'contentOnly'`: Hides all non-content UI, e.g. auxiliary controls in the
+ *   toolbar, the block movers, block settings.
+ * - `'default'`: Allows editing the block as normal.
+ *
+ * The mode is inherited by all of the block's inner blocks, unless they have
+ * their own mode.
+ *
+ * If called outside of a block context, the mode is applied to all blocks.
+ *
+ * @param {?BlockEditingMode} mode The editing mode to apply. If undefined, the
+ *                                 current editing mode is not changed.
+ *
+ * @return {BlockEditingMode} The current editing mode.
+ */
+export function useBlockEditingMode( mode ) {
+	const { clientId = '' } = useContext( BlockListBlockContext ) ?? {};
+	const blockEditingMode = useSelect(
+		( select ) =>
+			unlock( select( blockEditorStore ) ).getBlockEditingMode(
+				clientId
+			),
+		[ clientId ]
+	);
+	const { setBlockEditingMode, unsetBlockEditingMode } = unlock(
+		useDispatch( blockEditorStore )
+	);
+	useEffect( () => {
+		if ( mode ) {
+			setBlockEditingMode( clientId, mode );
+		}
+		return () => {
+			if ( mode ) {
+				unsetBlockEditingMode( clientId );
+			}
+		};
+	}, [ clientId, mode ] );
+	return blockEditingMode;
+}

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

@@ -8,7 +8,7 @@ import { TouchableWithoutFeedback } from 'react-native';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -16,22 +16,30 @@ import { createBlock } from '@wordpress/blocks';
 import Warning from '../warning';
 import { store as blockEditorStore } from '../../store';
 
-export default function BlockInvalidWarning( { blockTitle, icon, clientId } ) {
-	const accessibilityLabel = sprintf(
-		/* translators: accessibility text for blocks with invalid content. %d: localized block title */
-		__( '%s block. This block has invalid content' ),
-		blockTitle
-	);
-
+export default function BlockInvalidWarning( { clientId } ) {
 	const selector = ( select ) => {
 		const { getBlock } = select( blockEditorStore );
 		const block = getBlock( clientId );
+		const { name } = block || {};
+
+		const blockType = getBlockType( name || 'core/missing' );
+		const title = blockType?.title;
+		const blockIcon = blockType?.icon;
+
 		return {
 			block,
+			blockTitle: title,
+			icon: blockIcon,
 		};
 	};
 
-	const { block } = useSelect( selector, [ clientId ] );
+	const { block, blockTitle, icon } = useSelect( selector, [ clientId ] );
+
+	const accessibilityLabel = sprintf(
+		/* translators: accessibility text for blocks with invalid content. %d: localized block title */
+		__( '%s block. This block has invalid content' ),
+		blockTitle
+	);
 
 	const { replaceBlock } = useDispatch( blockEditorStore );
 

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

@@ -0,0 +1,6 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+export const BlockListBlockContext = createContext( null );

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

@@ -7,14 +7,23 @@ import { View } from 'react-native';
  * WordPress dependencies
  */
 import { useEffect, useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { useBlockListContext } from './block-list-context';
+import { store as blockEditorStore } from '../../store';
 
-function BlockListItemCell( { children, clientId, rootClientId, onLayout } ) {
+function BlockListItemCell( { children, item: clientId, onLayout } ) {
 	const { blocksLayouts, updateBlocksLayouts } = useBlockListContext();
+	const { rootClientId } = useSelect(
+		( select ) => {
+			const { getBlockRootClientId } = select( blockEditorStore );
+			return { rootClientId: getBlockRootClientId( clientId ) };
+		},
+		[ clientId ]
+	);
 
 	useEffect( () => {
 		return () => {