I'm trying to add a dropdown to Wordpress core blocks to select a data attribute that will be added to the front-end (e.g. data-attr="value-from-dropdown").

I think the solution is to add a custom attribute to the core blocks, set it in the back-end and pass it to the front-end, but I can't for the life of me figure out how to add a new attribute to a core block. This here is the closest I've gotten, but this just lets me create a dropdown, running props.setAttribute() inside doesn't work.

https://wordpress.org/gutenberg/handbook/extensibility/extending-blocks/#editor-blockedit

Is there anything I can do, or is the functionality just not there yet?

First inside the edit function declare a variable with your dropdown option -

const linkOptions = [
        { value: 'small', label: __( 'Small' ) },
        { value: 'normal', label: __( 'Normal' ) },
        { value: 'medium', label: __( 'Medium' ) },
        { value: 'large', label: __( 'Large' ) },
    ];

I'm assuming you will be showing the dropdown option in the Sidebar panel. Here's the code for panelbody and how to get the dropdown value -

<PanelBody>
  <SelectControl
    label={ __( 'Size' ) }
    value={ size }
    options={ linkOptions.map( ({ value, label }) => ( {
    value: value,
    label: label,
    } ) ) }
    onChange={ ( newSize ) => { setAttributes( { size: newSize } ) } }
   />
</PanelBody>

This will show a dropdown panel in the Inspector area, notice I'm using (ES6)Map function to iterate over the values and corresponding labels. Now, comes the RichText Component where you call the HTML nodes -

<RichText
      tagName={ 'span' }
      placeholder={ __( 'Enter Text' ) }
      value={ text }
      onChange={ (text) => setAttributes( { text: text } ) }
      formattingControls={ [ 'bold', 'italic', 'strikethrough' ] }
      className={`button-${size}`} /*ES6 Template Literals*/
      isSelected={ isSelected }
      keepPlaceholderOnFocus
/>

Notice, Depending upon the dropdown option. Button size gets attached to the HTML node classname. Now in the editor stylesheet, Add couple of css class and properties -

button-small
button-normal
button-medium
button-large

For the save function -

const save = ( props ) => {

    const {  size } = props.attributes;


    return (
        <div className={ `ubutton-${size}` }>

        </div>
    );
}

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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