use classnames that are component specific

WordPress · Apr 19, 2023 · 6e7e6ec · 6e7e6ec
1 parent aabd119
commit 6e7e6ec
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 12 deletions.
diff --git a/packages/block-editor/src/components/global-styles/filters-panel.js b/packages/block-editor/src/components/global-styles/filters-panel.js
@@ -111,12 +111,7 @@ const LabeledColorIndicators = ( { indicators, label } ) => (
 				</Flex>
 			) ) }
 		</ZStack>
-		<FlexItem
-			className="block-editor-panel-color-gradient-settings__color-name"
-			title={ label }
-		>
-			{ label }
-		</FlexItem>
+		<FlexItem title={ label }>{ label }</FlexItem>
 	</HStack>
 );
 
@@ -187,14 +182,11 @@ export default function FiltersPanel( {
 				>
 					<Dropdown
 						popoverProps={ popoverProps }
-						className="block-editor-tools-panel-color-gradient-settings__dropdown"
+						className="block-editor-global-styles-filters-panel__dropdown"
 						renderToggle={ ( { onToggle, isOpen } ) => {
 							const toggleProps = {
 								onClick: onToggle,
-								className: classnames(
-									'block-editor-panel-color-gradient-settings__dropdown',
-									{ 'is-open': isOpen }
-								),
+								className: classnames( { 'is-open': isOpen } ),
 								'aria-expanded': isOpen,
 							};
 

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
@@ -6,11 +6,12 @@
 	width: 230px;
 }
 
+.block-editor-global-styles-filters-panel__dropdown,
 .block-editor-global-styles-effects-panel__shadow-dropdown {
 	display: block;
 	padding: 0;
 
-	> button {
+	button {
 		width: 100%;
 		padding: $grid-unit-10;