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: Make it possible to define duotone settings in theme.json #34073

Closed
wants to merge 16 commits into from
Closed

Duotone: Make it possible to define duotone settings in theme.json #34073

Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
db3b192
Duotone: Make it possible to define duotone settings in theme.json
scruffian Aug 13, 2021
d2813c7
Apply duotone in the editor
scruffian Aug 30, 2021
331e7e4
Rename value_wrapper to value_format and use vsprintf to replace it
scruffian Aug 30, 2021
3685c25
Update lib/block-supports/duotone.php
scruffian Aug 31, 2021
2ff3e0f
fix typo
scruffian Aug 31, 2021
9c5d970
fix another typo and remove the important declaration
scruffian Aug 31, 2021
660a1e2
fix comment
scruffian Aug 31, 2021
7632db4
simplify the approach
scruffian Sep 2, 2021
3bb578d
Add Duotone to paths with merge
scruffian Sep 2, 2021
b95ebb6
move the code that generates the duotone filters to the theme generator
scruffian Sep 2, 2021
4a3011b
add space
scruffian Sep 2, 2021
fbc6daf
remove space
scruffian Sep 2, 2021
d0ffc54
show the filters on the image
scruffian Sep 2, 2021
20e0f2c
make it possible to unset the duotone filter coming from theme.json
scruffian Sep 3, 2021
7d0a0f2
formatting
scruffian Sep 7, 2021
0ba9fd0
add a disable duotone option to the duotone picker
scruffian Sep 7, 2021
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
95 changes: 54 additions & 41 deletions packages/components/src/duotone-picker/duotone-picker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,52 +30,65 @@ function DuotonePicker( {
() => getDefaultColors( colorPalette ),
[ colorPalette ]
);
const options = duotonePalette.map( ( { colors, slug, name } ) => {
const style = {
background: getGradientFromCSSColors( colors, '135deg' ),
color: 'transparent',
};
const tooltipText =
name ??
sprintf(
// translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
__( 'Duotone code: %s' ),
slug
);
const label = name
? sprintf(
// translators: %s: The name of the option e.g: "Dark grayscale".
__( 'Duotone: %s' ),
name
)
: tooltipText;
const isSelected = isEqual( colors, value );

return (
<CircularOptionPicker.Option
key={ slug }
value={ colors }
isSelected={ isSelected }
aria-label={ label }
tooltipText={ tooltipText }
style={ style }
onClick={ () => {
onChange( isSelected ? undefined : colors );
} }
/>
);
} );

// Add a disable duotone option.
const disableOption = (
<CircularOptionPicker.Option
key={ 'unset' }
value={ 'unset' }
isSelected={ value === 'unset' }
aria-label={ __( 'Disable duotone' ) }
tooltipText={ __( 'Disable duotone' ) }
style={ {
background: '#FFF url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'><path d=\'M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zM3 12c0-5 4-9 9-9 2.2 0 4.3.8 5.8 2.2L5.2 17.8C3.8 16.3 3 14.2 3 12zm9 9c-2.4 0-4.5-.9-6.2-2.4L18.6 5.8C20.1 7.5 21 9.6 21 12c0 5-4 9-9 9z\' fill-rule=\'evenodd\' clip-rule=\'evenodd\' /></svg>" )',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll likely want to extract this one and make it either a reusable component to be used by the Global Styles system (whose mockups the icon came from), or put it in the Icon library and publish it with the others, even though it doesn't specifically match the icon grid.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I think that will require quite a significant reworking of how this component works though :)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with @jasmussen here. I can see this added as a special option of CircularOptionPicker. It would be useful for other components that use the picker like the regular gradient and color pickers.

As far as I'm aware, right now there isn't a way to unset a gradient or color background either (on the cover block, for example). So having an unset value doesn't seem essential to me for this PR, and may be something worth moving into a follow-up PR instead of this one. There we could discuss a unified way that will work for those other cases as well without holding this PR up.

color: 'transparent',
} }
onClick={ () => {
onChange( value === 'unset' ? undefined : 'unset' );
} }
/>
);

return (
<CircularOptionPicker
options={ duotonePalette.map( ( { colors, slug, name } ) => {
const style = {
background: getGradientFromCSSColors( colors, '135deg' ),
color: 'transparent',
};
const tooltipText =
name ??
sprintf(
// translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
__( 'Duotone code: %s' ),
slug
);
const label = name
? sprintf(
// translators: %s: The name of the option e.g: "Dark grayscale".
__( 'Duotone: %s' ),
name
)
: tooltipText;
const isSelected = isEqual( colors, value );

return (
<CircularOptionPicker.Option
key={ slug }
value={ colors }
isSelected={ isSelected }
aria-label={ label }
tooltipText={ tooltipText }
style={ style }
onClick={ () => {
onChange( isSelected ? undefined : colors );
} }
/>
);
} ) }
options={ [ disableOption, ...options ] }
actions={
<div>
<CircularOptionPicker.ButtonAction
onClick={ () => onChange( 'unset' ) }
>
{ __( 'Disable' ) }
</CircularOptionPicker.ButtonAction>

<CircularOptionPicker.ButtonAction
onClick={ () => onChange( undefined ) }
>
Expand Down