So erstellen Sie Block-Theme-Muster in WordPress 6.0

Avatar of Ganesh Dahal
Ganesh Dahal am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Block-Muster, auch häufig als Abschnitte bezeichnet, wurden in WordPress 5.5 eingeführt, um Benutzern das Erstellen und Teilen vordefinierter Blocklayouts im Musterverzeichnis zu ermöglichen. Das Verzeichnis ist die Heimat einer breiten Palette kuratierter Muster, die von der WordPress-Community entworfen wurden. Diese Muster sind im einfachen Kopier-und-Einfüge-Format erhältlich, erfordern keine Programmierkenntnisse und sind somit eine große Zeitersparnis für Benutzer.

Trotz vieler Artikel zu Mustern mangelt es an umfassenden und aktuellen Artikeln zur Mustererstellung, die die neuesten erweiterten Funktionen abdecken. Dieser Artikel zielt darauf ab, diese Lücke zu füllen, mit einem Fokus auf die neuesten erweiterten Funktionen wie das Erstellen von Mustern ohne Registrierung und bietet eine aktuelle Schritt-für-Schritt-Anleitung zur Erstellung und Verwendung in Block-Themes für Anfänger und erfahrene Autoren.

Seit der Einführung von WordPress 5.9 und dem Standard-Theme Twenty Twenty-Two (TT2) hat die Verwendung von Block-Mustern in Block-Themes zugenommen. Ich bin ein großer Fan von Block-Mustern und habe sie in meinen Block-Themes erstellt und verwendet.

Das neue WordPress 6.0 bietet drei wichtige Muster-Funktionserweiterungen für Autoren

  • Musterregistrierung über den Ordner /patterns (ähnlich der Registrierung von /parts, /templates und /styles).
  • Registrierung von Mustern aus dem öffentlichen Musterverzeichnis über theme.json.
  • Hinzufügen von Mustern, die dem Benutzer beim Erstellen einer neuen Seite angeboten werden können.

In einem einführenden Video über WordPress 6.0 hebt Automattic Product Liaison Ann McCathy einige neu erweiterte Musterfunktionen (ab Minute 15:00) hervor und bespricht zukünftige Pläne zur Mustererweiterung — dazu gehören Muster als Abschnittselemente, Optionen zum Auswählen eines Musters bei der Seitenerstellung, Integration der Musterverzeichnissuche und mehr.

Voraussetzungen

Der Artikel geht davon aus, dass die Leser grundlegende Kenntnisse der WordPress Full Site Editing (FSE)-Oberfläche und von Block-Themes haben. Das Block Editor Handbook und die Website Full Site Editing bieten die aktuellsten Tutorial-Anleitungen, um alle FSE-Funktionen zu erlernen, einschließlich der in diesem Artikel besprochenen Block-Themes und Muster.

Abschnitt 1: Sich entwickelnde Ansätze zur Erstellung von Block-Mustern

Der ursprüngliche Ansatz zur Erstellung von Block-Mustern erforderte die Verwendung der Block-Pattern-API entweder als benutzerdefiniertes Plugin oder direkt registriert in der functions.php-Datei, um sie mit einem Block-Theme zu bündeln. Das neu veröffentlichte WordPress 6.0 führte mehrere neue und erweiterte Funktionen für die Arbeit mit Mustern und Themes ein, einschließlich der Musterregistrierung über einen /patterns-Ordner und eines Modalfensters für die Seitenerstellung mit Mustern.

Zur Veranschaulichung wollen wir zunächst kurz den Entwicklungsprozess der Musterregistrierung von der Verwendung der Register-Pattern-API bis zur direkten Ladung ohne Registrierung beleuchten.

Anwendungsfallbeispiel 1: Twenty Twenty-One

Das Standard-Theme Twenty Twenty-One (TT1) und das TT1 Blocks Theme (ein Geschwister von TT1) zeigen, wie Block-Muster im functions.php des Themes registriert werden können. Im experimentellen Theme TT1 Blocks wird diese einzelne Datei block-pattern.php, die acht Block-Muster enthält, wie hier gezeigt über ein include zur functions.php hinzugefügt.

Ein benutzerdefiniertes Block-Muster muss registriert werden, indem die Funktion register_block_pattern verwendet wird, die zwei Argumente erhält – title (Name des Musters) und properties (ein Array, das die Eigenschaften des Musters beschreibt).

Hier ist ein Beispiel für die Registrierung eines einfachen "Hallo Welt"-Absatzmusters aus diesem Theme Shaper Artikel

register_block_pattern(
    'my-plugin/hello-world',
    array(
        'title'   => __( 'Hello World', 'my-plugin' ),
        'content' => "<!-- wp:paragraph -->\n<p>Hello World</p>\n<!-- /wp:paragraph -->",
    )
);

Nach der Registrierung sollte die Funktion register_block_pattern() von einem Handler aufgerufen werden, der an den init-Hook angehängt ist, wie hier beschrieben.

 function my_plugin_register_my_patterns() {
    register_block_pattern( ... );
  }

  add_action( 'init', 'my_plugin_register_my_patterns' );

Sobald Block-Muster registriert sind, sind sie im Block-Editor sichtbar. Detailliertere Dokumentation finden Sie in dieser Block-Muster-Registrierung.

Muster-Eigenschaften

Zusätzlich zu den erforderlichen Eigenschaften title und content listet das Block Editor Handbook die folgenden optionalen Muster-Eigenschaften auf

  • title (erforderlich): Ein für Menschen lesbarer Titel für das Muster.
  • content (erforderlich): Block-HTML-Markup für das Muster.
  • description (optional): Ein visuell versteckter Text, der zur Beschreibung des Musters im Einfügungsprogramm verwendet wird. Eine Beschreibung ist optional, wird aber dringend empfohlen, wenn der Titel nicht vollständig beschreibt, was das Muster tut. Die Beschreibung hilft Benutzern, das Muster bei der Suche zu finden.
  • categories (optional): Ein Array von registrierten Musterkategorien, die zur Gruppierung von Block-Mustern verwendet werden. Block-Muster können in mehreren Kategorien angezeigt werden. Eine Kategorie muss separat registriert werden, um hier verwendet zu werden.
  • keywords (optional): Ein Array von Aliasen oder Schlüsselwörtern, die Benutzern helfen, das Muster bei der Suche zu finden.
  • viewportWidth (optional): Eine Ganzzahl, die die vorgesehene Breite des Musters angibt, um eine skalierte Vorschau des Musters im Einfügungsprogramm zu ermöglichen.
  • blockTypes (optional): Ein Array von Blocktypen, für die das Muster bestimmt ist. Jeder Wert muss der deklarierte name des Blocks sein.
  • inserter (optional): Standardmäßig werden alle Muster im Einfügungsprogramm angezeigt. Um ein Muster auszublenden, damit es nur programmatisch eingefügt werden kann, setzen Sie inserter auf false.

Das Folgende ist ein Beispiel für Code-Schnipsel eines Zitatmuster-Plugins, entnommen dem WordPress-Blog.

/*
Plugin Name: Quote Pattern Example Plugin
*/

register_block_pattern(
    'my-plugin/my-quote-pattern',
     array(
      'title'       => __( 'Quote with Avatar', 'my-plugin' ),
      'categories'  => array( 'text' ),
      'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ),
      'content'     => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I\'m being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->',
      )
);

Verwendung von Mustern in einer Vorlagendatei

Sobald Muster erstellt sind, können sie in einer Theme-Vorlagendatei mit der folgenden Block-Markierung verwendet werden

<!-- wp:pattern {"slug":"prefix/pattern-slug"} /-->

Ein Beispiel aus diesem GitHub-Repository zeigt die Verwendung des "footer-with-background"-Muster-Slugs mit dem Präfix "tt2gopher" im TT2 Gopher Blocks Theme.

Frühe Anwender von Block-Themes und dem Gutenberg-Plugin nutzten Muster auch in klassischen Themes. Das Standard-Theme Twenty Twenty und mein Favorit Eksell-Theme (eine Demo-Seite hier) sind gute Beispiele, die zeigen, wie Musterfunktionen zu klassischen Themes hinzugefügt werden können.

Anwendungsfallbeispiel 2: Twenty Twenty-Two

Wenn ein Theme nur wenige Muster enthält, ist die Entwicklung und Wartung relativ überschaubar. Wenn ein Block-Theme jedoch viele Muster enthält, wie im TT2-Theme, wird die Datei pattern.php sehr groß und schwer lesbar. Das Standard-TT2-Theme, das mehr als 60 Muster enthält, zeigt einen überarbeiteten Workflow für die Musterregistrierung in einer Struktur, die einfacher zu lesen und zu warten ist.

Am Beispiel des TT2-Themes wollen wir kurz diskutieren, wie dieser vereinfachte Workflow funktioniert.

2.1: Registrierung von Musterkategorien

Zu Demonstrationszwecken habe ich ein TT2-Child-Theme erstellt und es auf meiner lokalen Testseite mit einigen Dummy-Inhalten eingerichtet. Nach TT2 habe ich footer-with-background registriert und es zur folgenden Liste von Musterkategorien in seiner Datei block-patterns.php hinzugefügt.

/**
* Registers block patterns and categories.
*/
function twentytwentytwo_register_block_patterns() {
	$block_pattern_categories = array(
		'footer'   => array( 'label' => __( 'Footers', 'twentytwentytwo' ) ),
		'header'   => array( 'label' => __( 'Headers', 'twentytwentytwo' ) ),
		'pages'    => array( 'label' => __( 'Pages', 'twentytwentytwo' ) ),
                // ...
	);

	/**
	 * Filters the theme block pattern categories.
	 */
	$block_pattern_categories = apply_filters( 'twentytwentytwo_block_pattern_categories', $block_pattern_categories );

	foreach ( $block_pattern_categories as $name => $properties ) {
		if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) {
			register_block_pattern_category( $name, $properties );
		}
	}

	$block_patterns = array(
		'footer-default',
		'footer-dark',
		'footer-with-background',
		//...
		'header-default',
		'header-large-dark',
		'header-small-dark',
		'hidden-404',
		'hidden-bird',
		//...
	);

	/**
	 * Filters the theme block patterns.
	 */
	$block_patterns = apply_filters( 'twentytwentytwo_block_patterns', $block_patterns );

	foreach ( $block_patterns as $block_pattern ) {
		$pattern_file = get_theme_file_path( '/inc/patterns/' . $block_pattern . '.php' );

		register_block_pattern(
			'twentytwentytwo/' . $block_pattern,
			require $pattern_file
		);
	}
}
add_action( 'init', 'twentytwentytwo_register_block_patterns', 9 );

In diesem Codebeispiel wird jedes Muster, das in $block_patterns = array() aufgeführt ist, von der foreach()-Funktion aufgerufen, die eine Datei im patterns-Verzeichnis mit dem im Array aufgeführten Musternamen required – das werden wir im nächsten Schritt hinzufügen.

2.2: Hinzufügen einer Musterdatei zum Ordner /inc/patterns

Als Nächstes sollten wir alle aufgeführten Musterdateien in $block_patterns = array() haben. Hier ist ein Beispiel für eine der Musterdateien, footer-with-background.php

/**
 * Dark footer wtih title and citation
 */
return array(
	'title'      => __( 'Footer with background', 'twentytwentytwo' ),
	'categories' => array( 'footer' ),
	'blockTypes' => array( 'core/template-part/footer' ),
  'content'    => '<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"var(--wp--custom--spacing--small, 1.25rem)","bottom":"var(--wp--custom--spacing--small, 1.25rem)"}}},"backgroundColor":"background-header","textColor":"background","layout":{"inherit":true}} -->
      <div class="wp-block-group alignfull has-background-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:paragraph {"align":"center"} -->
      <p class="has-text-align-center">' .
      sprintf(
        /* Translators: WordPress link. */
        esc_html__( 'Proudly powered by %s', 'twentytwentytwo' ),
        '<a href="' . esc_url( __( 'https://wordpress.org', 'twentytwentytwo' ) ) . '" rel="nofollow">WordPress</a> | a modified TT2 theme.'
      ) . '</p>
      <!-- /wp:paragraph --></div>
          <!-- /wp:group -->',
);

Referenzieren wir das Muster im Vorlagenteil footer.html

<!-- wp:template-part {"slug":"footer"} /-->

Dies ist ähnlich wie das Hinzufügen von Kopf- oder Fußzeilenabschnitten in einer Vorlagendatei.

Die Muster können ähnlich zum Vorlagenteil parts/footer.html hinzugefügt werden, indem er so modifiziert wird, dass er auf den slug der Musterdatei des Themes (footer-with-background) verweist

<!-- wp:pattern {"slug":"twentytwentytwo/footer-with-background"} /-->

Wenn wir nun den Muster-Einfügungsprogramm des Block-Editors besuchen, sollte das Muster "Footer with background" für uns verfügbar sein

Screenshot of the pattern for Footer with background.

Der folgende Screenshot zeigt den neu erstellten Footer mit Hintergrundmuster im Frontend.

Screenshot of the footer background as it appears rendered on the site.

Da Muster nun ein integraler Bestandteil von Block-Themes geworden sind, sind viele Muster in Block-Themes enthalten – wie Quadrat, Seedlet, Mayland, Zoologist, Geologist – und folgen dem oben besprochenen Workflow. Hier ist ein Beispiel für den Ordner /inc/patterns des Quadrat-Themes mit einer Datei zur Block-Musterregistrierung und einer Liste von Dateien mit Quellcode und dem erforderlichen Muster-Header innerhalb der Funktion return array().

Abschnitt 2: Erstellen und Laden von Mustern ohne Registrierung

Bitte beachten Sie, dass für diese Funktion die Installation von WordPress 6.0 oder dem Gutenberg-Plugin 13.0 oder höher auf Ihrer Website erforderlich ist.

Diese neue Funktion von WordPress 6.0 ermöglicht die Musterregistrierung über Standarddateien und -ordner – /patterns, was ähnliche Konventionen wie /parts, /templates und /styles mit sich bringt.

Der Prozess, wie auch in diesem WP Tavern-Artikel beschrieben, umfasst die folgenden drei Schritte:

  • Erstellen eines patterns-Ordners im Stammverzeichnis des Themes
  • Hinzufügen eines Plugin-Style-Muster-Headers
  • Musterquelleninhalt

Ein typisches Muster-Header-Markup, entnommen dem Artikel, ist unten dargestellt.

<?php
/**
* Title: A Pattern Title
* Slug: namespace/slug
* Description: A human-friendly description.
* Viewport Width: 1024
* Categories: comma, separated, values
* Keywords: comma, separated, values
* Block Types: comma, separated, values
* Inserter: yes|no
*/
?>

Wie im vorherigen Abschnitt beschrieben, sind nur die Felder Title und Slug erforderlich, und andere Felder sind optional.

Anhand von Beispielen aus kürzlich veröffentlichten Themes habe ich die Musterregistrierung im Demo-Theme TT2 Gopher Blocks überarbeitet, das für einen früheren Artikel auf CSS-Tricks vorbereitet wurde.

In den folgenden Schritten untersuchen wir, wie ein Muster footer-with-background.php, das mit PHP registriert und in einer footer.html-Vorlage verwendet wurde, überarbeitet wird.

2.1: Erstellen Sie einen /patterns-Ordner im Stammverzeichnis des Themes

Der erste Schritt ist die Erstellung eines /patterns-Ordners im Stammverzeichnis des TT2 Gopher-Themes, das Verschieben der Musterdatei footer-with-background.php in den /patterns-Ordner und die Überarbeitung.

2.2: Musterdaten zum Dateikopf hinzufügen

Erstellen Sie als Nächstes die folgenden Registrierungsfelder für den Musterkopf.

<?php
/**
* Title: Footer with background
* Slug: tt2gopher/footer-with-background
* Categories: tt2gopher-footer
* Viewport Width: 1280
* Block Types: core/parts/footer
* Inserter: yes
*/
?>
<!-- some-block-content /-->

Eine Musterdatei hat ein oberstes Titelfeld, das als PHP-Kommentar geschrieben ist. Darauf folgt der Block-Inhalt im HTML-Format.

2.3: Musterinhalt zur Datei hinzufügen

Für den Inhaltsabschnitt kopieren wir die Code-Schnipsel innerhalb der einfachen Anführungszeichen (z.B. '...') aus dem Inhaltsabschnitt des footer-with-background und ersetzen den <!-- some-block-content /-->.

<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}},"spacing":{"padding":{"top":"35px","bottom":"30px"}}},"backgroundColor":"background-header","textColor":"foreground","className":"has-foreground","layout":{"inherit":true}} -->
    <div class="wp-block-group alignfull has-foreground has-foreground-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:35px;padding-bottom:30px"><!-- wp:paragraph {"align":"center","fontSize":"small"} -->
    <p class="has-text-align-center has-small-font-size">Powered by WordPress | TT2 Gopher, a modified TT2 theme</p>
    <!-- /wp:paragraph --></div>
<!-- /wp:group -->

Der vollständige Code-Schnipsel der Datei patterns/footer-with-background.php kann hier auf GitHub eingesehen werden.

Bitte beachten Sie, dass /inc/patterns und block-patterns.php Zusätze sind, die in WordPress 6.0 nicht erforderlich sind und nur zu Demozwecken enthalten sind.

2.4: Verweis auf den Muster-Slug in der Vorlage

Das Hinzufügen des oben überarbeiteten Musters footer-with-background.php zur Vorlage footer.html ist exakt dasselbe wie im vorherigen Abschnitt (Abschnitt 1, 2.2) beschrieben.

Wenn wir nun den Fußzeilenabschnitt der Website im Block-Editor oder im Frontend unserer Website in einem Browser betrachten, wird der Fußzeilenabschnitt angezeigt.

Registrierung von Musterkategorien und -typen (optional)

Um Block-Muster zu kategorisieren, sollten die Musterkategorien und -typen in der functions.php-Datei des Themes registriert werden.

Betrachten wir ein Beispiel für die Registrierung von Block-Musterkategorien aus dem TT2 Gopher-Theme.

Nach der Registrierung werden die Muster im Muster-Einfügungsprogramm zusammen mit den Kern-Standardmustern angezeigt. Um Theme-spezifische Kategorielabel im Muster-Einfügungsprogramm hinzuzufügen, sollten wir die vorherigen Schnipsel modifizieren, indem wir den Theme-Namensraum hinzufügen

/**
* Registers block categories, and type.
*/

function tt2gopher_register_block_pattern_categories() {

$block_pattern_categories = array(
  'tt2gopher-header' => array( 'label' => __( 'TT2 Gopher - Headers', 'tt2gopher' ) ),
  'tt2gopher-footer' => array( 'label' => __( 'TT2 Gopher - Footers', 'tt2gopher' ) ),
  'tt2gopher-page' => array( 'label' => __( 'TT2 Gopher - Page', 'tt2gopher' ) ),
  // ...
);

/**
* Filters the theme block pattern categories.
*/
$block_pattern_categories = apply_filters( 'tt2gopher_block_pattern_categories', $block_pattern_categories );

foreach ( $block_pattern_categories as $name => $properties ) {
  if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) {
    register_block_pattern_category( $name, $properties );
  }
}
add_action( 'init', 'tt2gopher_register_block_pattern_categories', 9 );

Das Muster footer-with-background ist im Muster-Einfügungsprogramm mit seiner Vorschau (falls ausgewählt) sichtbar

Screenshot showing pattern category displayed in patterns inserter (left panel) and corresponding default footer pattern displayed in the editor (right panel).

Dieser Prozess vereinfacht die Erstellung und Anzeige von Block-Mustern in Block-Themes erheblich. Er ist in WordPress 6.0 ohne die Verwendung des Gutenberg-Plugins verfügbar.

Beispiele für Themes ohne Musterregistrierung

Frühe Anwender nutzen diese Funktion bereits in ihren Block-Themes. Einige Beispiele für Themes aus dem Theme-Verzeichnis, die Muster ohne Registrierung laden, sind unten aufgeführt:

Abschnitt 3: Erstellen und Verwenden von Mustern mit Low-Code

Das offizielle Musterverzeichnis enthält von der Community beigesteuerte kreative Designs, die kopiert und nach Belieben angepasst werden können, um Inhalte zu erstellen. Die Verwendung von Mustern mit einem Block-Editor war noch nie so einfach!

Jedes Muster aus dem stetig wachsenden Verzeichnis kann auch zu Block-Themes hinzugefügt werden, indem man es einfach kopiert und einfügt oder in die Datei theme.json aufnimmt, indem man sich auf seinen Muster-Slug im Verzeichnis bezieht. Als Nächstes werde ich kurz darauf eingehen, wie einfach dies mit sehr begrenzten Programmierkenntnissen erreicht werden kann.

Hinzufügen und Anpassen von Mustern aus dem Musterverzeichnis

3.1: Muster vom Verzeichnis in eine Seite kopieren

Hier verwende ich dieses Fußzeilen-Abschnittsmuster von FirstWebGeek aus dem Musterverzeichnis. Ich habe das Muster kopiert, indem ich auf die Schaltfläche "Muster kopieren" geklickt und es direkt in eine neue Seite eingefügt habe.

3.2: Gewünschte Anpassungen vornehmen

Ich habe nur einige wenige Änderungen an der Farbe der Schriftarten und des Button-Hintergrunds vorgenommen. Dann habe ich den gesamten Code aus dem Code-Editor in die Zwischenablage kopiert.

Screenshot showing modified pattern (left panel) and corresponding code in code editor (right panel)

Wenn Sie nicht mit dem Code-Editor vertraut sind, gehen Sie zu Optionen (drei Punkte oben rechts), klicken Sie auf die Schaltfläche "Code-Editor" und kopieren Sie den gesamten Code von dort.

3.3: Eine neue Datei im Ordner /patterns erstellen

Zuerst erstellen wir eine neue Datei /patterns/footer-pattern-test.php und fügen den erforderlichen Muster-Header-Abschnitt hinzu. Dann fügen wir den gesamten Code ein (Schritt 3, oben). Das Muster ist im Fußzeilenbereich kategorisiert (Zeilen: 5), wir können das neu hinzugefügte Muster im Muster-Einfügungsprogramm sehen.

<?php
 /**
 * Title: Footer pattern from patterns library
 * Slug: tt2gopher/footer-pattern-test
 * Categories: tt2gopher-footer
 * Viewport Width: 1280
 * Block Types: core/template-part/footer
 * Inserter: yes
 */
?>

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","bottom":"70px","right":"30px","left":"30px"}}},"backgroundColor":"black","layout":{"contentSize":"1280px"}} -->
<div class="wp-block-group alignfull has-black-background-color has-background" style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"textColor":"cyan-bluish-gray"} -->
<h2 class="has-cyan-bluish-gray-color has-text-color" style="font-style:normal;font-weight:700;text-transform:uppercase">lorem</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">One of the main benefits of using Lorem Ipsum is that it can be easily generated, and it takes the pressure off designers to create meaningful text. Instead, they can focus on crafting the best website data.</p>
<!-- /wp:paragraph -->

<!-- wp:social-links {"iconColor":"vivid-cyan-blue","iconColorValue":"#0693e3","openInNewTab":true,"className":"is-style-logos-only","style":{"spacing":{"blockGap":{"top":"15px","left":"15px"}}}} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"instagram"} /-->

<!-- wp:social-link {"url":"#","service":"linkedin"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"textTransform":"capitalize","fontStyle":"normal","fontWeight":"700","fontSize":"30px"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Contact Us</h4>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.2"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1.2">123 BD Lorem, Ipsum<br><br>+123-456-7890</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">[email protected]</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">Opening Hours: 10:00 - 18:00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"fontSize":"30px","fontStyle":"normal","fontWeight":"700","textTransform":"capitalize"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Newsletter</h4>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">Lorem ipsum dolor sit amet, consectetur ut labore et dolore magna aliqua ipsum dolor sit</p>
<!-- /wp:paragraph -->

<!-- wp:search {"label":"","placeholder":"Enter Your Email...","buttonText":"Subscribe","buttonPosition":"button-inside","style":{"border":{"width":"1px"}},"borderColor":"tertiary","backgroundColor":"background-header","textColor":"background"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

3.4: Neues Muster im Einfügungsprogramm anzeigen

Um das neu hinzugefügte Muster "Footer pattern from patterns library" anzuzeigen, gehen Sie zu einem beliebigen Beitrag oder einer Seite, wählen Sie das Einfügungssymbol (blaues Plus-Symbol, oben links) und dann die Kategorie "TT2 Gopher – Footer". Das neu hinzugefügte Muster wird im linken Bereich zusammen mit anderen Fußzeilenmustern und seiner Vorschau auf der rechten Seite (falls ausgewählt) angezeigt.

Screenshot showing new footer pattern (left panel) and its preview (right panel).

Muster direkt in der theme.json-Datei registrieren

In WordPress 6.0 ist es möglich, beliebige Muster aus dem Musterverzeichnis mit der Datei theme.json unter Verwendung der folgenden Syntax zu registrieren. Die 6.0 Dev Note besagt: "Das Feld patterns ist ein Array von [Muster-Slugs] aus dem Musterverzeichnis. Muster-Slugs können aus der [URL] in der Ansicht für einzelne Muster im Musterverzeichnis extrahiert werden."

{
    "version": 2,
    "patterns": ["short-text", "patterns-slug"]
}

Dieses kurze Video zu WordPress 6.0-Funktionen demonstriert, wie Muster im Ordner /patterns (bei 3:53) registriert werden und wie gewünschte Muster aus dem Musterverzeichnis in einer theme.json-Datei registriert werden (bei 3:13).

Dann ist das registrierte Muster im Suchfeld des Muster-Einfügungsprogramms verfügbar, das dann wie die Musterbibliothek des Themes verwendet werden kann.

{
  "version": 2,
  "patterns": [ "footer-from-directory", "footer-section-design-with-3-column-description-social-media-contact-and-newsletter" ]
}

In diesem Beispiel wird der Muster-Slug footer-section-design-with-3-column-description-social-media-contact-and-newsletter aus dem vorherigen Beispiel über theme.json registriert.

Modell für Muster zur Seitenerstellung

Als Teil der Initiativen „Bauen mit Mustern“ bietet WordPress 6.0 eine Muster-Modal-Option für Theme-Autoren, um Seitenlayout-Muster in Block-Themes einzufügen, die es Website-Benutzern ermöglichen, Seitenlayout-Muster (z.B. eine Über-uns-Seite, eine Kontaktseite, eine Teamseite usw.) bei der Seitenerstellung auszuwählen. Das Folgende ist ein Beispiel aus der Entwicklerhinweis

register_block_pattern(
    'my-plugin/about-page',
    array(
        'title'      => __( 'About page', 'my-plugin' ),
        'blockTypes' => array( 'core/post-content' ),
        'content'    => '<!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} -->
        <p class="has-white-color has-black-background-color has-text-color has-background">Write you about page here, feel free to use any block</p>
        <!-- /wp:paragraph -->',
    )
);

Diese Funktion ist derzeit nur auf den Post-Typ "Seiten" beschränkt und nicht für den Post-Typ "Beiträge", noch.

Das Muster-Modal für die Seitenerstellung kann auch vollständig deaktiviert werden, indem der Blocktyp "post-content" aller Muster entfernt wird. Ein Beispiel-Code ist hier verfügbar.

Sie können die Diskussion auf GitHub über die Links im Ressourcenabschnitt unten verfolgen und daran teilnehmen.

Musterverzeichnis zum Erstellen von Seiten verwenden

Muster aus dem Verzeichnis können auch zum Erstellen des gewünschten Beitrags- oder Seitenlayouts verwendet werden, ähnlich wie bei Seitenerstellern. Das GutenbergHub-Team hat eine experimentelle Online-Seitenerstellungs-App entwickelt, die Muster direkt aus dem Verzeichnis verwendet (Einführungsvideo). Die Codes aus der App können dann auf eine Website kopiert und eingefügt werden, was den Prozess des Erstellens komplexer Seitenlayouts ohne Programmierung erheblich vereinfacht.

In diesem kurzen Video demonstriert Jamie Marsland (bei 1:30), wie die App verwendet werden kann, um ein vollständiges Seitenlayout ähnlich einem Seitenersteller zu erstellen, indem gewünschte Seitenabschnitte aus dem Verzeichnis verwendet werden.

Zusammenfassung

Muster ermöglichen es Benutzern, ihre häufig verwendeten Layouts (z.B. Hero-Seite, Callout usw.) auf jeder Seite nachzubilden und die Hürden für die Darstellung von Inhalten in Stilen zu senken, was bisher ohne Programmierkenntnisse nicht möglich war. Ähnlich wie die Verzeichnisse für Plugins und Themes bietet das neue Verzeichnis für Muster den Benutzern Optionen, eine breite Palette von Mustern ihrer Wahl aus dem Musterverzeichnis zu verwenden und Inhalte stilvoll zu schreiben und anzuzeigen.

Tatsächlich werden Block-Muster alles verändern und sicherlich ist dies eine bahnbrechende Funktion in der Landschaft der WordPress-Themes. Wenn das volle Potenzial der Bemühungen zum Bauen mit Mustern verfügbar wird, wird dies die Art und Weise verändern, wie wir Block-Themes entwerfen und schöne Inhalte auch mit geringen Programmierkenntnissen erstellen. Für viele kreative Designer kann das Musterverzeichnis auch einen geeigneten Weg bieten, ihre Kreativität zu zeigen.

Ressourcen

WordPress 6.0

Muster erstellen

Verbesserung von Mustern (GitHub)

Blogartikel

Psst! Erstellen Sie ein DigitalOcean-Konto und erhalten Sie 200 $ kostenloses Guthaben für Cloud-basiertes Hosting und Services.

Kommentare

  1. Erika
    Permalink zum Kommentar#

    Wenn ich Blockmuster auf diese Weise registriere, werden meine Blockmusterkategorien nicht angezeigt! Wenn ich das Muster über die Funktion register_block_pattern() registriere, funktioniert es, aber nicht, wenn ich es über den Ordner /patterns registriere. Die Muster werden zwar angezeigt, aber als „Unkategorisiert“.

    Antworten
  2. Ganesh
    Permalink zum Kommentar#

    Hallo Erika,
    Hast du diesen Schritt Registrierung von Musterkategorien und -typen befolgt?

    Antworten
  3. Sarah Hall
    Permalink zum Kommentar#

    Ich wusste gar nicht, dass das möglich ist, vielen Dank!

    Antworten

Antworten Sie

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

© .