In der Gutenberg-Ära ist der Gestaltungsprozess nicht mehr strikt an WordPress-Themes gebunden. Das CMS bietet den Nutzern von Haus aus alle Designwerkzeuge, die sie brauchen, um ein großartiges Website-Layout zu erstellen, und das Theme zielt darauf ab, noch mehr Bau- und Designwerkzeuge hinzuzufügen.

Blockvorlagen sind eine Funktion, die noch mehr Möglichkeiten für den Aufbau von Websites eröffnet. Laut dem Block Editor Handbook:

Eine Blockvorlage ist definiert als eine Liste von Blockelementen. Solche Blöcke können vordefinierte Attribute und Platzhalterinhalte haben und statisch oder dynamisch sein. Blockvorlagen ermöglichen es, einen Standard-Ausgangszustand für eine Editor-Sitzung festzulegen.

Mit anderen Worten: Blockvorlagen sind vorgefertigte Sammlungen von Blöcken, die dazu dienen, einen Standardzustand dynamisch auf dem Client festzulegen.

👉 Blockvorlagen unterscheiden sich von Vorlagendateien.

Vorlagendateien sind PHP-Dateien wie index.php, page.php und single.php und funktionieren in der WordPress-Vorlagenhierarchie sowohl bei klassischen als auch bei Blockvorlagen auf die gleiche Weise. Bei klassischen Themes sind diese Dateien in PHP und HTML geschrieben. In Block-Themes bestehen sie vollständig aus Blöcken.

👉 Blockvorlagen unterscheiden sich von Blockmustern.

Blockmuster müssen manuell zu deinen Seiten hinzugefügt werden, während Blockvorlagen automatisch das anfängliche Layout und die Standardeinstellungen bereitstellen, wenn du oder deine Teammitglieder einen neuen Beitrag erstellen.

Du kannst auch bestimmte Blockvorlagen an deine benutzerdefinierten Beitragstypen binden und einige Blöcke oder Funktionen sperren, um die Benutzer/innen zu zwingen, deine Standardeinstellungen zu verwenden oder Fehler zu vermeiden.

Du hast mehrere Möglichkeiten, Blockvorlagen zu erstellen. Du kannst die Block-API verwenden, um eine Reihe von Blocktypen per PHP zu deklarieren, oder du kannst einen benutzerdefinierten Blocktyp mit der Komponente InnerBlocks erstellen.

Lass uns eintauchen!

Wie man eine Blockvorlage mit PHP erstellt

Wenn du ein Entwickler der alten Schule bist, kannst du eine benutzerdefinierte Blockvorlage mithilfe eines Plugins oder der functions.php deines Themes erstellen. Wenn du dich für ein Plugin entscheidest, öffne deinen bevorzugten Code-Editor, erstelle eine neue PHP-Datei und füge den folgenden Code ein:

<?php
/*
 * Plugin Name:       My Block Templates
 * Plugin URI:        https://example.com/
 * Description:       An example plugin
 * Version:           1.0
 * Requires at least: 5.5
 * Requires PHP:      8.0
 * Author:            Your name
 * Author URI:        https://author.example.com/
 * License:           GPL v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Update URI:        https://example.com/my-plugin/
 */

function myplugin_register_my_block_template() {
	$post_type_object = get_post_type_object( 'post' );
	$post_type_object->template = array(
		array( 'core/image' ),
		array( 'core/heading' ),
		array( 'core/paragraph' )
	);
}
add_action( 'init', 'myplugin_register_my_block_template' );

In den obigen Code, get_post_type_object wird ein Beitragstyp nach seinem Namen abgefragt.

Speichere deine Datei im Ordner wp-content/plugins, rufe den Bildschirm Plugins in deinem WordPress-Dashboard auf und aktiviere das Plugin My Block Templates.

Wenn du jetzt einen neuen Beitrag erstellst, startet der Editor automatisch deine Blockvorlage mit einem Bildblock, einer Überschrift und einem Absatz.

Eine automatisch im Beitragseditor geladene Blockvorlage
Eine automatisch im Beitragseditor geladene Blockvorlage

Du kannst auch ein Array von Einstellungen für jeden Block hinzufügen und auch verschachtelte Strukturen von Blöcken erstellen. Die folgende Funktion erstellt eine erweiterte Blockvorlage mit inneren Blöcken und Einstellungen:

function myplugin_register_my_block_template() {

	$block_template = array(
		array( 'core/image' ),
		array( 'core/heading', array(
			'placeholder'	=> 'Add H2...',
			'level'			=> 2
		) ),
		array( 'core/paragraph', array(
			'placeholder'	=> 'Add paragraph...'
			
		) ),
		array( 'core/columns', 
			array(), 
			array( 
				array( 'core/column',
					array(),
					array(
						array( 'core/image' )
					)
				), 
				array( 'core/column',
					array(),
					array(
						array( 'core/heading', array(
							'placeholder'	=> 'Add H3...',
							'level'			=> 3
						) ),
						array( 'core/paragraph', array(
							'placeholder'	=> 'Add paragraph...'
						) )
					) 
				)
			) 
		)
	);
	$post_type_object = get_post_type_object( 'post' );
	$post_type_object->template = $block_template;
}
add_action( 'init', 'myplugin_register_my_block_template' );

Die Ausgabe des obigen Codes siehst du in der folgenden Abbildung:

Eine erweiterte Blockvorlage
Eine erweiterte Blockvorlage

Bis jetzt haben wir nur die Kernblöcke verwendet. Du kannst aber auch benutzerdefinierte Blöcke oder Blockmuster in deine Blockvorlagen einfügen, wie im folgenden Beispiel gezeigt:

function myplugin_register_my_block_template() {
	$post_type_object = get_post_type_object( 'page' );
	$post_type_object->template = array(
		array( 'core/pattern', array(
			'slug' => 'my-plugin/my-block-pattern'
		) ) 
	);
}
add_action( 'init', 'myplugin_register_my_block_template' );

Es gibt keinen großen Unterschied, wenn du eine Standard-Blockvorlage für einen bereits registrierten benutzerdefinierten Beitragstyp erstellen möchtest. Ändere einfach den Beitragstyp von get_post_type_object in den Namen deines benutzerdefinierten Beitragstyps, wie im folgenden Beispiel gezeigt:

<?php
function myplugin_register_my_block_template() {
	$post_type_object = get_post_type_object( 'book' );
	$post_type_object->template = array(
		array( 'core/image' ),
		array( 'core/heading' ),
		array( 'core/paragraph' )
	);
}
add_action( 'init', 'myplugin_register_my_block_template' );

Jetzt, wo du weißt, wie du Blockvorlagen erstellst, können wir weitermachen und weitere Anwendungsfälle erkunden. Lass uns ein bisschen tiefer eintauchen.

Blockvorlagen mit benutzerdefinierten Beitragstypen

Wie wir bereits erwähnt haben, kannst du eine Blockvorlage an einen benutzerdefinierten Beitragstyp anhängen. Du kannst dies tun, nachdem dein benutzerdefinierter Beitragstyp bereits registriert wurde, aber du kannst es auch vorziehen, eine Blockvorlage bei der Registrierung des benutzerdefinierten Beitragstyps zu definieren.

In diesem Fall kannst du die Argumente template und template_lock der register_post_type Funktion verwenden:

function myplugin_register_book_post_type() {
	$args = array(
		'label' => esc_html__( 'Books' ),
		'labels' => array(
			'name' => esc_html__( 'Books' ),
			'singular_name' => esc_html__( 'Book' ),
		),
		'public' => true,
		'publicly_queryable' => true,
		'show_ui' => true,
		'show_in_rest' => true,
		'rest_namespace' => 'wp/v2',
		'has_archive' => true,
		'show_in_menu' => true,
		'show_in_nav_menus' => true,
		'supports' => array( 'title', 'editor', 'thumbnail' ),
		'template' => array(
			array( 'core/paragraph', array(
				'placeholder'	=> 'Add paragraph...'
			) ),
			array( 'core/columns', 
				array(), 
				array( 
					array( 'core/column',
						array(),
						array(
							array( 'core/image' )
						)
					), 
					array( 'core/column',
						array(),
						array(
							array( 'core/heading', array(
								'placeholder'	=> 'Add H3...',
								'level'			=> 3
							) ),
							array( 'core/paragraph', array(
								'placeholder'	=> 'Add paragraph...'
							) )
						) 
					)
				)
			)
		)
	);
	register_post_type( 'book', $args );
}
add_action( 'init', 'myplugin_register_book_post_type' );

Und das war’s. Die Abbildung unten zeigt die Blockvorlage in der Benutzeroberfläche des Editors für den benutzerdefinierten Beitragstyp Buch.

Eine Blockvorlage für einen benutzerdefinierten Beitragstyp
Eine Blockvorlage für einen benutzerdefinierten Beitragstyp

Wenn du mit dem Layout fertig bist, kannst du mit den Blockeinstellungen herumspielen, um das Verhalten und das Aussehen deiner Blockvorlage fein abzustimmen.

Feinabstimmung der Blockvorlage mit Blockattributen

Wir haben eine Blockvorlage als eine Liste von Blöcken definiert. Jedes Element in der Liste sollte ein Array sein, das den Blocknamen und ein Array mit optionalen Attributen enthält. Bei verschachtelten Arrays möchtest du vielleicht ein drittes Array für untergeordnete Blöcke hinzufügen.

Eine Vorlage mit einem Spaltenblock kann wie folgt dargestellt werden:

$template = array( 'core/columns', 
	// attributes
	array(), 
	// nested blocks
	array(
		array( 'core/column' ),
		array( 'core/column' ) 
	) 
);

Wie oben erwähnt, ist das zweite Array in der Liste ein optionales Array mit Blockattributen. Mit diesen Attributen kannst du das Aussehen deiner Vorlage anpassen, damit du oder deine Nutzer sich auf den Inhalt des Beitrags konzentrieren können, ohne sich um das Seitenlayout und das Design zu kümmern.

Zu Beginn kannst du mit dem Block-Editor eine Struktur von Blöcken erstellen, die du als Referenz für deine Vorlage verwenden kannst.

Ein Blocklayout im Blockeditor
Ein Blocklayout im Blockeditor

Füge deine Blöcke hinzu, passe das Layout und die Stile an und wechsle dann in den Code-Editor, um die Blockbegrenzer zu finden.

Das Blockbegrenzungszeichen eines Columns-Blocks
Das Blockbegrenzungszeichen eines Columns-Blocks

Blockbegrenzer speichern Blockeinstellungen und Stile in Schlüssel/Wert-Paaren. Du kannst die Schlüssel und Werte einfach aus dem Blockmarkup kopieren und einfügen, um dein Attributfeld aufzufüllen:

$template = array( 'core/columns', 
	array(
		'verticalAlignment'	=> 'center',
		'align'				=> 'wide',
		'style'				=> array( 
			'border'	=> array(
				'width'	=> '2px',
				'radius'	=> array(
					'topLeft'		=> '12px', 
					'topRight'		=> '12px', 
					'bottomLeft'	=> '12px', 
					'bottomRight'	=> '12px'
				)
			)
		),
		'backgroundColor' => 'tertiary'
	),
	array(
		array( 'core/column' ),
		array( 'core/column' ) 
	) 
);

Wiederhole den Vorgang für jeden Block in der Vorlage und du bist fertig.

$template = array(
	array( 'core/paragraph', array(
		'placeholder'	=> 'Add paragraph...'
	) ),
	array( 'core/columns', 
		array(
			'verticalAlignment'	=> 'center',
			'align'				=> 'wide',
			'style'				=> array( 
				'border'	=> array(
					'width'		=> '2px',
					'radius'	=> array(
						'topLeft'		=> '12px', 
						'topRight'		=> '12px', 
						'bottomLeft'	=> '12px', 
						'bottomRight'	=> '12px'
					)
				)
			),
			'backgroundColor' => 'tertiary',
			'lock' => array(
				'remove'	=> true,
				'move'		=> true
			)
		), 
		array( 
			array( 'core/column',
				array( 'verticalAlignment'	=> 'center' ),
				array(
					array( 'core/image', 
						array(
							'style'	=> array( 'border' => array( 'radius' => '8px' ) ) 
						) 
					)
				)
			), 
			array( 'core/column',
				array( 'verticalAlignment'	=> 'center' ),
				array(
					array( 'core/heading', array(
						'placeholder'	=> 'Add H3...',
						'level'			=> 3
					) ),
					array( 'core/paragraph', array(
						'placeholder'	=> 'Add paragraph...'
					) )
				) 
			)
		)
	)
);

Blöcke sperren

Du kannst bestimmte Blöcke oder alle Blöcke in deiner Vorlage sperren, indem du die Eigenschaft template_lock der $post_type_object verwendest.

Das Sperren von Vorlagen kann sehr nützlich sein, wenn du einen Blog mit mehreren Autoren hast und verhindern willst, dass alle oder bestimmte Nutzer das Layout deiner Blockvorlage ändern.

Im folgenden Beispiel sperren wir alle Blöcke in der Blockvorlage:

function myplugin_register_my_block_template() {
	$post_type_object = get_post_type_object( 'post' );
	$post_type_object->template = array(
		array( 'core/image' ),
		array( 'core/heading' ),
		array( 'core/paragraph' )
	);
	$post_type_object->template_lock = 'all';
}
add_action( 'init', 'myplugin_register_my_block_template' );

Gesperrte Blöcke werden in der Blocksymbolleiste und in der Listenansicht mit einem Schlosssymbol angezeigt:

Ein gesperrter Überschriftenblock
Ein gesperrter Überschriftenblock

Du kannst die Blocksperre über das Menü Optionen in der Blocksymbolleiste aufheben.

Entsperren eines Blocks
Entsperren eines Blocks

Wenn du auf Entsperren klickst, erscheint ein modales Popup, in dem du die Bewegung aktivieren/deaktivieren, das Entfernen verhindern oder beides kannst:

Optionen zum Sperren
Optionen zum Sperren

template_lock kann einen der folgenden Werte annehmen:

  • all – Verhindert, dass Benutzer neue Blöcke hinzufügen, bestehende Blöcke verschieben und entfernen können
  • insert – Verhindert, dass Benutzer neue Blöcke hinzufügen und bestehende Blöcke entfernen
  • contentOnly – Benutzer können nur den Inhalt der Blöcke bearbeiten, die in der Vorlage enthalten sind. Beachte, dass contentOnly nur auf der Ebene des Musters oder der Vorlage verwendet werden kann und mit Code verwaltet werden muss. (Siehe auch APIs sperren).
Template_lock einstellen, um zu verhindern, dass Vorlagenblöcke entfernt werden
Template_lock einstellen, um zu verhindern, dass Vorlagenblöcke entfernt werden

Wenn du bestimmte Blöcke sperren willst, kannst du das Attribut lock für jeden Block verwenden:

function myplugin_register_my_block_template() {
	$post_type_object = get_post_type_object( 'post' );
	$post_type_object->template = array(
		array( 'core/image' ),
		array( 'core/heading' ),
		array( 'core/paragraph', array(
			'lock' => array(
				'remove'	=> true,
				'move'		=> true
			)
		) )
	);
}
add_action( 'init', 'myplugin_register_my_block_template' );

Das Attribut lock kann einen der folgenden Werte annehmen:

  • remove: Verhindert, dass Nutzer einen Block entfernen können.
  • move: Verhindert, dass Benutzer einen Block verschieben.

Du kannst auch lock in Verbindung mit template_lock verwenden, um das Verhalten der Blöcke in deiner Blockvorlage fein abzustimmen. Im folgenden Beispiel sperren wir alle Blöcke außer der Überschrift:

function myplugin_register_my_block_template() {
	$post_type_object = get_post_type_object( 'post' );
	$post_type_object->template = array(
		array( 'core/image' ),
		array( 'core/heading', array(
			'lock' => array(
				'remove'	=> false,
				'move'		=> false
			) 
		) ),
		array( 'core/paragraph' )
	);
	$post_type_object->template_lock = 'all';
}
add_action( 'init', 'myplugin_register_my_block_template' );

Die folgende Abbildung zeigt die Blockvorlage mit gesperrten und nicht gesperrten Blöcken:

Eine Blockvorlage mit gesperrten und ungesperrten Blöcken
Eine Blockvorlage mit gesperrten und ungesperrten Blöcken

Blockentwickler können auch das Attribut lock in der Blockdefinition auf der Ebene attributes verwenden (siehe auch Individuelle Blocksperre).

Benutzer am Entsperren von Blöcken hindern

Wenn du den bisher in diesem Artikel besprochenen Code getestet hast, ist dir vielleicht aufgefallen, dass du die in deiner Vorlage enthaltenen Blöcke (oder jeden anderen Block) über die Benutzeroberfläche des Editors entsperren kannst. Standardmäßig können alle Benutzer mit Bearbeitungsrechten Blöcke sperren oder entsperren und dabei deine Vorlageneinstellungen umgehen.

Du kannst steuern, ob Blöcke gesperrt oder entsperrt werden können, indem du den block_editor_settings_all Filter.

Der Filter sendet jede Einstellung an den initialisierten Editor. Das bedeutet, dass jede Editoreinstellung, die bei der Initialisierung zur Konfiguration des Editors verwendet wird, von einem PHP-WordPress-Plugin gefiltert werden kann, bevor sie gesendet wird.

Die Callback-Funktion, die du mit diesem Filter verwendest, benötigt zwei Parameter:

  • $settings: Ein Array mit Editoreinstellungen.
  • $context: Eine Instanz der Klasse WP_Block_Editor_Context. Ein Objekt, das Informationen über einen gerenderten Blockeditor enthält.

Du musst $settings['canLockBlocks'] filtern, indem du es auf true oder false setzt, wie im folgenden Beispiel gezeigt:

add_filter( 'block_editor_settings_all', 
	function( $settings, $context ) {
		if ( $context->post && 'book' === $context->post->post_type ) {
			$settings['canLockBlocks'] = false;
		}
		return $settings;
	}, 10, 2
);

Du kannst bestimmte Benutzerrollen von der Sperrung/Entsperrung von Blöcken ausschließen, indem du eine bedingte Prüfung der aktuellen Benutzerfähigkeiten durchführst.

Im folgenden Beispiel prüfen wir, ob der aktuelle Benutzer die Beiträge anderer bearbeiten kann (mit anderen Worten, ob die aktuelle Benutzerrolle Editor oder höher ist):

add_filter( 'block_editor_settings_all', 
	function( $settings, $context ) {
		if ( $context->post && 'book' === $context->post->post_type ) {
			$settings['canLockBlocks'] = current_user_can( 'edit_others_posts' );
		}
		return $settings;
	}, 10, 2
);

In den folgenden Bildern wird der Ausgangszustand des Editors für einen Admin und einen Autor verglichen. Erstens: Admin:

Der Ausgangszustand des Editors für einen Admin-Nutzer
Der Ausgangszustand des Editors für einen Admin-Nutzer

Nun zum Autor:

Der Ausgangszustand des Editors für einen Autor
Der Ausgangszustand des Editors für einen Autor

Und du kannst jede Bedingung für den aktuellen Benutzer überprüfen. Im folgenden Beispiel verhindern wir, dass ein bestimmter Benutzer Blöcke sperren/entsperren kann:

add_filter( 'block_editor_settings_all', 
	function( $settings, $context ) {
		$user = wp_get_current_user();
		if ( in_array( $user->user_email, [ '[email protected]' ], true ) ) {
			$settings['canLockBlocks'] = false;
		}
		return $settings;
	}, 10, 2
);

Du kannst weitere Bedingungen kombinieren, um genau zu bestimmen, wer Blöcke in deiner Vorlage sperren/freigeben darf und wer nicht. Das ist ein Aspekt der sogenannten kuratierten Erfahrung.

Aber warte. Hast du schon versucht, den Inhalt deines Beitrags mit dem Code-Editor zu bearbeiten? Dann wirst du vielleicht überrascht sein, dass Nutzer/innen, die keine Blöcke in der Benutzeroberfläche freischalten dürfen, den Inhalt trotzdem mit dem Code-Editor ändern können.

Deaktivieren des Code-Editors für bestimmte Benutzerrollen

Standardmäßig haben alle Nutzer, die Inhalte bearbeiten können, Zugriff auf den Code-Editor. Dadurch könnten deine Sperreinstellungen außer Kraft gesetzt werden und einige Nutzer könnten dein Vorlagenlayout ruinieren oder löschen.

Du kannst auch block_editor_settings_all verwenden, um die codeEditingEnabled Einstellung so einzustellen, dass bestimmte Benutzerrollen keinen Zugriff auf den Code-Editor haben. Hier ist der Code:

add_filter( 'block_editor_settings_all', 
	function( $settings, $context ) {
		if ( $context->post && 'book' === $context->post->post_type ) {
			$settings['canLockBlocks'] = current_user_can( 'edit_others_posts' );
			$settings['codeEditingEnabled'] = current_user_can( 'edit_others_posts' );
		}
		return $settings;
	}, 10, 2
);

Mit diesem Code können Benutzer, die nicht über edit_others_posts verfügen, nicht auf den Code-Editor zugreifen. Das Bild unten zeigt die Optionsleiste für einen Autor.

Die Optionen-Symbolleiste für eine Benutzerrolle ohne Zugriff auf den Code-Editor
Die Optionen-Symbolleiste für eine Benutzerrolle ohne Zugriff auf den Code-Editor

Das ist alles, was du wissen musst, um Blockvorlagen mit PHP zu erstellen. Wenn du ein Gutenberg-Blockentwickler bist und gerne mit JavaScript arbeitest, wählst du vielleicht lieber einen anderen Ansatz.

Wie man eine Vorlage mit JavaScript erstellt

Das Hinzufügen einer Blockvorlage zu einem Beitrag funktioniert anders, wenn du dich für JavaScript entscheidest. Du kannst immer noch eine Vorlage erstellen, aber du musst einen benutzerdefinierten Block erstellen und die Komponente InnerBlocks verwenden, wie in unserer Anleitung zur Entwicklung von Gutenberg-Blöcken beschrieben.

InnerBlocks exportiert zwei Komponenten, die in Blockimplementierungen verwendet werden können, um verschachtelte Blockinhalte zu ermöglichen. – Quelle: InnerBlocks

Wie funktioniert das?

Du kannst InnerBlocks in deinen benutzerdefinierten Blöcken genauso verwenden wie jede andere Gutenberg-Komponente.

Zuerst musst du sie zusammen mit anderen Abhängigkeiten aus einem Paket einbinden:

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';

Als Nächstes definierst du die Eigenschaften von InnerBlocks. Im folgenden Beispiel deklarieren wir eine Konstante TEMPLATE, die wir dann verwenden, um den Wert für die Eigenschaft template des Elements InnerBlocks festzulegen:

const TEMPLATE = [
	[ 'core/paragraph', { 'placeholder': 'Add paragraph...' } ],
	[ 'core/columns', { verticalAlignment: 'center' }, 
		[
			[ 
				'core/column', 
				{ templateLock: 'all' }, 
				[
					[ 'core/image' ]
				]
			],
			[ 
				'core/column', 
				{ templateLock: 'all' }, 
				[
					[ 
						'core/heading', 
						{'placeholder': 'Add H3...', 'level': 3}
					], 
					[ 
						'core/paragraph', 
						{'placeholder': 'Add paragraph...'} 
					]
				], 
			]
		]
	]
];
registerBlockType( metadata.name, {
	title: 'My Template',
	category: 'widgets',
	edit: ( props ) => {
		return(
			<div>
				<InnerBlocks
					template={ TEMPLATE }
					templateLock="insert"
				/>
			</div>
		)
	},
	save() {
		const blockProps = useBlockProps.save();
		return(
			<div { ...blockProps }>
				<InnerBlocks.Content />
			</div>
		)
	}
} );

Dieser Code ist ganz einfach. Du wirst feststellen, dass wir das Attribut templateLock zweimal verwendet haben, zuerst auf der Blockebene und dann innerhalb des InnerBlocks Elements. Die vollständige Liste der verfügbaren Requisiten findest du in der Referenz InnerBlocks und im Block Editor Handbook.

Probiere es jetzt selbst aus.

Erstelle zunächst eine lokale WordPress-Installation mit DevKinsta oder einer anderen lokalen Entwicklungsumgebung.

Starte dann dein Kommandozeilentool, navigiere zu deinem Plugins-Ordner und führe den folgenden Befehl aus:

npx @wordpress/create-block template-block

Du kannst den Namen des Blocks so ändern, wie du willst. Wenn du alle Aspekte deines Startblocks kontrollieren möchtest, befolge einfach die Anweisungen in unserem Leitfaden zur Blockentwicklung.

Sobald die Installation abgeschlossen ist, führe die folgenden Befehle aus:

cd template-block
npm start

Starte dein WordPress-Admin-Dashboard und navigiere zum Bildschirm Plugins. Finde dein Template Block Plugin und aktiviere es.

Öffne in deinem bevorzugten Code-Editor die Datei index.js, die du im Ordner src findest. Kopiere den obigen Code und füge ihn ein, speichere deine index.js und erstelle wieder im WordPress-Dashboard einen neuen Beitrag oder eine neue Seite.

Öffne den Block-Inserter und scrolle nach unten zum Abschnitt Widgets. Dort solltest du deinen eigenen Block finden.

Ein benutzerdefinierter Block im Block-Inserter
Ein benutzerdefinierter Block im Block-Inserter

Füge ihn zu deinem Beitrag hinzu, passe den Inhalt an und speichere den Beitrag.

Listenansicht einer benutzerdefinierten Vorlage
Listenansicht einer benutzerdefinierten Vorlage

Wenn du zum Code-Editor wechselst, siehst du das folgende Markup:

<!-- wp:create-block/template-block -->
<div class="wp-block-create-block-template-block"><!-- wp:paragraph {"placeholder":"Add paragraph..."} -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"templateLock":"all"} -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"templateLock":"all"} -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"placeholder":"Add H3..."} -->
<h3 class="wp-block-heading"></h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"placeholder":"Add paragraph..."} -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:create-block/template-block -->

Sieh dir nun das Ergebnis in deinem Lieblingsbrowser an. Wenn das Aussehen deines Blocks verbessert werden soll, kannst du einfach die Stile in deiner style.scss-Datei ändern.

Wenn du mit deinen Anpassungen zufrieden bist, beende den Prozess und führe npm run build aus. Alle Dateien deines Projekts werden komprimiert und stehen in dem neuen Build-Ordner für die Produktion zur Verfügung.

Das ist einfach und leistungsstark, oder?

Jetzt kannst du mit wenigen Klicks fortgeschrittene Vorlagen mit Blöcken erstellen, die du in deine Inhalte einbauen kannst.

Zusammenfassung

Wenn du eine Blockvorlage zu deinen Beiträgen oder benutzerdefinierten Beitragstypen hinzufügst, kannst du die Erstellung und Bearbeitung von Inhalten auf deiner WordPress-Website erheblich beschleunigen und verbessern. Blockvorlagen sind besonders nützlich für Websites mit mehreren Nutzern, auf denen mehrere Nutzer Inhalte erstellen können und die sich an das gleiche Format halten müssen.

Auf diese Weise kannst du auch einheitliche Layouts erstellen, ohne dass du jedes Mal, wenn du einen neuen Beitrag erstellst, manuell ein Blockmuster hinzufügen musst. Denk an eine Rezensions- oder Rezept-Website, bei der jede Seite dieselbe Struktur einhalten sollte.

Durch die Kombination der Kenntnisse, die du bei der Erstellung von statischen oder dynamischen benutzerdefinierten Blöcken, Blockmustern und Blockvorlagen erworben hast, wirst du in der Lage sein, immer die effizienteste und effektivste Lösung für den Aufbau jeder Art von WordPress-Website zu finden.

Jetzt liegt es an dir. Hast du dich schon mit Blockvorlagen beschäftigt? Für welchen Anwendungsfall findest du sie am geeignetsten? Bitte teile deine Erfahrungen in den Kommentaren unten.

Carlo Daniele Kinsta

Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.