Editorul de blocuri

Modulul 4: Crearea de conținut · Timp de citire: 8 minute

Obiectiv de învățare: După această lecție veți putea construi o pagină cu blocuri și modele și veți ști cum funcționează ciornele, programarea și reviziile.

Concepte-cheie: bloc, setări de bloc, bară de instrumente, vizualizare ca listă, grup, coloane, model, model sincronizat, ciornă, privat, programare, revizii, previzualizare

Totul este un bloc

Începând cu WordPress 5.0 (sfârșitul anului 2018), creați conținut în editorul de blocuri (numit și Gutenberg, după numele proiectului). O pagină este alcătuită din blocuri separate: un titlu, un paragraf, o imagine, un buton, o listă, un tabel, un videoclip încorporat. Fiecare bloc are propriile setări. Puteți plasa blocurile unul sub altul, unul lângă altul (în coloane) sau unul în altul (într-un grup).

De ce blocuri? În editorul vechi, o pagină era o singură casetă de text mare. Dacă doreați două coloane sau un buton, aveați nevoie de un constructor de pagini, de shortcode-uri sau de HTML. Cu blocurile, acest lucru este posibil chiar în WordPress, iar rezultatul este un cod HTML curat, pe care tema îl formatează.

În culise, WordPress salvează blocurile ca HTML, cu marcaje de comentariu înainte și după:

<!-- wp:heading -->
<h2 class="wp-block-heading">Program de funcționare</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Suntem deschiși de marți până sâmbătă inclusiv.</p>
<!-- /wp:paragraph -->

Este util să știți acest lucru: conținutul rămâne cod HTML lizibil, chiar dacă schimbați tema mai târziu sau dacă un bloc nu mai există. Puteți vedea acest lucru dacă, pentru un bloc, alegeți „Editare ca HTML”, sau în editorul de cod (Ctrl+Shift+Alt+M).

Editorul în trei părți

1. Zona de lucru (canvas) din mijloc: pagina dumneavoastră, așa cum va arăta aproximativ.
2. Bara de instrumente de deasupra unui bloc selectat: aldin, cursiv, link, aliniere și transformarea blocului într-un alt tip (un paragraf devine o listă, o imagine devine o galerie).
3. Bara laterală din dreapta, cu două file: Pagină (sau Articol) cu setări pentru întreaga pagină și Bloc cu setările blocului selectat, precum culoarea, spațierea și dimensiunea fontului.

Două instrumente care vă ușurează mult munca:

• Vizualizarea ca listă (pictograma cu trei liniuțe din stânga sus): structura paginii dumneavoastră, sub formă de arbore. Cu ajutorul acesteia selectați exact blocul dorit, chiar dacă se află într-un grup, într-o coloană.
• Comenzi slash: pe o linie goală, scrieți / urmat de numele unui bloc (/titlu, /buton, /imagine) și apăsați Enter.

Construirea cu grupuri și coloane

O pagină bună are o structură clară. Pentru aceasta folosiți trei elemente de bază:

• Grup: un cadru în jurul câtorva blocuri, cu un fundal sau o spațiere proprie. De exemplu, un bloc colorat cu un titlu, o propoziție și un buton.
• Coloane: blocuri plasate unul lângă altul. Pe telefon, acestea apar unul sub altul.
• Rând și Stivă: variante de grup care ordonează blocurile pe orizontală sau pe verticală.

Folosiți titlurile în mod corect: un singur H1 (titlul paginii, pe care de obicei îl generează tema), apoi H2 pentru capitole și H3 pentru subsecțiunile din interiorul acestora. Nu alegeți un titlu în funcție de dimensiunea fontului; aceasta se ajustează din setările blocului. Cititoarele de ecran și motoarele de căutare folosesc titlurile pentru a înțelege structura paginii (lecția 9.2).

Modele: să nu o luați mereu de la zero

Un model este un grup de blocuri gata pregătit: un titlu cu text și imagine, un tabel de prețuri, trei coloane cu pictograme. Le inserați din butonul de adăugare (semnul plus), fila Modele. Tema dumneavoastră oferă adesea câteva, iar în biblioteca de modele de pe wordpress.org există sute.

Puteți crea și propriile dumneavoastră modele: selectați câteva blocuri, alegeți din bara de instrumente cele trei puncte și Creare model. În acest proces, alegeți dacă modelul este sincronizat:

• Nesincronizat: de fiecare dată când îl inserați, obțineți o copie separată. Dacă o modificați, se schimbă doar acea copie. Util ca șablon.
• Sincronizat: oriunde este plasat, este identic. Dacă îl modificați într-un loc, se schimbă peste tot. Util pentru un bloc „Contact și program de funcționare” care apare pe zece pagini. (Anterior, acestea se numeau „blocuri reutilizabile”.)

O capcană: un model sincronizat pe care îl modificați „doar puțin” pe o pagină se schimbă și pe toate celelalte pagini. Dacă doriți ceva diferit într-un singur loc, transformați acea copie anume într-un grup obișnuit (detașare).

Salvare, publicare și programare

O pagină are un status:

Folosiți Previzualizare pentru a vedea pagina așa cum o vede un vizitator, inclusiv pe mobil și tabletă, înainte de a publica.

Revizii: înapoi în timp

De fiecare dată când salvați, WordPress păstrează o revizie: versiunea de la acel moment. În bara laterală, lângă pagină, vedeți câte revizii există. Faceți clic pe acestea și veți vedea, cu ajutorul unui cursor, diferențele dintre două versiuni, putând restaura o versiune mai veche.

Reviziile sunt prima dumneavoastră plasă de siguranță în caz de greșeală („am șters din greșeală jumătate din pagină”). Totuși, toate sunt stocate în baza de date. O site cu mii de revizii devine mai mare și uneori mai lentă. Puteți limita numărul acestora în wp-config.php:

define( 'WP_POST_REVISIONS', 20 );

Lecția 6.3 tratează curățarea reviziilor vechi.

Unde se oprește editorul

Editorul de blocuri construiește conținutul unei pagini. Ceea ce înconjoară conținutul (antetul site-ului, meniul, subsolul) ține de temă. La o temă cu blocuri, editați aceste elemente în Editorul de site-uri (Aspect > Editor) cu aceleași blocuri; la o temă clasică, în Personalizator și la Piese (widgets) (lecția 5.1). Dacă folosiți un constructor de pagini precum Elementor sau Divi, lucrați în acel program în locul editorului de blocuri; dezavantajele acestuia sunt discutate în lecția 5.1.

Rezumat

• O pagină este alcătuită din blocuri pe care le plasați sub, lângă și în interiorul altora; WordPress le salvează ca HTML cu marcaje de comentariu.
• Vizualizarea ca listă și comenzile slash fac construirea rapidă și precisă.
• Folosiți titlurile pentru structură (H2, H3), nu pentru dimensiunea fontului.
• Modelele economisesc muncă; un model sincronizat se modifică peste tot simultan.
• Ciorna, programarea, statusul privat și reviziile vă oferă control asupra a ceea ce este vizibil și când, plus o cale de revenire.

Test (quiz)

Exercițiu

Exercițiu D4.1: Construiți o pagină cu blocuri. Creați o pagină ciornă „Despre noi” cu: un H2 și un H3, cel puțin două paragrafe, o imagine cu text alternativ, un bloc de coloane cu două coloane, un buton cu un link și un model din bibliotecă. Transformați un grup într-un model sincronizat propriu și inserați-l pe o a doua pagină ciornă. Modificați-l apoi într-un singur loc și observați ce se întâmplă pe cealaltă pagină. În final, restaurați o revizie anterioară. Bifați fiecare pas și descrieți în două propoziții când ați folosi și când nu ați folosi un model sincronizat.

Lecturi suplimentare

Pentru lucrul în WordPress în sine, nu avem încă propriile noastre articole; documentația oficială WordPress este amplă.

• Editorul de blocuri (wordpress.org, engleză): https://wordpress.org/documentation/article/wordpress-block-editor/
• Modele (wordpress.org, engleză): https://wordpress.org/documentation/article/block-pattern/
• Revizii (wordpress.org, engleză): https://wordpress.org/documentation/article/revisions/