gistfile1.txt

/**
 * 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>
		</>
	);
}