@wordpress/block-editor 12.14.0 → 12.16.0

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

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
 import { Popover } from '@wordpress/components';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 import { useRef } from '@wordpress/element';
@@ -16,9 +15,9 @@ import {
 	InsertionPointOpenRef,
 	default as InsertionPoint,
 } from './insertion-point';
-import SelectedBlockTools from './selected-block-tools';
+import BlockToolbarPopover from './block-toolbar-popover';
+import BlockToolbarBreadcrumb from './block-toolbar-breadcrumb';
 import { store as blockEditorStore } from '../../store';
-import BlockContextualToolbar from './block-contextual-toolbar';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
 
@@ -28,6 +27,7 @@ function selector( select ) {
 		getFirstMultiSelectedBlockClientId,
 		getBlock,
 		getSettings,
+		hasMultiSelection,
 		__unstableGetEditorMode,
 		isTyping,
 	} = select( blockEditorStore );
@@ -36,18 +36,35 @@ function selector( select ) {
 		getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
 
 	const { name = '', attributes = {} } = getBlock( clientId ) || {};
+	const editorMode = __unstableGetEditorMode();
+	const hasSelectedBlock = clientId && name;
+	const isEmptyDefaultBlock = isUnmodifiedDefaultBlock( {
+		name,
+		attributes,
+	} );
+	const _showEmptyBlockSideInserter =
+		clientId &&
+		! isTyping() &&
+		editorMode === 'edit' &&
+		isUnmodifiedDefaultBlock( { name, attributes } );
+	const maybeShowBreadcrumb =
+		hasSelectedBlock &&
+		! hasMultiSelection() &&
+		( editorMode === 'navigation' || editorMode === 'zoom-out' );
 
 	return {
 		clientId,
 		hasFixedToolbar: getSettings().hasFixedToolbar,
-		hasSelectedBlock: clientId && name,
 		isTyping: isTyping(),
-		isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
-		showEmptyBlockSideInserter:
-			clientId &&
-			! isTyping() &&
-			__unstableGetEditorMode() === 'edit' &&
-			isUnmodifiedDefaultBlock( { name, attributes } ),
+		isZoomOutMode: editorMode === 'zoom-out',
+		showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
+		showBreadcrumb: ! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
+		showBlockToolbar:
+			! getSettings().hasFixedToolbar &&
+			! _showEmptyBlockSideInserter &&
+			hasSelectedBlock &&
+			! isEmptyDefaultBlock &&
+			! maybeShowBreadcrumb,
 	};
 }
 
@@ -65,14 +82,14 @@ export default function BlockTools( {
 	__unstableContentRef,
 	...props
 } ) {
-	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
 		clientId,
 		hasFixedToolbar,
-		hasSelectedBlock,
 		isTyping,
 		isZoomOutMode,
 		showEmptyBlockSideInserter,
+		showBreadcrumb,
+		showBlockToolbar,
 	} = useSelect( selector, [] );
 	const isMatch = useShortcutEventMatch();
 	const { getSelectedBlockClientIds, getBlockRootClientId } =
@@ -162,12 +179,6 @@ export default function BlockTools( {
 	const blockToolbarRef = usePopoverScroll( __unstableContentRef );
 	const blockToolbarAfterRef = usePopoverScroll( __unstableContentRef );
 
-	// Conditions for fixed toolbar
-	// 1. Not zoom out mode
-	// 2. It's a large viewport. If it's a smaller viewport, let the floating toolbar handle it as it already has styles attached to make it render that way.
-	// 3. Fixed toolbar is enabled
-	const isTopToolbar = ! isZoomOutMode && hasFixedToolbar && isLargeViewport;
-
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div { ...props } onKeyDown={ onKeyDown }>
@@ -177,11 +188,6 @@ export default function BlockTools( {
 						__unstableContentRef={ __unstableContentRef }
 					/>
 				) }
-				{ /* If there is no slot available, such as in the standalone block editor, render within the editor */ }
-
-				{ ! isLargeViewport && ( // Small viewports always get a fixed toolbar
-					<BlockContextualToolbar isFixed />
-				) }
 
 				{ showEmptyBlockSideInserter && (
 					<EmptyBlockInserter
@@ -189,17 +195,24 @@ export default function BlockTools( {
 						clientId={ clientId }
 					/>
 				) }
-				{ /* Even if the toolbar is fixed, the block popover is still
-					needed for navigation and zoom-out mode. */ }
-				{ ! showEmptyBlockSideInserter && hasSelectedBlock && (
-					<SelectedBlockTools
+
+				{ showBlockToolbar && (
+					<BlockToolbarPopover
+						__unstableContentRef={ __unstableContentRef }
+						clientId={ clientId }
+						isTyping={ isTyping }
+					/>
+				) }
+
+				{ showBreadcrumb && (
+					<BlockToolbarBreadcrumb
 						__unstableContentRef={ __unstableContentRef }
 						clientId={ clientId }
 					/>
 				) }
 
-				{ /* Used for the inline rich text toolbar. */ }
-				{ ! isTopToolbar && (
+				{ /* Used for the inline rich text toolbar. Until this toolbar is combined into BlockToolbar, someone implementing their own BlockToolbar will also need to use this to see the image caption toolbar. */ }
+				{ ! isZoomOutMode && ! hasFixedToolbar && (
 					<Popover.Slot
 						name="block-toolbar"
 						ref={ blockToolbarRef }

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

@@ -85,178 +85,6 @@
 	}
 }
 
-/**
- * Block Toolbar when contextual.
- */
-
-.block-editor-block-contextual-toolbar {
-	// Block UI appearance.
-	display: inline-flex;
-	border: $border-width solid $gray-900;
-	border-radius: $radius-block-ui;
-	background-color: $white;
-
-	.block-editor-block-toolbar .components-toolbar-group,
-	.block-editor-block-toolbar .components-toolbar {
-		border-right-color: $gray-900;
-	}
-
-	&.is-fixed {
-		overflow: hidden;
-
-		.block-editor-block-toolbar {
-			overflow: auto;
-			overflow-y: hidden;
-		}
-
-		border-bottom: $border-width solid $gray-200;
-		border-radius: 0;
-
-		.block-editor-block-toolbar .components-toolbar-group,
-		.block-editor-block-toolbar .components-toolbar {
-			border-right-color: $gray-200;
-		}
-	}
-
-	@include break-medium() {
-		&.is-fixed {
-			& > .block-editor-block-toolbar {
-				flex-grow: initial;
-				width: initial;
-
-				// Add a border as separator in the block toolbar.
-				&::before {
-					content: "";
-					width: $border-width;
-					height: 3 * $grid-unit;
-					margin-top: $grid-unit + $grid-unit-05;
-					margin-right: 0;
-					background-color: $gray-300;
-					position: relative;
-					left: math.div(-$grid-unit-05, 2);
-					top: -1px;
-				}
-			}
-
-			& > .block-editor-block-toolbar__group-collapse-fixed-toolbar {
-				border: none;
-
-				.show-icon-labels & {
-					.components-button.has-icon {
-						// Hide the button icons when labels are set to display...
-						svg {
-							display: none;
-						}
-						// ... and display labels.
-						&::after {
-							content: attr(aria-label);
-							font-size: $helptext-font-size;
-						}
-					}
-				}
-
-				// Add a border as separator in the block toolbar.
-				&::before {
-					content: "";
-					width: $border-width;
-					height: 3 * $grid-unit;
-					margin-top: $grid-unit + $grid-unit-05;
-					margin-right: $grid-unit-10;
-					background-color: $gray-300;
-					position: relative;
-					left: 0;
-					top: -1px;
-				}
-			}
-
-			& > .block-editor-block-toolbar__group-expand-fixed-toolbar {
-				border: none;
-
-				.show-icon-labels & {
-					width: $grid-unit-80 * 4;
-					.components-button.has-icon {
-						// Hide the button icons when labels are set to display...
-						svg {
-							display: none;
-						}
-						// ... and display labels.
-						&::after {
-							content: attr(aria-label);
-							font-size: $helptext-font-size;
-						}
-					}
-				}
-
-				// 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: -8px;
-					height: 3 * $grid-unit;
-					top: -1px;
-				}
-			}
-
-			.show-icon-labels & {
-				.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;
-					}
-				}
-			}
-		}
-
-		&.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;
-			}
-		}
-	}
-}
-
 /**
  * Block Label for Navigation/Selection Mode
  */
@@ -349,6 +177,7 @@
 }
 
 .components-popover.block-editor-block-list__block-popover {
+
 	// Position the block toolbar.
 	.block-editor-block-list__block-selection-button,
 	.block-editor-block-contextual-toolbar {
@@ -357,6 +186,30 @@
 		margin-bottom: $grid-unit-15;
 	}
 
+	.block-editor-block-contextual-toolbar {
+		border: $border-width solid $gray-900;
+		border-radius: $radius-block-ui;
+		overflow: visible; // allow the parent selector to be visible
+		position: static;
+		width: auto;
+
+		&.has-parent {
+			margin-left: calc(#{$grid-unit-60} + #{$grid-unit-10});
+			.show-icon-labels & {
+				margin-left: 0;
+			}
+		}
+	}
+
+	.block-editor-block-toolbar {
+		overflow: visible;
+	}
+
+	.block-editor-block-toolbar .components-toolbar-group,
+	.block-editor-block-toolbar .components-toolbar {
+		border-right-color: $gray-900;
+	}
+
 	// Hide the block toolbar if the insertion point is shown.
 	&.is-insertion-point-visible {
 		visibility: hidden;
@@ -368,6 +221,41 @@
 		// It's essential to hide the toolbar/popover so that `dragEnter` events can pass through them to the underlying elements.
 		animation: hide-during-dragging 1ms linear forwards;
 	}
+
+	.block-editor-block-parent-selector {
+		position: absolute;
+		left: calc(-#{$grid-unit-60} - #{$grid-unit-10} - #{$border-width});
+
+		&::before {
+			content: "";
+		}
+
+		.block-editor-block-parent-selector__button {
+			border: 1px solid $gray-900;
+			padding-right: 6px;
+			padding-left: 6px;
+			background-color: $white;
+		}
+	}
+
+	// Show Icon Label Styles
+	.show-icon-labels & {
+
+		.block-editor-block-parent-selector {
+			position: static;
+			margin-top: -$border-width;
+			margin-left: -$border-width;
+			margin-bottom: -$border-width;
+
+			.block-editor-block-parent-selector__button {
+				position: static;
+			}
+		}
+		.block-editor-block-mover__move-button-container,
+		.block-editor-block-toolbar__block-controls .block-editor-block-mover {
+			border-left: 1px solid $gray-900;
+		}
+	}
 }
 
 .is-dragging-components-draggable .components-tooltip {

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

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -25,11 +26,10 @@ function BlockTypesList( {
 	label,
 	isDraggable = true,
 } ) {
+	const className = 'block-editor-block-types-list';
+	const listId = useInstanceId( BlockTypesList, className );
 	return (
-		<InserterListboxGroup
-			className="block-editor-block-types-list"
-			aria-label={ label }
-		>
+		<InserterListboxGroup className={ className } aria-label={ label }>
 			{ chunk( items, 3 ).map( ( row, i ) => (
 				<InserterListboxRow key={ i }>
 					{ row.map( ( item, j ) => (
@@ -43,6 +43,7 @@ function BlockTypesList( {
 							onHover={ onHover }
 							isDraggable={ isDraggable && ! item.isDisabled }
 							isFirst={ i === 0 && j === 0 }
+							rowId={ `${ listId }-${ i }` }
 						/>
 					) ) }
 				</InserterListboxRow>

package/src/components/block-types-list/index.native.js

@@ -15,7 +15,7 @@ import {
  * WordPress dependencies
  */
 import { useState, useEffect } from '@wordpress/element';
-import { BottomSheet, Gradient, InserterButton } from '@wordpress/components';
+import { BottomSheet, Gradient } from '@wordpress/components';
 import {
 	usePreferredColorScheme,
 	usePreferredColorSchemeStyle,
@@ -25,6 +25,7 @@ import {
  * Internal dependencies
  */
 import styles from './style.scss';
+import InserterButton from '../inserter-button';
 
 const MIN_COL_NUM = 3;
 

package/src/components/block-variation-picker/index.native.js

@@ -20,7 +20,6 @@ import {
 	PanelBody,
 	BottomSheet,
 	FooterMessageControl,
-	InserterButton,
 } from '@wordpress/components';
 import { Icon, close } from '@wordpress/icons';
 
@@ -29,6 +28,7 @@ import { Icon, close } from '@wordpress/icons';
  */
 import styles from './style.scss';
 import { store as blockEditorStore } from '../../store';
+import InserterButton from '../inserter-button';
 
 const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
 

package/src/components/button-block-appender/content.scss

@@ -39,8 +39,8 @@
 	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
 	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > &,
 	// Legacy groups have an inner container so need to be targeted separately
-	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > &,
-	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > & {
+	.block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > &,
+	.block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > & {
 		pointer-events: none;
 
 		&::after {

package/src/components/colors-gradients/control.js

@@ -10,15 +10,16 @@ import { __ } from '@wordpress/i18n';
 import {
 	BaseControl,
 	__experimentalVStack as VStack,
-	TabPanel,
 	ColorPalette,
 	GradientPicker,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { useSettings } from '../use-settings';
+import { unlock } from '../../lock-unlock';
 
 const colorsAndGradientKeys = [
 	'colors',
@@ -27,18 +28,7 @@ const colorsAndGradientKeys = [
 	'disableCustomGradients',
 ];
 
-const TAB_COLOR = {
-	name: 'color',
-	title: __( 'Solid' ),
-	value: 'color',
-};
-const TAB_GRADIENT = {
-	name: 'gradient',
-	title: __( 'Gradient' ),
-	value: 'gradient',
-};
-
-const TABS_SETTINGS = [ TAB_COLOR, TAB_GRADIENT ];
+const TAB_IDS = { color: 'color', gradient: 'gradient' };
 
 function ColorGradientControlInner( {
 	colors,
@@ -69,7 +59,7 @@ function ColorGradientControlInner( {
 	}
 
 	const tabPanels = {
-		[ TAB_COLOR.value ]: (
+		[ TAB_IDS.color ]: (
 			<ColorPalette
 				value={ colorValue }
 				onChange={
@@ -89,7 +79,7 @@ function ColorGradientControlInner( {
 				headingLevel={ headingLevel }
 			/>
 		),
-		[ TAB_GRADIENT.value ]: (
+		[ TAB_IDS.gradient ]: (
 			<GradientPicker
 				__nextHasNoMargin
 				value={ gradientValue }
@@ -117,6 +107,11 @@ function ColorGradientControlInner( {
 		</div>
 	);
 
+	// Unlocking `Tabs` too early causes the `unlock` method to receive an empty
+	// object, due to circular dependencies.
+	// See https://github.com/WordPress/gutenberg/issues/52692
+	const { Tabs } = unlock( componentsPrivateApis );
+
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom
@@ -137,22 +132,46 @@ function ColorGradientControlInner( {
 						</legend>
 					) }
 					{ canChooseAColor && canChooseAGradient && (
-						<TabPanel
-							className="block-editor-color-gradient-control__tabs"
-							tabs={ TABS_SETTINGS }
-							initialTabName={
-								gradientValue
-									? TAB_GRADIENT.value
-									: !! canChooseAColor && TAB_COLOR.value
-							}
-						>
-							{ ( tab ) => renderPanelType( tab.value ) }
-						</TabPanel>
+						<div>
+							<Tabs
+								initialTabId={
+									gradientValue
+										? TAB_IDS.gradient
+										: !! canChooseAColor && TAB_IDS.color
+								}
+							>
+								<Tabs.TabList>
+									<Tabs.Tab tabId={ TAB_IDS.color }>
+										{ __( 'Solid' ) }
+									</Tabs.Tab>
+									<Tabs.Tab tabId={ TAB_IDS.gradient }>
+										{ __( 'Gradient' ) }
+									</Tabs.Tab>
+								</Tabs.TabList>
+								<Tabs.TabPanel
+									tabId={ TAB_IDS.color }
+									className={
+										'block-editor-color-gradient-control__panel'
+									}
+									focusable={ false }
+								>
+									{ tabPanels.color }
+								</Tabs.TabPanel>
+								<Tabs.TabPanel
+									tabId={ TAB_IDS.gradient }
+									className={
+										'block-editor-color-gradient-control__panel'
+									}
+									focusable={ false }
+								>
+									{ tabPanels.gradient }
+								</Tabs.TabPanel>
+							</Tabs>
+						</div>
 					) }
-					{ ! canChooseAGradient &&
-						renderPanelType( TAB_COLOR.value ) }
-					{ ! canChooseAColor &&
-						renderPanelType( TAB_GRADIENT.value ) }
+
+					{ ! canChooseAGradient && renderPanelType( TAB_IDS.color ) }
+					{ ! canChooseAColor && renderPanelType( TAB_IDS.gradient ) }
 				</VStack>
 			</fieldset>
 		</BaseControl>

package/src/components/colors-gradients/style.scss

@@ -15,12 +15,6 @@ $swatch-gap: 12px;
 	min-width: 0;
 }
 
-.block-editor-color-gradient-control__tabs {
-	.block-editor-color-gradient-control__panel {
-		padding: $grid-unit-20;
-	}
-}
-
 .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings {
 	&,
 	& > div:not(:first-of-type) {
@@ -33,7 +27,6 @@ $swatch-gap: 12px;
 		.components-circular-option-picker__swatches {
 			display: grid;
 			grid-template-columns: repeat(6, $swatch-size);
-			justify-content: space-between;
 		}
 	}
 

package/src/components/date-format-picker/index.js

@@ -78,12 +78,19 @@ function NonDefaultControls( { format, onChange } ) {
 	// formats.
 	const suggestedFormats = [
 		...new Set( [
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			'Y-m-d',
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'n/j/Y', 'short date format' ),
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'n/j/Y g:i A', 'short date format with time' ),
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'M j, Y', 'medium date format' ),
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'M j, Y g:i A', 'medium date format with time' ),
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'F j, Y', 'long date format' ),
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'M j', 'short date format without the year' ),
 		] ),
 	];

package/src/components/duotone-control/index.js

@@ -65,14 +65,11 @@ function DuotoneControl( {
 			} }
 			renderContent={ () => (
 				<MenuGroup label={ __( 'Duotone' ) }>
-					<div
-						id={ descriptionId }
-						className="block-editor-duotone-control__description"
-					>
+					<p>
 						{ __(
 							'Create a two-tone color effect without losing your original image.'
 						) }
-					</div>
+					</p>
 					<DuotonePicker
 						aria-label={ actionLabel }
 						aria-describedby={ descriptionId }

package/src/components/duotone-control/style.scss

@@ -3,7 +3,7 @@
 $swatch-size: 28px;
 $swatch-gap: 12px;
 
-$popover-width: $sidebar-width;
+$popover-width: 260px;
 $popover-padding: $grid-unit-20;
 
 $swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover-padding, $swatch-size + $swatch-gap));
@@ -26,11 +26,6 @@ $swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover
 	}
 }
 
-.block-editor-duotone-control__description {
-	margin: $grid-unit-20 0;
-	font-size: $helptext-font-size;
-}
-
 .block-editor-duotone-control__unset-indicator {
 	// Show a diagonal line (crossed out) for empty swatches.
 	background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);