Color Component
Farbeinstellungen vornehmen

Einleitung

Heute wollen zu unserem Block eine Art von Color Picker hinzufügen, allerdings etwas eleganter und mit einer Auswahl an Standardfarben, die wir mittels CSS Variablen herauslesen.

Komponenten importieren

Zunächst importieren wir uns die Komponenten aus Gutenberg, die wir benötigen:
1
const { ColorPalette } = wp.blockEditor;
2
const { PanelBody } = wp.components;
3
const { InspectorControls } = wp.editor;
4
5
/* Falls mal keine Standardfarben aus dem globalen Setting haben möchte, kann man
6
das verwenden */
7
8
const { ColorPalette } = wp.components;
Copied!

Attribute erzeugen

Dann erstellen wir neue Attribute, wo wir dann die Werte speichern könne
1
attributes: {
2
color: {
3
type: 'string'
4
}
5
}
Copied!

Code erzeugen und Werte speichern

1
<Fragment>
2
<InspectorControls>
3
<PanelBody title="Farben" initialOpen={ true }>
4
<ColorPalette
5
className="bz__colors-palette"
6
color={ props.attributes.color }
7
onChange={ ( color ) => {
8
props.setAttributes( {
9
color: color
10
});
11
}}
12
/>
13
</PanelBody>
14
</InspectorControls>
15
<h4 style={ { color: props.attributes.color } }>
16
Headline
17
</h4>
18
</Fragment>
Copied!
Last modified 1yr ago