diff --git a/src/index.js b/src/index.js index 0144e33..d4d0362 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,18 @@ +/*eslint-disable @wordpress/i18n-text-domain, @wordpress/i18n-no-variables */ + import './style.scss'; import './editor.scss'; import { registerBlockStyle, registerBlockType } from '@wordpress/blocks'; +import { BlockControls, InspectorControls } from '@wordpress/editor'; import { InnerBlocks } from '@wordpress/block-editor'; +import { + Button, + ColorPicker, + PanelBody, + ToolbarGroup, + __experimentalToolbarItem as ToolbarItem, +} from '@wordpress/components'; import { __ } from '@wordpress/i18n'; const NAMESPACE = 'namespace'; // TODO @@ -31,16 +41,54 @@ registerBlockType(`${NAMESPACE}/${SLUG}`, { selector: 'p', default: __('Some default text.', NAMESPACE), }, + color: { + type: 'string', + default: 'rgba(0, 0, 0, 1)', + }, }, - edit({ attributes, className }) { + edit({ attributes, setAttributes, className }) { return ( -
-
- + <> + + + { + const rgb = value.rgb; + const color = + rgb.a !== 1 + ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})` + : value.hex; + setAttributes({ color }); + }} + /> + + + + + + + console.log('Toolbar Button go brrrr!') + } + > + Toolbar Button + + + + +
+
+ +
+

{attributes.text}

-

{attributes.text}

-
+ ); },