Summary: Learning about WordPress Static Blocks development.

Static Block in Block Development

In WordPress block development, a static block refers to a custom block that doesn’t allow the end-user (content creator or editor) to modify its content from within the WordPress editor. It means that the block renders the same content every time it is used, regardless of where it is placed. This contrasts with dynamic blocks, which render content based on external data or user input.

For example, if we are creating a block to display a fixed marketing banner or a fixed HTML section, we would develop a static block that renders the same output each time.

Static vs Dynamic Blocks

Static Block: A block with content that does not change. This content is hardcoded during development, and it renders the same output every time. There is no PHP or JavaScript data processing required during the rendering of static blocks.
Dynamic Block: A block that generates its content based on external input (such as PHP rendering). This type of block pulls in data dynamically at runtime, which means that its content could change every time the page loads or is interacted with.

Development Environment

Before creating static blocks in WordPress, we will need to set up our development environment.

Node.js and npm: We will need these to manage dependencies and build the block.
WordPress instance: Either a local WordPress installation using something like LocalWP, XAMPP, or a hosted environment.

@wordpress/scripts: A package that provides everything we need to start developing blocks without configuring Webpack, Babel, or other build tools.

npm install @wordpress/scripts --save-dev

Structure of a WordPress Block

WordPress blocks are made up of several files that define their functionality, styling, and structure. These are the basic components of a block:

block.json: The block’s metadata file. It defines the name, title, description, category, icon, and other settings.
index.js: The JavaScript file where the block is registered and defined.
editor.js: The JavaScript file that manages the block’s behavior in the block editor.
style.css: The stylesheet for the block on the front-end.
editor.css: The stylesheet for the block within the editor.

Block Registration (block.json)

The block.json file defines our block and tells WordPress how to register it.

{
  "apiVersion": 2,
  "name": "custom/static-block",
  "title": "Static Block",
  "category": "common",
  "icon": "smiley",
  "description": "A custom static block for your content.",
  "keywords": ["static", "block"],
  "textdomain": "custom-block",
  "editorScript": "file:./index.js",
  "style": "file:./style.css"
}

apiVersion: Should be set to 2 for modern block development.
name: A unique identifier for our block (use a namespace, e.g., custom/static-block).
title: The title of our block that appears in the editor.
category: This places our block in a category (e.g., common, formatting, layout).
icon: The WordPress Dashicons icon that will be associated with our block.
description: A brief description of what the block does.
keywords: Keywords to help users search for this block in the block editor.
editorScript: Specifies the JavaScript file that contains the block’s editor-side code.

Block JavaScript (index.js)

The index.js file defines how our static block is rendered in the block editor and what it outputs on the front-end.

import { registerBlockType } from '@wordpress/blocks';

registerBlockType( 'custom/static-block', {
    title: 'Static Block',
    icon: 'smiley',
    category: 'common',
    edit: () => {
        return (
            <p>This is a static block in the editor.</p>
        );
    },
    save: () => {
        return (
            <p>This is a static block on the front-end.</p>
        );
    },
} );

edit: This is the content or markup displayed in the block editor (what users see while they are editing the page or post).
save: This is the static content or markup that is rendered on the front-end of the website.

Styles (style.css and editor.css)

We can style our block both in the editor and on the front-end.

style.css for front-end styling:

.wp-block-custom-static-block {
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
    font-size: 18px;
}

editor.css for editor-specific styling:

.wp-block-custom-static-block {
    background-color: #e0e0e0;
    border: 1px dashed #ccc;
    padding: 15px;
}

Registering and Enqueuing Block Assets

To load the JavaScript and CSS files we have created, we will need to register and enqueue them in WordPress. This is typically done via our theme’s functions.php file or a plugin.

function register_static_block() {
    // Register the block editor script.
    wp_register_script(
        'static-block-editor-script',
        get_template_directory_uri() . '/blocks/static-block/index.js',
        array( 'wp-blocks', 'wp-element', 'wp-editor' )
    );

    // Register editor style.
    wp_register_style(
        'static-block-editor-style',
        get_template_directory_uri() . '/blocks/static-block/editor.css',
        array( 'wp-edit-blocks' )
    );

    // Register front-end style.
    wp_register_style(
        'static-block-style',
        get_template_directory_uri() . '/blocks/static-block/style.css',
        array()
    );

    // Register the block.
    register_block_type( 'custom/static-block', array(
        'editor_script' => 'static-block-editor-script',
        'editor_style'  => 'static-block-editor-style',
        'style'         => 'static-block-style'
    ) );
}
add_action( 'init', 'register_static_block' );

WordPress Static Blocks