0

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?

1 Answer 1

0

Your selectors are wrong.

{
    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'
        }
    },
}

Both of your a elements are the first (and last) children of their parents, which means that your attributes are each getting both values.

:first-child and :last-child don't get the first and last elements found at all, they get elements that are the first and last children of their parents. What you actually want to get are the a elements that are children of the first or last .btn-afil elements. So your selectors should look like this:

attributes: {
    link1: {
        type: 'string',
        source: 'attribute',
        attribute: 'href',
        selector: '.btn-afil:first-child a'
    },
    link2: {
        type: 'string',
        source: 'attribute',
        attribute: 'href',
        selector: '.btn-afil:last-child a'
    }
},
1
  • Thank you very much friend, I was 4 days trying to solve this. If it wasn't for you I would never be able to solve it, thank you very much :))))) (Y) Commented May 20, 2023 at 18:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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