Skip to content

Commit

Permalink
Global Styles: Simplify code to fetch color and typography variation (W…
Browse files Browse the repository at this point in the history
…ordPress#62827)

* Simplify style variation code

* Update packages/edit-site/src/components/global-styles/variations/variations-typography.js

* Update packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js

Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com>

* Update the function to actually check if the variation is empty

* move the filter inside the useMemo

* Update packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js

Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com>

* Update packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js

Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com>

* updawte variable name

* fix rebase issues

* refactor dependecy to a const

* use the new function in the sidebar

---------

Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
  • Loading branch information
5 people authored and carstingaxion committed Jul 18, 2024
1 parent ae6968b commit 9a53c47
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 60 deletions.
41 changes: 0 additions & 41 deletions packages/edit-site/src/components/global-styles/hooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,10 @@ import a11yPlugin from 'colord/plugins/a11y';
*/
import { store as blocksStore } from '@wordpress/blocks';
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
import { unlock } from '../../lock-unlock';
import { useSelect } from '@wordpress/data';

Expand Down Expand Up @@ -111,42 +109,3 @@ export function useSupportedStyles( name, element ) {

return supportedPanels;
}

export function useColorVariations() {
const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
properties: [ '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( {
properties: [ 'typography' ],
} );
/*
* Filter out variations with no settings or styles.
*/
return typographyVariations?.length
? typographyVariations.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
);
} )
: [];
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,14 @@ import {
* Internal dependencies
*/
import StylesPreviewColors from '../preview-colors';
import { useColorVariations } from '../hooks';
import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
import Subtitle from '../subtitle';
import Variation from './variation';

export default function ColorVariations( { title, gap = 2 } ) {
const colorVariations = useColorVariations();
const propertiesToFilter = [ 'color' ];
const colorVariations =
useCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );

// Return null if there is only one variation (the default).
if ( colorVariations?.length <= 1 ) {
Expand All @@ -31,7 +33,7 @@ export default function ColorVariations( { title, gap = 2 } ) {
key={ index }
variation={ variation }
isPill
properties={ [ 'color' ] }
properties={ propertiesToFilter }
showTooltip
>
{ () => <StylesPreviewColors /> }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,17 @@ import {
/**
* Internal dependencies
*/

import StylesPreviewTypography from '../preview-typography';
import { useTypographyVariations } from '../hooks';
import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
import Variation from './variation';
import Subtitle from '../subtitle';

export default function TypographyVariations( { title, gap = 2 } ) {
const typographyVariations = useTypographyVariations();
const propertiesToFilter = [ 'typography' ];
const typographyVariations =
useCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );

// Return null if there is only one variation (the default).
if ( typographyVariations?.length <= 1 ) {
return null;
Expand All @@ -34,7 +38,7 @@ export default function TypographyVariations( { title, gap = 2 } ) {
<Variation
key={ index }
variation={ variation }
properties={ [ 'typography' ] }
properties={ propertiesToFilter }
showTooltip
>
{ () => (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,7 @@ 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 {
useColorVariations,
useTypographyVariations,
} from '../global-styles/hooks';
import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';

const noop = () => {};

Expand Down Expand Up @@ -75,8 +72,12 @@ function SidebarNavigationScreenGlobalStylesContent() {
};
}, [] );

const colorVariations = useColorVariations();
const typographyVariations = useTypographyVariations();
const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( [
'color',
] );
const typographyVariations =
useCurrentMergeThemeStyleVariationsWithUserConfig( [ 'typography' ] );

const gap = 3;

// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,17 +49,33 @@ export function removePropertiesFromObject( object, properties ) {
return object;
}

/**
* Checks whether a style variation is empty.
*
* @param {Object} variation A style variation object.
* @param {string} variation.title The title of the variation.
* @param {Object} variation.settings The settings of the variation.
* @param {Object} variation.styles The styles of the variation.
* @return {boolean} Whether the variation is empty.
*/
function hasThemeVariation( { title, settings, styles } ) {
return (
title === __( 'Default' ) || // Always preserve the default variation.
Object.keys( settings ).length > 0 ||
Object.keys( styles ).length > 0
);
}

/**
* Fetches the current theme style variations that contain only the specified properties
* and merges them with the user config.
*
* @param {Object} props Object of hook args.
* @param {string[]} props.properties The properties to filter by.
* @param {string[]} properties The properties to filter by.
* @return {Object[]|*} The merged object.
*/
export function useCurrentMergeThemeStyleVariationsWithUserConfig( {
properties = [],
} ) {
export function useCurrentMergeThemeStyleVariationsWithUserConfig(
properties = []
) {
const { variationsFromTheme } = useSelect( ( select ) => {
const _variationsFromTheme =
select(
Expand All @@ -72,6 +88,8 @@ export function useCurrentMergeThemeStyleVariationsWithUserConfig( {
}, [] );
const { user: userVariation } = useContext( GlobalStylesContext );

const propertiesAsString = properties.toString();

return useMemo( () => {
const clonedUserVariation = cloneDeep( userVariation );

Expand All @@ -93,11 +111,18 @@ export function useCurrentMergeThemeStyleVariationsWithUserConfig( {
);
} );

return [
const variationsByProperties = [
userVariationWithoutProperties,
...variationsWithPropertiesAndBase,
];
}, [ properties.toString(), userVariation, variationsFromTheme ] );

/*
* Filter out variations with no settings or styles.
*/
return variationsByProperties?.length
? variationsByProperties.filter( hasThemeVariation )
: [];
}, [ propertiesAsString, userVariation, variationsFromTheme ] );
}

/**
Expand Down

0 comments on commit 9a53c47

Please sign in to comment.