add inner blocks, block style variation

src/index.js

@@ -1,13 +1,19 @@
 import './style.scss';
 import './editor.scss';
 
-import { registerBlockType } from '@wordpress/blocks';
+import { registerBlockStyle, registerBlockType } from '@wordpress/blocks';
+import { InnerBlocks } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 const NAMESPACE = 'namespace'; // TODO
 const SLUG = 'slug'; // TODO
 const BLOCK_TITLE = 'Block Title'; // TODO
 
+const INNER_TEMPLATE = [
+	['core/heading', { placeholder: 'Article Title', className: 'heading' }],
+	['core/paragraph', { placeholder: 'Article Text', className: 'text' }],
+];
+
 registerBlockType(`${NAMESPACE}/${SLUG}`, {
 	title: __(BLOCK_TITLE, SLUG),
 
@@ -19,19 +25,39 @@ registerBlockType(`${NAMESPACE}/${SLUG}`, {
 	},
 
 	attributes: {
-		name: {
+		text: {
 			type: 'string',
 			source: 'text',
 			selector: 'p',
-			default: __('A default name', NAMESPACE),
+			default: __('Some default text.', NAMESPACE),
 		},
 	},
 
 	edit({ attributes, className }) {
-		return <p className={className}>{attributes.name}</p>;
+		return (
+			<div className={className}>
+				<div>
+					<InnerBlocks template={INNER_TEMPLATE} templateLock="all" />
+				</div>
+				<p>{attributes.text}</p>
+			</div>
+		);
 	},
 
 	save({ attributes }) {
-		return <p>{attributes.name}</p>;
+		return (
+			<div>
+				<div>
+					<InnerBlocks.Content />
+				</div>
+				<p>{attributes.text}</p>
+			</div>
+		);
 	},
 });
+
+registerBlockStyle(`${NAMESPACE}/${SLUG}`, {
+	name: 'block-style',
+	label: __('A Block Variation', NAMESPACE),
+	isDefault: false,
+});