refactor: simplify the markup

WordPress · Jan 31, 2025 · 3cd3a46 · 3cd3a46
1 parent cd31388
commit 3cd3a46
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 36 deletions.
diff --git a/packages/block-editor/src/components/global-styles/shadow-panel-components.js b/packages/block-editor/src/components/global-styles/shadow-panel-components.js
@@ -5,10 +5,8 @@ import { __ } from '@wordpress/i18n';
 import {
 	__experimentalVStack as VStack,
 	__experimentalHeading as Heading,
-	__experimentalHStack as HStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	Button,
-	FlexItem,
 	Dropdown,
 	Composite,
 	Tooltip,
@@ -143,6 +141,9 @@ function renderShadowToggle( shadow, onShadowChange ) {
 
 		const removeButtonProps = {
 			onClick: () => {
+				if ( isOpen ) {
+					onToggle();
+				}
 				onShadowChange( undefined );
 			},
 			className: clsx(
@@ -154,15 +155,12 @@ function renderShadowToggle( shadow, onShadowChange ) {
 
 		return (
 			<>
-				<Button __next40pxDefaultSize { ...toggleProps }>
-					<HStack justify="flex-start">
-						<Icon
-							className="block-editor-global-styles__toggle-icon"
-							icon={ shadowIcon }
-							size={ 24 }
-						/>
-						<FlexItem>{ __( 'Drop shadow' ) }</FlexItem>
-					</HStack>
+				<Button
+					__next40pxDefaultSize
+					icon={ shadowIcon }
+					{ ...toggleProps }
+				>
+					{ __( 'Drop shadow' ) }
 				</Button>
 				{ !! shadow && (
 					<Button

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
@@ -1,7 +1,3 @@
-.block-editor-global-styles__toggle-icon {
-	fill: currentColor;
-}
-
 // @todo Ideally, popover, swatch size, and gap values should be CSS variables
 // to apply precise grid layouts.
 // https://github.com/WordPress/gutenberg/blob/954ecae571abbddc113d3a4bd8e1a72230180554/packages/block-editor/src/components/duotone-control/style.scss#L3-L9
@@ -36,6 +32,33 @@
 	}
 }
 
+.block-editor-global-styles__shadow-dropdown {
+	> .components-button.has-icon.has-text:first-child {
+		gap: $grid-unit-10;
+	}
+}
+
+.block-editor-global-styles__shadow-editor__remove-button {
+	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-global-styles__shadow-dropdown:hover &,
+	&:focus,
+	&:hover {
+		opacity: 1;
+	}
+
+	@media (hover: none) {
+		// Show reset button on devices that do not support hover.
+		opacity: 1;
+	}
+}
+
 // These styles are similar to the color palette.
 .block-editor-global-styles__shadow-indicator {
 	appearance: none;
@@ -76,24 +99,3 @@
 	/*rtl:ignore*/
 	direction: ltr;
 }
-
-.block-editor-global-styles__shadow-editor__remove-button {
-	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-global-styles__shadow-dropdown:hover &,
-	&:focus,
-	&:hover {
-		opacity: 1;
-	}
-
-	@media (hover: none) {
-		// Show reset button on devices that do not support hover.
-		opacity: 1;
-	}
-}