5

I'm trying to create a basic link control in my WordPress plugin, but I can't get it to work properly. I 've read the previous answers on here, but still having issues. I also checked out the block-editor component documentation on Github, but the example doesn't go far enough to address my problem. Here is the code for my Attributes:

const attributes = {
    linkText: {
        type: 'string',
        'selector': '.hero-image__button',
        default: ''
    },
    linkURL: {
        type: 'string',
        selector: '.hero-image__button',
        default: ''
    }
};

export default attributes;

Here is the code for my Edit function:

import { TextControl } from '@wordpress/components';
import { __experimentalLinkControl as LinkControl } from '@wordpress/block-editor';

export default function Edit ( { attributes: { linkURL, LinkText }, setAttributes } ) {

    const handleLinkChange = ( value ) => {
        setAttributes( {
            linkURL: value.url
        } );
    };

    return (
        <>
            <TextControl
                value={ linkText }
                onChange={ ( linkText ) => setAttributes( { linkText } ) }
            />
            <LinkControl
                onChange={ handleLinkChange }
                value={ linkURL }                           
            />
        </>
    );

}

Here is the code for my Save Function:

export default function Save ( { attributes: { linkURL, linkText } } ) {

    return (
        <a className='hero-image__button' href={ linkURL }>{ linkText }</a>
    );

}

Everything saves fine and it looks as expected on the front end. The problem occurs in the admin. After entering the URL the value of the field always comes up "Undefined". Here is a screenshot of what I get:

enter image description here

When I reload the admin page, the link control field resets completely even though the linkURL value persists:

enter image description here

Any help would be greatly appreciated!

1
  • Aside: you're destructuring LinkText from attributes in the parameters, but referencing linkText later.
    – bosco
    Jul 2 at 2:41
2

Your value prop is the wrong format. From <LinkControl>'s README:

value

  • Type: Object
  • Required: No

Current link value.

A link value is composed of a union between the values of default link properties and any custom link settings.

The resulting default properties of value include:

  • url (string): Link URL.
  • title (string, optional): Link title.
  • opensInNewTab (boolean, optional): Whether link should open in a new browser tab. This value is only assigned when not providing a custom settings prop.

If the link's actual title & "opensInNewTab" properties are relevant to your ends, then you should store the whole value in attributes in the handleLinkChange() function. Otherwise, specifying the linkText attribute should be sufficient. As mentioned in the README, you can also specify a settings prop to suppress the "Opens in New Tab" toggle (or add additional toggles):

            <LinkControl
                onChange={ handleLinkChange }
                value={ { url: linkURL, title: linkText } }   
                settings={ [] }    
            />

4
  • Thanks for all your help! Can't believe I missed the value type of object in the docs. I was able to get the linkURL and Open In New Tab settings working, but now I'm struggling with the onRemove function. I added onRemove={ handleLinkRemove } to the component, but when I remove the link in the admin, my function is not fired. I tried a console.log inside this function, nothing is triggered when I remove the link. I figured I just need to set the linkURL back to null and the Open In New Tab to false. Do you know how I should handle this event?
    – Thad
    Jul 4 at 3:16
  • bosco not sure if you saw my last comment. I marked the answer as correct, but I'm hoping you can help me out with the onRemove event. I can't seem to unset the linkURL attribute when the data is deleted from the LinkControl field. Do you have any suggestions?
    – Thad
    Jul 7 at 17:01
  • It does look to me like passing a function like () => setAttributes( { linkURL: '' } ) should work, I think - but I'll have to play with it in a bit. Or if you have your code available on GitHub or some such I can take a peek!
    – bosco
    Jul 7 at 17:42
  • Hi bosco, I opened a new question in regards to the the onRemove function here: wordpress.stackexchange.com/questions/391584/… Because I couldn't get the onRemove function to fire and the conditions never gave the user the option to "Unlink", I resorted to using the URLInputButton and a ToggleControl to handle Open In a New Tab. It works but the UI isn't great. I would really like to find a solution that uses the LinkControl. If you have any thoughts or suggestions let me know. The other post has more context for you to go on.
    – Thad
    Jul 13 at 15:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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