Cum se creează modele de teme bloc în WordPress 6.0

Modele de bloc, denumit și frecvent ca secțiuni, au fost introduse în WordPress 5.5 pentru a permite utilizatorilor să construiască și să partajeze aspecte de bloc predefinite în directorul de modele. Directorul este casa unei game largi de modele selectate concepute de comunitatea WordPress. Aceste modele sunt disponibile în format simplu de copiere și inserare, nu necesită cunoștințe de codare și, prin urmare, economisesc mult timp pentru utilizatori.

În ciuda multor articole despre modele, există o lipsă de articole cuprinzătoare și actualizate despre crearea modelelor care să acopere cele mai recente caracteristici îmbunătățite. Acest articol își propune să umple golul concentrându-se pe caracteristicile îmbunătățite recente, cum ar fi crearea de modele fără înregistrare și să ofere un ghid pas cu pas actualizat pentru a le crea și a le utiliza în teme bloc pentru începători și autori experimentați.

De la lansarea WordPress 5.9 si Douăzeci și douăzeci și doi (TT2) tema implicită, utilizarea modelelor de bloc în temele de bloc a proliferat. Am fost un mare fan al tipare de blocuri și le-am creat și folosit în temele mele bloc.

Noul WordPress 6.0 promoții trei modele majore prezintă îmbunătățiri pentru autori:

• Permite înregistrarea modelului prin /patterns folder (similar cu /parts, /templates, și /styles înregistrare).
• Înregistrarea modelelor din directorul public de modele utilizând theme.json.
• Adăugarea de modele care pot fi oferite utilizatorului la crearea unei pagini noi.

Într-o introducere Explorând videoclipul WordPress 6.0Ann McCathy, legătura cu produsele Automattic, evidențiază câteva funcții de modele nou îmbunătățite (începând cu ora 15:00) și discută planurile viitoare de îmbunătățire a modelelor - care includ modele ca elemente de secţionare, oferind opțiuni pentru alegeți modelul la crearea paginii, integrarea căutării în directorul de modele și multe altele.

Cerințe preliminare

Articolul presupune că cititorii au cunoștințe de bază despre interfața de editare completă a site-ului WordPress (FSE) și teme de blocare. The Manual pentru editorul de blocuri și Editare completă a site-ului site-ul web oferă cele mai actualizate ghiduri de tutorial pentru a afla toate caracteristicile FSE, inclusiv temele și modelele de bloc discutate în acest articol.

Secțiunea 1: Abordări în evoluție pentru crearea modelelor de bloc

Abordarea inițială a creării de modele de bloc a necesitat utilizarea API-ului pentru modele de bloc, fie ca plugin personalizat, fie înregistrat direct în functions.php fișier pentru a se combina cu o temă bloc. WordPress 6.0 recent lansat a introdus câteva funcții noi și îmbunătățite care lucrează cu modele și teme, inclusiv înregistrarea modelelor printr-o /patterns folder și a modal model de creare a paginii.

Pentru fundal, să vedem mai întâi pe scurt modul în care fluxul de lucru de înregistrare a modelului a evoluat de la utilizarea API-ului model de înregistrare la încărcarea directă fără înregistrare.

Exemplul de caz 1: Twenty Twenty-One

Valoarea implicită Tema Douăzeci și unu (TT1) și Tema TT1 Blocks (un frate al lui TT1) arată cum pot fi înregistrate modele de bloc în temele functions.php. În tema experimentală TT1 Blocks, acest single block-pattern.php fisierul care contine opt modelele de bloc sunt adăugate la functions.php ca o include așa cum se arată aici.

Un model de bloc personalizat trebuie înregistrată folosind register_block_pattern funcție, care primește două argumente - title (denumirea tiparelor) și properties (o matrice care descrie proprietățile modelului).

Iată un exemplu de înregistrare a unui model simplu de paragraf „Hello World” din acesta Articolul 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 -->", )
);

După înregistrare, register_block_pattern() funcția ar trebui apelată de la un handler atașat la init cârlig așa cum este descris aici.

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

Odată ce modelele de blocuri sunt înregistrate, acestea sunt vizibile în editorul de blocuri. Documentație mai detaliată se găsește în aceasta Bloc de înregistrare a modelului.

Proprietățile modelului bloc

Pe lângă necesar title și content proprietăți, cel manualul editorului de blocuri listează următoarele opționale proprietățile modelului:

• title (necesar): Un titlu care poate fi citit de om pentru model.
• content (necesar): Blocați marcajul HTML pentru model.
• description (Opțional): Un text ascuns vizual folosit pentru a descrie modelul din insert. O descriere este opțională, dar este încurajată atunci când titlul nu descrie pe deplin ceea ce face modelul. Descrierea va ajuta utilizatorii să descopere modelul în timpul căutării.
• categories (Opțional): O serie de categorii de modele înregistrate utilizate pentru a grupa modele de bloc. Modelele de blocuri pot fi afișate pe mai multe categorii. O categorie trebuie înregistrată separat pentru a fi utilizată aici.
• keywords (Opțional): o serie de aliasuri sau cuvinte cheie care ajută utilizatorii să descopere modelul în timpul căutării.
• viewportWidth (Opțional): un număr întreg care specifică lățimea dorită a modelului pentru a permite o previzualizare la scară a modelului în insertor.
• blockTypes (Opțional): O serie de tipuri de bloc cu care modelul este destinat să fie utilizat. Fiecare valoare trebuie să fie cea a blocului declarat name.
• inserter (Opțional): În mod implicit, toate modelele vor apărea în insertor. Pentru a ascunde un model astfel încât să poată fi inserat numai programatic, setați inserter la false.

Următorul este un exemplu de fragmente de cod de plugin pentru un model de citate preluate din Blogul WordPress.

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

Utilizarea modelelor într-un fișier șablon

Odată ce modelele sunt create, acestea pot fi utilizate într-un fișier șablon de temă cu următorul marcaj de bloc:

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

Un exemplu de la acest depozit GitHub arată utilizarea lui „footer-with-background” model slug cu “tt2gopher” prefix în tema blocurilor TT2 Gopher.

Primii adoptatori ai temelor bloc și a pluginului Gutenberg au profitat și de modelele din temele clasice. Implicit Douăzeci și douăzeci și temele mele preferate Eksell (a site demo aici) sunt exemple bune care arată modul în care caracteristicile modelului pot fi adăugate la temele clasice.

Exemplul de caz 2: Twenty Twenty-Two

Dacă o temă include doar câteva modele, dezvoltarea și întreținerea sunt destul de ușor de gestionat. Cu toate acestea, dacă o temă bloc include multe modele, ca în tema TT2, atunci pattern.php fișierul devine foarte mare și greu de citit. Tema implicită TT2, care se grupează mai mult de 60 modele, prezintă un flux de lucru de înregistrare a modelului refactorizat structura care este mai ușor de citit și de întreținut.

Luând exemple din tema TT2, să discutăm pe scurt cum funcționează acest flux de lucru simplificat.

2.1: Înregistrarea categoriilor de modele

În scopuri demonstrative, am creat o temă copil TT2 și am configurat-o pe site-ul meu local de testare cu conținut fals. În urma TT2, m-am înregistrat footer-with-background și adăugat la următoarea listă de categorii de modele din matricea acesteia block-patterns.php fișier.

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

În acest exemplu de cod, fiecare model listat în $block_patterns = array() este numit de foreach() funcţie care requireSA patterns fișier director cu numele modelului listat în matrice pe care îl vom adăuga în pasul următor.

2.2: Adăugarea unui fișier model la /inc/patterns dosar

În continuare, ar trebui să avem toate fișierele de modele listate în fișierul $block_patterns = array(). Iată un exemplu de unul dintre fișierele de tipare, 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 -->',
);

Să facem referire la modelul din footer.html parte șablon:

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

Acest lucru este similar cu adăugarea părților de titlu sau subsol într-un fișier șablon.

Modelele pot fi adăugate în mod similar la parts/footer.html șablon modificându-l pentru a se referi la slug din fișierul de model al temei (footer-with-background):

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

Acum, dacă vizităm insertorul de modele al editorului de blocuri, Footer with background ar trebui să fie disponibile pentru uzul nostru:

Următoarea captură de ecran arată subsolul nou creat cu model de fundal pe front-end.

Acum că modelele au devenit parte integrantă a temei bloc, multe modele sunt grupate în teme de bloc - cum ar fi pătrat, sămânță, Mayland, Zoolog, Geolog — urmând fluxul de lucru discutat mai sus. Iată un exemplu de tema Quadrat /inc/patterns dosar cu a înregistrare bloc-model fișier și lista de fișiere cu sursa de conținut și antetul de model necesar în return array() funcţie.

Secțiunea 2: Crearea și încărcarea modelelor fără înregistrare

Vă rugăm să rețineți că această caracteristică necesită instalarea WordPress 6.0 sau a pluginului Gutenberg 13.0 sau o versiune superioară pe site-ul dvs.

Acest noua caracteristică WordPress 6.0 permite înregistrarea modelului prin fișiere și foldere standard – /patterns, aducând convenții similare ca /parts, /templates, și /styles.

Procesul, așa cum este descris și în această taverna WP articol, implică următorii trei pași:

• crearea unui folder de modele la rădăcina temei
• adăugarea antetului de model de stil plugin
• conținutul sursei modelului

Un marcaj tipic pentru antetul modelului, preluat din articol, este prezentat mai jos:

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

Doar așa cum este descris în secțiunea anterioară Title și Slug câmpurile sunt obligatorii, iar alte câmpuri sunt opționale.

Făcând referire la exemple din teme lansate recent, am refactorizat înregistrarea modelului în acest TT2 Gopher Blocks temă demo, pregătită pentru un articol anterior despre CSS-Tricks.

În următorii pași, să explorăm cum a footer-with-background.php model înregistrat cu PHP și folosit într-o footer.html șablonul este refactorizat.

2.1: Creați un /patterns folderul de la rădăcina temei

Primul pas este crearea unui /patterns folderul la rădăcina temei TT2 Gopher și mutați footer-with-background.php fişier model la /patterns folder și refactor.

2.2: Adăugați date de model la antetul fișierului

Apoi, creați următoarele câmpuri de înregistrare a antetului de model.

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

Un fișier model are un câmp de titlu de sus scris ca comentarii PHP. Urmat de bloc-conținut scris în format HTML.

2.3: Adăugați conținut de model la fișier

Pentru secțiunea de conținut, să copiem fragmentele de cod în interior ghilimele simple (de exemplu, '...') din secțiunea de conținut a footer-with-background și înlocuiți <!-- 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 -->

Întregul fragment de cod al patterns/footer-with-background.php fisierul poate fi vizualizat aici pe GitHub.

Rețineți că /inc/patterns și block-patterns.php sunt Extras, nu este necesar în WordPress 6.0 și este inclus doar în scopuri demonstrative.

2.4: Referirea modelelor slug în șablon

Adăugând cele refactorizate de mai sus footer-with-background.php model la footer.html șablonul este exact același cu cel descris în secțiunea anterioară (Secțiunea 1, 2.2).

Acum, dacă vedem partea de subsol a site-ului într-un editor de blocuri sau front-end-ul site-ului nostru într-un browser, se afișează secțiunea de subsol.

Categorii și tipuri de model Înregistrare (opțional)

Pentru a clasifica modelele de bloc, categoriile și tipurile de modele ar trebui să fie înregistrate în teme functions.php fișier.

Să luăm în considerare un exemplu de înregistrarea categoriilor de modele de bloc din tema TT2 Gopher.

După înregistrare, modelele sunt afișate în insertorul de modele împreună cu modelele implicite de bază. Pentru a adăuga etichete de categorii specifice temei în insertorul de modele, ar trebui să modificăm fragmentele anterioare adăugând spațiu de nume pentru tema:

/**
* 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 modelul este vizibil în modelele inserate cu previzualizarea acestuia (dacă este selectat):

Acest proces simplifică foarte mult crearea și afișarea modelelor de bloc în temele de bloc. Este disponibil în WordPress 6.0 fără a utiliza pluginul Gutenberg.

Exemple de teme fără înregistrarea modelelor

Primii utilizatori au început deja să folosească această funcție în temele lor bloc. Câteva exemple de teme, care sunt disponibile de la director de teme, modelele de încărcare fără înregistrare sunt enumerate mai jos:

• Archaeo – 12 patterns
• – 13 patterns
• Îndepărtat – 11 patterns
• Skatepark – 10 patterns
• Stewart – 17 patterns
• Carte – 16 patterns
• Avangardă – 14 patterns

Secțiunea 3: Crearea și utilizarea modelelor cu low-code

directorul oficial de modele conține modele creative contribuite de comunitate, care pot fi copiate și personalizate după cum doriți pentru a crea conținut. Utilizarea modelelor cu un editor de blocuri nu a fost niciodată atât de ușoară!

Orice modele din directorul în continuă creștere pot fi, de asemenea, adăugate pentru a bloca teme doar prin simpla „copiere și inserare” sau includere în theme.json fișier făcând referire la directorul lor melc model. În continuare, voi analiza pe scurt cât de ușor se poate realiza acest lucru cu o codificare foarte limitată.

Adăugarea și personalizarea modelelor din directorul de modele

3.1: Copiați modelul din director într-o pagină

Aici, folosesc acest model de secțiune de subsol de FirstWebGeek din directorul de modele. A copiat modelul selectând butonul „Copy Pattern” și l-a lipit direct într-o pagină nouă.

3.2: Efectuați personalizarea dorităs

Am făcut doar câteva modificări la culoarea fonturilor și a fundalului butoanelor. Apoi a copiat întregul cod din editor de coduri pe un clipboard.

Dacă nu sunteți familiarizat cu utilizarea editorului de coduri, accesați opțiuni (cu trei puncte, dreapta sus), faceți clic pe butonul Editor de cod și copiați întregul cod de aici.

3.3: Creați un fișier nou în folderul /patterns

Mai întâi, să creăm un nou /patterns/footer-pattern-test.php fișier și adăugați secțiunea de antet a modelului necesară. Apoi lipiți întregul cod (pasul 3, mai sus). Modelul este clasificat în zona de subsol (linii: 5), putem vizualiza noul adăugat în insertorul de model.

<?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: Vizualizați noul model în dispozitivul de inserare

Pentru a vizualiza cele nou adăugate Footer pattern from patterns library model, accesați orice postare sau pagină și selectați pictograma de inserare (simbol albastru plus, stânga sus), apoi selectați categoriile „TT2 Gopher – Footer”. Modelul nou adăugat este afișat în panoul din stânga, împreună cu alte modele de subsol și previzualizarea acestuia în partea dreaptă (dacă este selectat):

Înregistrarea modelelor direct în theme.json fişier

În WordPress 6.0, este posibil să înregistrați orice modele dorite din directorul de modele cu theme.json fișier cu următoarea sintaxă. The Note de dezvoltare 6.0, „câmpul de modele este o matrice de [melci model] din Directorul de modele. Slug-urile de modele pot fi extrase de către [URL] în vizualizarea unică a modelului din Directorul de modele.”

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

Acest scurt WordPress 6.0 prezintă un videoclip demonstrează modul în care modelele sunt înregistrate în /patterns folder (la 3:53) și înregistrarea modelelor dorite din directorul de modele în a theme.json dosar (la 3:13).

Apoi, modelul înregistrat este disponibil în caseta de căutare pentru insertor de modele, care este apoi disponibilă pentru utilizare la fel ca biblioteca de modele cu teme.

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

În acest exemplu, modelul slug footer-section-design-with-3-column-description-social-media-contact-and-newsletter de la exemplu anterior este înregistrat prin theme.json.

Model de model de creare a paginii

Ca parte din "construirea cu modele” inițiative, WordPress 6.0 oferă o opțiune modală tip model autorilor de teme să adauge modele de aspect de pagină în tema bloc, permițând utilizatorilor site-ului să selecteze modele de aspect de pagină (de exemplu, o pagină despre, o pagină de contact, o pagină de echipă etc.) în timp ce creează o pagină. Următorul este un exemplu preluat din nota dev:

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

Această caracteristică este în prezent limitat la tipul postării în pagină numai și nu pentru „Tip de postare”, încă.

modal model de creare a paginii poate fi, de asemenea, dezactivat complet prin eliminarea tipului de bloc post-conținut al tuturor tiparelor. Un exemplu de cod exemplu este disponibil aici.

Puteți urmări și participa la discuția GitHub din linkurile enumerate în secțiunea de resurse de mai jos.

Folosind directorul de modele pentru a construi pagina

Modelele din director pot fi, de asemenea, folosite pentru a crea postarea dorită sau aspectul paginii, similar cu generatorii de pagini. The GutenbergHub echipa a creat o aplicație experimentală de generare a paginilor online folosind modele direct din director (video introductiv). Apoi, codurile din aplicație pot fi copiate și lipite într-un site, ceea ce simplifică foarte mult procesul de creare a complexului de aspect al paginii fără codare.

In acest scurt videoclip, Jamie Marsland demonstrează (la 1:30) modul în care aplicația poate fi utilizată pentru a crea un întreg aspect de pagină similar cu generatorul de pagini folosind secțiunile de pagină dorite din director.

La finalul

Modelele permit utilizatorilor să-și recreeze aspectul de conținut folosit în mod obișnuit (de exemplu, pagina eroului, apelul etc.) în orice pagină și să reducă barierele în calea prezentării conținutului în stiluri, care anterior nu erau posibile fără abilități de codare. La fel ca Plugin-uri și tematică directoare, noul modele directorul oferă utilizatorilor opțiuni de a utiliza o gamă largă de modele alese din directorul de modele și de a scrie și afișa conținutul în stil.

Într-adevăr, modelele de bloc vor schimba totul și cu siguranță acesta este un schimbător de jocuri caracteristică în peisajul temelor WordPress. Când întregul potențial al construirea cu modele efortul devine disponibil, acest lucru va schimba modul în care proiectăm temele bloc și creăm conținut frumos chiar și cu cunoștințe low-code. Pentru mulți designeri creativi, directorul de modele poate oferi, de asemenea, o cale adecvată pentru a-și prezenta creativitate.

---

Resurse

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)

Crearea de modele

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

Îmbunătățirea modelelor (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

Articole de blog

• 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 (Taverna WP)

---

Cum se creează modele de teme bloc în WordPress 6.0 publicat inițial pe CSS-trucuri. Tu ar trebui primiți buletinul informativ.

• Coinsmart. Cel mai bun schimb de Bitcoin și Crypto din Europa.
• Platoblockchain. Web3 Metaverse Intelligence. Cunoștințe amplificate. ACCES LIBER.
• CryptoHawk. Radar Altcoin. Încercare gratuită.
• Source: https://css-tricks.com/how-to-create-block-theme-patterns-in-wordpress-6-0/