Blokthemapatronen maken in WordPress 6.0

Blokpatronen, ook vaak aangeduid als secties, werden geïntroduceerd in WordPress 5.5 om gebruikers in staat te stellen vooraf gedefinieerde bloklay-outs te bouwen en te delen in de patroonmap. De directory is de thuisbasis van een breed scala aan samengestelde patronen die zijn ontworpen door de WordPress-community. Deze patronen zijn beschikbaar in een eenvoudig kopieer- en plakformaat, vereisen geen codeerkennis en zijn dus een grote tijdbesparing voor gebruikers.

Ondanks veel artikelen over patronen, is er een gebrek aan uitgebreide en actuele artikelen over het maken van patronen die de nieuwste verbeterde functies behandelen. Dit artikel is bedoeld om de leemte op te vullen met een focus op de recent verbeterde functies, zoals het maken van patronen zonder registratie, en biedt een up-to-date stapsgewijze handleiding om ze te maken en te gebruiken in blokthema's voor beginners en ervaren auteurs.

Sinds de lancering van WordPress 5.9 en Twintig Tweeëntwintig (TT2) standaardthema, het gebruik van blokpatronen in blokthema's heeft zich vermenigvuldigd. Ik ben een grote fan van blokpatronen en heb ze gemaakt en gebruikt in mijn blokthema's.

De nieuwe WordPress 6.0 aanbiedingen drie belangrijke patronen zijn voorzien van verbeteringen voor auteurs:

• Patroonregistratie toestaan ​​via /patterns map (vergelijkbaar met /parts, /templates en /styles registratie).
• Patronen registreren uit de openbare patronenmap met de theme.json.
• Patronen toevoegen die aan de gebruiker kunnen worden aangeboden bij het maken van een nieuwe pagina.

In een inleidende WordPress 6.0-video verkennen, Automattic-productverbinding Ann McCathy belicht enkele nieuwe verbeterde patroonfuncties (vanaf 15 uur) en bespreekt toekomstige plannen voor patroonverbetering, waaronder patronen als snij-elementen, biedt opties om kies patroon bij het maken van pagina's, het integreren van zoeken in patroondirectory's en meer.

Voorwaarden

Het artikel gaat ervan uit dat lezers basiskennis hebben van de WordPress Full Site Editing (FSE) interface en blokthema's. De Handboek voor blokeditor en Volledige site bewerken website bieden de meest up-to-date handleidingen om alle FSE-functies te leren, inclusief blokthema's en patronen die in dit artikel worden besproken.

Sectie 1: Evoluerende benaderingen voor het maken van blokpatronen

De initiële benadering voor het maken van blokpatronen vereiste het gebruik van de blokpatroon-API, hetzij als een aangepaste plug-in of direct geregistreerd in de functions.php bestand om te bundelen met een blokthema. De nieuw gelanceerde WordPress 6.0 introduceerde verschillende nieuwe en verbeterde functies die werken met patronen en thema's, waaronder patroonregistratie via a /patterns map en een patroon voor het maken van pagina's modaal.

Laten we voor de achtergrond eerst kort bekijken hoe de patroonregistratieworkflow is geëvolueerd van het gebruik van de registerpatroon-API naar direct laden zonder registratie.

Gebruiksvoorbeeld 1: Twenty Twenty-One

De standaard Twenty Twenty-One thema (TT1) en TT1 Blokken thema (een broer of zus van TT1) laten zien hoe blokpatronen kunnen worden geregistreerd in de thema's functions.php. In het experimentele thema TT1 Blocks, deze single blokpatroon.php bestand met acht blokpatronen worden toegevoegd aan de functions.php als include zoals hier getoond.

Een aangepast blokpatroon moet worden geregistreerd met de register_block_pattern functie, die twee argumenten ontvangt — title (naam van de patronen) en properties (een array die eigenschappen van het patroon beschrijft).

Hier is een voorbeeld van het registreren van een eenvoudig "Hello World"-alineapatroon hiervan Thema 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 -->", )
);

Na aanmelding wordt de register_block_pattern() functie moet worden aangeroepen vanuit een handler die is gekoppeld aan de init haak zoals beschreven hier.

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

Zodra blokpatronen zijn geregistreerd, zijn ze zichtbaar in de blokeditor. Meer gedetailleerde documentatie vindt u in deze Blokpatroonregistratie.

Eigenschappen blokpatroon

Naast vereist title en content eigenschappen, de blok editor handboek vermeldt de volgende optionele: patroon eigenschappen:

• title (Verplicht): Een voor mensen leesbare titel voor het patroon.
• content (Verplicht): Blokkeer HTML-opmaak voor het patroon.
• description (Optioneel): Een visueel verborgen tekst die wordt gebruikt om het patroon in de inserter te beschrijven. Een beschrijving is optioneel, maar wordt sterk aangemoedigd als de titel niet volledig beschrijft wat het patroon doet. De beschrijving helpt gebruikers het patroon te ontdekken tijdens het zoeken.
• categories (Optioneel): Een reeks geregistreerde patrooncategorieën die worden gebruikt om blokpatronen te groeperen. Blokpatronen kunnen in meerdere categorieën worden weergegeven. Een categorie moet apart worden geregistreerd om hier te kunnen worden gebruikt.
• keywords (Optioneel): een reeks aliassen of trefwoorden waarmee gebruikers het patroon tijdens het zoeken kunnen ontdekken.
• viewportWidth (Optioneel): Een geheel getal dat de beoogde breedte van het patroon aangeeft om een ​​geschaald voorbeeld van het patroon in de invoegfunctie mogelijk te maken.
• blockTypes (Optioneel): Een array van bloktypes waarmee het patroon bedoeld is om te worden gebruikt. Elke waarde moet van het gedeclareerde blok zijn name.
• inserter (Optioneel): Standaard verschijnen alle patronen in de inserter. Om een ​​patroon te verbergen zodat het alleen programmatisch kan worden ingevoegd, stelt u de inserter naar false.

Het volgende is een voorbeeld van codefragmenten van een plug-in voor aanhalingstekens genomen uit de 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 -->', )
);

Patronen gebruiken in een sjabloonbestand

Zodra patronen zijn gemaakt, kunnen ze worden gebruikt in een themasjabloonbestand met de volgende blokopmaak:

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

Een voorbeeld van deze GitHub-opslagplaats toont het gebruik van “footer-with-background” patroon slak met “tt2gopher” voorvoegsel in TT2 Gopher-blokkenthema.

Early adopters van blokthema's en Gutenberg-plug-in profiteerden ook van patronen in klassieke thema's. De standaard Twintig Twintig en mijn favoriete Eksell-thema's (a demosite hier) zijn goede voorbeelden die laten zien hoe patroonkenmerken kunnen worden toegevoegd aan klassieke thema's.

Use case voorbeeld 2: Twenty Twenty-Two

Als een thema slechts enkele patronen bevat, zijn de ontwikkeling en het onderhoud redelijk beheersbaar. Als een blokthema echter veel patronen bevat, zoals in het TT2-thema, dan is de pattern.php bestand wordt erg groot en moeilijk leesbaar. Het standaard TT2-thema, dat bundelt meer dan 60 patronen, toont een vernieuwde workflow voor patroonregistratie structuur dat is makkelijker te lezen en te onderhouden.

Laten we, aan de hand van voorbeelden uit het TT2-thema, kort bespreken hoe deze vereenvoudigde workflow werkt.

2.1: Patronencategorieën registreren

Voor demonstratiedoeleinden heb ik een TT2-kindthema gemaakt en dit op mijn lokale testsite ingesteld met wat dummy-inhoud. Na TT2 heb ik me ingeschreven footer-with-background en toegevoegd aan de volgende matrixlijst met patrooncategorieën in zijn block-patterns.php bestand.

/**
* 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 dit codevoorbeeld wordt elk patroon vermeld in de $block_patterns = array() wordt gebeld door foreach() functie die requireis een patterns directory-bestand met de vermelde patroonnaam in de array die we in de volgende stap zullen toevoegen.

2.2: Een patroonbestand toevoegen aan de /inc/patterns map

Vervolgens zouden we alle vermelde patronenbestanden in de moeten hebben $block_patterns = array(). Hier is een voorbeeld van een van de patroonbestanden, 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 -->',
);

Laten we verwijzen naar het patroon in de footer.html sjabloon onderdeel:

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

Dit is vergelijkbaar met het toevoegen van kop- of voettekstgedeelten in een sjabloonbestand.

De patronen kunnen op dezelfde manier worden toegevoegd aan de parts/footer.html sjabloon door het te wijzigen om te verwijzen naar slug van het patroonbestand van het thema (footer-with-background):

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

Als we nu de patronen-invoeger van de blokeditor bezoeken, zal de Footer with background beschikbaar moeten zijn voor ons gebruik:

De volgende schermafbeelding toont de nieuw gemaakte voettekst met achtergrondpatroon aan de voorkant.

Nu patronen een integraal onderdeel van het blokthema zijn geworden, zijn veel patronen gebundeld in blokthema's - zoals Plein, Zaadje, Mayland, Zoöloog, Geoloog — volgens de hierboven besproken workflow. Hier is een voorbeeld van het Quadrat-thema /inc/patterns map met een blokpatroonregistratie file en lijst met bestanden met inhoudsbron en vereiste patroonkop binnen return array() functie.

Sectie 2: Patronen maken en laden zonder registratie

Houd er rekening mee dat deze functie de installatie van WordPress 6.0 of Gutenberg-plug-in 13.0 of hoger op uw site vereist.

Deze nieuwe WordPress 6.0-functie maakt patroonregistratie mogelijk via standaardbestanden en -mappen – /patterns, met soortgelijke conventies zoals /parts, /templates en /styles.

Het proces, zoals ook beschreven in deze WP Tavern artikel, omvat de volgende drie stappen:

• een map met patronen maken in de hoofdmap van het thema
• patroonkoptekst in plug-in-stijl toevoegen
• patroon bron inhoud

Een typische patroonkopmarkering, ontleend aan het artikel, wordt hieronder weergegeven:

<?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
*/
?>

Zoals beschreven in de vorige sectie, alleen Title en Slug velden zijn verplicht en andere velden zijn optioneel.

Verwijzend naar voorbeelden van onlangs uitgebrachte thema's, heb ik patroonregistratie opnieuw geactualiseerd in deze TT2 Gopher-blokken demo-thema, voorbereid op een vorig artikel over de CSS-Tricks.

Laten we in de volgende stappen onderzoeken hoe a footer-with-background.php patroon geregistreerd met PHP en gebruikt in een footer.html sjabloon is gerefactored.

2.1: Maak een /patterns map in de hoofdmap van het thema

De eerste stap is het maken van een /patterns map in de hoofdmap van het TT2 Gopher-thema en verplaats de footer-with-background.php patroonbestand naar /patterns map en refactor.

2.2: Patroongegevens toevoegen aan de bestandskop

Maak vervolgens de volgende registratievelden voor patroonkopteksten.

<?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 /-->

Een patroonbestand heeft een titelveld bovenaan geschreven als PHP-opmerkingen. Gevolgd door de blok-inhoud geschreven in HTML-formaat.

2.3: Patrooninhoud aan het bestand toevoegen

Laten we voor de inhoudssectie de codefragmenten naar binnen kopiëren enkele aanhalingstekens (Bv '...') uit het inhoudsgedeelte van de footer-with-background en vervang de <!-- 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 -->

Het volledige codefragment van de patterns/footer-with-background.php bestand kan worden bekeken hier op de GitHub.

Houdt u er rekening mee dat de /inc/patterns en block-patterns.php zijn extra's, niet vereist in WordPress 6.0, en alleen opgenomen voor demo-doeleinden.

2.4: Verwijzen naar de patronen-naaktslak in de sjabloon

Het toevoegen van de bovenstaande gerefactored footer-with-background.php patroon naar footer.html sjabloon is precies hetzelfde als beschreven in de vorige sectie (paragraaf 1, 2.2).

Als we nu het voettekstgedeelte van de site in een blokeditor of front-end van onze site in een browser bekijken, wordt het voettekstgedeelte weergegeven.

Patrooncategorieën en -typen Registratie (optioneel)

Om blokpatronen te categoriseren, moeten de patrooncategorieën en -types worden geregistreerd in thema's functions.php bestand.

Laten we een voorbeeld bekijken van categorieën van blokpatronen registreren van het TT2 Gopher-thema.

Na de registratie worden de patronen samen met de standaard basispatronen weergegeven in de patrooninvoegeenheid. Om themaspecifieke categorielabels toe te voegen in de patroneninvoeger, moeten we de vorige fragmenten wijzigen door themanaamruimte toe te voegen:

/**
* 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 );

De footer-with-background patroon is zichtbaar in de patronen die zijn ingevoegd met zijn voorbeeld (indien geselecteerd):

Dit proces vereenvoudigt het maken en weergeven van blokpatronen in blokthema's aanzienlijk. Het is beschikbaar in WordPress 6.0 zonder de Gutenberg-plug-in te gebruiken.

Voorbeelden van thema's zonder patroonregistratie

Early adopters zijn deze functie al gaan gebruiken in hun blokthema's. Een paar voorbeelden van de thema's, die verkrijgbaar zijn bij de thema directory, die patronen laden zonder registratie staan ​​hieronder vermeld:

• Archaeo – 12 patronen
• Hanger – 13 patronen
• op Afstand – 11 patronen
• Skatepark – 10 patronen
• Stewart – 17 patronen
• Boek – 16 patronen
• Avant-garde – 14 patronen

Sectie 3: Patronen maken en gebruiken met low-code

De officiële patronenmap bevat door de gemeenschap bijgedragen creatieve ontwerpen, die naar wens kunnen worden gekopieerd en aangepast om inhoud te creëren. Patronen gebruiken met een blokeditor was nog nooit zo eenvoudig!

Alle patronen uit de steeds groter wordende map kunnen ook worden toegevoegd aan blokthema's door simpelweg te "kopiëren en plakken" of op te nemen in de theme.json bestand door te verwijzen naar hun directory patroon naaktslak. Vervolgens zal ik kort bespreken hoe gemakkelijk dit kan worden bereikt met zeer beperkte codering.

Patronen uit de patronenmap toevoegen en aanpassen

3.1: Patroon kopiëren van map naar een pagina

Hier, ik gebruik dit voettekstgedeelte patroon door FirstWebGeek uit de map patronen. Het patroon gekopieerd door de knop "Patroon kopiëren" te selecteren en het direct op een nieuwe pagina te plakken.

3.2: Gewenste aanpassingen makens

Ik heb slechts een paar wijzigingen aangebracht in de kleur van de lettertypen en de knopachtergrond. Kopieer vervolgens de volledige code van de codebewerker naar een klembord.

Als u niet bekend bent met het gebruik van de code-editor, ga dan naar opties (met drie stippen, rechtsboven), klik op de knop Code-editor en kopieer de volledige code vanaf hier.

3.3: Maak een nieuw bestand in de map /patterns

Laten we eerst een nieuwe . maken /patterns/footer-pattern-test.php bestand en voeg het vereiste patroonkopgedeelte toe. Plak vervolgens de volledige code (stap 3, hierboven). Het patroon is gecategoriseerd in het voettekstgebied (regels: 5), we kunnen het nieuw toegevoegde patroon bekijken in de patrooninvoeger.

<?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: Bekijk het nieuwe patroon in de inserter

Om de nieuw toegevoegde . te bekijken Footer pattern from patterns library patroon, ga naar een bericht of pagina en selecteer het invoegpictogram (blauw plus-symbool, linksboven) en selecteer vervolgens de categorieën "TT2 Gopher - Voettekst". Het nieuw toegevoegde patroon wordt weergegeven in het linkerdeelvenster, samen met andere voettekstpatronen en het voorbeeld ervan aan de rechterkant (indien geselecteerd):

Patronen direct registreren in theme.json filet

In WordPress 6.0 is het mogelijk om alle gewenste patronen uit de patroonmap te registreren met theme.json bestand met de volgende syntaxis. De 6.0 dev-notitiestatussen, "het veld Patterns is een array van [patroon naaktslakken] uit de patroonmap. Pattern slugs kunnen worden geëxtraheerd door de [URL] in de enkelvoudige patroonweergave in de Pattern Directory.”

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

Deze korte WordPress 6.0-functies video laat zien hoe patronen worden geregistreerd in de /patterns map (om 3:53) en het registreren van de gewenste patronen van de patroonregisseur in a theme.json bestand (om 3:13).

Vervolgens is het geregistreerde patroon beschikbaar in het zoekvak van de patroneninvoeger, dat dan beschikbaar is voor gebruik, net als de thema-gebundelde patronenbibliotheek.

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

In dit voorbeeld is de patroonnaaktslak footer-section-design-with-3-column-description-social-media-contact-and-newsletter van het eerder voorbeeld is geregistreerd via theme.json.

Patroonmodel voor het maken van pagina's

Als onderdeel van "bouwen met patronen” initiatieven, WordPress 6.0 biedt een patroonmodale optie aan thema-auteurs om paginalay-outpatronen toe te voegen aan het blokthema, zodat sitegebruikers paginalay-outpatronen kunnen selecteren (bijvoorbeeld een pagina over, een contactpagina, een teampagina, enz.) terwijl ze een pagina maken. Het volgende is een voorbeeld uit: de dev-notitie:

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 -->', )
);

Deze functie is momenteel beperkt tot paginaberichttype alleen en nog niet voor "Posts Post Type".

De patroon voor het maken van pagina's modaal kan ook volledig worden uitgeschakeld door het bloktype post-content van alle patronen te verwijderen. Een voorbeeld voorbeeldcode is hier beschikbaar.

U kunt de discussie van GitHub volgen en eraan deelnemen via de links die worden vermeld onder de bronsectie hieronder.

Patronenmap gebruiken om pagina te bouwen

Patronen uit de directory kunnen ook worden gebruikt om de gewenste bericht- of paginalay-out te maken, vergelijkbaar met paginabuilders. De GutenbergHub team heeft gemaakt een experimentele online app voor het maken van pagina's patronen rechtstreeks uit de directory gebruiken (inleidende video). Vervolgens kunnen de codes uit de app worden gekopieerd en in een site worden geplakt, wat het bouwcomplexe paginalay-outproces aanzienlijk vereenvoudigt zonder codering.

In deze korte video, Jamie Marsland demonstreert (om 1:30) hoe de app kan worden gebruikt om een ​​volledige paginalay-out te maken, vergelijkbaar met paginabuilder, met behulp van de gewenste paginasecties van de directory.

Afsluiten

Patronen stellen gebruikers in staat om hun veelgebruikte inhoudslay-out (bijvoorbeeld hero-pagina, call-out, enz.) op elke pagina opnieuw te creëren en de barrières te verlagen voor het presenteren van inhoud in stijlen, die voorheen niet mogelijk waren zonder codeervaardigheden. net als de plugins en thema's mappen, de nieuwe patronen directory biedt gebruikers opties om een ​​breed scala aan patronen van hun keuze uit de patroondirectory te gebruiken en inhoud in stijl te schrijven en weer te geven.

Inderdaad, blokpatronen zullen alles veranderen en dit is zeker een spelwisselaar functie in het WordPress-themalandschap. Wanneer het volledige potentieel van bouwen met patronen inspanning beschikbaar komt, zal dit de manier veranderen waarop we blokthema's ontwerpen en prachtige inhoud creëren, zelfs met low-code kennis. Voor veel creatieve ontwerpers kan de patronenmap ook een geschikte manier zijn om hun creativiteit.

---

Resources

WordPress 6.0

• WordPress 6.0 Veldgids (WordPress-kern)
• WordPress 6.0 verkennen: stijlvariaties, gebruikersinterface voor blokvergrendeling, schrijfverbeteringen – 22 minuten video (Anne McCarthy)
• WordPress 6.0-functies in 4 minuten (Dave Smit)
• Wat is er nieuw in WordPress 6.0: nieuwe blokken, stijlwisseling, sjabloonbewerking, webfonts-API en nog veel meer (Kinsta)

Patronen maken

• Inleiding tot blokpatronen (Volledige sitebewerking)
• Inleiding tot de video over blokpatronen, 14 minuten (Leer WordPress)
• Blokpatronen (Handboek Blokeditor)
• Dus je wilt blokpatronen maken? (WordPress-blog)
• Hoe u low-code blokpatronen in WordPress kunt maken en delen (GoDaddy)

Verbetering van patronen (GitHub)

• Bouwen met patronen #38529
• Patronen als deelelementen #39281
• Toevoegen: Optie om een ​​patroon te kiezen bij het maken van de pagina. #40034
• Blokpatronen voor het maken van pagina's. #38787
• Toevoegen: Paginastartopties (sjablonen en patronen) #39147

Blog artikelen

• Gutenberg-patronen: de toekomst van het bouwen van pagina's in WordPress (rijke Tabor)
• Blokpatronen gebruiken om het bouwen van WordPress-sites te versnellen (GoDaddy)
• Blokpatronen zullen alles veranderen (WP Taverne)

---

Blokthemapatronen maken in WordPress 6.0 oorspronkelijk gepubliceerd op CSS-trucs. Je zou moeten ontvang de nieuwsbrief.

• Coinsmart. Europa's beste Bitcoin- en crypto-uitwisseling.
• Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. GRATIS TOEGANG.
• CryptoHawk. Altcoin-radar. Gratis proefversie.
• Bron: https://css-tricks.com/how-to-create-block-theme-patterns-in-wordpress-6-0/