Include custom demo content

Demo Content for Blocks comes with a hook to include your own groups. Groups can include any block, core or custom, with predefined attribute values.

FirstĀ enqueue your script in the editor.
Inside the script call the filter in the following way:

const { __ } = wp.i18n;

wp.hooks.addFilter("dcfb.addGroup", "addMyGroup", groups => {
    return [
        ...groups,
        {
            namespace: "my-plugin-name", // Required
            title: __("Grid tiles"), // Required
            description: __("Sets of grid tiles."), // Required
            // Indicate in which post types should the group be included.
            post_types: ["ebisu_grid"], // Default is ["post"]
            // Enter a color for the heading background.
            background_color: "#d5c7ab",
            // If your blocks need images to be uploaded to the Media Library, add them here.
            custom_images: [
                // Image that can be found in your plugin/theme's folder.
                {
                    name: "my-image-01", // Required
                    // If the image is inside your plugin or theme folder, indicate it here.
                    wp_folder: "plugins", // "plugins" or "theme"
                    // If the previous "wp_folder" property is "plugin" or "theme",
                    // then indicate the path from that folder.
                    image_path: "/my-plugin/assets/my-image-01.jpg"
                },
                // Image from an external url address.
                {
                    name: "my-image-02",
                    image_path: "https://example.com/my-image-02.jpg"
                }
            ],
            items: [
                {
                    title: __("Example paragraph and image"),
                    description: __("A description."),
                    // Image inside the description.
                    // Makes use of a custom image indicated previously.
                    // Check "Include custom images".
                    description_img_url:
                        "dcfb.my-image-02.media_details.sizes.large.source_url",
                    // Array of blocks with their name and attributes data.
                    blocks: [
                        // Required
                        {
                            name: "core/paragraph", // Required
                            // Block attributes with their value.
                            attributes: { // Required
                                content: "This is a paragraph with <em>some text</em>."
                            }
                        },
                        {
                            name: "core/image", // Required
                            // Makes use of a custom image indicated previously.
                            // Check "Include custom images".
                            attributes: { // Required
                                id: "dcfb.my-image-01.id",
                                link: "dcfb.my-image-01.link",
                                url: "dcfb.my-image-01.media_details.sizes.large.source_url",
                                alt: "My image",
                                caption: "",
                                linkDestination: "none"
                            }
                        }
                    ]
                }
            ]
        }
    ];
});
PHP