Skip to content

Fix duotone rendering in site editor #37727

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

Merged
oandregal merged 23 commits into from
Apr 18, 2022
Merged

Fix duotone rendering in site editor #37727

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
2012290
Generate duotone filter styles for useGlobalStyles
Jan 4, 2022
01de5c3
Generate duotone filter presets for useGlobalStyles
Jan 4, 2022
bfb1e11
Separate out duotone filter and stylesheet
Jan 4, 2022
b692976
Fix duotone preset metadata classes
Jan 12, 2022
c6d4113
Render duotone filters with editor.PresetSvgFilter hook
Jan 12, 2022
3e07d40
Rename Filter to PresetSvgFilter in HOC
Jan 12, 2022
3a576b1
Add path check for duotone preset hook
Jan 12, 2022
c683e0d
Use PRESET_METADATA for applying the duotone preset filter
Jan 12, 2022
6df1f72
Destructure withDuotoneFilter props
Jan 12, 2022
e3679e1
Filter on svgFilter before mapping
Jan 12, 2022
914f961
Remove unused import
Jan 12, 2022
8dc561e
Formatting for getPresetsSvgFilters
Jan 12, 2022
3dda274
Try rendering SVGs from server
Jan 25, 2022
0ca4ed7
Revert "Try rendering SVGs from server"
Feb 15, 2022
498fbe7
Prevent filters from generating top-level styles
Apr 14, 2022
7a03f72
remove the filter and import the component directly
scruffian Apr 8, 2022
6b568ed
Refactor to simplify and rename exported duotone filter
Apr 15, 2022
91a77e7
Add comment about why filters are rendered where they are
Apr 18, 2022
fc571fa
Remove svgFilter metadata
Apr 18, 2022
8e99d6f
Add comment about filtering on duotone
Apr 18, 2022
57a8d43
Revert "Prevent filters from generating top-level styles"
oandregal Apr 18, 2022
ae3e332
Pull duotone selector from block metadata if it exists
oandregal Apr 18, 2022
d75b3a5
Render duotone filter styles
oandregal Apr 18, 2022
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
Prev Previous commit
Next Next commit
Add path check for duotone preset hook
  • Loading branch information
@oandregal
Alex Lende authored and oandregal committed Apr 18, 2022
commit 3a576b1371fb208832f5e763d32b5879f4f6f0c0
4 changes: 4 additions & 0 deletions packages/block-editor/src/hooks/duotone.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
import classnames from 'classnames';
import { colord, extend } from 'colord';
import namesPlugin from 'colord/plugins/names';
import { isEqual } from 'lodash';

/**
* WordPress dependencies
Expand Down Expand Up @@ -364,6 +365,9 @@ const withDuotoneStyles = createHigherOrderComponent(

const withDuotoneFilter = createHigherOrderComponent(
( PresetSvgFilter ) => ( props ) => {
if ( ! isEqual( props.path, [ 'color', 'duotone' ] ) ) {
return <PresetSvgFilter />;
}
return (
<>
<PresetSvgFilter />
Expand Down
9 changes: 7 additions & 2 deletions packages/edit-site/src/components/global-styles/use-global-styles-output.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,13 +136,18 @@ const PresetSvgFilter = withFilters( 'editor.PresetSvgFilter' )( () => null );

function getPresetsSvgFilters( blockPresets = {} ) {
// For now, only duotone produces SVG filters.
const presetByOrigin = get( blockPresets, [ 'color', 'duotone' ], {} );
const path = [ 'color', 'duotone' ];
const presetByOrigin = get( blockPresets, path, {} );
return [ 'default', 'theme' ]
.filter( ( origin ) => presetByOrigin[ origin ] )
.flatMap( ( origin ) => {
return presetByOrigin[ origin ].map( ( preset ) => {
return (
<PresetSvgFilter preset={ preset } key={ preset.slug } />
<PresetSvgFilter
path={ path }
preset={ preset }
key={ preset.slug }
/>
);
} );
} );
Expand Down