Mayank Tripathi

Understanding Blocks in WordPress Block Editor

The WordPress Block Editor, introduced in WordPress 5.0, revolutionized content creation by allowing users to build posts and pages using a block-based approach. This system enhances flexibility and creativity, making it easier for both developers and non-developers to design their content. In this blog post, we’ll explore the various types of blocks available, how to create your own, and delve into the differences between static and dynamic blocks.

1. Default Blocks

Default blocks are pre-defined components that come with the WordPress Block Editor. They allow users to add different types of content easily without writing any code. Some common default blocks include:

  • Paragraph Block: For adding standard text.
  • Image Block: To upload and display images.
  • Heading Block: For adding headings of different levels.
  • List Block: For creating ordered or unordered lists.
  • Quote Block: For adding quotes.
  • Button Block: For creating clickable buttons.

Each default block can be customized with various settings, such as alignment, color, and size. Users can easily add these blocks through the block inserter (the plus icon) in the editor interface.

2. Creating a Block

Creating a custom block in WordPress involves several steps, including registering the block, defining its properties, and writing the necessary JavaScript and PHP code. Below is a step-by-step guide to creating a simple static block:

Step 1: Set Up Your Plugin

Create a new folder in the wp-content/plugins/ directory, for example, my-custom-blocks. Inside this folder, create a main plugin file named my-custom-blocks.php and a block.js file for the JavaScript code.

Step 2: Register the Block

In your my-custom-blocks.php, add the following code to register your block:

<?php
/**
 * Plugin Name: My Custom Blocks
 * Description: A plugin to create custom blocks for the WordPress block editor.
 */

function my_custom_blocks_init() {
    wp_register_script(
        'my-custom-blocks-js',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-editor' ),
        true
    );

    register_block_type( 'myplugin/my-custom-block', array(
        'editor_script' => 'my-custom-blocks-js',
    ) );
}
add_action( 'init', 'my_custom_blocks_init' );

Step 3: Create the Block JavaScript

In block.js, add the following code to define your custom block:

const { registerBlockType } = wp.blocks;
const { Fragment } = wp.element;
const { RichText } = wp.blockEditor;

registerBlockType('myplugin/my-custom-block', {
    title: 'My Custom Block',
    icon: 'star',
    category: 'widgets',

    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },

    edit({ attributes, setAttributes }) {
        return (
            <Fragment>
                <RichText
                    tagName="p"
                    value={attributes.content}
                    onChange={(content) => setAttributes({ content })}
                    placeholder="Enter text..."
                />
            </Fragment>
        );
    },

    save({ attributes }) {
        return <RichText.Content tagName="p" value={attributes.content} />;
    },
});

Step 4: Activate Your Plugin

Once your code is set up, go to the WordPress admin panel, navigate to the Plugins page, and activate your custom block plugin. You should now see your custom block available in the block inserter.

3. Basic (Static) Block

A static block is one that does not change or retrieve data dynamically from the server after it’s been created. The example provided above, “My Custom Block,” is a static block since it simply accepts text input and saves that content.

Static blocks are straightforward to implement and are great for simple use cases where content does not require real-time updates or dynamic behavior.

Characteristics of Static Blocks:

  • Performance: Static blocks load faster since they do not require additional server requests after saving.
  • Simplicity: They are easier to create and manage, making them suitable for most common use cases.
  • No Server Interaction: Static blocks do not retrieve or display any server-side data.

4. Dynamic Block

Dynamic blocks, on the other hand, can change their content based on user interaction, settings, or real-time data from the server. These blocks render server-side content, which means that the block’s output can change without needing to be edited in the block editor.

Step 1: Modifying the Block Registration

To convert the static block we created into a dynamic block, we need to adjust our block registration code. In my-custom-blocks.php, update the register_block_type function:

register_block_type( 'myplugin/my-dynamic-block', array(
    'render_callback' => 'my_dynamic_block_render',
) );

function my_dynamic_block_render( $attributes ) {
    // Render your dynamic content here. For example, fetching recent posts.
    ob_start();
    ?>
    <div>
        <h2>Recent Posts</h2>
        <ul>
            <?php
            $recent_posts = wp_get_recent_posts();
            foreach( $recent_posts as $post ) {
                echo '<li>' . esc_html( $post['post_title'] ) . '</li>';
            }
            ?>
        </ul>
    </div>
    <?php
    return ob_get_clean();
}

Step 2: Rendering the Dynamic Block

In the example above, the dynamic block will display a list of recent posts whenever it is loaded on the front end. The render_callback function generates the output, allowing for the content to be updated dynamically.

Characteristics of Dynamic Blocks:

  • Real-Time Data: Dynamic blocks can display content that changes over time or based on user input.
  • Server-Side Rendering: The content is rendered on the server, which may affect performance compared to static blocks.
  • Interactivity: They can provide users with more interactive content that can change without reloading the page.

Conclusion

WordPress blocks offer a powerful way to create and manage content. Understanding the differences between static and dynamic blocks allows developers to choose the right approach based on their needs. While static blocks are simpler and faster, dynamic blocks provide the flexibility to display real-time data and create more interactive experiences for users.

Whether you are a developer looking to enhance your website or a content creator wanting to leverage the latest features of WordPress, the block editor is an essential tool for modern content management. Start exploring blocks today and unlock the potential of your WordPress site!