cb.js

import './editor.scss';
import './style.scss';

const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
const { InnerBlocks } = wp.blockEditor;

const TEMPLATE = [
	['core/heading', { placeholder: 'Recipe Title' }],
	['core/columns', {}, [
		['core/column', {}, [
			['core/image']
		]],
		['core/column', {}, [
			['core/paragraph', { placeholder: 'Enter short recipe description...' }],
			['core/paragraph', { placeholder: 'Enter ingredients...' }],
			['core/button', { text: 'Make this Recipe' }]
		]
		]
	]
	]];


const TEMPLATE2 = [
	['core/heading', { placeholder: 'Recipe Title' }],
	['core/columns', {}, [
		['core/column', {}, [
			['core/paragraph', { placeholder: 'Enter short recipe description...' }],
			['core/paragraph', { placeholder: 'Enter ingredients...' }],
			['core/button', { text: 'Make this Recipe' }]
		]
		],
		['core/column', {}, [
			['core/image']
		]]
	]
	]];

registerBlockType('cgb/block-idb-image-slider', {
	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
	title: __('idb-image-slider - CGB Block'), // Block title.
	icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
	category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
	keywords: [
		__('idb-image-slider — CGB Block'),
		__('CGB Example'),
		__('create-guten-block'),
	],
	styles: [
		{ name: 'under-title', label: 'Under Title', isDefault: true },
		{ name: 'over-titlw', label: 'Over Title' }
	],
	edit: (props) => {
		// Creates a <p class='wp-block-cgb-block-idb-image-slider'></p>.
		return (
			<div className={props.className}>
				<div>{props.attributes.className}</div>
				<InnerBlocks
					template={props.attributes.className === 'is-style-under-title' ? TEMPLATE : TEMPLATE2}
					templateLock="all"
				/>
			</div>
		);
	},
	save: (props) => {
		return (
			<div className={props.className}>
				<InnerBlocks.Content />
			</div>
		);
	},
});