Ghidul complet pentru modelele de blocuri Gutenberg (II)

Această postare este a doua parte a Ghidului complet despre modelele de blocuri Gutenberg, care include următoarele puncte:

1. Introducere în modelele de bloc
2. Inserați un model pe o pagină
3. Modele predefinite și altele disponibile în directoare
4. Adăugați modele disponibile în directoare pe site-ul dvs
5. Cum să creezi un model de la zero
6. Cum să creați un model dacă nu sunteți dezvoltator
7. Cum se transformă blocurile reutilizabile în modele de blocuri
8. Subiecte folosind modele de bloc
9. Documentație oficială.

În prima parte am văzut primele 4 puncte din toate subiectele abordate în ghid: ce este un model bloc, cum să inserați modele predefinite în paginile dvs. și unde să găsiți și cum să copiați modelele care sunt disponibile în unele directoare. Acolo am văzut că putem lipi un model pe pagina pe care o edităm, dar nu va fi stocat în biblioteca noastră de modele pentru utilizare ulterioară.

Dacă dorim să adăugăm un nou model la biblioteca noastră de modele Gutenberg, trebuie să creăm și să înregistrăm modelul respectiv. Este destul de simplu, deși aveți nevoie de niște abilități de codare de bază. Dacă nu este cazul dvs., nu vă faceți griji, deoarece vom afla mai târziu cum să obținem același rezultat fără a necesita codare.

5. Creați un model nou

Pentru a crea un model de bloc, trebuie să utilizați API-ul Block Pattern. Mai exact, funcția PHP register_block_pattern() . Să vedem pe scurt diferiții pași pe care trebuie să îi urmăm cu un exemplu simplu.

Dar înainte de a începe, permiteți-mi să adaug o notă secundară. Când personalizați WordPress folosind fragmente de cod, ar trebui să vă întrebați întotdeauna unde ar trebui să scrieți fragmentul respectiv. Cele mai multe tutoriale recomandă fișierul functions.php al temei tale active, deoarece este cea mai ușoară soluție pentru a finaliza treaba, dar David a scris această postare despre cum să creezi un plugin pentru a ține evidența tuturor personalizărilor tale și a susținut că aceasta este o soluție mai bună. .

Acum, cum rămâne cu modelele de bloc? Puteți adăuga definiția unui nou model de bloc în tema dvs. (unele teme, cum ar fi Twenty Twenty-One, includ deja propria lor), sau îl puteți adăuga într-un plugin personalizat. Sunt sigur că vei găsi apărători și detractori ai ambelor soluții, așa că alege-o pe cea care se potrivește mai bine nevoilor tale.

# 1 Proiectați blocurile care vă vor forma modelul

După cum am menționat deja în postarea anterioară, un model este un set de blocuri grupate după cum doriți. Să presupunem că vreau să creez un model de blocuri pe care să îl pot folosi pentru a crea o secțiune care descrie caracteristicile de bază ale unui produs.

Pentru a face acest lucru, pe o pagină pe care am intitulat-o „Crearea unui model”, încep prin a crea un bloc de titlu, „Secțiunea 6 caracteristici”, apoi inserez un bloc cu 3 coloane.

În primul bloc adaug o imagine și, sub ea, titlul și descrierea caracteristicii.

Copiez imaginea, titlul și descrierea în următoarele două blocuri. Și, în sfârșit, dublu acest rând, astfel încât să am o secțiune care va include descrierea celor șase caracteristici.

Desigur, are sens să creezi un model de bloc numai dacă crezi că îl vei folosi de mai multe ori.

# 2 Copiați conținutul blocurilor

După ce am definit setul de blocuri, nu trebuie decât să le selectăm cu mouse-ul și în bara de instrumente să facem clic pe Copiere .

#3 Escape conținut HTML copiat

Pentru a evita problemele, trebuie să evadăm din textul pe care tocmai l-am copiat, astfel încât caracterele speciale cum ar fi întreruperile de linie, caracterele tabulatoare și așa mai departe să poată fi înțelese de computer. Puteți evada cu ușurință un text utilizând instrumente online precum onlinestringtools.com sau JSON Escape/Unescape: trebuie doar să lipiți codul pe care l-ați copiat anterior și veți obține un text scapat corect.

# 4 Înregistrați modelul

În acest moment, singurul lucru rămas este să folosiți funcția register_block_pattern() . Această funcție primește două argumente: numele modelului și o matrice de proprietăți. La sfârșitul acestei postări vă dau mai multe detalii despre proprietățile pe care le puteți defini într-un model, dar mai întâi să vedem pașii necesari pentru a crea unul.

Acesta este exemplul nostru:

 register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "<!-- wp:heading {\"textAlign\":\"center\"} -->\n<h2 class=\"has-text-align-center\">6 Features Section</h2>\n<!-- /wp:heading -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->", ) );

După cum puteți vedea în fragmentul anterior, mai întâi specificăm un nume unic pentru a identifica modelul nostru ( ruth-gutenberg-blocks-patterns/section-with-six-features ), apoi specificăm o matrice cu câteva proprietăți: title („Secțiune cu 6 caracteristici”) un utilizator al modelului va vedea și content în sine. content este textul de care am scăpat la pasul anterior.

# 5 Creați un plugin cu modelul înregistrat

Pentru a avea modelul înregistrat în editorul nostru, putem crea un plugin sau îl putem pune în tema noastră activă. Dacă creați un plugin, acesta este ceea ce aveți nevoie:

 <?php /** * Plugin Name: Ruth's Block Patterns * Description: My personal block patterns * Version: 1.0.0 */ defined( 'ABSPATH' ) or die(); function ruth_patterns_register_block_patterns() { if ( ! class_exists( 'WP_Block_Patterns_Registry' ) ) { return; } register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "…", ) ); } add_action( 'init', 'ruth_patterns_register_block_patterns' );

Și voila! Dacă acum reîmprospătăm editorul (presupunând că ați activat pluginul, desigur), veți vedea noul model:

dar, din păcate, este listat sub Uncategorized . Acest lucru se datorează faptului că nu am indicat dacă blocul nostru aparține vreuneia dintre categoriile existente sau uneia noi.

# 6 Adăugați o nouă categorie de modele

Puteți adăuga noi modele de bloc în categoriile existente sau puteți crea o categorie complet nouă folosind funcția register_block_pattern_category . Această funcție are, de asemenea, două argumente: numele categoriei și o serie de opțiuni. Sună cunoscut?

Iată un exemplu:

 function ruth_patterns_register_block_pattern_category() { if ( ! class_exists( 'WP_Block_Patterns_Registry') ) { return; } register_block_pattern_category ( 'ruth-features', array( 'label' => _x( 'Features', 'Block pattern category', 'nelio' ) ) ); } add_action( 'init', 'ruth_patterns_register_block_pattern_category' );

Odată ce noua categorie este gata, nu uitați să actualizați modelul de blocare, astfel încât să specifice în mod explicit că ar trebui să fie listat în această nouă categorie:

 function ruth_patterns_register_block_patterns() { if ( ! class_exists( 'WP_Block_Patterns_Registry' ) ) { return; } register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "…", 'categories' => [ 'ruth-features' ], ) ); } add_action( 'init', 'ruth_patterns_register_block_patterns' );

Și iată-l:

Acum îl putem adăuga la orice pagină nouă pe care o creăm și apoi să facem modificările pe care le considerăm adecvate, așa cum puteți vedea în secțiunea creată pe o pagină nouă pentru lansarea noului nostru produs:

Proprietăți model bloc

În exemplul nostru am definit proprietățile title , content și categories unui model de bloc, dar există mai multe. Veți găsi detalii în documentația care descrie funcția register_block_pattern , dar aici este un rezumat:

• title (obligatoriu): titlul modelului.
• content (obligatoriu): conținutul modelului.
• description : un text ascuns vizual folosit pentru a descrie modelul din insertor. Descrierea este opțională, dar este recomandată cu tărie atunci când titlul nu descrie complet ceea ce face modelul.
• categories : o serie de categorii de modele utilizate pentru a grupa modele de bloc. Modelele de bloc pot fi afișate în mai multe categorii.
• keywords : un set de aliasuri sau cuvinte cheie care ajută utilizatorii să descopere modelul în timpul căutării.
• viewportWidth : un număr întreg care specifică lățimea modelului în insertor.

În cazul înregistrării categoriei, trebuie doar să definim o proprietate de label , deoarece nu mai există elemente de recuzită.

Astăzi am văzut că crearea unui model de blocuri astfel încât să-l aveți întotdeauna disponibil pe site-ul dvs. este destul de ușoară. În următoarea postare vom vedea cum putem crea modele fără să știm nimic despre cod. Nu rata!

Imagine prezentată a lui John Cameron pe Unsplash.