Tag: Predefined content in WordPress blocks

Introduction

Welcome to Day 14 of the Gutenberg development series! Today’s focus is on dynamic block templates. These templates allow you to define a default structure for blocks, which automatically populates when the block is added to a post or page. For example, if you’re creating a testimonial block, you can include a default layout with placeholder text and image placeholders, making it easier for users to fill in their content.

In this guide, you will learn how to:

• Define dynamic block templates.
• Customize block templates with default content.
• Integrate block templates for better user experiences.

What are Dynamic Block Templates?

A dynamic block template is a predefined structure of content that gets automatically inserted when a user adds a block to the editor. This is particularly useful when you want to guide users in creating consistent content layouts without forcing them to build blocks from scratch.

For example, with a testimonial block, you could provide a default layout with a text field for the quote, an image for the person, and their name in bold, all pre-configured. The user can then just fill in the details without needing to manually create this structure.

Step 1: Defining a Basic Block Template

Let’s start by creating a basic dynamic block template for a Testimonial Block. The template will include a Heading block for the testimonial title, a Paragraph block for the quote, and an Image block for the person’s photo.

1. Register the Block with a Template

In your block registration file (such as blocks/testimonial-block.js), define the block with a template.

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

registerBlockType('my-theme/testimonial-block', {
    title: 'Testimonial Block',
    icon: 'format-quote',
    category: 'my-custom-category',
    edit: ({ attributes, setAttributes }) => {
        return (
            <div>
                <InnerBlocks
                    template={[
                        ['core/heading', { placeholder: 'Testimonial Title' }],
                        ['core/paragraph', { placeholder: 'Write the testimonial here...' }],
                        ['core/image', { align: 'left', sizeSlug: 'thumbnail' }]
                    ]}
                    templateLock={false}
                />
            </div>
        );
    },
    save: () => {
        return <InnerBlocks.Content />;
    },
});

Explanation:

• InnerBlocks: This allows the block to contain other blocks within it. Here, we are using the template prop to define a pre-structured layout with a heading, paragraph, and image block.
• template: This defines the default block structure, where each array item represents a block (e.g., Heading, Paragraph, and Image).
• templateLock={false}: This allows users to add or remove blocks within the template, providing flexibility.

Step 2: Adding Default Content and Placeholder Text

You can also define default content and placeholder text to make the template more user-friendly.

1. Customize the Template with Default Content

Let’s modify the block to include placeholder text and a default image for the testimonial.

registerBlockType('my-theme/testimonial-block', {
    title: 'Testimonial Block',
    icon: 'format-quote',
    category: 'my-custom-category',
    edit: ({ attributes, setAttributes }) => {
        return (
            <div>
                <InnerBlocks
                    template={[
                        ['core/heading', { placeholder: 'Customer Testimonial' }],
                        ['core/paragraph', { placeholder: '“This is the best service I’ve ever used!”' }],
                        ['core/image', { align: 'left', url: 'https://example.com/default-image.jpg', alt: 'Customer Photo' }]
                    ]}
                    templateLock={false}
                />
            </div>
        );
    },
    save: () => {
        return <InnerBlocks.Content />;
    },
});

Explanation:

• Placeholder Text: The Heading and Paragraph blocks are provided with placeholder text, guiding the user on what type of content to add.
• Default Image: The Image block has a default image URL, making it easier for the user to replace it with their own image later.

Step 3: Locking Block Templates for Consistency

If you want to maintain a specific layout and prevent users from adding or removing blocks within the template, you can lock the template structure.

1. Lock the Template Structure

By setting templateLock='all', you can prevent users from adding, moving, or removing blocks within the template.

registerBlockType('my-theme/testimonial-block', {
    title: 'Testimonial Block',
    icon: 'format-quote',
    category: 'my-custom-category',
    edit: ({ attributes, setAttributes }) => {
        return (
            <div>
                <InnerBlocks
                    template={[
                        ['core/heading', { placeholder: 'Customer Testimonial' }],
                        ['core/paragraph', { placeholder: '“This is the best service I’ve ever used!”' }],
                        ['core/image', { align: 'left', url: 'https://example.com/default-image.jpg', alt: 'Customer Photo' }]
                    ]}
                    templateLock="all"
                />
            </div>
        );
    },
    save: () => {
        return <InnerBlocks.Content />;
    },
});

Explanation:

• templateLock="all": This setting locks the block template, preventing users from modifying the block structure. They can only edit the content within the existing blocks.

Step 4: Testing the Block Template

After defining your block template, follow these steps to test it:

1. Rebuild Your Block: Make sure your development environment is set up, and rebuild the block by running the following command in your terminal:

npm run build

2. Test in the Editor: Go to the WordPress Block Editor, add the Testimonial Block, and see how the predefined layout automatically appears. You can modify the content (heading, paragraph, image) but maintain the layout.
3. Check the Front End: Publish the post and view it on the front end to ensure the block is rendered as expected, with the default layout intact.

Best Practices for Dynamic Block Templates

1. Use Templates for Repetitive Content: If users frequently create similar layouts (e.g., testimonials, feature lists), use block templates to streamline the process.
2. Provide Placeholder Text: Use placeholder text to guide users on what type of content should be added to each block, improving the overall editing experience.
3. Consider Locking Templates: For complex layouts where consistency is important, consider locking the template to prevent users from making structural changes.
4. Flexibility vs. Structure: Balance flexibility and structure by using templateLock='false' for blocks that should be more customizable and templateLock='all' for those requiring strict consistency.

Conclusion: Enhancing User Experience with Block Templates

Dynamic block templates are a great way to enhance the user experience by offering pre-configured layouts that guide content creation. Whether it’s for testimonials, product features, or call-to-action sections, block templates save time and ensure consistent design across posts and pages.

In this article, you’ve learned how to:

• Define a basic block template using InnerBlocks.
• Customize block templates with placeholder text and default content.
• Lock templates for maintaining structure and consistency.

In Day 15, we’ll explore conditional block rendering, which allows blocks to display content dynamically based on conditions like user roles, post metadata, or custom fields.