gutenberg-blurb

/**
 * BLOCK: Blurb Block
 *
 * Registering a basic block with Gutenberg.
 * Simple block, renders and saves the same content without any interactivity.
 */

//  Import CSS.
import './editor.scss';
import './style.scss';
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks } from '@wordpress/block-editor';

const TEMPLATE = [
	[ 'core/columns', { columns: 3 }, [
		[ 'core/column', {}, [
			[ 'core/image' ],
			[ 'core/heading' ],
			[ 'core/paragraph' ],
			[ 'core/button' ],
		] ],
		[ 'core/column', {}, [
			[ 'core/image' ],
			[ 'core/heading' ],
			[ 'core/paragraph' ],
			[ 'core/button' ],
		] ],
		[ 'core/column', {}, [
			[ 'core/image' ],
			[ 'core/heading' ],
			[ 'core/paragraph' ],
			[ 'core/button' ],
		] ],
	],
	] ];

registerBlockType( 'block/blurb-block', {
	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
	title: __( 'Blurb Block' ), // Block title.
	icon: 'editor-contract', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
	category: 'layout', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
	supports: {
		align: true,
	},
	keywords: [
		__( 'Blurb Block' ),
	],

	edit: () => {
		return (
			<div className="container">
				<InnerBlocks template={ TEMPLATE }
					templateLock="all" 
				/>
			</div>
		);
	},

	save: () => {
		return (
			<div className="container">
				<InnerBlocks.Content />
			</div>
		);
	},
} );