web-dev-qa-db-fra.com

Comment puis-je ajouter un attribut personnalisé aux blocs centraux de Gutenberg?

J'essaie d'ajouter une liste déroulante aux blocs principaux de Wordpress pour sélectionner un attribut de données qui sera ajouté au serveur frontal (par exemple, data-attr = "value-from-dropdown").

Je pense que la solution consiste à ajouter un attribut personnalisé aux blocs principaux, à le définir dans le back-end et à le transmettre au serveur, un bloc central. Ceci est le plus proche que j'ai eu, mais cela me permet simplement de créer une liste déroulante, exécuter props.setAttribute () dedans ne fonctionne pas.

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

Y a-t-il quelque chose que je puisse faire, ou la fonctionnalité n'est-elle pas encore là?

block-editor
4
Eric Murphy

Tout d'abord dans la fonction d'édition, déclarez une variable avec votre option déroulante -

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

Je suppose que vous allez afficher l'option de liste déroulante dans le panneau de la barre latérale. Voici le code pour panelbody et comment obtenir la valeur de liste déroulante -

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

Cela affichera un panneau déroulant dans la zone Inspecteur, notez que j'utilise la fonction (ES6) Map pour parcourir les valeurs et les étiquettes correspondantes. Maintenant, vient le composant RichText où vous appelez les nœuds HTML -

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

Remarquez, en fonction de l'option de liste déroulante. La taille du bouton est attachée au nom de classe du noeud HTML. Maintenant dans la feuille de style de l’éditeur, ajoutez quelques classes et propriétés css -

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

Pour la fonction de sauvegarde -

const save = ( props ) => {

    const {  size } = props.attributes;


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

        </div>
    );
}
2
Ashiquzzaman Kiron