@wordpress/block-editor 12.15.0 → 12.16.0

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.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/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/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%);

package/src/components/global-styles/color-panel.js

@@ -12,12 +12,12 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
-	TabPanel,
 	ColorIndicator,
 	Flex,
 	FlexItem,
 	Dropdown,
 	Button,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
@@ -29,6 +29,7 @@ import ColorGradientControl from '../colors-gradients/control';
 import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
 import { getValueFromVariable } from './utils';
 import { setImmutably } from '../../utils/object';
+import { unlock } from '../../lock-unlock';
 
 export function useHasColorPanel( settings ) {
 	const hasTextPanel = useHasTextPanel( settings );
@@ -203,12 +204,11 @@ function ColorPanelDropdown( {
 	colorGradientControlSettings,
 	panelId,
 } ) {
-	const tabConfigs = tabs.map( ( { key, label: tabLabel } ) => {
-		return {
-			name: key,
-			title: tabLabel,
-		};
-	} );
+	const currentTab = tabs.find( ( tab ) => tab.userValue !== undefined );
+	// 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 (
 		<ToolsPanelItem
@@ -258,26 +258,35 @@ function ColorPanelDropdown( {
 								/>
 							) }
 							{ tabs.length > 1 && (
-								<TabPanel tabs={ tabConfigs }>
-									{ ( tab ) => {
-										const selectedTab = tabs.find(
-											( t ) => t.key === tab.name
-										);
-
-										if ( ! selectedTab ) {
-											return null;
-										}
-
+								<Tabs initialTabId={ currentTab?.key }>
+									<Tabs.TabList>
+										{ tabs.map( ( tab ) => (
+											<Tabs.Tab
+												key={ tab.key }
+												tabId={ tab.key }
+											>
+												{ tab.label }
+											</Tabs.Tab>
+										) ) }
+									</Tabs.TabList>
+
+									{ tabs.map( ( tab ) => {
 										return (
-											<ColorPanelTab
-												{ ...selectedTab }
-												colorGradientControlSettings={
-													colorGradientControlSettings
-												}
-											/>
+											<Tabs.TabPanel
+												key={ tab.key }
+												tabId={ tab.key }
+												focusable={ false }
+											>
+												<ColorPanelTab
+													{ ...tab }
+													colorGradientControlSettings={
+														colorGradientControlSettings
+													}
+												/>
+											</Tabs.TabPanel>
 										);
-									} }
-								</TabPanel>
+									} ) }
+								</Tabs>
 							) }
 						</div>
 					</DropdownContentWrapper>

package/src/components/global-styles/filters-panel.js

@@ -12,9 +12,9 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
-	__experimentalVStack as VStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	Button,
+	MenuGroup,
 	ColorIndicator,
 	DuotonePicker,
 	DuotoneSwatch,
@@ -82,6 +82,10 @@ function FiltersToolsPanel( {
 			label={ _x( 'Filters', 'Name for applying graphical effects' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
+			dropdownMenuProps={ {
+				placement: 'left-start',
+				offset: 258, // sidebar width (280px) - button width (24px) + border (2px)
+			} }
 		>
 			{ children }
 		</ToolsPanel>
@@ -197,8 +201,8 @@ export default function FiltersPanel( {
 							);
 						} }
 						renderContent={ () => (
-							<DropdownContentWrapper paddingSize="medium">
-								<VStack>
+							<DropdownContentWrapper paddingSize="small">
+								<MenuGroup label={ __( 'Duotone' ) }>
 									<p>
 										{ __(
 											'Create a two-tone color effect without losing your original image.'
@@ -213,7 +217,7 @@ export default function FiltersPanel( {
 										value={ duotone }
 										onChange={ setDuotone }
 									/>
-								</VStack>
+								</MenuGroup>
 							</DropdownContentWrapper>
 						) }
 					/>