Gutenberg 12.5 introduce variații globale de stiluri, păstrează stilul butoanelor adiacente și adaugă transparență alfa la selectatorii de culoare

Publicat: 2022-02-03

Gutenberg 12.5 a ajuns astăzi în directorul de pluginuri WordPress. Am fost deja entuziasmat de cel puțin o nouă îmbunătățire, variații globale de stiluri. Cu toate acestea, aceasta este o actualizare consistentă, cu mai multe funcții centrate pe dezvoltatori și pe utilizator.

Cu WordPress 5.9 acum lansat în sălbăticie, se pare că toate mâinile sunt din nou pe punte, în timp ce ne pregătim pentru lansarea versiunii 6.0 în mai. Săptămâna trecută, am acoperit foaia de parcurs timpurie, iar unele dintre articolele din acea listă sunt deja în această ultimă actualizare Gutenberg, într-o anumită formă sau mod.

Variații globale de stiluri

Autorii de teme pot acum să creeze mai multe variații theme.json și să le plaseze în folderul /styles al temei lor. Apoi, utilizatorii pot comuta între diferitele presetări la ceva care li se potrivește cel mai bine.

Noua caracteristică promite să fie unul dintre punctele importante ale versiunii WordPress 6.0, iar tema implicită Twenty Twenty-Two va livra în cele din urmă mai multe variante proprii.

M-am aruncat în această funcție mai detaliat într-o postare de săptămâna trecută. Liderul proiectului Gutenberg, Matias Ventura, a explicat acest lucru în comentarii:

Obținând acest lucru la începutul ciclului, astfel încât să putem îmbunătăți experiența și mecanica. Mă aștept să fie foarte bun în câteva iterații. Aștept cu nerăbdare să sparg peretele pachetului de teme, deoarece toate aceste variații sunt compatibile în mod inerent cu fiecare temă de bloc de acolo!

Deși împărtășesc entuziasmul lui Ventura cu privire la această funcție, nu sunt sigur că putem sparge bariera temei cu 6.0. Ideea aici este că astfel de variații ar fi interschimbabile între teme. Nu văd că acest lucru se întâmplă, având în vedere starea actuală a sistemului global de stiluri.

Majoritatea theme.json sunt standardizate, dar mulți autori folosesc proprietatea settings.custom . Acest lucru le permite să seteze orice număr de valori personalizate, care sunt adesea menționate prin foaia de stil a temei.

Există, de asemenea, acea mică problemă de a nu avea o schemă standard de denumire pentru caracteristici precum culorile și tipografia.

Deoarece niciunul dintre aceste lucruri nu va fi întotdeauna la fel între oricare două teme, schimbarea variațiilor nu va fi întotdeauna frumoasă. Este un obiectiv înalt și poate că merită să încercăm să vedem ce este posibil. Cu toate acestea, conceptul se simte ca urmărirea de a renunța complet la sistemul de teme pentru un set implicit de tăiat cookie-uri gigant.

Comutarea variațiilor este cel mai bine lăsată pe teme individuale. Permiteți autorilor de teme care își construiesc sistemele personalizate pe theme.json să gestioneze experiența și așteptările utilizatorului. Ar trebui să ne concentrăm pe construirea de instrumente care să-i ajute să-și execute viziunea, fără a ne îngrijora că un utilizator își „instalează” variația JSON într-un proiect complet diferit.

Butoanele noi păstrează stilul butoanelor adiacente

Editor de postări WordPress deschis cu un bloc Button. Se arată că un bloc nou introdus are același stil ca și fratele său.
Stilul blocului Button nou se potrivește cu cel anterior.

WordPress face relativ ușor duplicarea unui buton, dar este ascuns sub meniul drop-down cu opțiuni din bara de instrumente. Aceasta este o acțiune de două clicuri în comparație cu simpla apăsare a pictogramei „+” pentru a insera un nou bloc Button. Înainte de Gutenberg 12.5, acest lucru ar avea ca rezultat ca cel nou să primească tratamentul de stil implicit. Este una dintre acele neplăceri minore până când începeți să lucrați cu mai multe butoane simultan.

Cea mai recentă versiune dublează automat stilul blocului Button adiacent atunci când îl inserați pe următorul. Aceasta este o experiență mult mai bună.

Cu toate acestea, nu ne duce atât de departe cât trebuie să mergem. Ce se întâmplă dacă decideți să schimbați mai târziu designul pentru fiecare Buton? Ai mult de lucru înainte de a le modifica pe fiecare. Există un bilet deschis pentru a copia un stil în toate celelalte din grupul de bloc Buttons.

Utilizatorii pot adăuga culori transparente

Un bloc Heading se află deasupra unui bloc Cover în editorul de postări WordPress. Selectorul de culori este deschis, care arată un glisor de transparență alfa.
Culoarea transparentă lasă fundalul să se arate.

Utilizatorii pot controla în sfârșit transparența alfa a culorilor personalizate la nivel de bloc. Funcția funcționează pentru opțiunile de culoare pentru text, fundal, link și chenar. Această îmbunătățire închide un bilet deschis pentru prima dată în octombrie 2019.

Există unele selecționare de culoare în care nu este activată. Aceasta include secțiunea paletă personalizată din panoul de stiluri globale și culorile legate de pictograme pentru blocul Linkuri sociale. Același lucru este valabil și pentru culoarea de suprapunere a blocului Cover, dar are un control separat al opacității.

Postați opțiunea de dimensiune a imaginii prezentate

Postați blocul de imagine prezentată în interiorul unui bloc Query Loop în editor. Meniul derulant Dimensiune imagine este selectat în bara laterală a inspectorului de bloc, listând toate dimensiunile disponibile.
Imagini prezentate decupate și de dimensiuni egale într-un bloc Query Loop.

Gutenberg 12.5 introduce o nouă opțiune care permite setarea blocului Post Featured Image pentru a utiliza o dimensiune a imaginii WordPress sau definită de temă. Pare o schimbare banală, dar este un salt înainte pentru blocarea tematică.

Autorii temei au filtrat cârligul post_thumbnail_size pentru a gestiona acest lucru. Cu toate acestea, această metodă devine complicată atunci când aveți de-a face cu mai multe interogări de postare cu dimensiuni diferite ale imaginii.

Am menționat asta doar de un an. Am scris despre asta iar și iar și iar, încercând să fac pe oricine să asculte. Dacă vrem mai mulți designeri care sări la bordul trenului de dezvoltare a temei bazat pe blocuri, ei au nevoie de control asupra imaginilor prezentate. Mult prea multe machete se bazează pe dimensiuni specifice pentru a arăta cel mai bine.

Acum, dacă am putea folosi doar imaginea prezentată în interiorul blocurilor Cover și Media & Text...

Copiați tot conținutul editorului de site

Editor de site WordPress cu meniul de opțiuni deschis. Este selectat butonul „Copiați tot conținutul”.
Copierea întregului conținut din editorul site-ului.

Astăzi am aflat că există un buton „Copiați tot conținutul” în meniul de opțiuni al editorului de postări. Nu știu de cât timp a fost acolo, dar asta e destul de îngrijit. Am încercat inutil să selectez tot conținutul - uneori cu o măsură de succes - prin intermediul pânzei de conținut. Chiar și aceia dintre noi care petrec aproape fiecare oră de veghe în editor pot învăța din când în când un nou truc.

Această opțiune de copiere a conținutului a fost acum adăugată la editorul site-ului ca parte a unei inițiative de a aduce paritatea funcțiilor între cei doi editori.

Vizualizare cod în Editorul site-ului

Editor de site WordPress cu vizualizarea de editare a codului deschisă.
Deschiderea editorului de cod.

Continuând cu paritatea de caracteristici între editorii de postare și de site, utilizatorii pot acum comuta la vizualizarea codului din editorul site-ului.

Din punct de vedere tehnic, acesta se numește „editor de cod”, dar există dragoni în față pentru oricine încearcă să editeze ceva. Cel puțin dacă se așteaptă la altceva decât temutul mesaj „acest bloc conține conținut neașteptat sau invalid”. Aș naviga în ape mai calme și aș evita-o pentru orice altceva decât să citesc sau să copiez.