W celu stworzenia pluginu, który doda blok gutenberg zainstalujemy środowisko, które nam to ułatwi. Tworzymy folder z nazwą pluginu.
Mając zainstalowanego node.js wpisujemy w katalogu projektu

npm init -y	(package.json)
npm install @wordpress/scripts --save-dev

W katalogu głównym tworzymy plik index.php
Tworzymy folder src i wewnątrz umieszczamy plik index.js

W powstałym pliku package.json dodajemy instrukcje:

	"scripts":{
		"build":"wp-scripts build",
		"start": "wp-scripts start",

Komendą npm run start włączamy śledzenie projektu i automatyczną zamianę JSX na składnię zrozumiałą dla przeglądarki.

Przykład pluginu

Przykład pluginu, który pozwala adminowi wprowadzić wartość, zapisać ją w bazie danych i wypisać ją na froncie.

Plik index.php

<?php

/*
  Plugin Name: Plugin 1
  Description: Plugin desc
  Version: 1.0
  Author: Wilnox
  Author URI: https://wilnox.com/ 
*/

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

class MyNewClass {
  function __construct() {
    add_action('init', array($this, 'adminAssets'));
  }

  function adminAssets() {
    wp_register_script('ournewblocktype', plugin_dir_url(__FILE__) . 'build/index.js', array('wp-blocks', 'wp-element'));
    register_block_type('wilnox/my-first-plugin', array('editor_script'=>'ournewblocktype',
    'render_callback'=>array($this, 'theHTML')
  ));
  }

  function theHTML($attributes){
    return '<p>todays sky is ' . esc_html($attributes['skyColor']). '</p>';
  }
}

$myNewClass = new MyNewClass();

Plik index.js

wp.blocks.registerBlockType("wilnox/my-first-plugin", {
    title: "Plugin 1",
    icon: "smiley",
    category: "common",
    attributes:{
      skyColor:{type:"string"}
    },
    edit: function (props) {
      function updateSkyColor(event){
        props.setAttributes ({skyColor:event.target.value})
      }
      return (
        <div>
          <input type="text" placeholder="sky color" value={props.attributes.skyColor} onChange={updateSkyColor} />
        </div>
      )
    },
    save: function (props) {
      return null
    }
  })