So erstellen Sie Blockdesignmuster in WordPress 6.0

Blockmuster, auch häufig genannt Abschnitte, wurden eingeführt WordPress 5.5 um es Benutzern zu ermöglichen, vordefinierte Blocklayouts in der zu erstellen und zu teilen Musterverzeichnis. Das Verzeichnis ist die Heimat einer breiten Palette kuratierter Muster, die von der WordPress-Community entworfen wurden. Diese Muster sind im einfachen Copy-and-Paste-Format verfügbar, erfordern keine Programmierkenntnisse und sind daher eine große Zeitersparnis für Benutzer.

Trotz vieler Artikel zu Mustern fehlt es an umfassenden und aktuellen Artikeln zur Mustererstellung, die die neuesten erweiterten Funktionen behandeln. Dieser Artikel zielt darauf ab, die Lücke zu schließen, indem er sich auf die kürzlich verbesserten Funktionen wie das Erstellen von Mustern ohne Registrierung konzentriert und eine aktuelle Schritt-für-Schritt-Anleitung zum Erstellen und Verwenden dieser Muster in Blockdesigns für Anfänger und erfahrene Autoren bietet.

Seit der Einführung des WordPress 5.9 und für Zwanzig zweiundzwanzig (TT2) Standarddesign hat sich die Verwendung von Blockmustern in Blockdesigns stark verbreitet. Ich war ein großer Fan von Blockmuster und habe sie in meinen Blockthemen erstellt und verwendet.

The new WordPress 6.0 bietet drei Hauptmuster bieten Verbesserungen für Autoren:

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

In einer Einführung Erkunden von WordPress 6.0-Videos, Automattic-Produktkontaktperson Ann McCathy stellt einige neu verbesserte Pattern-Funktionen vor (ab 15:00 Uhr) und diskutiert zukünftige Pattern-Verbesserungspläne – darunter Muster als Gliederungselemente, bietet Optionen für Auswahlmuster bei der Seitenerstellung, Integrieren der Musterverzeichnissuche und mehr.

Voraussetzungen:

Der Artikel geht davon aus, dass die Leser über grundlegende Kenntnisse der WordPress Full Site Editing (FSE)-Oberfläche und Blockthemen verfügen. Das Block-Editor-Handbuch und Vollständige Site-Bearbeitung Website bieten die aktuellsten Anleitungen zum Erlernen aller FSE-Funktionen, einschließlich der in diesem Artikel besprochenen Blockierungsthemen und -muster.

Abschnitt 1: Entwicklung von Ansätzen zur Erstellung von Blockmustern

Der anfängliche Ansatz zum Erstellen von Blockmustern erforderte die Verwendung der Blockmuster-API entweder als benutzerdefiniertes Plugin oder direkt in der registriert functions.php Datei, die mit einem Blockdesign gebündelt werden soll. Das neu gestartete WordPress 6.0 führte mehrere neue und verbesserte Funktionen ein, die mit Mustern und Themen arbeiten, einschließlich der Musterregistrierung über a /patterns Ordner und a Seitenerstellungsmuster modal.

Lassen Sie uns als Hintergrund zunächst kurz überblicken, wie sich der Musterregistrierungs-Workflow von der Verwendung der Registrierungsmuster-API zum direkten Laden ohne Registrierung entwickelt hat.

Anwendungsfallbeispiel 1: Twenty Twenty-One

Der Standard Einundzwanzig Einundzwanzig Thema (TT1) und TT1 Blocks-Thema (ein Geschwister von TT1) zeigen, wie Blockmuster in den Themen registriert werden können functions.php. Im Experimental-Thema von TT1 Blocks ist diese Single blockmuster.php Datei mit acht Blockmuster wird hinzugefügt functions.php als include wie hier gezeigt.

Ein benutzerdefiniertes Blockmuster muss registriert werden Verwendung der register_block_pattern Funktion, die zwei Argumente erhält — title (Name der Muster) und properties (ein Array, das die Eigenschaften des Musters beschreibt).

Hier ist ein Beispiel für die Registrierung eines einfachen „Hello World“-Absatzmusters daraus 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 Anmeldung ist die register_block_pattern() Die Funktion sollte von einem Handler aufgerufen werden, der an die angefügt ist init Haken wie beschrieben hier.

 function my_plugin_register_my_patterns() { register_block_pattern( ... ); } add_action( 'init', 'my_plugin_register_my_patterns' );

Sobald Blockmuster registriert sind, sind sie im Blockeditor sichtbar. Eine ausführlichere Dokumentation findet sich in dieser Registrierung von Blockmustern.

Blockmustereigenschaften

Zusätzlich zu erforderlich title und content Eigenschaften, die Blockeditor Handbuch listet die folgenden optionalen auf Mustereigenschaften:

• title (erforderlich): Ein für Menschen lesbarer Titel für das Muster.
• content (erforderlich): HTML-Markup für das Muster blockieren.
• description (optional): Ein visuell verborgener Text, der verwendet wird, um das Muster im Inserter zu beschreiben. Eine Beschreibung ist optional, wird jedoch dringend empfohlen, wenn der Titel nicht vollständig beschreibt, was das Muster tut. Die Beschreibung hilft Benutzern, das Muster während der Suche zu entdecken.
• categories (optional): Ein Array von registrierten Musterkategorien, die zum Gruppieren von Blockmustern verwendet werden. Blockmuster können in mehreren Kategorien angezeigt werden. Eine Kategorie muss separat registriert werden, um hier verwendet zu werden.
• keywords (optional): Eine Reihe von Aliasen oder Schlüsselwörtern, die Benutzern helfen, das Muster während der Suche zu entdecken.
• viewportWidth (optional): Eine Ganzzahl, die die beabsichtigte Breite des Musters angibt, um eine skalierte Vorschau des Musters im Inserter zu ermöglichen.
• blockTypes (optional): Ein Array von Blocktypen, mit denen das Muster verwendet werden soll. Jeder Wert muss der deklarierte Block sein name.
• inserter (optional): Standardmäßig werden alle Muster im Inserter angezeigt. Um ein Muster auszublenden, sodass es nur programmgesteuert eingefügt werden kann, legen Sie fest inserter zu false.

Das Folgende ist ein Beispiel für Codeschnipsel eines Zitatmuster-Plug-Ins aus der 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 -->', )
);

Verwenden von Mustern in einer Vorlagendatei

Sobald Muster erstellt wurden, können sie in einer Themenvorlagendatei mit dem folgenden Block-Markup verwendet werden:

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

Ein Beispiel aus Dieses GitHub-Repository zeigt die Verwendung von „footer-with-background„Musterschnecke mit“tt2gopher”-Präfix im TT2-Gopher-Blöcke-Design.

Early Adopters von Block-Themen und dem Gutenberg-Plugin nutzten auch Muster in klassischen Themen. Der Standard Zwanzig Zwanzig und meine Lieblings-Eksell-Designs (a Demo-Website hier) sind gute Beispiele, die zeigen, wie Musterfunktionen zu klassischen Themen hinzugefügt werden können.

Anwendungsfallbeispiel 2: Twenty Twenty-Two

Wenn ein Thema nur wenige Muster enthält, sind Entwicklung und Pflege ziemlich überschaubar. Wenn ein Blockthema jedoch viele Muster enthält, wie im TT2-Thema, dann ist die pattern.php Datei wird sehr groß und schwer lesbar. Das standardmäßige TT2-Design, das Bundles enthält mehr als 60 Muster, zeigt einen umgestalteten Musterregistrierungs-Workflow Struktur das ist einfacher zu lesen und zu pflegen.

Lassen Sie uns anhand von Beispielen aus dem TT2-Design kurz erläutern, wie dieser vereinfachte Workflow funktioniert.

2.1: Musterkategorien registrieren

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

/**
* 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 der $block_patterns = array() wird von aufgerufen foreach() Funktion, die requires ein patterns Verzeichnisdatei mit dem aufgelisteten Musternamen im Array, das wir im nächsten Schritt hinzufügen werden.

2.2: Hinzufügen einer Musterdatei zur /inc/patterns Flyer

Als nächstes sollten wir alle aufgelisteten Musterdateien in der haben $block_patterns = array(). 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 -->',
);

Lassen Sie uns auf das Muster in der verweisen footer.html Vorlagenteil:

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

Dies ähnelt dem Hinzufügen von Kopf- oder Fußzeilenteilen in einer Vorlagendatei.

Die Muster können in ähnlicher Weise zu den hinzugefügt werden parts/footer.html Vorlage, indem Sie sie so ändern, dass sie darauf verweist slug der Musterdatei des Themas (footer-with-background):

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

Wenn wir nun den Pattern Inserter des Blockeditors besuchen, wird die Footer with background sollte uns zur Verfügung stehen:

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

Jetzt, da Muster zum integralen Bestandteil des Blockthemas geworden sind, werden viele Muster in Blockthemen gebündelt – wie Quadrat, Sämling, Mayland, Zoologe, Geologe — nach dem oben beschriebenen Arbeitsablauf. Hier ist ein Beispiel für das Quadrat-Design /inc/patterns Ordner mit einem Blockmusterregistrierung Datei-und Liste der Dateien mit Inhaltsquelle und erforderlichem Musterkopf . return array() Funktion.

Abschnitt 2: Erstellen und Laden von Mustern ohne Registrierung

Bitte beachten Sie, dass diese Funktion die Installation von WordPress 6.0 oder Gutenberg-Plugin 13.0 oder höher auf Ihrer Website erfordert.

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

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

• Erstellen eines Musterordners im Stammverzeichnis des Designs
• Plugin-Style-Pattern-Header hinzufügen
• Inhalt der Musterquelle

Ein typisches Muster-Header-Markup aus 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
*/
?>

Nur wie im vorherigen Abschnitt beschrieben Title und Slug Felder sind erforderlich und andere Felder sind optional.

Unter Bezugnahme auf Beispiele aus kürzlich veröffentlichten Themen habe ich die Musterregistrierung umgestaltet diese TT2 Gopher-Blöcke Demo-Theme, vorbereitet für ein früherer Artikel über die CSS-Tricks.

Lassen Sie uns in den folgenden Schritten untersuchen, wie a footer-with-background.php Anleitungen mit PHP registriert und verwendet in a footer.html Vorlage wird umgestaltet.

2.1: Erstellen Sie a /patterns Ordner im Stammverzeichnis des Designs

Der erste Schritt ist das Erstellen eines /patterns Ordner im Stammverzeichnis des TT2 Gopher-Designs und verschieben Sie die footer-with-background.php Musterdatei zu /patterns Ordner und Refactoring.

2.2: Musterdaten zum Dateiheader hinzufügen

Erstellen Sie als Nächstes die folgenden Muster-Header-Registrierungsfelder.

<?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 oberes Titelfeld, das als PHP-Kommentare geschrieben ist. Gefolgt von der Blockinhalt im HTML-Format geschrieben.

2.3: Musterinhalt zur Datei hinzufügen

Kopieren wir für den Inhaltsbereich die darin enthaltenen Code-Snippets Einzelzitate (z.B, '...') aus dem Inhaltsbereich der footer-with-background und ersetzen Sie die <!-- 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 -->

Das gesamte Code-Snippet der patterns/footer-with-background.php Datei kann eingesehen werden hier auf GitHub.

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

2.4: Referenzieren des Muster-Slugs in der Vorlage

Hinzufügen der oben umgestalteten footer-with-background.php Muster zu footer.html Vorlage ist genau die gleiche wie im vorherigen Abschnitt beschrieben (Abschnitt 1, 2.2).

Wenn wir nun den Fußzeilenteil der Website in einem Blockeditor oder Frontend unserer Website in einem Browser anzeigen, wird der Fußzeilenabschnitt angezeigt.

Musterkategorien und -typen Registrierung (optional)

Um Blockmuster zu kategorisieren, sollten die Musterkategorien und -typen in Themen registriert werden functions.php Datei.

Betrachten wir ein Beispiel für Registrieren von Blockmusterkategorien aus dem TT2 Gopher-Theme.

Nach der Registrierung werden die Muster zusammen mit den Kernstandardmustern im Mustereinfüger angezeigt. Um themenspezifische Kategoriebezeichnungen im Pattern Inserter hinzuzufügen, sollten wir die vorherigen Snippets ändern, indem wir den Themen-Namespace 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 footer-with-background Muster ist in den eingefügten Mustern mit seiner Vorschau sichtbar (falls ausgewählt):

Dieser Prozess vereinfacht das Erstellen und Anzeigen von Blockmustern in Blockdesigns erheblich. Es ist in WordPress 6.0 ohne Verwendung des Gutenberg-Plugins verfügbar.

Beispiele für Themen ohne Musterregistrierung

Early Adopters haben bereits damit begonnen, diese Funktion in ihren Blockthemen zu verwenden. Ein paar Beispiele der Themen, die von der verfügbar sind Themenverzeichnis, die Lademuster ohne Registrierung sind unten aufgeführt:

• Archaeo – 12 Muster
• Anhänger – 13 Muster
• Remote – 11 Muster
• Skatepark – 10 Muster
• Stewart – 17 Muster
• Buch – 16 Muster
• Avantgarde – 14 Muster

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

Das offizielles 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 Blockeditor war noch nie so einfach!

Beliebige Muster aus dem ständig wachsenden Verzeichnis können auch einfach durch einfaches „Kopieren und Einfügen“ zu Blockthemen hinzugefügt oder in die Blockthemen aufgenommen werden theme.json Datei, indem Sie auf ihr Verzeichnis verweisen Muster Schnecke. Als nächstes werde ich kurz durchgehen, wie einfach dies mit sehr begrenzter Codierung erreicht werden kann.

Hinzufügen und Anpassen von Mustern aus dem Musterverzeichnis

3.1: Muster aus Verzeichnis in eine Seite kopieren

Hier verwende ich dieses Fußzeilenabschnittsmuster von FirstWebGeek aus dem Musterverzeichnis. Kopieren Sie das Muster, indem Sie auf die Schaltfläche „Muster kopieren“ klicken, und fügen Sie es direkt in eine neue Seite ein.

3.2: Nehmen Sie die gewünschte Anpassung vors

Ich habe nur ein paar Änderungen an der Farbe der Schriftarten und des Schaltflächenhintergrunds vorgenommen. Kopieren Sie dann den gesamten Code aus der Code-Editor hinüber zu einer Zwischenablage.

Wenn Sie mit der Verwendung des Code-Editors nicht vertraut sind, gehen Sie zu Optionen (mit drei Punkten oben rechts), klicken Sie auf die Schaltfläche Code-Editor und kopieren Sie den gesamten Code von hier.

3.3: Erstellen Sie eine neue Datei im Ordner /patterns

Lassen Sie uns zuerst eine neue erstellen /patterns/footer-pattern-test.php Datei und fügen Sie den erforderlichen Muster-Header-Abschnitt hinzu. Fügen Sie dann den gesamten Code ein (Schritt 3 oben). Das Muster ist im Fußbereich kategorisiert (Zeilen: 5), wir können die neu hinzugefügten im Mustereinfüger anzeigen.

<?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">sample@gmail.com</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: Sehen Sie sich das neue Muster im Inserter an

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

Registrieren von Mustern direkt in theme.json Datei

In WordPress 6.0 ist es möglich, beliebige Muster aus dem Musterverzeichnis mit zu registrieren theme.json Datei mit der folgenden Syntax. Das 6.0-Entwicklernotizen, „das Musterfeld ist ein Array von [Muster Schnecken] aus dem Musterverzeichnis. Muster-Slugs können über die [URL] in der Einzelmusteransicht im Musterverzeichnis extrahiert werden.“

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

Dieser kurzes Video zu den Funktionen von WordPress 6.0 zeigt, wie Muster in registriert werden /patterns Ordner (bei 3:53) und Registrieren der gewünschten Muster aus dem Musterdirektor in a theme.json Datei (bei 3:13).

Dann ist das registrierte Muster im Suchfeld des Mustereinfügers verfügbar, das dann genau wie die thematisch gebündelte Musterbibliothek verwendet werden kann.

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

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

Mustermodell für die Seitenerstellung

Im Rahmen "Bauen mit Mustern“Initiativen, WordPress 6.0 bietet eine modale Musteroption Themenautoren das Hinzufügen von Seitenlayoutmustern zu Blockdesigns ermöglichen, wodurch Site-Benutzer beim Erstellen einer Seite Seitenlayoutmuster auswählen können (z. B. eine About-Seite, eine Kontaktseite, eine Teamseite usw.). Nachfolgend ein Beispiel aus die Entwicklernotiz:

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 beschränkt auf Seitenbeitragstyp nur und noch nicht für „Posts Post Type“.

Das Seitenerstellungsmuster modal kann auch vollständig deaktiviert werden, indem der Post-Content-Blocktyp aller Muster entfernt wird. Ein Beispiel-Beispielcode finden Sie hier.

Sie können der GitHub-Diskussion über die Links folgen, die im Abschnitt „Ressourcen“ unten aufgeführt sind, und daran teilnehmen.

Verwenden des Musterverzeichnisses zum Erstellen der Seite

Muster aus dem Verzeichnis können auch verwendet werden, um das gewünschte Post- oder Seitenlayout zu erstellen, ähnlich wie bei Seitenerstellern. Das GutenbergHub Team erstellt hat eine experimentelle Online-Page-Builder-App Verwenden von Mustern direkt aus dem Verzeichnis (Einführungs-Video). Dann können die Codes aus der App kopiert und in eine Website eingefügt werden, was den Aufbau eines komplexen Seitenlayout-Prozesses ohne Codierung erheblich vereinfacht.

In dieses kurze Video, Jamie Marsland demonstriert (bei 1:30), wie die App verwendet werden kann, um ein ganzes Seitenlayout zu erstellen, das dem Seitenersteller ähnelt, indem gewünschte Seitenabschnitte des Verzeichnisses verwendet werden.

Wrapping up

Muster ermöglichen es Benutzern, ihr häufig verwendetes Inhaltslayout (z. B. Hero-Page, Callout usw.) auf jeder Seite neu zu erstellen und die Barrieren für die Präsentation von Inhalten in Stilen zu senken, was zuvor ohne Programmierkenntnisse nicht möglich war. Genau wie die Plugins und Themen Verzeichnisse, die neue Muster Verzeichnis bietet Benutzern die Möglichkeit, eine breite Palette von Mustern ihrer Wahl aus dem Musterverzeichnis zu verwenden und Inhalte stilvoll zu schreiben und anzuzeigen.

Tatsächlich, Blockmuster werden alles verändern und sicherlich ist dies ein Spielwechsler Funktion in der WordPress-Theme-Landschaft. Wenn das volle Potenzial von Bauen mit Mustern Aufwand verfügbar wird, wird dies die Art und Weise verändern, wie wir Blockthemen entwerfen und selbst mit Low-Code-Kenntnissen schöne Inhalte erstellen. Für viele kreative Designer kann das Musterverzeichnis auch eine geeignete Möglichkeit bieten, ihre eigenen zu präsentieren Kreativität.

---

Downloads

WordPress 6.0

• WordPress 6.0-Feldhandbuch (WordPress Core)
• Erkundung von WordPress 6.0: Stilvariationen, Blocksperr-Benutzeroberfläche, Schreibverbesserungen – 22-minütiges Video (Anne McCarthy)
• WordPress 6.0-Funktionen in 4 Minuten (Dave Smith)
• Was ist neu in WordPress 6.0: Neue Blöcke, Stilwechsel, Vorlagenbearbeitung, Webfonts-API und vieles mehr (Kinsta)

Muster erstellen

• Einführung in Blockmuster (Vollständige Website-Bearbeitung)
• Video zur Einführung in Blockmuster, 14 Minuten (WordPress lernen)
• Blockmuster (Blockeditor-Handbuch)
• Sie möchten also Blockmuster erstellen? (WordPress-Blog)
• So erstellen und teilen Sie Low-Code-Blockmuster in WordPress (Los Papa)

Musterverbesserung (GitHub)

• Bauen mit Mustern #38529
• Muster als Schnittelemente #39281
• Hinzufügen: Option zum Auswählen eines Musters bei der Seitenerstellung. #40034
• Blockmuster für die Seitenerstellung. #38787
• Hinzufügen: Seitenstartoptionen (Vorlagen und Muster) #39147

Blog Artikel

• Gutenberg-Muster: Die Zukunft der Seitenerstellung in WordPress (Reicher Tabor)
• Verwenden von Blockmustern, um die Erstellung von WordPress-Sites zu beschleunigen (Los Papa)
• Blockmuster werden alles verändern (WP Taverne)

---

So erstellen Sie Blockdesignmuster in WordPress 6.0 ursprünglich veröffentlicht am CSS-Tricks.. Du solltest erhalten Sie den Newsletter.

• Coinsmart. Europas beste Bitcoin- und Krypto-Börse.
• Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. DEN FREIEN ZUGANG.
• CryptoHawk. Altcoin-Radar. Kostenlose Testphase.
• Quelle: https://css-tricks.com/how-to-create-block-theme-patterns-in-wordpress-6-0/