Tworzę mój pierwszy niestandardowy blok dla wordpress, który musi dodać dwa przyciski i muszę wstawić link do dwóch przycisków. Ale po zaktualizowaniu posta link jest zapisywany, jednak jeśli ponownie wchodzę do posta, aby edytować, link wydaje się pusty, nie pobiera linku zapisanego w bazie danych. Zobacz mój kod edit.js

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=" />
      </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=" />
      </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>

            
    );
}

I mój kod w 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=" />
                  </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=" />
                  </span>
                  <span className="btn-afil-text-card">
                    <a href={link2} className="btn-afil-text">Ver Preço</a>
                  </span>
                </div>
              </div>
            </div>
        
    );
}

Podsumowując, jeśli zapiszę link i opublikuję go, podczas otwierania postu zapisane linki pojawiają się normalnie. Ale jeśli muszę edytować takie linki i przejść do edycji postu, linki wydają się puste. Jeśli wstawię nowy link, aktualizuje się poprawnie. Ale muszę edytować link już zapisany wcześniej, ponieważ sposób, w jaki jest, może zmylić redaktorów.

Czy ktoś może mi pomóc to rozwiązać?