Ghidul complet al modelelor de blocuri Gutenberg (III)

Aceasta este cea de-a treia și ultima parte a ghidului complet despre modelele de bloc, care include următoarele subiecte:

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 să transformați blocurile reutilizabile în modele de blocuri
8. Teme 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 modele care sunt disponibile în unele directoare . În a doua parte am văzut punctul 5 în detaliu: cum putem crea un model de la zero folosind cod. Și în acest ultim post, ne vom uita la ultimele 4 puncte: cum putem crea un model fără a fi dezvoltator, cum putem converti blocurile reutilizabile în modele de bloc, ce teme folosesc modele de bloc și, în sfârșit, unde puteți găsi documentație oficială despre modele.

6. Cum să creezi un model dacă nu ești dezvoltator

Deși am văzut deja în postarea anterioară pașii pe care a trebuit să-i urmezi pentru a crea un model cu cod, în acest moment vom vedea că poți crea modele fără să fii dezvoltator. Și da, o vom face cu un plugin. De fapt, există mai mult de un plugin pentru crearea de modele:

• Block Patter Builder de Justin Tadlock,
• BlockMeister – Block Patter Builder de BlockMeister,
• Page Builder Gutenberg Blocks – CoBlocks de la GoDaddy

Toate trei funcționează într-un mod similar, cu unele diferențe minore. După instalarea oricăreia dintre ele, în meniul de administrare WordPress apar noi opțiuni, astfel încât să puteți crea un nou model și să gestionați lista de modele create.

În cazul plugin-ului Block Patterns Builder (adică imaginea din stânga), apare meniul Block Patterns are două opțiuni: una pentru a crea un model nou și alta pentru a lista și edita modelele existente. În cazul plugin-ului BlockMeister (reprezentat în imaginea din mijloc), acesta adaugă și o a treia opțiune de gestionare a categoriilor de tipare. Și în cazul lui CoBlock (prezentat în ultima imagine), meniul acestuia apare sub Aspect .

În toate cele trei plugin-uri, crearea unui model nou deschide același editor pe care îl utilizați pentru a edita orice pagină sau postare. Doar dați un nume modelului și definiți blocurile pe care doriți să le aibă. Când modelul dvs. este gata, salvați-l.

Captura de ecran anterioară arată editorul de modele de bloc, așa cum este furnizat de pluginul BlockMeister. După cum puteți vedea, oferă o mulțime de proprietăți suplimentare în bara laterală din dreapta: nume, slug, descriere, lățimea modelului și categorii. Pluginul Justin Tadlock, pe de altă parte, nu vă permite să adăugați categoria. Și CoBlocks vă permite, de asemenea, să adăugați proprietăți suplimentare ale modelelor.

Cu oricare dintre cele trei plugin-uri, după salvarea modelului, acesta va deveni disponibil făcând clic pe butonul + din editorul de postări și pagini, astfel încât să îl puteți insera atunci când aveți nevoie.

După cum puteți vedea, este foarte ușor să creați modelele pe care doriți să le aveți disponibile în designul paginii dvs., cu condiția să utilizați pluginul potrivit pentru acesta.

7. Cum să transformați blocurile reutilizabile în modele de blocuri

Dacă folosești Gutenberg de ceva timp și ai proiectat pagini cu el, pun pariu că ai creat și câteva blocuri reutilizabile pentru a reproduce un anumit design pe mai multe pagini. Cel puțin am făcut-o! Îmi amintesc că prima dată când am auzit despre modele, am crezut că sunt aproape la fel ca blocurile reutilizabile... dar nu sunt: ​​există unele diferențe relevante între cele două concepte.

Un bloc reutilizabil este un bloc (sau un grup de blocuri) care poate fi inserat pe diferite pagini, continutul acestuia fiind acelasi pe toate. Adică, dacă îl modificați mai târziu, toate instanțele sale ar trebui actualizate. Prin urmare, dacă doriți ca un bloc reutilizabil să fie diferit de restul, trebuie mai întâi să îl convertiți într-un bloc normal.

Un model de bloc, pe de altă parte, este conceput pentru a fi personalizat - servește ca un design de bază pe care ar trebui să îl modificați după ce îl introduceți. Opțiunile sunt nelimitate, desigur. Ideea modelului este de a oferi un punct de plecare asupra modului în care puteți combina blocurile pentru a le face să arate atractiv.

Dacă ați creat blocuri reutilizabile cu ideea de a le converti în blocuri normale și apoi de a le personaliza convenabil, este mai logic să convertiți aceste blocuri în modele de bloc. Cum putem face asta?

Pluginul Reusable Block Extended de la JB Audras ne oferă această funcționalitate. Să vedem cum o facem.

După instalarea pluginului, va apărea o opțiune de meniu pentru a gestiona blocurile reutilizabile. Dacă faceți clic pe Toate blocurile reutilizabile , veți vedea lista blocurilor pe care le-ați definit.

După cum puteți vedea în imaginea de mai sus, lista de blocuri reutilizabile arată două blocuri și, pentru fiecare dintre ele, vă spune unde sunt utilizate, shortcode-ul și funcția PHP pentru a le putea folosi și un buton astfel încât îl puteți converti într-un model de bloc.

După ce faceți clic pe butonul Convertiți în model de bloc , modelul va fi creat pentru dvs. și va fi disponibil în editorul dvs. în categoria Convertit din blocuri reutilizabile .

8. Teme folosind modele de bloc

La momentul scrierii acestui articol, există deja 14 teme cu modele de bloc personalizate în directorul de teme WordPress.org, iar lista crește rapid.

• Twenty Twenty-One Versiunea 1.0 de WordPress.org
• C9 Starter Versiunea 2.4.4 de covertnine
• C9 Work Versiunea 2.3.1 de covertnine
• Seedlet Versiunea 1.1.2 de Automattic
• ExS Versiunea 0.9.0 de exstheme
• Cordero Versiunea 1.2.2 de la uxl
• Bigwigs Versiunea 0.7.1 de Dinev Dmitry
• emulsie Versiunea 1.6.9 de nobita
• Twenty Twenty Versiunea 1.6 de WordPress.org
• VW Health Coaching Versiunea 0.6.5 de VW THEMES
• Twenty Nineteen Versiunea 4.9.6 de WordPress.org
• Scrieri versiunea 1.3.0 de Dinev Dmitry
• Twenty Seventeen Versiunea 2.5 de WordPress.org
• Twenty Sixteen Versiunea 2.3 de WordPress.org

Profit de această ocazie pentru a menționa că, dacă sunteți un dezvoltator de teme și doriți să eliminați blocurile predefinite (modele core-block) care vin în WordPress 5.5, puteți face acest lucru cu următorul cod:

 remove_theme_support( 'core-block-patterns' );

9. Documentație oficială

În cele din urmă, aici aveți câteva link-uri utile despre modelele de bloc:

• Pentru utilizatorul final – videoclip introductiv pentru a bloca modele pentru a înțelege ce sunt modelele, cum să le accesați, cum să le adăugați în postări și pagini și să înțelegeți cum să le personalizați pentru conținutul dvs. Acest videoclip este un atelier publicat de echipa de instruire WordPress.
• Pentru utilizatorul final – documentația de tip bloc creată de echipa de documentare.
• Pentru Dezvoltatori – Pagina Block Patterns din documentația pentru Block API, publicată de Echipa Gutenberg și despre care v-am spus deja în postarea anterioară.

Si asta e! Sper că ați găsit acest ghid util. Dacă credeți că lipsește vreo informație, nu ezitați să-mi spuneți în secțiunea de comentarii de mai jos.

Imagine prezentată de Patrick Hendry pe Unsplash .