Kuidas luua WordPressi 6.0-s plokkiteema mustreid

Plokkide mustrid, mida sageli nimetatakse ka kui lõigudaastal tutvustati WordPress 5.5 võimaldab kasutajatel luua ja jagada eelnevalt määratletud plokkide paigutusi mustrite kataloog. Kataloog on koduks paljudele WordPressi kogukonna loodud kureeritud mustritele. Need mustrid on saadaval lihtsas kopeerimis- ja kleepimisvormingus, ei nõua kodeerimisalaseid teadmisi ja säästavad seega kasutajaid palju aega.

Vaatamata paljudele mustreid käsitlevatele artiklitele, puuduvad põhjalikud ja ajakohased artiklid mustrite loomise kohta, mis hõlmaksid uusimaid täiustatud funktsioone. Selle artikli eesmärk on täita lünk, keskendudes hiljutistele täiustatud funktsioonidele, nagu mustrite loomine ilma registreerimiseta, ning pakkuda ajakohast samm-sammult juhendit nende loomiseks ja kasutamiseks plokkideemades algajatele ja kogenud autoritele.

Alates selle käivitamisest WordPress 5.9 ja Kakskümmend kakskümmend kaks (TT2) vaiketeema, plokkide mustrite kasutamine plokiteemade puhul on levinud. Olen olnud suur fänn blokeeri mustrid ning olen neid loonud ja oma plokiteemades kasutanud.

Uus WordPress 6.0 pakub kolm peamist mustrit sisaldavad autorite täiustusi:

• Mustri registreerimise lubamine läbi /patterns kaust (sarnane /parts, /templatesja /styles registreerimine).
• Mustrite registreerimine avalikust mustrite kataloogist, kasutades theme.json.
• Mustrite lisamine, mida saab kasutajale uue lehe loomisel pakkuda.

Sissejuhatuses WordPress 6.0 video uurimine, Automaatne tootekontakt Ann McCathy tõstab esile mõned äsja täiustatud mustrite funktsioonid (alates kell 15:00) ja arutab tulevasi mustrite täiustamise plaane, sealhulgas mustrid lõikeelementidena, pakkudes võimalusi vali lehe loomisel muster, integreerides mustrikataloogide otsingu ja palju muud.

Eeldused

Artiklis eeldatakse, et lugejatel on põhiteadmised WordPressi täieliku saidi redigeerimise (FSE) liidese ja plokkide teemade kohta. The Ploki toimetaja käsiraamat ja Täielik saidi redigeerimine veebisait pakub kõige ajakohasemaid juhendeid kõigi FSE funktsioonide, sealhulgas käesolevas artiklis käsitletud plokkide teemade ja mustrite õppimiseks.

1. jagu: arenevad lähenemisviisid plokkide mustrite loomiseks

Esialgne lähenemine plokkide mustrite loomisele nõudis plokimustri API kasutamist kas kohandatud pistikprogrammina või otse registreerituna functions.php fail plokiteemaga komplekteerimiseks. Äsja käivitatud WordPress 6.0 tutvustas mitmeid uusi ja täiustatud funktsioone, mis töötavad mustrite ja teemadega, sealhulgas mustrite registreerimine /patterns kaust ja a lehe loomise muster modaalne.

Taustaks anname esmalt lühiülevaate, kuidas mustri registreerimise töövoog arenes registri mustri API kasutamisest otse laadimiseni ilma registreerimata.

Kasutage juhtumi näidet 1: Twenty Twenty-One

Vaikimisi Teema kakskümmend kakskümmend üks (TT1) ja TT1 Blokeerib teema (TT1 õde) demonstreerib, kuidas saab teemades plokimustreid registreerida functions.php. Eksperimentaalses teemas TT1 Blocks on see singel block-pattern.php sisaldav fail kaheksa ploki mustrid on lisatud functions.php nagu include nagu siin näidatud.

Kohandatud ploki muster tuleb registreerida kasutades register_block_pattern funktsioon, mis saab kaks argumenti — title (mustrite nimi) ja properties (mustri omadusi kirjeldav massiiv).

Siin on näide lihtsa „Tere maailm” lõigumustri registreerimisest Teema kujundaja artikkel:

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

Pärast registreerimist, register_block_pattern() funktsioon tuleks välja kutsuda seadmega ühendatud käitlejast init konks nagu kirjeldatud siin.

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

Kui plokkide mustrid on registreeritud, on need plokiredaktoris nähtavad. Üksikasjalikuma dokumentatsiooni leiate siit Blokeerimismustri registreerimine.

Ploki mustri omadused

Lisaks nõutavale title ja content omadused, ploki toimetaja käsiraamat loetleb järgmised valikulised mustri omadused:

• title (nõutud): mustri inimloetav pealkiri.
• content (nõutud): blokeeri mustri jaoks HTML-märgistus.
• description (Valikuline): visuaalselt peidetud tekst, mida kasutatakse sisestaja mustri kirjeldamiseks. Kirjeldus on valikuline, kuid see on tungivalt soovitatav, kui pealkiri ei kirjelda mustri tegevust täielikult. Kirjeldus aitab kasutajatel mustrit otsimise ajal leida.
• categories (Valikuline): registreeritud mustrite kategooriate massiiv, mida kasutatakse plokimustrite rühmitamiseks. Plokimustreid saab näidata mitmes kategoorias. Siin kasutamiseks tuleb kategooria eraldi registreerida.
• keywords (Valikuline): hulk varjunimesid või märksõnu, mis aitavad kasutajatel otsingu ajal mustrit avastada.
• viewportWidth (Valikuline): täisarv, mis määrab mustri kavandatud laiuse, et võimaldada mustri skaleeritud eelvaadet sisestajas.
• blockTypes (Valikuline): plokitüüpide massiiv, millega muster on mõeldud kasutamiseks. Iga väärtus peab olema deklareeritud ploki väärtus name.
• inserter (Valikuline): Vaikimisi kuvatakse sisestajas kõik mustrid. Mustri peitmiseks nii, et seda saab sisestada ainult programmiliselt, määrake inserter et false.

Järgmine on näide tsiteerimismustri pistikprogrammi koodilõikudest, mis on võetud rakendusest WordPressi ajaveeb.

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

Mustrite kasutamine mallifailis

Kui mustrid on loodud, saab neid kasutada teemamalli failis järgmise plokimärgistusega:

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

Näide pärit see GitHubi hoidla näitab "" kasutamistfooter-with-background"mustriga nälkjas"tt2gopher” prefiks TT2 Gopheri plokkide teemas.

Plokkiteemade ja Gutenbergi pistikprogrammi varased kasutajad kasutasid ära ka klassikaliste teemade mustreid. Vaikimisi Kakskümmend kakskümmend ja minu lemmikud Ekselli teemad (a demo saidi siin) on head näited, mis näitavad, kuidas saab klassikalistele teemadele lisada mustriomadusi.

Kasutage juhtumi näidet 2: kakskümmend kakskümmend kaks

Kui teema sisaldab vaid mõnda mustrit, on arendus ja hooldus üsna juhitavad. Kui aga plokiteema sisaldab palju mustreid, nagu TT2 teema puhul, siis pattern.php fail muutub väga suureks ja raskesti loetavaks. TT2 vaiketeema, mis komplekteerub rohkem kui 60 mustrit, tutvustab ümberkujundatud mustri registreerimise töövoogu struktuur mida on lihtsam lugeda ja hooldada.

TT2 teemast näiteid võttes arutleme lühidalt selle lihtsustatud töövoo toimimise üle.

2.1: mustrite kategooriate registreerimine

Demonstreerimise eesmärgil lõin TT2 lapseteema ja seadistasin selle kohalikul testisaidil koos näiva sisuga. Pärast TT2 registreerisin footer-with-background ja lisati oma järgmistesse mustrikategooriate massiivi loendisse block-patterns.php faili.

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

Selles koodinäites on iga jaotises loetletud muster $block_patterns = array() on kutsunud foreach() funktsioon, mis requiresa patterns kataloogifail massiivi loetletud mustrinimega, mille lisame järgmises etapis.

2.2: mustrifaili lisamine /inc/patterns kausta

Järgmiseks peaksid meil olema kõik loetletud mustrite failid $block_patterns = array(). Siin on näide ühest mustrifailist, 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 -->',
);

Viitame mustrile footer.html malli osa:

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

See sarnaneb pealkirja või jaluse osade lisamisega mallifaili.

Mustrid saab sarnaselt lisada parts/footer.html mall, muutes seda viitamiseks slug teema mustrifailist (footer-with-background):

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

Kui nüüd külastame plokiredaktori mustrite sisestajat, siis Footer with background peaks olema meie kasutamiseks saadaval:

Järgmisel ekraanipildil on vastloodud jalus koos taustamustriga esiotsas.

Nüüd, kui mustrid on muutunud plokkiteema lahutamatuks osaks, on paljud mustrid plokiteemadesse koondatud, näiteks ruut, Seemik, Maimaa, Zooloog, Geoloog — järgides ülalkirjeldatud töövoogu. Siin on näide Quadrat teemast /inc/patterns kaust koos a plokkmustri registreerimine fail ja failide loend sisuallika ja nõutava mustri päisega jooksul return array() funktsioon.

2. jaotis: Mustrite loomine ja laadimine ilma registreerimiseta

Pange tähele, et selle funktsiooni kasutamiseks on vaja teie saidile installida WordPress 6.0 või Gutenbergi pistikprogramm 13.0 või uuem.

see uus WordPress 6.0 funktsioon võimaldab mustri registreerimist standardsete failide ja kaustade kaudu - /patterns, tuues sarnaseid konventsioone nagu /parts, /templatesja /styles.

Protsess, nagu on kirjeldatud ka punktis see WP Tavern artikkel hõlmab järgmist kolme sammu:

• mustrite kausta loomine teema juurtes
• lisades pistikprogrammi stiilis mustri päise
• mustri allika sisu

Tüüpiline mustri päise märgistus, mis on võetud artiklist, on näidatud allpool:

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

Nagu eelmises jaotises kirjeldatud, ainult Title ja Slug väljad on kohustuslikud ja muud väljad on valikulised.

Viidates näidetele hiljuti avaldatud teemadest, muutsin mustri registreerimise sisse see TT2 Gopher Blocks demo teema, ette valmistatud eelmine artikkel CSS-trikkide kohta.

Järgmistes sammudes uurime, kuidas a footer-with-background.php muster registreeritud PHP-ga ja kasutatakse a footer.html mall on ümber kujundatud.

2.1: Looge a /patterns kaust teema juurtes

Esimene samm on luua a /patterns kausta TT2 Gopheri teema juurtes ja teisaldage footer-with-background.php mustrifail /patterns kaust ja refaktor.

2.2: lisage faili päisesse mustri andmed

Järgmisena looge järgmised mustri päise registreerimisväljad.

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

Mustrifaili pealkirjaväli on kirjutatud PHP kommentaaridena. Järgneb plokk-sisu kirjutatud HTML-vormingus.

2.3: lisage faili mustri sisu

Kopeerime sisujaotise jaoks koodilõigud üksikud jutumärgid (nt '...') sisu jaotisest footer-with-background ja asendage <!-- 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 -->

Kogu koodilõik patterns/footer-with-background.php faili saab vaadata siin GitHubis.

Pange tähele, et /inc/patterns ja block-patterns.php See on väljavõte, pole WordPress 6.0 jaoks nõutav ja kaasatud ainult demoeesmärkidel.

2.4: mallis olevatele mustritele viitamine

Ülaltoodud refaktoreeritud lisamine footer-with-background.php muster juurde footer.html mall on täpselt sama, mis on kirjeldatud eelmises jaotises (jaotis 1, 2.2).

Nüüd, kui vaatame saidi jaluse osa plokiredaktoris või meie saidi esiosa brauseris, kuvatakse jaluse jaotis.

Mustrikategooriad ja tüübid Registreerimine (valikuline)

Plokimustrite kategoriseerimiseks tuleb mustrite kategooriad ja tüübid registreerida teemades functions.php faili.

Vaatleme näiteks plokimustri kategooriate registreerimine TT2 Gopheri teemast.

Pärast registreerimist kuvatakse mustrid mustri sisestajas koos põhiliste vaikemustritega. Teemaspetsiifiliste kategooria siltide lisamiseks mustrite sisestajasse peaksime muutma eelmisi väljavõtteid, lisades teema nimeruumi:

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

. footer-with-background muster on nähtav selle eelvaatega sisestatud mustrites (kui see on valitud):

See protsess lihtsustab oluliselt plokkide mustrite loomist ja kuvamist plokiteemades. See on saadaval versioonis WordPress 6.0 ilma Gutenbergi pistikprogrammi kasutamata.

Näited teemadest ilma mustrite registreerimiseta

Varajased kasutajad on seda funktsiooni juba oma plokkideemades kasutama hakanud. Mõned näited teemadest, mis on saadaval saidilt teemade kataloog, mille laadimismustrid ilma registreerimiseta on loetletud allpool:

• Archeo – 12 patterns
• ripats – 13 patterns
• Kaugjuhtimine – 11 patterns
• Skatepark – 10 patterns
• Stewart – 17 patterns
• Raamat – 16 patterns
• Avangard – 14 patterns

3. jaotis: Madala koodiga mustrite loomine ja kasutamine

. ametlik mustrite kataloog sisaldab kogukonna kaasatud loomingulisi kujundusi, mida saab sisu loomiseks kopeerida ja kohandada. Mustrite kasutamine plokiredaktoriga pole kunagi olnud nii lihtsam!

Kõiki järjest kasvavast kataloogist pärit mustreid saab lisada ka lihtsalt kopeerimise ja kleepimise teel blokeeritavatesse teemadesse või lisada theme.json faili, viidates nende kataloogile mustriga nälkjas. Järgmisena käsitlen lühidalt, kui lihtsalt seda väga piiratud kodeerimisega teha saab.

Mustrite lisamine ja kohandamine mustrite kataloogist

3.1: kopeerige muster kataloogist lehele

Siin ma kasutan see jaluse sektsiooni muster autor FirstWebGeek mustrite kataloogist. Kopeeris mustri, valides nupu „Kopeeri muster”, ja kleepis selle otse uuele lehele.

3.2: tehke soovitud kohanduss

Tegin vaid mõned muudatused fontide ja nuppude tausta värvis. Seejärel kopeeriti kogu kood failist koodi redaktor lõikelauale.

Kui te pole koodiredaktori kasutamisega tuttav, minge valikutesse (kolme punktiga üleval paremal), klõpsake nuppu Koodiredaktor ja kopeerige kogu kood siit.

3.3: looge kaustas /patterns uus fail

Esiteks loome uue /patterns/footer-pattern-test.php faili ja lisage vajalik mustri päise jaotis. Seejärel kleepige kogu kood (samm 3, ülal). Muster on kategoriseeritud jaluse alas (read: 5), äsja lisatud saab vaadata mustri sisestajas.

<?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: vaadake uut mustrit sisestajas

Äsja lisatud vaatamiseks Footer pattern from patterns library muster, minge mis tahes postitusele või lehele ja valige sisestaja ikoon (sinine plussmärk, vasakus ülanurgas) ja seejärel valige kategooriad „TT2 Gopher – Footer”. Vasakpoolsel paneelil kuvatakse äsja lisatud muster koos teiste jalusemustrite ja selle eelvaatega paremal (kui see on valitud):

Mustrite registreerimine otse theme.json fail

WordPress 6.0-s on võimalik registreerida soovitud mustrid mustrite kataloogist theme.json faili järgmise süntaksiga. The 6.0 arendaja märkus, "mustrite väli on massiiv [mustriga nälkjad] mustrite kataloogist. Mustri nälkjaid saab eraldada [URL] kaudu mustrite kataloogi ühe mustri vaates.

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

see lühike WordPress 6.0 funktsioonide video näitab, kuidas mustreid registreeritakse /patterns kausta (kell 3:53) ja soovitud mustrite registreerimine mustrijuhist a theme.json fail (kell 3:13).

Seejärel on registreeritud muster saadaval mustrite sisestaja otsingukastis, mis on seejärel saadaval kasutamiseks nagu teemakomplekteeritud mustrite teegi.

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

Selles näites musternälkjas footer-section-design-with-3-column-description-social-media-contact-and-newsletter alates varasem näide on registreeritud kaudu theme.json.

Lehekülje loomise mustri mudel

Osana "mustritega hoone” algatused, WordPress 6.0 pakub mustri modaalset võimalust teema autoritele lisada lehepaigutuse mustrid ploki teemasse, võimaldades saidi kasutajatel valida lehe küljenduse mustreid (nt leht, kontaktileht, meeskonna leht jne) lehe loomise ajal. Järgmine näide on võetud arendaja märkus:

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

See funktsioon on praegu piiratud lehe postituse tüübiga ainult ja mitte veel "Postituste postituse tüübi jaoks".

. lehe loomise muster modaalne saab ka täielikult keelata, eemaldades kõigi mustrite sisujärgse ploki tüübi. Näidiskoodi näidis on saadaval siin.

Saate jälgida GitHubi arutelu ja selles osaleda allolevas ressursi jaotises loetletud linkide kaudu.

Mustrite kataloogi kasutamine lehe koostamiseks

Kataloogi mustreid saab kasutada ka soovitud postituse või lehepaigutuse loomiseks sarnaselt leheehitajatega. The Gutenbergi keskus meeskond on loonud eksperimentaalne veebilehtede koostamise rakendus kasutades mustreid otse kataloogist (tutvustav video). Seejärel saab rakendusest pärit koode saidile kopeerida ja kleepida, mis lihtsustab oluliselt keeruka lehepaigutuse loomist ilma kodeerimiseta.

In see lühike video, Jamie Marsland demonstreerib (kell 1:30), kuidas rakendust saab kasutada terve lehepaigutuse loomiseks, mis sarnaneb lehe koostajaga, kasutades kataloogi soovitud lehejaotisi.

Pakke kuni

Mustrid võimaldavad kasutajatel uuesti luua oma tavapäraselt kasutatava sisu paigutust (nt kangelase leht, väljakutsumine jne) mis tahes lehel ja vähendada takistusi sisu esitamisel stiilides, mis varem polnud ilma kodeerimisoskuseta võimalik. Täpselt nagu pluginad ja teemad kataloogid, uus mustrid kataloog pakub kasutajatele võimalusi kasutada laia valikut mustrite kataloogist valitud mustreid ning kirjutada ja kuvada sisu stiilselt.

Tõepoolest, plokkide mustrid muudavad kõike ja kindlasti on see a mängu vahetaja funktsioon WordPressi teemamaastikul. Kui kogu potentsiaal mustritega hoone jõupingutused muutuvad kättesaadavaks, muudab see viisi, kuidas kujundame plokkide teemasid ja loome ilusat sisu isegi vähese koodiga teadmistega. Paljude loominguliste disainerite jaoks võib mustrite kataloog pakkuda ka sobivat võimalust oma esitlemiseks loovus.

---

Vahendid

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)
• What’s New in WordPress 6.0: New Blocks, Style Switching, Template Editing, Webfonts API, and Much More (Kinsta)

Mustrite loomine

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

Mustrite täiustamine (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

Blogipäevikud

• 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 Tavern)

---

Kuidas luua WordPressi 6.0-s plokkiteema mustreid algselt avaldatud CSS-nipid. Sa peaksid hankige uudiskiri.

• Münditark. Euroopa parim Bitcoini ja krüptobörs.
• Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. TASUTA PÄÄS.
• CryptoHawk. Altcoini radar. Tasuta prooviversioon.
• Source: https://css-tricks.com/how-to-create-block-theme-patterns-in-wordpress-6-0/