I found out today that WordPress editor, and now the new Gutenberg editor, automatically adds a rel=”noopener noreferrer” attribute to links when they open in a new tab (target=”_blank”), for security reasons.
In custom Gutenberg blocks this causes the block to be marked as invalid after saving the post, if the render (the save method on the block definition) is not aware of this rel attribute.
There are two possible workarounds:
- Add the attribute rel to the custom block definition and thus avoiding the conflict
- Use the filter
wp_targeted_link_relto control/disable this automation of WordPress.
If you opt for the second, you need to make sure you are running WordPress 5.1.0 or later:
function my_links_control( $rel, $link ) {
return false;
}
add_filter( 'wp_targeted_link_rel', 'my_links_control', 10, 2 );Note: Use the second workaround as a last resort fix, with a conditional if clause in order to only target the links of your custom block. WordPress automation in this case is for security reasons. WordPress core should be fixed to prevent the conflict with the custom blocks.
There’s an open issue on Gutenberg’s GitHub repo.
Featured image by Ben Hershey on Unsplash