How to save custom block link?

  • Unknown's avatar
    mvneobux130917 · Member ·

    I’m creating my first custom block for wordpress which must add two buttons and I need to insert the link of the two buttons. But after updating the post the link is saved, however if I enter the post again to edit, the link appears empty, it does not retrieve the link saved in the database. See my edit.js code

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

import { useBlockProps, URLInputButton } from '@wordpress/block-editor';
import { registerBlockType } from '@wordpress/blocks';

import './editor.scss';

registerBlockType( 'my-custom-block', {
    // ...
    attributes: {
        link1: {
            type: 'string',
            source: 'attribute',
            attribute: 'href',
            selector: '.btn-afil-text-card a:first-child'
        },
        link2: {
            type: 'string',
            source: 'attribute',
            attribute: 'href',
            selector: '.btn-afil-text-card a:last-child'
        }
    },
    

} );

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: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:link2 })}
        />
      </span>
    </div>
  </div>
</div>

            
	);
}

    And my code in save.js

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

registerBlockType( 'my-custom-block', {
    // ...
    attributes: {
        link1: {
            type: 'string',
            source: 'attribute',
            attribute: 'href',
            selector: '.btn-afil-text-card a:first-child'
        },
        link2: {
            type: 'string',
            source: 'attribute',
            attribute: 'href',
            selector: '.btn-afil-text-card a:last-child'
        }
    },
    // ...
} );

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>
		
	);
}

    In summary, if I save the link and publish it, when opening the post the links that were saved appear normally. But if I need to edit such links and go to edit post, the links appear empty. If I insert a new link it updates correctly. But I need to edit the link already saved before, because the way it is can confuse editors.

    Can anyone help me to resolve this?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    aisajib · Member ·

    Hi there! 

    Unfortunately, we cannot assist because your site is not hosted on WordPress.com. It’s a self-hosted WordPress.org site hosted by a different hosting company. 

    We do not have access to self-hosted sites, so I cannot see the setup of the backend of your account.

    To clarify:

    • WordPress.com is a managed host platform that offers WordPress in a pre-customized server environment already set up for you to build your site. Hosting with WordPress.com is free, and the server, security, updates, and site optimization are all handled by us. We offer free and paid plans that provide additional features for your site based on your needs (plugins, custom themes, etc). You also have access to professional assistance via Happiness Engineers to address any issues you encounter.
    • WordPress.org is a self-hosted platform, meaning you download the WordPress software and install it on a web server from a host of your choosing. You have to pay the host when you’re self-hosting, and the server, security, updates, and site optimization are all handled by you. This gives you more flexibility and control of your plugins, themes, and code but also more responsibility to ensure those things are operating correctly.

    Our support page dives more into the differences:

    https://en.support.wordpress.com/com-vs-org/

    I recommend contacting your site host, as they would be better positioned to assist you since they have access to your account. Also, the open-source forum community is always available and prepared to help users with self-hosted sites: https://wordpress.org/support/forums 

    Thanks!

  • The topic ‘How to save custom block link?’ is closed to new replies.