Ce este nou în WordPress 5.9 — Editare completă a site-ului, stiluri globale, blocuri, modele, API-uri, îmbunătățiri ale UI și multe altele

WordPress 5.9 Josephine este aici! Prima versiune WordPress a anului a fost inițial programată pentru lansare pe 14 decembrie 2021. Din cauza mai multor probleme deschise și erori nerezolvate, versiunea finală a fost amânată și a fost lansată în cele din urmă pe 25 ianuarie 2022.

Dacă vă întrebați ce este nou în WordPress 5.9, răspunsul scurt este Full Site Editing (FSE).

Și într-adevăr, multe funcții 5.9 sunt disponibile numai dacă utilizați o temă care acceptă editarea completă a site-ului, cum ar fi noua temă implicită, Twenty Twenty-Two.

Cu WordPress 5.9, ajungem la inima celei de-a doua faze a foii de parcurs Gutenberg: faza de personalizare , care se concentrează în principal pe editarea site-ului complet, modele bloc, director bloc și teme bazate pe bloc.

Cu 5.9, care va apărea luna viitoare, suntem – aș spune – la MVP, produsul minim viabil al acestei faze de personalizare a lui Gutenberg.

Aceste cuvinte de la Matt Mullenweg la 2021 State of the Word sintetizează cel mai bine caracteristicile cheie ale noii versiuni WordPress.

Acestea fiind spuse, ce este nou cu prima versiune WordPress din 2022?

Să aflăm!

Stiluri globale: o interfață grafică pentru theme.json

Odată cu lansarea WordPress 5.8 în 2021, manipularea fișierului theme.json a devenit modalitatea standard pentru dezvoltatorii de teme de a personaliza setările și stilurile editorului.

WordPress 5.9 duce lucrurile la nivelul următor prin introducerea unei interfețe grafice care permite utilizatorilor să personalizeze setările de stil pentru site-urile lor web, fie la nivel global, fie la nivel de bloc, fără a scrie o singură linie de cod.

Mecanismul Global Styles ar trebui să modifice semnificativ modul în care sunteți obișnuit să personalizați aspectul site-urilor dvs. web, deoarece Global Styles afectează mai multe aspecte ale designului site-ului WordPress.

În primul rând, interfața Global Styles înlocuiește Personalizatorul și este acum singura modalitate de a personaliza setările și stilurile cu teme de bloc. În mod similar, paginile de administrare cu opțiuni de temă complexă nu vor mai fi necesare. Aceasta oferă o nouă modalitate standard de configurare a setărilor și stilurilor temei și, în același timp, ar trebui să simplifice fluxul de lucru de dezvoltare a temei.

Cu Global Styles, utilizatorii WordPress obțin mai mult control asupra prezentării site-urilor lor, atât la nivel global, cât și pe tip de bloc, dincolo de contextul paginilor sau postărilor individuale.

O nouă bară laterală este acum disponibilă în editorul site-ului, în partea de sus a căreia veți găsi un mic panou de previzualizare și patru componente în următoarea ordine:

• Tipografie
• Culori
• Aspect
• Blocuri

Ne putem aștepta să fie adăugate noi componente în timp.

Să aruncăm o privire mai atentă la noua interfață.

E aici! Tot ce trebuie să știi despre WordPress 5.9, totul într-o mega postare Click to Tweet
[CTA]

Previzualizare stil

Primul element din bara laterală Stiluri globale este un panou de previzualizare. Acest panou vă permite să verificați rezultatul personalizărilor dvs. și este deosebit de util atunci când modificările dvs. se aplică elementelor care nu sunt vizibile în pânza editorului de site.

Următoarea imagine prezintă trei combinații de stil diferite în comparație:

Tipografie

Panoul Tipografie este locul în care controlați tipografia site-ului dvs. Desigur, controalele disponibile în acest panou depind de setările dvs. theme.json .

De exemplu, tema Douăzeci și douăzeci și unu de blocuri (blocuri TT1) declară următoarele proprietăți tipografice:

 "settings": { "typography": { "customLineHeight": true, "fontSizes": [], "fontFamilies": [] } }

Următoarea imagine arată setările de tipografie rezultate în bara laterală Stiluri globale:

Să ne aprofundăm puțin și să vedem cum tema TT1 Blocks declară fontFamilies :

 "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "slug": "system-font", "name": "System Font" }, { "fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif", "slug": "helvetica-arial" }, { "fontFamily": "Geneva, Tahoma, Verdana, sans-serif", "slug": "geneva-verdana" }, { "fontFamily": "Cambria, Georgia, serif", "slug": "cambria-georgia" }, { "fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif", "slug": "hoefler-times-new-roman" } ]

Puteți verifica aceste familii de fonturi în panoul de previzualizare Stiluri globale:

Culori

În secțiunea Culori, puteți vizualiza și edita paletele de culori și puteți personaliza culoarea mai multor elemente ale site-ului.

Făcând clic pe acele elemente, aveți acces la un nou panou în care puteți alege culori din trei palete de culori: Paleta Core, Theme și Custom (citiți mai multe în Default Colors, Theme Colors și Custom Colors).

În acest panou, veți putea seta și modifica culoarea pentru elementul curent.

Aspect

Ultimul grup de instrumente este destinat personalizărilor aspectului. În context global, acest lucru este limitat la containerul site-ului.

Blocuri

Odată cu implementarea mecanismului Stiluri globale, acum este posibil să schimbați aspectul pentru anumite blocuri, cum ar fi Paragraf (tipografie și culori), Butoane (aspect) și Coloană (culori și aspect).

Rețineți că stilurile de bloc pot fi personalizate din interfața Stiluri globale numai dacă blocul declară suport pentru funcționalități specifice în fișierul block.json corespunzător. De exemplu, blocul de core/post-title acceptă în prezent următoarele stiluri:

 "supports": { "align": [ "wide", "full" ], "html": false, "color": { "gradients": true, "link": true }, "spacing": { "margin": true }, "typography": { "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, "__experimentalFontWeight": true, "__experimentalFontStyle": true, "__experimentalTextTransform": true, "__experimentalLetterSpacing": true, "__experimentalDefaultControls": { "fontSize": true, "fontAppearance": true, "textTransform": true } } },

Deoarece blocul de core/post-title acceptă culori, spațiere și tipografie, veți găsi intrările corespunzătoare în setările Stilurilor globale ale blocului de titlu al postării.

Următoarea imagine arată setările tipografiei, pe care le puteți compara cu ușurință cu codul de mai sus:

Este demn de remarcat faptul că WordPress 5.9 oferă doar prima implementare a interfeței Global Styles. După cum subliniază Matias Ventura, ne putem aștepta în mod rezonabil la dezvoltarea ulterioară a noii caracteristici de control al stilului:

În viitor, vor exista fluxuri încorporate în sistem, care vă vor permite să treceți de la stilurile locale la cele globale - cum ar fi personalizările unui bloc de butoane și optarea pentru aplicarea globală a modificărilor tuturor butoanelor de acest tip.

Deci, s-ar putea să vedem îmbunătățiri majore în curând. Imaginea de mai jos este doar un exemplu de ceea ce ne-am putea aștepta:

Îmbunătățiri suplimentare ar putea include posibilitatea temelor de a oferi palete de culori alternative și mai multe variații globale de stil.

Săptămâna trecută am construit câteva variante de culoare + fonturi ale lui Twenty Twenty-Two în teme super-simple pentru copii. Sunt foarte ușoare și îmi place ideea de a oferi oamenilor un site drastic diferit cu un singur clic.https://t.co/dItIkvvhK9 pic.twitter.com/rB4CcTfW0A

— kjellr (@kjellr) 15 noiembrie 2021

Dezvoltatorii se pot scufunda mai adânc în mecanismul global de stilare în articolul de asistență Setări și stiluri globale (theme.json). Veți găsi exemple suplimentare în introducerea noastră la tema implicită Twenty Twenty-Two.

Blocul de navigare

Blocul Navigare a fost numit „unul dintre cele mai de impact blocuri tematice” și nu ne este frică să spunem că suntem de acord.

Blocul a fost în faza embrionară de ceva vreme (vezi și Problema de urmărire a blocului de navigare și Problema de urmărire i2). Totuși, acum că toate problemele în așteptare și blocantele enumerate ca WordPress 5.9 obligatorii au fost remediate, putem începe în sfârșit să folosim una dintre cele mai puternice caracteristici îmbinate în nucleul WordPress 5.9.
[CTA]

O prezentare rapidă a interfeței blocului de navigare

Utilizarea noului bloc ar putea fi puțin confuză la început, dar odată ce îl înțelegeți, veți aprecia întregul său potențial.

Când adăugați pentru prima dată un bloc de navigare, substituentul bloc oferă trei opțiuni pentru selectarea unui meniu existent bazat pe blocuri, pentru crearea unui meniu cu toate paginile sau pentru a începe din nou cu un meniu gol.

Noul meniu de navigare vă permite, de asemenea, să importați meniuri create prin ecranul Meniuri de aspect, care este disponibil cu teme clasice.

Aceasta înseamnă că, dacă treceți de la o temă clasică la o temă bloc, nu va trebui să vă reconstruiți meniurile existente. Trebuie doar să alegeți unul dintre „Meniurile clasice” disponibile în prezent și acesta va fi convertit automat într-un meniu de navigare bazat pe blocuri.

Puteți adăuga blocul de navigare oriunde în paginile dvs. De exemplu, s-ar putea să găsească util în articolele de formă lungă pentru a crea un cuprins, permițând utilizatorilor să sară la anumite secțiuni de conținut.

Noile legături de navigare sunt adăugate instantaneu la blocul de navigare făcând clic pe pictograma plus ( + ) din partea dreaptă (a se vedea și notele de lansare Gutenberg 11.7), cu excepția cazului în care alte tipuri de blocuri au fost deja adăugate în meniu.

Făcând clic pe butonul Editare din bara de instrumente a blocului Legături de navigare, un element de meniu este convertit într-o legătură personalizată. Acest lucru vă permite să adăugați, să editați, să reordonați și să eliminați articole individual.

De asemenea, puteți transforma link-urile în blocuri făcând clic pe butonul Transformă din bara de instrumente pentru blocuri. Acest lucru vă permite să adăugați anumite blocuri direct în meniul de navigare.

Legătura personalizată, Distanțierea, Logo-ul site-ului, Linkul principal, Pictogramele sociale și Blocurile de căutare sunt acum expuse utilizatorilor atunci când adaugă blocuri în meniurile de navigare.

În bara laterală Setări, veți găsi un set cuprinzător de opțiuni pentru controlul mai multor aspecte ale meniurilor de navigare.

Panoul Aspect include controale pentru justificare, orientare și încadrare.

Blocul de navigare include, de asemenea, un panou de setări de afișare îmbunătățit, cu o opțiune pentru un meniu de burger mereu activ.

De asemenea, puteți personaliza textul și culorile de fundal pentru meniuri și submeniuri.

O altă adăugare utilă adăugată recent la blocul Navigare este suportul Block Gap, care adaugă posibilitatea utilizatorilor de a controla distanța dintre elementele din meniu.

Panoul Tipografie oferă un set de comenzi pentru familia de fonturi, aspect, înălțimea liniei, decor și majuscule. Toate aceste comenzi pot fi activate/dezactivate dintr-un meniu drop-down care apare când faceți clic pe pictograma puncte suspensie din dreapta.

Blocul de navigație: sub capotă

Datele blocului de navigare sunt stocate în baza de date folosind un tip de postare dedicat wp_navigation .

De ce este acest lucru interesant pentru utilizatorii WordPress și cum funcționează?

Să presupunem că ați creat un meniu de navigare format din două linkuri personalizate și o casetă de căutare. Cu tema Twenty Twenty-Two instalată, meniul ar putea arăta așa cum se arată în următoarea imagine:

Blocul de navigare de mai sus este stocat în baza de date ca tip de post wp_navigation , după cum urmează:

 <!-- wp:navigation-link {"label":"Contacts","type":"page","id":7,"url":"http://wordpress-59.local/?page_id=7","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:navigation-link {"label":"About Us","type":"page","id":10,"url":"http://wordpress-59.local/?page_id=10","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:search {"showLabel":false,"placeholder":"Search the site","buttonPosition":"button-inside","buttonUseIcon":true} /-->

Stocarea conținutului blocului de navigare în baza de date permite utilizatorilor să folosească aceleași meniuri de navigare pe diferite teme de bloc. Dacă meniul nu este vizibil imediat, trebuie doar să alegeți meniul de navigare dorit din selectorul de meniu (vezi, de asemenea, problema #36087 și PR #36178).

Următoarea imagine arată meniul de mai sus cu tema Twenty Twenty-One Blocks:

Blocul Navigare a trecut prin mai multe iterații. Vă puteți aprofunda în fiecare implementare în notele de lansare Gutenberg 11.7, 11.8 și 11.9.

De asemenea, puteți citi mai multe despre blocul de navigare în noua notă de dezvoltare a blocului de navigare și articolul de asistență pentru blocul de navigare.
[CTA]

Galeriile de imagini, imaginile prezentate și pictogramele site-ului

Cu scopul de a face imaginile să se comporte mai consistent în diferite contexte, WordPress 5.9 oferă noi funcții și îmbunătățiri pentru mai multe blocuri. Blocul Galerie a fost complet revizuit, în timp ce diferitele modificări aduse blocurilor Imagine prezentată și Pictogramă site oferă utilizatorilor un control mai granular asupra imaginilor respective.

Un bloc de galerie refactorizat

În WordPress 5.8, capacitatea de a personaliza aspectul imaginilor din galerii a fost oarecum limitată. Nu a existat nicio modalitate de a schimba stilul imaginii sau de a aplica un filtru duoton.

În plus, din imaginile galeriei lipseau funcții importante, cum ar fi adăugarea de linkuri personalizate la imagini individuale dintr-o galerie.

Pentru a înțelege mai bine motivul acestei asimetrii între imagini din cele două contexte diferite ale unei singure imagini și ale unei imagini dintr-o galerie, să aruncăm o privire la blocul Galerie din vizualizarea Cod în WordPress 5.8:

Rețineți că detaliile imaginii sunt stocate numai în delimitatorul blocului Galerie (consultați și Ce este un bloc Gutenberg?).

Acest lucru a făcut ca imaginile individuale să se comporte diferit de imaginile din galerii.

Pentru ca imaginile să se comporte în mod constant în cele două contexte diferite, WordPress 5.9 introduce un bloc Galerie complet refactorizat, care acum se comportă ca un container pentru o colecție de elemente de figuri în loc de o listă neordonată de imagini.

În WordPress 5.9, imaginile din galerie sunt imbricate folosind API-urile de bază innerBlocks , iar fiecare imagine stochează propriul set de detalii, exact ca imaginile individuale.

Aceasta este o îmbunătățire excelentă, deoarece imaginile blocului Galerie acceptă acum aceleași funcționalități disponibile în blocurile de bază de imagine , cum ar fi dimensiunile imaginii și filtrele biton, precum și funcțiile standard ale blocurilor, cum ar fi funcționalitățile de glisare și plasare, copiere, duplicare și eliminare. .

Cu noul bloc Galerie, veți putea să stilați imaginile individual. Acest lucru oferă o gamă largă de oportunități de personalizare.

Imaginea de mai jos afișează mai multe imagini într-o galerie, fiecare cu colțuri rotunjite diferit:

De asemenea, puteți utiliza filtre duoton diferite pentru imagini diferite din aceeași galerie.

Și, desigur, puteți atribui o anumită clasă CSS fiecărei imagini, ceea ce vă oferă superputeri suplimentare pentru a adăuga orice personalizare de care aveți nevoie la imaginile din galeria dvs.

Pentru o vedere mai atentă a noului bloc Galerie, consultați, de asemenea, Notă de dezvoltare pentru Refactor Bloc Galerie, Îmbunătățiri viitoare ale blocului Galerie și notele de lansare Gutenberg 11.4.

Îmbunătățiri de imagine prezentate

Au fost aduse, de asemenea, mai multe îmbunătățiri blocului Imagine prezentată.

Controale de bază ale dimensiunilor

Blocul Imagine prezentată prezintă acum un nou panou de setări Dimensiuni care oferă controale pentru înălțime, lățime și scară.

Controlul dimensiunilor se aplică și imaginilor prezentate din blocurile de buclă de interogare, așa cum se arată în imaginea următoare:

Filtre Duotone pe imaginile prezentate

Am menționat mai sus că acum putem aplica filtrul duoton în imaginile împachetate în noul bloc Gallery refactorizat.

Acum, începând cu WordPress 5.9, filtrele duotonale sunt disponibile și în blocurile de imagini prezentate în orice context, de la șabloane de postare și de pagină la blocuri de buclă de interogare.

Această funcție deschide ușa către combinații de culori creative și consistente pe tot site-ul.

Decuparea imaginii în sigla site-ului

Înainte de WordPress 5.9 (și Gutenberg 11.6), imaginile de logo puteau fi editate doar înainte de a fi încărcate. Cu WordPress 5.9, puteți decupa, mări și roti imaginile utilizate în blocul Logo site direct din bara de instrumente bloc.

Noi instrumente de design, blocuri și îmbunătățiri ale interfeței de utilizare

Unsprezece versiuni Gutenberg sunt îmbinate în nucleul cu WordPress 5.9, oferind atât de multe funcții, îmbunătățiri și remedieri de erori încât nu ar fi posibil să le acoperiți pe toate într-un singur articol.

Așa că am ales câteva dintre cele pe care le-am găsit cel mai demne de atenție. Pentru o imagine de ansamblu mai detaliată a acestor funcții și îmbunătățiri, poate doriți să verificați și postările de lansare pentru Gutenberg 10.8, 10.9, 11.0, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8 și 1.

Acestea fiind spuse, această secțiune va acoperi următoarele modificări:

Border acceptă UI

Începând cu WordPress 5.9, atunci când theme.json declară setările border și un bloc declară suportul de chenar prin intermediul API-ului Block Supports, un nou panou de setări va oferi controale pentru raza, lățime, stil, culoare și unități ale chenarului (vezi și Gutenberg 11.1) .

Blocul de bază Group este un bun exemplu al acestei îmbunătățiri utile a UI. Fișierul block.json al blocului Group include acum următoarele declarații de supports :

 { ... "supports": { "align": [ "wide", "full" ], "anchor": true, "html": false, "color": { "gradients": true, "link": true }, "spacing": { "padding": true, "__experimentalDefaultControls": { "padding": true } }, "__experimentalBorder": { "color": true, "radius": true, "style": true, "width": true, "__experimentalDefaultControls": { "color": true, "radius": true, "style": true, "width": true } }, ... }, ... }

Această caracteristică permite utilizatorilor să creeze efecte grafice uimitoare pe site-urile lor web cu un efort minim. Îl puteți vedea în acțiune cu noua temă Twenty Twenty-Two.

Într-o postare sau pagină nouă, creați un nou bloc de grup și selectați-l. Veți vedea un panou Border în bara laterală cu setări de bloc. Schimbați lățimea și stilul chenarului după cum este necesar și bucurați-vă de rezultat.

Dacă sunteți un dezvoltator de teme și doriți să adăugați această caracteristică temelor dvs., deschideți fișierul theme.json și declarați suportul pentru chenar, așa cum se arată în următorul cod:

 { "version": 1, "settings": { "border": { "customColor": true, "customRadius": true, "customStyle": true, "customWidth": true } } }

Salvați fișierul și reveniți la tabloul de bord WordPress. Într-o postare sau pagină nouă, creați un nou bloc de grup și selectați-l. Ar trebui să vedeți acum un panou Border în bara laterală de setări de bloc (consultați și acest theme.json experimental).

Îmbunătățiri pentru vizualizarea listei

Cu WordPress 5.9, Vizualizarea Listă a fost îmbunătățită și oferă acum drag and drop, secțiuni pliabile și ancore HTML.

Trageți și plasați în vizualizarea Listă

După cum se menționează în cererea de extragere #33320, tragerea și plasarea a fost implementată în vizualizarea Listă, dar a fost dezactivată din cauza problemelor de performanță.

Începând cu WordPress 5.9, drag-and-drop în View List a fost re-implementat. Puteți trage și plasa din nou blocuri și grupuri de blocuri oriunde în vizualizarea Listă. Aceasta este o îmbunătățire extraordinară a gradului de utilizare a editorului, deoarece vă permite să mutați rapid și ușor blocurile și grupurile de blocuri în jurul paginilor dvs. Este esențial în articole și pagini de formă lungă și în gestionarea structurilor complexe ale blocurilor imbricate.

Vizualizare listă secțiuni pliabile

O altă îmbunătățire semnificativă a Vizualizării Listă este capacitatea de a extinde/restrânge secțiuni ale blocurilor imbricate. Acest lucru vă permite să navigați cu ușurință în structuri complexe de blocuri, extinzând grupuri individuale de blocuri, lăsând toate celelalte colapse.

De asemenea, puteți extinde și restrânge secțiunile Vizualizare listă folosind săgețile stânga și dreapta.

Ancore HTML pe elementele din vizualizarea listei

O altă îmbunătățire utilă este capacitatea de a adăuga ancore HTML la blocurile dvs. în vizualizarea listă și de a le vedea dintr-o privire.

Controlul spațierii între blocuri

Introdus pentru prima dată în Gutenberg 11.4 și acum fuzionat în nucleul cu WordPress 5.9, noul control Spațiere bloc vă permite să setați o distanță personalizată între elementele dintr-un bloc. Mai jos, puteți vedea o previzualizare cu diferite valori de spațiere între blocuri într-un bloc Coloane cu tema implicită Twenty Twenty-Two:

Gap Spacing este disponibil inițial pentru anumite blocuri, inclusiv butoane, imagini, coloane, titluri și navigare, dar suportul ar trebui extins la mai multe blocuri în viitor.

Temele ar trebui să activeze Gap Spacing în theme.json folosind noua proprietate aspectTools . Puteți citi mai multe despre instrumentele de aspect în scufundarea noastră profundă în Twenty Twenty-Two. Vedeți și cererile de extragere #33991 și #34630.

Previzualizare URL bogată pentru controlul linkurilor

Profitând de noul punct final REST cu detalii URL, controlul Link oferă acum o previzualizare bogată a adresei URL care arată detalii pentru o resursă țintă a linkului.

În prima sa implementare, această caracteristică a fost disponibilă numai în componenta text îmbogățit Editor de posturi. La momentul scrierii acestui articol, este disponibil și în Editorul site-ului, dar nu în editorii Navigare și Widget.

Creați pagini din link-ul pop-up

WordPress 5.9 oferă, de asemenea, o interfață de utilizare îmbunătățită a linkurilor inline, afișând un buton nou-nouț pentru a crea pagini noi direct din fereastra pop-up de linkuri inline. Această funcție este disponibilă numai în Editorul de postări.

Îmbunătățiri ale blocului de căutare

Blocul de căutare afișează acum setările de culoare pentru butoane și margini.

De asemenea, acum puteți personaliza culoarea fundalului și a textului, precum și culoarea și raza marginii.

Noi comenzi pentru dimensiunile blocului

Un nou panou de setări Dimensiuni este acum disponibil pentru utilizatori pentru a controla spațiul ocupat de un bloc pe pagină. Panoul ar trebui să includă controale pentru înălțime, lățime, umplutură, marjă și posibil aliniere, dar nu toate atributele vor fi disponibile pentru fiecare bloc.

Dezvoltatorii de blocuri vor găsi componenta <DimensionControl /> documentată pe GitHub, dar rețineți că este încă marcată ca o caracteristică experimentală și ar putea fi supusă unor modificări radicale la momentul scrierii acestui articol.

Un nou bloc de grup de widgeturi a fost adăugat la ecranul de widgeturi

Un nou bloc Widget Group este acum disponibil în editorul de widget-uri bazat pe blocuri. Cel mai recent bloc vă permite să adăugați un grup de blocuri într-un widget cu un titlu în Editorul de widget-uri și Personalizatorul temelor clasice.

Puteți citi mai multe despre editorul de widget-uri în Editorul de widget-uri bazate pe bloc și Widgeturi bloc în Personalizator.

Flex Layout și noul bloc de rânduri

Introdus inițial ca o caracteristică experimentală cu Gutenberg 11.2, aspectul flexibil a fost extins la mai multe blocuri, inclusiv legături sociale și blocuri de grup.

Unele blocuri, cum ar fi blocul Social Links, oferă acum un set de comenzi pentru bara de instrumente și setări pentru bara laterală care vă permit să personalizați aspectul flexibil.

Aceeași funcționalitate este disponibilă în blocul Navigare și blocul Rând, o nouă variantă a blocului Grup introdus cu Gutenberg 11.5.

Următoarea imagine arată blocul Rând cu controale de aspect în bara laterală de setări:

Mai jos, puteți vedea același bloc Row pe front-end și în instrumentul de inspecție al Chrome.

Îmbunătățiri ale modelului de blocuri

Introduse pentru prima dată cu WordPress 5.5, modelele de blocuri permit utilizatorilor WordPress să includă structuri complexe gata de utilizare ale blocurilor imbricate în conținutul lor cu doar câteva clicuri.

Acum, WordPress 5.9 face un pas înainte spre democratizarea designului și abilitarea utilizatorilor prin introducerea de câteva îmbunătățiri în sistemul de modele de bloc.

Deci, ce este nou cu modelele de bloc în WordPress 5.9?

Modele prezentate din Directorul de modele

Blocul de inserare afișează acum modelele de bloc prezentate recuperate dinamic din Directorul de modele, oferind utilizatorilor o modalitate rapidă și ușoară de a găsi modele populare de utilizat în conținutul lor.

În același mod, pe măsură ce modelele intră direct în tabloul de bord WordPress, dezvoltatorii WordPress ar trebui încurajați să creeze și să publice tot mai multe modele în timp, rezultând capabilități de design din ce în ce mai avansate pentru utilizatori.

Un nou explorator de modele pe ecran complet

Pe măsură ce numărul de modele de bloc disponibile în Directorul de modele continuă să crească și mai multe teme le folosesc, WordPress 5.9 introduce o nouă interfață de navigare a modelelor de bloc: Pattern Explorer.

Un nou buton Explorare deschide acum un mod pe ecran complet care permite utilizatorilor să răsfoiască, să caute și să insereze modele de bloc cu doar câteva clicuri. Rezultatul este o experiență îmbunătățită a utilizatorului.

Veți găsi, de asemenea, note suplimentare și mai multe exemple de modele de bloc în scufundarea noastră profundă în tema WordPress Twenty Twenty-Two.

Dacă sunteți interesat și doriți să aflați mai multe, ascultați podcastul Josepha Haden Chomphosy Episodul 16 și 21 și urmăriți videoclipul Exploring WordPress 5.9 YouTube de la Anne McCarthy.

The Twenty Twenty-Two Theme și WordPress Block Themes

Cu WordPress 5.9, nu mai trebuie să instalați pluginul Gutenberg pentru a activa Editarea completă a site-ului pe site-ul dvs. WordPress. Trebuie doar să permiteți unei teme de bloc să profite de toate funcțiile FSE.

În plus, WordPress 5.9 a fost inclus cu o nouă temă implicită, Twenty Twenty-Two, și schimbă jocul, deoarece Twenty Twenty-Two este prima temă de bloc implicită din toate timpurile.

Twenty Twenty-Two este o temă extrem de flexibilă și personalizabilă. Oferă un sandbox perfect pentru a încerca noul flux de editare a șabloanelor, noi blocuri, îmbunătățiri ale interfeței și toate funcțiile de editare a site-ului adăugate la bază, începând cu WordPress 5.9.

După cum am menționat mai sus, tot ce trebuie să faceți este să instalați și să activați o temă bloc, cum ar fi Twenty Twenty-Two. Odată ce tema este activă, un nou element de meniu Editor (beta) va apărea în meniul de administrare al tabloului de bord WordPress.

Interfața Site Editor are acum un flux de editare a site-ului reînnoit. Din interfața de editare, veți putea să editați vizual pagina de pornire a site-ului, șabloanele și părțile șablonului, precum și să accesați interfața Global Styles.

Când activați o temă de blocare, nu veți găsi Personalizatorul. Asta pentru că Personalizatorul nu acceptă teme de blocare, care folosesc doar Editorul de site. Acesta este și motivul pentru care nu puteți previzualiza temele blocate inactive .

Deci, începând cu WordPress 5.9, punctul de acces la Customizer nu mai este disponibil în meniul de administrare atunci când o temă de blocare este activă (cu excepția cazului în care utilizați un plugin care o folosește).

Dacă ești încă legat de temele tradiționale și ești îngrijorat de compatibilitatea anterioară, stai liniștit: poți continua să-ți folosești tema.

În prezent, aveți patru categorii diferite de teme din care să alegeți:

• Teme bloc : teme concepute pentru FSE
• Teme universale : teme care funcționează atât cu Personalizatorul, cât și cu Editorul site-ului
• Teme hibride : teme clasice care acceptă funcții FSE precum theme.json
• Teme clasice : Teme cu șabloane PHP, functions.php etc.

Datorită impactului pe care temele blocate îl vor avea probabil asupra ecosistemului WordPress, avem un articol întreg care acoperă temele Twenty Twenty-Two și WordPress. Asigurați-vă că îl verificați pentru o privire de ansamblu mai aprofundată.

Imbunatatiri ale performantei

Aici, la Kinsta, suntem obsedați de viteza site-ului. De aceea, suntem încântați de îmbunătățirile de performanță care vin cu WordPress 5.9.

Aceste îmbunătățiri vor afecta mai multe zone ale CMS, de la editorul de blocuri până la teme de blocare, încărcare leneșă și multe altele. Să ne scufundăm.

Îmbunătățiri ale dispozitivului de inserare bloc

Începând cu WordPress 5.9, tipurile de blocuri, modelele și categoriile sunt redate leneș în Block Inserter. Browserul încarcă mai întâi conținut cu prioritate mai mare, oferind utilizatorului o experiență de editare mai fluidă și o performanță îmbunătățită.

Alte îmbunătățiri notabile de performanță în contextul editorului de blocuri afectează blocurile reutilizabile și vizualizarea listă.

Mai puțin CSS încărcat

În ceea ce privește frontend-ul, WordPress 5.9 a redus drastic cantitatea de CSS încărcată de temele bloc, ceea ce duce la încărcarea paginilor semnificativ mai rapidă.

Principala îmbunătățire care trebuie remarcată în acest context este introducerea mecanismului de setări și stiluri theme.json , care împiedică temele să folosească foi de stil masive, inclusiv sute de declarații CSS. Cantitatea de cod CSS folosit de o temă a fost acum redusă la câteva proprietăți personalizate CSS pe care orice tip de bloc le poate reutiliza.

Îmbunătățiri ale performanței la încărcare leneră

Încărcarea leneșă a imaginilor a fost introdusă pentru prima dată în WordPress 5.5. Pornind de la WordPress 5.7, funcționalitatea de încărcare leneșă a fost extinsă la iframe, permițând proprietarilor de site-uri să construiască site-uri web mai rapide și să-și îmbunătățească SEO.

Oricum, în urma unei analize a celui mai mare conținut de vopsea (LCP), s-a dovedit că atribuirea atributului loading="lazy" tuturor imaginilor și cadrelor iframe de pe pagină provoacă o ușoară degradare a performanței.

Pur și simplu săriți peste atributul loading="lazy" nu a fost o soluție, deoarece acest lucru ar duce la pierderea avantajelor clare ale încărcării leneșe.

Soluția optimă ar fi să omiteți doar atributul loading="lazy" pe imaginile care apar deasupra pliului. Cu toate acestea, deoarece atributul loading="lazy" este atribuit pe partea serverului, WordPress nu poate determina exact ce imagini sunt afișate deasupra pliului. Este ceva care depinde în mare măsură de tema activă.

Acum, ca soluție de compromis, începând cu WordPress 5.9, atributul loading="lazy" nu este aplicat primei imagini de conținut sau iframe. O analiză efectuată pe 50 de teme populare WordPress a constatat că această soluție duce la îmbunătățiri considerabile de performanță și la încărcarea paginilor cu până la 30% mai rapidă.

Felix Arntz explică cum funcționează:

… pentru a îmbunătăți performanța imediată, fără a solicita unui dezvoltator să personalizeze comportamentul, WordPress va omite acum prima „imagine de conținut sau iframe” de pe pagină de la încărcare leneră. Termenul „imagine de conținut sau iframe” desemnează aici orice imagine sau iframe care se găsește în conținutul oricărei postări din bucla de interogare principală curentă, precum și orice imagine prezentată a unei astfel de postări. Acest lucru se aplică atât conținutului „singular”, cât și „arhivă”: într-un context „singular”, prima imagine sau iframe a (singurii) postări nu este încărcată leneș, în timp ce într-un context de „arhivă”, prima imagine sau iframe a postării. primul post din interogare nu este încărcat leneș.

Dezvoltatorii de teme pot folosi acum noul filtru wp_omit_loading_attr_threshold pentru a modifica numărul de imagini/iframe care trebuie sărit de la încărcare leneră.

Mai multe foi de stil pe bloc

Dezvoltatorii de blocuri și teme pot înregistra mai multe foi de stil pe fiecare bloc și pot încărca stiluri din alte blocuri atunci când este necesar. Acest lucru permite încărcarea foilor de stil în funcție de conținutul paginii, împiedicând temele să încarce foi de stil uriașe pe fiecare pagină.

Potrivit lui Ari Stathopoulos:

Blocurile vor putea acum să înregistreze mai multe foi de stil și să încarce stiluri din alte blocuri atunci când este necesar. Temele vor putea adăuga stiluri pe bloc, în loc să încarce foi de stil monolitice care sunt încărcate forțat oriunde. Acest lucru are un impact mai mare asupra temelor bloc în care încărcarea foilor de stil este optimizată pe baza conținutului paginii și aspectului, dar poate fi folosită și de temele clasice.

Funcții suplimentare pentru dezvoltatori

Pe lângă multele caracteristici și îmbunătățiri ale UI discutate până acum, WordPress 5.9 introduce și câteva funcții pentru dezvoltatori.

Un nou atribut pentru blocarea blocurilor

Dezvoltatorii de blocuri pot împiedica acum utilizatorii să mute sau să șteargă blocuri individuale adăugând un atribut de lock în setările blocurilor:

 { ... "attributes": { "lock": { "type": "object", "default": { "move": true, "remove": true } } } }

Cu această caracteristică activată, utilizatorii pot edita conținutul blocului, dar nu pot muta blocul pe pagină sau îl pot elimina din pânza editorului. Următoarea imagine arată un bloc personalizat cu un set standard de comenzi din bara de instrumente:

Definirea atributului de lock , așa cum se vede în codul de mai sus, ascunde elementele de mutare a blocurilor și controalele Mutare și Eliminare din bara de instrumente pentru blocuri. Imaginea de mai jos arată rezultatul final pe ecran:

De asemenea, puteți bloca un anumit bloc într-un model de bloc. Pentru un exemplu, consultați și Blocarea blocurilor în WordPress 5.9.

Nou API pentru a accesa setările și stilurile globale

WordPress 5.9 introduce un nou API public PHP pentru a citi datele din theme.json .

Citirea setărilor și stilurilor din theme.json

Există două funcții noi pentru a citi datele din secțiunile de settings și styles declarate în theme.json :

 wp_get_global_settings( $path = array() , $context = array() ); wp_get_global_styles( $path = array(), $context = array() );

• $path este o matrice care listează calea către setarea specificată
• $context este o matrice care stabilește contextul pentru acele date. Dezvoltatorii pot citi dintr-o secțiune specifică de setări de bloc - de exemplu, array( 'block_name' => 'core/paragraph' ) . Cheia orygin setată la base permite ignorarea datelor personalizate salvate de utilizator.

Următorul cod exemplu va returna valoarea setării contentSize . În Twenty Twenty-Two, ar fi 650px :

 wp_get_global_settings( array( 'layout', 'contentSize' ) );

Prin setarea unui context, puteți prelua stiluri pentru anumite blocuri. Următorul cod arată cum să preluați valoarea razei marginii pentru blocul de core/button :

 function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button' ) ); }

Funcția de mai sus returnează valoarea necesară a proprietății, luând în considerare setările implicite, setările temei și datele utilizatorului. Valoarea personalizată va fi furnizată dacă utilizatorul configurează raza marginii butonului în interfața Stiluri globale.

Pentru a ignora datele utilizatorului, ați folosi următorul cod:

 function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button', 'origin' => 'base' ) ); }

Obținerea foii de stil generată

WordPress 5.9 introduce, de asemenea, o nouă funcție pentru a obține foaia de stil rezultată din stilurile implicite, tematice și personalizate:

 wp_get_global_stylesheet( $types = array() );

$types este o listă a stilurilor de generat.

Puteți citi mai multe despre noul API în New API pentru a accesa setările și stilurile globale.

Mai multe caracteristici pentru dezvoltatori

Modificările suplimentare WordPress 5.9 pentru dezvoltatori despre care poate doriți să știți includ:

• Blocare teme, o nouă modalitate de a crea teme în WordPress 5.9
• Actualizări pentru Setări, Stiluri și theme.json
• Modificări și filtre axate pe teme în WordPress 5.9
• Noi interogări de capacitate în WordPress 5.9
• Diverse modificări de bază în WordPress 5.9
• Modificări diverse ale editorului de blocuri în WordPress 5.9
• Preluați mai mult control asupra zonelor blocurilor interioare (ca dezvoltator de blocuri)

Ghidul tău suprem pentru WordPress 5.9: de la îmbunătățirea interfeței de utilizare la stiluri globale (și multe altele!) Faceți clic pentru a Tweet

rezumat

Vom încheia acest articol cu ​​o notă rapidă despre cota de piață WordPress. WordPress alimentează în prezent peste 65% din toate site-urile web al căror sistem de management al conținutului este cunoscut și se află la nord de 43% din toate site-urile web .

Aceste cifre sunt impresionante, mai ales în comparație cu cei mai apropiați concurenți cu o cotă de piață mai mică de 5%, cum ar fi Shopify.

Și asta înseamnă, de asemenea, că nu poți trece cu vederea evoluția WP CMS. Fiecare versiune nouă de WordPress aduce noi funcții, îmbunătățiri ale interfeței, îmbunătățiri ale performanței, iar WordPress 5.9 nu face excepție. Tot ce aveți nevoie pentru a testa noile funcții este o temă bloc, cum ar fi noua temă implicită Twenty Twenty-Two, și veți fi gata de plecare.

La tine, acum! Ești gata să faci trecerea la blocarea temelor și a FSE? Și care sunt modificările tale preferate care vin cu WordPress 5.9?