From a6c0757e41a76e5cbfef3233bd6e1f523f825563 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Mon, 18 Mar 2024 22:33:13 +0000 Subject: [PATCH] Global Styles: Presets: Show the default empty variation as well as the other presets (#59717) * Show the default empty variation as well as the other presets * remove unconnected change * filter out duplicate color variations and leave the default alone * add a comment * rename hooks * Make default translatable Co-authored-by: scruffian Co-authored-by: MaggieCabrera Co-authored-by: richtabor Co-authored-by: ramonjd Co-authored-by: matiasbenedetto --- .../src/components/global-styles/hooks.js | 34 ++++++++++++++++--- .../variations/variations-color.js | 6 ++-- .../variations/variations-typography.js | 4 +-- .../index.js | 13 ++++--- .../use-theme-style-variations-by-property.js | 25 +++++++++++--- 5 files changed, 61 insertions(+), 21 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js index 97c71afa456f8b..86daf02c46344b 100644 --- a/packages/edit-site/src/components/global-styles/hooks.js +++ b/packages/edit-site/src/components/global-styles/hooks.js @@ -10,6 +10,7 @@ import a11yPlugin from 'colord/plugins/a11y'; import { store as blocksStore } from '@wordpress/blocks'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { useContext } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -99,7 +100,26 @@ export function useSupportedStyles( name, element ) { return supportedPanels; } -export function useUniqueTypographyVariations() { +export function useColorVariations() { + const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( { + property: 'color', + } ); + /* + * Filter out variations with no settings or styles. + */ + return colorVariations?.length + ? colorVariations.filter( ( variation ) => { + const { settings, styles, title } = variation; + return ( + title === __( 'Default' ) || // Always preseve the default variation. + Object.keys( settings ).length > 0 || + Object.keys( styles ).length > 0 + ); + } ) + : []; +} + +export function useTypographyVariations() { const typographyVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( { property: 'typography', @@ -107,7 +127,8 @@ export function useUniqueTypographyVariations() { const { base } = useContext( GlobalStylesContext ); /* - * Filter duplicate variations based on the font families used in the variation. + * Filter duplicate variations based on whether the variaitons + * have different heading and body font families. */ return typographyVariations?.length ? Object.values( @@ -116,7 +137,13 @@ export function useUniqueTypographyVariations() { getFontFamilies( mergeBaseAndUserConfigs( base, variation ) ); - if ( + + // Always preseve the default variation. + if ( variation?.title === 'Default' ) { + acc[ + `${ headingFontFamily?.name }:${ bodyFontFamily?.name }` + ] = variation; + } else if ( headingFontFamily?.name && bodyFontFamily?.name && ! acc[ @@ -127,7 +154,6 @@ export function useUniqueTypographyVariations() { `${ headingFontFamily?.name }:${ bodyFontFamily?.name }` ] = variation; } - return acc; }, {} ) ) 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 04b8c476962827..f3555ec8f2228a 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 @@ -11,12 +11,10 @@ import { */ import Variation from './variation'; import StylesPreviewColors from '../preview-colors'; -import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property'; +import { useColorVariations } from '../hooks'; export default function ColorVariations() { - const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( { - property: 'color', - } ); + const colorVariations = useColorVariations(); if ( ! colorVariations?.length ) { return null; 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 440aec3d943113..fc7c0ac871fc12 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 @@ -10,13 +10,13 @@ import { /** * Internal dependencies */ -import { useUniqueTypographyVariations } from '../hooks'; +import { useTypographyVariations } from '../hooks'; import TypographyExample from '../typography-example'; import PreviewIframe from '../preview-iframe'; import Variation from './variation'; export default function TypographyVariations() { - const typographyVariations = useUniqueTypographyVariations(); + const typographyVariations = useTypographyVariations(); if ( ! typographyVariations?.length ) { return null; 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 1fb3e090ce575b..37d67e8fcad430 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 @@ -29,8 +29,10 @@ import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-glob import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer'; import ColorVariations from '../global-styles/variations/variations-color'; import TypographyVariations from '../global-styles/variations/variations-typography'; -import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property'; -import { useUniqueTypographyVariations } from '../global-styles/hooks'; +import { + useColorVariations, + useTypographyVariations, +} from '../global-styles/hooks'; const noop = () => {}; @@ -76,11 +78,8 @@ function SidebarNavigationScreenGlobalStylesContent() { }; }, [] ); - const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( { - property: 'color', - } ); - - const typographyVariations = useUniqueTypographyVariations(); + const colorVariations = useColorVariations(); + const typographyVariations = useTypographyVariations(); // Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are // loaded. This is necessary because the Iframe component waits until diff --git a/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js b/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js index d15b624c9eb44e..f2acef0026916c 100644 --- a/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js +++ b/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js @@ -5,6 +5,7 @@ import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { useContext, useMemo } from '@wordpress/element'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -54,13 +55,29 @@ export function useCurrentMergeThemeStyleVariationsWithUserConfig( { property, filter, } ) { - const variations = useSelect( ( select ) => { - return select( - coreStore - ).__experimentalGetCurrentThemeGlobalStylesVariations(); + const { variationsFromTheme } = useSelect( ( select ) => { + const _variationsFromTheme = + select( + coreStore + ).__experimentalGetCurrentThemeGlobalStylesVariations(); + + return { + variationsFromTheme: _variationsFromTheme || [], + }; }, [] ); const { user: baseVariation } = useContext( GlobalStylesContext ); + const variations = useMemo( () => { + return [ + { + title: __( 'Default' ), + settings: {}, + styles: {}, + }, + ...variationsFromTheme, + ]; + }, [ variationsFromTheme ] ); + return useThemeStyleVariationsByProperty( { variations, property,