Block-Support “Color” unable to set Style-Settings
-
I have created a block that should produce a
<figure><div>...</div><figcaption>...<figcaption></figure>
as a result. The block activates the block support “Color” and “Spacing”, but these styles should not be set on the figure tag but on the DIV tag.I can remove the style attributes from the “useBlockProps” which will format the Container and set it on the DIV-Tag, but unfortunately additional color classes are also set on the figure container, which set the color-settings, for example the background-color, for the entire container including the figcaption, what I do not want.
How can I realize this? Removing the Color-Classes from the Container or better prevent the settings by the color-support??
And How can I set different Color-Settings for different subcomponents rendering by the Edit- or Save-Functions?
-
I have revised the code several times in the meantime and found finally other solutions.
As far as I remember, it’s very simple…
I work with the standard WordPress development environment: Docker and wp-env and use the code according to the examples in the component description.
ColorPicker: (https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/color-picker)
import { useState } from 'react'; import { ColorPicker } from '@wordpress/components'; function Example() { const [color, setColor] = useState(); return ( <ColorPicker color={color} onChange={setColor} enableAlpha defaultValue="#000" /> ); }In this example I see the Control and can manually select a color, but no palettes are displayed.
ColorPalette:
(https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/color-palette)
import { useState } from 'react'; import { ColorPalette } from '@wordpress/components'; const MyColorPalette = () => { const [ color, setColor ] = useState ( '#f00' ) const colors = [ { name: 'red', color: '#f00' }, { name: 'white', color: '#fff' }, { name: 'blue', color: '#00f' }, ]; return ( <ColorPalette colors={ colors } value={ color } onChange={ ( color ) => setColor( color ) } /> ); } );The colors-prop is not required. When omit, then there are no palettes be shown and I cannot find any Information about, what I need to do so that this component offers the standard palettes ‘DEFAULT’ and ‘THEME’ for color selection.
and there is also another Problem… When I define Block-Support for Colors:
"supports": { "color": true },i can choose the color with the “normal” Picker which allows custom colors and also all available Palettes. The resulting Color-Settings are coded within the Block-Props as classNames and styles for the Block-Container-Tag.
But when I want the color to be set to another Tag within the Container, I have to separate the color settings out of the BlockProps, because most of the Classes are to be set correctly to the Block-Container, but the Colors for Example should be set to the inner Tag. Thats very difficult, because when I set a color from a palette, the this color setting is found within the style prop and also as special Classes like ‘has-green-text-color’ or ‘has-red-background-color’
The useColorProps-Hook gives me the extracted color-Information which I can use for the inner Tag, but the has-xxx classes are still present within the Block-Props className property which sets the colors also to the Block container
Therefore I realized it as follows:
const { style, className, ...blockProps } = useBlockProps(); const containerClass = !!className ? className.replace(/has-.* /g, '') : ''; const borderProps = useBorderProps(attributes); const colorProps = useColorProps(attributes); const spacingProps = useSpacingProps(attributes); const typegraphyProps = useTypographyProps(attributes); const innerClass = classnames([borderProps.className, colorProps.className, spacingProps.className, typegraphyProps.className, 'tbx-math-box-content']); const innerStyle = { ...borderProps.style, ...colorProps.style, ...spacingProps.style, ...typegraphyProps.style };It works, but it’s very unpleasant… but I haven’t found a solution
<figure {...blockProps} className={containerClass}> <div> <math className={innerClass} style={innerStyle} dangerouslySetInnerHTML={{ __html: attributes.content }} /> </div> )}
- The topic ‘Block-Support “Color” unable to set Style-Settings’ is closed to new replies.
