WordPress Custom Block Developer Essential

Block Editor
Create a Basic Block

Plugin Example

Preparation

• Development Environment
• Scaffolding
  an official support tool for scaffolding a WordPress plugin that registers a block

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…

WordPress Developer Resources