From 2af335e2dcf1c2e8cab8b8a48ad32221c98102cb Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Tue, 19 Mar 2024 11:25:04 -0400 Subject: [PATCH 01/18] Update ColorToolsPanel to "Elements" H3 --- .../block-editor/src/components/global-styles/color-panel.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js index 13f61ec56a852..9b6f9bcede9a8 100644 --- a/packages/block-editor/src/components/global-styles/color-panel.js +++ b/packages/block-editor/src/components/global-styles/color-panel.js @@ -123,10 +123,11 @@ function ColorToolsPanel( { return ( Date: Tue, 19 Mar 2024 11:26:37 -0400 Subject: [PATCH 02/18] Improve copy and spacing on "colors" screen --- .../edit-site/src/components/global-styles/screen-colors.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 a24fc7d34a295..e08cafb82bb20 100644 --- a/packages/edit-site/src/components/global-styles/screen-colors.js +++ b/packages/edit-site/src/components/global-styles/screen-colors.js @@ -35,11 +35,11 @@ function ScreenColors() {
- + Date: Tue, 19 Mar 2024 11:29:01 -0400 Subject: [PATCH 03/18] Tweak HighlightedColors size and spacing --- .../edit-site/src/components/global-styles/preview-colors.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/preview-colors.js b/packages/edit-site/src/components/global-styles/preview-colors.js index 08a372ed83cf9..2bead7ad2460b 100644 --- a/packages/edit-site/src/components/global-styles/preview-colors.js +++ b/packages/edit-site/src/components/global-styles/preview-colors.js @@ -40,7 +40,7 @@ const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => { } } > { } } > From 712cbe3b79ec3f4ba0c497c1fdea65b30b259d81 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Tue, 19 Mar 2024 11:30:37 -0400 Subject: [PATCH 04/18] Tweak palette count visual and empty state copy --- packages/edit-site/src/components/global-styles/palette.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js index dc73f54a1701a..7e69b62afb6d6 100644 --- a/packages/edit-site/src/components/global-styles/palette.js +++ b/packages/edit-site/src/components/global-styles/palette.js @@ -61,7 +61,7 @@ function Palette( { name } ) { _n( '%d color', '%d colors', colors.length ), colors.length ) - : __( 'Add custom colors' ); + : __( 'Add colors' ); return ( @@ -87,7 +87,9 @@ function Palette( { name } ) { ) ) } - { paletteButtonText } + + { paletteButtonText } + From 1a17602e174897a36e1ac98a504891ea73988947 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Tue, 19 Mar 2024 13:32:43 -0400 Subject: [PATCH 05/18] Tweak styles --- .../src/components/global-styles/style.scss | 19 +++++++- .../global-styles/variations/style.scss | 44 ++++++++++++------- .../sidebar-navigation-screen/style.scss | 13 +++--- 3 files changed, 50 insertions(+), 26 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 547656667f55f..dbaa395b109d3 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -7,7 +7,8 @@ } .edit-site-global-styles-preview__iframe { - border-radius: $radius-block-ui; + border-radius: $radius-block-ui + 1px; // Visually resembles the $radius-block-ui. + max-width: 100%; display: block; max-width: 100%; width: 100%; @@ -53,15 +54,29 @@ } .edit-site-global-styles-screen-colors { - margin: $grid-unit-20; + margin: $grid-unit-10 $grid-unit-20 $grid-unit-20; .color-block-support-panel { padding-left: 0; padding-right: 0; + padding-top: 0; border-top: none; + row-gap: calc(#{$grid-unit-05} * 3); } } +.edit-site-global-styles-screen-colors__palette-count { + color: $gray-700; +} + +.edit-site-global-styles-sidebar__more-menu > .components-button.has-icon { + // Make the DropdownMenu the same size as the rest of the buttons, as it does not support "compact" size. + height: $grid-unit-40; + min-width: $grid-unit-40; + padding: 0; + width: $grid-unit-40; +} + .edit-site-global-styles-header__description { padding: 0 $grid-unit-20; } diff --git a/packages/edit-site/src/components/global-styles/variations/style.scss b/packages/edit-site/src/components/global-styles/variations/style.scss index 6022aa7f64881..0b683a6b2f3de 100644 --- a/packages/edit-site/src/components/global-styles/variations/style.scss +++ b/packages/edit-site/src/components/global-styles/variations/style.scss @@ -5,34 +5,44 @@ cursor: pointer; .edit-site-global-styles-variations_item-preview { - padding: $border-width * 2; border-radius: $radius-block-ui; - box-shadow: 0 0 0 $border-width $gray-200; // Shown in Windows 10 high contrast mode. outline: 1px solid transparent; + position: relative; + transition: box-shadow 0.1s linear; + + &::after { + content: ""; + position: absolute; + top: -1px; + left: -1px; + bottom: -1px; + right: -1px; + border-radius: $radius-block-ui + $border-width; // Visually resembles the $radius-block-ui. + box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2); + // Show a thin outline in Windows high contrast mode, otherwise the button is invisible. + border: 1px solid transparent; + box-sizing: inherit; + transition: box-shadow 0.1s linear; + } .edit-site-global-styles-color-variations & { padding: $grid-unit-10; } } - &.is-active .edit-site-global-styles-variations_item-preview { - box-shadow: 0 0 0 $border-width $gray-900; - // Shown in Windows 10 high contrast mode. - outline-width: 3px; - } - - &:hover .edit-site-global-styles-variations_item-preview { - box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color); + &:not(.is-active):hover .edit-site-global-styles-variations_item-preview::after { + box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.4); } - &:focus .edit-site-global-styles-variations_item-preview { - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); - } - - &:focus-visible { + &.is-active .edit-site-global-styles-variations_item-preview, + &:focus-visible .edit-site-global-styles-variations_item-preview { + @include block-toolbar-button-style__focus(); // Shown in Windows 10 high contrast mode. - outline: 3px solid transparent; - outline-offset: 0; + outline-width: 3px; + + &::after { + box-shadow: inset 0 0 0 1px $white; + } } } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index ed1f682255f01..0ba3d47c1c143 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -103,14 +103,13 @@ .edit-site-global-styles-variations_item-preview { box-shadow: 0 0 0 $border-width $gray-900; } + .edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview, .edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview { - box-shadow: 0 0 0 $border-width $gray-100; - } - .edit-site-global-styles-variations_item:hover .edit-site-global-styles-variations_item-preview { - box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color); - } - .edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview { - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + @include block-toolbar-button-style__focus(); + + &::after { + box-shadow: inset 0 0 0 1px $gray-900; + } } } From c1e5703867ec8c295f24757f10e89b173380d8f2 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Tue, 19 Mar 2024 14:47:36 -0400 Subject: [PATCH 06/18] Add "Presets" subtitle, adjust grid --- .../components/global-styles/variations/variations-color.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/variations/variations-color.js b/packages/edit-site/src/components/global-styles/variations/variations-color.js index f3555ec8f2228..b251a539c68c6 100644 --- a/packages/edit-site/src/components/global-styles/variations/variations-color.js +++ b/packages/edit-site/src/components/global-styles/variations/variations-color.js @@ -5,10 +5,12 @@ import { __experimentalGrid as Grid, __experimentalVStack as VStack, } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ +import Subtitle from '../subtitle'; import Variation from './variation'; import StylesPreviewColors from '../preview-colors'; import { useColorVariations } from '../hooks'; @@ -22,7 +24,8 @@ export default function ColorVariations() { return ( - + { __( 'Presets' ) } + { colorVariations.map( ( variation, index ) => ( { () => } From 01f359ae3363f9088ff32c503b47c993ff72a554 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Tue, 19 Mar 2024 15:12:43 -0400 Subject: [PATCH 07/18] Tweaks --- .../src/components/global-styles/screen-colors.js | 6 +++++- .../components/global-styles/variations/style.scss | 3 ++- .../global-styles/variations/variations-color.js | 3 --- .../components/sidebar-navigation-screen/style.scss | 12 ++++++++---- 4 files changed, 15 insertions(+), 9 deletions(-) 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 e08cafb82bb20..638d9d8ce224c 100644 --- a/packages/edit-site/src/components/global-styles/screen-colors.js +++ b/packages/edit-site/src/components/global-styles/screen-colors.js @@ -8,6 +8,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; /** * Internal dependencies */ +import Subtitle from './subtitle'; import ScreenHeader from './header'; import Palette from './palette'; import { unlock } from '../../lock-unlock'; @@ -40,7 +41,10 @@ function ScreenColors() { />
- + + { __( 'Presets' ) } + + - { __( 'Presets' ) } { colorVariations.map( ( variation, index ) => ( diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index 0ba3d47c1c143..c315d77d35b59 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -99,13 +99,17 @@ font-weight: 500; } -.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container { +.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variations_item { .edit-site-global-styles-variations_item-preview { box-shadow: 0 0 0 $border-width $gray-900; } - .edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview, - .edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview { - @include block-toolbar-button-style__focus(); + + &:focus .edit-site-global-styles-variations_item-preview, + &.is-active .edit-site-global-styles-variations_item-preview { + box-shadow: inset 0 0 0 $border-width $gray-900, 0 0 0 var(--wp-admin-border-width-focus) $white; + + // Shown in Windows 10 high contrast mode. + outline-width: 3px; &::after { box-shadow: inset 0 0 0 1px $gray-900; From a3320bf74e9c87c5d1f5e045b5f0e107ea611998 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 20 Mar 2024 08:01:08 -0400 Subject: [PATCH 08/18] Add back 'custom' --- packages/edit-site/src/components/global-styles/palette.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js index 7e69b62afb6d6..3d35397a63b0a 100644 --- a/packages/edit-site/src/components/global-styles/palette.js +++ b/packages/edit-site/src/components/global-styles/palette.js @@ -61,7 +61,7 @@ function Palette( { name } ) { _n( '%d color', '%d colors', colors.length ), colors.length ) - : __( 'Add colors' ); + : __( 'Add custom colors' ); return ( From b28c941696e718f8dc9fc0d62c6356569aa0bfd0 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 20 Mar 2024 10:25:23 -0400 Subject: [PATCH 09/18] Adjust spacing of font families --- .../edit-site/src/components/global-styles/font-families.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/font-families.js b/packages/edit-site/src/components/global-styles/font-families.js index 55ca6d0b5222c..9e6694d69b64c 100644 --- a/packages/edit-site/src/components/global-styles/font-families.js +++ b/packages/edit-site/src/components/global-styles/font-families.js @@ -37,7 +37,7 @@ function FontFamilies() { /> ) } - + { __( 'Fonts' ) } From 4d1e008fd6d35df4068f63f566775c31c3084643 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 20 Mar 2024 10:26:46 -0400 Subject: [PATCH 10/18] Adjust subtitles --- .../components/global-styles/screen-colors.js | 6 +----- .../global-styles/screen-typography.js | 6 +++--- .../variations/variations-color.js | 6 ++++-- .../variations/variations-typography.js | 5 ++++- .../index.js | 17 +++++------------ 5 files changed, 17 insertions(+), 23 deletions(-) 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 638d9d8ce224c..cf0318e78af46 100644 --- a/packages/edit-site/src/components/global-styles/screen-colors.js +++ b/packages/edit-site/src/components/global-styles/screen-colors.js @@ -8,7 +8,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; /** * Internal dependencies */ -import Subtitle from './subtitle'; import ScreenHeader from './header'; import Palette from './palette'; import { unlock } from '../../lock-unlock'; @@ -41,10 +40,7 @@ function ScreenColors() { />
- - { __( 'Presets' ) } - - +
- - + + { ! window.__experimentalDisableFontLibrary && ( { fontLibraryEnabled && } diff --git a/packages/edit-site/src/components/global-styles/variations/variations-color.js b/packages/edit-site/src/components/global-styles/variations/variations-color.js index 49949f5339b99..cd90872f20da8 100644 --- a/packages/edit-site/src/components/global-styles/variations/variations-color.js +++ b/packages/edit-site/src/components/global-styles/variations/variations-color.js @@ -12,8 +12,9 @@ import { import Variation from './variation'; import StylesPreviewColors from '../preview-colors'; import { useColorVariations } from '../hooks'; +import Subtitle from '../subtitle'; -export default function ColorVariations() { +export default function ColorVariations( { title, gap = 2 } ) { const colorVariations = useColorVariations(); if ( ! colorVariations?.length ) { @@ -22,7 +23,8 @@ export default function ColorVariations() { return ( - + { title && { title } } + { colorVariations.map( ( variation, index ) => ( { () => } diff --git a/packages/edit-site/src/components/global-styles/variations/variations-typography.js b/packages/edit-site/src/components/global-styles/variations/variations-typography.js index fc7c0ac871fc1..6ee7be561e611 100644 --- a/packages/edit-site/src/components/global-styles/variations/variations-typography.js +++ b/packages/edit-site/src/components/global-styles/variations/variations-typography.js @@ -14,8 +14,9 @@ import { useTypographyVariations } from '../hooks'; import TypographyExample from '../typography-example'; import PreviewIframe from '../preview-iframe'; import Variation from './variation'; +import Subtitle from '../subtitle'; -export default function TypographyVariations() { +export default function TypographyVariations( { title, gap = 2 } ) { const typographyVariations = useTypographyVariations(); if ( ! typographyVariations?.length ) { @@ -24,8 +25,10 @@ export default function TypographyVariations() { return ( + { title && { title } } { typographyVariations && diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js index 37d67e8fcad43..9d003f22121b1 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js @@ -98,20 +98,13 @@ function SidebarNavigationScreenGlobalStylesContent() { > { colorVariations?.length && ( -
-

- { __( 'Colors' ) } -

- -
+ ) } { typographyVariations?.length && ( -
-

- { __( 'Typography' ) } -

- -
+ ) } From 1910ef887a1e66e8852a5ca21618acb7bc7865fd Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 20 Mar 2024 10:29:11 -0400 Subject: [PATCH 11/18] Use $border-width --- .../src/components/global-styles/variations/style.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/variations/style.scss b/packages/edit-site/src/components/global-styles/variations/style.scss index b07234bf4f37a..2119434170d8b 100644 --- a/packages/edit-site/src/components/global-styles/variations/style.scss +++ b/packages/edit-site/src/components/global-styles/variations/style.scss @@ -14,14 +14,14 @@ &::after { content: ""; position: absolute; - top: -1px; - left: -1px; - bottom: -1px; - right: -1px; + top: -$border-width; + left: -$border-width; + bottom: -$border-width; + right: -$border-width; border-radius: $radius-block-ui + $border-width; // Visually resembles the $radius-block-ui. box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2); // Show a thin outline in Windows high contrast mode, otherwise the button is invisible. - border: 1px solid transparent; + border: $border-width solid transparent; box-sizing: inherit; transition: box-shadow 0.1s linear; } From d75ef6b0b63973afdba09ca49e16d51bb85336b6 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 20 Mar 2024 10:35:13 -0400 Subject: [PATCH 12/18] Linting --- packages/edit-site/src/components/global-styles/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index dbaa395b109d3..18640d0b2a82e 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -10,7 +10,6 @@ border-radius: $radius-block-ui + 1px; // Visually resembles the $radius-block-ui. max-width: 100%; display: block; - max-width: 100%; width: 100%; } From 775cca4aa70b588260fb6ed9caa5324f8f3168dc Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 20 Mar 2024 14:13:37 -0400 Subject: [PATCH 13/18] Fix consistent margin top --- .../edit-site/src/components/global-styles/style.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 18640d0b2a82e..fd94b1bf4524f 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -29,9 +29,8 @@ max-width: 100%; } -.edit-site-global-styles-screen-typography, -.edit-site-global-styles-screen-css { - margin: $grid-unit-20; +.edit-site-global-styles-screen-typography { + margin: $grid-unit-15 $grid-unit-20 $grid-unit-20; } .edit-site-global-styles-screen-typography__indicator { @@ -53,7 +52,7 @@ } .edit-site-global-styles-screen-colors { - margin: $grid-unit-10 $grid-unit-20 $grid-unit-20; + margin: $grid-unit-15 $grid-unit-20 $grid-unit-20; .color-block-support-panel { padding-left: 0; @@ -129,6 +128,7 @@ flex: 1 1 auto; display: flex; flex-direction: column; + margin: $grid-unit-20; .components-v-stack { flex: 1 1 auto; From 871883951e1544009d7a940a7b785dec6cb4e38c Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 20 Mar 2024 14:17:30 -0400 Subject: [PATCH 14/18] remove unused styles --- .../edit-site/src/components/global-styles/style.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index fd94b1bf4524f..211b38a5175e6 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -67,14 +67,6 @@ color: $gray-700; } -.edit-site-global-styles-sidebar__more-menu > .components-button.has-icon { - // Make the DropdownMenu the same size as the rest of the buttons, as it does not support "compact" size. - height: $grid-unit-40; - min-width: $grid-unit-40; - padding: 0; - width: $grid-unit-40; -} - .edit-site-global-styles-header__description { padding: 0 $grid-unit-20; } From a668bb745982c3a6a96e5b58fc96b89a216a2b9a Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 20 Mar 2024 14:22:43 -0400 Subject: [PATCH 15/18] Remove duplicate VStack --- .../src/components/global-styles/screen-typography.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js index d1e1c0dc14c31..fac111a2d9242 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography.js +++ b/packages/edit-site/src/components/global-styles/screen-typography.js @@ -32,11 +32,8 @@ function ScreenTypography() {
- { ! window.__experimentalDisableFontLibrary && ( - - { fontLibraryEnabled && } - - ) } + { ! window.__experimentalDisableFontLibrary && + fontLibraryEnabled && }
From 1fdbbeca8eb22ade40f560fcc822ca41f6ec8fa4 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 20 Mar 2024 14:28:42 -0400 Subject: [PATCH 16/18] Add reduce-motion and comments for box shadow transitions --- .../src/components/global-styles/variations/style.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/variations/style.scss b/packages/edit-site/src/components/global-styles/variations/style.scss index 2119434170d8b..a0e18c40cc69d 100644 --- a/packages/edit-site/src/components/global-styles/variations/style.scss +++ b/packages/edit-site/src/components/global-styles/variations/style.scss @@ -9,7 +9,9 @@ // Shown in Windows 10 high contrast mode. outline: 1px solid transparent; position: relative; + // Add the same transition that block style variations and other buttons have. transition: box-shadow 0.1s linear; + @include reduce-motion("transition"); &::after { content: ""; @@ -18,12 +20,15 @@ left: -$border-width; bottom: -$border-width; right: -$border-width; - border-radius: $radius-block-ui + $border-width; // Visually resembles the $radius-block-ui. + // Visually resembles the $radius-block-ui. + border-radius: $radius-block-ui + $border-width; box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2); // Show a thin outline in Windows high contrast mode, otherwise the button is invisible. border: $border-width solid transparent; box-sizing: inherit; + // Add the same transition that block style variations and other buttons have. transition: box-shadow 0.1s linear; + @include reduce-motion("transition"); } .edit-site-global-styles-color-variations & { @@ -38,7 +43,6 @@ &.is-active .edit-site-global-styles-variations_item-preview, &:focus-visible .edit-site-global-styles-variations_item-preview { box-shadow: inset 0 0 0 $border-width $white, 0 0 0 var(--wp-admin-border-width-focus) $gray-900; - // Shown in Windows 10 high contrast mode. outline-width: 3px; From ffeb3304d13c49cee69685eafaa38463d3d22995 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 21 Mar 2024 15:55:34 +0000 Subject: [PATCH 17/18] also set the gap on the style variation component --- .../components/global-styles/style-variations-container.js | 3 ++- .../sidebar-navigation-screen-global-styles/index.js | 7 ++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js index 69aff3e5be415..5ce6ce25a0fb1 100644 --- a/packages/edit-site/src/components/global-styles/style-variations-container.js +++ b/packages/edit-site/src/components/global-styles/style-variations-container.js @@ -13,7 +13,7 @@ import { __ } from '@wordpress/i18n'; import PreviewStyles from './preview-styles'; import Variation from './variations/variation'; -export default function StyleVariationsContainer() { +export default function StyleVariationsContainer( { gap = 2 } ) { const variations = useSelect( ( select ) => { return select( coreStore @@ -39,6 +39,7 @@ export default function StyleVariationsContainer() { { withEmptyVariation.map( ( variation, index ) => ( diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js index 9d003f22121b1..87ab8095ed827 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js @@ -80,6 +80,7 @@ function SidebarNavigationScreenGlobalStylesContent() { const colorVariations = useColorVariations(); const typographyVariations = useTypographyVariations(); + const gap = 3; // Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are // loaded. This is necessary because the Iframe component waits until @@ -96,14 +97,14 @@ function SidebarNavigationScreenGlobalStylesContent() { spacing={ 10 } className="edit-site-global-styles-variation-container" > - + { colorVariations?.length && ( - + ) } { typographyVariations?.length && ( ) } From 068cdf899dfe28718dcb312e659aaf9d84833189 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 21 Mar 2024 16:00:27 +0000 Subject: [PATCH 18/18] use a generic class for shared styles --- .../components/global-styles/screen-colors.js | 2 +- .../global-styles/screen-typography.js | 2 +- .../src/components/global-styles/style.scss | 18 +++++++----------- 3 files changed, 9 insertions(+), 13 deletions(-) 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 cf0318e78af46..2083b5d708e09 100644 --- a/packages/edit-site/src/components/global-styles/screen-colors.js +++ b/packages/edit-site/src/components/global-styles/screen-colors.js @@ -38,7 +38,7 @@ function ScreenColors() { 'Palette colors and the application of those colors on site elements.' ) } /> -
+
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js index fac111a2d9242..c2a2776ac94d8 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography.js +++ b/packages/edit-site/src/components/global-styles/screen-typography.js @@ -29,7 +29,7 @@ function ScreenTypography() { 'Typography styles and the application of those styles on site elements.' ) } /> -
+
{ ! window.__experimentalDisableFontLibrary && diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 211b38a5175e6..0606d55831949 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -29,7 +29,7 @@ max-width: 100%; } -.edit-site-global-styles-screen-typography { +.edit-site-global-styles-screen { margin: $grid-unit-15 $grid-unit-20 $grid-unit-20; } @@ -51,16 +51,12 @@ justify-content: center; } -.edit-site-global-styles-screen-colors { - margin: $grid-unit-15 $grid-unit-20 $grid-unit-20; - - .color-block-support-panel { - padding-left: 0; - padding-right: 0; - padding-top: 0; - border-top: none; - row-gap: calc(#{$grid-unit-05} * 3); - } +.edit-site-global-styles-screen-colors .color-block-support-panel { + padding-left: 0; + padding-right: 0; + padding-top: 0; + border-top: none; + row-gap: calc(#{$grid-unit-05} * 3); } .edit-site-global-styles-screen-colors__palette-count {