@wordpress/block-editor 8.5.7 → 9.1.0

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

@@ -4,6 +4,10 @@
 
 .block-editor-block-list__insertion-point {
 	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
 }
 
 .block-editor-block-list__insertion-point-indicator {
@@ -38,21 +42,9 @@
 	left: calc(50% - #{$button-size-small * 0.5});
 }
 
-.block-editor-block-list__block-popover-inserter {
-	position: absolute;
-	top: -9999em;
-	margin-bottom: $block-padding;
-
-	&.is-visible {
-		position: static;
-	}
-}
-
 // Sibling inserter / "inbetweenserter".
-.block-editor-block-list__empty-block-inserter,
 .block-editor-default-block-appender,
-.block-editor-block-list__insertion-point-inserter,
-.block-editor-block-list__block-popover-inserter {
+.block-editor-block-list__insertion-point-inserter {
 	.block-editor-inserter__toggle.components-button.has-icon {
 		// Basic look
 		background: $gray-900;
@@ -98,7 +90,7 @@
 		position: sticky;
 		top: 0;
 		width: 100%;
-		z-index: z-index(".block-editor-block-list__block-popover");
+		z-index: z-index(".block-editor-block-popover");
 		// Fill up when empty
 		min-height: $block-toolbar-height;
 		display: block;
@@ -112,42 +104,6 @@
 			border-right-color: $gray-200;
 		}
 	}
-
-	.block-editor-block-mover-button {
-		overflow: hidden;
-	}
-
-	// Extra specificity to override standard toolbar button styles.
-	.block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
-		min-width: $block-toolbar-height*0.5;
-		width: $block-toolbar-height*0.5;
-
-		svg {
-			min-width: $block-toolbar-height*0.5;
-		}
-	}
-}
-
-// Position mover arrows for both toolbars.
-.block-editor-block-contextual-toolbar .block-editor-block-mover:not(.is-horizontal) {
-	// Position SVGs.
-	.block-editor-block-mover-button {
-		&:focus::before {
-			left: 0 !important;
-			min-width: 0;
-			width: 100%;
-		}
-	}
-
-	@include break-small() {
-		.block-editor-block-mover-button.is-up-button svg {
-			top: 5px;
-		}
-
-		.block-editor-block-mover-button.is-down-button svg {
-			bottom: 5px;
-		}
-	}
 }
 
 /**
@@ -217,37 +173,6 @@
 	}
 }
 
-/**
- * Popovers.
- */
-
-.block-editor-block-list__insertion-point-popover.is-without-arrow {
-	z-index: z-index(".block-editor-block-list__insertion-point-popover");
-	position: absolute;
-	pointer-events: none;
-
-	* {
-		pointer-events: none;
-	}
-
-	.is-with-inserter {
-		pointer-events: all;
-
-		* {
-			pointer-events: all;
-		}
-	}
-
-	.components-popover__content.components-popover__content {
-		// Needs specificity.
-		background: none;
-		border: none;
-		box-shadow: none;
-		overflow-y: visible;
-		margin-left: 0;
-	}
-}
-
 // Hide the popover block editor list while dragging.
 // Using a hacky animation to delay hiding the element.
 // It's needed because if we hide the element immediately upon dragging,
@@ -262,33 +187,12 @@
 }
 
 .components-popover.block-editor-block-list__block-popover {
-	z-index: z-index(".block-editor-block-list__block-popover");
-	position: absolute;
-
-	.components-popover__content {
-		margin: 0 !important;
-		min-width: auto;
-		width: max-content;
-		background: none;
-		border: none;
-		box-shadow: none;
-		overflow-y: visible;
-
-		// Allow clicking through the toolbar holder.
-		pointer-events: none;
-
-		.block-editor-block-list__block-selection-button,
-		.block-editor-block-contextual-toolbar,
-		.block-editor-block-list__empty-block-inserter {
-			pointer-events: all;
-		}
-
-		// Position the block toolbar.
-		.block-editor-block-list__block-selection-button,
-		.block-editor-block-contextual-toolbar {
-			margin-top: $grid-unit-15;
-			margin-bottom: $grid-unit-15;
-		}
+	// Position the block toolbar.
+	.block-editor-block-list__block-selection-button,
+	.block-editor-block-contextual-toolbar {
+		pointer-events: all;
+		margin-top: $grid-unit-15;
+		margin-bottom: $grid-unit-15;
 	}
 
 	// Hide the block toolbar if the insertion point is shown.
@@ -307,30 +211,3 @@
 .is-dragging-components-draggable .components-tooltip {
 	display: none;
 }
-
-
-// Size multiple sequential buttons to be optically balanced.
-// Icons are 36px, as set by a 24px icon and 12px padding.
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot, // When a plugin adds to a slot, the segment has a `components-toolbar` class.
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar, // The nesting order is sometimes reversed.
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown, // Targets unique markup for the "Replace" button.
-.block-editor-block-toolbar .components-toolbar-group {
-	padding-left: $grid-unit-15 * 0.5; // 6px.
-	padding-right: $grid-unit-15 * 0.5;
-
-	.components-button,
-	.components-button.has-icon.has-icon {
-		min-width: $block-toolbar-height - $grid-unit-15;
-		padding-left: $grid-unit-15 * 0.5; // 6px.
-		padding-right: $grid-unit-15 * 0.5;
-
-		svg {
-			min-width: $button-size-small; // This is the optimal icon size, and we size the whole button after this.
-		}
-
-		&::before {
-			left: 2px;
-			right: 2px;
-		}
-	}
-}

package/src/components/border-radius-control/input-controls.js

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
+import {
+	__experimentalUnitControl as UnitControl,
+	Tooltip,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 const CORNERS = {
@@ -39,16 +42,21 @@ export default function BoxInputControls( {
 			  };
 
 	// Controls are wrapped in tooltips as visible labels aren't desired here.
+	// Tooltip rendering also requires the UnitControl to be wrapped. See:
+	// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
 	return (
 		<div className="components-border-radius-control__input-controls-wrapper">
 			{ Object.entries( CORNERS ).map( ( [ key, label ] ) => (
-				<UnitControl
-					{ ...props }
-					key={ key }
-					aria-label={ label }
-					value={ values[ key ] }
-					onChange={ createHandleOnChange( key ) }
-				/>
+				<Tooltip text={ label } position="top" key={ key }>
+					<div className="components-border-radius-control__tooltip-wrapper">
+						<UnitControl
+							{ ...props }
+							aria-label={ label }
+							value={ values[ key ] }
+							onChange={ createHandleOnChange( key ) }
+						/>
+					</div>
+				</Tooltip>
 			) ) }
 		</div>
 	);

package/src/components/border-radius-control/style.scss

@@ -11,12 +11,14 @@
 		align-items: flex-start;
 
 		> .components-unit-control-wrapper {
-			width: calc(50% - 26px);
+			width: 110px;
 			margin-bottom: 0;
+			margin-right: #{ $grid-unit-15 };
+			flex-shrink: 0;
 		}
 
 		.components-range-control {
-			width: calc(50% - 26px);
+			flex: 1;
 			margin-bottom: 0;
 
 			.components-base-control__field {
@@ -39,7 +41,7 @@
 		width: 70%;
 		flex-wrap: wrap;
 
-		.components-unit-control-wrapper {
+		.components-border-radius-control__tooltip-wrapper {
 			width: calc(50% - #{ $grid-unit-10 });
 			margin-bottom: $grid-unit-10;
 			margin-right: $grid-unit-10;
@@ -49,6 +51,8 @@
 	.component-border-radius-control__linked-button.has-icon {
 		display: flex;
 		justify-content: center;
+		margin-left: 2px;
+		margin-top: 3px;
 
 		svg {
 			margin-right: 0;

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -231,7 +231,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
             >
               <button
                 aria-describedby={null}
-                className="components-button components-circular-option-picker__clear is-secondary is-small"
+                className="components-button components-circular-option-picker__clear is-tertiary"
                 onClick={[Function]}
                 type="button"
               >

package/src/components/color-style-selector/index.js

@@ -10,6 +10,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { DOWN } from '@wordpress/keycodes';
+import deprecated from '@wordpress/deprecated';
 
 const ColorSelectorSVGIcon = () => (
 	<SVG xmlns="https://www.w3.org/2000/svg" viewBox="0 0 20 20">
@@ -78,14 +79,22 @@ const renderToggleComponent = ( { TextColor, BackgroundColor } ) => ( {
 	);
 };
 
-const BlockColorsStyleSelector = ( { children, ...other } ) => (
-	<Dropdown
-		position="bottom right"
-		className="block-library-colors-selector"
-		contentClassName="block-library-colors-selector__popover"
-		renderToggle={ renderToggleComponent( other ) }
-		renderContent={ () => children }
-	/>
-);
+const BlockColorsStyleSelector = ( { children, ...other } ) => {
+	deprecated( `wp.blockEditor.BlockColorsStyleSelector`, {
+		alternative: 'block supports API',
+		since: '6.1',
+		version: '6.3',
+	} );
+
+	return (
+		<Dropdown
+			position="bottom right"
+			className="block-library-colors-selector"
+			contentClassName="block-library-colors-selector__popover"
+			renderToggle={ renderToggleComponent( other ) }
+			renderContent={ () => children }
+		/>
+	);
+};
 
 export default BlockColorsStyleSelector;

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

@@ -7,12 +7,14 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
-	__experimentalHStack as HStack,
-	FlexItem,
+	Button,
 	ColorIndicator,
 	Dropdown,
+	FlexItem,
+	__experimentalHStack as HStack,
+	__experimentalItem as Item,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 
 /**
@@ -20,77 +22,169 @@ import {
  */
 import ColorGradientControl from './control';
 
+// Conditionally wraps the `ColorGradientSettingsDropdown` color controls in an
+// `ItemGroup` allowing for a standalone group of controls to be
+// rendered semantically.
+const WithItemGroup = ( { __experimentalIsItemGroup, children } ) => {
+	if ( ! __experimentalIsItemGroup ) {
+		return children;
+	}
+
+	return (
+		<ItemGroup
+			isBordered
+			isSeparated
+			className="block-editor-panel-color-gradient-settings__item-group"
+		>
+			{ children }
+		</ItemGroup>
+	);
+};
+
+// When the `ColorGradientSettingsDropdown` controls are being rendered to a
+// `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.
+const WithToolsPanelItem = ( {
+	__experimentalIsItemGroup,
+	settings,
+	children,
+	...props
+} ) => {
+	if ( __experimentalIsItemGroup ) {
+		return children;
+	}
+
+	return (
+		<ToolsPanelItem
+			hasValue={ settings.hasValue }
+			label={ settings.label }
+			onDeselect={ settings.onDeselect }
+			isShownByDefault={ settings.isShownByDefault }
+			resetAllFilter={ settings.resetAllFilter }
+			{ ...props }
+			className="block-editor-tools-panel-color-gradient-settings__item"
+		>
+			{ 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 { __experimentalIsItemGroup, colorValue, label } = settings;
+
+	// Determine component, `Item` or `Button`, to wrap color indicator with.
+	const ToggleComponent = __experimentalIsItemGroup ? Item : Button;
+	const toggleClassName = __experimentalIsItemGroup
+		? 'block-editor-panel-color-gradient-settings__item'
+		: 'block-editor-panel-color-gradient-settings__dropdown';
+	const toggleProps = {
+		onClick: onToggle,
+		className: classnames( toggleClassName, { 'is-open': isOpen } ),
+		'aria-expanded': __experimentalIsItemGroup ? undefined : isOpen,
+	};
+
+	return (
+		<ToggleComponent { ...toggleProps }>
+			<LabeledColorIndicator colorValue={ colorValue } label={ label } />
+		</ToggleComponent>
+	);
+};
+
+// 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,
+	__experimentalIsItemGroup = true,
 	settings,
+	__experimentalHasMultipleOrigins,
+	__experimentalIsRenderedInSidebar,
+	...props
 } ) {
-	let dropdownPosition;
+	const dropdownClassName = __experimentalIsItemGroup
+		? 'block-editor-panel-color-gradient-settings__dropdown'
+		: 'block-editor-tools-panel-color-gradient-settings__dropdown';
+	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 ) =>
+		// Only wrap with `ItemGroup` if these controls are being rendered
+		// semantically.
+		<WithItemGroup __experimentalIsItemGroup={ __experimentalIsItemGroup }>
+			{ settings.map( ( setting, index ) => {
+				const controlProps = {
+					clearable: __experimentalIsItemGroup ? undefined : 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,
+					__experimentalIsItemGroup,
+					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,
-									} }
-								/>
-							) }
-						/>
+							__experimentalIsItemGroup={
+								__experimentalIsItemGroup
+							}
+							settings={ setting }
+							{ ...props }
+						>
+							<Dropdown
+								popoverProps={ popoverProps }
+								className={ dropdownClassName }
+								contentClassName="block-editor-panel-color-gradient-settings__dropdown-content"
+								renderToggle={ renderToggle( toggleSettings ) }
+								renderContent={ () => (
+									<ColorGradientControl { ...controlProps } />
+								) }
+							/>
+						</WithToolsPanelItem>
 					)
-			) }
-		</ItemGroup>
+				);
+			} ) }
+		</WithItemGroup>
 	);
 }

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

@@ -59,25 +59,7 @@
 }
 
 .block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
-	& > div {
-		width: $sidebar-width;
-	}
-}
-
-@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;
-		}
-
-		&.is-from-top .components-popover__content {
-			margin-top: #{ -($grid-unit-60 + $grid-unit-15) } !important;
-		}
-
-		&.is-from-bottom .components-popover__content {
-			margin-bottom: #{ -($grid-unit-60 + $grid-unit-15) } !important;
-		}
-	}
+	width: $sidebar-width;
 }
 
 .block-editor-panel-color-gradient-settings__dropdown:last-child > div {
@@ -87,10 +69,6 @@
 .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%);
-	}
 
 	&.is-open {
 		background: $gray-100;
@@ -98,3 +76,53 @@
 	}
 }
 
+.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%);
+}
+
+/**
+* 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 {
+		border-top-left-radius: 2px;
+		border-top-right-radius: 2px;
+		border-top: 1px solid rgba(0, 0, 0, 0.1);
+	}
+
+	&.last {
+		border-bottom-left-radius: 2px;
+		border-bottom-right-radius: 2px;
+	}
+
+	> div,
+	> div > button {
+		border-radius: inherit;
+	}
+}
+
+.block-editor-tools-panel-color-gradient-settings__dropdown {
+	display: block;
+	padding: 0;
+
+	> button {
+		height: 46px;
+
+		&.is-open {
+			background: $gray-100;
+			color: var(--wp-admin-theme-color);
+		}
+	}
+}

package/src/components/default-block-appender/style.scss

@@ -34,8 +34,7 @@
 
 // The black plus that shows up on the right side of an empty paragraph block, or the initial appender
 // that exists only on empty documents.
-.block-editor-default-block-appender .block-editor-inserter,
-.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter { // This needs specificity to override inherited popover styles.
+.block-editor-default-block-appender .block-editor-inserter {
 	position: absolute;
 	top: 0;
 	right: 0;

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

@@ -10,6 +10,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { DOWN } from '@wordpress/keycodes';
+import { Icon, filter } from '@wordpress/icons';
 
 function DuotoneControl( {
 	colorPalette,
@@ -41,7 +42,13 @@ function DuotoneControl( {
 						aria-expanded={ isOpen }
 						onKeyDown={ openOnArrowDown }
 						label={ __( 'Apply duotone filter' ) }
-						icon={ <DuotoneSwatch values={ value } /> }
+						icon={
+							value ? (
+								<DuotoneSwatch values={ value } />
+							) : (
+								<Icon icon={ filter } />
+							)
+						}
 					/>
 				);
 			} }