Utilizing the theme.json file for customizing your WordPress site is a powerful way to enhance the user experience for those managing content within Gutenberg. We can access these settings within our custom gutenberg blocks by utilizing the “useSetting” function available within “@wordpress/block-editor”.
Below is an example of how to utilize the color palette defined in our theme.json file for the ColorPalette component within a custom block:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { InspectorControls, useSetting } from '@wordpress/block-editor'; | |
| import { PanelBody, PanelRow, ColorPalette } from '@wordpress/components'; | |
| const Edit = () => { | |
| const { bgColor } = attributes; | |
| const colors = useSetting( 'color.palette' ) || []; | |
| return ( | |
| <> | |
| <InspectorControls> | |
| <PanelBody title='Background Options' initialOpen> | |
| <PanelRow> | |
| <ColorPalette | |
| colors={ colors } | |
| value={ bgColor } | |
| onChange={ ( value ) => { setAttributes( { bgColor: value } ) } } | |
| /> | |
| </PanelRow> | |
| </PanelBody> | |
| </InspectorControls> | |
| </> | |
| ); | |
| } | |
| export default Edit; |
