Ce este nou în WordPress 5.8

Publicat: 2021-06-24

După ce am urmărit prezentările de la WordCamp Europe 2021 și, în special, discuția dintre Matt Mullenweg și Matias Ventura care includea un videoclip cu noile funcții care vin la noi în editorul de blocuri, am fost nerăbdător să încerc această nouă versiune de WordPress. 5.8 care urmează să fie lansat la jumătatea lunii iulie.

Așa că am instalat versiunea WordPress 5.8-beta2 pentru a vă putea spune despre noile funcții care urmează. Rețineți că am testat această versiune cu tema Twenty Twenty-one de pe WordPress.org și se poate întâmpla ca unele dintre caracteristicile menționate, în funcție de tema pe care ați instalat-o pe site-ul dvs., să nu fie disponibile.

Blocuri imbricate și modele de bloc

Odată cu apariția WordPress 5.5, editorul de blocuri a inclus conceptul de modele de bloc. Ideea unui model de bloc este foarte simplă: sunt secțiuni sau fragmente predefinite alcătuite dintr-un grup de blocuri pe care le poți folosi la crearea paginilor și postărilor. Modelele de blocuri pot fi ceva la fel de simplu ca o secțiune care afișează două butoane sau o secțiune de prețuri cu aspecte atrăgătoare și complexe, sau chiar aspectul unei pagini întregi.

Se lucrează mult pentru a face editarea blocurilor și a modelelor de blocuri mai ușoară și mai confortabilă. Și, în special, pentru a face inserarea și mutarea lor mai rapidă. Pentru început, acum putem, din lista de blocuri și modele care sunt afișate în bara de meniu din stânga, să le selectam și să le trageți în zona paginii pentru a le insera.

Captură de ecran cu selectarea și inserarea unui model în Gutenberg — Din lista de blocuri și modele puteți selecta și trage blocul sau modelul pe care doriți să-l inserați direct pe pagina dvs.

Recent, a fost adăugată și pictograma de glisare (pictograma cu 6 puncte), astfel încât să putem muta orice bloc din containerul în care se află.

Opțiune de a trage un bloc în editorul Gutenberg — Făcând clic pe pictograma de glisare, puteți muta blocul de acoperire care se află în interiorul unui bloc de tip coloană.

Când vă aflați într-un bloc, apăsați Esc pentru a comuta în modul de selecție și apăsați Enter pentru a reveni la modul de editare.

Modul de selecție în editorul Gutenberg — În editorul Gutenberg puteți trece de la modul de selecție la modul de editare cu tastele Enter și Esc.

În modul de selecție (nu uitați să apăsați Esc ), navigarea între structura blocurilor este optimizată. Mișcând mouse-ul într-un bloc putem vedea limitele fiecărui bloc pe care îl conține. În acest fel, este mai ușor să înțelegeți structura și să trageți blocurile din blocul părinte.

Captură de ecran cu selectarea unui bloc imbricat în editorul de blocuri — În modul Selecție, la mișcarea mouse-ului în blocul de acoperire, putem vedea limitele fiecăruia dintre blocurile pe care le conține.

Și acum, cu această nouă versiune, când treci în modul de editare (apăsați Enter ), la mutarea unui bloc sunt afișate și limitele containerului acestuia, astfel încât procesul de selectare, glisare și plasare este mult mai ușor și mai intuitiv.

Opțiune de a trage un bloc în editorul WordPress 5.8 — Captură de ecran cu tragerea unei opțiuni de blocare în editorul WordPress 5.8.

Ediția de imagine

Continuând cu ideea de a îmbunătăți editarea blocurilor, un bloc critic este blocul de tip imagine. Am văzut deja că acum putem insera imagini trăgându-le în blocuri de tip imagine, text și media sau în orice bloc de tip container, cum ar fi o coloană.

Dar marea noutate este că putem edita și modifica imaginile inserate în editorul propriu-zis, fără a fi nevoie să mergem la Media Library .

Opțiuni de editare a imaginilor în editorul de blocuri — Opțiuni pentru editarea unei imagini în editorul de blocuri.

Pe lângă pictogramele pentru a centra și adăuga un link de imagine , cu WordPress 5.8 avem trei pictograme noi: Decupați , Adăugați text și Filtre Duotone .

Decupați imaginea

Făcând clic pe pictograma de decupare, apar trei opțiuni suplimentare de meniu: zoom , schimbați raportul de aspect și rotiți imaginea .

Captură de ecran cu editarea unei imagini în editorul de blocuri — După ce ați selectat opțiunea de decupare, faceți modificările de mărire, aspect și rotire dorite și aplicați modificările.

După cum puteți vedea, nu mai aveți nevoie să mergeți la biblioteca media pentru ca imaginea dvs. să arate așa cum aveți nevoie.

Filtre duoton

O altă caracteristică nouă care vine cu WordPress 5.8 este capacitatea de a filtra orice imagine în duoton. Selectați cele două culori ale filtrului pe care doriți să le aplicați imaginii și gata, imaginea va avea doar două tonuri.

Captură de ecran a opțiunii duoton de imagine din WordPress — Afișați o imagine în doar două tonuri cu opțiunea imagine duotonă.

Adaugă text

Această nouă pictogramă, cea care adaugă text la o imagine, este echivalentă cu transformarea imaginii într-un bloc de tip coperta. Și, desigur, după această modificare, puteți adăuga textul dorit la blocul de copertă așa cum ați făcut în trecut.

Captură de ecran cu editarea unui bloc de fundal în Gutenberg — Captură de ecran cu editarea unui bloc de copertă în Gutenberg.

În plus, după cum puteți vedea în proprietățile blocului, acum puteți modifica și spațierea și adăugați padding la text, astfel încât textul să fie exact acolo unde doriți să fie în imagine. Căptușeala poate fi definită la fel sau diferit pentru fiecare dintre cele 4 părți ale textului.

Personal, mi se pare grozav că puteți adăuga și efectua toate aceste transformări direct în editor, fără a merge la biblioteca media. Totuși, dacă doriți să vă optimizați imaginile pentru SEO, mă tem că va trebui să mergeți în continuare la bibliotecă.

Transformări de bloc

Așa cum am văzut cum se transformă un bloc de la tipul de imagine la tipul de copertă, editorul de blocuri încorporează acum alte tipuri de transformări. De exemplu, puteți selecta trei paragrafe și le puteți transforma în titluri, coloane, o listă etc. Și înainte de a efectua transformarea, noul aspect al transformării este previzualizat.

Captură de ecran a previzualizării transformării paragraf în coloană — Previzualizare a transformării din paragrafe în coloane.

Captură de ecran a previzualizării transformării paragraf în listă — Previzualizare a transformării din paragrafe în coloane.

În mod similar, puteți schimba un set de blocuri de tip imagine într-un bloc de tip galerie de imagini sau chiar un set de butoane etc.

Blocul de acoperire

Cu toate aceste noi caracteristici incluse în editorul în sine, blocul de acoperire ne permite să creăm modele foarte diferite de cele pe care le-am avut până acum. De exemplu, acum putem avea două blocuri de acoperire imbricate (cu o umplutură între copil și părinte) și fiecare cu propria culoare, text și focalizare.

Imagine care arată două blocuri de fundal imbricate în Gutenberg — Imagine care arată două blocuri de acoperire imbricate.

Blocul de navigare

O altă caracteristică nouă grozavă a previzualizării editorului de blocuri din videoclipul prezentat la WordCamp este noul bloc de navigare. Vedem că acest bloc nu este inclus în versiunea beta instalată, dar îl veți găsi în cea mai recentă versiune 10.8.1 a pluginului Gutenberg.

Acest bloc vă permite să adăugați pe orice pagină, un meniu de link-uri, astfel încât vizitatorii să poată merge la orice altă pagină. Nu se dorește a fi un substitut pentru meniurile de navigare pe care le cunoaștem deja de la WordPress, ci o alternativă pentru atunci când doriți să inserați un meniu suplimentar pe o pagină.

În afară de a indica dacă doriți meniul orizontal sau vertical, aveți mai multe opțiuni atunci când creați meniul:

Creați un meniu de navigare în Gutenberg — Opțiuni în crearea unui meniu de navigare în editorul de blocuri.

Creați-l dintr-un meniu existent: puteți alege să afișați un meniu pe care l-ați creat deja pe site-ul dvs.
Creați-l gol: se creează un meniu gol pentru a adăuga manual fiecare link pe care doriți să îl afișați în navigare.
Creați-l din toate paginile de nivel superior – Acest lucru va adăuga automat fiecare pagină existentă pe site-ul dvs. ca link, pe care apoi îl puteți edita și rearanja. Numai paginile de nivel superior sunt adăugate aici.

Pentru a adăuga un nou link la navigare, trebuie să faceți clic pe pictograma + care vă permite să alegeți între:

Link către pagină: o pagină de pe site-ul dvs.
Link pentru postare: o postare pe site-ul dvs.
Link la categorie: toate postările cu o anumită categorie.
Link de etichetă: toate postările cu o anumită etichetă.
Link personalizat: o adresă URL externă.
Pictograme sociale: pictograme pentru rețelele sociale.
Căutare: o casetă de căutare pentru ca vizitatorii să caute conținutul dvs.

Odată ce ați creat orice meniu, aveți și opțiunea de a-i schimba stilul (font, font și culoare de fundal), de a adăuga submeniuri, de a muta elementele etc.

Astfel, cu acest bloc puteți crea design-uri de meniu foarte ușor.

După cum puteți vedea, acest nou tip de bloc va oferi mult mai multe posibilități în designul paginilor și postărilor noastre.

Design șablon

O altă mare schimbare care vine la noi cu această nouă versiune a editorului WordPress este că designul șablonului este complet integrat în editorul de blocuri. În acest fel puteți crea un șablon dintr-o pagină creată și adaugă și opțiunea că în bara laterală din stânga puteți lista structura acestuia.

Proiectarea unui șablon în WordPress. În stânga putem vedea structura șablonului.

Ne putem deplasa prin structura șablonului și fiecare element este evidențiat în editor, astfel încât să fie foarte ușor să faci modificări acolo unde este cazul și să ai o vizualizare rapidă a tuturor elementelor imbricate în fiecare bloc container.

Și mai sunt…

Și în sfârșit, în videoclipul prezentat la WordCamp Europe, ni s-a arătat și opțiunea de a defini direct în editorul de bloc stiluri globale ale temei pentru a schimba paleta de culori, tipografia etc. În cazul în care mai aveai dubii, cu acest nou Versiunea WordPress 5.8 ne apropiem din ce în ce mai mult de obiectivul de a nu avea nevoie de niciun alt generator de pagini pentru crearea paginilor site-ului dumneavoastră.

Imagine prezentată de XPS pe Unsplash .