Gutenberg-Blöcke: Das Registrieren von mehr als einem Block mit „register_block_type_from_metadata()“ löst Fehler in der Konsole aus

Lesezeit: 5 Minuten

Benutzer-Avatar
Laloptk

Ich übe, wie man ein Gutenberg-Block-Plugin erstellt. ich benutze @wordpress/create-block um ein Block-Plugin zu erstellen.

Bearbeiten: Ich habe das wp-cli-Gerüst nicht wie anfangs angegeben verwendet. Was ich schreiben wollte, ist, dass ich @wordpress/create-block verwendet habe.

Das Gerüst ist so ausgelegt, dass es nur einen Block enthält. Wenn Sie also mehr als einen Block haben möchten, müssen Sie die Struktur ändern, was nicht so schwierig ist, aber ich möchte, dass die Blöcke block.json verwenden, um Blöcke zu registrieren register_block_type_from_metadata()was ich erreicht habe, aber das Problem ist, dass wenn ich diesen Code verwende (register_block_type_from_metadata zweimal) in der PHP-Datei des Haupt-Plugins:

function blocks_boilerplate_block_init() {
    register_block_type_from_metadata( __DIR__ . '/src/blocks/example');
    register_block_type_from_metadata( __DIR__ . '/src/blocks/example2');
}
add_action( 'init', 'blocks_boilerplate_block_init' );

Um die Blöcke zu registrieren, werden die Blöcke registriert und sie funktionieren ohne Probleme, aber die Chrome-Konsole zeigt zwei Fehler.

Block “create-block/boilerplate-example” ist bereits registriert.

Block “create-block/guten-block-example2” ist bereits registriert.

Wenn ich benutze register_block_type_from_metadata() nur einmalder Fehler ist weg.

Irgendwelche Ideen, wie man die Fehler verschwinden lässt?

Benutzer-Avatar
Laloptk

Das Problem war, wenn Sie verwenden @wordpress/create-block um ein Plugin mit einem Block darin zu erstellen, und dann verwenden Sie npm start um alles auszuführen, kompiliert webpack den gesamten JavaScript-Code der Blöcke in eine einzige Datei, was in Ordnung ist und eigentlich gewünscht wird, auf diese Weise müssen Sie nicht eine Reihe von Dateien in die Warteschlange stellen. Die Datei block.json enthält eine Zeile "editorScript": "file:../build/index.js" (oder etwas Ähnliches), um die kompilierte JS-Hauptdatei einzureihen, und wenn Sie nur einen Block haben, ist diese Zeile in der Datei block.json in Ordnung, aber wenn Sie die Struktur des Plugins ändern, um mehr Blöcke einzuschließen, hat jeder Block seine eigene block.json-Datei, einschließlich der editorScript Zeile, dann werden die Blöcke mehrmals registriert, eine für jede block.json-Datei, die Sie haben, also habe ich als vorübergehende Lösung die gelöscht editorScript Linie von allen block.json Dateien außer einer, und die Fehler verschwanden, ich mochte diese Lösung nicht, weil sie die Konsistenz bricht, also habe ich den folgenden Code in die Haupt-PHP-Datei des Plugins eingefügt:

function qas_enqueue_blocks_scripts() {
    $asset_file = require plugin_dir_path( __FILE__ ) . 'build/index.asset.php';
    wp_enqueue_script( 'qas-main', plugins_url( '/build/index.js', __FILE__ ), $asset_file['dependencies'], 1.0, false);
}
add_action( 'enqueue_block_editor_assets', 'qas_enqueue_blocks_scripts');

Der obige Code stellt die Hauptdatei in die Warteschlange index.js file zum Blockeditor und holt die Dateiabhängigkeiten von /build/index.asset.php die automatisch generiert wird, wenn Sie die Anfangsbefehle ausführen, um das Plugin und den Anfangsblock zu erstellen. Wenn Sie diesen Code verwenden, müssen Sie die nicht verwenden editorScript Zeile an beliebiger Stelle, sodass Sie sie aus allen block.json-Dateien löschen können.

Eine andere Möglichkeit, dies zu lösen, besteht darin, die Webpack-Konfiguration zu ändern, um nur den Code für den spezifischen Block in die Haupt-JS-Datei zu kompilieren und dann weiter zu verwenden editorScript in jedem block.jsonaber das habe ich noch nicht probiert.

Nachdem Sie Ihr Gutenberg-Blockprojekt mit eingerichtet haben wp-cli-Gerüst und Hinzufügen der beiden neuen Blöcke könnte Ihre Projektstruktur etwa so aussehen:

- myblockname
    > build
    > node_modules
    - src
        - blocks
             - example1
                  - index.js
                  - block.json
             > example2
        index.js
myblockname.php

Ein Ansatz, um mehrere Blöcke während der Verwendung konfliktfrei laden zu lassen block.json besteht darin, jeden Block über die Hauptdatei zu importieren src/index.jsdas wp-cli erstellt zB:

src/index.js:

import './blocks/example1/';
import './blocks/example2/';

Jeder Ihrer Blöcke, (Beispiel 1 und Beispiel2) sollte eine haben index.js und block.json Datei um den Block zu definieren, zB:

src/blocks/example1/index.js:

import { registerBlockType } from '@wordpress/blocks';
import metadata from './block.json';
const { title } = metadata;

registerBlockType(name, {
    title, // required
    edit(){...}
    save(){...}
});

Wenn Sie jetzt Ihr Projekt erstellen, wird jeder der Beispielblöcke in den einzelnen kompiliert build/index.js und damit verbundene Vermögenswerte.

Wenn Sie dann die ursprüngliche Haupt-PHP-Datei verwenden, die aus erstellt wurde wp-cli Scaffold (z. B. myblockname.php), es wird das erwartete einzelne Build geladen index.js, index.asset.php, index.css usw und ermöglichen es Ihnen, viele Blöcke zu einem zu bündeln.

Ich habe diesen Ansatz für einige vergangene Gutenberg-Projekte verwendet, mit denen ich begonnen habe wp-cli um mehrere Blöcke schnell zu bündeln. Ich habe mir auch angesehen wie WordPress Gutenberg lädt die Blockbibliothek und hat die kürzlich aktualisierte gefunden WordPress-Block-API-Dokumentation hilfreich, um diesen Ansatz zu erarbeiten.

Notiz:
Diese Methode, alle Ihre Blöcke in einer Javascript-Datei zu bündeln, hat einen potenziellen Nachteil – sie werden alle geladen, auch wenn sie nicht verwendet werden. In meinem Projekt waren meine Blöcke voneinander abhängig (innerBlocks), also war es von Vorteil. Dateigröße und Ladezeit können ein Problem darstellen, je nachdem, wie viele Blöcke Sie bündeln.

Für viele Blöcke wäre ein besserer Ansatz, dass jeder Block seine eigene Asset-Datei erstellt und diese Assets dann über „editorScript“ und „script“ in bündelt block.json aber immer noch die Haupt verwenden index.js als Einstiegspunkt.

Wenn Sie immer noch den Fehler sehen, dass der Name bereits registriert ist, überprüfen Sie, ob jeder „Beispiel“-Block einen eindeutigen hat “Name” in block.json

1353950cookie-checkGutenberg-Blöcke: Das Registrieren von mehr als einem Block mit „register_block_type_from_metadata()“ löst Fehler in der Konsole aus

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy