Question 170948 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can I make a custom block link editable in WordPress?

I’m creating my first custom block for gutemberg in wordpress. I simply need to insert two buttons, but the menu to insert link when I click on the button does not appear.

My code is this:


import { __ } from '@wordpress/i18n';

import { useBlockProps } from '@wordpress/block-editor';

import './editor.scss';

export default function Edit({ attributes, setAttributes }) {
    return (

            <div class="card-afil">
                <div class="btn-afil" { ...useBlockProps() }> 
                    <span class="btn-afil-img">
                        <img src="https://www.adoromaquiagem.com.br/wp-content/uploads/2023/05/amazon.webp" />
                    </span>
                    <span class="btn-afil-text-card">
                        <a href="" class="btn-afil-text">Ver Preço</a>
                    </span>
                </div>
                
                <div class="btn-afil" { ...useBlockProps() }> 
                    <span class="btn-afil-img">
                        <img src="https://www.adoromaquiagem.com.br/wp-content/uploads/2023/05/beleza-na-web.webp" />
                    </span>
                    <span class="btn-afil-text-card">
                        <a href="" class="btn-afil-text"><span>Ver Preço</span></a>
                    </span>
                </div>

                </div>
    

            
    );
}

Where are the links: <a href="" class="btn-afil-text"><span>View Price</span></a> I need to change the link in the gutemberg editor, but when I click the button to edit I see this:

enter image description here

That is, the option to edit the link does not appear.

As this is my first custom block, I’m having trouble understanding how it all works. Therefore, if anyone can tell me what I need to study or do to be able to edit the link of each button I will be immensely grateful.

I tried reading the documentation to be able to edit the button links, but I couldn’t find anything specific. I don’t know what to look for or where to find this solution.

Tags:

3

Answers


  1. 0

    The issue you’re facing is that the link editing option is not appearing for the buttons in the Gutenberg editor. To enable link editing for your buttons, you need to make a few modifications to your code.

    First, make sure you import the URLInput component from @wordpress/block-editor package. This component provides the functionality to edit links. Add the following import statement at the top of your code:

    javascript

    import { URLInput } from '@wordpress/block-editor';

    Next, update your Edit component to include the URLInput component. Modify your code as follows:

    export default function Edit({ attributes, setAttributes }) {
return (
    <div>
        <div className="card-afil">
            <div className="btn-afil" { ...useBlockProps() }> 
                <span className="btn-afil-img">
                    <img src="https://www.adoromaquiagem.com.br/wp-content/uploads/2023/05/amazon.webp" />
                </span>
                <span className="btn-afil-text-card">
                    <URLInput
                        value={attributes.link1} // Assumes you have 'link1' attribute defined in attributes
                        onChange={(link1) => setAttributes({ link1 })}
                    />
                </span>
            </div>
            
            <div className="btn-afil" { ...useBlockProps() }> 
                <span className="btn-afil-img">
                    <img src="https://www.adoromaquiagem.com.br/wp-content/uploads/2023/05/beleza-na-web.webp" />
                </span>
                <span className="btn-afil-text-card">
                    <URLInput
                        value={attributes.link2} // Assumes you have 'link2' attribute defined in attributes
                        onChange={(link2) => setAttributes({ link2 })}
                    />
                </span>
            </div>
        </div>
    </div>
);

    }

    In the above code, I added the URLInput component for each button and provided the necessary props. The value prop represents the link value, which should be stored in your attributes object (e.g., link1 and link2). The onChange prop allows you to update the link value when it changes.

    Make sure you have the corresponding attributes and setAttributes defined for your block.

    By making these changes, the Gutenberg editor will display an input field for each button’s link, allowing you to edit the links directly in the editor.

    Remember to save your changes and refresh the Gutenberg editor to see the updated behavior.

    Login or Signup to reply.
  2. 0

    I understand that you would like to edit the link using the Gutenberg editor’s built-in link icon, rather than a separate input field. Unfortunately, the Gutenberg editor’s link icon is not automatically available for custom block components like the one you’re creating.

    To enable the link editing functionality through the Gutenberg link icon, you will need to implement some additional code. Here’s an updated version of your code that incorporates the Gutenberg link icon for editing the button links:

    import { __ } from '@wordpress/i18n';
import { useBlockProps, URLInputButton } from '@wordpress/block-editor';
import './editor.scss';

export default function Edit({ attributes, setAttributes }) {
  return (
<div { ...useBlockProps() }>
  <div className="card-afil">
    <div className="btn-afil">
      <span className="btn-afil-img">
        <img src="https://www.adoromaquiagem.com.br/wp-content/uploads/2023/05/amazon.webp" />
      </span>
      <span className="btn-afil-text-card">
        <URLInputButton
          url={attributes.link1} // Assumes you have 'link1' attribute defined in attributes
          onChange={(link1) => setAttributes({ link1 })}
        />
      </span>
    </div>

    <div className="btn-afil">
      <span className="btn-afil-img">
        <img src="https://www.adoromaquiagem.com.br/wp-content/uploads/2023/05/beleza-na-web.webp" />
      </span>
      <span className="btn-afil-text-card">
        <URLInputButton
          url={attributes.link2} // Assumes you have 'link2' attribute defined in attributes
          onChange={(link2) => setAttributes({ link2 })}
        />
      </span>
    </div>
  </div>
</div>

    );
    }

    In this updated code, I replaced the URLInput component with URLInputButton. This component renders a link icon that, when clicked, opens a dialog to edit the URL. The url prop should correspond to the link value stored in your attributes object (e.g., link1 and link2).

    By using URLInputButton, you should now be able to edit the button links through the Gutenberg editor’s link icon, providing a more intuitive editing experience.

    Please try implementing this updated code and let me know if you have any further questions or issues.

    Login or Signup to reply.
  3. 0

    If the link disappears and is not saved when you update the post, it could be due to how the attributes are being saved and retrieved. Here are a few possible reasons and solutions:

    Verify that the link attributes are defined correctly: Make sure that the link1 and link2 attributes are defined in the block’s attributes object. Check that they are set up correctly with the default value and saved in the block’s save function.

    Ensure that the onChange function is correctly updating the link attributes: Double-check the onChange function for each URLInputButton component. Confirm that the link value is being correctly passed to the setAttributes function. For example, you can use a separate function to update each link attribute, as shown in the previous code snippet:

    const updateLink1 = (url) => {
  setAttributes({ link1: url });
};

const updateLink2 = (url) => {
  setAttributes({ link2: url });
};

    Make sure these functions are properly assigned to the onChange prop for each URLInputButton component.

    Check the save function to ensure the links are properly rendered: In the save function of your block, confirm that the link attributes (link1 and link2) are correctly accessed and rendered. Make sure you include the link URLs in the appropriate elements so that they are displayed when the post is saved.

    For example, you can use the following code to render the link URLs in the saved content:

    export default function Save({ attributes }) {
  const { link1, link2 } = attributes;

  return (
    <div>
      <div className="card-afil">
        <div className="btn-afil">
          <span className="btn-afil-img">
            <img src="https://www.adoromaquiagem.com.br/wp-content/uploads/2023/05/amazon.webp" />
          </span>
          <span className="btn-afil-text-card">
            <a href={link1} className="btn-afil-text">Ver Preço</a>
          </span>
        </div>
    
        <div className="btn-afil">
          <span className="btn-afil-img">
            <img src="https://www.adoromaquiagem.com.br/wp-content/uploads/2023/05/beleza-na-web.webp" />
          </span>
          <span className="btn-afil-text-card">
            <a href={link2} className="btn-afil-text">Ver Preço</a>
          </span>
        </div>
      </div>
    </div>
  );
}

    Ensure that the href attribute of the tag corresponds to the correct link attribute (link1 or link2).

    Please review your code based on these points and ensure that the links are correctly defined, updated, and rendered in both the edit and save functions. If the issue persists, please share more details or the full code so that I can assist you further.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search