From a08e48af352fc8cb673a179d928afe957b55e378 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 1 Mar 2024 15:53:14 +1100 Subject: [PATCH] Initial commit --- .../global-styles/color-palette-panel.js | 2 +- .../global-styles/screen-block-list.js | 2 +- .../components/global-styles/screen-block.js | 5 ++- .../components/global-styles/screen-colors.js | 2 +- .../global-styles/screen-typography.js | 2 +- .../style-variations-container.js | 2 +- .../src/components/global-styles/style.scss | 45 ------------------- .../global-styles/variations/style.scss | 44 ++++++++++++++++++ .../{ => variations}/variation.js | 4 +- .../{ => variations}/variations-color.js | 4 +- .../{ => variations}/variations-panel.js | 2 +- .../{ => variations}/variations-typography.js | 12 ++--- packages/edit-site/src/style.scss | 1 + 13 files changed, 65 insertions(+), 62 deletions(-) create mode 100644 packages/edit-site/src/components/global-styles/variations/style.scss rename packages/edit-site/src/components/global-styles/{ => variations}/variation.js (94%) rename packages/edit-site/src/components/global-styles/{ => variations}/variations-color.js (87%) rename packages/edit-site/src/components/global-styles/{ => variations}/variations-panel.js (95%) rename packages/edit-site/src/components/global-styles/{ => variations}/variations-typography.js (91%) diff --git a/packages/edit-site/src/components/global-styles/color-palette-panel.js b/packages/edit-site/src/components/global-styles/color-palette-panel.js index 9e6bb5dbe2c77b..0d7496b571a4fe 100644 --- a/packages/edit-site/src/components/global-styles/color-palette-panel.js +++ b/packages/edit-site/src/components/global-styles/color-palette-panel.js @@ -13,7 +13,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; * Internal dependencies */ import { unlock } from '../../lock-unlock'; -import ColorVariations from './variations-color'; +import ColorVariations from './variations/variations-color'; import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property'; const { useGlobalSetting } = unlock( blockEditorPrivateApis ); diff --git a/packages/edit-site/src/components/global-styles/screen-block-list.js b/packages/edit-site/src/components/global-styles/screen-block-list.js index b4adcd64e41361..0f7d2540fb04df 100644 --- a/packages/edit-site/src/components/global-styles/screen-block-list.js +++ b/packages/edit-site/src/components/global-styles/screen-block-list.js @@ -26,7 +26,7 @@ import { speak } from '@wordpress/a11y'; /** * Internal dependencies */ -import { useBlockVariations } from './variations-panel'; +import { useBlockVariations } from './variations/variations-panel'; import ScreenHeader from './header'; import { NavigationButtonAsItem } from './navigation-button'; import { unlock } from '../../lock-unlock'; diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js index 570b465b10eea1..9811f10b834dab 100644 --- a/packages/edit-site/src/components/global-styles/screen-block.js +++ b/packages/edit-site/src/components/global-styles/screen-block.js @@ -20,7 +20,10 @@ import ScreenHeader from './header'; import BlockPreviewPanel from './block-preview-panel'; import { unlock } from '../../lock-unlock'; import Subtitle from './subtitle'; -import { useBlockVariations, VariationsPanel } from './variations-panel'; +import { + useBlockVariations, + VariationsPanel, +} from './variations/variations-panel'; function applyFallbackStyle( border ) { if ( ! border ) { 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 c9ddef9c6230d1..18c90d7296c4c4 100644 --- a/packages/edit-site/src/components/global-styles/screen-colors.js +++ b/packages/edit-site/src/components/global-styles/screen-colors.js @@ -11,7 +11,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import ScreenHeader from './header'; import Palette from './palette'; import { unlock } from '../../lock-unlock'; -import ColorVariations from './variations-color'; +import ColorVariations from './variations/variations-color'; import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property'; const { 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 cb2369437058fe..5731b5c043fabf 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography.js +++ b/packages/edit-site/src/components/global-styles/screen-typography.js @@ -10,7 +10,7 @@ import { useSelect } from '@wordpress/data'; * Internal dependencies */ import TypographyElements from './typography-elements'; -import TypographyVariations from './variations-typography'; +import TypographyVariations from './variations/variations-typography'; import FontFamilies from './font-families'; import ScreenHeader from './header'; import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property'; 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 3ca856dd8fb902..d4ce1e5363bf18 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 @@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import StylesPreview from './preview'; -import Variation from './variation'; +import Variation from './variations/variation'; export default function StyleVariationsContainer() { const variations = useSelect( ( select ) => { diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index d1e0a493847054..66aa76bf908d46 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -91,45 +91,6 @@ margin: 0; } -.edit-site-global-styles-variations_item { - box-sizing: border-box; - // To round the outline in Windows 10 high contrast mode. - border-radius: $radius-block-ui; - 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; - - .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); - } - - &: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 { - // Shown in Windows 10 high contrast mode. - outline: 3px solid transparent; - outline-offset: 0; - } -} - .edit-site-global-styles-icon-with-current-color { fill: currentColor; } @@ -204,9 +165,3 @@ .edit-site-global-styles-sidebar__panel .block-editor-block-icon svg { fill: currentColor; } - -.edit-site-global-styles-type-preview { - font-size: 22px; - line-height: 44px; - text-align: center; -} diff --git a/packages/edit-site/src/components/global-styles/variations/style.scss b/packages/edit-site/src/components/global-styles/variations/style.scss new file mode 100644 index 00000000000000..64a488ac0b79c8 --- /dev/null +++ b/packages/edit-site/src/components/global-styles/variations/style.scss @@ -0,0 +1,44 @@ +.edit-site-global-styles-variations_item { + box-sizing: border-box; + // To round the outline in Windows 10 high contrast mode. + border-radius: $radius-block-ui; + 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; + + .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); + } + + &: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 { + // Shown in Windows 10 high contrast mode. + outline: 3px solid transparent; + outline-offset: 0; + } +} + +.edit-site-global-styles-variations__type-preview { + font-size: 22px; + line-height: 44px; + text-align: center; +} diff --git a/packages/edit-site/src/components/global-styles/variation.js b/packages/edit-site/src/components/global-styles/variations/variation.js similarity index 94% rename from packages/edit-site/src/components/global-styles/variation.js rename to packages/edit-site/src/components/global-styles/variations/variation.js index cc669130ea516d..dc531b40635259 100644 --- a/packages/edit-site/src/components/global-styles/variation.js +++ b/packages/edit-site/src/components/global-styles/variations/variation.js @@ -14,8 +14,8 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; /** * Internal dependencies */ -import { mergeBaseAndUserConfigs } from './global-styles-provider'; -import { unlock } from '../../lock-unlock'; +import { mergeBaseAndUserConfigs } from '../global-styles-provider'; +import { unlock } from '../../../lock-unlock'; const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( blockEditorPrivateApis diff --git a/packages/edit-site/src/components/global-styles/variations-color.js b/packages/edit-site/src/components/global-styles/variations/variations-color.js similarity index 87% rename from packages/edit-site/src/components/global-styles/variations-color.js rename to packages/edit-site/src/components/global-styles/variations/variations-color.js index badb07336d303f..b12236fd26e5c3 100644 --- a/packages/edit-site/src/components/global-styles/variations-color.js +++ b/packages/edit-site/src/components/global-styles/variations/variations-color.js @@ -10,9 +10,9 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import Subtitle from './subtitle'; +import Subtitle from '../subtitle'; import Variation from './variation'; -import StylesPreviewColors from './preview-colors'; +import StylesPreviewColors from '../preview-colors'; export default function ColorVariations( { variations } ) { return ( diff --git a/packages/edit-site/src/components/global-styles/variations-panel.js b/packages/edit-site/src/components/global-styles/variations/variations-panel.js similarity index 95% rename from packages/edit-site/src/components/global-styles/variations-panel.js rename to packages/edit-site/src/components/global-styles/variations/variations-panel.js index 823e27038defb1..7e52498e0a4385 100644 --- a/packages/edit-site/src/components/global-styles/variations-panel.js +++ b/packages/edit-site/src/components/global-styles/variations/variations-panel.js @@ -8,7 +8,7 @@ import { __experimentalItemGroup as ItemGroup } from '@wordpress/components'; * Internal dependencies */ -import { NavigationButtonAsItem } from './navigation-button'; +import { NavigationButtonAsItem } from '../navigation-button'; function getCoreBlockStyles( blockStyles ) { return blockStyles?.filter( ( style ) => style.source === 'block' ); diff --git a/packages/edit-site/src/components/global-styles/variations-typography.js b/packages/edit-site/src/components/global-styles/variations/variations-typography.js similarity index 91% rename from packages/edit-site/src/components/global-styles/variations-typography.js rename to packages/edit-site/src/components/global-styles/variations/variations-typography.js index cd30ed0b07756e..31b9d920ae75df 100644 --- a/packages/edit-site/src/components/global-styles/variations-typography.js +++ b/packages/edit-site/src/components/global-styles/variations/variations-typography.js @@ -13,11 +13,11 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; /** * Internal dependencies */ -import { mergeBaseAndUserConfigs } from './global-styles-provider'; -import { unlock } from '../../lock-unlock'; -import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles'; -import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property'; -import Subtitle from './subtitle'; +import { mergeBaseAndUserConfigs } from '../global-styles-provider'; +import { unlock } from '../../../lock-unlock'; +import { getFamilyPreviewStyle } from '../font-library-modal/utils/preview-styles'; +import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property'; +import Subtitle from '../subtitle'; import Variation from './variation'; const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); @@ -72,7 +72,7 @@ const TypePreview = ( { variation } ) => { : {}; return (