-
Notifications
You must be signed in to change notification settings - Fork 4k
/
duotone-panel.js
87 lines (79 loc) · 2.21 KB
/
duotone-panel.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import {
__experimentalToolsPanel as ToolsPanel,
DuotonePicker,
} from '@wordpress/components';
import {
privateApis as blockEditorPrivateApis,
useSetting,
} from '@wordpress/block-editor';
import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
import { unlock } from '../../private-apis';
const { useGlobalStyle } = unlock( blockEditorPrivateApis );
const EMPTY_ARRAY = [];
function useMultiOriginPresets( { presetSetting, defaultSetting } ) {
const disableDefault = ! useSetting( defaultSetting );
const userPresets =
useSetting( `${ presetSetting }.custom` ) || EMPTY_ARRAY;
const themePresets =
useSetting( `${ presetSetting }.theme` ) || EMPTY_ARRAY;
const defaultPresets =
useSetting( `${ presetSetting }.default` ) || EMPTY_ARRAY;
return useMemo(
() => [
...userPresets,
...themePresets,
...( disableDefault ? EMPTY_ARRAY : defaultPresets ),
],
[ disableDefault, userPresets, themePresets, defaultPresets ]
);
}
function DuotonePanel( { name } ) {
const [ themeDuotone, setThemeDuotone ] = useGlobalStyle(
'filter.duotone',
name
);
const duotonePalette = useMultiOriginPresets( {
presetSetting: 'color.duotone',
defaultSetting: 'color.defaultDuotone',
} );
const colorPalette = useMultiOriginPresets( {
presetSetting: 'color.palette',
defaultSetting: 'color.defaultPalette',
} );
const disableCustomColors = ! useSetting( 'color.custom' );
const disableCustomDuotone =
! useSetting( 'color.customDuotone' ) ||
( colorPalette?.length === 0 && disableCustomColors );
if ( duotonePalette?.length === 0 ) {
return null;
}
return (
<>
<ToolsPanel label={ __( 'Duotone' ) }>
<span className="span-columns">
{ __(
'Create a two-tone color effect without losing your original image.'
) }
</span>
<div className="span-columns">
<DuotonePicker
colorPalette={ colorPalette }
duotonePalette={ duotonePalette }
disableCustomColors={ disableCustomColors }
disableCustomDuotone={ disableCustomDuotone }
value={ themeDuotone }
onChange={ setThemeDuotone }
/>
</div>
</ToolsPanel>
</>
);
}
export default DuotonePanel;