WordPress Custom Block Developer Essential

A complete guide for Custom Block development for WordPress in all aspects

WordPress Custom Block Developer Essential
Photo by La-Rel Easter / Unsplash

Block Editor
Create a Basic Block

Plugin Example


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";
    title={__("Custom Block Controls", "inspector-control-groups")}
          "Custom block controls added using the InspectorControls component",




    "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