diff --git a/packages/edit-site/src/components/global-styles/color-indicator-spacer.js b/packages/edit-site/src/components/global-styles/color-indicator-spacer.js new file mode 100644 index 00000000000000..b24625a81dbf37 --- /dev/null +++ b/packages/edit-site/src/components/global-styles/color-indicator-spacer.js @@ -0,0 +1,25 @@ +/** + * WordPress dependencies + */ +import { + ColorIndicator, + __experimentalSpacer as Spacer, +} from '@wordpress/components'; + +// Compensate for the fact that `ColorIndicator` has a height of 20px, +// while all other icons have a height of 24px. +function ColorIndicatorWithSpacer( colorIndicatorProps ) { + return ( + + + + ); +} + +export default ColorIndicatorWithSpacer; diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js index 327ad806e22b3c..b06232b7e6dedb 100644 --- a/packages/edit-site/src/components/global-styles/palette.js +++ b/packages/edit-site/src/components/global-styles/palette.js @@ -7,7 +7,6 @@ import { __experimentalHStack as HStack, __experimentalZStack as ZStack, __experimentalVStack as VStack, - ColorIndicator, } from '@wordpress/components'; import { __, _n, sprintf } from '@wordpress/i18n'; import { useMemo } from '@wordpress/element'; @@ -18,6 +17,7 @@ import { useMemo } from '@wordpress/element'; import Subtitle from './subtitle'; import { NavigationButton } from './navigation-button'; import { useSetting } from './hooks'; +import ColorIndicatorWithSpacer from './color-indicator-spacer'; const EMPTY_COLORS = []; @@ -65,10 +65,9 @@ function Palette( { name } ) { > { colors.slice( 0, 5 ).map( ( { color } ) => ( - ) ) } diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js index 3d2b67e9accab8..56f3005dfeeec3 100644 --- a/packages/edit-site/src/components/global-styles/screen-colors.js +++ b/packages/edit-site/src/components/global-styles/screen-colors.js @@ -7,7 +7,6 @@ import { __experimentalHStack as HStack, __experimentalVStack as VStack, FlexItem, - ColorIndicator, } from '@wordpress/components'; /** @@ -18,6 +17,7 @@ import Palette from './palette'; import { NavigationButton } from './navigation-button'; import { getSupportedGlobalStylesPanels, useStyle } from './hooks'; import Subtitle from './subtitle'; +import ColorIndicatorWithSpacer from './color-indicator-spacer'; function BackgroundColorItem( { name, parentMenu } ) { const supports = getSupportedGlobalStylesPanels( name ); @@ -34,9 +34,8 @@ function BackgroundColorItem( { name, parentMenu } ) { return ( - { __( 'Background' ) } @@ -56,10 +55,7 @@ function TextColorItem( { name, parentMenu } ) { return ( - + { __( 'Text' ) } @@ -78,10 +74,7 @@ function LinkColorItem( { name, parentMenu } ) { return ( - + { __( 'Links' ) } diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 3b7a804bf4b983..6266031b7f50da 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -92,10 +92,3 @@ border: var(--wp-admin-theme-color) $border-width solid; } } - -.edit-site-global-styles__color-indicator-with-margin { - // Add 4px to compensate for the fact that `ColorIndicator` has a height - // of 20px, while all other icons have a height of 24px. - margin-top: $grid-unit * 0.25; - margin-bottom: $grid-unit * 0.25; -}