@wordpress/block-editor 14.8.1-next.cd6172eb0.0 → 14.9.0

package/build-style/style.css

@@ -1588,6 +1588,7 @@ iframe[name=editor-canvas] {
 .block-editor-tools-panel-color-gradient-settings__item {
   padding: 0;
   max-width: 100%;
+  position: relative;
   border-left: 1px solid #ddd;
   border-right: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
@@ -1634,6 +1635,27 @@ iframe[name=editor-canvas] {
   flex-shrink: 0;
 }
 
+.block-editor-panel-color-gradient-settings__reset {
+  position: absolute;
+  right: 0;
+  top: 8px;
+  margin: auto 8px auto;
+  opacity: 0;
+  transition: opacity 0.1s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-panel-color-gradient-settings__reset {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.block-editor-panel-color-gradient-settings__reset.block-editor-panel-color-gradient-settings__reset {
+  border-radius: 2px;
+}
+.block-editor-panel-color-gradient-settings__dropdown:hover + .block-editor-panel-color-gradient-settings__reset, .block-editor-panel-color-gradient-settings__reset:focus, .block-editor-panel-color-gradient-settings__reset:hover {
+  opacity: 1;
+}
+
 .block-editor-date-format-picker {
   margin-bottom: 16px;
 }
@@ -1768,7 +1790,7 @@ iframe[name=editor-canvas] {
   overflow: hidden;
 }
 .block-editor-grid-visualizer__cell .block-editor-inserter .block-editor-grid-visualizer__appender {
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, #0000);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, rgba(0, 0, 0, 0));
   color: inherit;
   overflow: hidden;
   height: 100%;
@@ -1783,7 +1805,7 @@ iframe[name=editor-canvas] {
 .block-editor-grid-visualizer__cell:hover .block-editor-grid-visualizer__appender,
 .block-editor-grid-visualizer__cell .block-editor-grid-visualizer__appender:focus {
   opacity: 1;
-  background-color: color-mix(in srgb, currentColor 20%, #0000);
+  background-color: color-mix(in srgb, currentColor 20%, rgba(0, 0, 0, 0));
 }
 
 .block-editor-grid-visualizer__drop-zone {
@@ -2603,7 +2625,7 @@ iframe[name=editor-canvas] {
 }
 .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
   transition: transform 0.2s;
-  transform: translateY(calc(32px + var(--wp-admin--list-view-dragged-items-height, 32px) * 			-1));
+  transform: translateY(calc(32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
@@ -3019,27 +3041,15 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-multi-selection-inspector__card {
-  display: flex;
-  align-items: flex-start;
   padding: 16px;
 }
 
-.block-editor-multi-selection-inspector__card-content {
-  flex-grow: 1;
-}
-
 .block-editor-multi-selection-inspector__card-title {
   font-weight: 500;
-  margin-bottom: 5px;
-}
-
-.block-editor-multi-selection-inspector__card-description {
-  font-size: 13px;
 }
 
 .block-editor-multi-selection-inspector__card .block-editor-block-icon {
   margin-left: -2px;
-  margin-right: 10px;
   padding: 0 3px;
   width: 36px;
   height: 24px;
@@ -4233,7 +4243,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 .block-editor-inserter__media-list__item:focus .block-editor-inserter__media-list__item-preview > * {
   outline-color: var(--wp-admin-theme-color);
   outline-width: var(--wp-admin-border-width-focus);
-  outline-offset: calc((-1 * var(--wp-admin-border-width-focus)));
+  outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
   transition: outline 0.1s linear;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -4313,43 +4323,11 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 .spacing-sizes-control .spacing-sizes-control__label {
   margin-bottom: 0;
 }
-.spacing-sizes-control .is-marked .components-range-control__track {
-  transition: width ease 0.1s;
-}
-@media (prefers-reduced-motion: reduce) {
-  .spacing-sizes-control .is-marked .components-range-control__track {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-.spacing-sizes-control .is-marked .components-range-control__thumb-wrapper {
-  transition: left ease 0.1s;
-}
-@media (prefers-reduced-motion: reduce) {
-  .spacing-sizes-control .is-marked .components-range-control__thumb-wrapper {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
 .spacing-sizes-control .spacing-sizes-control__range-control,
 .spacing-sizes-control .spacing-sizes-control__custom-value-range {
   flex: 1;
   margin-bottom: 0;
 }
-.spacing-sizes-control .components-range-control__mark {
-  transform: translateX(-50%);
-  height: 4px;
-  width: 2px;
-  background-color: #fff;
-  z-index: 1;
-  top: -4px;
-}
-.spacing-sizes-control .components-range-control__marks {
-  margin-top: 17px;
-}
-.spacing-sizes-control .components-range-control__thumb-wrapper {
-  z-index: 3;
-}
 
 .spacing-sizes-control__header {
   height: 16px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.8.1-next.cd6172eb0.0",
+	"version": "14.9.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,37 +37,37 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.13.1-next.cd6172eb0.0",
-		"@wordpress/api-fetch": "^7.13.1-next.cd6172eb0.0",
-		"@wordpress/blob": "^4.13.1-next.cd6172eb0.0",
-		"@wordpress/block-serialization-default-parser": "^5.13.1-next.cd6172eb0.0",
-		"@wordpress/blocks": "^14.2.1-next.cd6172eb0.0",
-		"@wordpress/commands": "^1.13.1-next.cd6172eb0.0",
+		"@wordpress/a11y": "*",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/blob": "*",
+		"@wordpress/block-serialization-default-parser": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/commands": "*",
 		"@wordpress/components": "*",
-		"@wordpress/compose": "^7.13.1-next.cd6172eb0.0",
-		"@wordpress/data": "^10.13.1-next.cd6172eb0.0",
-		"@wordpress/date": "^5.13.1-next.cd6172eb0.0",
-		"@wordpress/deprecated": "^4.13.1-next.cd6172eb0.0",
-		"@wordpress/dom": "^4.13.1-next.cd6172eb0.0",
-		"@wordpress/element": "^6.13.1-next.cd6172eb0.0",
-		"@wordpress/escape-html": "^3.13.1-next.cd6172eb0.0",
-		"@wordpress/hooks": "^4.13.1-next.cd6172eb0.0",
-		"@wordpress/html-entities": "^4.13.1-next.cd6172eb0.0",
-		"@wordpress/i18n": "^5.13.1-next.cd6172eb0.0",
-		"@wordpress/icons": "^10.13.1-next.cd6172eb0.0",
-		"@wordpress/is-shallow-equal": "^5.13.1-next.cd6172eb0.0",
-		"@wordpress/keyboard-shortcuts": "^5.13.1-next.cd6172eb0.0",
-		"@wordpress/keycodes": "^4.13.1-next.cd6172eb0.0",
-		"@wordpress/notices": "^5.13.1-next.cd6172eb0.0",
-		"@wordpress/preferences": "^4.13.1-next.cd6172eb0.0",
-		"@wordpress/priority-queue": "^3.13.1-next.cd6172eb0.0",
-		"@wordpress/private-apis": "^1.13.1-next.cd6172eb0.0",
-		"@wordpress/rich-text": "^7.13.1-next.cd6172eb0.0",
-		"@wordpress/style-engine": "^2.13.1-next.cd6172eb0.0",
-		"@wordpress/token-list": "^3.13.1-next.cd6172eb0.0",
-		"@wordpress/url": "^4.13.1-next.cd6172eb0.0",
-		"@wordpress/warning": "^3.13.1-next.cd6172eb0.0",
-		"@wordpress/wordcount": "^4.13.1-next.cd6172eb0.0",
+		"@wordpress/compose": "*",
+		"@wordpress/data": "*",
+		"@wordpress/date": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/dom": "*",
+		"@wordpress/element": "*",
+		"@wordpress/escape-html": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/html-entities": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/is-shallow-equal": "*",
+		"@wordpress/keyboard-shortcuts": "*",
+		"@wordpress/keycodes": "*",
+		"@wordpress/notices": "*",
+		"@wordpress/preferences": "*",
+		"@wordpress/priority-queue": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/rich-text": "*",
+		"@wordpress/style-engine": "*",
+		"@wordpress/token-list": "*",
+		"@wordpress/url": "*",
+		"@wordpress/warning": "*",
+		"@wordpress/wordcount": "*",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -90,5 +90,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "4cc93dc1781d8a7bc2bbde265913917920e2bd45"
+	"gitHead": "b432c18934c9db866b6dba7d37517a4e97d642e3"
 }

package/src/components/alignment-control/stories/aliginment-toolbar.story.js

@@ -16,13 +16,13 @@ const meta = {
 	component: AlignmentToolbar,
 	argTypes: {
 		value: {
-			control: { type: null },
+			control: false,
 			defaultValue: 'undefined',
 			description: 'The current value of the alignment setting.',
 		},
 		onChange: {
 			action: 'onChange',
-			control: { type: null },
+			control: false,
 			description:
 				"A callback function invoked when the toolbar's alignment value is changed via an interaction with any of the toolbar's buttons. Called with the new alignment value (ie: `left`, `center`, `right`, `undefined`) as the only argument.",
 		},

package/src/components/alignment-control/stories/index.story.js

@@ -20,13 +20,13 @@ const meta = {
 	component: AlignmentControl,
 	argTypes: {
 		value: {
-			control: { type: null },
+			control: false,
 			defaultValue: 'undefined',
 			description: 'The current value of the alignment setting.',
 		},
 		onChange: {
 			action: 'onChange',
-			control: { type: null },
+			control: false,
 			description:
 				"A callback function invoked when the toolbar's alignment value is changed via an interaction with any of the toolbar's buttons. Called with the new alignment value (ie: `left`, `center`, `right`, `undefined`) as the only argument.",
 		},

package/src/components/block-heading-level-dropdown/stories/index.story.js

@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import HeadingLevelDropdown from '../';
+
+const meta = {
+	title: 'BlockEditor/HeadingLevelDropdown',
+	component: HeadingLevelDropdown,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'Dropdown for selecting a heading level (1 through 6) or paragraph (0).',
+			},
+		},
+	},
+	argTypes: {
+		value: {
+			control: { type: null },
+			description: 'The chosen heading level.',
+		},
+		options: {
+			control: 'check',
+			options: [ 1, 2, 3, 4, 5, 6 ],
+			description: 'An array of supported heading levels.',
+		},
+		onChange: {
+			action: 'onChange',
+			control: { type: null },
+			description: 'Function called with the selected value changes.',
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState( args.value );
+
+		return (
+			<HeadingLevelDropdown
+				{ ...args }
+				value={ value }
+				onChange={ ( ...changeArgs ) => {
+					setValue( ...changeArgs );
+					onChange( ...changeArgs );
+				} }
+			/>
+		);
+	},
+	args: {
+		value: 2,
+	},
+};

package/src/components/block-list/use-block-props/index.js

@@ -104,8 +104,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		canMove,
 	} = useContext( PrivateBlockContext );
 
-	const canDrag = canMove && ! hasChildSelected;
-
 	// translators: %s: Type of block (i.e. Text, Image etc)
 	const blockLabel = sprintf( __( 'Block: %s' ), blockTitle );
 	const htmlSuffix = mode === 'html' && ! __unstableIsHtml ? '-visual' : '';
@@ -125,7 +123,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			isEnabled: isSectionBlock,
 		} ),
 		useScrollIntoView( { isSelected } ),
-		canDrag ? ffDragRef : undefined,
+		canMove ? ffDragRef : undefined,
 	] );
 
 	const blockEditContext = useBlockEditContext();
@@ -158,7 +156,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 
 	return {
 		tabIndex: blockEditingMode === 'disabled' ? -1 : 0,
-		draggable: canDrag ? true : undefined,
+		draggable: canMove && ! hasChildSelected ? true : undefined,
 		...wrapperProps,
 		...props,
 		ref: mergedRefs,

package/src/components/block-list/use-block-props/use-firefox-draggable-compatibility.js

@@ -3,6 +3,68 @@
  */
 import { useRefEffect } from '@wordpress/compose';
 
+const nodesByDocument = new Map();
+
+function add( doc, node ) {
+	let set = nodesByDocument.get( doc );
+	if ( ! set ) {
+		set = new Set();
+		nodesByDocument.set( doc, set );
+		doc.addEventListener( 'pointerdown', down );
+	}
+	set.add( node );
+}
+
+function remove( doc, node ) {
+	const set = nodesByDocument.get( doc );
+	if ( set ) {
+		set.delete( node );
+		restore( node );
+		if ( set.size === 0 ) {
+			nodesByDocument.delete( doc );
+			doc.removeEventListener( 'pointerdown', down );
+		}
+	}
+}
+
+function restore( node ) {
+	const prevDraggable = node.getAttribute( 'data-draggable' );
+	if ( prevDraggable ) {
+		node.removeAttribute( 'data-draggable' );
+		// Only restore if `draggable` is still removed. It could have been
+		// changed by React in the meantime.
+		if ( prevDraggable === 'true' && ! node.getAttribute( 'draggable' ) ) {
+			node.setAttribute( 'draggable', 'true' );
+		}
+	}
+}
+
+function down( event ) {
+	const { target } = event;
+	const { ownerDocument, isContentEditable } = target;
+	const nodes = nodesByDocument.get( ownerDocument );
+
+	if ( isContentEditable ) {
+		// Whenever an editable element is clicked, check which draggable
+		// blocks contain this element, and temporarily disable draggability.
+		for ( const node of nodes ) {
+			if (
+				node.getAttribute( 'draggable' ) === 'true' &&
+				node.contains( target )
+			) {
+				node.removeAttribute( 'draggable' );
+				node.setAttribute( 'data-draggable', 'true' );
+			}
+		}
+	} else {
+		// Whenever a non-editable element is clicked, re-enable draggability
+		// for any blocks that were previously disabled.
+		for ( const node of nodes ) {
+			restore( node );
+		}
+	}
+}
+
 /**
  * In Firefox, the `draggable` and `contenteditable` attributes don't play well
  * together. When `contenteditable` is within a `draggable` element, selection
@@ -13,13 +75,9 @@ import { useRefEffect } from '@wordpress/compose';
  */
 export function useFirefoxDraggableCompatibility() {
 	return useRefEffect( ( node ) => {
-		function onDown( event ) {
-			node.draggable = ! event.target.isContentEditable;
-		}
-		const { ownerDocument } = node;
-		ownerDocument.addEventListener( 'pointerdown', onDown );
+		add( node.ownerDocument, node );
 		return () => {
-			ownerDocument.removeEventListener( 'pointerdown', onDown );
+			remove( node.ownerDocument, node );
 		};
 	}, [] );
 }

package/src/components/block-lock/modal.js

@@ -99,9 +99,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 			>
 				<fieldset className="block-editor-block-lock-modal__options">
 					<legend>
-						{ __(
-							'Choose specific attributes to restrict or lock all available options.'
-						) }
+						{ __( 'Select the features you want to lock' ) }
 					</legend>
 					{ /*
 					 * Disable reason: The `list` ARIA role is redundant but
@@ -137,7 +135,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 									<li className="block-editor-block-lock-modal__checklist-item">
 										<CheckboxControl
 											__nextHasNoMarginBottom
-											label={ __( 'Restrict editing' ) }
+											label={ __( 'Lock editing' ) }
 											checked={ !! lock.edit }
 											onChange={ ( edit ) =>
 												setLock( ( prevLock ) => ( {
@@ -159,7 +157,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 								<li className="block-editor-block-lock-modal__checklist-item">
 									<CheckboxControl
 										__nextHasNoMarginBottom
-										label={ __( 'Disable movement' ) }
+										label={ __( 'Lock movement' ) }
 										checked={ lock.move }
 										onChange={ ( move ) =>
 											setLock( ( prevLock ) => ( {
@@ -178,7 +176,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 								<li className="block-editor-block-lock-modal__checklist-item">
 									<CheckboxControl
 										__nextHasNoMarginBottom
-										label={ __( 'Prevent removal' ) }
+										label={ __( 'Lock removal' ) }
 										checked={ lock.remove }
 										onChange={ ( remove ) =>
 											setLock( ( prevLock ) => ( {

package/src/components/block-parent-selector/index.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { getBlockType, store as blocksStore } from '@wordpress/blocks';
 import { ToolbarButton } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
@@ -24,31 +23,18 @@ import { unlock } from '../../lock-unlock';
  */
 export default function BlockParentSelector() {
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const { parentClientId, isVisible } = useSelect( ( select ) => {
+	const { parentClientId } = useSelect( ( select ) => {
 		const {
-			getBlockName,
 			getBlockParents,
 			getSelectedBlockClientId,
-			getBlockEditingMode,
 			getParentSectionBlock,
 		} = unlock( select( blockEditorStore ) );
-		const { hasBlockSupport } = select( blocksStore );
 		const selectedBlockClientId = getSelectedBlockClientId();
 		const parentSection = getParentSectionBlock( selectedBlockClientId );
 		const parents = getBlockParents( selectedBlockClientId );
 		const _parentClientId = parentSection ?? parents[ parents.length - 1 ];
-		const parentBlockName = getBlockName( _parentClientId );
-		const _parentBlockType = getBlockType( parentBlockName );
 		return {
 			parentClientId: _parentClientId,
-			isVisible:
-				_parentClientId &&
-				getBlockEditingMode( _parentClientId ) !== 'disabled' &&
-				hasBlockSupport(
-					_parentBlockType,
-					'__experimentalParentSelector',
-					true
-				),
 		};
 	}, [] );
 	const blockInformation = useBlockDisplayInformation( parentClientId );
@@ -61,10 +47,6 @@ export default function BlockParentSelector() {
 		highlightParent: true,
 	} );
 
-	if ( ! isVisible ) {
-		return null;
-	}
-
 	return (
 		<div
 			className="block-editor-block-parent-selector"

package/src/components/block-patterns-list/stories/fixtures.js

@@ -530,6 +530,7 @@ export default [
 													background: '#000000',
 												},
 											},
+											tagName: 'hr',
 										},
 										innerBlocks: [],
 										originalContent:

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

@@ -136,6 +136,7 @@ export function PrivateBlockToolbar( {
 			showParentSelector:
 				! _isZoomOut &&
 				parentBlockType &&
+				editingMode !== 'contentOnly' &&
 				getBlockEditingMode( parentClientId ) !== 'disabled' &&
 				hasBlockSupport(
 					parentBlockType,

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

@@ -64,6 +64,7 @@ $swatch-gap: 12px;
 .block-editor-tools-panel-color-gradient-settings__item {
 	padding: 0;
 	max-width: 100%;
+	position: relative;
 
 	// Border styles.
 	border-left: 1px solid $gray-300;
@@ -120,3 +121,23 @@ $swatch-gap: 12px;
 		flex-shrink: 0;
 	}
 }
+
+.block-editor-panel-color-gradient-settings__reset {
+	position: absolute;
+	right: 0;
+	top: $grid-unit;
+	margin: auto $grid-unit auto;
+	opacity: 0;
+	transition: opacity 0.1s ease-in-out;
+	@include reduce-motion("transition");
+
+	&.block-editor-panel-color-gradient-settings__reset {
+		border-radius: $radius-small;
+	}
+
+	.block-editor-panel-color-gradient-settings__dropdown:hover + &,
+	&:focus,
+	&:hover {
+		opacity: 1;
+	}
+}

package/src/components/dimensions-tool/stories/aspect-ratio-tool.story.js

@@ -16,7 +16,7 @@ export default {
 	title: 'BlockEditor (Private APIs)/DimensionsTool/AspectRatioTool',
 	component: AspectRatioTool,
 	argTypes: {
-		panelId: { control: { type: null } },
+		panelId: { control: false },
 		onChange: { action: 'changed' },
 	},
 };

package/src/components/dimensions-tool/stories/index.story.js

@@ -16,7 +16,7 @@ export default {
 	title: 'BlockEditor (Private APIs)/DimensionsTool',
 	component: DimensionsTool,
 	argTypes: {
-		panelId: { control: { type: null } },
+		panelId: { control: false },
 		onChange: { action: 'changed' },
 	},
 };

package/src/components/dimensions-tool/stories/scale-tool.story.js

@@ -16,7 +16,7 @@ export default {
 	title: 'BlockEditor (Private APIs)/DimensionsTool/ScaleTool',
 	component: ScaleTool,
 	argTypes: {
-		panelId: { control: { type: null } },
+		panelId: { control: false },
 		onChange: { action: 'changed' },
 	},
 };

package/src/components/dimensions-tool/stories/width-height-tool.story.js

@@ -16,7 +16,7 @@ export default {
 	title: 'BlockEditor (Private APIs)/DimensionsTool/WidthHeightTool',
 	component: WidthHeightTool,
 	argTypes: {
-		panelId: { control: { type: null } },
+		panelId: { control: false },
 		onChange: { action: 'changed' },
 	},
 };

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

@@ -19,7 +19,7 @@ import {
 	Button,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -30,6 +30,7 @@ import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
 import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
 import { unlock } from '../../lock-unlock';
+import { reset as resetIcon } from '@wordpress/icons';
 
 export function useHasColorPanel( settings ) {
 	const hasTextPanel = useHasTextPanel( settings );
@@ -208,6 +209,7 @@ function ColorPanelDropdown( {
 } ) {
 	const currentTab = tabs.find( ( tab ) => tab.userValue !== undefined );
 	const { key: firstTabKey, ...firstTab } = tabs[ 0 ] ?? {};
+	const colorGradientDropdownButtonRef = useRef( undefined );
 	return (
 		<ToolsPanelItem
 			className="block-editor-tools-panel-color-gradient-settings__item"
@@ -228,15 +230,32 @@ function ColorPanelDropdown( {
 							{ 'is-open': isOpen }
 						),
 						'aria-expanded': isOpen,
+						ref: colorGradientDropdownButtonRef,
 					};
 
 					return (
-						<Button __next40pxDefaultSize { ...toggleProps }>
-							<LabeledColorIndicators
-								indicators={ indicators }
-								label={ label }
-							/>
-						</Button>
+						<>
+							<Button { ...toggleProps } __next40pxDefaultSize>
+								<LabeledColorIndicators
+									indicators={ indicators }
+									label={ label }
+								/>
+							</Button>
+							{ hasValue() && (
+								<Button
+									__next40pxDefaultSize
+									label={ __( 'Reset' ) }
+									className="block-editor-panel-color-gradient-settings__reset"
+									size="small"
+									icon={ resetIcon }
+									onClick={ () => {
+										resetValue();
+										// Return focus to parent button
+										colorGradientDropdownButtonRef.current?.focus();
+									} }
+								/>
+							) }
+						</>
 					);
 				} }
 				renderContent={ () => (