Created
August 23, 2024 19:10
-
-
Save tomusborne/3f1f481ff6ca9240943d041104eaee58 to your computer and use it in GitHub Desktop.
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
| /** | |
| * Retrieves the translation of text. | |
| * | |
| * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/ | |
| */ | |
| import { __ } from '@wordpress/i18n'; | |
| /** | |
| * React hook that is used to mark the block wrapper element. | |
| * It provides all the necessary props like the class name. | |
| * | |
| * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops | |
| */ | |
| import { useBlockProps, InspectorControls } from '@wordpress/block-editor'; | |
| import { PanelBody, TextControl } from '@wordpress/components'; | |
| import { useDispatch, useSelect } from '@wordpress/data'; | |
| import { store as editorStore } from '@wordpress/editor'; | |
| /** | |
| * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. | |
| * Those files can contain any CSS code that gets applied to the editor. | |
| * | |
| * @see https://www.npmjs.com/package/@wordpress/scripts#using-css | |
| */ | |
| import './editor.scss'; | |
| /** | |
| * The edit function describes the structure of your block in the context of the | |
| * editor. This represents what the editor will render when the block is used. | |
| * | |
| * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit | |
| * | |
| * @return {Element} Element to render. | |
| */ | |
| export default function Edit() { | |
| const { updateEditorSettings } = useDispatch( editorStore ); | |
| const { getEditorSettings } = useSelect( ( select ) => select( editorStore ), [] ); | |
| const editorSettings = getEditorSettings(); | |
| return ( | |
| <> | |
| <InspectorControls> | |
| <PanelBody> | |
| <TextControl | |
| label="Background color" | |
| value={ editorSettings.styles?.find( ( style ) => 'testing' === style.source )?.css } | |
| onChange={ ( value ) => { | |
| const existingSource = editorSettings?.styles?.find( ( style ) => 'testing' === style.source ); | |
| const css = '.wp-block-create-block-example-static{background-color:' + value + '}'; | |
| if ( existingSource ) { | |
| // Update the CSS for an existing class. | |
| updateEditorSettings( { | |
| ...editorSettings, | |
| styles: editorSettings?.styles.map( ( s ) => { | |
| if ( 'testing' !== s.source ) { | |
| return s; | |
| } | |
| return { | |
| ...s, | |
| css, | |
| }; | |
| } ), | |
| } ); | |
| } else { | |
| // Create a new style source for a new class. | |
| updateEditorSettings( { | |
| ...editorSettings, | |
| styles: [ | |
| ...editorSettings?.styles, | |
| { | |
| css, | |
| source: 'testing', | |
| }, | |
| ], | |
| } ); | |
| } | |
| } } | |
| /> | |
| </PanelBody> | |
| </InspectorControls> | |
| <p { ...useBlockProps() }> | |
| { __( | |
| 'Example Static – hello from the editor!', | |
| 'example-static' | |
| ) } | |
| </p> | |
| </> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment