How to save custom block link?

[mvneobux]

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?

[t-hamano]

Looking at the code, it appears that the selector is not specified correctly.

selector: '.btn-afil-text-card a:first-child'

It looks for the first and last elements in the elements with the .btn-afil-text-card class.

However, as far as the save() function markup is concerned, there is only one a element in the .btn-afil-text-card class.
As a result, these two attirbutes refer to the same element.

You might try the following selector to refer to each a element in the .btn-aflil class that exists in parallel:

{
	attributes: {
		link1: {
			selector: '.btn-afil:first-child a'
		},
		link2: {
			selector: '.btn-afil:last-child a'
		}
	}
}