@wordpress/block-editor 12.6.0 → 12.8.0

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

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 import {
@@ -29,76 +29,51 @@ import BlockSettingsMenu from '../block-settings-menu';
 import { BlockLockToolbar } from '../block-lock';
 import { BlockGroupToolbar } from '../convert-to-group-buttons';
 import BlockEditVisuallyButton from '../block-edit-visually-button';
-import { useShowMoversGestures } from './utils';
+import { useShowHoveredOrFocusedGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
-import { unlock } from '../../lock-unlock';
 
 const BlockToolbar = ( { hideDragHandle } ) => {
-	const { getSelectedBlockClientId } = useSelect( blockEditorStore );
-	const {
-		blockClientIds,
-		blockType,
-		hasFixedToolbar,
-		isDistractionFree,
-		isValid,
-		isVisual,
-		blockEditingMode,
-	} = useSelect( ( select ) => {
-		const {
-			getBlockName,
-			getBlockMode,
-			getSelectedBlockClientIds,
-			isBlockValid,
-			getBlockRootClientId,
-			getSettings,
-			getBlockEditingMode,
-		} = unlock( select( blockEditorStore ) );
-		const selectedBlockClientIds = getSelectedBlockClientIds();
-		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
-		const blockRootClientId = getBlockRootClientId( selectedBlockClientId );
-		const settings = getSettings();
-
-		return {
-			blockClientIds: selectedBlockClientIds,
-			blockType:
-				selectedBlockClientId &&
-				getBlockType( getBlockName( selectedBlockClientId ) ),
-			hasFixedToolbar: settings.hasFixedToolbar,
-			isDistractionFree: settings.isDistractionFree,
-			rootClientId: blockRootClientId,
-			isValid: selectedBlockClientIds.every( ( id ) =>
-				isBlockValid( id )
-			),
-			isVisual: selectedBlockClientIds.every(
-				( id ) => getBlockMode( id ) === 'visual'
-			),
-			blockEditingMode: getBlockEditingMode( selectedBlockClientId ),
-		};
-	}, [] );
+	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 ),
+			};
+		}, [] );
 
 	const toolbarWrapperRef = useRef( null );
 
 	// Handles highlighting the current block outline on hover or focus of the
 	// block type toolbar area.
-	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 	const nodeRef = useRef();
-	const { showMovers, gestures: showMoversGestures } = useShowMoversGestures(
-		{
-			ref: nodeRef,
-			onChange( isFocused ) {
-				if ( isFocused && isDistractionFree ) {
-					return;
-				}
-				toggleBlockHighlight( getSelectedBlockClientId(), isFocused );
-			},
-		}
-	);
+	const showHoveredOrFocusedGestures = useShowHoveredOrFocusedGestures( {
+		ref: nodeRef,
+	} );
 
-	// Account for the cases where the block toolbar is rendered within the
-	// header area and not contextually to the block.
-	const displayHeaderToolbar =
-		useViewportMatch( 'medium', '<' ) || hasFixedToolbar;
 	const isLargeViewport = ! useViewportMatch( 'medium', '<' );
 
 	if ( blockType ) {
@@ -107,8 +82,6 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		}
 	}
 
-	const shouldShowMovers = displayHeaderToolbar || showMovers;
-
 	if ( blockClientIds.length === 0 ) {
 		return null;
 	}
@@ -119,7 +92,6 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		isReusableBlock( blockType ) || isTemplatePart( blockType );
 
 	const classes = classnames( 'block-editor-block-toolbar', {
-		'is-showing-movers': shouldShowMovers,
 		'is-synced': isSynced,
 	} );
 
@@ -130,7 +102,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 				blockEditingMode === 'default' && <BlockParentSelector /> }
 			{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 				blockEditingMode === 'default' && (
-					<div ref={ nodeRef } { ...showMoversGestures }>
+					<div ref={ nodeRef } { ...showHoveredOrFocusedGestures }>
 						<ToolbarGroup className="block-editor-block-toolbar__block-controls">
 							<BlockSwitcher clientIds={ blockClientIds } />
 							{ ! isMultiToolbar && (

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

@@ -252,6 +252,16 @@
 		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-toolbar/utils.js

@@ -1,43 +1,57 @@
 /**
  * WordPress dependencies
  */
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useRef, useEffect } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
 const { clearTimeout, setTimeout } = window;
-const noop = () => {};
 const DEBOUNCE_TIMEOUT = 200;
 
 /**
- * Hook that creates a showMover state, as well as debounced show/hide callbacks.
+ * Hook that creates debounced callbacks when the node is hovered or focused.
  *
- * @param {Object}   props                       Component props.
- * @param {Object}   props.ref                   Element reference.
- * @param {boolean}  props.isFocused             Whether the component has current focus.
- * @param {number}   [props.debounceTimeout=250] Debounce timeout in milliseconds.
- * @param {Function} [props.onChange=noop]       Callback function.
+ * @param {Object}  props                       Component props.
+ * @param {Object}  props.ref                   Element reference.
+ * @param {boolean} props.isFocused             Whether the component has current focus.
+ * @param {number}  props.highlightParent       Whether to highlight the parent block. It defaults in highlighting the selected block.
+ * @param {number}  [props.debounceTimeout=250] Debounce timeout in milliseconds.
  */
-export function useDebouncedShowMovers( {
+function useDebouncedShowGestures( {
 	ref,
 	isFocused,
+	highlightParent,
 	debounceTimeout = DEBOUNCE_TIMEOUT,
-	onChange = noop,
 } ) {
-	const [ showMovers, setShowMovers ] = useState( false );
+	const { getSelectedBlockClientId, getBlockRootClientId } =
+		useSelect( blockEditorStore );
+	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 	const timeoutRef = useRef();
-
+	const isDistractionFree = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().isDistractionFree,
+		[]
+	);
 	const handleOnChange = ( nextIsFocused ) => {
-		if ( ref?.current ) {
-			setShowMovers( nextIsFocused );
+		if ( nextIsFocused && isDistractionFree ) {
+			return;
 		}
-
-		onChange( nextIsFocused );
+		const selectedBlockClientId = getSelectedBlockClientId();
+		const clientId = highlightParent
+			? getBlockRootClientId( selectedBlockClientId )
+			: selectedBlockClientId;
+		toggleBlockHighlight( clientId, nextIsFocused );
 	};
 
 	const getIsHovered = () => {
 		return ref?.current && ref.current.matches( ':hover' );
 	};
 
-	const shouldHideMovers = () => {
+	const shouldHideGestures = () => {
 		const isHovered = getIsHovered();
 		return ! isFocused && ! isHovered;
 	};
@@ -50,19 +64,16 @@ export function useDebouncedShowMovers( {
 		}
 	};
 
-	const debouncedShowMovers = ( event ) => {
+	const debouncedShowGestures = ( event ) => {
 		if ( event ) {
 			event.stopPropagation();
 		}
 
 		clearTimeoutRef();
-
-		if ( ! showMovers ) {
-			handleOnChange( true );
-		}
+		handleOnChange( true );
 	};
 
-	const debouncedHideMovers = ( event ) => {
+	const debouncedHideGestures = ( event ) => {
 		if ( event ) {
 			event.stopPropagation();
 		}
@@ -70,7 +81,7 @@ export function useDebouncedShowMovers( {
 		clearTimeoutRef();
 
 		timeoutRef.current = setTimeout( () => {
-			if ( shouldHideMovers() ) {
+			if ( shouldHideGestures() ) {
 				handleOnChange( false );
 			}
 		}, debounceTimeout );
@@ -90,29 +101,33 @@ export function useDebouncedShowMovers( {
 	);
 
 	return {
-		showMovers,
-		debouncedShowMovers,
-		debouncedHideMovers,
+		debouncedShowGestures,
+		debouncedHideGestures,
 	};
 }
 
 /**
- * Hook that provides a showMovers state and gesture events for DOM elements
- * that interact with the showMovers state.
+ * Hook that provides gesture events for DOM elements
+ * that interact with the isFocused state.
  *
- * @param {Object}   props                       Component props.
- * @param {Object}   props.ref                   Element reference.
- * @param {number}   [props.debounceTimeout=250] Debounce timeout in milliseconds.
- * @param {Function} [props.onChange=noop]       Callback function.
+ * @param {Object} props                         Component props.
+ * @param {Object} props.ref                     Element reference.
+ * @param {number} [props.highlightParent=false] Whether to highlight the parent block. It defaults to highlighting the selected block.
+ * @param {number} [props.debounceTimeout=250]   Debounce timeout in milliseconds.
  */
-export function useShowMoversGestures( {
+export function useShowHoveredOrFocusedGestures( {
 	ref,
+	highlightParent = false,
 	debounceTimeout = DEBOUNCE_TIMEOUT,
-	onChange = noop,
 } ) {
 	const [ isFocused, setIsFocused ] = useState( false );
-	const { showMovers, debouncedShowMovers, debouncedHideMovers } =
-		useDebouncedShowMovers( { ref, debounceTimeout, isFocused, onChange } );
+	const { debouncedShowGestures, debouncedHideGestures } =
+		useDebouncedShowGestures( {
+			ref,
+			debounceTimeout,
+			isFocused,
+			highlightParent,
+		} );
 
 	const registerRef = useRef( false );
 
@@ -129,14 +144,14 @@ export function useShowMoversGestures( {
 		const handleOnFocus = () => {
 			if ( isFocusedWithin() ) {
 				setIsFocused( true );
-				debouncedShowMovers();
+				debouncedShowGestures();
 			}
 		};
 
 		const handleOnBlur = () => {
 			if ( ! isFocusedWithin() ) {
 				setIsFocused( false );
-				debouncedHideMovers();
+				debouncedHideGestures();
 			}
 		};
 
@@ -160,15 +175,12 @@ export function useShowMoversGestures( {
 		ref,
 		registerRef,
 		setIsFocused,
-		debouncedShowMovers,
-		debouncedHideMovers,
+		debouncedShowGestures,
+		debouncedHideGestures,
 	] );
 
 	return {
-		showMovers,
-		gestures: {
-			onMouseMove: debouncedShowMovers,
-			onMouseLeave: debouncedHideMovers,
-		},
+		onMouseMove: debouncedShowGestures,
+		onMouseLeave: debouncedHideGestures,
 	};
 }

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

@@ -7,7 +7,12 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useEffect, useRef, useState } from '@wordpress/element';
+import {
+	useLayoutEffect,
+	useEffect,
+	useRef,
+	useState,
+} from '@wordpress/element';
 import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import {
@@ -24,7 +29,7 @@ import { useViewportMatch } from '@wordpress/compose';
 import NavigableToolbar from '../navigable-toolbar';
 import BlockToolbar from '../block-toolbar';
 import { store as blockEditorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
+import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls';
 
 function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	// When the toolbar is fixed it can be collapsed
@@ -32,48 +37,129 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	const toolbarButtonRef = useRef();
 
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { blockType, hasParents, showParentSelector, selectedBlockClientId } =
-		useSelect( ( select ) => {
-			const {
-				getBlockName,
-				getBlockParents,
-				getSelectedBlockClientIds,
-				getBlockEditingMode,
-			} = unlock( select( blockEditorStore ) );
-			const { getBlockType } = select( blocksStore );
-			const selectedBlockClientIds = getSelectedBlockClientIds();
-			const _selectedBlockClientId = selectedBlockClientIds[ 0 ];
-			const parents = getBlockParents( _selectedBlockClientId );
-			const firstParentClientId = parents[ parents.length - 1 ];
-			const parentBlockName = getBlockName( firstParentClientId );
-			const parentBlockType = getBlockType( parentBlockName );
-
-			return {
-				selectedBlockClientId: _selectedBlockClientId,
-				blockType:
-					_selectedBlockClientId &&
-					getBlockType( getBlockName( _selectedBlockClientId ) ),
-				hasParents: parents.length,
-				showParentSelector:
-					parentBlockType &&
-					getBlockEditingMode( firstParentClientId ) === 'default' &&
-					hasBlockSupport(
-						parentBlockType,
-						'__experimentalParentSelector',
-						true
-					) &&
-					selectedBlockClientIds.length <= 1 &&
-					getBlockEditingMode( _selectedBlockClientId ) === 'default',
-			};
-		}, [] );
+	const {
+		blockType,
+		blockEditingMode,
+		hasParents,
+		showParentSelector,
+		selectedBlockClientId,
+	} = useSelect( ( select ) => {
+		const {
+			getBlockName,
+			getBlockParents,
+			getSelectedBlockClientIds,
+			getBlockEditingMode,
+		} = select( blockEditorStore );
+		const { getBlockType } = select( blocksStore );
+		const selectedBlockClientIds = getSelectedBlockClientIds();
+		const _selectedBlockClientId = selectedBlockClientIds[ 0 ];
+		const parents = getBlockParents( _selectedBlockClientId );
+		const firstParentClientId = parents[ parents.length - 1 ];
+		const parentBlockName = getBlockName( firstParentClientId );
+		const parentBlockType = getBlockType( parentBlockName );
+
+		return {
+			selectedBlockClientId: _selectedBlockClientId,
+			blockType:
+				_selectedBlockClientId &&
+				getBlockType( getBlockName( _selectedBlockClientId ) ),
+			blockEditingMode: getBlockEditingMode( _selectedBlockClientId ),
+			hasParents: parents.length,
+			showParentSelector:
+				parentBlockType &&
+				getBlockEditingMode( firstParentClientId ) === 'default' &&
+				hasBlockSupport(
+					parentBlockType,
+					'__experimentalParentSelector',
+					true
+				) &&
+				selectedBlockClientIds.length <= 1 &&
+				getBlockEditingMode( _selectedBlockClientId ) === 'default',
+		};
+	}, [] );
 
 	useEffect( () => {
 		setIsCollapsed( false );
 	}, [ selectedBlockClientId ] );
 
+	const isLargerThanTabletViewport = useViewportMatch( 'large', '>=' );
+	const isFullscreen =
+		document.body.classList.contains( 'is-fullscreen-mode' );
+
+	useLayoutEffect( () => {
+		// don't do anything if not fixed toolbar
+		if ( ! isFixed || ! blockType ) {
+			return;
+		}
+
+		const blockToolbar = document.querySelector(
+			'.block-editor-block-contextual-toolbar'
+		);
+
+		if ( ! blockToolbar ) {
+			return;
+		}
+
+		if ( ! isLargerThanTabletViewport ) {
+			// set the width of the toolbar to auto
+			blockToolbar.style = {};
+			return;
+		}
+
+		if ( isCollapsed ) {
+			// set the width of the toolbar to auto
+			blockToolbar.style.width = 'auto';
+			return;
+		}
+
+		// get the width of the pinned items in the post editor
+		const pinnedItems = document.querySelector(
+			'.edit-post-header__settings'
+		);
+
+		// get the width of the left header in the site editor
+		const leftHeader = document.querySelector(
+			'.edit-site-header-edit-mode__end'
+		);
+
+		const computedToolbarStyle = window.getComputedStyle( blockToolbar );
+		const computedPinnedItemsStyle = pinnedItems
+			? window.getComputedStyle( pinnedItems )
+			: false;
+		const computedLeftHeaderStyle = leftHeader
+			? window.getComputedStyle( leftHeader )
+			: false;
+
+		const marginLeft = parseFloat( computedToolbarStyle.marginLeft );
+		const pinnedItemsWidth = computedPinnedItemsStyle
+			? parseFloat( computedPinnedItemsStyle.width ) + 10 // 10 is the pinned items padding
+			: 0;
+		const leftHeaderWidth = computedLeftHeaderStyle
+			? parseFloat( computedLeftHeaderStyle.width )
+			: 0;
+
+		// set the new witdth of the toolbar
+		blockToolbar.style.width = `calc(100% - ${
+			leftHeaderWidth +
+			pinnedItemsWidth +
+			marginLeft +
+			( isFullscreen ? 0 : 160 ) // the width of the admin sidebar expanded
+		}px)`;
+	}, [
+		isFixed,
+		isLargerThanTabletViewport,
+		isCollapsed,
+		isFullscreen,
+		blockType,
+	] );
+
+	const isToolbarEnabled =
+		! blockType ||
+		hasBlockSupport( blockType, '__experimentalToolbar', true );
+	const hasAnyBlockControls = useHasAnyBlockControls();
 	if (
-		blockType &&
-		! hasBlockSupport( blockType, '__experimentalToolbar', true )
+		! isToolbarEnabled ||
+		( blockEditingMode !== 'default' && ! hasAnyBlockControls )
 	) {
 		return null;
 	}

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

@@ -110,6 +110,12 @@
 		z-index: z-index(".block-editor-block-popover");
 		display: block;
 		width: 100%;
+		overflow: hidden;
+
+		.block-editor-block-toolbar {
+			overflow: auto;
+			overflow-y: hidden;
+		}
 
 		border: none;
 		border-bottom: $border-width solid $gray-200;
@@ -121,21 +127,26 @@
 		}
 	}
 
-	&:has(.block-editor-block-toolbar:empty) {
-		display: none;
+	// Add a scrim to the right of the collapsed button.
+	&.is-collapsed::after {
+		content: "";
+		position: absolute;
+		left: 100%;
+		width: $grid-unit-60;
+		height: 100%;
+		background: linear-gradient(to right, $white, transparent);
 	}
 
 	// on desktop and tablet viewports the toolbar is fixed
 	// on top of interface header
-
+	$toolbar-margin: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;
 	@include break-medium() {
 		&.is-fixed {
-
 			// leave room for block inserter, undo and redo, list view
-			margin-left: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;
+			margin-left: $toolbar-margin;
 			// position on top of interface header
 			position: fixed;
-			top: $admin-bar-height + $grid-unit - $border-width;
+			top: $admin-bar-height;
 			// Don't fill up when empty
 			min-height: initial;
 			// remove the border
@@ -143,21 +154,35 @@
 			// has to be flex for collapse button to fit
 			display: flex;
 
+			// Mimic the height of the parent, vertically align center, and provide a max-height.
+			height: $header-height;
+			align-items: center;
+
 			&.is-collapsed {
 				width: initial;
 			}
 
+			&:empty {
+				width: initial;
+			}
+
 			.is-fullscreen-mode & {
 				// leave room for block inserter, undo and redo, list view
 				// and some margin left
 				margin-left: $grid-unit-80 * 4 - 2 * $grid-unit;
-				top: $grid-unit - $border-width;
+
+				top: 0;
+
 				&.is-collapsed {
 					width: initial;
 				}
+
+				&:empty {
+					width: initial;
+				}
 			}
 
-			& > .block-editor-block-toolbar.is-showing-movers {
+			& > .block-editor-block-toolbar {
 				flex-grow: initial;
 				width: initial;
 
@@ -240,7 +265,7 @@
 
 			.show-icon-labels & {
 
-				margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin ;
+				margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin
 
 				.is-fullscreen-mode & {
 					margin-left: $grid-unit * 18; // site hub, inserter and margin
@@ -308,12 +333,17 @@
 		}
 	}
 
-	// on tablet vewports the toolbar is fixed
+	// on tablet viewports the toolbar is fixed
 	// on top of interface header and covers the whole header
 	// except for the inserter on the left
 	@include break-medium() {
 		&.is-fixed {
-			width: 100%;
+			width: calc(100% - #{$toolbar-margin});
+
+			.show-icon-labels & {
+				width: calc(100% + 40px - #{$toolbar-margin}); //there are no undo, redo and list view buttons
+			}
+
 		}
 	}
 
@@ -322,12 +352,18 @@
 	// for the block inserter the publish button
 	@include break-large() {
 		&.is-fixed {
+			width: auto;
+			.show-icon-labels & {
+				width: auto; //there are no undo, redo and list view buttons
+			}
+		}
+		.is-fullscreen-mode &.is-fixed {
+			// in full screen mode we need to account for
 			// the combined with of the tools at the right of the header and the margin left
 			// of the toolbar which includes four buttons
-			width: calc(100% - 240px - #{4 * $grid-unit-80});
+			width: calc(100% - 280px - #{4 * $grid-unit-80});
 		}
 	}
-
 }
 
 /**