Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Global Styles: Presets: Show the default empty variation as well as the other presets #59717

Merged
merged 6 commits into from
Mar 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 30 additions & 4 deletions packages/edit-site/src/components/global-styles/hooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -99,15 +100,35 @@ 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',
} );

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(
Expand All @@ -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[
Expand All @@ -127,7 +154,6 @@ export function useUniqueTypographyVariations() {
`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
] = variation;
}

return acc;
}, {} )
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {};

Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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,
Expand Down
Loading