@wordpress/block-editor 12.16.0 → 12.17.0

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

@@ -8,22 +8,15 @@ import classnames from 'classnames';
  */
 import { useContext } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	__unstableGetBlockProps as getBlockProps,
-	getBlockType,
-	isReusableBlock,
-	getBlockDefaultClassName,
-	store as blocksStore,
-} from '@wordpress/blocks';
+import { __unstableGetBlockProps as getBlockProps } from '@wordpress/blocks';
 import { useMergeRefs, useDisabled } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
 import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
  */
 import useMovingAnimation from '../../use-moving-animation';
-import { BlockListBlockContext } from '../block-list-block-context';
+import { PrivateBlockContext } from '../private-block-context';
 import { useFocusFirstElement } from './use-focus-first-element';
 import { useIsHovered } from './use-is-hovered';
 import { useBlockEditContext } from '../../block-edit/context';
@@ -32,14 +25,6 @@ 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 { store as blockEditorStore } from '../../../store';
-import { unlock } from '../../../lock-unlock';
-
-/**
- * If the block count exceeds the threshold, we disable the reordering animation
- * to avoid laginess.
- */
-const BLOCK_ANIMATION_THRESHOLD = 200;
 
 /**
  * This hook is used to lightly mark an element as a block element. The element
@@ -89,119 +74,30 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		className,
 		wrapperProps = {},
 		isAligned,
-	} = useContext( BlockListBlockContext );
-	const {
 		index,
 		mode,
 		name,
 		blockApiVersion,
 		blockTitle,
 		isSelected,
-		isPartOfSelection,
-		adjustScrolling,
-		enableAnimation,
 		isSubtreeDisabled,
 		isOutlineEnabled,
 		hasOverlay,
 		initialPosition,
-		classNames,
-	} = useSelect(
-		( select ) => {
-			const {
-				getBlockAttributes,
-				getBlockIndex,
-				getBlockMode,
-				getBlockName,
-				isTyping,
-				getGlobalBlockCount,
-				isBlockSelected,
-				isBlockMultiSelected,
-				isAncestorMultiSelected,
-				isFirstMultiSelectedBlock,
-				isBlockSubtreeDisabled,
-				getSettings,
-				isBlockHighlighted,
-				__unstableIsFullySelected,
-				__unstableSelectionHasUnmergeableBlock,
-				isBlockBeingDragged,
-				hasSelectedInnerBlock,
-				hasBlockMovingClientId,
-				canInsertBlockType,
-				getBlockRootClientId,
-				__unstableHasActiveBlockOverlayActive,
-				__unstableGetEditorMode,
-				getSelectedBlocksInitialCaretPosition,
-			} = unlock( select( blockEditorStore ) );
-			const { getActiveBlockVariation } = select( blocksStore );
-			const _isSelected = isBlockSelected( clientId );
-			const isPartOfMultiSelection =
-				isBlockMultiSelected( clientId ) ||
-				isAncestorMultiSelected( clientId );
-			const blockName = getBlockName( clientId );
-			const blockType = getBlockType( blockName );
-			const attributes = getBlockAttributes( clientId );
-			const match = getActiveBlockVariation( blockName, attributes );
-			const { outlineMode } = 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 {
-				index: getBlockIndex( clientId ),
-				mode: getBlockMode( clientId ),
-				name: blockName,
-				blockApiVersion: blockType?.apiVersion || 1,
-				blockTitle: match?.title || blockType?.title,
-				isSelected: _isSelected,
-				isPartOfSelection: _isSelected || isPartOfMultiSelection,
-				adjustScrolling:
-					_isSelected || isFirstMultiSelectedBlock( clientId ),
-				enableAnimation:
-					! typing &&
-					getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD,
-				isSubtreeDisabled: isBlockSubtreeDisabled( clientId ),
-				isOutlineEnabled: outlineMode,
-				hasOverlay: __unstableHasActiveBlockOverlayActive( clientId ),
-				initialPosition:
-					_isSelected && __unstableGetEditorMode() === 'edit'
-						? getSelectedBlocksInitialCaretPosition()
-						: undefined,
-				classNames: classnames(
-					{
-						'is-selected': _isSelected,
-						'is-highlighted': isBlockHighlighted( clientId ),
-						'is-multi-selected': isMultiSelected,
-						'is-partially-selected':
-							isMultiSelected &&
-							! __unstableIsFullySelected() &&
-							! __unstableSelectionHasUnmergeableBlock(),
-						'is-reusable': isReusableBlock( blockType ),
-						'is-dragging': isBlockBeingDragged( clientId ),
-						'has-child-selected': isAncestorOfSelectedBlock,
-						'remove-outline': _isSelected && outlineMode && typing,
-						'is-block-moving-mode': !! movingClientId,
-						'can-insert-moving-block':
-							movingClientId &&
-							canInsertBlockType(
-								getBlockName( movingClientId ),
-								getBlockRootClientId( clientId )
-							),
-					},
-					hasLightBlockWrapper ? attributes.className : undefined,
-					hasLightBlockWrapper
-						? getBlockDefaultClassName( blockName )
-						: undefined
-				),
-			};
-		},
-		[ clientId ]
-	);
+		blockEditingMode,
+		isHighlighted,
+		isMultiSelected,
+		isPartiallySelected,
+		isReusable,
+		isDragging,
+		hasChildSelected,
+		removeOutline,
+		isBlockMovingMode,
+		canInsertMovingBlock,
+		isEditingDisabled,
+		isTemporarilyEditingAsBlocks,
+		defaultClassName,
+	} = useContext( PrivateBlockContext );
 
 	// translators: %s: Type of block (i.e. Text, Image etc)
 	const blockLabel = sprintf( __( 'Block: %s' ), blockTitle );
@@ -215,12 +111,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		useNavModeExit( clientId ),
 		useIsHovered( { isEnabled: isOutlineEnabled } ),
 		useIntersectionObserver(),
-		useMovingAnimation( {
-			isSelected: isPartOfSelection,
-			adjustScrolling,
-			enableAnimation,
-			triggerAnimationOnChange: index,
-		} ),
+		useMovingAnimation( { triggerAnimationOnChange: index, clientId } ),
 		useDisabled( { isDisabled: ! hasOverlay } ),
 	] );
 
@@ -233,7 +124,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	}
 
 	return {
-		tabIndex: 0,
+		tabIndex: blockEditingMode === 'disabled' ? -1 : 0,
 		...wrapperProps,
 		...props,
 		ref: mergedRefs,
@@ -250,11 +141,24 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				// The wp-block className is important for editor styles.
 				'wp-block': ! isAligned,
 				'has-block-overlay': hasOverlay,
+				'is-selected': isSelected,
+				'is-highlighted': isHighlighted,
+				'is-multi-selected': isMultiSelected,
+				'is-partially-selected': isPartiallySelected,
+				'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,
+				'is-content-locked-temporarily-editing-as-blocks':
+					isTemporarilyEditingAsBlocks,
 			},
 			className,
 			props.className,
 			wrapperProps.className,
-			classNames
+			defaultClassName
 		),
 		style: { ...wrapperProps.style, ...props.style },
 	};

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

@@ -28,6 +28,7 @@ export function useInBetweenInserter() {
 		getTemplateLock,
 		__unstableIsWithinBlockOverlay,
 		getBlockEditingMode,
+		getBlockName,
 	} = useSelect( blockEditorStore );
 	const { showInsertionPoint, hideInsertionPoint } =
 		useDispatch( blockEditorStore );
@@ -75,7 +76,9 @@ export function useInBetweenInserter() {
 
 				if (
 					getTemplateLock( rootClientId ) ||
-					getBlockEditingMode( rootClientId ) === 'disabled'
+					getBlockEditingMode( rootClientId ) === 'disabled' ||
+					( getBlockName( rootClientId ) === 'core/block' &&
+						window.__experimentalPatternPartialSyncing )
 				) {
 					return;
 				}

package/src/components/block-list/use-scroll-upon-insertion.native.js

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockListContext } from './block-list-context';
+import { store as blockEditorStore } from '../../store';
+
+const useScrollUponInsertion = ( {
+	clientId,
+	isSelected,
+	isLayoutCalculated,
+	elementRef,
+} ) => {
+	const { scrollRef } = useBlockListContext();
+	const wasBlockJustInserted = useSelect(
+		( select ) =>
+			!! select( blockEditorStore ).wasBlockJustInserted(
+				clientId,
+				'inserter_menu'
+			),
+		[ clientId ]
+	);
+	useEffect( () => {
+		const lastScrollTo = scrollRef?.lastScrollTo.current;
+		const alreadyScrolledTo = lastScrollTo?.clientId === clientId;
+		if (
+			alreadyScrolledTo ||
+			! isSelected ||
+			! scrollRef ||
+			! wasBlockJustInserted ||
+			! isLayoutCalculated
+		) {
+			return;
+		}
+		scrollRef.scrollToElement( elementRef );
+		lastScrollTo.clientId = clientId;
+	}, [
+		isSelected,
+		scrollRef,
+		wasBlockJustInserted,
+		elementRef,
+		isLayoutCalculated,
+		clientId,
+	] );
+};
+
+export default useScrollUponInsertion;

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

@@ -3,9 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { focus } from '@wordpress/dom';
 import { useReducer, useRef, useEffect } from '@wordpress/element';
-import { lock } from '@wordpress/icons';
+import { lock, unlock } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -13,45 +12,28 @@ import { lock } from '@wordpress/icons';
 import BlockLockModal from './modal';
 import useBlockLock from './use-block-lock';
 
-export default function BlockLockToolbar( { clientId, wrapperRef } ) {
-	const { canEdit, canMove, canRemove, canLock } = useBlockLock( clientId );
+export default function BlockLockToolbar( { clientId } ) {
+	const { canLock, isLocked } = useBlockLock( clientId );
 
 	const [ isModalOpen, toggleModal ] = useReducer(
 		( isActive ) => ! isActive,
 		false
 	);
 
-	const lockButtonRef = useRef( null );
-	const isFirstRender = useRef( true );
+	const hasLockButtonShown = useRef( false );
 
-	const shouldHideBlockLockUI =
-		! canLock || ( canEdit && canMove && canRemove );
-
-	// Restore focus manually on the first focusable element in the toolbar
-	// when the block lock modal is closed and the block is not locked anymore.
-	// See https://github.com/WordPress/gutenberg/issues/51447
+	// If the block lock button has been shown, we don't want to remove it
+	// from the toolbar until the toolbar is rendered again without it.
+	// Removing it beforehand can cause focus loss issues, such as when
+	// unlocking the block from the modal. It needs to return focus from
+	// whence it came, and to do that, we need to leave the button in the toolbar.
 	useEffect( () => {
-		if ( isFirstRender.current ) {
-			isFirstRender.current = false;
-			return;
-		}
-
-		if ( ! isModalOpen && shouldHideBlockLockUI ) {
-			focus.focusable
-				.find( wrapperRef.current, {
-					sequential: false,
-				} )
-				.find(
-					( element ) =>
-						element.tagName === 'BUTTON' &&
-						element !== lockButtonRef.current
-				)
-				?.focus();
+		if ( isLocked ) {
+			hasLockButtonShown.current = true;
 		}
-		// wrapperRef is a reference object and should be stable
-	}, [ isModalOpen, shouldHideBlockLockUI, wrapperRef ] );
+	}, [ isLocked ] );
 
-	if ( shouldHideBlockLockUI ) {
+	if ( ! canLock || ( ! isLocked && ! hasLockButtonShown.current ) ) {
 		return null;
 	}
 
@@ -59,9 +41,8 @@ export default function BlockLockToolbar( { clientId, wrapperRef } ) {
 		<>
 			<ToolbarGroup className="block-editor-block-lock-toolbar">
 				<ToolbarButton
-					ref={ lockButtonRef }
-					icon={ lock }
-					label={ __( 'Unlock' ) }
+					icon={ isLocked ? lock : unlock }
+					label={ isLocked ? __( 'Unlock' ) : __( 'Lock' ) }
 					onClick={ toggleModal }
 					aria-expanded={ isModalOpen }
 					aria-haspopup="dialog"

package/src/components/block-mover/README.md

@@ -4,11 +4,6 @@ Block movers allow moving blocks inside the editor using up and down buttons.
 
 ![Block mover screenshot](https://make.wordpress.org/core/files/2020/08/block-mover-screenshot.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

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

@@ -64,7 +64,7 @@ function BlockMover( { clientIds, hideDragHandle } ) {
 			} ) }
 		>
 			{ ! hideDragHandle && (
-				<BlockDraggable clientIds={ clientIds }>
+				<BlockDraggable clientIds={ clientIds } fadeWhenDisabled>
 					{ ( draggableProps ) => (
 						<Button
 							icon={ dragHandle }

package/src/components/block-parent-selector/README.md

@@ -8,11 +8,6 @@ In practice the BlockParentSelector component renders a <ToolbarButton /> compon
 
 ![Block parent selector test](https://make.wordpress.org/core/files/2020/09/block-parent-selector-test.gif)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

package/src/components/block-patterns-list/README.md

@@ -6,11 +6,6 @@ For more infos about blocks patterns, read [this](https://make.wordpress.org/cor
 
 ![Block patterns sidebar in WordPress 5.5](https://make.wordpress.org/core/files/2020/09/blocks-patterns-sidebar-in-wordpress-5-5.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

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

@@ -24,7 +24,7 @@ import { unlock } from '../../lock-unlock';
 import BlockPreview from '../block-preview';
 import InserterDraggableBlocks from '../inserter-draggable-blocks';
 import BlockPatternsPaging from '../block-patterns-paging';
-import { PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
+import { INSERTER_PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
 
 const {
 	CompositeV2: Composite,
@@ -78,7 +78,8 @@ function BlockPattern( {
 				>
 					<WithToolTip
 						showTooltip={
-							showTooltip && ! pattern.type !== PATTERN_TYPES.user
+							showTooltip &&
+							! pattern.type !== INSERTER_PATTERN_TYPES.user
 						}
 						title={ pattern.title }
 					>
@@ -97,7 +98,7 @@ function BlockPattern( {
 										{
 											'block-editor-block-patterns-list__list-item-synced':
 												pattern.type ===
-													PATTERN_TYPES.user &&
+													INSERTER_PATTERN_TYPES.user &&
 												! pattern.syncStatus,
 										}
 									) }
@@ -122,7 +123,8 @@ function BlockPattern( {
 							/>
 
 							<HStack className="block-editor-patterns__pattern-details">
-								{ pattern.type === PATTERN_TYPES.user &&
+								{ pattern.type ===
+									INSERTER_PATTERN_TYPES.user &&
 									! pattern.syncStatus && (
 										<div className="block-editor-patterns__pattern-icon-wrapper">
 											<Icon
@@ -132,7 +134,8 @@ function BlockPattern( {
 										</div>
 									) }
 								{ ( ! showTooltip ||
-									pattern.type === PATTERN_TYPES.user ) && (
+									pattern.type ===
+										INSERTER_PATTERN_TYPES.user ) && (
 									<div className="block-editor-block-patterns-list__item-title">
 										{ pattern.title }
 									</div>

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

@@ -138,11 +138,14 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 	const hasPossibleBlockVariationTransformations =
 		!! blockVariationTransformations?.length;
 	const hasPatternTransformation = !! patterns?.length && canRemove;
-	if (
-		! hasBlockStyles &&
-		! hasPossibleBlockTransformations &&
-		! hasPossibleBlockVariationTransformations
-	) {
+	const hasBlockOrBlockVariationTransforms =
+		hasPossibleBlockTransformations ||
+		hasPossibleBlockVariationTransformations;
+	const showDropdown =
+		hasBlockStyles ||
+		hasBlockOrBlockVariationTransforms ||
+		hasPatternTransformation;
+	if ( ! showDropdown ) {
 		return (
 			<ToolbarGroup>
 				<ToolbarButton
@@ -180,13 +183,6 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 				blocks.length
 		  );
 
-	const hasBlockOrBlockVariationTransforms =
-		hasPossibleBlockTransformations ||
-		hasPossibleBlockVariationTransformations;
-	const showDropDown =
-		hasBlockStyles ||
-		hasBlockOrBlockVariationTransforms ||
-		hasPatternTransformation;
 	return (
 		<ToolbarGroup>
 			<ToolbarItem>
@@ -218,54 +214,48 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 						} }
 						menuProps={ { orientation: 'both' } }
 					>
-						{ ( { onClose } ) =>
-							showDropDown && (
-								<div className="block-editor-block-switcher__container">
-									{ hasPatternTransformation && (
-										<PatternTransformationsMenu
-											blocks={ blocks }
-											patterns={ patterns }
-											onSelect={ (
+						{ ( { onClose } ) => (
+							<div className="block-editor-block-switcher__container">
+								{ hasPatternTransformation && (
+									<PatternTransformationsMenu
+										blocks={ blocks }
+										patterns={ patterns }
+										onSelect={ ( transformedBlocks ) => {
+											onPatternTransform(
 												transformedBlocks
-											) => {
-												onPatternTransform(
-													transformedBlocks
-												);
-												onClose();
-											} }
-										/>
-									) }
-									{ hasBlockOrBlockVariationTransforms && (
-										<BlockTransformationsMenu
-											className="block-editor-block-switcher__transforms__menugroup"
-											possibleBlockTransformations={
-												possibleBlockTransformations
-											}
-											possibleBlockVariationTransformations={
-												blockVariationTransformations
-											}
-											blocks={ blocks }
-											onSelect={ ( name ) => {
-												onBlockTransform( name );
-												onClose();
-											} }
-											onSelectVariation={ ( name ) => {
-												onBlockVariationTransform(
-													name
-												);
-												onClose();
-											} }
-										/>
-									) }
-									{ hasBlockStyles && (
-										<BlockStylesMenu
-											hoveredBlock={ blocks[ 0 ] }
-											onSwitch={ onClose }
-										/>
-									) }
-								</div>
-							)
-						}
+											);
+											onClose();
+										} }
+									/>
+								) }
+								{ hasBlockOrBlockVariationTransforms && (
+									<BlockTransformationsMenu
+										className="block-editor-block-switcher__transforms__menugroup"
+										possibleBlockTransformations={
+											possibleBlockTransformations
+										}
+										possibleBlockVariationTransformations={
+											blockVariationTransformations
+										}
+										blocks={ blocks }
+										onSelect={ ( name ) => {
+											onBlockTransform( name );
+											onClose();
+										} }
+										onSelectVariation={ ( name ) => {
+											onBlockVariationTransform( name );
+											onClose();
+										} }
+									/>
+								) }
+								{ hasBlockStyles && (
+									<BlockStylesMenu
+										hoveredBlock={ blocks[ 0 ] }
+										onSwitch={ onClose }
+									/>
+								) }
+							</div>
+						) }
 					</DropdownMenu>
 				) }
 			</ToolbarItem>

package/src/components/block-toolbar/README.md

@@ -6,11 +6,6 @@ The `BlockToolbar` component is used to render a toolbar that serves as a wrappe
 
 ![Image block toolbar](https://make.wordpress.org/core/files/2020/09/image-block-toolbar.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

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

@@ -175,8 +175,7 @@ export function PrivateBlockToolbar( {
 								<BlockSwitcher clientIds={ blockClientIds } />
 								{ ! isMultiToolbar && (
 									<BlockLockToolbar
-										clientId={ blockClientIds[ 0 ] }
-										wrapperRef={ toolbarWrapperRef }
+										clientId={ blockClientId }
 									/>
 								) }
 								<BlockMover

package/src/components/block-tools/block-toolbar-popover.js

@@ -38,16 +38,10 @@ export default function BlockToolbarPopover( {
 	const { stopTyping } = useDispatch( blockEditorStore );
 	const isToolbarForced = useRef( false );
 
-	useShortcut(
-		'core/block-editor/focus-toolbar',
-		() => {
-			isToolbarForced.current = true;
-			stopTyping( true );
-		},
-		{
-			isDisabled: false,
-		}
-	);
+	useShortcut( 'core/block-editor/focus-toolbar', () => {
+		isToolbarForced.current = true;
+		stopTyping( true );
+	} );
 
 	useEffect( () => {
 		isToolbarForced.current = false;

package/src/components/block-types-list/README.md

@@ -10,11 +10,6 @@ This component is present in the block insertion tab, the reusable blocks tab an
 
 ![Block types list in the quick inserter modal](https://make.wordpress.org/core/files/2020/09/block-types-list-emplacement-3.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

package/src/components/block-variation-picker/README.md

@@ -10,11 +10,6 @@ This component is currently used by "Columns" and "Query Loop" blocks.
 
 ![Columns block variations](https://make.wordpress.org/core/files/2020/09/colums-block-variations.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage