Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?

Custom Editable Gutenberg Block

This is a basic custom editable 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 the editor and the front end.
/**
* BLOCK: Editable
*
* Registering a basic editable block with Gutenberg.
* Introduces the concept of attributes and extracting
* them, and the default text formatting added by Editable.
*
* 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 Editable = wp.blocks.Editable; // Editable component of React.
var children = wp.blocks.query.children; // The childern() function to extract child nodes from a paragraph of rich text.
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/03-block-editable', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
title: __( 'Editable', 'GB' ), // Block title.
icon: 'edit', // 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.
/**
* Attribute matchers!
*
* Attribute matchers are used to define the strategy by which block
* attribute values are extracted from saved post content. They provide
* a mechanism to map from the saved markup to a JavaScript representation
* of a block.
*
* children() — Use children to extract child nodes of the matched element,
* returned as an array of virtual elements. This is most commonly used in
* combination with the Editable component.
*
* Example: Extract child nodes from a paragraph of rich text.
*/
attributes: {
content: children( 'p' ), // Content: Extract child nodes from a paragraph of rich text.
},
// The "edit" property must be a valid function.
edit: function( props ) {
var content = props.attributes.content; // Content in our block.
var focus = props.focus; // Focus — should be truthy.
/**
* Update content on change.
*/
function onChangeContent( newContent ) {
props.setAttributes( { content: newContent } );
}
// The editable content.
return el(
Editable, // Editable React component.
{ // Creates <div class="wp-block-gb-03-block-editable"><p></p></div>
tagName: 'p', // <p></p>.
className: props.className, // The class="wp-editor-gb-03-block-editable".
onChange: onChangeContent, // Run the onChangeContent() function onChange of content.
value: content, // Content in our block. i.e. props.attributes.content;
focus: focus, // Focus — should be truthy. i.e. props.focus;
onFocus: props.setFocus
}
);
},
// The "save" property must be specified and must be a valid function.
save: function( props ) {
var content = props.attributes.content; // Content in our block.
// The frontend content.
return el( 'p', { // <p></p>.
className: props.className, // The class="wp-block-gb-03-block-editable".
},
content,
);
},
} );
} )();
/**
* ----------------------------------------------------------------------------
* #.# Editor CSS
*
* BLOCK: 03-block-editable block CSS for the editor.
* ----------------------------------------------------------------------------
*/
.wp-block-gb-03-block-editable {
color: #000000;
background: azure;
border: 0.2rem solid midnightblue;
padding: 2rem;
}
<?php
/**
* BLOCK: Editable
*
* 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_03_block_editable_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_03_block_editable_editor_assets() {
// Scripts.
wp_enqueue_script(
'gb-block-03-block-editable', // 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-03-block-editable-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_03_block_editable_editor_assets().
// Hook: Frontend assets.
add_action( 'enqueue_block_assets', 'gb_block_03_block_editable_block_assets' );
/**
* Enqueue the block's assets for the frontend.
*
* @since 1.0.0
*/
function gb_block_03_block_editable_block_assets() {
// Styles.
wp_enqueue_style(
'gb-block-03-block-editable-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_03_block_editable_block_assets().
/**
* ----------------------------------------------------------------------------
* #.# Frontend CSS
*
* BLOCK: 03-block-editable block CSS for the frontend.
* ----------------------------------------------------------------------------
*/
.wp-block-gb-03-block-editable {
color: #000000;
background: azure;
border: 0.2rem solid midnightblue;
padding: 2rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment