@wordpress/block-editor 12.15.0 → 12.16.0

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

@@ -18,38 +18,6 @@ import { store as blockEditorStore } from '../../../store';
 
 /** @typedef {import('@wordpress/element').RefObject} RefObject */
 
-/**
- * Returns the initial position if the block needs to be focussed, `undefined`
- * otherwise. The initial position is either 0 (start) or -1 (end).
- *
- * @param {string} clientId Block client ID.
- *
- * @return {number} The initial position, either 0 (start) or -1 (end).
- */
-function useInitialPosition( clientId ) {
-	return useSelect(
-		( select ) => {
-			const {
-				getSelectedBlocksInitialCaretPosition,
-				__unstableGetEditorMode,
-				isBlockSelected,
-			} = select( blockEditorStore );
-
-			if ( ! isBlockSelected( clientId ) ) {
-				return;
-			}
-
-			if ( __unstableGetEditorMode() !== 'edit' ) {
-				return;
-			}
-
-			// If there's no initial position, return 0 to focus the start.
-			return getSelectedBlocksInitialCaretPosition();
-		},
-		[ clientId ]
-	);
-}
-
 /**
  * Transitions focus to the block or inner tabbable when the block becomes
  * selected and an initial position is set.
@@ -58,9 +26,8 @@ function useInitialPosition( clientId ) {
  *
  * @return {RefObject} React ref with the block element.
  */
-export function useFocusFirstElement( clientId ) {
+export function useFocusFirstElement( { clientId, initialPosition } ) {
 	const ref = useRef();
-	const initialPosition = useInitialPosition( clientId );
 	const { isBlockSelected, isMultiSelecting } = useSelect( blockEditorStore );
 
 	useEffect( () => {

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

@@ -1,14 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../../store';
-
 function listener( event ) {
 	if ( event.defaultPrevented ) {
 		return;
@@ -20,16 +14,11 @@ function listener( event ) {
 	event.currentTarget.classList[ action ]( 'is-hovered' );
 }
 
-/**
+/*
  * Adds `is-hovered` class when the block is hovered and in navigation or
  * outline mode.
  */
-export function useIsHovered() {
-	const isEnabled = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().outlineMode;
-	}, [] );
-
+export function useIsHovered( { isEnabled } ) {
 	return useRefEffect(
 		( node ) => {
 			if ( isEnabled ) {

package/src/components/block-list/use-block-props/use-selected-block-event-handlers.js

@@ -19,11 +19,7 @@ import { store as blockEditorStore } from '../../../store';
  *
  * @param {string} clientId Block client ID.
  */
-export function useEventHandlers( clientId ) {
-	const isSelected = useSelect(
-		( select ) => select( blockEditorStore ).isBlockSelected( clientId ),
-		[ clientId ]
-	);
+export function useEventHandlers( { clientId, isSelected } ) {
 	const { getBlockRootClientId, getBlockIndex } =
 		useSelect( blockEditorStore );
 	const { insertDefaultBlock, removeBlock } = useDispatch( blockEditorStore );

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

@@ -56,7 +56,7 @@ function BlockPattern( {
 		<InserterDraggableBlocks
 			isEnabled={ isDraggable }
 			blocks={ blocks }
-			isPattern={ !! pattern }
+			pattern={ pattern }
 		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
 				<div

package/src/components/block-removal-warning-modal/index.js

@@ -8,7 +8,7 @@ import {
 	Button,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _n } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -48,22 +48,15 @@ export function BlockRemovalWarningModal( { rules } ) {
 
 	return (
 		<Modal
-			title={ __( 'Are you sure?' ) }
+			title={ __( 'Be careful!' ) }
 			onRequestClose={ clearBlockRemovalPrompt }
 		>
-			{ blockNamesForPrompt.length === 1 ? (
-				<p>{ rules[ blockNamesForPrompt[ 0 ] ] }</p>
-			) : (
-				<ul style={ { listStyleType: 'disc', paddingLeft: '1rem' } }>
-					{ blockNamesForPrompt.map( ( name ) => (
-						<li key={ name }>{ rules[ name ] }</li>
-					) ) }
-				</ul>
-			) }
 			<p>
-				{ blockNamesForPrompt.length > 1
-					? __( 'Removing these blocks is not advised.' )
-					: __( 'Removing this block is not advised.' ) }
+				{ _n(
+					'Post or page content will not be displayed if you delete this block.',
+					'Post or page content will not be displayed if you delete these blocks.',
+					blockNamesForPrompt.length
+				) }
 			</p>
 			<HStack justify="right">
 				<Button variant="tertiary" onClick={ clearBlockRemovalPrompt }>

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

@@ -88,6 +88,7 @@ export default function BlockRenameModal( {
 				<VStack spacing="3">
 					<TextControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ editedBlockName }
 						label={ __( 'Block name' ) }
 						hideLabelFromVision={ true }
@@ -96,11 +97,16 @@ export default function BlockRenameModal( {
 						onFocus={ autoSelectInputText }
 					/>
 					<HStack justify="right">
-						<Button variant="tertiary" onClick={ onClose }>
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ onClose }
+						>
 							{ __( 'Cancel' ) }
 						</Button>
 
 						<Button
+							__next40pxDefaultSize
 							aria-disabled={ ! isNameValid }
 							variant="primary"
 							type="submit"

package/src/components/block-settings/container.native.js

@@ -1,15 +1,10 @@
 /**
  * WordPress dependencies
  */
-import {
-	InspectorControls,
-	useMultipleOriginColorsAndGradients,
-} from '@wordpress/block-editor';
 import {
 	BottomSheet,
 	ColorSettings,
 	FocalPointSettingsPanel,
-	ImageLinkDestinationsScreen,
 	LinkPickerScreen,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -18,6 +13,9 @@ import { useDispatch, useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import styles from './container.native.scss';
+import InspectorControls from '../inspector-controls';
+import ImageLinkDestinationsScreen from '../image-link-destinations';
+import useMultipleOriginColorsAndGradients from '../colors-gradients/use-multiple-origin-colors-and-gradients';
 
 export const blockSettingsScreens = {
 	settings: 'Settings',

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

@@ -98,7 +98,7 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 			{ hoveredStyle && ! isMobileViewport && (
 				<Popover
 					placement="left-start"
-					offset={ 20 }
+					offset={ 34 }
 					focusOnMount={ false }
 				>
 					<div

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

@@ -19,14 +19,16 @@ import StylePreview from './preview';
 import containerStyles from './style.scss';
 import { store as blockEditorStore } from '../../store';
 
+const EMPTY_ARRAY = [];
+
 function BlockStyles( { clientId, url } ) {
 	const selector = ( select ) => {
 		const { getBlock } = select( blockEditorStore );
 		const { getBlockStyles } = select( blocksStore );
 		const block = getBlock( clientId );
 		return {
-			styles: getBlockStyles( block.name ),
-			className: block.attributes.className || '',
+			styles: getBlockStyles( block?.name ) || EMPTY_ARRAY,
+			className: block?.attributes?.className || '',
 		};
 	};
 

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

@@ -12,17 +12,6 @@
 		display: block;
 	}
 
-	// Overrides for InserterPreviewPanel.
-	.block-editor-inserter__preview-container {
-		left: auto;
-		right: auto;
-		top: auto;
-		position: static;
-	}
-
-	.block-editor-block-card__title.block-editor-block-card__title {
-		margin: 0;
-	}
 	.block-editor-block-icon {
 		display: none;
 	}

package/src/components/block-switcher/test/__snapshots__/index.js.snap

@@ -25,7 +25,9 @@ exports[`BlockSwitcherDropdownMenu should render disabled block switcher with mu
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M20.2 8v11c0 .7-.6 1.2-1.2 1.2H6v1.5h13c1.5 0 2.7-1.2 2.7-2.8V8zM18 16.4V4.6c0-.9-.7-1.6-1.6-1.6H4.6C3.7 3 3 3.7 3 4.6v11.8c0 .9.7 1.6 1.6 1.6h11.8c.9 0 1.6-.7 1.6-1.6zm-13.5 0V4.6c0-.1.1-.1.1-.1h11.8c.1 0 .1.1.1.1v11.8c0 .1-.1.1-.1.1H4.6l-.1-.1z"
+              clip-rule="evenodd"
+              d="M5 4.5h11a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V5a.5.5 0 0 1 .5-.5ZM3 5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm17 3v10.75c0 .69-.56 1.25-1.25 1.25H6v1.5h12.75a2.75 2.75 0 0 0 2.75-2.75V8H20Z"
+              fill-rule="evenodd"
             />
           </svg>
         </span>

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

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
@@ -32,38 +33,82 @@ import BlockEditVisuallyButton from '../block-edit-visually-button';
 import { useShowHoveredOrFocusedGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
+import NavigableToolbar from '../navigable-toolbar';
+import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls';
 
-const BlockToolbar = ( { hideDragHandle } ) => {
-	const { blockClientIds, blockType, isValid, isVisual, blockEditingMode } =
-		useSelect( ( select ) => {
-			const {
-				getBlockName,
-				getBlockMode,
-				getSelectedBlockClientIds,
-				isBlockValid,
-				getBlockRootClientId,
-				getBlockEditingMode,
-			} = select( blockEditorStore );
-			const selectedBlockClientIds = getSelectedBlockClientIds();
-			const selectedBlockClientId = selectedBlockClientIds[ 0 ];
-			const blockRootClientId = getBlockRootClientId(
-				selectedBlockClientId
-			);
-			return {
-				blockClientIds: selectedBlockClientIds,
-				blockType:
-					selectedBlockClientId &&
-					getBlockType( getBlockName( selectedBlockClientId ) ),
-				rootClientId: blockRootClientId,
-				isValid: selectedBlockClientIds.every( ( id ) =>
-					isBlockValid( id )
-				),
-				isVisual: selectedBlockClientIds.every(
-					( id ) => getBlockMode( id ) === 'visual'
-				),
-				blockEditingMode: getBlockEditingMode( selectedBlockClientId ),
-			};
-		}, [] );
+/**
+ * Renders the block toolbar.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-toolbar/README.md
+ *
+ * @param {Object}   props                             Components props.
+ * @param {boolean}  props.hideDragHandle              Show or hide the Drag Handle for drag and drop functionality.
+ * @param {boolean}  props.focusOnMount                Focus the toolbar when mounted.
+ * @param {number}   props.__experimentalInitialIndex  The initial index of the toolbar item to focus.
+ * @param {Function} props.__experimentalOnIndexChange Callback function to be called when the index of the focused toolbar item changes.
+ * @param {string}   props.variant                     Style variant of the toolbar, also passed to the Dropdowns rendered from Block Toolbar Buttons.
+ */
+export function PrivateBlockToolbar( {
+	hideDragHandle,
+	focusOnMount,
+	__experimentalInitialIndex,
+	__experimentalOnIndexChange,
+	variant = 'unstyled',
+} ) {
+	const {
+		blockClientId,
+		blockClientIds,
+		isDefaultEditingMode,
+		blockType,
+		shouldShowVisualToolbar,
+		showParentSelector,
+	} = useSelect( ( select ) => {
+		const {
+			getBlockName,
+			getBlockMode,
+			getBlockParents,
+			getSelectedBlockClientIds,
+			isBlockValid,
+			getBlockRootClientId,
+			getBlockEditingMode,
+		} = select( blockEditorStore );
+		const selectedBlockClientIds = getSelectedBlockClientIds();
+		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
+		const blockRootClientId = getBlockRootClientId( selectedBlockClientId );
+		const parents = getBlockParents( selectedBlockClientId );
+		const firstParentClientId = parents[ parents.length - 1 ];
+		const parentBlockName = getBlockName( firstParentClientId );
+		const parentBlockType = getBlockType( parentBlockName );
+		const _isDefaultEditingMode =
+			getBlockEditingMode( selectedBlockClientId ) === 'default';
+		const isValid = selectedBlockClientIds.every( ( id ) =>
+			isBlockValid( id )
+		);
+		const isVisual = selectedBlockClientIds.every(
+			( id ) => getBlockMode( id ) === 'visual'
+		);
+		return {
+			blockClientId: selectedBlockClientId,
+			blockClientIds: selectedBlockClientIds,
+			isDefaultEditingMode: _isDefaultEditingMode,
+			blockType:
+				selectedBlockClientId &&
+				getBlockType( getBlockName( selectedBlockClientId ) ),
+
+			shouldShowVisualToolbar: isValid && isVisual,
+			rootClientId: blockRootClientId,
+			showParentSelector:
+				parentBlockType &&
+				getBlockEditingMode( firstParentClientId ) === 'default' &&
+				hasBlockSupport(
+					parentBlockType,
+					'__experimentalParentSelector',
+					true
+				) &&
+				selectedBlockClientIds.length === 1 &&
+				_isDefaultEditingMode,
+		};
+	}, [] );
 
 	const toolbarWrapperRef = useRef( null );
 
@@ -76,86 +121,126 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 
 	const isLargeViewport = ! useViewportMatch( 'medium', '<' );
 
-	if ( blockType ) {
-		if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {
-			return null;
-		}
-	}
+	const isToolbarEnabled =
+		blockType &&
+		hasBlockSupport( blockType, '__experimentalToolbar', true );
+	const hasAnyBlockControls = useHasAnyBlockControls();
 
-	if ( blockClientIds.length === 0 ) {
+	if (
+		! isToolbarEnabled ||
+		( ! isDefaultEditingMode && ! hasAnyBlockControls )
+	) {
 		return null;
 	}
 
-	const shouldShowVisualToolbar = isValid && isVisual;
 	const isMultiToolbar = blockClientIds.length > 1;
 	const isSynced =
 		isReusableBlock( blockType ) || isTemplatePart( blockType );
 
-	const classes = classnames( 'block-editor-block-toolbar', {
+	// Shifts the toolbar to make room for the parent block selector.
+	const classes = classnames( 'block-editor-block-contextual-toolbar', {
+		'has-parent': showParentSelector,
+	} );
+
+	const innerClasses = classnames( 'block-editor-block-toolbar', {
 		'is-synced': isSynced,
 	} );
 
 	return (
-		<div className={ classes } ref={ toolbarWrapperRef }>
-			{ ! isMultiToolbar &&
-				isLargeViewport &&
-				blockEditingMode === 'default' && <BlockParentSelector /> }
-			{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
-				blockEditingMode === 'default' && (
-					<div ref={ nodeRef } { ...showHoveredOrFocusedGestures }>
-						<ToolbarGroup className="block-editor-block-toolbar__block-controls">
-							<BlockSwitcher clientIds={ blockClientIds } />
-							{ ! isMultiToolbar && (
-								<BlockLockToolbar
-									clientId={ blockClientIds[ 0 ] }
-									wrapperRef={ toolbarWrapperRef }
+		<NavigableToolbar
+			focusEditorOnEscape
+			className={ classes }
+			/* translators: accessibility text for the block toolbar */
+			aria-label={ __( 'Block tools' ) }
+			// The variant is applied as "toolbar" when undefined, which is the black border style of the dropdown from the toolbar popover.
+			variant={ variant === 'toolbar' ? undefined : variant }
+			focusOnMount={ focusOnMount }
+			__experimentalInitialIndex={ __experimentalInitialIndex }
+			__experimentalOnIndexChange={ __experimentalOnIndexChange }
+			// Resets the index whenever the active block changes so
+			// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
+			key={ blockClientId }
+		>
+			<div ref={ toolbarWrapperRef } className={ innerClasses }>
+				{ ! isMultiToolbar &&
+					isLargeViewport &&
+					isDefaultEditingMode && <BlockParentSelector /> }
+				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
+					isDefaultEditingMode && (
+						<div
+							ref={ nodeRef }
+							{ ...showHoveredOrFocusedGestures }
+						>
+							<ToolbarGroup className="block-editor-block-toolbar__block-controls">
+								<BlockSwitcher clientIds={ blockClientIds } />
+								{ ! isMultiToolbar && (
+									<BlockLockToolbar
+										clientId={ blockClientIds[ 0 ] }
+										wrapperRef={ toolbarWrapperRef }
+									/>
+								) }
+								<BlockMover
+									clientIds={ blockClientIds }
+									hideDragHandle={ hideDragHandle }
 								/>
-							) }
-							<BlockMover
-								clientIds={ blockClientIds }
-								hideDragHandle={ hideDragHandle }
-							/>
-						</ToolbarGroup>
-					</div>
+							</ToolbarGroup>
+						</div>
+					) }
+				{ shouldShowVisualToolbar && isMultiToolbar && (
+					<BlockGroupToolbar />
+				) }
+				{ shouldShowVisualToolbar && (
+					<>
+						<BlockControls.Slot
+							group="parent"
+							className="block-editor-block-toolbar__slot"
+						/>
+						<BlockControls.Slot
+							group="block"
+							className="block-editor-block-toolbar__slot"
+						/>
+						<BlockControls.Slot className="block-editor-block-toolbar__slot" />
+						<BlockControls.Slot
+							group="inline"
+							className="block-editor-block-toolbar__slot"
+						/>
+						<BlockControls.Slot
+							group="other"
+							className="block-editor-block-toolbar__slot"
+						/>
+						<__unstableBlockNameContext.Provider
+							value={ blockType?.name }
+						>
+							<__unstableBlockToolbarLastItem.Slot />
+						</__unstableBlockNameContext.Provider>
+					</>
+				) }
+				<BlockEditVisuallyButton clientIds={ blockClientIds } />
+				{ isDefaultEditingMode && (
+					<BlockSettingsMenu clientIds={ blockClientIds } />
 				) }
-			{ shouldShowVisualToolbar && isMultiToolbar && (
-				<BlockGroupToolbar />
-			) }
-			{ shouldShowVisualToolbar && (
-				<>
-					<BlockControls.Slot
-						group="parent"
-						className="block-editor-block-toolbar__slot"
-					/>
-					<BlockControls.Slot
-						group="block"
-						className="block-editor-block-toolbar__slot"
-					/>
-					<BlockControls.Slot className="block-editor-block-toolbar__slot" />
-					<BlockControls.Slot
-						group="inline"
-						className="block-editor-block-toolbar__slot"
-					/>
-					<BlockControls.Slot
-						group="other"
-						className="block-editor-block-toolbar__slot"
-					/>
-					<__unstableBlockNameContext.Provider
-						value={ blockType?.name }
-					>
-						<__unstableBlockToolbarLastItem.Slot />
-					</__unstableBlockNameContext.Provider>
-				</>
-			) }
-			<BlockEditVisuallyButton clientIds={ blockClientIds } />
-			{ blockEditingMode === 'default' && (
-				<BlockSettingsMenu clientIds={ blockClientIds } />
-			) }
-		</div>
+			</div>
+		</NavigableToolbar>
 	);
-};
+}
 
 /**
+ * Renders the block toolbar.
+ *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-toolbar/README.md
+ *
+ * @param {Object}  props                Components props.
+ * @param {boolean} props.hideDragHandle Show or hide the Drag Handle for drag and drop functionality.
+ * @param {string}  props.variant        Style variant of the toolbar, also passed to the Dropdowns rendered from Block Toolbar Buttons.
  */
-export default BlockToolbar;
+export default function BlockToolbar( { hideDragHandle, variant } ) {
+	return (
+		<PrivateBlockToolbar
+			hideDragHandle={ hideDragHandle }
+			variant={ variant }
+			focusOnMount={ undefined }
+			__experimentalInitialIndex={ undefined }
+			__experimentalOnIndexChange={ undefined }
+		/>
+	);
+}