Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?

Custom Gutenberg Block

This is a basic custom Gutenberg block. Files explained below.

  • block.js — We register Custom Gutenberg block here.
  • editor.css _ Block CSS for the editor.
  • style.css — Block CSS for the front end.
  • index.php — Enqueue block's assets for editor and the front end.
/**
* BLOCK: Basic
*
* Registering a basic block with Gutenberg.
* Simple block, renders and saves the same content without any interactivity.
*
* Styles:
* editor.css — Editor styles for the block.
* style.css — Frontend styles for the block.
*/
( function() {
var __ = wp.i18n.__; // The __() for internationalization.
var el = wp.element.createElement; // The wp.element.createElement() function to create elements.
var registerBlockType = wp.blocks.registerBlockType; // The registerBlockType() to register blocks.
/**
* Register Basic Block.
*
* Registers a new block provided a unique name and an object defining its
* behavior. Once registered, the block is made available as an option to any
* editor interface where blocks are implemented.
*
* @param {string} name Block name.
* @param {Object} settings Block settings.
* @return {?WPBlock} The block, if it has been successfully
* registered; otherwise `undefined`.
*/
registerBlockType( 'gb/01-basic', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
title: __( 'Basic', 'GB' ), // Block title.
icon: 'shield-alt', // 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.
// The "edit" property must be a valid function.
edit: function( props ) {
// Creates a <p class='wp-block-gb-01-basic'></p>.
return el(
'p', // Tag type.
{ className: props.className }, // The class="wp-block-gb-01-basic" : The class name is generated using the block's name prefixed with wp-block-, replacing the / namespace separator with a single -.
'Hello World! — from the editor (01 Basic Block).' // Content inside the tag.
);
},
// The "save" property must be specified and must be a valid function.
save: function( props ) {
return el(
'p', // Tag type.
{ className: props.className }, // The class="wp-block-gb-01-basic" : The class name is generated using the block's name prefixed with wp-block-, replacing the / namespace separator with a single -.
'Hello World! — from the frontend (01 Basic Block).' // Content inside the tag.
);
},
} );
})();
/**
* ----------------------------------------------------------------------------
* #.# Editor CSS
*
* BLOCK: 01-basic block CSS for the editor.
* ----------------------------------------------------------------------------
*/
.wp-block-gb-01-basic {
color: #000000;
background: mistyrose;
border: 0.2rem solid red;
padding: 2rem;
}
<?php
/**
* BLOCK: Basic
*
* Gutenberg Custom Block assets.
*
* @since 1.0.0
* @package GB
*/
// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
// Hook: Editor assets.
add_action( 'enqueue_block_editor_assets', 'gb_block_01_basic_editor_assets' );
/**
* Enqueue the block's assets for the editor.
*
* `wp-blocks`: includes block type registration and related functions.
* `wp-element`: includes the WordPress Element abstraction for describing the structure of your blocks.
* `wp-i18n`: To internationalize the block's. text.
*
* @since 1.0.0
*/
function gb_block_01_basic_editor_assets() {
// Scripts.
wp_enqueue_script(
'gb-block-01-basic', // Handle.
plugins_url( 'block.js', __FILE__ ), // Block.js: We register the block here.
array( 'wp-blocks', 'wp-i18n', 'wp-element' ), // Dependencies, defined above.
filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ) // filemtime — Gets file modification time.
);
// Styles.
wp_enqueue_style(
'gb-block-01-basic-editor', // Handle.
plugins_url( 'editor.css', __FILE__ ), // Block editor CSS.
array( 'wp-edit-blocks' ), // Dependency to include the CSS after it.
filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ) // filemtime — Gets file modification time.
);
} // End fucntion gb_block_01_basic_editor_assets().
// Hook: Frontend assets.
add_action( 'enqueue_block_assets', 'gb_block_01_basic_block_assets' );
/**
* Enqueue the block's assets for the frontend.
*
* @since 1.0.0
*/
function gb_block_01_basic_block_assets() {
// Styles.
wp_enqueue_style(
'gb-block-01-basic-frontend', // Handle.
plugins_url( 'style.css', __FILE__ ), // Block frontend CSS.
array( 'wp-blocks' ), // Dependency to include the CSS after it.
filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ) // filemtime — Gets file modification time.
);
} // End fucntion gb_block_01_basic_block_assets().
/**
* ----------------------------------------------------------------------------
* #.# Frontend CSS
*
* BLOCK: 01-basic block CSS for the frontend.
* ----------------------------------------------------------------------------
*/
.wp-block-gb-01-basic {
color: #000000;
background: gold;
border: 0.2rem solid goldenrod;
padding: 2rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment