theme development - Show popover with url and option to open in new window

admin管理员组

文章数量:1279016

I am creating a custom block and I want to show a button which the user can edit the text of and I want them to be able to select a page/enter a link. I have this working but using URLInputButton does not give the option to open in a new tab like the default wordpress popover when you highlight some text and then choose to add a hyperlink.

This is what I currently have:

<URLInputButton url={url} onChange={onURLChange} />

I have also played around with a popover but not sure how to put what I want in there. This just does what it says and shows text that says 'Popover is toggled!"

<Button variant="secondary" onClick={toggleVisible}>
     Toggle Popover!
     {isVisible && <Popover>Popover is toggled!</Popover>}
</Button>

I am creating a custom block and I want to show a button which the user can edit the text of and I want them to be able to select a page/enter a link. I have this working but using URLInputButton does not give the option to open in a new tab like the default wordpress popover when you highlight some text and then choose to add a hyperlink.

This is what I currently have:

<URLInputButton url={url} onChange={onURLChange} />

I have also played around with a popover but not sure how to put what I want in there. This just does what it says and shows text that says 'Popover is toggled!"

<Button variant="secondary" onClick={toggleVisible}>
     Toggle Popover!
     {isVisible && <Popover>Popover is toggled!</Popover>}
</Button>

• theme-development
• block-editor

Share Improve this question asked Nov 16, 2021 at 18:28 user8463989user8463989 59311 gold badge88 silver badges2424 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

There's no support for such a setting in URLInputButton/URLInput and those components are deprecated. Try LinkControl. It may be helpful to study its use in the core Button block. That seems similar to what you are building.

本文标签： theme developmentShow popover with url and option to open in new window