0

I am trying to find/use a way of adding links within my custom blocks. Ideally this would allow me to add a custom url, or select a URL from within my Wordpress app and add some custom link text. So far I haven't really found anything to do this but the URLInputButton is close, I have the following in my edit block

export default function Edit(props) {

    const onSelectURL = (url, post) => {
        props.setAttributes({
            btnUrl: url,
            btnText: (post && post.title) || 'Click here'
        });
    };

    return (
        <div {...useBlockProps()}>
            <URLInputButton url={props.attributes.btnUrl} onChange={(url, post) => onSelectURL(url, post)}/>
        </div>
    );
}

This is so close to what I need but I need to have the choice or functionality to add custom link text, the logic of (post && post.title) || 'Click here' doesn't give me what I need. I am reading the documentation at https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components/url-input#urlinputbutton but so far I am a little confused. Can I amend or add a option to the URLInputButton to allow custom link text or is this not possible? If not, would anyone know of a Wordpress Component I could use to achieve what I need (something that isn't RichText).

Many thanks in advance and sorry if my question is badly worded.

4
  • what are you trying to build that requires this? What does your block do? What you're asking is very odd, but without knowing why you want this it's difficult to recommend a replacement approach as it depends. What does your block do? When you say custom text do you actually mean the title of the chosen post? Or do you mean user entered text? Or is it that Click here needs to be editable? If this is just a button would it not make more sense to use a block style or block variant of the core button block?
    – Tom J Nowell
    Mar 25, 2023 at 19:14
  • I mean user entered text, ideally the "click here" text would be another attribute / property. Perhaps I should look into the button block. I realise what I am asking is odd, I come from an NodeJS/Angular background but I am creating a Wordpress app for a friend with custom blocks and theme as they have no web design or development knowledge.
    – Mike Sav
    Mar 25, 2023 at 19:39
  • BTW, the block is the same one mentioned in this question, wordpress.stackexchange.com/questions/414915/… the div.questions__control would contain a styled link that the user can amend the text and url src
    – Mike Sav
    Mar 25, 2023 at 19:41
  • that's super helpful, I've written an answer
    – Tom J Nowell
    Mar 25, 2023 at 23:30

1 Answer 1

0

I think the solution is clearer, and already hinted at in your attributes

  1. Add a new input for the text, and set its value to the btnText attributes value, allow it to update that attribute on change
  2. when you set the URL, don't use (post && post.title) || 'Click here' instead use (post && post.title) || props.attributes.btnText so that it falls back to the existing value
  3. give the attribute a default value of Click Here when you register the block so that it starts out with that value

This way you could use a TextControl, or even a richtext to allow italic and bold etc. Then you can use a toolbar button to trigger the link the same way buttons and hyperlinks do.

Note though that if you just want a button that links somewhere, you can use a core/button block or core/buttons. This would save time, allow some limited user control, and improve theme support by letting global styles control how the buttons look from theme.json.

If you just want a button that looks different, you can also register a block style or block variant to allow users to pick alternative stylings

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.