#2 Create Custom Gutenberg Block in 3 Steps

Step 1: Create the required files

To create a simple block through a plugin lets create a plugin directory called sg-block the following files inside of it:

sg-block
 -sg-block.php
 -simple-block.js
 -editor.css
 -style.css

Step 2: Register your block

You can register a block by registering a new block type definition using a function called registerBlockType It takes two arguments :

1-A block name ( A unique string to identify the block in a format namespace/block-name )
2-A block configuration object ( Contains a few properties that are required before the block can be registered. Object [ { key: value } ] )

namespace is the name of your theme or plugin.
This name is used on the comment delimiters as <!-- wp:namespace/block-name --> when the post is saved into the database.

Now let’s register our block by calling registerBlockType() . Here sg-block is the namespace ( our plugin directory name ) and simple-block is the block name. Then we need to put the title, description, icon, and category.

The edit function describes the structure of the block and represents what the editor will render when the block is used on the dashboard.

The save function defines how the attribute will combine together to generate a final mark up that then serialized and saved into the database. It will decide how your content would look at the front end.

// simple-block.jswp.blocks.registerBlockType( 'sg-block/simple-block', {

   title: wp.i18n.__( 'Simple Block', 'text-domain' ),
   description: wp.i18n.__( 'My block description', 'text-domain' ),
   icon: 'universal-access-alt',
   category: 'common',

   edit: function ( props ) {
      return wp.element.createElement( 'p', { className: 'custom-block' }, 'Hello World' );
   },

   save: function () {
      return wp.element.createElement( 'p', { className: 'custom-block' }, 'Saves in post Content' );
   }

} );

Step 3: Register your scripts

Then in your main plugin file sg-block.php, you can define constants for your plugin URL and plugin directory path. Create a custom function gutenberg_custom_blocks and hook it to init hook. You can then register your front end style, editor style and javascript file for your block using wp_register_style and wp_register_script functions. You can assign these as handles associated with your block using the style, editor_script, and editor_style block type registration settings, using register_block_type()

The editor_-prefixed handles will only be enqueued in the context of the editor, while script and style will be enqueued both in the editor and when viewing a post on the front of your site.

// sg-block.php
<?php
/**
 * Plugin Name: Simple Gutenberg Block
 * Plugin URI: https://imransayed.com
 * Description: This plugin creates a simple Gutenberg block
 * Version: 1.0.0
 * Author: Imran Sayed
 * Author URI: https://profiles.wordpress.org/gsayed786
 * License: GPL2
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: sg-block
 * Domain Path: /languages
 *
 * @package Simple Gutenberg Block
 */

define( 'SB_PLUGIN_URL', plugins_url( 'sg-block' ) );
define( 'SB_PLUGIN_DIR_PATH', plugin_dir_path( __FILE__ ) );

function gutenberg_custom_blocks() {


   // Block front end styles.
   wp_register_style(
      'sg-block-front-end-styles',
      SB_PLUGIN_URL . '/style.css',
      array( 'wp-edit-blocks' ),
      filemtime( SB_PLUGIN_DIR_PATH . 'style.css' )
   );
   // Block editor styles.
   wp_register_style(
      'sg-block-editor-styles',
      SB_PLUGIN_URL . '/editor.css',
      array( 'wp-edit-blocks' ),
      filemtime( SB_PLUGIN_DIR_PATH . 'editor.css' )
   );

   // Block Editor Script.
   wp_register_script(
      'sg-block-editor-js',
      SB_PLUGIN_URL . '/simple-block.js',
      array( 'wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wp-i18n' ),
      filemtime( SB_PLUGIN_DIR_PATH . 'simple-block.js' ),
      true
   );
   register_block_type(
      'sg-block/simple-block',
      array(
         'style'         => 'sg-block-front-end-styles',
         'editor_style'  => 'sg-block-editor-styles',
         'editor_script' => 'sg-block-editor-js',
      )
   );

}

add_action( 'init', 'gutenberg_custom_blocks' );

Now you can go to the editor in the dashboard click on the plus icon. You will be able to see the Simple block