Kako ustvariti vzorce blokovnih tem v WordPressu 6.0

Blok vzorci, ki se pogosto imenuje tudi oddelki, so bili predstavljeni v WordPress 5.5 da uporabnikom omogoči gradnjo in skupno rabo vnaprej določenih postavitev blokov v imenik vzorcev. Imenik je dom širokega nabora kuriranih vzorcev, ki jih je oblikovala skupnost WordPress. Ti vzorci so na voljo v preprostem formatu za kopiranje in lepljenje, ne zahtevajo znanja kodiranja in zato uporabnikom veliko prihranijo čas.

Kljub številnim člankom o vzorcih primanjkuje izčrpnih in posodobljenih člankov o ustvarjanju vzorcev, ki bi zajemali najnovejše izboljšane funkcije. Namen tega članka je zapolniti vrzel s poudarkom na nedavnih izboljšanih funkcijah, kot je ustvarjanje vzorcev brez registracije, in ponuditi posodobljen vodnik po korakih za njihovo ustvarjanje in uporabo v blok temah za začetnike in izkušene avtorje.

Od uvedbe WordPress 5.9 in Dvaindvajset (TT2) privzeta tema, se je uporaba blokovnih vzorcev v blokovnih temah razširila. Bil sem velik oboževalec blok vzorcev ter jih ustvaril in uporabil v svojih blokovnih temah.

Novi WordPress 6.0 Ponuja trije glavni vzorci vključujejo izboljšave za avtorje:

• Omogoča registracijo vzorca /patterns mapa (podobno kot /parts, /templatesin /styles registracija).
• Registriranje vzorcev iz javnega imenika vzorcev z uporabo theme.json.
• Dodajanje vzorcev, ki se lahko ponudijo uporabniku ob ustvarjanju nove strani.

V uvodu Video o raziskovanju WordPress 6.0, povezovalka izdelkov Automattic Ann McCathy izpostavlja nekaj na novo izboljšanih funkcij vzorcev (z začetkom ob 15:00) in razpravlja o prihodnjih načrtih izboljšave vzorcev – ki vključujejo vzorci kot delilni elementi, ki ponuja možnosti za izberite vzorec pri ustvarjanju strani, integracijo iskanja po imeniku vzorcev in več.

Predpogoji

Članek predpostavlja, da imajo bralci osnovno znanje o vmesniku za urejanje celotnega spletnega mesta WordPress (FSE) in temah blokov. The Priročnik za urejevalnik blokov in Celotno urejanje spletnega mesta spletno mesto ponuja najsodobnejše vodnike za učenje vseh funkcij FSE, vključno s temami blokov in vzorci, obravnavanimi v tem članku.

Razdelek 1: Razvijajoči se pristopi k ustvarjanju vzorcev blokov

Začetni pristop k ustvarjanju vzorcev blokov je zahteval uporabo API-ja vzorcev blokov kot vtičnika po meri ali neposredno registriranega v functions.php datoteko za povezovanje s temo bloka. Novo izdani WordPress 6.0 je predstavil več novih in izboljšanih funkcij za delo z vzorci in temami, vključno z registracijo vzorcev prek /patterns mapo in a modalni vzorec ustvarjanja strani.

Za ozadje si najprej na kratko oglejmo, kako se je delovni tok registracije vzorcev razvil od uporabe API-ja registrskega vzorca do neposrednega nalaganja brez registracije.

Primer uporabe 1: Twenty Twenty-One

Privzeto Tema Enaindvajset (TT1) in TT1 Blocks tema (brat TT1) prikazujejo, kako je mogoče vzorce blokov registrirati v temi functions.php. Ta singel v eksperimentalni temi TT1 Blocks blok-vzorec.php datoteka, ki vsebuje 8 vzorci blokov so dodani functions.php kot include kot je prikazano tukaj.

Vzorec blokov po meri je treba registrirati uporabi register_block_pattern funkcija, ki prejme dva argumenta — title (ime vzorcev) in properties (matrika, ki opisuje lastnosti vzorca).

Tukaj je primer registracije preprostega vzorca odstavka »Hello World« iz tega Članek Theme Shaper:

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

Po registraciji se register_block_pattern() funkcijo je treba poklicati iz upravljalnika, ki je priključen na init kavelj, kot je opisano tukaj.

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

Ko so vzorci blokov registrirani, so vidni v urejevalniku blokov. Podrobnejšo dokumentacijo najdete v tem Blokiraj registracijo vzorca.

Lastnosti vzorca bloka

Poleg zahtevanega title in content lastnosti, the priročnik za urejanje blokov navaja naslednje neobvezne lastnosti vzorca:

• title (Obvezno): človeku berljiv naslov za vzorec.
• content (Obvezno): Blokiraj oznako HTML za vzorec.
• description (Neobvezno): vizualno skrito besedilo, ki se uporablja za opis vzorca v vstavljalniku. Opis ni obvezen, vendar ga zelo priporočamo, če naslov ne opisuje v celoti, kaj vzorec počne. Opis bo uporabnikom med iskanjem pomagal odkriti vzorec.
• categories (Neobvezno): Matrika registriranih kategorij vzorcev, ki se uporabljajo za združevanje vzorcev blokov. Vzorci blokov so lahko prikazani v več kategorijah. Za uporabo tukaj mora biti kategorija ločeno registrirana.
• keywords (Neobvezno): Niz vzdevkov ali ključnih besed, ki uporabnikom pomagajo odkriti vzorec med iskanjem.
• viewportWidth (Neobvezno): Celo število, ki določa predvideno širino vzorca za omogočanje pomanjšanega predogleda vzorca v vstavljalniku.
• blockTypes (Neobvezno): Niz vrst blokov, s katerimi naj bi se uporabljal vzorec. Vsaka vrednost mora biti prijavljenega bloka name.
• inserter (Neobvezno): Privzeto bodo vsi vzorci prikazani v vstavljalniku. Če želite skriti vzorec, tako da ga je mogoče vstaviti samo programsko, nastavite inserter do false.

Sledi primer izrezkov kode vtičnika vzorca narekovajev, vzetih iz 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 -->', )
);

Uporaba vzorcev v datoteki predloge

Ko so vzorci ustvarjeni, jih je mogoče uporabiti v datoteki predloge teme z naslednjo oznako bloka:

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

Primer iz tem repozitoriju GitHub prikazuje uporabo "footer-with-background" vzorec polža z "tt2gopher” predpona v temi TT2 Gopher blocks.

Prvi uporabniki blokovnih tem in vtičnika Gutenberg so izkoristili tudi vzorce v klasičnih temah. Privzeto Dvajset dvajset in moje najljubše teme Eksell (a demo stran tukaj) so dobri primeri, ki prikazujejo, kako je mogoče klasičnim temam dodati značilnosti vzorcev.

Primer uporabe 2: dvaindvajset dvaindvajset

Če tema vključuje le nekaj vzorcev, sta razvoj in vzdrževanje precej obvladljiva. Vendar, če tema bloka vključuje veliko vzorcev, na primer v temi TT2, potem pattern.php datoteka postane zelo velika in težko berljiva. Privzeta tema TT2, ki združuje več kot 60 vzorci, prikazuje preoblikovan potek dela registracije vzorca Struktura ki ga je lažje brati in vzdrževati.

Če vzamemo primere iz teme TT2, na kratko razpravljajmo o tem, kako deluje ta poenostavljen potek dela.

2.1: Registriranje kategorij vzorcev

Za namene predstavitve sem ustvaril podrejeno temo TT2 in jo nastavil na svojem lokalnem testnem mestu z nekaj navidezne vsebine. Po TT2 sem se prijavil footer-with-background in dodan naslednjemu matričnemu seznamu kategorij vzorcev v svojem block-patterns.php Datoteka.

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

V tem primeru kode je vsak vzorec, naveden v $block_patterns = array() kliče ga foreach() funkcijo, ki requireh patterns datoteko imenika z navedenim imenom vzorca v matriki, ki jo bomo dodali v naslednjem koraku.

2.2: Dodajanje datoteke z vzorcem v /inc/patterns mapa

Nato bi morali imeti vse navedene datoteke vzorcev v $block_patterns = array(). Tukaj je primer ene od datotek vzorcev, 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 -->',
);

Oglejmo si vzorec v footer.html del predloge:

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

To je podobno dodajanju delov naslova ali noge v datoteko predloge.

Vzorci se lahko podobno dodajo parts/footer.html predlogo tako, da jo spremenite tako, da se nanjo nanaša slug datoteke vzorca teme (footer-with-background):

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

Zdaj, če obiščemo vstavljalnik vzorcev urejevalnika blokov, je Footer with background mora biti na voljo za našo uporabo:

Naslednji posnetek zaslona prikazuje novo ustvarjeno nogo z vzorcem ozadja na sprednji strani.

Zdaj, ko so vzorci postali sestavni del teme blokov, je veliko vzorcev združenih v teme blokov – kot npr kvadratni, Seedlet, Mayland, Zoolog, Geolog — po zgoraj obravnavanem poteku dela. Tukaj je primer teme Quadrat /inc/patterns mapa z a registracija blokovnega vzorca datoteke in seznam datotek z virom vsebine in zahtevano glavo vzorca v return array() funkcija.

2. razdelek: Ustvarjanje in nalaganje vzorcev brez registracije

Upoštevajte, da ta funkcija zahteva namestitev vtičnika WordPress 6.0 ali Gutenberg 13.0 ali novejšo različico na vaše spletno mesto.

Ta nova funkcija WordPress 6.0 omogoča registracijo vzorcev prek standardnih datotek in map – /patterns, ki prinaša podobne konvencije, kot je /parts, /templatesin /styles.

Postopek, kot je opisan tudi v ta gostilna WP člen vključuje naslednje tri korake:

• ustvarjanje mape vzorcev v korenu teme
• dodajanje glave vzorca sloga vtičnika
• vzorec izvorne vsebine

Tipična oznaka glave vzorca, vzeta iz članka, je prikazana spodaj:

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

Samo kot je opisano v prejšnjem razdelku Title in Slug polja so obvezna, ostala polja pa neobvezna.

S sklicevanjem na primere iz nedavno izdanih tem sem preoblikoval registracijo vzorcev v ta TT2 Gopher Blocks demo tema, pripravljena za prejšnji članek o trikih CSS.

V naslednjih korakih raziščimo, kako a footer-with-background.php vzorec registriran pri PHP in se uporablja v a footer.html predloga je preoblikovana.

2.1: Ustvarite a /patterns mapo v korenu teme

Prvi korak je ustvariti a /patterns mapo v korenu teme TT2 Gopher in premaknite footer-with-background.php datoteko z vzorcem v /patterns mapo in refaktor.

2.2: Dodajte podatke o vzorcu v glavo datoteke

Nato ustvarite naslednja polja za registracijo glave vzorca.

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

Datoteka z vzorcem ima zgornje naslovno polje, napisano kot komentarje PHP. Sledi blok-vsebina napisano v formatu HTML.

2.3: Dodajte vsebino vzorca v datoteko

Za razdelek vsebine kopirajmo delčke kode znotraj enojni narekovaji (npr. '...') iz razdelka vsebine footer-with-background in nadomestite <!-- 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 -->

Celoten delček kode patterns/footer-with-background.php datoteko si lahko ogledate tukaj na GitHubu.

Prosimo, upoštevajte, da se /inc/patterns in block-patterns.php so ekstrakt, ki ni potreben v WordPressu 6.0 in je vključen samo za predstavitvene namene.

2.4: Sklicevanje na polž vzorcev v predlogi

Dodajanje zgornjega refaktorja footer-with-background.php vzorec za footer.html predloga je popolnoma enaka opisani v prejšnjem razdelku (razdelek 1, 2.2).

Zdaj, če si ogledamo del noge spletnega mesta v urejevalniku blokov ali sprednjem delu našega spletnega mesta v brskalniku, se prikaže razdelek noge.

Kategorije in vrste vzorcev Registracija (neobvezno)

Za kategorizacijo vzorcev blokov je treba kategorije in vrste vzorcev registrirati v temah functions.php Datoteka.

Oglejmo si primer registracija kategorij vzorcev blokov iz teme TT2 Gopher.

Po registraciji so vzorci prikazani v vstavljalniku vzorcev skupaj z osnovnimi privzetimi vzorci. Če želite v vstavljalnik vzorcev dodati oznake kategorij, specifičnih za temo, bi morali spremeniti prejšnje izrezke z dodajanjem imenskega prostora teme:

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

O footer-with-background vzorec je viden v vzorcih, vstavljenih z njegovim predogledom (če je izbran):

Ta postopek močno poenostavi ustvarjanje in prikazovanje vzorcev blokov v temah blokov. Na voljo je v WordPressu 6.0 brez uporabe vtičnika Gutenberg.

Primeri tem brez registracije vzorcev

Prvi uporabniki so že začeli uporabljati to funkcijo v svojih blok temah. Nekaj ​​primerov tem, ki so na voljo pri imenik teme, da so vzorci obremenitev brez registracije navedeni spodaj:

• Arheo – 12 patterns
• obesek – 13 patterns
• Oddaljena – 11 patterns
• Skatepark – 10 patterns
• Stewart – 17 patterns
• knjiga – 16 patterns
• Avantgarde – 14 patterns

Razdelek 3: Ustvarjanje in uporaba vzorcev z nizko kodo

O uradni imenik vzorcev vsebuje kreativne dizajne, ki jih prispeva skupnost, ki jih je mogoče kopirati in po želji prilagoditi za ustvarjanje vsebine. Uporaba vzorcev z urejevalnikom blokov še nikoli ni bila tako preprosta!

Poljubne vzorce iz nenehno rastočega imenika je mogoče dodati tudi za blokiranje tem s preprostim »kopiranjem in lepljenjem« ali vključitvijo v theme.json datoteko s sklicevanjem na njihov imenik vzorec polž. Nato bom na kratko opisal, kako preprosto je to mogoče doseči z zelo omejenim kodiranjem.

Dodajanje in prilagajanje vzorcev iz imenika vzorcev

3.1: Kopiranje vzorca iz imenika na stran

Tukaj uporabljam ta vzorec razdelka noge avtor FirstWebGeek iz imenika vzorcev. Kopiral vzorec z izbiro gumba »Kopiraj vzorec« in ga neposredno prilepil na novo stran.

3.2: Naredite želeno prilagoditevs

Naredil sem le nekaj sprememb v barvi pisav in ozadju gumbov. Nato kopiral celotno kodo iz urejevalnik kode na odložišče.

Če niste seznanjeni z uporabo urejevalnika kode, pojdite na možnosti (s tremi pikami zgoraj desno), kliknite gumb Urejevalnik kode in kopirajte celotno kodo od tukaj.

3.3: Ustvarite novo datoteko v mapi /patterns

Najprej ustvarimo novo /patterns/footer-pattern-test.php datoteko in dodajte zahtevani razdelek glave vzorca. Nato prilepite celotno kodo (3. korak zgoraj). Vzorec je kategoriziran v območju noge (vrstice: 5), novo dodano si lahko ogledamo v vstavljalniku vzorcev.

<?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: Oglejte si nov vzorec v vstavljalniku

Za ogled na novo dodanih Footer pattern from patterns library vzorec, pojdite na katero koli objavo ali stran in izberite ikono za vstavljanje (modri simbol plus, zgoraj levo) in nato izberite kategorije »TT2 Gopher – Footer«. Novo dodan vzorec je prikazan na levi plošči, skupaj z drugimi vzorci noge in njegovim predogledom na desni (če je izbran):

Registriranje vzorcev neposredno v theme.json datoteka

V WordPress 6.0 je mogoče registrirati poljubne vzorce iz imenika vzorcev z theme.json datoteko z naslednjo sintakso. The Stanja opomb za razvijalce 6.0, »polje vzorcev je niz [vzorci polžev] iz imenika vzorcev. Polže vzorcev je mogoče ekstrahirati z [URL] v pogledu enega vzorca v imeniku vzorcev.«

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

Ta kratek WordPress 6.0 vsebuje video prikazuje, kako se vzorci registrirajo v /patterns mapo (pri 3:53) in registracijo želenih vzorcev iz usmerjevalnika vzorcev v a theme.json datoteka (ob 3:13).

Nato je registrirani vzorec na voljo v iskalnem polju za vstavljanje vzorcev, ki je nato na voljo za uporabo tako kot knjižnica vzorcev v paketu tem.

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

V tem primeru vzorec polž footer-section-design-with-3-column-description-social-media-contact-and-newsletter Iz prejšnji primer je registriran prek theme.json.

Model vzorca ustvarjanja strani

Kot del "gradnja z vzorci“, WordPress 6.0 ponuja modalno možnost vzorca avtorjem tem, da dodajo vzorce postavitve strani v temo bloka, kar uporabnikom spletnega mesta omogoča, da med ustvarjanjem strani izberejo vzorce postavitve strani (npr. stran o tem, stran za stike, stran ekipe itd.). Sledi primer iz opomba razvijalca:

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

Ta funkcija je trenutno omejeno na vrsto objave na strani samo in še ne za »Vrsta objave objav«.

O modalni vzorec ustvarjanja strani lahko tudi popolnoma onemogočite z odstranitvijo vrste bloka po vsebini vseh vzorcev. Primer vzorčne kode je na voljo tukaj.

GitHub-ovi razpravi lahko sledite in v njej sodelujete na povezavah, navedenih v spodnjem razdelku z viri.

Uporaba imenika vzorcev za izdelavo strani

Vzorci iz imenika se lahko uporabijo tudi za ustvarjanje želene objave ali postavitve strani, podobno kot graditelji strani. The GutenbergHub ekipa je ustvarila eksperimentalna spletna aplikacija za ustvarjanje strani z uporabo vzorcev neposredno iz imenika (uvodni video). Nato lahko kode iz aplikacije kopirate in prilepite na spletno mesto, kar močno poenostavi postopek gradnje kompleksne postavitve strani brez kodiranja.

In ta kratek video, Jamie Marsland demonstrira (ob 1:30), kako je mogoče aplikacijo uporabiti za ustvarjanje celotne postavitve strani, podobno graditelju strani, z uporabo želenih odsekov strani v imeniku.

Zavijanje

Vzorci omogočajo uporabnikom, da poustvarijo svojo pogosto uporabljeno postavitev vsebine (npr. glavna stran, poziv itd.) na kateri koli strani in zmanjšajo ovire za predstavitev vsebine v slogih, kar prej ni bilo mogoče brez veščin kodiranja. Tako kot pri plugins in teme imenikov, nov vzorci imenik ponuja uporabnikom možnosti za uporabo široke palete vzorcev po lastni izbiri iz imenika vzorcev ter pisanje in prikaz vsebine v slogu.

Prav zares, blokovni vzorci bodo spremenili vse in zagotovo je to a igra izmenjevalec funkcijo v pokrajini teme WordPress. Ko se izkoristi polni potencial gradnja z vzorci bo na voljo trud, bo to spremenilo način oblikovanja blokovnih tem in ustvarjanja čudovite vsebine tudi z nizkim znanjem kode. Številnim ustvarjalnim oblikovalcem lahko imenik vzorcev ponudi tudi ustrezno pot za predstavitev svojih ustvarjalnost.

---

viri

WordPress 6.0

• WordPress 6.0 Field Guide (WordPress Core)
• Exploring WordPress 6.0: Style Variations, Block Locking UI, Writing Improvements – 22 min video (Anne McCarthy)
• WordPress 6.0 features in 4mins (Dave Smith)
• Kaj je novega v WordPressu 6.0: novi bloki, preklapljanje slogov, urejanje predlog, API za spletne pisave in še veliko več (Kinsta)

Ustvarjanje vzorcev

• Introduction to block patterns (Full Site Editing)
• Introduction to Block Patterns video, 14 mins (Learn WordPress)
• Vzorci blokov (Block Editor Handbook)
• So you want to make block patterns? (WordPress Blog)
• How to create and share low-code Block Patterns in WordPress (GoDaddy)

Izboljšanje vzorcev (GitHub)

• Building with Patterns #38529
• Patterns as Sectioning Elements #39281
• Add: Option to pick a pattern on page creation. #40034
• Block Patterns for page creation. #38787
• Add: Page start options (templates and patterns) #39147

Članki v spletnih dnevnikih

• Gutenberg Patterns: The Future of Page Building in WordPress (Rich Tabor)
• Using Block Patterns to speed up WordPress site builds (GoDaddy)
• Block Patterns Will Change Everything (WP Taverna)

---

Kako ustvariti vzorce blokovnih tem v WordPressu 6.0 prvotno objavljeno na CSS-triki. Moral bi prejemanje glasila.

• Coinsmart. Najboljša evropska borza bitcoinov in kriptovalut.
• Platoblockchain. Web3 Metaverse Intelligence. Razširjeno znanje. PROST DOSTOP.
• CryptoHawk. Altcoin radar. Brezplačen preizkus.
• Source: https://css-tricks.com/how-to-create-block-theme-patterns-in-wordpress-6-0/