@wordpress/block-editor 12.14.0 → 12.16.0

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 }
+		/>
+	);
+}

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

@@ -56,57 +56,66 @@
 	}
 }
 
-.block-editor-block-contextual-toolbar.is-fixed {
+.block-editor-block-contextual-toolbar {
 	position: sticky;
 	top: 0;
 	z-index: z-index(".block-editor-block-popover");
 	display: block;
 	width: 100%;
-}
+	// Block UI appearance.
+	background-color: $white;
+	flex-shrink: 3;
+
+	// Raise the specificity.
+	&.components-accessible-toolbar {
+		border: none;
+		border-bottom: $border-width solid $gray-200;
+		border-radius: 0;
+	}
 
-// on desktop browsers the fixed toolbar has tweaked borders
-@include break-medium() {
-	.block-editor-block-contextual-toolbar.is-fixed {
-		.block-editor-block-toolbar {
-			.components-toolbar-group,
-			.components-toolbar {
-				border-right: none;
-
-				&::after {
-					content: "";
-					width: $border-width;
-					margin-top: $grid-unit + $grid-unit-05;
-					margin-bottom: $grid-unit + $grid-unit-05;
-					background-color: $gray-300;
-					margin-left: $grid-unit;
-				}
-
-				& .components-toolbar-group.components-toolbar-group {
-					&::after {
-						display: none;
-					}
-				}
-			}
+	.block-editor-block-toolbar {
+		overflow: auto;
+		overflow-y: hidden;
 
-			> :last-child,
-			> :last-child .components-toolbar-group,
-			> :last-child .components-toolbar {
-				&::after {
-					display: none;
-				}
+		> :last-child,
+		> :last-child .components-toolbar-group,
+		> :last-child .components-toolbar {
+			&::after {
+				display: none;
 			}
 		}
 	}
-}
 
-.block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) {
-	margin-left: calc(#{$grid-unit-60} + #{$grid-unit-10});
+	.block-editor-block-toolbar .components-toolbar-group,
+	.block-editor-block-toolbar .components-toolbar {
+		border-right-color: $gray-200;
+	}
 
-	.show-icon-labels & {
-		margin-left: 0;
+	& > .block-editor-block-toolbar {
+		flex-grow: initial;
+		width: initial;
+	}
+
+	.block-editor-block-parent-selector {
+		position: relative;
+
+		// Parent selector dot divider
+		&::after {
+			content: "\00B7";
+			position: absolute;
+			font-size: 16px;
+			right: 0;
+			bottom: $grid-unit-20;
+		}
+	}
+
+	.block-editor-block-parent-selector__button {
+		position: relative;
+		top: -1px;
 	}
 }
 
+
 // Block controls.
 .block-editor-block-toolbar__block-controls {
 	// Switcher.
@@ -165,7 +174,6 @@
 	}
 
 	// Padding overrides.
-
 	.components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon {
 		padding-left: 6px;
 		padding-right: 6px;
@@ -181,10 +189,12 @@
 	}
 
 	// Parent selector overrides
-
-	.block-editor-block-parent-selector__button {
+	.block-editor-block-parent-selector .block-editor-block-parent-selector__button {
 		border-top-right-radius: 0;
 		border-bottom-right-radius: 0;
+		padding-left: $grid-unit-15;
+		padding-right: $grid-unit-15;
+		text-wrap: nowrap;
 
 		.block-editor-block-icon {
 			width: 0;
@@ -210,25 +220,17 @@
 
 	// Mover overrides.
 	.block-editor-block-toolbar__block-controls .block-editor-block-mover {
-		border-left: 1px solid $gray-900;
+		border-left: 1px solid $gray-300;
 		margin-left: 6px;
 		margin-right: -6px;
 		white-space: nowrap;
 	}
 
-	.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar__block-controls .block-editor-block-mover {
-		border-left-color: $gray-200;
-	}
-
 	.block-editor-block-mover .block-editor-block-mover__drag-handle.has-icon {
 		padding-left: $grid-unit-15;
 		padding-right: $grid-unit-15;
 	}
 
-	.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container {
-		border-width: 0;
-	}
-
 	@include break-small() {
 		// Specificity override for https://github.com/WordPress/gutenberg/blob/try/block-toolbar-labels/packages/block-editor/src/components/block-mover/style.scss#L69
 		.is-up-button.is-up-button.is-up-button {
@@ -237,17 +239,9 @@
 			order: 1;
 		}
 
-		.block-editor-block-mover__move-button-container {
-			border-left: 1px solid $gray-900;
-		}
-
 		.is-down-button.is-down-button.is-down-button {
 			order: 2;
 		}
-
-		.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container::before {
-			background: $gray-300;
-		}
 	}
 
 	.block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
@@ -260,16 +254,6 @@
 		flex-shrink: 1;
 	}
 
-	@include break-medium() {
-		.block-editor-block-contextual-toolbar.is-fixed {
-			.components-toolbar,
-			.components-toolbar-group {
-				flex-shrink: 0;
-			}
-		}
-	}
-
-
 	.block-editor-rich-text__inline-format-toolbar-group {
 		.components-button + .components-button {
 			margin-left: 6px;

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

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import BlockSelectionButton from './block-selection-button';
+import BlockPopover from '../block-popover';
+import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
+import useSelectedBlockToolProps from './use-selected-block-tool-props';
+
+export default function BlockToolbarBreadcrumb( {
+	clientId,
+	__unstableContentRef,
+} ) {
+	const {
+		capturingClientId,
+		isInsertionPointVisible,
+		lastClientId,
+		rootClientId,
+	} = useSelectedBlockToolProps( clientId );
+
+	const popoverProps = useBlockToolbarPopoverProps( {
+		contentElement: __unstableContentRef?.current,
+		clientId,
+	} );
+
+	return (
+		<BlockPopover
+			clientId={ capturingClientId || clientId }
+			bottomClientId={ lastClientId }
+			className={ classnames( 'block-editor-block-list__block-popover', {
+				'is-insertion-point-visible': isInsertionPointVisible,
+			} ) }
+			resize={ false }
+			{ ...popoverProps }
+		>
+			<BlockSelectionButton
+				clientId={ clientId }
+				rootClientId={ rootClientId }
+			/>
+		</BlockPopover>
+	);
+}

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

@@ -0,0 +1,90 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
+/**
+ * Internal dependencies
+ */
+import BlockPopover from '../block-popover';
+import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
+import useSelectedBlockToolProps from './use-selected-block-tool-props';
+import { store as blockEditorStore } from '../../store';
+import { PrivateBlockToolbar } from '../block-toolbar';
+
+export default function BlockToolbarPopover( {
+	clientId,
+	isTyping,
+	__unstableContentRef,
+} ) {
+	const { capturingClientId, isInsertionPointVisible, lastClientId } =
+		useSelectedBlockToolProps( clientId );
+
+	// Stores the active toolbar item index so the block toolbar can return focus
+	// to it when re-mounting.
+	const initialToolbarItemIndexRef = useRef();
+
+	useEffect( () => {
+		// Resets the index whenever the active block changes so this is not
+		// persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
+		initialToolbarItemIndexRef.current = undefined;
+	}, [ clientId ] );
+
+	const { stopTyping } = useDispatch( blockEditorStore );
+	const isToolbarForced = useRef( false );
+
+	useShortcut(
+		'core/block-editor/focus-toolbar',
+		() => {
+			isToolbarForced.current = true;
+			stopTyping( true );
+		},
+		{
+			isDisabled: false,
+		}
+	);
+
+	useEffect( () => {
+		isToolbarForced.current = false;
+	} );
+
+	const popoverProps = useBlockToolbarPopoverProps( {
+		contentElement: __unstableContentRef?.current,
+		clientId,
+	} );
+
+	return (
+		! isTyping && (
+			<BlockPopover
+				clientId={ capturingClientId || clientId }
+				bottomClientId={ lastClientId }
+				className={ classnames(
+					'block-editor-block-list__block-popover',
+					{
+						'is-insertion-point-visible': isInsertionPointVisible,
+					}
+				) }
+				resize={ false }
+				{ ...popoverProps }
+			>
+				<PrivateBlockToolbar
+					// If the toolbar is being shown because of being forced
+					// it should focus the toolbar right after the mount.
+					focusOnMount={ isToolbarForced.current }
+					__experimentalInitialIndex={
+						initialToolbarItemIndexRef.current
+					}
+					__experimentalOnIndexChange={ ( index ) => {
+						initialToolbarItemIndexRef.current = index;
+					} }
+					variant="toolbar"
+				/>
+			</BlockPopover>
+		)
+	);
+}