Registrieren Sie ein Blockmuster im WordPress-Blockeditor (Gutenberg)

Blockmuster im WordPress-Blockeditor (Gutenberg) sind ein leistungsstarkes Feature, mit dem Sie mit sehr wenig Aufwand abwechslungsreiche Layouts erstellen können.

Mit register_block_patternkönnen Sie sehr schnell ein Blockmuster für Sie oder Ihre Kunden erstellen.

Voraussetzungen

• WordPress-Installation
• Code-Editor

Erstellen Sie Ihr Blockmuster

Sie erstellen Blockmuster aus den Blöcken, die Sie auf Ihrer Website registriert haben. Dies können Kernblöcke oder eine beliebige Anzahl von Drittanbieter- oder benutzerdefinierten Blöcken sein.

Beginnen Sie mit der Verwendung des WordPress-Editors, um ein Blocklayout zu erstellen. Sie können die Einstellungen verwenden, um dies so komplex oder so einfach zu gestalten, wie Sie möchten.

In diesem Beispiel werden wir es einfach halten und einfach ein Blockmuster erstellen, das wie folgt strukturiert ist:

• Gruppenblock
  • Überschrift
  • Absatz
  • Säulen
    • Spalte 1
      • Überschrift
      • Absatz
    • Spalte 2
      • Überschrift
      • Absatz

Sobald Sie Ihr Blockmuster erstellt haben, kopieren Sie einfach den Code, der für Sie generiert wurde.

Kopieren Sie den Blockmustercode

Gehen Sie dazu zu den drei Punkten oben rechts im Editor (bezeichnet mit Optionen) und wählen Sie „Code-Editor“. Dadurch wird der HTML-Code hinter dem gerade erstellten Blockmuster angezeigt.

Kopieren Sie diesen Code in Ihre Zwischenablage.

Registrieren Sie das Blockmuster

Fügen Sie diesen Block-Editor-Code in Ihren Code-Editor ein. Wenn Sie sich nicht sicher sind, wo, können Sie die functions.phpIhres Themas verwenden.

Stellen Sie sicher, dass Sie es an eine Variable übergeben, indem Sie einfache Anführungszeichen (') um den eingefügten Text setzen, etwa so:

$block_pattern_content = '
<div class="wp-block-group"><div class="wp-block-group__inner-container">
<h2>Example Block Pattern</h2>

<p>Lorem ipsum dolor sit amet labore cras venenatis.</p>

<div class="wp-block-columns">
<div class="wp-block-column">
<h3>Sub Heading 1</h3>

<p>Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.</p>
</div>

<div class="wp-block-column">
<h3>Sub Heading 2</h3>

<p>Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.</p>
</div>
</div>
</div></div>
';

Abhängig von der Komplexität Ihres Blockmusters müssen Sie möglicherweise die Zeichen maskieren.

Als nächstes müssen wir dies in die register_block_patternFunktion übergeben:

register_block_pattern(
    'wholesomecode/example-block-pattern',
    [
        'categories'    => [
            'text',
        ],
        'content'       => $block_pattern_content,
        'description'   => 'An example block pattern',
        'keywords'      => 'example',
        'title'         => 'Example Block Pattern',
        'viewportWidth' => 800,
    ],
);

Das ist es, das Blockmuster wird registriert.

Zusammenbruchregister_block_pattern

• Namensraum – (wholesomecode/example-block-pattern) ist der Namensraum des Blockmusters. Stellen Sie sicher, dass dies für Ihr Blockmuster eindeutig ist. Wenn wir jemals die Registrierung des Blockmusters aufheben müssen, ist dies die Zeichenfolge, die wir benötigen.
• Kategorien — Dies ist die Blockmusterkategorie, in der das Blockmuster angezeigt wird, wenn wir unser Blockmuster einfügen. Wir können auch unsere eigenen Kategorien hinzufügen.
• Inhalt – Dies ist HTML, das das Blockmuster generiert. Dieses Beispiel verwendet die Variable, die wir im Editor erstellt haben.
• Beschreibung — Eine Beschreibung des Blockmusters.
• Schlüsselwörter — Schlüsselwörter, die verwendet werden können, um nach dem Blockmuster zu suchen.
• Titel — Der Titel des Blockmusters.
• Ansichtsfensterbreite — Das Ansichtsfenster des Blockmusters, das für den Vorschaubereich verwendet wird.

Fügen Sie das Blockmuster ein

Um das Blockmuster einzufügen, verwenden Sie einfach das Pluszeichen oben links im Editor und wählen Sie Blockmuster aus.

Wählen Sie die Kategorie aus, in der Sie Ihr Muster registriert haben, und es sollte erscheinen.

Einfügen des Blockmusters

Alternativ können Sie nach den von Ihnen registrierten Schlüsselwörtern suchen.

Um eine Blockkategorie zu registrieren, verwenden Sie einfach die register_block_pattern_categoryFunktion.

register_block_pattern_category(
    'my-client',
    [
        'label' => esc_html__( 'My Client Patterns', 'wholesome-plugin' ),
    ]
);

Dann können Sie die Kategorie, die Sie gerade registriert haben, wie folgt in Ihrem Blockmustercode verwenden:

register_block_pattern(
    'wholesomecode/example-block-pattern',
    [
        'categories'    => [
            'my-client',
        ],
        'content'       => $block_pattern_content,
        'description'   => 'An example block pattern',
        'keywords'      => 'example',
        'title'         => 'Example Block Pattern',
        'viewportWidth' => 800,
    ],
);

Wenn Sie jetzt Ihr Blockmuster finden, befindet es sich in Ihrer benutzerdefinierten Kategorie:

Benutzerdefinierte Blockmusterkategorie

Jetzt können Sie alle benutzerdefinierten Blockmuster, die Sie gerade für Ihren Kunden erstellt haben, an einem Ort zusammenfassen.

• Brauchen Sie etwas statischeres? Versuchen Sie stattdessen, eine Blockvorlage zu registrieren
• Benötigen Sie etwas, das für untergeordnete Blöcke gilt? Versuchen Sie , eine InnerBlocks-Vorlage zu registrieren