Ankit Panchal

Category: Block Editor

  • Day 11: Creating Block Variations in Gutenberg

    Introduction

    Welcome to Day 11 of the Gutenberg development series! In today’s article, we’ll explore block variations, a feature that allows you to create multiple versions or styles of a single block. By offering different variations, you can simplify the editor experience and give users more flexibility in choosing the right layout or style for their content.

    For example, you can create a single Button block and offer variations like Primary Button, Secondary Button, or Outline Button.

    In this guide, we’ll walk through how to define block variations, add custom styles, and manage the variations effectively.

    What are Block Variations in Gutenberg?

    A block variation is essentially a different version of a block with pre-defined attributes. This enables users to select from multiple styles or settings without having to modify the block manually every time they add it. Variations can have:

    • Different styles or colors.
    • Custom settings (like size, layout).
    • Unique default content.

    Step 1: Creating Basic Block Variations

    Let’s start by creating block variations for the core/button block. We’ll define three variations: Primary Button, Secondary Button, and Outline Button.

    1. Create a JavaScript File for Variations

    Create a JavaScript file in your theme or plugin folder to define the block variations. For example, you can name it button-variations.js.

    // blocks/button-variations.js
import { registerBlockVariation } from '@wordpress/blocks';

// Define variations for the core/button block
const buttonVariations = [
    {
        name: 'primary-button',
        title: 'Primary Button',
        description: 'A bold, standout button.',
        isDefault: true,
        attributes: { backgroundColor: 'blue', textColor: 'white' },
        innerBlocks: [['core/paragraph', { placeholder: 'Click me!' }]],
        icon: 'button',
    },
    {
        name: 'secondary-button',
        title: 'Secondary Button',
        description: 'A subtle button for secondary actions.',
        attributes: { backgroundColor: 'gray', textColor: 'white' },
        icon: 'button',
    },
    {
        name: 'outline-button',
        title: 'Outline Button',
        description: 'A button with an outline style.',
        attributes: { backgroundColor: 'transparent', textColor: 'blue', className: 'outline-button' },
        icon: 'button',
    }
];

// Register the variations with the core/button block
buttonVariations.forEach((variation) => {
    registerBlockVariation('core/button', variation);
});

    Explanation:

    • registerBlockVariation: This function registers a new variation for an existing block. Here, we add variations for the core/button block.
    • name: A unique identifier for the variation.
    • title: Display name shown to users in the block inserter.
    • attributes: Sets the default attributes for each variation, such as background color, text color, or custom classes.
    • innerBlocks: Optional. If needed, you can define nested blocks for the variation (e.g., pre-filled text inside a button).
    • icon: Icon for the variation, making it visually identifiable in the block inserter.

    Step 2: Enqueuing the Script

    To make the block variations available in the Gutenberg editor, enqueue the script in your theme’s functions.php file.

    function my_theme_enqueue_variation_script() {
    wp_enqueue_script(
        'my-theme-button-variations',
        get_template_directory_uri() . '/blocks/button-variations.js',
        array( 'wp-blocks', 'wp-editor' ),
        filemtime( get_template_directory() . '/blocks/button-variations.js' ),
        true
    );
}
add_action( 'enqueue_block_editor_assets', 'my_theme_enqueue_variation_script' );

    This code ensures that the variations are loaded in the block editor.

    Step 3: Styling Block Variations

    You might want to apply custom styles for each variation. To do this, add some CSS to your theme’s stylesheet (e.g., style.css).

    /* Primary Button */
.wp-block-button.is-style-primary-button .wp-block-button__link {
    background-color: blue;
    color: white;
}

/* Secondary Button */
.wp-block-button.is-style-secondary-button .wp-block-button__link {
    background-color: gray;
    color: white;
}

/* Outline Button */
.wp-block-button.is-style-outline-button .wp-block-button__link {
    background-color: transparent;
    color: blue;
    border: 2px solid blue;
}

    Explanation:

    • .wp-block-button.is-style-{variation-name}: This targets the button variations and applies custom styles to each.
    • You can adjust properties like background-color, color, border, etc., based on your design needs.

    Step 4: Using Block Variations in the Editor

    With your block variations registered and styled, it’s time to use them in the Gutenberg editor.

    1. Open the Block Editor:
      • Go to any post or page in WordPress and open the Block Editor.
    2. Add a Button Block:
      • Click the “+” button to insert a block.
      • Search for Button. You’ll notice the different variations (Primary, Secondary, Outline) are now available.
    3. Choose a Variation:
      • Select the desired button variation, and it will be added to your content with the default style and settings applied.
    4. Customize as Needed:
      • You can further customize the button text, URL, and additional attributes as you would with a regular button block.

    Step 5: Managing and Updating Variations

    Block variations are designed to enhance user flexibility. If you need to update or change a variation:

    1. Modify the JavaScript: Update the attributes, settings, or description in button-variations.js.
    2. Rebuild and Test: Make sure to rebuild your development environment (if necessary) and test the variations in the editor.

    Best Practices for Creating Block Variations

    1. Keep it Simple: Provide variations for the most commonly used styles or settings, but avoid creating too many variations that may confuse users.
    2. Use Meaningful Names: Use descriptive titles and names so users can easily understand the purpose of each variation.
    3. Leverage Default Attributes: Set sensible defaults for each variation so that users can quickly add the block without making further adjustments.

    Conclusion: Enhancing Flexibility with Block Variations

    Block variations are a powerful way to add customization options for your users while keeping the block development process simple and efficient. By creating multiple styles and settings for a single block, you can offer diverse options for content creation without overwhelming the editor.

    In this article, you’ve learned how to:

    • Register and define block variations for an existing block.
    • Enqueue scripts to make the variations available in the editor.
    • Style variations using CSS for custom appearance.
    • Manage and update variations as needed.

    In Day 12, we’ll explore how to build custom block categories and collections to organize your custom blocks more effectively in the WordPress editor.

  • Day 10: Creating and Using Reusable Blocks in Gutenberg

    Introduction

    Welcome to Day 10 of the Gutenberg series! In today’s article, we will explore reusable blocks, which allow you to save specific blocks (or combinations of blocks) and reuse them throughout your WordPress site. This is an extremely powerful feature that makes content creation more efficient by letting you create consistent content without having to rebuild sections every time.

    In this guide, you will learn how to:

    • Create reusable blocks in the Gutenberg editor.
    • Save and manage block collections.
    • Use reusable blocks for more efficient content creation.

    What Are Reusable Blocks in Gutenberg?

    A reusable block is a block (or a group of blocks) that can be saved and then reused in any post or page on your WordPress site. These blocks maintain the same content and settings wherever they are used, so any updates made to a reusable block will automatically be reflected across all instances of that block throughout the site.

    Common use cases for reusable blocks include:

    • Call-to-action (CTA) sections like sign-up forms or “Buy Now” buttons.
    • Testimonial sections for customer quotes or feedback.
    • Promotional banners that you want to appear on multiple posts or pages.
    • Contact information that may be reused in multiple areas of your site.

    Step 1: Creating a Reusable Block

    Creating a reusable block is easy and can be done directly within the Gutenberg editor. Follow these steps:

    1. Open the Gutenberg Editor:
      • Go to the WordPress dashboard, and create a new post or page.
    2. Add a Block to the Editor:
      • Add any type of block you’d like (e.g., Paragraph, Heading, Image, Button, etc.).
    3. Customize the Block:
      • Customize the content and appearance of the block as desired. For example, you can add text to a paragraph block, change colors, or adjust alignments.
    4. Save the Block as Reusable:
      • Click on the block you want to save.
      • Click on the three-dot menu in the block toolbar (the “More options” icon).
      • Select “Add to Reusable blocks”.
      • Give your reusable block a name (e.g., “CTA Button”, “Testimonial Section”).
      • Click “Save” to store the block.

    Your reusable block is now saved and can be used across any post or page on your site.

    Step 2: Using a Reusable Block in the Editor

    Once you’ve saved a reusable block, it’s time to use it in your content. Here’s how:

    1. Open a Post or Page:
      • Go to the WordPress dashboard and open any post or page where you want to insert the reusable block.
    2. Insert the Reusable Block:
      • Click on the “+” button to add a new block.
      • Search for the name of your reusable block, or click the “Reusable” tab in the block inserter.
      • Select the block, and it will be added to your content.
    3. Preview and Publish:
      • You can preview the content to see how it looks with the reusable block.
      • Once satisfied, publish or update the post or page.

    The reusable block will display the content exactly as you saved it. If you need to make changes, you can easily do so.

    Step 3: Editing and Updating a Reusable Block

    One of the key benefits of reusable blocks is that any change made to a reusable block is automatically reflected everywhere it’s used on the site.

    1. Select the Reusable Block:
      • Open any post or page that uses the reusable block you want to edit.
      • Click on the reusable block to select it.
    2. Edit the Block:
      • Click on the “Edit” button that appears on the reusable block.
      • Make any changes to the block’s content, design, or settings as needed.
    3. Save Changes:
      • Once you have finished editing, click “Save” to update the block.
      • The updated content will automatically appear in all posts or pages where the reusable block is used.

    Step 4: Managing Reusable Blocks

    To manage all reusable blocks on your WordPress site, you can access the Reusable Blocks Manager.

    1. Open the Reusable Blocks Manager:
      • Go to the WordPress dashboard.
      • Navigate to “Posts” > “Reusable blocks” or open the block inserter while editing a post and click “Manage Reusable Blocks”.
    2. View, Edit, or Delete Blocks:
      • From the Reusable Blocks Manager, you can see all the reusable blocks on your site.
      • You can edit any block by clicking its title, delete blocks you no longer need, or export blocks to reuse them on another WordPress site.
    3. Export and Import Blocks:
      • To export a block, click on the block’s name, then click “Export as JSON”. This will download the block as a JSON file.
      • To import a block, go to “Manage Reusable Blocks”, click “Import from JSON”, and upload the file.

    Step 5: Converting Reusable Blocks into Regular Blocks

    In some situations, you may want to break the link between a reusable block and its instances, allowing you to customize individual instances without affecting others.

    1. Convert to Regular Block:
      • Select the reusable block in the editor.
      • Click on the three-dot menu in the block toolbar (the “More options” icon).
      • Select “Convert to Regular Block”.

    The block will be converted to a normal block, and you can make changes to it without affecting other instances.

    Best Practices for Using Reusable Blocks

    1. Use Consistent Naming: Always name your reusable blocks clearly so that you can easily identify and reuse them across different posts and pages.
    2. Keep Blocks Simple: Make reusable blocks for simple, repeatable sections rather than complex page layouts to keep them easy to manage.
    3. Use for Frequently Updated Content: Reusable blocks work best for content that is updated frequently, as changes will be reflected site-wide automatically.

    Conclusion: Boost Efficiency with Reusable Blocks

    Reusable blocks are a powerful feature that can significantly streamline your content creation workflow. They allow you to quickly add frequently used sections to your posts and pages, maintain design consistency, and easily make updates across your site.

    In this article, you’ve learned how to:

    • Create and save reusable blocks in the Gutenberg editor.
    • Insert and use reusable blocks across your WordPress site.
    • Edit, update, and manage reusable blocks effectively.

    In Day 11, we’ll explore block variations, which will allow you to create multiple styles or versions of a single block to enhance customization even further.

  • Day 9: Extending Core Blocks in Gutenberg

    Introduction

    Welcome to Day 9 of the Gutenberg development series! So far, you’ve learned how to create custom blocks and work with dynamic content. Today, we’re going to explore how to extend core blocks in Gutenberg. By extending an existing block, you can add new features or modify its functionality without building an entirely new block.

    This is especially useful if you want to enhance a common block (like the Paragraph or Image block) by adding custom settings or controls.

    In this guide, we’ll walk through extending the core/paragraph block by adding a new control for custom background colors. You’ll also learn how to extend other core blocks with similar techniques.

    Step 1: Understanding the Gutenberg Block Filters

    To extend core blocks in Gutenberg, we use block filters. These filters allow us to modify the block’s settings, attributes, or even how it is rendered.

    The key filters used to extend blocks include:

    • blocks.registerBlockType: Modifies the block’s settings.
    • editor.BlockEdit: Modifies the block’s editor interface (the “edit” function).
    • blocks.getSaveElement: Modifies the block’s save function.

    We’ll use these filters to extend the Paragraph block and add a custom background color control.

    Step 2: Adding a Custom Attribute

    To extend a core block, we first need to add a new attribute to store the custom data. In this example, we’ll add a backgroundColor attribute to the Paragraph block.

    Create a new JavaScript file for extending the block. You can place this file in your theme or plugin folder.

    // blocks/extend-paragraph.js
import { addFilter } from '@wordpress/hooks';
import { assign } from 'lodash';
import { __ } from '@wordpress/i18n';

// Add new attributes to the core/paragraph block
function addParagraphAttributes(settings) {
    if (settings.name !== 'core/paragraph') {
        return settings;
    }

    // Add the backgroundColor attribute
    settings.attributes = assign(settings.attributes, {
        backgroundColor: {
            type: 'string',
            default: '#ffffff',
        },
    });

    return settings;
}

addFilter(
    'blocks.registerBlockType',
    'my-theme/extend-paragraph-attributes',
    addParagraphAttributes
);

    Explanation:

    • addFilter: This is a WordPress hook that allows us to modify the block’s behavior. In this case, we’re using the blocks.registerBlockType filter to extend the core Paragraph block.
    • backgroundColor: We add a new attribute backgroundColor with a default value of white (#ffffff).

    Step 3: Extending the Block’s Edit Function

    Next, we need to modify the block’s editor interface to allow users to set the background color for their paragraph blocks. We’ll add a color picker to the InspectorControls.

    import { InspectorControls, PanelColorSettings } from '@wordpress/block-editor';
import { addFilter } from '@wordpress/hooks';
import { Fragment } from '@wordpress/element';

// Extend the edit function to add the background color control
function withInspectorControls(BlockEdit) {
    return (props) => {
        const { attributes, setAttributes, name } = props;

        if (name !== 'core/paragraph') {
            return <BlockEdit {...props} />;
        }

        const { backgroundColor } = attributes;

        return (
            <Fragment>
                <BlockEdit {...props} />
                <InspectorControls>
                    <PanelColorSettings
                        title={__('Background Color', 'my-theme')}
                        initialOpen={true}
                        colorSettings={[
                            {
                                value: backgroundColor,
                                onChange: (newColor) => setAttributes({ backgroundColor: newColor }),
                                label: __('Background Color', 'my-theme'),
                            },
                        ]}
                    />
                </InspectorControls>
            </Fragment>
        );
    };
}

addFilter(
    'editor.BlockEdit',
    'my-theme/extend-paragraph-inspector-controls',
    withInspectorControls
);

    Explanation:

    • PanelColorSettings: We use this component to add a color picker for the background color in the block editor’s sidebar.
    • withInspectorControls: This function modifies the block’s edit function to include the new background color control in the InspectorControls.

    Step 4: Modifying the Block’s Save Function

    Now, we need to modify the block’s save function to ensure that the custom background color is applied when the block is rendered on the front end.

    import { addFilter } from '@wordpress/hooks';
import { createElement } from '@wordpress/element';

// Modify the block’s save function to include the background color
function applyExtraProps(extraProps, blockType, attributes) {
    if (blockType.name !== 'core/paragraph') {
        return extraProps;
    }

    const { backgroundColor } = attributes;

    if (backgroundColor) {
        extraProps.style = {
            ...extraProps.style,
            backgroundColor,
        };
    }

    return extraProps;
}

addFilter(
    'blocks.getSaveContent.extraProps',
    'my-theme/extend-paragraph-save',
    applyExtraProps
);

    Explanation:

    • applyExtraProps: This function modifies the block’s save function to include the backgroundColor attribute in the block’s inline styles when rendering it on the front end.

    Step 5: Enqueuing the Script

    Finally, you need to enqueue the JavaScript file so that WordPress loads it in the block editor. Add the following code to your theme’s functions.php file:

    function my_theme_enqueue_block_extension() {
    wp_enqueue_script(
        'my-theme-extend-paragraph-block',
        get_template_directory_uri() . '/blocks/extend-paragraph.js',
        array( 'wp-blocks', 'wp-element', 'wp-edit-post' ),
        filemtime( get_template_directory() . '/blocks/extend-paragraph.js' )
    );
}
add_action( 'enqueue_block_editor_assets', 'my_theme_enqueue_block_extension' );

    This ensures that the script is available in the block editor, and the Paragraph block will be extended with the new background color control.

    Step 6: Testing the Extended Block

    1. Rebuild Your Block: If you’re using a development environment, make sure to rebuild the block by running the appropriate command (like npm run start).
    2. Test in the Editor: Go to the WordPress Block Editor, add a Paragraph block, and check the InspectorControls in the sidebar. You should now see the new Background Color option.
    3. Test on the Front End: Publish the post and view it on the front end to ensure that the background color is applied as expected.

    Best Practices for Extending Core Blocks

    When extending core blocks, keep the following best practices in mind:

    1. Avoid Overloading Blocks: Only add the necessary controls to avoid overwhelming users with too many options.
    2. Use Consistent UI: Follow the WordPress UI patterns and use built-in components like PanelColorSettings, ToggleControl, etc., for consistency.
    3. Handle Backward Compatibility: Ensure that the block works even if older attributes are missing or not defined.

    Conclusion: Enhancing Existing Blocks

    By extending core blocks, you can enhance their functionality without starting from scratch. This allows for greater flexibility and customization, all while maintaining the simplicity and familiarity of the existing block interface. In this article, we extended the Paragraph block with a new background color control, but you can apply the same principles to any core block to meet your needs.

    In Day 10, we’ll explore reusable blocks and how to create custom block collections for even more content creation flexibility.

  • Day 8: Creating Dynamic Gutenberg Blocks

    Introduction

    Welcome to Week 2 of the 30-day Gutenberg development series! In this week, we’ll focus on more advanced block development topics, starting with dynamic blocks.

    Dynamic Gutenberg blocks allow you to fetch and display content that changes depending on the data available. This could be data from WordPress (like recent posts, categories, or users) or external sources using APIs.

    In this article, we’ll walk through the process of creating a simple dynamic block that displays the latest blog posts from WordPress. By the end of this tutorial, you’ll have the foundational knowledge to build more complex blocks that fetch and display dynamic content.

    What Are Dynamic Blocks?

    Dynamic blocks render their content dynamically based on the data that is available when the page is viewed. Unlike static blocks, which store their content directly in the post or page’s HTML, dynamic blocks pull data when the block is rendered, either from WordPress itself or from external sources.

    Some common use cases for dynamic blocks include:

    • Displaying recent posts, categories, or comments.
    • Showing user-specific data, like the current user’s name or profile info.
    • Fetching external data from APIs (e.g., displaying weather data, stock prices, etc.).

    Step 1: Creating a Dynamic Block

    Let’s create a dynamic Gutenberg block that displays the latest blog posts from your WordPress site.

    Step 1.1: Setting Up the Block Files

    Create a new folder for your block, for example:
    wp-content/themes/your-theme/blocks/latest-posts/

    Inside this folder, create the following files:

    • block.json (metadata for your block)
    • index.js (JavaScript to define the block’s behavior)
    • latest-posts.php (PHP file to render dynamic content)

    Step 1.2: Defining Block Metadata in block.json

    In your block.json, add the following metadata:

    {
    "apiVersion": 2,
    "name": "your-theme/latest-posts",
    "title": "Latest Posts",
    "category": "widgets",
    "icon": "admin-post",
    "description": "A block that displays the latest blog posts.",
    "supports": {
        "html": false
    },
    "editorScript": "file:./index.js",
    "render": "file:./latest-posts.php"
}

    Explanation:

    • apiVersion: 2: This specifies that we’re using the latest version of the Block API.
    • render: This points to the PHP file (latest-posts.php) that will dynamically generate the content for this block.

    Step 2: Fetching Latest Posts Using PHP

    Now, we’ll create the latest-posts.php file to dynamically fetch the latest blog posts using WordPress functions.

    Here’s how to fetch and display the latest 5 posts:

    <?php

function render_latest_posts_block($attributes, $content) {
    // Query for the latest posts
    $recent_posts = wp_get_recent_posts(array(
        'numberposts' => 5, // Number of posts to display
        'post_status' => 'publish',
    ));

    // Start the output
    $output = '<div class="latest-posts-block">';

    if (!empty($recent_posts)) {
        foreach ($recent_posts as $post) {
            $output .= '<h3><a href="' . get_permalink($post["ID"]) . '">' . esc_html($post["post_title"]) . '</a></h3>';
            $output .= '<p>' . get_the_excerpt($post["ID"]) . '</p>';
        }
    } else {
        $output .= '<p>No recent posts found.</p>';
    }

    $output .= '</div>';

    return $output;
}

// Register the dynamic block with the render callback
register_block_type('your-theme/latest-posts', array(
    'render_callback' => 'render_latest_posts_block',
));

    Explanation:

    • wp_get_recent_posts(): This WordPress function retrieves the latest posts. We’re fetching 5 published posts here.
    • get_permalink() and get_the_excerpt(): These functions retrieve the post’s URL and excerpt, respectively, to display them in the block.
    • register_block_type(): This registers the block and uses the render_callback function to dynamically generate the block’s content.

    Step 3: Defining the Block in JavaScript (index.js)

    In your index.js file, you’ll define how the block appears in the editor.

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

registerBlockType('your-theme/latest-posts', {
    title: __('Latest Posts', 'your-theme'),
    description: __('Displays the latest blog posts.', 'your-theme'),
    icon: 'admin-post',
    category: 'widgets',
    edit: () => {
        return <p>{__('This block displays the latest posts on the front end.', 'your-theme')}</p>;
    },
});

    Explanation:

    • edit: Since the block is dynamic and the content is generated on the server (PHP), we’re only displaying a placeholder message in the editor that informs users what the block will do on the front end.

    Step 4: Testing the Dynamic Block

    To test your dynamic block:

    1. Rebuild the Block: Run the following command to build the block if you’re using a bundler like @wordpress/scripts:
    npm run start
    1. Add the Block to a Post:
      • Go to the WordPress dashboard and create a new post or page.
      • Insert the “Latest Posts” block.
      • The block will display a placeholder in the editor but will show the latest posts on the front end.
    2. Publish and View the Front End: Once published, view the front end of your post/page to see the block dynamically display the latest blog posts.

    Step 5: Enhancing the Dynamic Block

    You can enhance the dynamic block further by:

    • Adding Settings: Use InspectorControls to allow users to configure the number of posts to display or select a category to filter the posts.
    • Styling: Add custom CSS or inline styles to the block’s PHP output to ensure it looks great on the front end.
    • Fetching External Data: You can fetch data from external APIs (e.g., displaying weather data, social media feeds) using PHP’s wp_remote_get() function.

    Here’s a quick example of allowing users to select how many posts to display:

    // Update the PHP code to handle a custom number of posts
function render_latest_posts_block($attributes, $content) {
    $numberposts = isset($attributes['numberposts']) ? $attributes['numberposts'] : 5;

    $recent_posts = wp_get_recent_posts(array(
        'numberposts' => $numberposts,
        'post_status' => 'publish',
    ));

    // The rest of the code remains the same
}

    Conclusion: The Power of Dynamic Blocks

    Dynamic Gutenberg blocks offer immense flexibility, allowing you to pull in content and data dynamically, either from your WordPress site or external sources. By using dynamic blocks, you can build features like recent posts, testimonials, or real-time content updates, making your WordPress site more interactive and engaging.

    In Day 9, we’ll take a closer look at custom block attributes and how they interact with dynamic content, giving you even more control over block behavior.

    External Links:

    Provide a link to the WordPress Block API documentation for additional reference on dynamic blocks.

  • Day 7: Creating Block Templates and Patterns in Gutenberg

    Introduction

    Welcome to Day 7 of the Gutenberg development series! So far, we’ve covered creating custom blocks and adding custom settings through Inspector Controls. Today, we’re going to take that one step further by exploring block templates and block patterns.

    These features allow you to provide predefined layouts that users can insert into their posts or pages with a single click. Whether you’re building complex page layouts or reusable sections like testimonials, block templates and patterns help streamline the content creation process for your users.

    What Are Block Templates and Block Patterns?

    Before we dive into the implementation, let’s clarify the difference between block templates and block patterns.

    • Block Templates: These are predefined sets of blocks that can be assigned to specific post types or page templates. When a user creates a new post or page, the template provides a structure for content creation, guiding them on how to organize the blocks.
    • Block Patterns: Patterns are reusable layouts or combinations of blocks that users can insert anywhere within the Block Editor. Unlike templates, they are not tied to a specific post type or page and are meant to be used as flexible content-building blocks.

    Step 1: Creating Block Templates for Custom Post Types

    Let’s start by creating a block template for a custom post type (CPT). Block templates are especially useful when you want to ensure that users follow a specific structure when creating content for a particular post type.

    Creating a Custom Post Type with a Block Template

    1. Register a Custom Post Type: First, let’s create a new custom post type in your theme’s functions.php file.
    function my_theme_custom_post_type() {
    $labels = array(
        'name' => __('Portfolio', 'your-theme'),
        'singular_name' => __('Portfolio Item', 'your-theme'),
    );

    $args = array(
        'labels' => $labels,
        'public' => true,
        'show_in_rest' => true,
        'supports' => array('title', 'editor', 'thumbnail'),
        'template' => array(
            array('core/image', array(
                'align' => 'center',
            )),
            array('core/heading', array(
                'level' => 2,
                'placeholder' => 'Enter the project title...',
            )),
            array('core/paragraph', array(
                'placeholder' => 'Describe the project...',
            )),
        ),
    );

    register_post_type('portfolio', $args);
}
add_action('init', 'my_theme_custom_post_type');

    Explanation:

    • template: In the args array, we define the block template for the post type. Here, the template includes an image block, a heading block, and a paragraph block. Each block has specific attributes, such as alignment and placeholder text.
    • supports: The supports option enables the use of the block editor for the custom post type.

    Now, when users create a new Portfolio item, they will be greeted with a predefined layout that includes an image, a heading, and a paragraph.

    Step 2: Customizing Block Templates

    Block templates are highly customizable. You can define any blocks you want in the template and adjust the attributes as needed.

    Example: Adding More Complex Layouts

    You can expand your block template to include more complex layouts. For example, you could add columns, buttons, or testimonials.

    'template' => array(
    array('core/columns', array(), array(
        array('core/column', array(), array(
            array('core/image', array(
                'align' => 'center',
            )),
        )),
        array('core/column', array(), array(
            array('core/paragraph', array(
                'placeholder' => 'Add a project description...',
            )),
        )),
    )),
    array('core/button', array(
        'text' => 'View Project',
        'url' => '#',
    )),
),

    In this template, we’ve added a columns block with an image in the left column and a paragraph in the right column, followed by a button block.

    Step 3: Creating Block Patterns

    Block patterns allow users to insert reusable block layouts anywhere in their posts or pages. Patterns are ideal for predefined sections such as testimonials, pricing tables, or call-to-action sections.

    Registering a Block Pattern

    To register a block pattern, add the following code to your theme’s functions.php file:

    function my_theme_register_block_patterns() {
    register_block_pattern(
        'my-theme/testimonial-pattern',
        array(
            'title'       => __('Testimonial Pattern', 'your-theme'),
            'description' => __('A simple testimonial section with an image, heading, and paragraph.', 'your-theme'),
            'content'     => '<!-- wp:image {"align":"left"} -->
                <figure class="wp-block-image alignleft">
                    <img src="https://example.com/testimonial.jpg" alt="Testimonial image"/>
                </figure>
                <!-- /wp:image -->
                <!-- wp:heading -->
                <h2>Customer Testimonial</h2>
                <!-- /wp:heading -->
                <!-- wp:paragraph -->
                <p>Here’s what our customers are saying about our product...</p>
                <!-- /wp:paragraph -->',
        )
    );
}
add_action('init', 'my_theme_register_block_patterns');

    Explanation:

    • register_block_pattern: This function registers a new block pattern. In this example, the pattern contains an image, a heading, and a paragraph.
    • content: The pattern’s content is defined using the block’s markup. This is the structure that will be inserted into the post when the pattern is selected.

    Using the Block Pattern in the Editor

    Once registered, users can access this pattern in the Block Editor by clicking the “Patterns” tab in the block inserter and selecting the Testimonial Pattern.

    Step 4: Adding Block Patterns to the Pattern Library

    You can also add your custom block patterns to the WordPress Block Pattern Directory to make them available for other users. Follow the official guidelines on how to submit your patterns to the directory.

    Best Practices for Creating Block Templates and Patterns

    1. Design for Reusability: Block patterns should be flexible enough to be reused across different sections or pages.
    2. Keep it Simple: Templates should provide structure without overwhelming users with too many blocks or complex layouts.
    3. Use Descriptive Placeholders: When defining blocks like headings or paragraphs, use clear placeholder text to guide users on what to insert.
    4. Test for Theme Compatibility: Ensure that your block templates and patterns work seamlessly with the active theme’s styles and layout.

    Conclusion: Streamlining Content Creation with Templates and Patterns

    Block templates and patterns are powerful tools that can help developers streamline content creation for their users. With templates, you can guide users toward consistent, well-structured content, while patterns offer flexible, reusable layouts for common sections.

    By mastering these features, you’ll make the content creation process easier and faster for your clients and users, while ensuring design consistency across posts and pages.

    In Day 8, we’ll explore dynamic blocks, which allow blocks to fetch and display dynamic data from WordPress or external APIs.

  • Day 6: Using Inspector Controls to Add Custom Settings to Gutenberg Blocks

    Introduction

    Welcome to Day 6 of your Gutenberg development journey! So far, you’ve learned how to create custom blocks and style them using both CSS and inline styles. Now, it’s time to take your blocks to the next level by adding Inspector Controls, which allow users to modify block settings directly from the editor’s sidebar.

    In this guide, we’ll show you how to add custom controls, such as toggles, dropdowns, and color pickers, to your Gutenberg blocks using InspectorControls. By the end of this tutorial, you’ll be able to give users full control over how their blocks behave and look, all from the familiar WordPress Block Editor.

    What are Inspector Controls in Gutenberg?

    Inspector Controls in Gutenberg refer to the sidebar settings that allow users to customize a block. These settings provide a user-friendly way to modify block attributes without touching the block’s content directly. From adjusting colors and selecting fonts to toggling display options, Inspector Controls make blocks more versatile and customizable.

    Common Inspector Controls include:

    • Color Palette: For selecting background and text colors.
    • Toggle Control: For switching features on/off (boolean attributes).
    • Text Control: For entering custom values like padding or margin.
    • Select Control: For creating dropdowns with pre-defined options.

    Step 1: Adding Basic Inspector Controls

    To start, let’s add InspectorControls to a block we created earlier. This will allow us to add custom settings for background color and text formatting.

    Open the index.js file of your block (e.g., blocks/my-first-block/index.js) and modify the block’s edit function as follows:

    import { registerBlockType } from '@wordpress/blocks';
import { RichText, InspectorControls, ColorPalette } from '@wordpress/block-editor';
import { PanelBody, ToggleControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

registerBlockType('your-theme/my-first-block', {
    title: __('My First Block', 'your-theme'),
    description: __('A simple Gutenberg block for learning purposes.', 'your-theme'),
    category: 'common',
    icon: 'smiley',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
        backgroundColor: {
            type: 'string',
            default: '#f5f5f5',
        },
        isBold: {
            type: 'boolean',
            default: false,
        },
    },
    edit: (props) => {
        const { attributes: { content, backgroundColor, isBold }, setAttributes } = props;

        const onChangeContent = (newContent) => {
            setAttributes({ content: newContent });
        };

        const onChangeBackgroundColor = (newColor) => {
            setAttributes({ backgroundColor: newColor });
        };

        const onToggleBold = () => {
            setAttributes({ isBold: !isBold });
        };

        return (
            <>
                <InspectorControls>
                    <PanelBody title={__('Block Settings', 'your-theme')}>
                        <ColorPalette
                            value={backgroundColor}
                            onChange={onChangeBackgroundColor}
                            label={__('Background Color', 'your-theme')}
                        />
                        <ToggleControl
                            label={__('Bold Text', 'your-theme')}
                            checked={isBold}
                            onChange={onToggleBold}
                        />
                    </PanelBody>
                </InspectorControls>
                <RichText
                    tagName="p"
                    value={content}
                    onChange={onChangeContent}
                    placeholder={__('Enter your text here...', 'your-theme')}
                    style={{
                        backgroundColor,
                        fontWeight: isBold ? 'bold' : 'normal',
                    }}
                />
            </>
        );
    },
    save: (props) => {
        const { attributes: { content, backgroundColor, isBold } } = props;

        return (
            <RichText.Content
                tagName="p"
                value={content}
                style={{
                    backgroundColor,
                    fontWeight: isBold ? 'bold' : 'normal',
                }}
            />
        );
    },
});

    Explanation:

    • InspectorControls: The InspectorControls component adds a settings panel in the Block Editor sidebar where users can adjust block attributes.
    • PanelBody: We use this component to group related controls. Here, we’ve added a ColorPalette for changing the background color and a ToggleControl for toggling bold text.
    • ColorPalette: A color picker component that allows users to select a color for the block’s background.
    • ToggleControl: A simple toggle switch that users can use to apply or remove the bold text style.

    Step 2: Adding Advanced Controls (SelectControl and TextControl)

    Next, let’s add more advanced controls such as a dropdown to choose text alignment and a text input for setting custom padding. These controls will allow even more customization for your block.

    Add the following controls to the InspectorControls component inside your edit function:

    import { SelectControl, TextControl } from '@wordpress/components';

const onChangeAlignment = (newAlignment) => {
    setAttributes({ alignment: newAlignment });
};

const onChangePadding = (newPadding) => {
    setAttributes({ padding: newPadding });
};

return (
    <>
        <InspectorControls>
            <PanelBody title={__('Block Settings', 'your-theme')}>
                <ColorPalette
                    value={backgroundColor}
                    onChange={onChangeBackgroundColor}
                    label={__('Background Color', 'your-theme')}
                />
                <ToggleControl
                    label={__('Bold Text', 'your-theme')}
                    checked={isBold}
                    onChange={onToggleBold}
                />
                <SelectControl
                    label={__('Text Alignment', 'your-theme')}
                    value={alignment}
                    options={[
                        { label: __('Left', 'your-theme'), value: 'left' },
                        { label: __('Center', 'your-theme'), value: 'center' },
                        { label: __('Right', 'your-theme'), value: 'right' },
                    ]}
                    onChange={onChangeAlignment}
                />
                <TextControl
                    label={__('Padding (px)', 'your-theme')}
                    value={padding}
                    onChange={onChangePadding}
                    type="number"
                />
            </PanelBody>
        </InspectorControls>
        <RichText
            tagName="p"
            value={content}
            onChange={onChangeContent}
            placeholder={__('Enter your text here...', 'your-theme')}
            style={{
                backgroundColor,
                fontWeight: isBold ? 'bold' : 'normal',
                textAlign: alignment,
                padding: `${padding}px`,
            }}
        />
    </>
);

    Explanation:

    • SelectControl: A dropdown that lets users choose the text alignment (left, center, or right).
    • TextControl: A simple input field where users can enter a custom value (like padding in pixels). This allows for more precise control over block layout.

    Step 3: Saving Block Settings

    To ensure that your settings are applied on both the editor and front end, you need to modify the save function to include the new attributes (like alignment and padding).

    Update the save function in your index.js file as follows:

    save: (props) => {
    const { attributes: { content, backgroundColor, isBold, alignment, padding } } = props;

    return (
        <RichText.Content
            tagName="p"
            value={content}
            style={{
                backgroundColor,
                fontWeight: isBold ? 'bold' : 'normal',
                textAlign: alignment,
                padding: `${padding}px`,
            }}
        />
    );
},

    Now, when users save the block, the settings they applied (such as background color, text alignment, and padding) will be rendered on the front end.

    Step 4: Testing the Block

    1. Rebuild Your Block: Run the following command in your terminal to rebuild the block:
    npm run start
    1. Test the Block in the Editor: Go to the WordPress dashboard and create a new post or page. Add your custom block, adjust the settings (color, text alignment, bold text, and padding), and see how they affect the block in real-time.
    2. Check the Front End: After publishing the post, view it on the front end to make sure the block’s settings are applied correctly, including custom text alignment and padding.

    Inspector Controls: Common Use Cases

    Adding custom block settings via Inspector Controls unlocks a lot of potential for your blocks. Here are some common use cases:

    • Color Pickers: Allow users to choose custom colors for text, backgrounds, borders, or any other visual elements.
    • Toggle Switches: Enable or disable features such as bold text, display options, or toggling visibility of block content.
    • Text Inputs: Allow users to input custom values for spacing, font size, padding, or margin.
    • Select Dropdowns: Let users choose between predefined options, such as alignment, font styles, or layouts.
    • Media Uploaders: Enable users to upload images, videos, or audio files directly to the block.

    By leveraging these controls, you empower users to customize the block’s behavior and appearance without needing to write any code.

    Best Practices for Using Inspector Controls

    When adding Inspector Controls to your Gutenberg blocks, keep the following best practices in mind:

    1. Keep It Simple: Don’t overload your block with too many options. Focus on providing settings that are essential for customizing the block’s appearance or behavior.
    2. Group Related Controls: Use PanelBody to group related controls together. This keeps the sidebar organized and makes it easier for users to find what they need.
    3. Make Use of Defaults: Always provide sensible default values for attributes. This ensures that the block looks good out of the box, even if users don’t adjust the settings.
    4. Be Consistent: Follow the WordPress design guidelines when creating custom controls to ensure a consistent user experience.
    5. Use Descriptive Labels: Label your controls clearly so users can easily understand what each setting does.

    Conclusion: Enhancing Block Flexibility with Inspector Controls

    Inspector Controls are a powerful feature that adds flexibility and customization options to your Gutenberg blocks. By giving users access to the block’s settings directly from the editor sidebar, you allow them to tailor the block’s appearance and functionality to suit their needs without touching any code.

    In this guide, you’ve learned how to:

    • Add basic controls like color pickers and toggle switches.
    • Incorporate advanced controls like dropdowns and text inputs for more granular control.
    • Use and store block attributes with both the editor and front-end display.

    In Day 7, we’ll continue building on these skills by diving into block templates and patterns, which allow you to create reusable block layouts and guide users on how to structure their content efficiently.

    External Links:

    Provide a link to the WordPress Gutenberg Inspector Controls Documentation for additional resources on controls.

  • Day 5: Advanced Styling Techniques for Gutenberg Blocks

    Introduction

    Welcome to Day 5 of our 30-day Gutenberg development series! Now that you have a basic understanding of how to build custom blocks and use attributes, it’s time to take your block development to the next level by adding custom styles and enhancing the visual presentation of your blocks.

    In this article, we’ll explore advanced techniques for styling Gutenberg blocks, including how to apply CSS, use inline styles, and make your blocks responsive. By the end of this guide, you’ll be able to create beautifully designed blocks that blend seamlessly with any WordPress theme.

    Why Advanced Styling is Important

    Styling is a crucial part of block development. Well-styled blocks enhance the user experience, ensure consistency with a website’s theme, and make the blocks more engaging. By mastering advanced styling techniques, you can:

    • Create visually appealing blocks that align with the website’s design.
    • Ensure consistency across different themes and devices.
    • Enable customization options for users who want to tweak the look and feel of blocks within the editor.

    Step 1: Styling Blocks with CSS

    The simplest way to style your blocks is by using CSS. Let’s start by adding custom styles for a block.

    Using Block-Specific CSS

    In your block’s folder (blocks/my-first-block/), you should already have a style.css file that we created earlier. We’ll now add more advanced styles to this file.

    Open the style.css file and update it with the following styles:

    /* Styling the block container */
.wp-block-your-theme-my-first-block {
    padding: 20px;
    background-color: var(--wp--preset--color--white);
    border: 2px solid var(--wp--preset--color--gray);
    border-radius: 5px;
    font-family: Arial, sans-serif;
    max-width: 600px;
    margin: 0 auto;
}

/* Styling the block content */
.wp-block-your-theme-my-first-block p {
    font-size: 18px;
    line-height: 1.6;
}

/* Responsive styles for smaller screens */
@media (max-width: 768px) {
    .wp-block-your-theme-my-first-block {
        padding: 15px;
        font-size: 16px;
    }
}

    Explanation:

    • Block Container Styling: We add padding, background color, and a border to the block container. The var() function is used to pull predefined theme colors, ensuring that your block adapts to the active theme’s palette.
    • Content Styling: The paragraph inside the block is styled for better readability with adjusted font size and line height.
    • Responsive Styles: We define styles that adjust the block’s padding and font size for smaller screens (under 768px).

    Step 2: Using Inline Styles for Dynamic Styling

    In many cases, you’ll want to apply dynamic styles directly from the Block Editor, such as changing background colors or text alignment. For this, you can use inline styles within your block’s JavaScript code.

    Let’s update the index.js file to apply inline styles based on the block attributes.

    Open index.js and modify the edit and save functions to apply the inline styles dynamically:

    import { registerBlockType } from '@wordpress/blocks';
import { RichText, InspectorControls, ColorPalette } from '@wordpress/block-editor';
import { PanelBody, ToggleControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

registerBlockType('your-theme/my-first-block', {
    title: __('My First Block', 'your-theme'),
    category: 'common',
    icon: 'smiley',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
        backgroundColor: {
            type: 'string',
            default: '#f5f5f5',
        },
        isBold: {
            type: 'boolean',
            default: false,
        },
    },
    edit: (props) => {
        const { attributes: { content, backgroundColor, isBold }, setAttributes } = props;

        const onChangeContent = (newContent) => {
            setAttributes({ content: newContent });
        };

        const onChangeBackgroundColor = (newColor) => {
            setAttributes({ backgroundColor: newColor });
        };

        const onToggleBold = () => {
            setAttributes({ isBold: !isBold });
        };

        return (
            <>
                <InspectorControls>
                    <PanelBody title={__('Block Settings', 'your-theme')}>
                        <ColorPalette
                            value={backgroundColor}
                            onChange={onChangeBackgroundColor}
                        />
                        <ToggleControl
                            label={__('Bold Text', 'your-theme')}
                            checked={isBold}
                            onChange={onToggleBold}
                        />
                    </PanelBody>
                </InspectorControls>
                <RichText
                    tagName="p"
                    value={content}
                    onChange={onChangeContent}
                    placeholder={__('Enter your text here...', 'your-theme')}
                    style={{
                        backgroundColor,
                        fontWeight: isBold ? 'bold' : 'normal',
                        padding: '20px',
                        borderRadius: '5px',
                        border: '1px solid #ddd'
                    }}
                />
            </>
        );
    },
    save: (props) => {
        const { attributes: { content, backgroundColor, isBold } } = props;

        return (
            <RichText.Content
                tagName="p"
                value={content}
                style={{
                    backgroundColor,
                    fontWeight: isBold ? 'bold' : 'normal',
                    padding: '20px',
                    borderRadius: '5px',
                    border: '1px solid #ddd'
                }}
            />
        );
    },
});

    Explanation:

    • Inline Styles: We apply dynamic inline styles directly within the RichText component. These styles are based on block attributes like backgroundColor and isBold.
    • Inspector Controls: We allow users to modify the background color and text weight (bold) from the block settings in the editor sidebar. These styles are applied dynamically in both the editor (edit function) and the front end (save function).

    Step 3: Making Your Blocks Responsive

    Responsive design is key to ensuring that your blocks look great on all devices. To achieve this, we need to include media queries in the block’s CSS or handle responsiveness directly with JavaScript if attributes impact styling dynamically.

    Here’s an example of how you can add responsive styles to your style.css:

    @media (max-width: 768px) {
    .wp-block-your-theme-my-first-block {
        padding: 15px;
        font-size: 16px;
        border-radius: 3px;
    }

    .wp-block-your-theme-my-first-block p {
        font-size: 14px;
    }
}

    By using media queries, you ensure that the block adapts to different screen sizes, providing a better user experience on mobile devices.

    Step 4: Integrating Block Styles with WordPress Themes

    One of the key benefits of Gutenberg is that blocks can seamlessly integrate with a WordPress theme’s styles. To make sure your blocks inherit theme styles properly, use CSS variables and WordPress’s built-in theme support functions.

    For example, in your style.css, you can use the following CSS variables to match the active theme’s colors:

    .wp-block-your-theme-my-first-block {
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--black);
    border-color: var(--wp--preset--color--gray);
}

    These CSS variables are automatically populated by the active theme’s color palette, making your block style consistent across different themes.

    Step 5: Enqueueing Block Styles for Both Front-End and Editor

    To ensure your styles are applied both in the editor and on the front end, you’ll need to enqueue the styles properly in WordPress. This can be done in your theme’s functions.php file.

    function my_theme_enqueue_block_assets() {
    wp_enqueue_style(
        'my-first-block-editor',
        get_template_directory_uri() . '/blocks/my-first-block/style.css',
        array(),
        filemtime(get_template_directory() . '/blocks/my-first-block/style.css')
    );
}
add_action('enqueue_block_assets', 'my_theme_enqueue_block_assets');

    This ensures that the style.css file is loaded both in the WordPress editor and on the front end, providing a consistent appearance for your blocks.

    Conclusion: Taking Block Styling to the Next Level

    With these advanced styling techniques, your custom Gutenberg blocks can now be visually dynamic, responsive, and seamlessly integrated with any WordPress theme. By combining CSS styles, inline styles, and theme compatibility, you can ensure that your blocks not only function well but also look great across devices and themes.

    Key Takeaways:

    1. Use block-specific CSS to style the layout and content of your blocks.
    2. Leverage inline styles to dynamically update block styling based on user input in the editor.
    3. Ensure your blocks are responsive by adding media queries and handling different screen sizes.
    4. Integrate your block styles with the WordPress theme’s color palette to maintain consistency across different themes.
    5. Properly enqueue block styles for both the editor and front-end to ensure your block appears as expected in all contexts.

    In Day 6, we’ll explore how to use Inspector Controls and custom settings in greater detail to give users even more control over the appearance and behavior of their blocks. Stay tuned for more advanced Gutenberg techniques!

  • Day 4: Understanding Gutenberg Block Attributes

    Introduction

    In the previous article, we created our first custom Gutenberg block. Today, we’re going to dive deeper into one of the most powerful aspects of Gutenberg block development: block attributes.

    Block attributes allow you to store, manipulate, and display dynamic data in your blocks. Whether it’s simple text, media files, colors, or more complex settings, attributes make blocks flexible and customizable for users. In this guide, we’ll explore how attributes work, the different types of attributes you can use, and how to implement them in your custom blocks.

    What Are Gutenberg Block Attributes?

    Attributes in Gutenberg blocks are data containers that store the state of your block. For example, if your block allows users to enter a title, change a color, or upload an image, attributes store these values.

    When a block is inserted into the Block Editor, users can modify the block’s content and settings via the attributes. These attributes are then saved in the block’s markup or as block metadata, ensuring that the settings persist even after the post is saved.

    Common Use Cases for Block Attributes

    • Text input (e.g., headlines, paragraphs, button labels)
    • Media selection (e.g., images, videos, audio files)
    • Color settings (e.g., background color, text color)
    • Boolean values (e.g., toggling features on/off)
    • URL links (e.g., hyperlinks in buttons or images)

    Step 1: Defining Block Attributes in block.json

    The easiest way to define block attributes is in the block.json file. Let’s modify the block we created in Day 3 by adding more attributes.

    Open the block.json file in your block folder (blocks/my-first-block/block.json), and update the attributes section to include a few more attributes:

    {
    "apiVersion": 2,
    "name": "your-theme/my-first-block",
    "title": "My First Block",
    "category": "common",
    "icon": "smiley",
    "description": "A custom Gutenberg block created for learning purposes.",
    "supports": {
        "html": false
    },
    "attributes": {
        "content": {
            "type": "string",
            "source": "html",
            "selector": "p"
        },
        "backgroundColor": {
            "type": "string",
            "default": "#f5f5f5"
        },
        "isBold": {
            "type": "boolean",
            "default": false
        }
    },
    "textdomain": "your-theme",
    "editorScript": "file:./index.js",
    "style": "file:./style.css"
}

    Explanation:

    • content: A simple text attribute that stores the block’s text.
    • backgroundColor: This stores the background color for the block, with a default value of #f5f5f5.
    • isBold: A boolean attribute that will toggle bold styling for the block’s content. By default, it’s set to false.

    Step 2: Using Attributes in the Block’s Edit Function

    Now that we’ve defined the attributes, let’s modify the block’s edit function to allow users to interact with these attributes in the Block Editor.

    Open index.js and update the code to handle the new attributes:

    import { registerBlockType } from '@wordpress/blocks';
import { RichText, InspectorControls, ColorPalette } from '@wordpress/block-editor';
import { PanelBody, ToggleControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

registerBlockType('your-theme/my-first-block', {
    title: __('My First Block', 'your-theme'),
    description: __('A simple Gutenberg block for learning purposes.', 'your-theme'),
    category: 'common',
    icon: 'smiley',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
        backgroundColor: {
            type: 'string',
            default: '#f5f5f5',
        },
        isBold: {
            type: 'boolean',
            default: false,
        },
    },
    edit: (props) => {
        const {
            attributes: { content, backgroundColor, isBold },
            setAttributes,
        } = props;

        const onChangeContent = (newContent) => {
            setAttributes({ content: newContent });
        };

        const onChangeBackgroundColor = (newColor) => {
            setAttributes({ backgroundColor: newColor });
        };

        const onToggleBold = () => {
            setAttributes({ isBold: !isBold });
        };

        return (
            <>
                <InspectorControls>
                    <PanelBody title={__('Block Settings', 'your-theme')}>
                        <ColorPalette
                            value={backgroundColor}
                            onChange={onChangeBackgroundColor}
                        />
                        <ToggleControl
                            label={__('Bold Text', 'your-theme')}
                            checked={isBold}
                            onChange={onToggleBold}
                        />
                    </PanelBody>
                </InspectorControls>
                <RichText
                    tagName="p"
                    value={content}
                    onChange={onChangeContent}
                    placeholder={__('Enter your text here...', 'your-theme')}
                    style={{ backgroundColor, fontWeight: isBold ? 'bold' : 'normal' }}
                />
            </>
        );
    },
    save: (props) => {
        const {
            attributes: { content, backgroundColor, isBold },
        } = props;

        return (
            <RichText.Content
                tagName="p"
                value={content}
                style={{ backgroundColor, fontWeight: isBold ? 'bold' : 'normal' }}
            />
        );
    },
});

    Explanation:

    • InspectorControls: Adds a settings panel to the Block Editor sidebar where users can modify block settings.
    • ColorPalette: Provides a color picker to change the block’s background color.
    • ToggleControl: Allows the user to toggle whether the text should be bold or not.
    • Attributes in save: The block’s save function uses the attribute values (e.g., backgroundColor and isBold) to apply styles when the block is rendered.

    Step 3: Save and Test Your Block

    With the new attributes in place, follow these steps to test your block:

    1. Rebuild Your Block: Run the following command in your terminal to rebuild the block:
    npm run start
    1. Add the Block to a Post: Go to your WordPress admin dashboard, create a new post, and add “My First Block”.
    1. Test the Attributes:
      • Use the ColorPalette in the block settings sidebar to change the background color.
      • Toggle the Bold Text option to see how the text style changes.
      • Enter and edit the block content using the RichText component.

    Types of Attributes in Gutenberg

    1. String: Used for text content, such as headings, paragraphs, or button labels.
    2. Boolean: A true/false value, perfect for toggling options (e.g., bold text, show/hide).
    3. Number: Numeric values, useful for attributes like padding, margin, or font size.
    4. Array: Stores lists of items, such as image galleries or lists of links.
    5. Object: Used for more complex data, such as metadata or settings with multiple properties.

    Conclusion: Mastering Block Attributes

    Block attributes are an essential part of customizing your Gutenberg blocks. They allow your blocks to store dynamic data, provide rich customization options for users, and enable powerful flexibility in how content is displayed.

    With attributes, you can make your blocks far more interactive and functional. In Day 5, we’ll explore advanced block styling techniques to further enhance the visual presentation of your blocks.

    Stay tuned!

    External Resources

    WordPress Block Editor API

  • Day 3: How to Create Your First Custom Gutenberg Block

    Introduction

    In the previous articles, you learned about Gutenberg and how to set up your development environment for custom block creation. Now, it’s time to take the next step: building your very first custom Gutenberg block.

    In this guide, we’ll walk you through creating a simple block, explaining the structure, code, and functionality you’ll need to get started. By the end of this article, you’ll have a solid understanding of how to build blocks that can be used within the WordPress Block Editor.

    What is a Gutenberg Block?

    A Gutenberg block is a self-contained unit of content that can be added, moved, and edited within the WordPress Block Editor. Blocks allow users to create complex layouts with ease, and custom blocks extend the default WordPress functionality by enabling you to create blocks tailored to your specific needs.

    Step 1: Set Up the Block Folder Structure

    First, let’s set up the folder and file structure for your custom Gutenberg block inside your theme or plugin.

    1. Navigate to Your Theme: Open your terminal or command prompt and navigate to the theme directory you set up in the previous article:
    cd wp-content/themes/your-theme-child
    1. Create a Block Folder: Inside your theme directory, create a folder called blocks to store your custom block files.
    mkdir blocks
    1. Create a Block Subfolder: Inside the blocks folder, create a new folder for your first block. Let’s name it my-first-block.
    mkdir blocks/my-first-block
    1. Create Block Files: In the my-first-block folder, create the following files:
    • block.json (this will define your block’s metadata)
    • index.js (the main JavaScript file for your block)
    • style.css (for block-specific styling)

    Your folder structure should now look like this:

    wp-content/
    themes/
        your-theme-child/
            blocks/
                my-first-block/
                    block.json
                    index.js
                    style.css

    Step 2: Define Block Metadata in block.json

    The block.json file defines the metadata for your block, including its name, title, category, and icon.

    Open block.json and add the following content:

    {
    "apiVersion": 2,
    "name": "your-theme/my-first-block",
    "title": "My First Block",
    "category": "common",
    "icon": "smiley",
    "description": "A custom Gutenberg block created for learning purposes.",
    "supports": {
        "html": false
    },
    "attributes": {
        "content": {
            "type": "string",
            "source": "html",
            "selector": "p"
        }
    },
    "textdomain": "your-theme",
    "editorScript": "file:./index.js",
    "style": "file:./style.css"
}

    Explanation:

    • apiVersion: The version of the Block API you’re using. We are using version 2, which is the most recent.
    • name: The block’s unique identifier. It follows the format namespace/block-name. Replace your-theme with your theme or plugin name.
    • title: The name displayed in the WordPress Block Editor.
    • category: The block category under which the block will appear in the editor. Use “common” for general-purpose blocks.
    • icon: The block icon. You can choose from Dashicons.
    • supports: Set to false for HTML if you don’t want to allow custom HTML within the block.
    • attributes: Define the block attributes. Here, we define a simple string attribute content that will store the block’s content.
    • editorScript: The JavaScript file to load for the block editor.
    • style: The CSS file that contains the block’s styles.

    Step 3: Write the Block Code in index.js

    Now let’s add the JavaScript code that will define the block’s behavior in the editor.

    Open index.js and add the following code:

    import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';

registerBlockType('your-theme/my-first-block', {
    title: __('My First Block', 'your-theme'),
    description: __('A simple Gutenberg block for learning purposes.', 'your-theme'),
    category: 'common',
    icon: 'smiley',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },
    edit: (props) => {
        const {
            attributes: { content },
            setAttributes,
        } = props;

        const onChangeContent = (newContent) => {
            setAttributes({ content: newContent });
        };

        return (
            <RichText
                tagName="p"
                value={content}
                onChange={onChangeContent}
                placeholder={__('Enter your text here...', 'your-theme')}
            />
        );
    },
    save: (props) => {
        const {
            attributes: { content },
        } = props;

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

    Explanation:

    • registerBlockType: Registers your custom block with WordPress. It takes two arguments: the block’s unique name and an object defining its properties.
    • edit function: Defines how the block appears in the editor. In this case, we use the RichText component to allow users to enter and edit text in the block.
    • save function: Determines how the block’s content is saved. Here, the RichText.Content component ensures the entered content is saved as a paragraph.

    Step 4: Add Styling in style.css

    Now let’s add some basic styling to the block. Open the style.css file and add the following CSS:

    .wp-block-your-theme-my-first-block {
    background-color: #f5f5f5;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

    Explanation:

    • .wp-block-your-theme-my-first-block: This class is automatically generated based on the block name. The styles ensure the block has a gray background with padding and a border.

    Step 5: Enqueue Scripts and Styles

    Finally, we need to enqueue the block’s JavaScript and CSS files in WordPress.

    1. Open your theme’s functions.php file and add the following code:
    function my_theme_enqueue_block_assets() {
    wp_enqueue_script(
        'my-first-block-editor',
        get_template_directory_uri() . '/blocks/my-first-block/index.js',
        array('wp-blocks', 'wp-element', 'wp-editor'),
        filemtime(get_template_directory() . '/blocks/my-first-block/index.js')
    );

    wp_enqueue_style(
        'my-first-block-style',
        get_template_directory_uri() . '/blocks/my-first-block/style.css',
        array(),
        filemtime(get_template_directory() . '/blocks/my-first-block/style.css')
    );
}
add_action('enqueue_block_assets', 'my_theme_enqueue_block_assets');

    This code ensures that your block’s scripts and styles are loaded when the block editor is used.

    Step 6: Test Your Block in WordPress

    1. Go to your WordPress dashboard.
    2. Create a new post or page.
    3. Open the Block Editor, click the “+” button, and search for “My First Block.”
    4. Add the block to your post or page and test its functionality.

    You should now see your custom Gutenberg block, complete with text input and the styles you added. Congratulations, you’ve successfully created your first custom Gutenberg block!

    Conclusion

    You’ve just built your first custom Gutenberg block from scratch! By understanding the basic structure, attributes, and the registration process, you now have the foundational skills to build more complex blocks in the future. In Day 4, we’ll dive deeper into block attributes and explore how to add more customization options to your blocks.

    Stay tuned for more Gutenberg development tips as you continue your journey!

  • Day 2: Setting Up Your Environment for Gutenberg Development

    Introduction

    In Day 1, we explored the basics of the Gutenberg Block Editor and why it’s transforming the way we create content in WordPress. Now, it’s time to roll up our sleeves and dive into development. But before we start creating custom Gutenberg blocks, you need to set up a local development environment.

    Having a proper environment is crucial for building and testing your blocks efficiently. In this guide, I’ll walk you through setting up your development environment with WordPress, Node.js, and the tools you need for Gutenberg block creation.

    Why You Need a Local Development Environment

    A local development environment allows you to create and test your Gutenberg blocks without impacting a live site. This way, you can experiment with new ideas, debug code, and preview changes in real-time. It also speeds up the development process since you don’t need to upload files or push changes to a live server.

    Some tools we’ll be using include:

    @wordpress/scripts for build tools, so you don’t have to configure Webpack manually.

    Local WordPress installation for easy access and testing.

    Node.js for managing JavaScript dependencies, as Gutenberg heavily relies on JavaScript.

    NPM (Node Package Manager) to manage the required Gutenberg packages.

    Step 1: Install a Local WordPress Environment

    What is Local by Flywheel?

    There are several ways to set up WordPress locally, but I recommend using Local by Flywheel. It’s a user-friendly tool that sets up WordPress quickly without needing to configure a web server manually.

    How to Install Local by Flywheel:

    1. Download Local by Flywheel: Go to LocalWP and download the version for your operating system (Windows, Mac, or Linux).
    2. Install Local: Run the installer and follow the prompts to install the software.
    3. Create a New WordPress Site:
      • Open Local and click “Create a New Site”.
      • Give your site a name (e.g., “Gutenberg Dev Site”).
      • Select the environment (I recommend using PHP 7.x and MySQL 5.7 for compatibility).
      • Set up a WordPress username and password.
      • Click “Add Site” to finalize the setup.

    Once this is done, you’ll have a fully functional WordPress site running locally on your computer.

    Alternative Options for Local Development:

    If you prefer other options, you can also use:

    • MAMP (for Mac) or XAMPP (cross-platform).
    • Docker for a more technical, container-based setup.

    Step 2: Install Node.js and NPM

    Why You Need Node.js for Gutenberg Development

    Gutenberg is built using JavaScript (React), which means you need Node.js to manage JavaScript packages and dependencies. NPM (Node Package Manager) comes bundled with Node.js, and you’ll use it to install Gutenberg development tools.

    Installing Node.js:

    1. Go to the Node.js website.
    2. Download the LTS version (Long-Term Support) for your operating system.
    3. Run the installer and follow the instructions.

    Once Node.js is installed, verify it by running the following commands in your terminal or command prompt:

    node -v
npm -v

    These commands will display the version numbers of Node.js and NPM, confirming that the installation was successful.

    Step 3: Set Up Your WordPress Theme for Gutenberg Development

    We’ll create custom Gutenberg blocks within your WordPress theme or as part of a custom plugin. To keep things simple, let’s start by adding blocks to a theme.

    Create a Child Theme (Optional but Recommended):

    If you’re using a theme, it’s better to create a child theme to avoid overwriting changes during theme updates.

    1. Create a Child Theme Folder: Inside the wp-content/themes directory of your local WordPress site, create a new folder called your-theme-child.
    2. Create a style.css File: Inside the child theme folder, create a style.css file with the following content:
    /*
Theme Name: Your Theme Child
Template: your-theme
*/
    1. Activate the Child Theme: Go to the WordPress admin dashboard, navigate to Appearance > Themes, and activate your new child theme.

    Step 4: Install @wordpress/scripts

    The @wordpress/scripts package is a build tool that simplifies the development process for Gutenberg blocks. It manages dependencies like Babel (for JavaScript transpiling) and Webpack (for bundling), so you don’t have to configure these manually.

    How to Install @wordpress/scripts:

    1. Open your terminal or command prompt.
    2. Navigate to your theme directory:
    cd wp-content/themes/your-theme-child
    1. Run the following command to install the @wordpress/scripts package:
    npm init -y
npm install @wordpress/scripts --save-dev
    1. After installing the package, create a src folder in your theme directory to store your block files.

    Step 5: Set Up Your package.json Scripts

    In your package.json file, add the following script to make it easier to build and watch your block development:

    "scripts": {
    "start": "wp-scripts start",
    "build": "wp-scripts build"
}

    Now, every time you want to compile your Gutenberg blocks during development, you can simply run:

    npm run start

    This command will automatically build your project and recompile any changes you make in real-time.

    Step 6: Preparing for Block Development

    With everything set up, you’re now ready to start developing custom Gutenberg blocks. Before we dive into coding, here’s a recap of what we’ve done:

    • Installed a local WordPress environment with Local by Flywheel.
    • Installed Node.js and NPM to manage JavaScript dependencies.
    • Installed @wordpress/scripts to simplify the build process.
    • Set up your theme (or child theme) for block development.

    Conclusion: Your Development Environment is Ready!

    You’re now fully equipped to start creating custom Gutenberg blocks. Setting up the development environment is a crucial first step in any project, and now that you have everything in place, you’ll be able to develop, test, and optimize your blocks efficiently.

    In Day 3, we’ll take our first step into building a custom Gutenberg block, walking through the file structure and the basics of block creation. Stay tuned for more!

    Resources:

    Day 1: Introduction to Gutenberg

    Local by Flywheel.

    Node.js