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

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/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-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/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

@@ -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,125 @@ 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={ blockClientId }
+									/>
+								) }
+								<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 }
+		/>
+	);
+}