Using Bento Components in Gutenberg Blocks

Using Bento Components in Gutenberg blocks is a powerful way to create interactive and dynamic content within WordPress. Bento components are AMP […]

8 min read

Using Bento Components in Gutenberg blocks is a powerful way to create interactive and dynamic content within WordPress. Bento components are AMP (Accelerated Mobile Pages) components designed for flexibility and responsiveness. They can be used in non-AMP pages and integrate well with modern web standards.

Here’s a step-by-step guide to incorporating Bento components into Gutenberg blocks:

1. Understand Bento Components

Bento components are standalone, web-component-based elements that can work outside the AMP framework.
Examples include <bento-carousel>, <bento-accordion>, <bento-lightbox>, etc.

Key Features:

Framework-agnostic (usable with WordPress, React, etc.)
Lightweight and performance-optimized.
Can enhance interactivity in WordPress Gutenberg blocks.

2. Prepare Your WordPress Environment

Ensure your WordPress setup allows custom block development. You’ll need:

Node.js installed for building custom Gutenberg blocks.
A development environment (e.g., @wordpress/scripts).
Basic knowledge of React and Gutenberg block structure.

3. Install and Import Bento Components

Add the Bento component library to your project. You can install it via npm or include it via a <script> tag in your block’s enqueue script.

Install via npm:

npm install @ampproject/bento-carousel

Enqueue in WordPress: Use wp_enqueue_script and wp_enqueue_style to include the Bento component scripts and styles in your block.

function enqueue_bento_scripts() {
    wp_enqueue_script(
        'bento-carousel',
        'https://cdn.ampproject.org/v0/bento-carousel-1.0.js',
        array(),
        null,
        true
    );
    wp_enqueue_style(
        'bento-carousel',
        'https://cdn.ampproject.org/v0/bento-carousel-1.0.css',
        array(),
        null
    );
}
add_action('enqueue_block_assets', 'enqueue_bento_scripts');

4. Create a Custom Gutenberg Block

Use the WordPress Block Editor APIs to define a new block.

Example Block Code:

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import { useEffect } from '@wordpress/element';
registerBlockType('custom/bento-carousel', {
    title: __('Bento Carousel', 'custom'),
    icon: 'images-alt2',
    category: 'widgets',
    edit: () => {
        const blockProps = useBlockProps();
        useEffect(() => {
            // Initialize the Bento Carousel
            const script = document.createElement('script');
            script.src = 'https://cdn.ampproject.org/v0/bento-carousel-1.0.js';
            script.type = 'module';
            document.body.appendChild(script);
            return () => {
                document.body.removeChild(script);
            };
        }, []);
        return (
            <div {...blockProps}>
                <bento-carousel width="400" height="300" loop>
                    <img src="https://via.placeholder.com/400x300?text=Slide+1" alt="Slide 1" />
                    <img src="https://via.placeholder.com/400x300?text=Slide+2" alt="Slide 2" />
                    <img src="https://via.placeholder.com/400x300?text=Slide+3" alt="Slide 3" />
                </bento-carousel>
            </div>
        );
    },
    save: () => {
        return (
            <bento-carousel width="400" height="300" loop>
                <img src="https://via.placeholder.com/400x300?text=Slide+1" alt="Slide 1" />
                <img src="https://via.placeholder.com/400x300?text=Slide+2" alt="Slide 2" />
                <img src="https://via.placeholder.com/400x300?text=Slide+3" alt="Slide 3" />
            </bento-carousel>
        );
    },
});

5. Test Your Block

Add the block to a post or page in the Gutenberg editor.
Preview the block to ensure the Bento component works as expected.

6. Optional: Add Inspector Controls

Enhance your block by adding controls to the Gutenberg sidebar to modify attributes like loop, autoplay, or width/height.

Example:

import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ToggleControl } from '@wordpress/components';
// Add this to your block's edit function
<InspectorControls>
    <PanelBody title={__('Settings', 'custom')}>
        <ToggleControl
            label={__('Enable Loop', 'custom')}
            checked={loop}
            onChange={(value) => setAttributes({ loop: value })}
        />
    </PanelBody>
</InspectorControls>

7. Deploy the Block

After testing, deploy your custom block in your WordPress theme or plugin.

Tips

Ensure Bento scripts are loaded only on pages where the block is used to optimize performance.
Validate your block on various devices for responsiveness.

This approach combines the flexibility of Bento components with the intuitive editing capabilities of Gutenberg blocks!

Here is a list of Bento components available for use, developed by the AMP project. These components are designed for building interactive and responsive web elements, and they can function in both AMP and non-AMP environments.

Bento Components Overview

Bento components are lightweight, framework-agnostic, and web-component-based. They allow for dynamic interactions while maintaining high performance and flexibility.

Key Bento Components

1. User Interface Components

<bento-accordion>
- Interactive accordion for expandable/collapsible content.
- Usage: FAQs, nested sections.
<bento-carousel>
- A responsive image or content carousel.
- Usage: Sliders, galleries, product showcases.
<bento-lightbox>
- A modal for displaying content in an overlay.
- Usage: Enlarged images, embedded media.
<bento-tabs>
- Tabbed navigation for switching between content views.
- Usage: Product descriptions, feature highlights.
<bento-sidebar>
- A collapsible side panel.
- Usage: Menus, navigation drawers.
<bento-date-picker>
- A customizable date picker component.
- Usage: Forms, booking systems, calendars.
<bento-time-picker>
- A customizable time selection component.
- Usage: Appointment scheduling.

2. Media Components

<bento-video>
- Responsive video player for embedded videos.
- Usage: Inline video playback, tutorials.
<bento-youtube>
- Embeds and controls YouTube videos.
- Usage: Video content integration.
<bento-vimeo>
- Embeds Vimeo videos.
- Usage: Alternative video hosting.
<bento-audio>
- Plays audio content.
- Usage: Podcasts, music players.

3. Form and Input Components

<bento-inputmask>
- Input field with customizable masks.
- Usage: Form validation, formatting phone numbers or dates.
<bento-selector>
- Enables selection states for interactive lists or grids.
- Usage: Multi-option selection, toggles.
<bento-form>
- Handles form submissions.
- Usage: Forms with validation and interactivity.

4. Advanced Layout Components

<bento-inline-gallery>
- A gallery component with thumbnails.
- Usage: Image showcases, portfolios.
<bento-marquee>
- A scrolling text or content marquee.
- Usage: News tickers, announcements.
<bento-progress-bar>
- Displays progress visually.
- Usage: Loading indicators, survey completion.
<bento-tooltip>
- Displays a tooltip for interactive hints.
- Usage: Contextual help, guides.

5. Analytics and Tracking

<bento-analytics>
- Tracks user interactions and sends analytics data.
- Usage: Integrating custom analytics.

How to Use Bento Components

HTML-only Mode: Add <script> tags to your project for each Bento component you want to use.
JavaScript (React/Custom Blocks): Use npm packages like @ampproject/bento-carousel.

Example Usage

Bento Carousel:

<!DOCTYPE html>
<html lang="en">
<head>
    <script async src="https://cdn.ampproject.org/v0/bento-carousel-1.0.js" type="module"></script>
    <link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-carousel-1.0.css">
</head>
<body>
    <bento-carousel width="400" height="300" loop>
        <img src="image1.jpg" alt="Image 1" />
        <img src="image2.jpg" alt="Image 2" />
        <img src="image3.jpg" alt="Image 3" />
    </bento-carousel>
</body>
</html>

Where to Find More

You can find detailed documentation and examples for each component on the AMP Project’s Bento Components documentation page.

To use Bento Date and Time Picker Components in Gutenberg blocks, you can create a block that integrates the interactive and customizable <bento-date-picker> and <bento-time-picker> components. These components allow users to select dates and times in a user-friendly interface.

Here’s how you can set it up:

1. Include Bento Date and Time Picker

Bento Date and Time Picker scripts and styles need to be included in your WordPress project.

Enqueue Scripts and Styles in PHP:

function enqueue_bento_date_time_picker() {
    wp_enqueue_script(
        'bento-date-time-picker',
        'https://cdn.ampproject.org/v0/bento-date-picker-1.0.js',
        array(),
        null,
        true
    );
    wp_enqueue_script(
        'bento-time-picker',
        'https://cdn.ampproject.org/v0/bento-time-picker-1.0.js',
        array(),
        null,
        true
    );
    wp_enqueue_style(
        'bento-date-time-picker',
        'https://cdn.ampproject.org/v0/bento-date-picker-1.0.css',
        array(),
        null
    );
}
add_action('enqueue_block_assets', 'enqueue_bento_date_time_picker');

2. Create the Gutenberg Block

Define a custom Gutenberg block using the WordPress block API.

Example Code:

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import { useEffect } from '@wordpress/element';
registerBlockType('custom/bento-date-time-picker', {
    title: __('Bento Date & Time Picker', 'custom'),
    icon: 'calendar-alt',
    category: 'widgets',
    attributes: {
        placeholderDate: {
            type: 'string',
            default: 'Select a date',
        },
        placeholderTime: {
            type: 'string',
            default: 'Select a time',
        },
    },
    edit: ({ attributes, setAttributes }) => {
        const { placeholderDate, placeholderTime } = attributes;
        const blockProps = useBlockProps();
        useEffect(() => {
            // Dynamically load Bento components
            const datePickerScript = document.createElement('script');
            datePickerScript.src = 'https://cdn.ampproject.org/v0/bento-date-picker-1.0.js';
            datePickerScript.type = 'module';
            const timePickerScript = document.createElement('script');
            timePickerScript.src = 'https://cdn.ampproject.org/v0/bento-time-picker-1.0.js';
            timePickerScript.type = 'module';
            document.body.appendChild(datePickerScript);
            document.body.appendChild(timePickerScript);
            return () => {
                document.body.removeChild(datePickerScript);
                document.body.removeChild(timePickerScript);
            };
        }, []);
        return (
            <div {...blockProps}>
                <div>
                    <label>{__('Date Picker', 'custom')}</label>
                    <bento-date-picker>
                        <input type="text" placeholder={placeholderDate} />
                    </bento-date-picker>
                </div>
                <div style={{ marginTop: '20px' }}>
                    <label>{__('Time Picker', 'custom')}</label>
                    <bento-time-picker>
                        <input type="text" placeholder={placeholderTime} />
                    </bento-time-picker>
                </div>
            </div>
        );
    },
    save: ({ attributes }) => {
        const { placeholderDate, placeholderTime } = attributes;
        return (
            <div>
                <div>
                    <label>{__('Date Picker', 'custom')}</label>
                    <bento-date-picker>
                        <input type="text" placeholder={placeholderDate} />
                    </bento-date-picker>
                </div>
                <div style={{ marginTop: '20px' }}>
                    <label>{__('Time Picker', 'custom')}</label>
                    <bento-time-picker>
                        <input type="text" placeholder={placeholderTime} />
                    </bento-time-picker>
                </div>
            </div>
        );
    },
});

3. Test the Block

Add the custom block in the WordPress block editor.
Ensure the date and time pickers render correctly.
Verify that interactivity works (e.g., date selection, time input).

4. Enhance the Block (Optional)

Add settings in the block’s Inspector Controls for customizable placeholders or options like minimum/maximum dates and time formats.

Example with Inspector Controls:

import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl } from '@wordpress/components';
edit: ({ attributes, setAttributes }) => {
    const { placeholderDate, placeholderTime } = attributes;
    return (
        <>
            <InspectorControls>
                <PanelBody title={__('Settings', 'custom')}>
                    <TextControl
                        label={__('Date Placeholder', 'custom')}
                        value={placeholderDate}
                        onChange={(value) => setAttributes({ placeholderDate: value })}
                    />
                    <TextControl
                        label={__('Time Placeholder', 'custom')}
                        value={placeholderTime}
                        onChange={(value) => setAttributes({ placeholderTime: value })}
                    />
                </PanelBody>
            </InspectorControls>
            <div {...useBlockProps()}>
                <bento-date-picker>
                    <input type="text" placeholder={placeholderDate} />
                </bento-date-picker>
                <bento-time-picker>
                    <input type="text" placeholder={placeholderTime} />
                </bento-time-picker>
            </div>
        </>
    );
};

5. Deploy and Use

After testing, deploy your block as part of a custom plugin or theme.
The <bento-date-picker> and <bento-time-picker> will function as lightweight, interactive elements, enhancing the user experience in the block editor and frontend.

Tips:

Use the attributes for validation (e.g., restrict dates or times).
Add styling to match your WordPress theme.
Ensure components are mobile-friendly and responsive.

This approach ensures a smooth integration of Bento Date and Time pickers into Gutenberg blocks.