Archived topic
GenerateBlocks buttons: how to open in a new tab?
9 replies · Started by John on October 8, 2022
Hi there,
I'm a bit embarrassed to ask this as it seems so basic... but how do I make my GB buttons open in a new tab? I don't see any option to add target="_blank" to the html element.
I'm using GP Pro and GB Free.
Thank you
Hi there,
if you select the buttons link option in the toolbar, as long as there is a URL in the link field you will have the option - see here:
David: I knew there was a good reason to be embarrassed! Sorry, I could have found this myself. Thank you.
However, same question for when a GB Heading block is used as a dynamic link? I tried editing it as HTML to add the attribute, but since the link is dynamic, it doesn't show on the edit page.
Hi John,
You may add a custom attribute in the Advanced section of the Headline Block. Example: https://share.getcloudapp.com/E0uZRz9j
Can you try that and let us know how it goes?
Fernando, thank you for getting back to me. It seems that adding "custom attributes" is only available for GB Pro, which I don't have.
However, I looked at the documentation and it says that custom attributes only accept data-* and aria-* attributes, so it doesn't look like it would help me.
If I may offer some feedback: if the custom attributes can indeed be used to add a target="_blank" attribute, I think it's a bit petty to only offer it in the Pro version. That's a very basic feature for any HTML editor, and it's been available for free with Wordpress core since the beginning. So it feels a bit like bait and switch to offer a block with a cool new feature for free (and dynamic data is very cool!), and having users pay to get access to the basic old features on those new blocks. Then again custom attributes may not work for 'target blank', in which case ignore my feedback.
John,
Oh yeah I forgot. target="_blank" should be added as an attribute if you set the link to "Open link in new tab". This feature is available in the free version.
See: https://share.getcloudapp.com/p9uQLwxd
Also see: https://share.getcloudapp.com/04uWyO10
Fernando,
That works if I assign a link to my Headline block, but in my case I'm using dynamic data to make it a link based on data from another page.
In that case, I don't have the link options: https://i.imgur.com/hl42RsS.png (I'm using a div, but the same applies for H2 or other elements)
It's like GB doesn't consider the element a link yet since the URL hasn't been assigned yet.
I see. Sorry for not understanding earlier.
You can add add-open-link-newtab to the class list of the Headline Block, then add this PHP snippet:
function db_rerender_url_new_tab( $block_content, $block ) {
if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'add-open-link-newtab' ) !== false ) {
$my_search='href="';
$my_replace='target="_blank" href="';
$new_content = str_replace($my_search, $my_replace, $block_content);
return $new_content;
}
return $block_content;
}
add_filter( 'render_block', 'db_rerender_url_new_tab', 10, 2 );
Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets
It works! Thanks so much Fernando, you're the man :)
You're welcome John! :)