JetGuten for Gutenberg

JetGuten for Gutenberg: Nowa Era Tworzenia Treści w WordPressie

JetGuten to innowacyjne rozszerzenie dla edytora Gutenberg, które zostało stworzone z myślą o użytkownikach WordPressa pragnących wzbogacić swoje strony o nowoczesne bloki treści. Dzięki połączeniu popularnych funkcji JetElements z możliwością edycji w Gutenberg, JetGuten oferuje twórcom treści niezrównaną elastyczność i kontrolę nad ich projektami.

Rozwój JetGuten

Od momentu wprowadzenia edytora Gutenberg w WordPressie 5.0, zespół Zemez postanowił stworzyć first add-on, który dostarcza użytkownikom nowe możliwości. Głównym celem JetGuten było zaspokojenie potrzeb twórców treści poprzez łatwe w użyciu bloki, które pozwalają na dodawanie różnorodnych elementów do stron. Proces tworzenia JetGuten był intensywny i zaledwie w trzy tygodnie po premierze edytora zostały wprowadzone zmiany w samej platformie, co wymagało od zespołu szybkiej adaptacji.

Język Programowania

W procesie tworzenia JetGuten jasno ujawniło się znaczenie znajomości JavaScript. Jak zauważył Matt Mullenweg, „Naucz się JavaScript, głęboko.” Oczywiście, PHP nie straciło na znaczeniu, ale drzwi do nowoczesnego rozwoju w WordPressie otworzyło przejście w stronę JavaScript.

W JetGuten PHP było wymagane głównie do przygotowania „wrappera” pluginu, a wszelkie działania związane z ustawieniami bloków oraz ich wyglądem były realizowane przy użyciu JavaScript. Taka zmiana wymaga od programistów dogłębnej znajomości nowoczesnych metod programowania oraz elastyczności w podejściu do tworzenia kodu.

Rozdzielenie Logiki od Prezentacji

Jednym z kluczowych aspektów przy tworzeniu pluginu była konieczność rozdzielenia logiki od prezentacji. W tradycyjnych wtyczkach WordPressa (np. WooCommerce), logika i prezentacja były oddzielone na poziomie globalnym (motywy vs. wtyczki) oraz lokalnym (wewnątrz motywów i wtyczek). W przypadku Gutenberg ten model został zaburzony, co skutkuje tym, że logika jest ściśle związana z wyglądem.

Choć CSS nadal odgrywa ważną rolę w dostosowywaniu wyglądu bloków, brak możliwości łatwej edycji HTML powoduje, że programiści muszą dostosować się do nowego paradygmatu, co może być ograniczeniem dla bardziej skomplikowanych projektów.

Nieskończone Możliwości Tworzenia Interfejsów

Gutenberg to wielkie osiągnięcie w dziedzinie tworzenia interfejsów. Deweloperzy mogą tworzyć własne elementy interfejsu, które interagują z edytorem. Istnieją dwa główne obszary do dodawania niestandardowych elementów: ciała bloku oraz pasek boczny „inspektor bloku”. Dzięki temu, deweloperzy mogą wykorzystywać zarówno standardowe elementy dostępne w Gutenberg jak i dodawać własne, co otwiera nowe możliwości rozwoju.

Na przykład w bloku „Animated Box” dodaliśmy kontrolę, która pozwala na łatwiejszą edycję. Tego rodzaju elastyczność w projektowaniu interfejsów stanowi znaczącą różnicę w porównaniu do innych edytorów.

Rozdzielenie Wyglądu Edytora i Frontend’u

Gutenberg wyróżnia się możliwością rozdzielenia wyglądu bloku w edytorze i na frontendzie. Przykład: w bloku „Image Comparison” można porównywać dwa obrazy w interfejsie frontendowym, jednak w edytorze nie wszystkie funkcje są dostępne.

Tworząc blok, deweloper definiuje dwie metody: edit() oraz save(). edit() odpowiada za wyświetlanie bloku w edytorze, podczas gdy save() zapisuje reprezentację bloku w bazie danych. Taki podział daje pełną kontrolę nad tym, jak każdy element treści będzie się przedstawiał w różnych kontekstach.

Wrażliwość na Aktualizacje Gutenberg

Podczas tworzenia JetGuten zespół Zemez musiał wykazać się dużą elastycznością. W krótkim czasie po premierze edytora wprowadzano zmiany, co czasami powodowało potrzebę aktualizacji pluginu. Każdorazowa aktualizacja wpłynęła na API i funkcjonalność, co wymagało szybkiej reakcji. Jednak Gutenberg dostarcza programistom informacji o nadchodzących aktualizacjach, co pozwala na wcześniejsze przygotowanie się.

Brak Najlepszych Praktyk

W miarę jak Gutenberg staje się coraz bardziej popularny, zespół Zemez napotkał na pewne trudności związane z brakiem ustalonych “najlepszych praktyk” w tworzeniu bloków. Choć dostępne były różnorodne materiały, wiele sytuacji nie miało jednoznacznych odpowiedzi, co prowadziło do improwizacji i próbnych rozwiązań.

W miarę jak społeczność WordPressa rozwija się, można się spodziewać pojawienia się nowych dodatkowych zasobów i wtyczek, jednak na etapie rozwoju JetGuten, zespół musiał zmagać się z niewiadomymi.

Codzienne Narzędzia Pracy

Tworzenie pluginów dla Gutenberg wiąże się z potrzebą stosowania nowoczesnych narzędzi, takich jak Gulp, Grunt czy NPM. Choć w przeszłości niektóre proste pluginy mogły być tworzone bez ich zastosowania, obecnie wymóg korzystania z automatycznych narzędzi budowlanych staje się kluczowy, ponieważ współczesne pluginy zwykle zawierają bardziej złożony kod. Umożliwia to skuteczniejsze zarządzanie i testowanie aplikacji, co jest niezbędne w dynamicznie zmieniającym się świecie web developmentu.

Praktyczne Zastosowanie JetGuten

Wyjątkowym przykładem zastosowania zewnętrznych bibliotek w JetGuten jest blok „Image Comparison”, który pozwala na interaktywne porównywanie dwóch zdjęć. Wykorzystując rozwiązania oparte na JavaScript, zespół był w stanie stworzyć wyspecjalizowany interfejs, który byłby zarówno funkcjonalny w edytorze, jak i na stronie głównej.

Dzięki elastycznemu podejściu, JetGuten może oferować unikalne doświadczenia dla użytkowników, w których interaktywność i estetyka są na pierwszym miejscu.

Konkluzje

JetGuten to innowacyjne rozszerzenie dla Gutenberg, które zmienia sposób tworzenia treści w WordPressie. Dzięki skupieniu na wykorzystaniu JavaScript i zapewnieniu niezrównanej elastyczności, ten plugin otwiera nowe możliwości dla twórców treści i programistów. Mimo wielu wyzwań podczas jego tworzenia, zespół Zemez jest przekonany, że JetGuten distawca unikalne doświadczenia zarówno dla deweloperów, jak i dla użytkowników WordPressa. W miarę jak edytor Gutenberg się rozwija, można spodziewać się, że JetGuten będzie dostarczał jeszcze bardziej zaawansowane funkcjonalności w przyszłości.