web-dev-qa-db-fra.com

Étendre le bloc central à Gutenberg

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
);

Fondamentalement cela fonctionne. Je peux ajouter le bloc d'image de couverture dans l'éditeur et la sortie frontale est celle que vous souhaitez.

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

Blocage de la validation: la validation du bloc 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é

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

Aide, quelqu'un?

Cordialement, Marcus

javascripthooksblock-editor
4
Marcus Kober

Pas une vraie alerte de réponse

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 supposer que le marquage est basé sur le nom du bloc, mais les hypothèses peuvent être erronées et il sera difficile de déterminer pourquoi, car le bloc a le nom attendu.

Tout comme avec les widgets et les codes courts, 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 me rends bien compte que vous jouez peut-être, mais un nouveau bloc est beaucoup plus compatible KISS compte tenu du code que vous montrez ici)

4
Mark Kaplun