@wordpress/block-editor 8.6.0 → 9.2.0

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

@@ -7,12 +7,12 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
-	__experimentalHStack as HStack,
-	FlexItem,
+	Button,
 	ColorIndicator,
 	Dropdown,
+	FlexItem,
+	__experimentalHStack as HStack,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 
 /**
@@ -20,77 +20,145 @@ import {
  */
 import ColorGradientControl from './control';
 
+// When the `ColorGradientSettingsDropdown` controls are being rendered to a
+// `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.
+const WithToolsPanelItem = ( { setting, children, panelId, ...props } ) => {
+	const clearValue = () => {
+		if ( setting.colorValue ) {
+			setting.onColorChange();
+		} else if ( setting.gradientValue ) {
+			setting.onGradientChange();
+		}
+	};
+	return (
+		<ToolsPanelItem
+			hasValue={ () => {
+				return !! setting.colorValue || !! setting.gradientValue;
+			} }
+			label={ setting.label }
+			onDeselect={ clearValue }
+			isShownByDefault={
+				setting.isShownByDefault !== undefined
+					? setting.isShownByDefault
+					: true
+			}
+			{ ...props }
+			className="block-editor-tools-panel-color-gradient-settings__item"
+			panelId={ panelId }
+			// Pass resetAllFilter if supplied due to rendering via SlotFill
+			// into parent ToolsPanel.
+			resetAllFilter={ setting.resetAllFilter }
+		>
+			{ children }
+		</ToolsPanelItem>
+	);
+};
+
+const LabeledColorIndicator = ( { colorValue, label } ) => (
+	<HStack justify="flex-start">
+		<ColorIndicator
+			className="block-editor-panel-color-gradient-settings__color-indicator"
+			colorValue={ colorValue }
+		/>
+		<FlexItem>{ label }</FlexItem>
+	</HStack>
+);
+
+// Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`
+// or as a `Button` if it isn't e.g. the controls are being rendered in
+// a `ToolsPanel`.
+const renderToggle = ( settings ) => ( { onToggle, isOpen } ) => {
+	const { colorValue, label } = settings;
+
+	const toggleProps = {
+		onClick: onToggle,
+		className: classnames(
+			'block-editor-panel-color-gradient-settings__dropdown',
+			{ 'is-open': isOpen }
+		),
+		'aria-expanded': isOpen,
+	};
+
+	return (
+		<Button { ...toggleProps }>
+			<LabeledColorIndicator colorValue={ colorValue } label={ label } />
+		</Button>
+	);
+};
+
+// Renders a collection of color controls as dropdowns. Depending upon the
+// context in which these dropdowns are being rendered, they may be wrapped
+// in an `ItemGroup` with each dropdown's toggle as an `Item`, or alternatively,
+// the may be individually wrapped in a `ToolsPanelItem` with the toggle as
+// a regular `Button`.
+//
+// For more context see: https://github.com/WordPress/gutenberg/pull/40084
 export default function ColorGradientSettingsDropdown( {
 	colors,
-	gradients,
 	disableCustomColors,
 	disableCustomGradients,
-	__experimentalHasMultipleOrigins,
-	__experimentalIsRenderedInSidebar,
 	enableAlpha,
+	gradients,
 	settings,
+	__experimentalHasMultipleOrigins,
+	__experimentalIsRenderedInSidebar,
+	...props
 } ) {
-	let dropdownPosition;
+	let popoverProps;
 	if ( __experimentalIsRenderedInSidebar ) {
-		dropdownPosition = 'bottom left';
+		popoverProps = {
+			placement: 'left-start',
+			offset: 36,
+		};
 	}
 
 	return (
-		<ItemGroup
-			isBordered
-			isSeparated
-			className="block-editor-panel-color-gradient-settings__item-group"
-		>
-			{ settings.map(
-				( setting, index ) =>
+		<>
+			{ settings.map( ( setting, index ) => {
+				const controlProps = {
+					clearable: false,
+					colorValue: setting.colorValue,
+					colors,
+					disableCustomColors,
+					disableCustomGradients,
+					enableAlpha,
+					gradientValue: setting.gradientValue,
+					gradients,
+					label: setting.label,
+					onColorChange: setting.onColorChange,
+					onGradientChange: setting.onGradientChange,
+					showTitle: false,
+					__experimentalHasMultipleOrigins,
+					__experimentalIsRenderedInSidebar,
+					...setting,
+				};
+				const toggleSettings = {
+					colorValue: setting.gradientValue ?? setting.colorValue,
+					label: setting.label,
+				};
+
+				return (
 					setting && (
-						<Dropdown
+						// If not in an `ItemGroup` wrap the dropdown in a
+						// `ToolsPanelItem`
+						<WithToolsPanelItem
 							key={ index }
-							position={ dropdownPosition }
-							className="block-editor-panel-color-gradient-settings__dropdown"
-							contentClassName="block-editor-panel-color-gradient-settings__dropdown-content"
-							renderToggle={ ( { isOpen, onToggle } ) => {
-								return (
-									<Item
-										onClick={ onToggle }
-										className={ classnames(
-											'block-editor-panel-color-gradient-settings__item',
-											{ 'is-open': isOpen }
-										) }
-									>
-										<HStack justify="flex-start">
-											<ColorIndicator
-												className="block-editor-panel-color-gradient-settings__color-indicator"
-												colorValue={
-													setting.gradientValue ??
-													setting.colorValue
-												}
-											/>
-											<FlexItem>
-												{ setting.label }
-											</FlexItem>
-										</HStack>
-									</Item>
-								);
-							} }
-							renderContent={ () => (
-								<ColorGradientControl
-									showTitle={ false }
-									{ ...{
-										colors,
-										gradients,
-										disableCustomColors,
-										disableCustomGradients,
-										__experimentalHasMultipleOrigins,
-										__experimentalIsRenderedInSidebar,
-										enableAlpha,
-										...setting,
-									} }
-								/>
-							) }
-						/>
+							setting={ setting }
+							{ ...props }
+						>
+							<Dropdown
+								popoverProps={ popoverProps }
+								className="block-editor-tools-panel-color-gradient-settings__dropdown"
+								contentClassName="block-editor-panel-color-gradient-settings__dropdown-content"
+								renderToggle={ renderToggle( toggleSettings ) }
+								renderContent={ () => (
+									<ColorGradientControl { ...controlProps } />
+								) }
+							/>
+						</WithToolsPanelItem>
 					)
-			) }
-		</ItemGroup>
+				);
+			} ) }
+		</>
 	);
 }

package/src/components/colors-gradients/panel-color-gradient-settings.js

@@ -9,27 +9,19 @@ import { every, isEmpty } from 'lodash';
  */
 import {
 	__experimentalSpacer as Spacer,
-	ColorIndicator,
-	PanelBody,
+	__experimentalToolsPanel as ToolsPanel,
 } from '@wordpress/components';
-import { sprintf, __ } from '@wordpress/i18n';
+import { useRegistry } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import ColorGradientSettingsDropdown from './dropdown';
-import { getColorObjectByColorValue } from '../colors';
-import { __experimentalGetGradientObjectByGradientValue } from '../gradients';
 import useSetting from '../use-setting';
 import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
 import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';
 
-// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)
-const colorIndicatorAriaLabel = __( '(%s: color %s)' );
-
-// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)
-const gradientIndicatorAriaLabel = __( '(%s: gradient %s)' );
-
 const colorsAndGradientKeys = [
 	'colors',
 	'disableCustomColors',
@@ -37,55 +29,6 @@ const colorsAndGradientKeys = [
 	'disableCustomGradients',
 ];
 
-const Indicators = ( { colors, gradients, settings } ) => {
-	return settings.map(
-		(
-			{
-				colorValue,
-				gradientValue,
-				label,
-				colors: availableColors,
-				gradients: availableGradients,
-			},
-			index
-		) => {
-			if ( ! colorValue && ! gradientValue ) {
-				return null;
-			}
-			let ariaLabel;
-			if ( colorValue ) {
-				const colorObject = getColorObjectByColorValue(
-					availableColors || colors,
-					colorValue
-				);
-				ariaLabel = sprintf(
-					colorIndicatorAriaLabel,
-					label.toLowerCase(),
-					( colorObject && colorObject.name ) || colorValue
-				);
-			} else {
-				const gradientObject = __experimentalGetGradientObjectByGradientValue(
-					availableGradients || gradients,
-					colorValue
-				);
-				ariaLabel = sprintf(
-					gradientIndicatorAriaLabel,
-					label.toLowerCase(),
-					( gradientObject && gradientObject.name ) || gradientValue
-				);
-			}
-
-			return (
-				<ColorIndicator
-					key={ index }
-					colorValue={ colorValue || gradientValue }
-					aria-label={ ariaLabel }
-				/>
-			);
-		}
-	);
-};
-
 export const PanelColorGradientSettingsInner = ( {
 	className,
 	colors,
@@ -99,8 +42,9 @@ export const PanelColorGradientSettingsInner = ( {
 	__experimentalHasMultipleOrigins,
 	__experimentalIsRenderedInSidebar,
 	enableAlpha,
-	...props
 } ) => {
+	const panelId = useInstanceId( PanelColorGradientSettingsInner );
+	const { batch } = useRegistry();
 	if (
 		isEmpty( colors ) &&
 		isEmpty( gradients ) &&
@@ -120,28 +64,38 @@ export const PanelColorGradientSettingsInner = ( {
 		return null;
 	}
 
-	const titleElement = (
-		<span className="block-editor-panel-color-gradient-settings__panel-title">
-			{ title }
-			<Indicators
-				colors={ colors }
-				gradients={ gradients }
-				settings={ settings }
-			/>
-		</span>
-	);
-
 	return (
-		<PanelBody
+		<ToolsPanel
 			className={ classnames(
 				'block-editor-panel-color-gradient-settings',
 				className
 			) }
-			title={ showTitle ? titleElement : undefined }
-			{ ...props }
+			label={ showTitle ? title : undefined }
+			resetAll={ () => {
+				batch( () => {
+					settings.forEach(
+						( {
+							colorValue,
+							gradientValue,
+							onColorChange,
+							onGradientChange,
+						} ) => {
+							if ( colorValue ) {
+								onColorChange();
+							} else if ( gradientValue ) {
+								onGradientChange();
+							}
+						}
+					);
+				} );
+			} }
+			panelId={ panelId }
+			__experimentalFirstVisibleItemClass="first"
+			__experimentalLastVisibleItemClass="last"
 		>
 			<ColorGradientSettingsDropdown
 				settings={ settings }
+				panelId={ panelId }
 				{ ...{
 					colors,
 					gradients,
@@ -157,7 +111,7 @@ export const PanelColorGradientSettingsInner = ( {
 					<Spacer marginY={ 4 } /> { children }
 				</>
 			) }
-		</PanelBody>
+		</ToolsPanel>
 	);
 };
 

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

@@ -10,25 +10,14 @@
 	min-width: 0;
 }
 
-.block-editor-panel-color-gradient-settings {
-	.block-editor-panel-color-gradient-settings__panel-title {
-		display: flex;
-		gap: $grid-unit-10;
-
-		.component-color-indicator {
-			width: $grid-unit-15;
-			height: $grid-unit-15;
-			align-self: center;
-
-			&:first-child {
-				margin-left: $grid-unit-15;
-			}
-		}
+.block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings {
+	&,
+	& > div:not(:first-of-type) {
+		display: block;
 	}
+}
 
-	&.is-opened &__panel-title .component-color-indicator {
-		display: none;
-	}
+.block-editor-panel-color-gradient-settings {
 
 	// Must equal $color-palette-circle-size from:
 	// @wordpress/components/src/circular-option-picker/style.scss
@@ -49,52 +38,65 @@
 		margin-bottom: inherit;
 	}
 
-	.block-editor-panel-color-gradient-settings__dropdown {
-		display: block;
-	}
 }
 
-.block-editor-panel-color-gradient-settings__dropdown {
-	width: 100%;
+.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
+	width: $sidebar-width;
 }
 
-.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
-	& > div {
-		width: $sidebar-width;
-	}
+
+.block-editor-panel-color-gradient-settings__color-indicator {
+	// Show a diagonal line (crossed out) for empty swatches.
+	background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
 }
 
-@include break-medium() {
-	.block-editor-panel-color-gradient-settings__dropdown-content {
-		.components-popover__content {
-			margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 } !important;
-		}
+/**
+* The following styles replicate the separated border of the
+* `ItemGroup` component but allows for hidden items. This is because
+* to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
+* must at least render a placeholder which would otherwise interfere
+* with the `:last-child` styles.
+*/
+.block-editor-tools-panel-color-gradient-settings__item {
+	padding: 0;
+
+	// Border styles.
+	border-left: 1px solid rgba(0, 0, 0, 0.1);
+	border-right: 1px solid rgba(0, 0, 0, 0.1);
+	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+	&.first {
+		margin-top: $grid-unit-30;
+		border-top-left-radius: 2px;
+		border-top-right-radius: 2px;
+		border-top: 1px solid rgba(0, 0, 0, 0.1);
+	}
 
-		&.is-from-top .components-popover__content {
-			margin-top: #{ -($grid-unit-60 + $grid-unit-15) } !important;
-		}
+	&.last {
+		border-bottom-left-radius: 2px;
+		border-bottom-right-radius: 2px;
+	}
 
-		&.is-from-bottom .components-popover__content {
-			margin-bottom: #{ -($grid-unit-60 + $grid-unit-15) } !important;
-		}
+	> div,
+	> div > button {
+		border-radius: inherit;
 	}
 }
 
-.block-editor-panel-color-gradient-settings__dropdown:last-child > div {
-	border-bottom-width: 0;
-}
+.block-editor-tools-panel-color-gradient-settings__dropdown {
+	display: block;
+	padding: 0;
 
-.block-editor-panel-color-gradient-settings__item {
-	padding-top: $grid-unit-15 !important;
-	padding-bottom: $grid-unit-15 !important;
-	.block-editor-panel-color-gradient-settings__color-indicator {
-		// Show a diagonal line (crossed out) for empty swatches.
-		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
-	}
+	> button {
+		height: 46px;
 
-	&.is-open {
-		background: $gray-100;
-		color: var(--wp-admin-theme-color);
+		&.is-open {
+			background: $gray-100;
+			color: var(--wp-admin-theme-color);
+		}
 	}
 }
 
+.block-editor-panel-color-gradient-settings__dropdown {
+	width: 100%;
+}

package/src/components/convert-to-group-buttons/toolbar.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { switchToBlockType } from '@wordpress/blocks';
+import { switchToBlockType, store as blocksStore } from '@wordpress/blocks';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { group, row, stack } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
@@ -28,14 +28,20 @@ function BlockGroupToolbar() {
 	} = useConvertToGroupButtonProps();
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 
-	const { canRemove } = useSelect(
+	const { canRemove, variations } = useSelect(
 		( select ) => {
 			const { canRemoveBlocks } = select( blockEditorStore );
+			const { getBlockVariations } = select( blocksStore );
+
 			return {
 				canRemove: canRemoveBlocks( clientIds ),
+				variations: getBlockVariations(
+					groupingBlockName,
+					'transform'
+				),
 			};
 		},
-		[ clientIds ]
+		[ clientIds, groupingBlockName ]
 	);
 
 	const onConvertToGroup = ( layout = 'group' ) => {
@@ -63,6 +69,13 @@ function BlockGroupToolbar() {
 		return null;
 	}
 
+	const canInsertRow = !! variations.find(
+		( { name } ) => name === 'group-row'
+	);
+	const canInsertStack = !! variations.find(
+		( { name } ) => name === 'group-stack'
+	);
+
 	return (
 		<ToolbarGroup>
 			<ToolbarButton
@@ -70,16 +83,20 @@ function BlockGroupToolbar() {
 				label={ _x( 'Group', 'verb' ) }
 				onClick={ onConvertToGroup }
 			/>
-			<ToolbarButton
-				icon={ row }
-				label={ _x( 'Row', 'single horizontal line' ) }
-				onClick={ onConvertToRow }
-			/>
-			<ToolbarButton
-				icon={ stack }
-				label={ _x( 'Stack', 'verb' ) }
-				onClick={ onConvertToStack }
-			/>
+			{ canInsertRow && (
+				<ToolbarButton
+					icon={ row }
+					label={ _x( 'Row', 'single horizontal line' ) }
+					onClick={ onConvertToRow }
+				/>
+			) }
+			{ canInsertStack && (
+				<ToolbarButton
+					icon={ stack }
+					label={ _x( 'Stack', 'verb' ) }
+					onClick={ onConvertToStack }
+				/>
+			) }
 		</ToolbarGroup>
 	);
 }

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

@@ -9,7 +9,7 @@ $popover-padding: $grid-unit-20;
 $swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover-padding, $swatch-size + $swatch-gap));
 
 .block-editor-duotone-control__popover {
-	> .components-popover__content > div {
+	> .components-popover__content {
 		padding: $popover-padding;
 		width: $popover-width;
 	}
@@ -34,9 +34,3 @@ $swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover
 	margin: $grid-unit-20 0;
 	font-size: $helptext-font-size;
 }
-
-// Better align the popover under the swatch.
-// @todo: when the positioning for popovers gets refactored, this can presumably be removed.
-.block-editor-duotone-control__popover:not([data-y-axis="middle"][data-x-axis="right"]) > .components-popover__content {
-	margin-left: -14px;
-}