Day 16: Creating Interactive Blocks in Gutenberg

Introduction

Welcome to Day 16 of the Gutenberg development series! Today, we’ll dive into creating interactive blocks in Gutenberg. Interactive blocks allow users to input data, click buttons, or toggle elements, making your content more engaging and dynamic.

For example, you might create a block where users can submit a rating, vote in a poll, or input text that dynamically updates the display. By adding interactive elements, you can improve user engagement and create richer content experiences.

In this guide, you’ll learn how to:

• Create a basic interactive block using form elements.
• Handle user input and dynamically update block content.
• Build a more complex interactive experience with JavaScript.

What are Interactive Blocks in Gutenberg?

Interactive blocks allow users to actively engage with a block through actions like entering text, clicking buttons, or toggling options. These blocks rely on JavaScript to manage user input and update the content dynamically within the Block Editor and on the front end.

For example, an interactive block could:

• Display a button that users can click to toggle between different content.
• Accept user input via a text field and display the entered text dynamically.
• Provide interactive features like voting, star ratings, or quizzes.

Step 1: Creating a Basic Interactive Block

Let’s start by creating a simple Interactive Block that includes a text input and a live preview of the entered text.

1. Register the Block

In your block registration file (e.g., blocks/interactive-block.js), define the block with a text input field.

import { registerBlockType } from '@wordpress/blocks';
import { useState } from '@wordpress/element';
import { TextControl } from '@wordpress/components';

registerBlockType('my-theme/interactive-block', {
    title: 'Interactive Block',
    icon: 'edit',
    category: 'my-custom-category',
    attributes: {
        userInput: {
            type: 'string',
            default: '',
        },
    },
    edit: ({ attributes, setAttributes }) => {
        const { userInput } = attributes;

        const updateInput = (newInput) => {
            setAttributes({ userInput: newInput });
        };

        return (
            <div>
                <TextControl
                    label="Enter Text"
                    value={userInput}
                    onChange={updateInput}
                    placeholder="Type something..."
                />
                <p>Live Preview: {userInput}</p>
            </div>
        );
    },
    save: ({ attributes }) => {
        const { userInput } = attributes;
        return <p>{userInput}</p>;
    },
});

Explanation:

• TextControl: This is a WordPress component that provides a text input field for users to enter content.
• useState: This is a React hook that allows us to manage the input state within the block.
• setAttributes: This function is used to update the block’s attributes based on user input. Here, we update the userInput attribute each time the user types something.

Step 2: Handling User Input Dynamically

To make the block interactive, we allow users to input text, and the block will dynamically display the entered text as a live preview.

1. Live Preview of User Input

In the block’s edit function, we use the TextControl to capture user input and dynamically update the live preview.

<TextControl
    label="Enter Text"
    value={userInput}
    onChange={updateInput}
    placeholder="Type something..."
/>
<p>Live Preview: {userInput}</p>

Each time the user types into the TextControl, the updateInput function is triggered, updating the userInput attribute and displaying it in real-time as the “Live Preview.”

Step 3: Adding Interactive Elements like Buttons

Next, let’s expand the interactive block by adding a button that toggles the visibility of some text based on user action.

1. Add a Button to Toggle Content

You can extend the block with a button that shows or hides additional content when clicked.

import { Button } from '@wordpress/components';
import { useState } from '@wordpress/element';

registerBlockType('my-theme/toggle-block', {
    title: 'Toggle Block',
    icon: 'visibility',
    category: 'my-custom-category',
    edit: () => {
        const [isVisible, setIsVisible] = useState(false);

        const toggleVisibility = () => {
            setIsVisible(!isVisible);
        };

        return (
            <div>
                <Button onClick={toggleVisibility}>
                    {isVisible ? 'Hide' : 'Show'} Content
                </Button>
                {isVisible && <p>This is the toggled content!</p>}
            </div>
        );
    },
    save: () => {
        return null; // This block is dynamic, so no content is saved
    },
});

Explanation:

• Button: The WordPress Button component creates an interactive button that users can click.
• useState: This manages the block’s visibility state (isVisible), which toggles between showing and hiding the content.
• toggleVisibility: This function switches the visibility of the content when the button is clicked.

Step 4: Building More Complex Interactive Blocks

For more complex interactivity, you can use JavaScript to handle events such as voting, ratings, or form submissions. Here’s an example of a simple voting block where users can vote up or down.

import { Button } from '@wordpress/components';
import { useState } from '@wordpress/element';

registerBlockType('my-theme/vote-block', {
    title: 'Vote Block',
    icon: 'thumbs-up',
    category: 'my-custom-category',
    edit: () => {
        const [votes, setVotes] = useState(0);

        const voteUp = () => setVotes(votes + 1);
        const voteDown = () => setVotes(votes - 1);

        return (
            <div>
                <p>Votes: {votes}</p>
                <Button onClick={voteUp} isPrimary>
                    Vote Up
                </Button>
                <Button onClick={voteDown} isSecondary>
                    Vote Down
                </Button>
            </div>
        );
    },
    save: () => {
        return null; // Dynamic block, no content saved
    },
});

Explanation:

• Votes: A state variable (votes) is used to keep track of the vote count.
• voteUp/voteDown: These functions increment or decrement the vote count when users click the respective buttons.

This block dynamically updates the vote count in real-time based on user interaction, creating a simple yet effective engagement tool.

Step 5: Testing Interactive Blocks

1. Rebuild Your Block:
   • Run your build command to rebuild the block and ensure that it’s loaded properly in the Block Editor.

npm run build

2. Test in the Editor:
   • Add the interactive block to a post or page and test out the user interactions, such as typing in the input field, clicking the toggle button, or voting.
3. Check Front-End Behavior:
   • After publishing the post, ensure that the block behaves as expected on the front end. For example, the text preview should update in real-time, or the content visibility should toggle correctly.

Best Practices for Interactive Blocks

1. Focus on User Experience: When building interactive blocks, consider how users will engage with the block. Ensure that inputs, buttons, or toggles are intuitive and easy to use.
2. Test Interactions: Always test interactive blocks across multiple browsers and devices to ensure consistent behavior.
3. Keep it Responsive: Make sure that interactive elements work well on all screen sizes, especially for touch devices.

Conclusion: Enhancing User Engagement with Interactive Blocks

Interactive blocks are a powerful way to engage users and provide dynamic content experiences within WordPress. By adding input fields, buttons, or toggles, you can allow users to actively participate in the content creation process, whether it’s voting, submitting text, or interacting with real-time data.

In this article, you’ve learned how to:

• Create basic interactive blocks using input fields and buttons.
• Handle user input and dynamically update block content.
• Build more complex interactions like voting or toggling content visibility.

In Day 17, we’ll explore server-side rendered blocks, which allow you to fetch and display dynamic content from the server directly within the Block Editor.