add BlockControls

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
@@ -15,7 +25,7 @@ const INNER_TEMPLATE = [
 ];
 
 registerBlockType(`${NAMESPACE}/${SLUG}`, {
-	title: __(BLOCK_TITLE, SLUG),
+	title: __(BLOCK_TITLE, NAMESPACE),
 
 	category: 'widgets',
 
@@ -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 (
-			<div className={className}>
-				<div>
-					<InnerBlocks template={INNER_TEMPLATE} templateLock="all" />
+			<>
+				<InspectorControls>
+					<PanelBody title={__('Inspector Control', NAMESPACE)}>
+						<ColorPicker
+							color={attributes.color}
+							onChangeComplete={(value) => {
+								const rgb = value.rgb;
+								const color =
+									rgb.a !== 1
+										? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`
+										: value.hex;
+								setAttributes({ color });
+							}}
+						/>
+					</PanelBody>
+				</InspectorControls>
+
+				<BlockControls>
+					<ToolbarGroup>
+						<ToolbarItem
+							as={Button}
+							onClick={() =>
+								console.log('Toolbar Button go brrrr!')
+							}
+						>
+							Toolbar Button
+						</ToolbarItem>
+					</ToolbarGroup>
+				</BlockControls>
+
+				<div className={className}>
+					<div>
+						<InnerBlocks
+							template={INNER_TEMPLATE}
+							templateLock="all"
+						/>
+					</div>
+					<p>{attributes.text}</p>
 				</div>
-				<p>{attributes.text}</p>
-			</div>
+			</>
 		);
 	},