0

I created a custom block to include two buttons in the gutemberg editor. However, in some cases I need to delete a single button, but gutemberg treats the 2 buttons as a single block, see:


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


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


import './editor.scss';



registerBlockType( 'my-custom-block', {
    // ...
    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'
        }
    },
    

} );

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} 
          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/amazon.webp" />
      </span>
      <span className="btn-afil-text-card">
        <URLInputButton
          url={attributes.link1} 
          onChange={(link2) => setAttributes({  link2:link2 })}
        />
      </span>
    </div>

  
  </div>
</div>

            
    );
}

How do I include both buttons at the same time and be able to exclude one or the other if necessary?

I need wordpress to see each button as a block, but I don't want to be creating several plugins, one for each button.

0

Your Answer

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