Kontroluj projektowanie bloków za pomocą wtyczki EditorPlus WordPress

W zeszłym tygodniu, kiedy wprowadzałem ostatnie poprawki do recenzji jego projektu Gutenberg Forms, Munir Kamal przygotowywał się do uruchomienia innego rodzaju wtyczki WordPress do edytora bloków. Ten nazywał się EditorPlus i miał stworzyć system projektowania bloków. Kamal i jego zespół po cichu dokonali ostatnich poprawek w wersji 1.0 i kilka dni później udostępnili wtyczkę w repozytorium wtyczek WordPress.

W przeciwieństwie do wielu innych wtyczek, które tworzą niestandardowe bloki w celu osiągnięcia określonych wyników projektu, EditorPlus zapewnia użytkownikom elastyczność w dostosowywaniu swoich stron do tego, co mają pod ręką. Dodaje mnóstwo opcji projektowych do każdego z istniejących bloków WordPressa. Z przodu pozostawia lekki ślad, wyświetlając na bieżąco tylko CSS niezbędny dla tej strony.

Być może najlepszą rzeczą w tej wtyczce jest to, że kładzie podwaliny pod wiele funkcji związanych z projektowaniem, które prawdopodobnie znajdą stałą siedzibę w Gutenbergu i ostatecznie będą rdzeniem WordPressa. Zespół Gutenberga może pożyczać pomysły, iterować i ulepszać je. Widzieliśmy już eksperymentalną kontrolę wyściółki w Gutenberg 8.3. Sensowne byłoby, gdyby zespół programistów kontynuował dalsze działania z dodatkowymi kontrolami projektowymi. Dobrą rzeczą w tych kontrolkach, które są najpierw wprowadzane w wtyczkach innych firm, jest to, że zespół może zobaczyć, jak użytkownicy na nie reagują i dowiedzieć się, czy będą pracować bezpośrednio w Gutenbergu, zanim zdecydują się na cokolwiek.

EditorPlus nie brakuje gadżetów dla tych, którzy lubią mieć dużą swobodę projektowania bez dotykania kodu. Zasadniczo wtyczka jest edytorem CSS bez konieczności znajomości CSS. Zapewnia użytkownikom końcowym opcje najbardziej potrzebnych funkcji CSS za pośrednictwem opcji blokowania. Jest to plac zabaw dla tych, którzy lubią majstrować przy projektowaniu i wystarczająco mocny, aby tworzyć unikalne układy bez rozdęcia strony na froncie.

Jak działa EditorPlus

Po aktywacji wtyczki EditorPlus użytkownicy końcowi mogą od razu zacząć korzystać z jej opcji, przechodząc do edytora postów lub stron. Po wstawieniu bloku wtyczka udostępnia następujące osiem zakładek pod panelem opcji bloku (każda poprzedzona jest symbolem + ):

• Granica
• Cień Pudełka
• Rozmiary
• Tło
• Margines
• Wyściółka
• Promień graniczny
• Dodatki

Te zakładki będą teraz wyświetlane tylko dla podstawowych bloków WordPress, a nie bloków wtyczek innych firm. Oprócz zakładki Dodatki, każda zakładka odpowiada swoim odpowiednikom CSS. Karta Dodatki zapewnia bardziej zaawansowaną opcję „Wyświetlanie”, która umożliwia użytkownikom zmianę wartości display elementu zawijania bloku w CSS. Tę opcję najlepiej pozostawić bardziej zaawansowanym użytkownikom. Zapewnia również opcję przejścia, która będzie dobrze działać ze stylami najechania.

Każda z zakładek opcji bloku ma również tajemnicze przyciski „R” i „H”. Przycisk „R” umożliwia użytkownikom włączenie opcji responsywnych, co oznacza, że ​​mogą zmieniać style bloków w oparciu o ekrany komputerów stacjonarnych, tabletów i urządzeń mobilnych. Przycisk „H” pozwala użytkownikom zmieniać projekt na podstawie stanu najechania myszą.

Wtyczka zawiera wiele opcji na niewielkiej przestrzeni. Wszystkie nowe karty projektowe mogą początkowo wydawać się nieco przytłaczające. Jednak przy niewielkim wykorzystaniu łatwo jest zdobyć trochę pamięci mięśniowej i szybko wystrzelić niestandardowe układy.

Każda z opcji wtyczki jest dość prosta. A jeśli tak nie jest, zyskujesz natychmiastową informację zwrotną za pośrednictwem edytora bloków.

Istnieje kilka obszarów, które mogą okazać się problematyczne dla niektórych użytkowników, w zależności od tego, jak ich motyw stylizuje określone bloki. Na przykład ustawienia szerokości na karcie Rozmiary mogą nie zawsze działać. Niektóre motywy dodadzą maksymalną szerokość do bloków, co ograniczy całkowitą szerokość bez względu na rozmiar. Można to zmienić za pomocą wtyczki, ale Kamal postanowił tego nie robić w wersji 1.0.

Uważaj na marginesy. W zależności od projektu motywu może używać lewego i prawego marginesu do umieszczania treści. Nawet jeśli ustawisz tylko górny lub dolny margines, wtyczka automatycznie wypisze 0 dla lewego i prawego marginesu. Może to spowodować uszkodzenie układu treści niektórych motywów.

Jednym z problemów, jaki napotkałem z wtyczką, były style mojego aktywnego motywu nadrzędne ogólnie nad stylami wtyczki. Na przykład domyślny motyw Twenty Twenty jest skierowany p.has-background w swoim CSS, aby dodać niestandardowe dopełnienie. Dlatego nadpisuje CSS wtyczki EditorPlus z wyższą szczegółowością. Ten problem był oczekiwany, a twórca wtyczki dodał rozwiązanie w postaci „ważnego” pola wyboru dla każdej opcji projektu. Jeśli użytkownik zaznaczy to pole, dodaje !important do reguły stylu na wyjściu, co pozwoli mu nadpisać style motywu. Nie jest to rozwiązanie w 100% niezawodne. Twój przebieg może się różnić w zależności od motywu, ale powinien działać w większości przypadków użycia.

Nie podoba mi się pomysł z ważnym polem wyboru w interfejsie użytkownika. Nie jest to coś, o co użytkownik powinien się martwić. Jednak jest to rzeczywistość świata, w którym motywy i wtyczki nie mają rzeczywistego sposobu na przekazanie, które zasady projektowania są ważniejsze niż inne. Pomimo tego, że nie chciałem tego w interfejsie użytkownika, uwzględnienie go było mądrą decyzją. W przeciwnym razie zbyt wiele reguł stylów motywów zastąpiłoby CSS wtyczki.

Końcowe przemyślenia

W wersji 1.0 EditorPlus ma solidny początek. W moich testach znalazłem kilka wad. Wszelkie problemy dla przeciętnego użytkownika będą prawdopodobnie miały formę konfliktów tematycznych, a konflikty te najprawdopodobniej będą dotyczyć tematów o wysokiej szczegółowości lub !important w ich CSS.

Kamal wyjaśnia na stronie wtyczki, że z tej wtyczki może pochodzić więcej. Nie jestem pewien, jakie funkcje ma na myśli, ale nie mogę się doczekać, kiedy je zobaczę. Chciałbym zobaczyć opcję cieniowania tekstu dla bloków związanych z tekstem, takich jak Nagłówek i Akapit. Byłoby również miło zobaczyć niektóre opcje projektowania obrazów w bloku Galeria, a nie tylko element zawijania.

To, czy powinieneś używać EditorPlus, będzie zależeć od tego, czy potrzebujesz dodatkowych kontroli projektu. EditorPlus jest skierowany do osób, które potrzebują czegoś bardziej zbliżonego do lekkiego narzędzia do tworzenia stron, ale chcą pozostać przy natywnym WordPressie. Ta wtyczka jest dobrą wizytówką tego, co jest możliwe i jest dobrym wskaźnikiem potencjalnych opcji projektowych, które pewnego dnia mogą trafić do WordPressa.