Ecommerce Shopify WordPress Discussion

WordPress – Extending core blocks : Grab the color variables

I am following a tutorial (https://wholesomecode.net/add-sidebar-to-your-custom-wordpress-block-with-inspectorcontrols/) on how to extend core blocks. It shows how to create a custom Panel and has 2 custom fields: ‘Font’ + ‘Background’ color settings. It works, but it’s grabbing the color hexcode instead of the color variables. The colors are defined in the theme.json file. Is there a way to grab the color variable (ex. –wp–preset–color–orange) instead of the hexcode? Below are the code. block.json: { "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 3, "attributes": { "blockTextColor": { "type": "string" }, "blockBackground": { "type": "string" }, "blockText": { "default": "Wholesome Plugin – hello from the editor!", "type": "string" } }, "name": "spruce/sp-extend-core-plugin", "version": "0.1.0", "title": "Extend Core Plugin", "category": "design", "icon": "admin-plugins", "description": "Example block scaffolded with Create Block tool.", "example": {}, "supports": { "html": false }, "textdomain": "sp-extend-core-plugin", "editorScript": "file:./index.js", "editorStyle": "file:./index.css", "style": "file:./style-index.css", "viewScript": "file:./view.js" } edit.js: import { ContrastChecker, InspectorControls, PanelColorSettings,ColorPalette, RichText, useBlockProps } from '@wordpress/block-editor'; import { Panel, PanelBody, TextControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import './editor.scss'; export default function Edit( { attributes, isSelected, setAttributes } ) { const { blockBackground, blockTextColor, blockText } = attributes; return [ <InspectorControls> <Panel> <PanelBody title={ __( 'Block Content Settings', 'sp-extend-core-plugin' ) } icon="admin-plugins" > <TextControl label={ __( 'Example Meta', 'sp-extend-core-plugin' ) } help={ __( 'This is an example meta field.', 'sp-extend-core-plugin' ) } onChange={ ( blockText ) => setAttributes( { blockText } ) } value={ blockText } /> </PanelBody> <PanelColorSettings title={ __( 'Block Color Settings', 'sp-extend-core-plugin' ) } icon="art" initialOpen={ false } colorSettings={ [ { value: blockTextColor, onChange: ( blockTextColor ) => setAttributes( { blockTextColor} ), label: __( 'Font Color', 'sp-extend-core-plugin' ) }, { value: blockBackground, onChange: ( blockBackground ) => setAttributes( { blockBackground } ), label: __( 'Background Color', 'sp-extend-core-plugin' ), } ] }> <ContrastChecker isLargeText="false" textColor={blockTextColor} backgroundColor={blockBackground} /> </PanelColorSettings> </Panel> </InspectorControls>, <p { ...useBlockProps() } style={ { backgroundColor: blockBackground, color: blockTextColor, } } > <RichText className="block__text" keepPlaceholderOnFocus onChange={ ( blockText ) => setAttributes( { blockText } ) } placeholder={ __( 'Block Text', 'sp-extend-core-plugin' ) } tagName="span" value={ blockText } /> </p> ]; } save.js: import { useBlockProps } from '@wordpress/block-editor'; export default function save( { attributes } ) { const { blockBackground, blockTextColor, blockText } = attributes; return ( <p { ...useBlockProps.save() } style={ { backgroundColor: blockBackground, color: blockTextColor, } } > { blockText } </p> ); } index.js: import { registerBlockType } from '@wordpress/blocks'; import './style.scss'; import Edit from './edit'; import save from './save'; import metadata from './block.json'; registerBlockType( metadata.name, { /** * @see ./edit.js */ edit: Edit, /** * @see ./save.js */ save, } ); Thank you!
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.