Skip to content
wp-skills
Register
tools/block-generator

WordPress Block Generator

A whole block plugin: block.json with the attributes and supports you pick, a render.php that runs on every request, and the editor script that makes the block appear in the inserter. No build step.

The half of the block's name before the slash. Lower case and dashes only — the editor rejects a name with an underscore in it, even though PHP registers it happily.

Also the plugin folder and its main file, so all three stay the same string.

What the inserter calls it.

Shown in the block's settings sidebar.

Which section of the inserter it appears under.

A Dashicon name, without the dashicons- prefix.

Comma separated. Extra words that find the block in the inserter's search.

Attributes1
  • #1

    Reduced to a camelCase name, because the same string is a key in block.json, a PHP array key and a JavaScript property.

    What the control is called in the block's sidebar.

    Leave blank for no default at all — an attribute without one is genuinely absent from $attributes rather than empty.

Adds the alignment toolbar, and an align attribute alongside your own.

Lets an author give the block an id to link to.

Background and text colour, applied by WordPress through the wrapper attributes.

Font size and line height.

Padding and margin.

On by default in WordPress. Off removes the Advanced panel's class field.

Off by choice: a dynamic block's markup comes from render.php, so hand-edited HTML is markup nothing reads.

A style.css loaded in the editor and on the front end both.

hero-banner/hero-banner.php
<?php
/**
 * Plugin Name: Hero Banner Block
 * Description: A heading and a short line of text, full width.
 * Version: 1.0.0
 * Requires at least: 6.1
 * Requires PHP: 7.4
 * Text Domain: my-plugin
 *
 * Generated by wp-skills.com
 *
 * @package Hero Banner
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Registers the editor script and then the block itself.
 *
 * The script is registered here, in PHP, rather than named in block.json as
 * 'file:./index.js' — and the difference is not style. Measured on WordPress
 * 7.1, the 'file:' form registers the script with no dependencies at all,
 * because those normally come from an index.asset.php that a build step writes.
 * There is no build step here, so the dependencies are declared where they can
 * be: block.json names the handle below, and this call gives the handle its
 * dependencies.
 *
 * register_block_type_from_metadata() is passed no second argument on purpose.
 * Anything in that array overrides block.json — including 'name', verified on
 * 7.1 by registering one directory twice under two names and getting two
 * blocks — so block.json stays the only description of this block.
 */
function my_plugin_hero_banner_register_block(): void {
	wp_register_script(
		'my-plugin-hero-banner-editor',
		plugins_url( 'index.js', __FILE__ ),
		array(
			'wp-blocks',
			'wp-element',
			'wp-block-editor',
			'wp-components',
			'wp-i18n',
		),
		'1.0.0',
		true
	);

	register_block_type_from_metadata( __DIR__ );
}
add_action( 'init', 'my_plugin_hero_banner_register_block' );