• Resolved tunyk

    (@tunyk)


    Add support for data-* attributes in Gutenberg blocks. Currently, adding data-* attributes to any element via the code editor results in an error message saying “Block contains unexpected or invalid content”.

    data-* attributes are needed by thousands of websites because they help them leverage hundreds of features and design changes.

    One small example. Using the data-nosnippet HTML attribute in Google’s recommendations for hiding elements in search engine results (SEO)

    https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag#data-nosnippet-attr

Viewing 2 replies - 1 through 2 (of 2 total)
  • To enable data-* attributes in Gutenberg:

    Allow Attributes in PHP: Add this to your theme/plugin to allow data-* attributes during block rendering:

    function allow_data_attributes($allowed_tags) {
    foreach ($allowed_tags as &$tags) {
    $tags['data-*'] = true;
    }
    return $allowed_tags;
    }
    add_filter('wp_kses_allowed_html', 'allow_data_attributes');

    Support Attributes in JS: Enqueue a script to modify block registration:

    wp.hooks.addFilter(
    'blocks.registerBlockType',
    'custom/data-attributes',
    (settings) => {
    settings.attributes = {
    ...settings.attributes,
    dataAttributes: { type: 'object' },
    };
    return settings;
    }
    );

    Test: Add data-* attributes in the code editor and verify they work without errors.

    Moderator Support Moderator

    (@moderator)

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Support for data-* attributes in Gutenberg blocks’ is closed to new replies.