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.

Sign up for GitHub

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

Jump to bottom

Duotone: Add Global Styles controls for presets #49265

Closed
wants to merge 8 commits into from
Closed

Duotone: Add Global Styles controls for presets #49265

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6b1211b
show the filters global section
MaggieCabrera Mar 21, 2023
85ba817
create exception for filters that are an array of two colors
MaggieCabrera Mar 22, 2023
8edfbcf
removed important
MaggieCabrera Mar 22, 2023
28e8329
refactor how we output the svg filters
MaggieCabrera Mar 22, 2023
510516a
filter nodes instead of using conditionals
MaggieCabrera Mar 22, 2023
8ba05b2
encapsulate duotone slug into aux function
MaggieCabrera Mar 22, 2023
3a4b07f
allow custom duotone filters on the frontend too
MaggieCabrera Mar 22, 2023
7ab9c25
coding standards
MaggieCabrera Mar 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
48 changes: 40 additions & 8 deletions packages/block-editor/src/components/global-styles/use-global-styles-output.js
View file
Open in desktop
Expand Up @@ -15,6 +15,7 @@ import {
import { useSelect } from '@wordpress/data';
import { useContext, useMemo } from '@wordpress/element';
import { getCSSRules } from '@wordpress/style-engine';
import { cleanForSlug } from '@wordpress/url';

/**
* Internal dependencies
Expand All @@ -23,7 +24,7 @@ import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils';
import { getTypographyFontSizeValue } from './typography-utils';
import { GlobalStylesContext } from './context';
import { useGlobalSetting } from './hooks';
import { PresetDuotoneFilter } from '../duotone/components';
import { PresetDuotoneFilter, DuotoneFilter } from '../duotone/components';
import { getGapCSSValue } from '../../hooks/gap';
import { store as blockEditorStore } from '../../store';

Expand All @@ -36,6 +37,8 @@ const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
typography: 'typography',
};

const customFilters = [];

function compileStyleValue( uncompiledValue ) {
const VARIABLE_REFERENCE_PREFIX = 'var:';
const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
Expand Down Expand Up @@ -260,11 +263,24 @@ export function getStylesDeclarations(
const cssProperty = key.startsWith( '--' )
? key
: kebabCase( key );
declarations.push(
`${ cssProperty }: ${ compileStyleValue(
get( blockStyles, pathToValue )
) }`
);

//The duotone filter is not one of the presets so we need to build the svg and the filter ID
if ( Array.isArray( blockStyles.filter?.duotone ) ) {
let slug = blockStyles.filter.duotone.map( ( x ) =>
cleanForSlug( x ).replaceAll( '-', '' )
);
slug = slug.join( '-' );
declarations.push(
`${ cssProperty }: url('#wp-duotone-${ slug } !important')`
);
customFilters.push( [ blockStyles.filter.duotone, slug ] );
} else {
declarations.push(
`${ cssProperty }: ${ compileStyleValue(
get( blockStyles, pathToValue )
) }`
);
}
}

return declarations;
Expand Down Expand Up @@ -900,6 +916,16 @@ export const toStyles = (
return ruleset;
};

export function customSvgFilters( filters ) {
return filters.flatMap( ( filter ) => (
<DuotoneFilter
MaggieCabrera marked this conversation as resolved.
Show resolved Hide resolved
key={ filter[ 1 ] }
id={ `wp-duotone-${ filter[ 1 ] }` }
colors={ filter[ 0 ] }
/>
) );
}

export function toSvgFilters( tree, blockSelectors ) {
const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
return nodesWithSettings.flatMap( ( { presets } ) => {
Expand Down Expand Up @@ -1050,7 +1076,9 @@ export function useGlobalStylesOutput() {
disableLayoutStyles
);

const filters = toSvgFilters( mergedConfig, blockSelectors );
const presetSvgs = toSvgFilters( mergedConfig, blockSelectors );
const customSvgs = customSvgFilters( customFilters );

const stylesheets = [
{
css: customProperties,
Expand Down Expand Up @@ -1083,7 +1111,11 @@ export function useGlobalStylesOutput() {
}
} );

return [ stylesheets, mergedConfig.settings, filters ];
return [
stylesheets,
mergedConfig.settings,
[ ...presetSvgs, ...customSvgs ],
];
}, [
hasBlockGapSupport,
hasFallbackGapSupport,
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/global-styles/utils.js
View file
Open in desktop
Expand Up @@ -15,6 +15,7 @@ export const ROOT_BLOCK_SUPPORTS = [
'background',
'backgroundColor',
'color',
'filter',
'linkColor',
'captionColor',
'buttonColor',
Expand Down
1 change: 1 addition & 0 deletions packages/blocks/src/store/private-selectors.js
View file
Open in desktop
Expand Up @@ -14,6 +14,7 @@ const ROOT_BLOCK_SUPPORTS = [
'background',
'backgroundColor',
'color',
'filter',
'linkColor',
'captionColor',
'buttonColor',
Expand Down
3 changes: 3 additions & 0 deletions packages/blocks/src/store/test/private-selectors.js
View file
Open in desktop
Expand Up @@ -29,6 +29,7 @@ describe( 'private selectors', () => {
'background',
'backgroundColor',
'color',
'filter',
'linkColor',
'captionColor',
'buttonColor',
Expand All @@ -51,6 +52,7 @@ describe( 'private selectors', () => {
'background',
'backgroundColor',
'color',
'filter',
'linkColor',
'captionColor',
'buttonColor',
Expand Down Expand Up @@ -78,6 +80,7 @@ describe( 'private selectors', () => {
'background',
'backgroundColor',
'color',
'filter',
'linkColor',
'captionColor',
'buttonColor',
Expand Down
9 changes: 7 additions & 2 deletions packages/edit-site/src/components/global-styles/duotone-panel.js
View file
Open in desktop
Expand Up @@ -53,6 +53,11 @@ function DuotonePanel( { name } ) {
defaultSetting: 'color.defaultPalette',
} );

const disableCustomColors = ! useSetting( 'color.custom' );
const disableCustomDuotone =
! useSetting( 'color.customDuotone' ) ||
( colorPalette?.length === 0 && disableCustomColors );

if ( duotonePalette?.length === 0 ) {
return null;
}
Expand All @@ -68,8 +73,8 @@ function DuotonePanel( { name } ) {
<DuotonePicker
colorPalette={ colorPalette }
duotonePalette={ duotonePalette }
disableCustomColors={ true }
disableCustomDuotone={ true }
disableCustomColors={ disableCustomColors }
disableCustomDuotone={ disableCustomDuotone }
value={ themeDuotone }
onChange={ setThemeDuotone }
/>
Expand Down