it-swarm.com.de

Kernblock in Gutenberg verlängern

für ein projekt muss ich den core block core/cover-image erweitern. Für den ersten einfachen Versuch habe ich den folgenden Code gefunden:

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

Grundsätzlich funktioniert das. Ich kann den Cover-Image-Block im Editor hinzufügen und die Frontend-Ausgabe ist auch wie gewünscht.

Beim erneuten Zugriff auf die Site im Backend gibt mir Gutenberg jedoch den folgenden Fehler:

Blocküberprüfung: Blocküberprüfung fehlgeschlagen für core/cover-image

Erwartet:

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

Tatsächlich:

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

Hinweis: Bild-URL ist absichtlich durchgestrichen

Warum erhalte ich hier diesen Blockvalidierungsfehler? Ich denke, es hat etwas mit dem title-Attribut zu tun. Aber ich kann nicht herausfinden, was das verursacht ...

Helfen Sie jemandem?

Grüße, Marcus

4
Marcus Kober

Kein echter Antwortalarm

Das klingt nach einer langfristig schlechten Idee. Sie ändern eine Kernfunktionalität mit etwas, das keine der generierten Markups des ursprünglichen Blocks erbt. Bei einer späteren Verarbeitung des Blocks wird möglicherweise anhand des Blocknamens eine Annahme über das Markup getroffen, die Annahmen sind jedoch möglicherweise falsch, und es ist schwer zu bestimmen, warum der Block den erwarteten Namen hat.

Genau wie bei Widgets und Shortcodes sollten Sie einen neuen Block erstellen, wenn Sie im Grunde genommen den Block teilen wollen. Das Ändern eines Blocks sollte nur erfolgen, wenn Sie nur einen kleinen Teil davon ändern, und vielleicht sogar dann nicht.

(Mir ist klar, dass Sie vielleicht nur herumspielen, aber ein neuer Block ist viel besser KISS kompatibel, wenn man den Code bedenkt, den Sie hier anzeigen.)

4
Mark Kaplun