For years, I relied on shortcodes in WordPress to add functionality to my websites. Whether it was a contact form, a gallery, or any custom element, all I had to do was add a small snippet like “[add_contact_form]”, and it worked like magic. But as WordPress evolves, so must I. The block-based editing experience offered by Gutenberg is the future, and transitioning away from shortcodes to blocks has become a necessity.

In this post, I'll share why I'm making the switch, how I'm handling the transition, and some practical examples to help you do the same.

What Are Shortcodes?

Shortcodes have been one of the easiest ways to add functionality to a WordPress site. They're snippets of text wrapped in square brackets, like this: [add_contact_form].

Underneath, shortcodes rely on PHP functions to output content. Here's an example of how I used to create a custom shortcode:

Example: A Simple Contact Form Shortcode

// Add this to functions.php or a custom plugin
function custom_contact_form_shortcode() {
    return '
        
            


            


            
        
    ';

}
add_shortcode('add_contact_form', 'custom_contact_form_shortcode');

What Are Custom Blocks?

Custom blocks are WordPress's answer to modern, modular content design. Unlike shortcodes, custom blocks are visual components that integrate seamlessly into the Gutenberg editor. They allow you to add functionality, such as forms, sliders, or custom layouts, with drag-and-drop ease and live previews.

A custom block is built using a combination of JavaScript, PHP, and the WordPress Block API. These blocks are highly flexible, allowing developers like me to create unique functionalities tailored to specific needs while maintaining compatibility with WordPress's block-based architecture.

For example, instead of relying on a [add_contact_form] shortcode, I can now create a custom “Contact Form” block that:

Appears visually in the editor: No more guessing what the output will look like.
Is fully customizable: Users can adjust settings (e.g., button text or field labels) directly in the editor.
Supports real-time editing: Any changes made are instantly visible.

Custom blocks aren't just about functionality — they elevate the user experience and make content creation more intuitive for everyone, from developers to non-technical editors.

Why I'm Moving to Blocks

Shortcodes are functional, but they lack the intuitiveness of blocks. Here's why I believe blocks are a better option:

Visual Editing: With blocks, I can see exactly what I'm adding to the page as I build it — no need to preview or guess what a shortcode will render.
Ease of Use: Blocks are drag-and-drop, customizable, and beginner-friendly, while shortcodes require familiarity with coding.
Future-Proofing: WordPress is clearly focused on blocks as the future of content creation, so staying with shortcodes feels outdated.

Replacing My Shortcodes with Blocks

I've started replacing my shortcodes with blocks wherever possible. Here's an example of how I converted my [add_contact_form] shortcode into a custom block.

Step 1: Register a Custom Block

I added this code to my theme's functions.php file or a custom plugin:

function register_contact_form_block() {
    wp_register_script(
        'custom-contact-form-block',
        get_template_directory_uri() . 'https://www.syedalinaqihasni.com/js/contact-form-block.js',
        array('wp-blocks', 'wp-element', 'wp-editor'),
        null,
        true
    );
    register_block_type('custom/contact-form', array(
        'editor_script' => 'custom-contact-form-block',
    ));

}
add_action('init', 'register_contact_form_block');

Step 2: Create the Block Script (contact-form-block.js)

const { registerBlockType } = wp.blocks;

const { createElement } = wp.element;

registerBlockType('custom/contact-form', {
    title: 'Contact Form',
    icon: 'email',
    category: 'common',
    edit: () =>
        createElement('div', null, 'Contact Form Block'),
    save: () =>
        createElement(
            'form',
            null,
            createElement('input', {
                type: 'text',
                placeholder: 'Your Name',
            }),
            createElement('input', {
                type: 'email',
                placeholder: 'Your Email',
            }),
            createElement(
                'button',
                { type: 'submit' },
                'Submit'
            )
        ),
});

With this, I now have a custom block that I can add directly in the editor, complete with a visual preview.

How I'm Transitioning My WordPress Sites

If you're thinking of making this switch too, here's my approach:

Audit Existing Shortcodes: I reviewed my sites to identify all the shortcodes I use. For most, there's already a block alternative. For example:
Replace Shortcodes Gradually: On pages where blocks exist, I replaced shortcodes manually.
Build Custom Blocks: For unique shortcodes (like my custom forms), I built blocks using JavaScript and PHP, as shown above.
Test and Optimize: After replacing shortcodes, I tested each page to ensure everything worked and looked as expected.
Train My Team: I took time to educate my team on using blocks instead of shortcodes, ensuring a smooth transition.

Benefits I'm Already Seeing

Switching to blocks has been a game-changer for me. Here's what I've noticed:

Faster Page Building: The drag-and-drop interface of blocks saves me hours compared to coding or inserting shortcodes.
Consistency: Reusable blocks ensure that elements like forms and CTAs look consistent across all pages.
Enhanced Design Flexibility: Blocks offer styling options directly in the editor, so I no longer have to rely on custom CSS for basic changes.

My Takeaway

The shift from shortcodes to blocks is more than just a trend; it's a leap forward for WordPress development. While shortcodes have served me well, they feel like a thing of the past in a block-driven world.

If you're still relying on shortcodes, I encourage you to start transitioning now. Whether it's finding block alternatives, building custom blocks, or simply experimenting with Gutenberg, it's worth the effort to future-proof your site.

Have you made the switch to blocks yet? Let me know your thoughts or reach out if you need help navigating the transition!

Gutenberg Blogs

Why I'm Moving from Shortcodes to Custom Blocks in WordPress and You Should Too…