README.md

Gutenbuild

Zero to Gutenburg with Docker.

Scenario

You want to add a Gutenburg block to your WordPress plugin. You don't want to install the npms and the nodes. You want to get stuff done.

Enter gutenbuild.

docker run -v `pwd`/src:/var/app/src -v `pwd`/build:/var/app/build coplusco/gutenbuild

Your ./build directory live updates with runnable Guten-code.

<?php
/**
 * @wordpress-plugin
 * Plugin Name: My Fantastic Block
 * Plugin URI: http://gutenbuild.local/
 * Description: Blocks are the future.
 */

function gutenbuild_init_block() {

	$script_asset = require_once( __DIR__ . '/build/index.asset.php' );

	wp_register_script(
		'create-block-gutenbuild-example-block-editor',
		plugins_url( 'build/index.js', __FILE__ ),
		$script_asset['dependencies'],
		$script_asset['version']
	);

	register_block_type(
		'create-block/premium-content',
		[
			'editor_script' => 'create-block-premium-content-block-editor',
		]
	);
}

add_action( 'init', 'gutenbuild_init_block' );

index.js

/**
 * Registers a new block provided a unique name and an object defining its behavior.
 *
 * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
 */
import { registerBlockType } from '@wordpress/blocks';

/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';

/**
 * Every block starts by registering a new block type definition.
 *
 * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
 */
registerBlockType( 'create-block/premium-content', {
	/**
	 * This is the display title for your block, which can be translated with `i18n` functions.
	 * The block inserter will show this name.
	 */
	title: __(
		'My Awesome Block',
		'create-block'
	),

	/**
	 * This is a short description for your block, can be translated with `i18n` functions.
	 * It will be shown in the Block Tab in the Settings Sidebar.
	 */
	description: __(
		'Example block written with ESNext standard and JSX support – build step required.',
		'create-block'
	),

	/**
	 * Blocks are grouped into categories to help users browse and discover them.
	 * The categories provided by core are `common`, `embed`, `formatting`, `layout` and `widgets`.
	 */
	category: 'common',

	/**
	 * An icon property should be specified to make it easier to identify a block.
	 * These can be any of WordPress’ Dashicons, or a custom svg element.
	 */
	icon: 'smiley',

	/**
	 * Optional block extended support features.
	 */
	supports: {
		// Removes support for an HTML mode.
		html: false,
	},

	/**
	 * 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.
	 *
	 * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit
	 *
	 * @param {Object} [props] Properties passed from the editor.
	 *
	 * @return {WPElement} Element to render.
	 */
	edit( { className } ) {
		return (
			<p className={ className }>
				{ __( 'Premium Content – hello from the editor!', 'create-block' ) }
			</p>
		);
	},

	/**
	 * The save function defines the way in which the different attributes should be combined
	 * into the final markup, which is then serialized by the block editor into `post_content`.
	 *
	 * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#save
	 *
	 * @return {WPElement} Element to render.
	 */
	save() {
		return (
			<p>
				{ __( 'Premium Content – hello from the saved content!', 'create-block' ) }
			</p>
		);
	},
} );

plugin.php

<?php
/**
 * @wordpress-plugin
 * Plugin Name: My Fantastic Block
 * Plugin URI: http://gutenbuild.local/
 * Description: Blocks are the future.
 */

function gutenbuild_init_block() {

	$script_asset = require_once( __DIR__ . '/build/index.asset.php' );

	wp_register_script(
		'create-block-gutenbuild-example-block-editor',
		plugins_url( 'build/index.js', __FILE__ ),
		$script_asset['dependencies'],
		$script_asset['version']
	);

	register_block_type(
		'create-block/premium-content',
		[
			'editor_script' => 'create-block-premium-content-block-editor',
		]
	);
}

add_action( 'init', 'gutenbuild_init_block' );