Add custom data attribute to every core Gutenberg Blocks

Question

I'm adding two custom attributes to core Gutenberg blocks, data-delay and data-duration. I want to add these attributes to manage animations blocks on my custom theme.

I wrote this JS code into block-extension.js:

(function(wp) {
    const { addFilter } = wp.hooks;
    const { createHigherOrderComponent } = wp.compose;
    const { Fragment } = wp.element;
    const { InspectorControls } = wp.blockEditor;
    const { PanelBody, TextControl } = wp.components;

    // Aggiungi nuovi attributi ai blocchi
    const addCustomAttributes = (settings, name) => {
        if (typeof settings.attributes !== 'undefined') {
            settings.attributes = Object.assign(settings.attributes, {
                dataDelay: {
                    type: 'string',
                    default: '0',
                },
                dataDuration: {
                    type: 'string',
                    default: '0',
                },
            });
        }
        return settings;
    };

    // Aggiungi controlli per i nuovi attributi
    const withCustomControls = createHigherOrderComponent((BlockEdit) => {
        return (props) => {
            if (props.isSelected) {
                return wp.element.createElement(
                    Fragment,
                    null,
                    wp.element.createElement(BlockEdit, props),
                    wp.element.createElement(
                        InspectorControls,
                        null,
                        wp.element.createElement(
                            PanelBody,
                            { title: 'Custom Attributes', initialOpen: true },
                            wp.element.createElement(TextControl, {
                                label: 'Data Delay',
                                value: props.attributes.dataDelay,
                                onChange: function(newVal) {
                                    props.setAttributes({ dataDelay: String(newVal) });
                                },
                            }),
                            wp.element.createElement(TextControl, {
                                label: 'Data Duration',
                                value: props.attributes.dataDuration,
                                onChange: function(newVal) {
                                    props.setAttributes({ dataDuration: String(newVal) });
                                },
                            })
                        )
                    )
                );
            }
            return wp.element.createElement(BlockEdit, props);
        };
    }, 'withCustomControls');

    // Aggiungi gli attributi ai wrapper HTML del blocco
    const addCustomProps = (saveElementProps, blockType, attributes) => {
        if (attributes.dataDelay) {
            saveElementProps['data-delay'] = attributes.dataDelay;
        }
        if (attributes.dataDuration) {
            saveElementProps['data-duration'] = attributes.dataDuration;
        }
        return saveElementProps;
    };

    // Applica i filtri di Gutenberg
    addFilter('blocks.registerBlockType', 'luxuryconcept/add-custom-attributes', addCustomAttributes);
    addFilter('editor.BlockEdit', 'luxuryconcept/with-custom-controls', withCustomControls);
    addFilter('blocks.getSaveContent.extraProps', 'luxuryconcept/add-custom-props', addCustomProps);
})(window.wp);

and PHP code into functions.php:

function my_custom_gutenberg_extension() {
    wp_enqueue_script(
        'block-extension',
        get_template_directory_uri() . '/assets/js/block-extension.js', 
        array('wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wp-compose', 'wp-hooks'),
        filemtime(get_template_directory() . '/assets/js/block-extension.js'),
        true
    );
}
add_action('enqueue_block_editor_assets', 'my_custom_gutenberg_extension');

I got this in every blocks:

But when I add a block into Gutenberg Editor I got these JS errors on every block:

I think because the original content is different from that with the two data attributes added, but I don't know to manage it.

Thanks

--EDIT--

So I have to remove

addFilter('blocks.getSaveContent.extraProps', 'luxuryconcept/add-custom-props', addCustomProps);

and add this PHP code to get attributes:

function theme_custom_add_custom_attributes($block_content, $block) {
    // Verifica se l'attributo è stato impostato e non è vuoto
    $data_delay = get_field('data-delay', $block['id']);
    $data_duration = get_field('data-duration', $block['id']);

    // Aggiungi gli attributi al blocco solo se sono stati impostati
    if ($data_delay && !empty($data_delay)) {
        $block_content = str_replace('<div', '<div data-delay="' . esc_attr($data_delay) . '"', $block_content);
    }
    if ($data_duration && !empty($data_duration)) {
        $block_content = str_replace('<div', '<div data-duration="' . esc_attr($data_duration) . '"', $block_content);
    }

    return $block_content;
}
add_filter('render_block', 'theme_custom_add_custom_attributes', 10, 2);

But I don't know how to save them in PHP.

Answer 1

I found the solution:

1. I removed addFilter('blocks.getSaveContent.extraProps', 'luxuryconcept/add-custom-props', addCustomProps); as @TomJNowell recomended.
2. I added the add_filter('render_block', 'theme_custom_add_custom_attributes', 10, 2); PHP code to functions.php:

So, here all the working code:

JS:

/**
 * 
 * Extends Core Gutenberg Blocks functionalities
 * 
 * @description Add data-delay and data-duration attributes to every Gutenberg Core Blocks
 * @package luxuryconcept
 * @author Stefano Fattori <[email protected]>
 * @copyright Stefano Fattori ©2024
 * @url www.stefanofattori.it
 * 
 */

(function(wp) {
    const { addFilter } = wp.hooks;
    const { createHigherOrderComponent } = wp.compose;
    const { Fragment } = wp.element;
    const { InspectorControls } = wp.blockEditor;
    const { PanelBody, TextControl } = wp.components;

    // Add new attributes to blocks
    const addCustomAttributes = (settings, name) => {
        if (typeof settings.attributes !== 'undefined') {
            settings.attributes = Object.assign({}, settings.attributes, {
                dataDelay: {
                    type: 'string',
                    default: '0',
                },
                dataDuration: {
                    type: 'string',
                    default: '0',
                },
            });
        }
        return settings;
    };

    // Add controls for the new attributes
    const withCustomControls = createHigherOrderComponent((BlockEdit) => {
        return (props) => {
            if (props.isSelected) {
                return wp.element.createElement(
                    Fragment,
                    null,
                    wp.element.createElement(BlockEdit, props),
                    wp.element.createElement(
                        InspectorControls,
                        null,
                        wp.element.createElement(
                            PanelBody,
                            { title: 'Custom Attributes', initialOpen: true },
                            wp.element.createElement(TextControl, {
                                label: 'Data Delay',
                                value: props.attributes.dataDelay,
                                onChange: function(newVal) {
                                    props.setAttributes({ dataDelay: String(newVal) });
                                },
                            }),
                            wp.element.createElement(TextControl, {
                                label: 'Data Duration',
                                value: props.attributes.dataDuration,
                                onChange: function(newVal) {
                                    props.setAttributes({ dataDuration: String(newVal) });
                                },
                            })
                        )
                    )
                );
            }
            return wp.element.createElement(BlockEdit, props);
        };
    }, 'withCustomControls');


    // Apply Gutenberg Filters
    addFilter('blocks.registerBlockType', 'luxuryconcept/add-custom-attributes', addCustomAttributes);
    addFilter('editor.BlockEdit', 'luxuryconcept/with-custom-controls', withCustomControls);

})(window.wp);

PHP:

/**
 * Adds custom attributes to Gutenberg core blocks (FrontEnd)
 * 
 * @see /assets/js/block-extension.js
 * 
 * @param mixed $block_content
 * @param mixed $block
 * @return mixed
 */
function theme_custom_add_custom_attributes($block_content, $block) {
    // Check if there are custom attributes 'dataDelay' e 'dataDuration'
    if ( isset($block['attrs']['dataDelay']) && !empty($block['attrs']['dataDelay']) ) {
        $block_content = add_custom_attribute($block_content, 'data-delay', $block['attrs']['dataDelay']);
    }
    if ( isset($block['attrs']['dataDuration']) && !empty($block['attrs']['dataDuration']) ) {
        $block_content = add_custom_attribute($block_content, 'data-duration', $block['attrs']['dataDuration']);
    }

    return $block_content;
}

/**
 * Functions to add data attributes to HTML blocks
 * 
 * @param mixed $block_content
 * @param mixed $attribute_name
 * @param mixed $attribute_value
 * @return mixed
 * 
 * @since 1.5.5
 */
function add_custom_attribute($block_content, $attribute_name, $attribute_value) {
    // Search the first tag HTML in the block content
    $pos = strpos($block_content, '>');

    if ($pos !== false) {
        // Insert the custom attribute after the first HTML tag
        $block_content = substr_replace($block_content, ' ' . $attribute_name . '="' . esc_attr($attribute_value) . '"', $pos, 0);
    }

    return $block_content;
}
add_filter('render_block', 'theme_custom_add_custom_attributes', 10, 2);

Thanks!