Button block - option to 'Open in new window'

[danztoxsmith]

Please can we have the option to 'open in a new window' on the button block? Either in the inspector controls or done in the same way as links (image below).

This was mentioned in #1404 with the button label but it seems the part about setting the target was missed.

[designsimply]

Adding a screenshot showing the current state of the button block floating toolbar:

^{Seen at http://alittletestblog.com/wp-admin/post.php?post=14000&action=edit running WordPress 4.9.7 and Gutenberg 3.2.0 using Firefox 61.0.1 on macOS 10.13.5.}

[afercia]

Worth noting this has been mentioned also in #3350 (comment) with some more details. The point is while other blocks (Paragraph, Image, etc.) use a standardised URLInput component, instead the Button component uses a custom implementation of the URL input field and it misses the option "open in a new window". Also, the design is different:

[therajumandapati]

@afercia Great point. It may be better to change the Button component to use the standardized URLInput component. However, I'm not sure if it was implemented this way on purpose.

[therajumandapati]

@chrisvanpatten @aduth @youknowriad (sorry, not sure who's more appropriate to be involved on this issue) Maybe we don't need to use RichText in the Button component at all? It's not a general use-case to have parts of a button bold or italic. Either the entire button is bold or italic or not.

[nfmohit]

Submitted #10128 which addresses this enhancement.

[shoxton]

Will this feature be implemented at the core? if so, when?

[therajumandapati]

There's another PR #12738 addressing this issue, would be great to see one of them merged soon.

[designsimply]

@shoxton it looks like work on this has been picked up by @nfmohit-wpmudev at #10128 and that there is also recent discussion on that pull request, however, there is no guarantee of a timeline for something like that to get added and generally it depends on how much time the core team and other committers and contributors have to work on pull requests as well as code reviews for each other. In this case, it looks like there's some recent movement which is great!

@mvpspl619 thank you so much for the note about 12738!

[BrunoBoehm]

Would be amazing, buttons are an important part of a UI, and not being able to direct to an external link in a new tab (as well as nofollow, noopener etc...) is quite a limiting parameter.

[eddieali]

It is essential to have (open in new tab) option just like other components for Buttons as well. +1 vote to have that option in next release. Thanks

[kristarella]

+1 from a WordPress.com customer

[morgangrip]

Being able to choose to open a button link in a new window? Yes + 1 on that.

[mattpan32]

+1 to this as well. The buttons are great, just that it'll be much better if we could have an option to open it in a new tab.

Btw, am quite inexperienced with this so hope you guys don't mind me asking again if it was already asked above or in other threads. May I know what is the quick fix/alternative to make the block open in a new tab? Editing the html? Many thanks!

[edwinhamers]

Another frustrated Gutenberg user that battles with buttons that do not offer a target setting....
Get it together

[shoxton]

+1 to this as well. The buttons are great, just that it'll be much better if we could have an option to open it in a new tab.

Btw, am quite inexperienced with this so hope you guys don't mind me asking again if it was already asked above or in other threads. May I know what is the quick fix/alternative to make the block open in a new tab? Editing the html? Many thanks!

@mattpan32 you can try adding the target="_blank" attribute to the button element, or just use the link block that has the "open in new tab" functionality.

[edwinhamers]

+1 to this as well. The buttons are great, just that it'll be much better if we could have an option to open it in a new tab.
Btw, am quite inexperienced with this so hope you guys don't mind me asking again if it was already asked above or in other threads. May I know what is the quick fix/alternative to make the block open in a new tab? Editing the html? Many thanks!

@mattpan32 you can try adding the target="_blank" attribute to the button element, or just use the link block that has the "open in new tab" functionality.

Isnt Gutenberg supposed to "streamline the editing".

[ohlauren]

@mattpan32 you can try adding the target="_blank" attribute to the button element, or just use the link block that has the "open in new tab" functionality.
Adding it to the button block results in an "unexpected or invalid content" error and you have to convert to html. The only way that seems to work right now is just creating a link in a paragraph, editing the html for that block, and adding class="wp-block-button__link" to the link there.

[lakellie]

+1 from a WordPress.com user in #12136336-hc (noting for myself as they asked me to notify them if this ever does end up being implemented)

[fosterTerence]

+1

[rendzina]

+1 also but, until this is added, here is how to achieve this:

Here is a button as normal, without the '_blank' new page option:

Under the button options, select 'Edit as HTML':

Now edit the HTML to add the code target="_blank" as shown, and save:

Clicking the button will now open in new page.

[mcknightd]

Also requesting this feature. Thanks

[gpmw]

+1 from a WordPress.com customer

[phschmanau]

+1 This feature would be nice.

[gmmedia]

You add target="_blank" to a link but not to the button link? Why?

It's so frustrating.

This is what happens if you add the target via Edit as HTML

[taropaa]

This makes the block completely useless. Please add.

[dionysous]

In order to use this button block on landing pages, we need to have rel and target as option, otherwise we can't use this block.

[designsimply]

+1 from a WordPress.com user in #12136336-hc (noting for myself as they asked me to notify them if this ever does end up being implemented)

@lakellie hey there! Thanks for adding this note. I would recommend in the case of someone wanting to follow progress to create a GitHub account and click the "Subscribe" option under Notifications in the column on the right side of this issue.

+1 from a WordPress.com customer

+1 from a WordPress.com customer

@kristarella @gpmw for cases where you are doing customer support for a company and someone requests a change, it would be really awesome to include a quote with any reasons why or what the customer's end goals are and how the enhancement would be helpful for them. For me, it makes the request much more compelling and it also helps a lot when working on prioritization.

In order to use this button block on landing pages, we need to have rel and target as option, otherwise we can't use this block.

@dionysous can you please add a comment to #13542 about the rel option too? It would be helpful to make a quick note about why it's needed if possible. :)

[mdrockwell]

+1 from a WordPress.com user.

[jennl524]

Hi, has this been resolved? Display of a button of page and upon click, it'll open a new tab or window?

[GlennMartin1]

+1
This is a much-needed feature in core.

[dougwollison]

I'd like to point out that this should also be accounted for on the Button component itself (the rel attribute I mean), and by extension components that use Buttons, such as Notices (from what I can tell if I want to do this currently, I have to write it as a button with an onClick callback, when I want a regular link).

[wouthe]

+1
I don't understand why this is not here yet :/

[nfmohit]

+1
I don't understand why this is not here yet :/

Hey there, @wouthe ! Thank you for your query ❤️

This feature is now live in the Gutenberg plugin and will be included in the core soon. In order to be able to use this right now and to also see other cool stuff that we developers are working on, please install the Gutenberg plugin.

Thanks! ❤️

Regards,
Nahid

[wouthe]

+1
I don't understand why this is not here yet :/

Hey there, @wouthe ! Thank you for your query ❤️

This feature is now live in the Gutenberg plugin and will be included in the core soon. In order to be able to use this right now and to also see other cool stuff that we developers are working on, please install the Gutenberg plugin.

Thanks! ❤️

Regards,
Nahid

Nahid, super, great to hear! If I install the plugin, will it not conflict with the core itself?
Thanks!
Wout

[nfmohit]

Nahid, super, great to hear! If I install the plugin, will it not conflict with the core itself?
Thanks!
Wout

Hi there, @wouthe !
Thank you for your query.

First of all, sincere apologies about the delayed response here. The notification somehow missed my eyes.

If you install the plugin, it will not conflict with the core. It is more like an "extension", which lets you experience the upcoming features of the project.

Hope this helps. Thanks!

Regards,
Nahid

[cinghaman]

Hi @nfmohit-wpmudev do we know when this would become part of the core gutenberg?

[GlennMartin1]

Hi @nfmohit-wpmudev do we know when this would become part of the core gutenberg?

This is already in WordPress 5.3 core, which was released on November 12.

[cinghaman]

@GlennMartin1 thanks, so i can disable the plugin and it won't affect/break the button I have already setup

[GlennMartin1]

Yes you can, if you are running WordPress 5.3.

Keeping the Gutenberg plugin enabled gives you frequent small editor improvements (about every two weeks when a new Gutenberg version is released).

Having the Gutenberg plugin disabled, you'll eventually get the same updates (about every 3-4 months when a new WordPress version is released).

[cinghaman]

@GlennMartin1 thanks for the detail info :)

[gmmedia]

Now we have the link rel field in the button block, but still not for all other links.