BorderControl.js
1 year ago
BoxShadowControl.js
1 year ago
ColorSelectorControl.js
1 year ago
FontSizeControl.js
1 year ago
LatepointIcons.js
1 year ago
LetterSpacingControl.js
1 year ago
LineHeightControl.js
1 year ago
PaddingBoxControl.js
1 year ago
TypographyControl.js
1 year ago
ColorSelectorControl.js
35 lines
| 1 | import {__} from '@wordpress/i18n'; |
| 2 | import {Dropdown, Button, ColorIndicator, ColorPalette} from '@wordpress/components'; |
| 3 | import {select} from '@wordpress/data'; |
| 4 | import React, {useMemo} from "react"; |
| 5 | |
| 6 | const ColorSelectorControl = ({label, colorAttribute, attributes, setAttributes}) => { |
| 7 | const colors = useMemo(() => select('core/block-editor').getSettings().colors, []); |
| 8 | const renderColorPicker = () => ( |
| 9 | <ColorPalette |
| 10 | value={attributes[colorAttribute]} |
| 11 | colors={colors} |
| 12 | enableAlpha |
| 13 | onChange={(color) => setAttributes({[colorAttribute]: color})} |
| 14 | /> |
| 15 | ); |
| 16 | |
| 17 | return ( |
| 18 | <> |
| 19 | <Dropdown |
| 20 | className="lb-color-settings-dropdown" |
| 21 | renderToggle={({isOpen, onToggle}) => ( |
| 22 | <div className="lb-row lb-color-settings-w"> |
| 23 | <div className="lb-label">{__(label)}</div> |
| 24 | <Button onClick={onToggle} aria-expanded={isOpen}> |
| 25 | <ColorIndicator className="lb-color-indicator" colorValue={attributes[colorAttribute]}/> |
| 26 | </Button> |
| 27 | </div> |
| 28 | )} |
| 29 | renderContent={renderColorPicker} |
| 30 | /> |
| 31 | </> |
| 32 | ); |
| 33 | }; |
| 34 | |
| 35 | export default ColorSelectorControl; |