1

I was able to get the values to save, but now I'm running into issues unsetting the value when the data is removed from the control. I've tried the onRemove function as suggested in the documentation on Github here.

For some reason I can't get this function to fire so even if the URL is removed from the control, it's still stored in state.

Any help would be greatly appreciated!

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

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

    const handleLinkChange = ( value ) => {

        setAttributes( {
            linkURL: value.url
        } );

    };
    
    // This function doesn't seem to be firing
    const handleLinkRemove = () => {

        console.log( 'remove link' ); // This does not run on remove of the link

        setAttributes( {
            linkURL: null
        } );
    };

    return (

        <LinkControl
            onChange={ handleLinkChange }
            onRemove={ handleLinkRemove }
            value={ { url: linkURL } }                         
        />

    );

}

@Tom really appreciate your help. I'm new to stackexchange so I wasn't sure where to add the screenshots below.

Here is more context: the company I work for is transitioning from ACF to the Block Editor. Our content editors are used to using a versatile link component that will allow them to do internal/external links as well as links to PDFs or YouTube modal pop-ups. I'm trying to recreate this with a custom component that we can drop into blocks when needed. The screenshots below show the variations I'm trying to accomplish:

enter image description here

enter image description here

enter image description here

If one of our content editors add a url to the LinkControl, but decide to go with a PDF or YouTube link instead, there is no way for them to truly remove the URL from state. The field will show as empty when they delete out the URL but when they save the post again, that LinkControl field will repopulate with the data in state.

Maybe I'm using the wrong component to accomplish this, but I liked the idea of the editors being able to select from a list of pages in the dropdown and control the open in a new tab.

You mentioned that if the conditions are right, an unlink button would be available, but I haven't figured out how to meet these conditions. I'm open to any suggestions.

3
  • When you say remove, what are you doing to remove it? Are you actually removing it or are you just setting the links value to ""?
    – Tom J Nowell
    Jul 7 at 18:28
  • have you tried using a link with an edit button instead that triggers a popover?
    – Tom J Nowell
    Jul 9 at 16:13
  • I ended up going with the URLInputButton in combination with a ToggleControl. The UI isn't as clean as the LinkControl, but I was able to accomplish what I needed. Thanks again for all your help!
    – Thad
    Jul 9 at 20:48
1

That's not how that component works.

onRemove is called when the link is unlinked, via a button that only appears when certain conditions are met:

                { onRemove && value && ! isEditingLink && ! isCreatingPage && (
                    <Button
                        className="block-editor-link-control__unlink"
                        isDestructive
                        variant="link"
                        onClick={ onRemove }
                    >
                        { __( 'Unlink' ) }
                    </Button>
                ) }

https://github.com/WordPress/gutenberg/blob/6eac4a26f143c7378c3b39b5a83271538f36dfa9/packages/block-editor/src/components/link-control/index.js#L270

When an onRemove props is given, and the value is not empty, the link is not being edited, and you're not currently using the control to create a page.

This isn't so that you can erase or reset the value of the link, this is so that you can remove it completely. It is possible to have <a href="">, but unlink would remove the anchor completely, so it does not make sense for you to use.

Instead, to catch the blank URL use case, you should watch the change event

4
  • Hi Tom I'm still a little confused. The onChange event only fires for me if I select an option from the dropdown, click the arrow button to the right, or hit the enter key. If I click the edit button and delete out the existing url then hit enter or click the arrow key, I get the validation message to fill out the field. The onChange event doesn't run for me. Maybe I'm missing something, but I can't figure out how to handle the blank URL in the onChange event.
    – Thad
    Jul 9 at 3:03
  • You can't expect onChange to fire one very key press. A link control sets the value, it isn't a literal editable version of the value. Think of it more like a modal dialog with a field that pops up when you click an edit button. LinkControl doesn't behave like a text input with the url type, that's not its purpose, after all why save a value the user hasn't finished typing in or hasn't decided no yet? LinkControl components are rarely seen outside of popover controls
    – Tom J Nowell
    Jul 9 at 13:24
  • Also the entire approach of checking for the empty value like that is almost certainly flawed and fundamentally wrong. Provide more context for what you're trying to do so that a more appropriate method can be suggested, it's very difficult to explain things without understanding what you're trying to build and how this fits into it
    – Tom J Nowell
    Jul 9 at 13:26
  • Hi Tom please see the additional context and screenshots I've added to my question above.
    – Thad
    Jul 9 at 14:03

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.