Controlați designul blocului prin pluginul EditorPlus WordPress

Săptămâna trecută, în timp ce făceam editările finale la o revizuire a proiectului său Gutenberg Forms, Munir Kamal se pregătea pentru lansarea unui alt tip de plugin WordPress pentru editorul de blocuri. Acesta se numea EditorPlus și ar crea un sistem de design pentru blocuri. Kamal și echipa sa au pus în liniște ultimele versiuni 1.0 și au lansat pluginul în depozitul de pluginuri WordPress câteva zile mai târziu.

Spre deosebire de multe alte plugin-uri care creează blocuri personalizate pentru a obține rezultate specifice de design, EditorPlus oferă utilizatorilor flexibilitatea de a-și personaliza paginile cu ceea ce au la îndemână. Acesta adaugă o mulțime de opțiuni de design la fiecare dintre blocurile existente WordPress. În partea din față, lasă o amprentă ușoară prin scoaterea din zbor numai a CSS-ului necesar pentru pagina respectivă.

Poate cel mai bun lucru despre acest plugin în acest moment este că pune bazele pentru multe funcții legate de design, care probabil își vor găsi o casă permanentă în Gutenberg și, în cele din urmă, vor găsi WordPress de bază. Echipa Gutenberg poate împrumuta idei, le poate repeta și le poate îmbunătăți. Am văzut deja terenul experimental de control al căptușelii în Gutenberg 8.3. Ar fi logic ca echipa de dezvoltare să continue cu controale de proiectare suplimentare pe drum. Lucrul bun cu privire la implementarea acestor controale în pluginurile terțelor părți este că echipa poate vedea cum reacţionează utilizatorii la ele și poate înțelege dacă ar lucra direct în Gutenberg înainte de a se angaja la ceva.

EditorPlus nu duce lipsă de bunătăți pentru cei cărora le place să aibă multă libertate de design fără a atinge codul. În esență, pluginul este un editor CSS fără a fi nevoie să cunoască CSS. Oferă utilizatorilor finali opțiuni pentru cele mai necesare funcții CSS prin opțiuni de blocare. Este un loc de joacă pentru cei cărora le place să se joace cu designul și suficient de puternic pentru a crea machete unice fără a umfla site-ul pe partea din față.

Cum funcționează EditorPlus

După activarea pluginului EditorPlus, utilizatorii finali pot începe să utilizeze opțiunile acestuia imediat, mergând la editorul de postări sau pagini. După inserarea unui bloc, pluginul pune la dispoziție următoarele opt file sub panoul de opțiuni de bloc (fiecare este precedată de un simbol + ):

• Frontieră
• Box Shadow
• Dimensiunea
• fundal
• Marja
• Captuseala
• Raza de frontieră
• In plus

Aceste file vor apărea în acest moment numai pentru blocurile de bază WordPress și nu pentru blocurile de pluginuri terță parte. În afară de fila Extra, fiecare filă corespunde omologilor CSS. Fila Extra oferă o opțiune „Afișare” mai avansată, care permite utilizatorilor să modifice valoarea de display a elementului de împachetare bloc în CSS. Această opțiune este cel mai bine lăsată utilizatorilor mai avansați. De asemenea, oferă o opțiune de tranziție care ar funcționa bine cu stilurile de hover.

Fiecare dintre filele de opțiuni de blocare are, de asemenea, butoanele misterioase „R” și „H”. Butonul „R” permite utilizatorilor să activeze opțiunile receptive, ceea ce înseamnă că pot schimba stilurile de bloc pe baza ecranelor desktop, tabletă și mobil. Butonul „H” le permite utilizatorilor să schimbe designul în funcție de starea mouse-ului.

Plugin-ul include o mulțime de opțiuni într-un pic de spațiu. Toate noile file de design se pot simți puțin copleșitoare la început. Cu toate acestea, cu puțină utilizare, este ușor să câștigi puțină memorie musculară și să elimini rapid machetele personalizate.

Fiecare dintre opțiunile pluginului este destul de simplă. Și, atunci când nu sunt, beneficiați de feedback instantaneu prin intermediul editorului de blocuri.

Există câteva zone care s-ar putea dovedi problematice pentru unii utilizatori, în funcție de modul în care tema lor stilează anumite blocuri. De exemplu, setările de lățime din fila Dimensiune ar putea să nu funcționeze întotdeauna. Unele teme vor adăuga o lățime maximă blocurilor, ceea ce va restrânge lățimea totală, indiferent de dimensiune. Este posibil să anulați acest lucru prin intermediul pluginului, dar Kamal a ales să nu facă acest lucru în versiunea 1.0.

Atenție la margini. În funcție de designul temei, poate folosi marginile din stânga și din dreapta pentru a plasa conținut. Chiar și atunci când setați doar o margine de sus sau de jos, pluginul va scoate automat 0 pentru marginile din stânga și din dreapta. Acest lucru ar putea rupe aspectul conținutului pentru unele teme.

O problemă pe care am întâlnit-o cu pluginul a fost stilurile temei mele active, care anulează stilurile pluginului în general. De exemplu, tema implicită Twenty Twenty vizează p.has-background în CSS-ul său pentru a adăuga umplutură personalizată. Prin urmare, anulează CSS-ul pluginului EditorPlus cu o specificitate mai mare. Această problemă era de așteptat, iar dezvoltatorul de plugin a adăugat o soluție pentru aceasta sub forma unei casete de selectare „importante” pentru fiecare opțiune de design. Dacă un utilizator bifează această casetă, se adaugă !important la regula de stil la ieșire, ceea ce îi va permite să anuleze stilurile temei. Nu este o soluție 100% sigură. Kilometrajul dvs. poate varia, în funcție de temă, dar ar trebui să funcționeze pentru majoritatea cazurilor de utilizare.

Nu-mi place ideea unei casete de selectare importante în interfața de utilizare. Nu este ceva pentru care un utilizator ar trebui să-și facă griji. Cu toate acestea, este realitatea unei lumi în care temele și pluginurile nu au o modalitate reală de a comunica care reguli de design sunt mai importante decât altele. În ciuda faptului că nu doream acest lucru în UI, a fost o decizie inteligentă să-l includ. În caz contrar, prea multe reguli de stil ale temelor ar fi suprascris CSS-ul pluginului.

Gânduri finale

Pentru o versiune de versiune 1.0, EditorPlus a început bine. În testele mele, am găsit câteva defecte. Orice problemă pentru utilizatorul obișnuit va veni probabil sub formă de conflicte de teme, iar acele conflicte vor fi cel mai probabil în jurul temelor care folosesc specificitate ridicată sau !important în CSS-ul lor.

Kamal arată clar pe pagina web a pluginului că vor veni mai multe de la acest plugin. Nu sunt sigur ce caracteristici are în minte, dar aștept cu nerăbdare să le văd. Aș dori să văd o opțiune de umbră de text pentru blocurile legate de text, cum ar fi Titlu și Paragraf. De asemenea, ar fi bine să vedem câteva opțiuni de design pentru imaginile din blocul Galerie, mai degrabă decât doar elementul de ambalare.

Dacă ar trebui să utilizați EditorPlus va depinde dacă aveți nevoie de controale de proiectare suplimentare. EditorPlus este destinat persoanelor care au nevoie de ceva mai asemănător cu un generator de pagini ușor, dar care doresc să rămână la WordPress nativ. Acest plugin este o expoziție frumoasă a ceea ce este posibil și este un bun indicator al potențialelor opțiuni de design care ar putea ajunge într-o zi în WordPress.