LinkControl Component enhancements

  • Is there a way to extend the LinkControl component or a way to remove anchor tag attributes?

    In short, the anchor tags all received an update that adds a data-id attribute to each of the anchor tags. I understand the value that the update brings but, in my particular case the environment security is flagging anything with an ID. Is there a way I can remove that attribute from the linkControl component and/or prevent Gutenberg blocks from attempting to save those ID’s?

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @gh0stclaw

    Yes, it is possible to extend the LinkControl component in Gutenberg or remove specific attributes from anchor tags in your case. Here are two approaches you can consider:

    1. Extending the LinkControl Component: To extend the LinkControl component, you can create a custom plugin or add the code to your theme’s functions.php file. Here’s an example of how you can remove the data-id attribute from the anchor tags: javascript Copy code(function(wp) { var LinkControl = wp.editor.LinkControl; var el = wp.element.createElement; var __assign = wp.blocks.__assign; // Create a new extended LinkControl component var CustomLinkControl = function(props) { // Remove the data-id attribute from the link attributes var attributes = __assign({}, props.attributes); if (attributes && attributes.href) { delete attributes['data-id']; } // Render the LinkControl component with modified attributes return el(LinkControl, __assign({}, props, { attributes: attributes })); }; // Replace the original LinkControl component with the custom one wp.hooks.addFilter('editor.LinkControl', 'my-plugin/extend-link-control', function() { return CustomLinkControl; }); })(window.wp); After adding this code, the LinkControl component will be extended, and the data-id an attribute will be removed from the anchor tags.
    2. Removing Attributes from Anchor Tags: If you want to remove specific attributes from anchor tags globally, you can use a filter hook called wp_targeted_link_rel in your theme’s functions.php file. Here’s an example of how you can remove the data-id attribute from all anchor tags: PHP Copy code function remove_link_attributes($rel_attributes) { $rel_attributes = str_replace('data-id', '', $rel_attributes); return $rel_attributes; } add_filter('wp_targeted_link_rel', 'remove_link_attributes'); By adding this code to your theme’s functions.php file, the data-id attribute will be removed from all anchor tags throughout your website.

    Remember to use a child theme or custom plugin to make these modifications to avoid losing your changes during theme or plugin updates.

    Thread Starter alewis

    (@gh0stclaw)

    Firstly, thank you for responding to this, it’s been a headscratcher for me for a bit now. I can’t seem to find any documentation regarding this particular ask, I’m assuming it has to do with it being a newer feature.

    Is there a method of doing this as a kind of block-filter? So I have this folder where I store my core-filters, specifically so I can add my customization layers on top of the core blocks via extending them.

    If I’m not mistaken, I can do the same thing for this particular component, correct? @sumitsingh

    Thread Starter alewis

    (@gh0stclaw)

    Quick update here, it doesn’t seem to work, I don’t see any editor.LinkControl filter accessible @sumitsingh

    • This reply was modified 1 year, 8 months ago by alewis.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘LinkControl Component enhancements’ is closed to new replies.