Building a Gutenberg Block

Make a class to call our blocks

//plugin.php

class TestBlock
{
    function __construct()
    {
        add_action('enqueue_block_editor_assets', array($this, 'adminAssets'));
    }

    function adminAssets()
    {
        wp_enqueue_script('newBlockType', plugin_dir_url(__FILE__) . 'test.js', array('wp-blocks'));
    }
}

$TestBlock = new TestBlock();

Register the blocks

//test.js

wp.blocks.registerBlockType("molecular/test-block", {
  title: "Hello World Block",
  icon: "universal-access-alt",
  category: "common",
  attributes: {
    content: {
      type: "string",
      source: "text",
      selector: "p",
    },
  },
  edit: function () {
    return wp.element.createElement("div", null, [
      wp.element.createElement("h1", null, "Hello World"),
      wp.element.createElement("p", {style: {color: "skyblue"}}, "Hello World"),
    ])
  },
  save: function () {
    return wp.element.createElement("div", null, [
      wp.element.createElement("h1", null, "Hello World"),
      wp.element.createElement("p", {style: {color: "skyblue"}}, "Hello World"),
    ])
  },
})