Nordic block

block.js

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

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

const { RichText, InspectorControls, InnerBlocks } = wp.editor;
const { Fragment } = wp.element;
const { PanelBody, Toolbar, IconButton, FormToggle } = wp.components;

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

/**
 * Register: aa Gutenberg Block.
 *
 * Registers a new block provided a unique name and an object defining its
 * behavior. Once registered, the block is made editor as an option to any
 * editor interface where blocks are implemented.
 *
 * @link https://wordpress.org/gutenberg/handbook/block-api/
 * @param  {string}   name     Block name.
 * @param  {Object}   settings Block settings.
 * @return {?WPBlock}          The block, if it has been successfully
 *                             registered; otherwise `undefined`.
 */
registerBlockType( 'cgb/block-nordic-block', {
	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
	title: __( 'nordic-block - 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: [
		__( 'nordic-block — CGB Block' ),
		__( 'CGB Example' ),
		__( 'create-guten-block' ),
	],

	attributes: {
		blockContent: {
			type: 'string',
		},
		toggleSetting: {
			type: 'boolean',
			default: false,
		},
	},

	styles: [
		// Mark style as default.
		{
			name: 'default',
			label: __( 'Rounded' ),
			isDefault: true,
		},
		{
			name: 'outline',
			label: __( 'Outline' ),
		},
		{
			name: 'squared',
			label: __( 'Squared' ),
		},
	],

	/**
	 * The edit function describes the structure of your block in the context of the editor.
	 * This represents what the editor will render when the block is used.
	 *
	 * The "edit" property must be a valid function.
	 *
	 * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
	 */
	edit: function( props ) {
		// Creates a <p class='wp-block-cgb-block-nordic-block'></p>.
		return (
			<Fragment>
				<Toolbar>
					<IconButton
						className="components-icon-button components-toolbar__control"
						label={ __( 'Delete text' ) }
						onClick={ () => props.setAttributes( { blockContent: '' } ) }
						icon="edit"
					/>
				</Toolbar>
				<InspectorControls>
					<PanelBody title="More settings" initialOpen={ false }>

						<FormToggle
							checked={ props.attributes.toggleSetting }
							onChange={ () => {
								console.log( props.attributes.toggleSetting );
								props.setAttributes( { toggleSetting: ! props.attributes.toggleSetting } );
							} }
						></FormToggle>
						<RichText
							label={ __( ' Additional CSS Class' ) }
							value={ props.attributes.blockContent }
							onChange={ ( newValue ) => props.setAttributes( { blockContent: newValue } ) }
							help="Just help text."
							placeholder="Rich text"
						/>
					</PanelBody>
				</InspectorControls>
				<div className={ props.className }>
					<InnerBlocks allowedBlocks={ [ 'core/image' ] } />
					<p>— Hello from the backend.</p>
					<h2>Toggle</h2>
					{ props.attributes.toggleSetting && <div>On</div> }
					<p>
					CGB BLOCK: <code>nordic-block</code> is a new Gutenberg block
					</p>
					{ props.attributes.blockContent }
					<p>

						<code>
							<a href="https://github.com/ahmadawais/create-guten-block">
							create-guten-block
							</a>
						</code>.
					</p>

				</div>
			</Fragment>
		);
	},

	/**
	 * The save function defines the way in which the different attributes should be combined
	 * into the final markup, which is then serialized by Gutenberg into post_content.
	 *
	 * The "save" property must be specified and must be a valid function.
	 *
	 * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
	 */
	save: function( props ) {
		return (
			<div>
				<InnerBlocks.Content />
				<p>— Hello from the frontend.</p>
				<p>
					CGB BLOCK: <code>nordic-block</code> is a new Gutenberg block.
				</p>
				<p>
					It was created via{ ' ' }
					<code>
						<a href="https://github.com/ahmadawais/create-guten-block">
							create-guten-block
						</a>
					</code>.
				</p>
			</div>
		);
	},
} );