Étendre le bloc noyau à Gutenberg

4

pour un projet, je dois étendre le bloc de base core / cover-image. Pour le premier essai de base, je suis arrivé avec le code suivant:

PHP:

add_action('enqueue_block_editor_assets', function() {
   wp_enqueue_script('hephaestus-admin-script', 
   get_template_directory_uri() . '/dist/js/admin.js', ['wp-blocks', 'wp-element', 'wp-edit-post'], THEME_VERSION);
});

admin.js:

function transformElement(element, blockType, attributes) {
  if (blockType.name != 'core/cover-image') {
    return element;
  }

  var newElement = wp.element.createElement(
    'div',
    {
      className: 'wp-block-cover-image',
      style: 'background-image: url(\'' + attributes.url + '\');',
    },
    [
      wp.element.createElement(
        'p',
        {
          className: 'wp-block-cover-image-text',
        },
        [
          wp.element.createElement(
            'span',
            {
              className: 'wp-block-cover-image-text-stage',
            },
            attributes.title
          )
        ]
      ),
    ]
  );

  return newElement;
}

wp.hooks.addFilter(
  'blocks.getSaveElement',
  'hephaestus/modify-get-save-element',
  transformElement
);

En gros, cela fonctionne. Je peux ajouter le bloc d’images de couverture dans l’éditeur et la sortie frontale est celle que vous souhaitez.

Mais lors de la réaccès au site en back-end, Gutenberg me donne l'erreur suivante:

  

Validation de blocage: la validation de blocage a échoué pour core/cover-image

     

Attendu:

     

<div class="wp-block-cover-image" style="background-image: url('https://xxxxxxxx/wp-content/uploads/2018/08/xxxxxxxx.jpg');"><p class="wp-block-cover-image-text"><span class="wp-block-cover-image-text-stage"></span></p></div>

     

Réel:

     

<div class="wp-block-cover-image" style="background-image: url('https://xxxxxxxx/wp-content/uploads/2018/08/xxxxxxxx.jpg');"><p class="wp-block-cover-image-text"><span class="wp-block-cover-image-text-stage">This is a test</span></p></div>

Remarque: l'URL de l'image est intentionnellement barrée

Pourquoi ai-je cette erreur de validation de bloc ici? Je pense que cela a quelque chose à voir avec l'attribut title. Mais je ne peux pas comprendre ce qui cause cela ...

De l'aide, ça vous tente?

Cordialement, Marcus

    
posée Marcus Kober 17.08.2018 - 10:48

1 réponse

4

Pas une alerte de réponse réelle

Cela ressemble à une mauvaise idée à long terme. Vous modifiez une fonctionnalité principale avec quelque chose qui n'hérite d'aucun des balises générées du bloc d'origine. Tout traitement ultérieur du bloc peut laisser supposer une hypothèse de balisage basée sur le nom du bloc, mais les hypothèses peuvent être erronées et il sera difficile de déterminer pourquoi, car le bloc porte le nom attendu.

Comme avec les widgets et les codes abrégés, si vous allez essentiellement bifurquer le bloc, vous devez simplement en créer un nouveau. La modification d'un bloc ne doit être effectuée que lorsque vous ne modifiez qu'un petit aspect de celui-ci, et peut-être même pas à ce moment-là.

(Je réalise que vous êtes peut-être en train de jouer, mais un nouveau bloc est toujours beaucoup plus compatible avec KISS, compte tenu du code que vous affichez ici)

    
réponse donnée Mark Kaplun 17.08.2018 - 12:54

Lire d'autres questions sur les étiquettes