WordPress Custom Block Developer Essential

Block Editor
Create a Basic Block

Plugin Example

Preparation

Standard Block

  • block.json
  • block.js
    • edit
      • toolbar(/BlockControls)
      • setting sidebar(/InspectorControls)
    • save

Dynamic Block

inaddition to standard block, a dynamic block added the following:

  • render.php
  • enqueue js and css as needed

Setting Sidebar

import { __ } from "@wordpress/i18n";
import { InspectorControls } from "@wordpress/block-editor";
import { PanelBody } from "@wordpress/components";
<InspectorControls>
    <PanelBody
    title={__("Custom Block Controls", "inspector-control-groups")}
    >
        {__(
          "Custom block controls added using the InspectorControls component",
          "inspector-control-groups"
        )}
    </PanelBody>
</InspectorControls>

ToolBar

Style

block.json

{
    "supports": {
        "color": {},
        "spacing": {
          "margin": true,
          "padding": true
        }
      }
}
@wordpress/block-editor – Block Editor Handbook | Developer.WordPress.org
This module allows you to create and use standalone block editors. Installation Install the module npm install @wordpress/block-editor…

JS package reference