@wordpress/block-editor 11.8.0 → 12.1.0

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

@@ -56,26 +56,46 @@
 	}
 }
 
-.block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) {
-	margin-left: calc(#{$grid-unit-60} + #{$grid-unit-10});
+// 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;
+					}
+				}
+			}
 
-	.show-icon-labels & {
-		margin-left: 0;
+			> :last-child,
+			> :last-child .components-toolbar-group,
+			> :last-child .components-toolbar {
+				&::after {
+					display: none;
+				}
+			}
+		}
 	}
 }
 
-.block-editor-block-parent-selector {
-	position: absolute;
-	top: -$border-width;
-	left: calc(-#{$grid-unit-60} - #{$grid-unit-10} - #{$border-width});
+.block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) {
+	margin-left: calc(#{$grid-unit-60} + #{$grid-unit-10});
 
 	.show-icon-labels & {
-		position: relative;
-		left: auto;
-		top: auto;
-		margin-top: -$border-width;
-		margin-left: -$border-width;
-		margin-bottom: -$border-width;
+		margin-left: 0;
 	}
 }
 
@@ -152,21 +172,38 @@
 		.block-editor-block-icon {
 			width: 0 !important;
 			height: 0 !important;
+			min-width: 0 !important;
 		}
 	}
 
 	// Parent selector overrides
 
 	.block-editor-block-parent-selector__button {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+
 		.block-editor-block-icon {
 			width: 0;
 		}
 	}
 
-	.block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+	.block-editor-block-mover .block-editor-block-mover__move-button-container {
 		width: auto;
 	}
 
+	.block-editor-block-mover.is-horizontal {
+		.block-editor-block-mover__move-button-container,
+		.block-editor-block-mover-button {
+			padding-left: 6px;
+			padding-right: 6px;
+		}
+	}
+
+	.block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button {
+		padding-left: $grid-unit;
+		padding-right: $grid-unit;
+	}
+
 	// Mover overrides.
 	.block-editor-block-toolbar__block-controls .block-editor-block-mover {
 		border-left: 1px solid $gray-900;
@@ -179,15 +216,9 @@
 		border-left-color: $gray-200;
 	}
 
-	.block-editor-block-mover-button {
-		// The specificity can be reduced once https://github.com/WordPress/gutenberg/blob/try/block-toolbar-labels/packages/block-editor/src/components/block-mover/style.scss#L34 is also dealt with.
-		padding-left: $grid-unit !important;
-		padding-right: $grid-unit !important;
-	}
-
-	.block-editor-block-mover__drag-handle.has-icon {
-		padding-left: 12px !important;
-		padding-right: 12px !important;
+	.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 {
@@ -204,18 +235,10 @@
 
 		.block-editor-block-mover__move-button-container {
 			border-left: 1px solid $gray-900;
-
-			&::before {
-				content: "";
-				display: block;
-				height: 1px;
-				background: $gray-900;
-				order: 2;
-			}
 		}
 
 		.is-down-button.is-down-button.is-down-button {
-			order: 3;
+			order: 2;
 		}
 
 		.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container::before {

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

@@ -7,8 +7,16 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
+import {
+	ToolbarItem,
+	ToolbarButton,
+	ToolbarGroup,
+} from '@wordpress/components';
+import { levelUp } from '@wordpress/icons';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -16,10 +24,16 @@ import { useSelect } from '@wordpress/data';
 import NavigableToolbar from '../navigable-toolbar';
 import BlockToolbar from '../block-toolbar';
 import { store as blockEditorStore } from '../../store';
+import BlockIcon from '../block-icon';
 
 function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
-	const { blockType, hasParents, showParentSelector } = useSelect(
-		( select ) => {
+	// When the toolbar is fixed it can be collapsed
+	const [ isCollapsed, setIsCollapsed ] = useState( false );
+	const toolbarButtonRef = useRef();
+
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const { blockType, hasParents, showParentSelector, selectedBlockClientId } =
+		useSelect( ( select ) => {
 			const {
 				getBlockName,
 				getBlockParents,
@@ -28,16 +42,17 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			} = select( blockEditorStore );
 			const { getBlockType } = select( blocksStore );
 			const selectedBlockClientIds = getSelectedBlockClientIds();
-			const selectedBlockClientId = selectedBlockClientIds[ 0 ];
-			const parents = getBlockParents( selectedBlockClientId );
+			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 ) ),
+					_selectedBlockClientId &&
+					getBlockType( getBlockName( _selectedBlockClientId ) ),
 				hasParents: parents.length,
 				showParentSelector:
 					parentBlockType &&
@@ -48,23 +63,27 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 					) &&
 					selectedBlockClientIds.length <= 1 &&
 					! __unstableGetContentLockingParent(
-						selectedBlockClientId
+						_selectedBlockClientId
 					),
 			};
-		},
-		[]
-	);
+		}, [] );
+
+	useEffect( () => {
+		setIsCollapsed( false );
+	}, [ selectedBlockClientId ] );
 
-	if ( blockType ) {
-		if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {
-			return null;
-		}
+	if (
+		blockType &&
+		! hasBlockSupport( blockType, '__experimentalToolbar', true )
+	) {
+		return null;
 	}
 
 	// Shifts the toolbar to make room for the parent block selector.
 	const classes = classnames( 'block-editor-block-contextual-toolbar', {
 		'has-parent': hasParents && showParentSelector,
 		'is-fixed': isFixed,
+		'is-collapsed': isCollapsed,
 	} );
 
 	return (
@@ -75,7 +94,37 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			aria-label={ __( 'Block tools' ) }
 			{ ...props }
 		>
-			<BlockToolbar hideDragHandle={ isFixed } />
+			{ isFixed && isLargeViewport && blockType && (
+				<ToolbarGroup
+					className={
+						isCollapsed
+							? 'block-editor-block-toolbar__group-expand-fixed-toolbar'
+							: 'block-editor-block-toolbar__group-collapse-fixed-toolbar'
+					}
+				>
+					<ToolbarItem
+						as={ ToolbarButton }
+						ref={ toolbarButtonRef }
+						icon={
+							isCollapsed ? (
+								<BlockIcon icon={ blockType.icon } />
+							) : (
+								levelUp
+							)
+						}
+						onClick={ () => {
+							setIsCollapsed( ( collapsed ) => ! collapsed );
+							toolbarButtonRef.current.focus();
+						} }
+						label={
+							isCollapsed
+								? __( 'Show block tools' )
+								: __( 'Show document tools' )
+						}
+					/>
+				</ToolbarGroup>
+			) }
+			{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }
 		</NavigableToolbar>
 	);
 }

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

@@ -10,7 +10,6 @@ import { useRef, useEffect } from '@wordpress/element';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
-import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -21,27 +20,20 @@ import { store as blockEditorStore } from '../../store';
 import BlockPopover from '../block-popover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 import Inserter from '../inserter';
-import { unlock } from '../../lock-unlock';
+import { useShouldContextualToolbarShow } from '../../utils/use-should-contextual-toolbar-show';
 
 function selector( select ) {
 	const {
 		__unstableGetEditorMode,
-		isMultiSelecting,
 		hasMultiSelection,
 		isTyping,
-		isBlockInterfaceHidden,
-		getSettings,
 		getLastMultiSelectedBlockClientId,
-	} = unlock( select( blockEditorStore ) );
+	} = select( blockEditorStore );
 
 	return {
 		editorMode: __unstableGetEditorMode(),
 		hasMultiSelection: hasMultiSelection(),
-		isMultiSelecting: isMultiSelecting(),
 		isTyping: isTyping(),
-		isBlockInterfaceHidden: isBlockInterfaceHidden(),
-		hasFixedToolbar: getSettings().hasFixedToolbar,
-		isDistractionFree: getSettings().isDistractionFree,
 		lastClientId: hasMultiSelection()
 			? getLastMultiSelectedBlockClientId()
 			: null,
@@ -52,21 +44,15 @@ function SelectedBlockPopover( {
 	clientId,
 	rootClientId,
 	isEmptyDefaultBlock,
-	showContents, // we may need to mount an empty popover because we reuse
 	capturingClientId,
 	__unstablePopoverSlot,
 	__unstableContentRef,
 } ) {
-	const {
-		editorMode,
-		hasMultiSelection,
-		isMultiSelecting,
-		isTyping,
-		isBlockInterfaceHidden,
-		hasFixedToolbar,
-		isDistractionFree,
-		lastClientId,
-	} = useSelect( selector, [] );
+	const { editorMode, hasMultiSelection, isTyping, lastClientId } = useSelect(
+		selector,
+		[]
+	);
+
 	const isInsertionPointVisible = useSelect(
 		( select ) => {
 			const {
@@ -85,8 +71,10 @@ function SelectedBlockPopover( {
 		},
 		[ clientId ]
 	);
-	const isLargeViewport = useViewportMatch( 'medium' );
 	const isToolbarForced = useRef( false );
+	const { shouldShowContextualToolbar, canFocusHiddenToolbar } =
+		useShouldContextualToolbarShow();
+
 	const { stopTyping } = useDispatch( blockEditorStore );
 
 	const showEmptyBlockSideInserter =
@@ -94,20 +82,6 @@ function SelectedBlockPopover( {
 	const shouldShowBreadcrumb =
 		! hasMultiSelection &&
 		( editorMode === 'navigation' || editorMode === 'zoom-out' );
-	const shouldShowContextualToolbar =
-		editorMode === 'edit' &&
-		! hasFixedToolbar &&
-		isLargeViewport &&
-		! isMultiSelecting &&
-		! showEmptyBlockSideInserter &&
-		! isTyping &&
-		! isBlockInterfaceHidden;
-	const canFocusHiddenToolbar =
-		editorMode === 'edit' &&
-		! shouldShowContextualToolbar &&
-		! hasFixedToolbar &&
-		! isDistractionFree &&
-		! isEmptyDefaultBlock;
 
 	useShortcut(
 		'core/block-editor/focus-toolbar',
@@ -179,7 +153,7 @@ function SelectedBlockPopover( {
 				resize={ false }
 				{ ...popoverProps }
 			>
-				{ shouldShowContextualToolbar && showContents && (
+				{ shouldShowContextualToolbar && (
 					<BlockContextualToolbar
 						// If the toolbar is being shown because of being forced
 						// it should focus the toolbar right after the mount.
@@ -215,8 +189,6 @@ function wrapperSelector( select ) {
 		getBlockRootClientId,
 		getBlock,
 		getBlockParents,
-		getSettings,
-		isNavigationMode: _isNavigationMode,
 		__experimentalGetBlockListSettingsForBlocks,
 	} = select( blockEditorStore );
 
@@ -242,14 +214,10 @@ function wrapperSelector( select ) {
 				?.__experimentalCaptureToolbars
 	);
 
-	const settings = getSettings();
-
 	return {
 		clientId,
 		rootClientId: getBlockRootClientId( clientId ),
 		name,
-		isDistractionFree: settings.isDistractionFree,
-		isNavigationMode: _isNavigationMode(),
 		isEmptyDefaultBlock:
 			name && isUnmodifiedDefaultBlock( { name, attributes } ),
 		capturingClientId,
@@ -272,8 +240,6 @@ export default function WrappedBlockPopover( {
 		name,
 		isEmptyDefaultBlock,
 		capturingClientId,
-		isDistractionFree,
-		isNavigationMode,
 	} = selected;
 
 	if ( ! name ) {
@@ -285,7 +251,6 @@ export default function WrappedBlockPopover( {
 			clientId={ clientId }
 			rootClientId={ rootClientId }
 			isEmptyDefaultBlock={ isEmptyDefaultBlock }
-			showContents={ ! isDistractionFree || isNavigationMode }
 			capturingClientId={ capturingClientId }
 			__unstablePopoverSlot={ __unstablePopoverSlot }
 			__unstableContentRef={ __unstableContentRef }

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

@@ -89,6 +89,9 @@
  * Block Toolbar when contextual.
  */
 
+// Base left position for the toolbar when fixed.
+@include editor-left(".block-editor-block-contextual-toolbar.is-fixed");
+
 .block-editor-block-contextual-toolbar {
 	// Block UI appearance.
 	display: inline-flex;
@@ -104,11 +107,9 @@
 	&.is-fixed {
 		position: sticky;
 		top: 0;
-		width: 100%;
 		z-index: z-index(".block-editor-block-popover");
-		// Fill up when empty
-		min-height: $block-toolbar-height;
 		display: block;
+		width: 100%;
 
 		border: none;
 		border-bottom: $border-width solid $gray-200;
@@ -119,6 +120,167 @@
 			border-right-color: $gray-200;
 		}
 	}
+
+	// on desktop and tablet viewports the toolbar is fixed
+	// on top of interface header
+
+	@include break-medium() {
+		&.is-fixed {
+
+			// leave room for block inserter
+			margin-left: $grid-unit-80;
+			// position on top of interface header
+			position: fixed;
+			top: $admin-bar-height + $grid-unit;
+			// Don't fill up when empty
+			min-height: initial;
+			// remove the border
+			border-bottom: none;
+			// has to be flex for collapse button to fit
+			display: flex;
+
+			&.is-collapsed {
+				width: initial;
+				margin-left: $grid-unit-80 * 3 + $grid-unit-30;
+			}
+
+			.is-fullscreen-mode & {
+				// leave room for block inserter
+				margin-left: $grid-unit-80 + $grid-unit-70;
+				top: $grid-unit;
+				&.is-collapsed {
+					width: initial;
+					margin-left: $grid-unit-80 * 4 + $grid-unit-30;
+				}
+			}
+
+			& > .block-editor-block-toolbar__group-collapse-fixed-toolbar {
+				border: none;
+
+				// Add a border as separator in the block toolbar.
+				&::after {
+					content: "";
+					width: $border-width;
+					height: 24px;
+					margin-top: $grid-unit + $grid-unit-05;
+					margin-bottom: $grid-unit + $grid-unit-05;
+					background-color: $gray-300;
+					position: absolute;
+					left: 44px;
+					top: -1px;
+				}
+			}
+
+			& > .block-editor-block-toolbar__group-expand-fixed-toolbar {
+				border: none;
+
+				// Add a border as separator in the block toolbar.
+				&::before {
+					content: "";
+					width: $border-width;
+					margin-top: $grid-unit + $grid-unit-05;
+					margin-bottom: $grid-unit + $grid-unit-05;
+					background-color: $gray-300;
+					position: relative;
+					left: -12px; //the padding of buttons
+					height: 24px;
+				}
+			}
+
+			.show-icon-labels & {
+
+				margin-left: $grid-unit-80;
+
+				&.is-collapsed {
+					margin-left: $grid-unit-80 * 6;
+				}
+
+				.is-fullscreen-mode & {
+					margin-left: $grid-unit-80 + $grid-unit-80;
+					&.is-collapsed {
+						margin-left: $grid-unit-80 * 7;
+					}
+				}
+
+
+				.block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
+					left: 0;
+				}
+
+				.block-editor-block-toolbar__block-controls .block-editor-block-mover {
+					border-left: none;
+					&::before {
+						content: "";
+						width: $border-width;
+						margin-top: $grid-unit + $grid-unit-05;
+						margin-bottom: $grid-unit + $grid-unit-05;
+						background-color: $gray-300;
+						position: relative;
+					}
+				}
+			}
+
+			.blocks-widgets-container & {
+				margin-left: $grid-unit-80 * 2.4;
+
+				&.is-collapsed {
+					margin-left: $grid-unit-80 * 4.2;
+				}
+			}
+		}
+
+		&.is-fixed .block-editor-block-parent-selector {
+			.block-editor-block-parent-selector__button {
+				position: relative;
+				top: -1px;
+				border: 0;
+				padding-right: 6px;
+				padding-left: 6px;
+				&::after {
+					content: "\00B7";
+					font-size: 16px;
+					line-height: $grid-unit-40 + $grid-unit-10;
+					position: absolute;
+					left: $grid-unit-40 + $grid-unit-15 + 2px;
+					bottom: $grid-unit-05;
+				}
+			}
+		}
+
+		&:not(.is-fixed) .block-editor-block-parent-selector {
+			position: absolute;
+			top: -$border-width;
+			left: calc(-#{$grid-unit-60} - #{$grid-unit-10} - #{$border-width});
+
+			.show-icon-labels & {
+				position: relative;
+				left: auto;
+				top: auto;
+				margin-top: -$border-width;
+				margin-left: -$border-width;
+				margin-bottom: -$border-width;
+			}
+		}
+	}
+
+	// on tablet vewports 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%;
+		}
+	}
+
+	// on desktop viewports the toolbar is fixed
+	// on top of interface header and leaves room
+	// for the block inserter the publish button
+	@include break-large() {
+		&.is-fixed {
+			width: initial;
+		}
+	}
+
 }
 
 /**

package/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js

@@ -61,7 +61,12 @@ export default function useMultipleOriginColorsAndGradients() {
 			} );
 		}
 		return result;
-	}, [ defaultColors, themeColors, customColors ] );
+	}, [
+		defaultColors,
+		themeColors,
+		customColors,
+		shouldDisplayDefaultColors,
+	] );
 
 	const customGradients = useSetting( 'color.gradients.custom' );
 	const themeGradients = useSetting( 'color.gradients.theme' );
@@ -103,7 +108,16 @@ export default function useMultipleOriginColorsAndGradients() {
 			} );
 		}
 		return result;
-	}, [ customGradients, themeGradients, defaultGradients ] );
+	}, [
+		customGradients,
+		themeGradients,
+		defaultGradients,
+		shouldDisplayDefaultGradients,
+	] );
+
+	colorGradientSettings.hasColorsOrGradients =
+		!! colorGradientSettings.colors.length ||
+		!! colorGradientSettings.gradients.length;
 
 	return colorGradientSettings;
 }

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

@@ -68,29 +68,33 @@ function useDarkThemeBodyClassName( styles ) {
 }
 
 export default function EditorStyles( { styles } ) {
+	const stylesArray = useMemo(
+		() => Object.values( styles ?? [] ),
+		[ styles ]
+	);
 	const transformedStyles = useMemo(
 		() =>
 			transformStyles(
-				styles.filter( ( style ) => style?.css ),
+				stylesArray.filter( ( style ) => style?.css ),
 				EDITOR_STYLES_SELECTOR
 			),
-		[ styles ]
+		[ stylesArray ]
 	);
 
 	const transformedSvgs = useMemo(
 		() =>
-			styles
+			stylesArray
 				.filter( ( style ) => style.__unstableType === 'svgs' )
 				.map( ( style ) => style.assets )
 				.join( '' ),
-		[ styles ]
+		[ stylesArray ]
 	);
 
 	return (
 		<>
 			{ /* Use an empty style element to have a document reference,
 			     but this could be any element. */ }
-			<style ref={ useDarkThemeBodyClassName( styles ) } />
+			<style ref={ useDarkThemeBodyClassName( stylesArray ) } />
 			{ transformedStyles.map( ( css, index ) => (
 				<style key={ index }>{ css }</style>
 			) ) }