Building a Reusable Gutenberg Block Library

Slider Block

The Slider block allows users to create a dynamic slide experience by adding multiple Cover blocks inside the slider. Each Cover block acts as a slide, with its background image serving as both the slide’s background and its thumbnail in the slider’s navigation. The user can easily add content inside each slide (like text or images) using the Cover block editor.

Key Features:

• Cover Block Integration: Users add Cover blocks within the Slider block. Each Cover block becomes a slide in the slider, and the background image of the Cover block becomes the thumbnail.
• Progress Bar: A progress bar appears beneath each thumbnail, showing the progress of the current slide and giving users a visual cue of how much time is left before the next slide.
• Thumbnails: The thumbnails at the bottom of the slider correspond to the background images of each Cover block. Clicking on a thumbnail navigates to the respective slide.

Code Snippet:

The following snippet from render.php demonstrates how the Slider block dynamically renders each slide (which is a Cover block). This snippet handles the rendering of navigation dots (which double as thumbnails) and ensures that the block correctly loops through the inner blocks to display each slide.

// Get inner blocks (Cover blocks used as slides)
$inner_blocks = $block->inner_blocks;

// Build wrapper attributes
$wrapper_classes = ['wp-block-wdsbt-wdsbt-slider-block'];
$wrapper_attributes = get_block_wrapper_attributes([
    'class' => implode(' ', $wrapper_classes)
]);

// Count the number of slides
$slide_count = !empty($inner_blocks) ? count($inner_blocks) : 0;
?>

<div <?php echo $wrapper_attributes; ?>>
    <div class="slider-container">
        <?php if (!empty($inner_blocks)): ?>
            <?php foreach ($inner_blocks as $index => $inner_block): ?>
                <div class="slider-slide" data-slide="<?php echo esc_attr($index); ?>">
                    <?php echo $inner_block->render(); ?>
                </div>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>

    <?php if ($slide_count > 1): ?>
        <div class="slider-navigation">
            <div class="slider-dots">
                <?php for ($i = 0; $i < $slide_count; $i++): ?>
                    <button type="button"
                            data-slide="<?php echo esc_attr($index); ?>"
                            class="<?php echo $i === 0 ? 'active' : ''; ?>"
                            aria-label="<?php printf(esc_attr__('Go to slide %d', 'wdsbt-slider-block'), $i + 1); ?>">
                    </button>
                <?php endfor; ?>
            </div>
        </div>
    <?php endif; ?>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Key Features:

• Customizable Content with Predefined Layout: I created a predefined template for the Testimonial block, which automatically loads essential elements like testimonial text, name, headshot, and attribution. This layout is fully customizable in the block editor, allowing users to easily add or adjust content without having to worry about layout or design.
• Flexible Content Types: The Testimonial block allows users to insert and customize a variety of content types. By including images, text, and groups, users can add a testimonial logo, testimonial content, and attribution details (like name and title), all of which can be arranged and styled as needed.
• Easy to Use Block Structure: By using InnerBlocks, I made it simple for users to work within a predefined structure that allows for easy rearrangement of the block’s inner content. This flexibility empowers users to edit the content independently, while still keeping the layout organized and cohesive.
• Predefined Layout for Attribution: I used a flex layout within a group block for the testimonial attribution section, which ensures that the headshot image and attribution text (name and title) are aligned properly. The layout provides a clean and professional appearance while allowing for future customizations in the design.
• User-Friendly Placeholder Text: I added placeholder text to guide users when entering content, making it clear where to input the testimonial content, name, and title. This helps ensure a smooth experience for users who may not be familiar with Gutenberg or block-based editing.
• Simplified Block Configuration: The Testimonial block comes pre-configured with class names and default styling, making it easy to implement the block within different themes. The design can be further customized with minimal effort by adjusting the class names and applying custom CSS.

Key Features:

• Dynamic Slide Content: The InnerBlocks component allows the carousel to accept and display dynamic content for each slide, making it flexible for various types of content (such as text, images, or groups).
• Auto Play Functionality: The auto play feature can be activated to automatically advance the slides, and users can customize the auto play speed to control the time between slides.
• Navigation Dots: The navigation dots provide an interactive way to navigate through the carousel. When enabled, these dots act as clickable thumbnails for each slide.
• Customizable Button Style: The navigation button style can be customized to either a raised or outlined design, giving users control over the look and feel of the carousel’s navigation buttons.
• Scrollbar Option: The optional scrollbar allows users to visually track their progress through the carousel. When enabled, it provides a clear indication of how far along the user is in the carousel.

Code Snippet:

The following snippet from edit.js demonstrates how I created the Carousel block that accepts other blocks as slides. The block includes customizable settings such as auto play, auto play speed, navigation dots, scrollbar, and navigation button style. These settings allow users to fully customize the carousel’s behavior and appearance in the block editor.

// Ensure we have the required variables
if (!isset($block) || !isset($attributes)) {
    return '<div>Block or attributes not set</div>';
}

// Get inner blocks (slides)
$inner_blocks = $block->inner_blocks;
$slide_count = count($inner_blocks);

// Build wrapper attributes
$wrapper_classes = ['wp-block-wdsbt-wdsbt-slider-block'];
$wrapper_attributes = get_block_wrapper_attributes(['class' => implode(' ', $wrapper_classes)]);

?>

<div <?php echo $wrapper_attributes; ?>>
    <div class="slider-container">
        <?php foreach ($inner_blocks as $index => $inner_block): ?>
            <div class="slider-slide" data-slide="<?php echo esc_attr($index); ?>">
                <?php echo $inner_block->render(); ?>
            </div>
        <?php endforeach; ?>
    </div>

    <?php if ($slide_count > 1): ?>
        <div class="slider-navigation">
            <div class="slider-dots">
                <?php for ($i = 0; $i < $slide_count; $i++): ?>
                    <button type="button" data-slide="<?php echo esc_attr($index); ?>" class="<?php echo $i === 0 ? 'active' : ''; ?>" aria-label="Go to slide <?php echo $i + 1; ?>"></button>
                <?php endfor; ?>
            </div>
        </div>
    <?php endif; ?>
</div>