Rok z Gutenbergiem

Opublikowany: 2020-01-24

Wygląda na to, że Gutenberg stał się oficjalną częścią WordPressa wczoraj, ale wierzcie lub nie, minął już ponad rok! Rok 2019 był bez wątpienia rokiem Gutenberga w WordPressie. Uwielbiam to lub nienawidzę, w najbliższym czasie nigdzie się nie pojawi, a tak naprawdę jest teraz nowym standardem w naszym ukochanym CMS, mającym na celu zapewnienie lepszych wrażeń użytkownika.

W dzisiejszym poście chciałbym szybko przejrzeć wszystko, co edytor bloków WordPress osiągnął w ciągu ostatnich kilku miesięcy. W szczególności chciałbym omówić, co sprawia, że ​​jest wyjątkowy, dlaczego niektórzy go kochają, a niektórzy nienawidzą i co to oznacza dla nas, deweloperów. Zróbmy to!

Premiera Gutenberga

W State of the Word z 2016 r. Matt powiedział, że edytor WordPressa jest jedną z rzeczy, na których powinniśmy się skupić, ponieważ wymaga wiele pracy, aby go ulepszyć. W tym czasie pojawiły się pierwsze plotki dotyczące „edytora opartego na blokach”, za pomocą którego można „ujednolicić widżety” i „ulepszyć skróty ”. Czy był to pierwszy rzut oka na to, co wtedy stanie się Gutenbergiem?

Rok później, w State of the Word 2017, Matt oficjalnie zaprezentował Gutenberg, projekt, którego rozwój trwał już 11 miesięcy i miał jeszcze kilka do zrobienia. W projekcie wprowadzono koncepcję „bloczków” jako eleganckiego rozwiązania do tworzenia i zarządzania treścią . Gutenberg wciąż był zbyt zielony, aby być częścią rdzenia WordPressa, więc pozostał jako wtyczka jeszcze przez kilka miesięcy.

W końcu, po dwóch latach ciąży, nadszedł czas na zaprezentowanie nowego dziecka społeczeństwu i pod koniec 2018 roku Gutenberg w końcu stał się częścią WordPress Core . Moim zdaniem (i wielu innych profesjonalistów z branży) była to pochopna decyzja — czuliśmy, że wtyczka nie jest jeszcze gotowa dla ogółu społeczeństwa, ale niestety była. Integracja Gutenberga z nową wersją WordPressa była pełna kontrowersji i wiele osób ją nienawidziło.

Aby uniknąć poważnego zła, zespół programistów WordPressa przygotował również równoległą wtyczkę, za pomocą której całkowicie wyłączy Gutenberga i tym samym kontynuuje korzystanie z klasycznego edytora… ale oczywiście rozwój Gutenberga na tym się nie skończył!

Pierwsze kroki

Jak wspomniano powyżej, oficjalna premiera Gutenberga była nieco trudna, zwłaszcza że miał wielu krytyków i było wiele szczegółów do dopracowania. Zdecydowanie była to decyzja podjęta w pośpiechu. Wiesz, WordCamp US 2018 był tuż za rogiem i „potrzebujemy, aby Gutenberg już w nim był”, i tak też zrobili.

Tak czy inaczej, rzeczywistość była taka, jaka była, a do stycznia 2019 roku wszyscy mieliśmy ten nowy edytor w naszym panelu WordPress. Oznaczało to, że użytkownicy i programiści musieli dostosować się do nowej rzeczywistości… a im szybciej to zrobimy, tym lepiej!

Mapy Google Blok Gutenberga.
Edycja bloku Google Maps Gutenberg Block.

Głównym problemem, z którym zmagaliśmy się wszyscy w ciągu pierwszych kilku tygodni, był jego słaby UX. Pamiętam, że edytor był całkowicie bezużyteczny, jeśli używałeś go z Yoastem, najwyraźniej z powodu problemu z interfejsem API adnotacji Gutenberga. Bloki poruszały się w dziwny sposób, skróty klawiszowe były różne i nieprzewidywalne, edytor był opóźniony na starszych komputerach…

Jednak pomimo początkowych błędów i problemów, szalone tempo rozwoju wtyczki umożliwiło to, co wydawało się prawie niemożliwe: szybkie naprawienie i poprawienie doświadczenia użytkownika podczas korzystania z Gutenberga. Coś, co, jeśli jestem z tobą całkowicie szczery, było bardzo potrzebne, ponieważ klasyczny edytor był dość przestarzały:

Zrzut ekranu domyślnego edytora postów WordPress.
Zrzut ekranu domyślnego edytora postów WordPress.

Ewolucja

Ewolucja Gutenberga w pierwszym roku życia publicznego była naprawdę niesamowita. Aktualizacje następowały jedna po drugiej, a programiści dopracowywali każdy szczegół Gutenberga, aż stał się bardziej przyjaznym i wydajniejszym interfejsem. Patrząc na liczby, a zwłaszcza na wskaźnik adopcji Gutenberga, wygląda na to, że jesteśmy na dobrej drodze. W chwili pisania tego posta dwie na trzy instalacje WordPressa korzystają z wersji 5.x, co oznacza, że ​​Gutenberg jest natywnie dostępny dla dwóch trzecich wszystkich użytkowników WordPressa.

Ale, prawdę mówiąc, pamiętaj, że można całkowicie wyłączyć Gutenberga, po prostu instalując wtyczkę Classic Editor. W tej chwili ta wtyczka ma ponad 5 milionów aktywnych instalacji i ponad 700 pięciogwiazdkowych ocen, którym towarzyszą komentarze typu „stare to złoto”, „najważniejsza wtyczka do posiadania” lub „wtyczka, której używam na wszystkich moich stronach internetowych”. Czy to możliwe, że Gutenberg to fiasko?

Ewolucja liczby aktywnych instalacji wtyczki Classic Editor
Ewolucja liczby aktywnych instalacji wtyczki Classic Editor.

Cóż, moim zdaniem nie. Jeśli spojrzysz na obecny trend aktywnych instalacji odpowiadający wtyczce Classic Editor, zobaczysz, że zwalnia. Oznacza to, że w miarę upływu czasu coraz mniej osób korzysta z tej wtyczki. Jednym z możliwych wyjaśnień jest to, że Gutenberg jest już „wystarczająco dobry”, a zatem nie ma potrzeby korzystania ze starszej wersji edytora. I to niewątpliwie bardzo dobra wiadomość.

Blokuj biblioteki

Jedną z konsekwencji oficjalnej integracji Gutenberga z WordPressem było mnożenie się nowych bloków do tworzenia treści. Najwyraźniej programiści zidentyfikowali problem i postanowili poprawić ogólne wrażenia.

Bloki, które masz dostępne w Atomic Blocks.
Bloki, które masz dostępne w Atomic Blocks.

W ciągu ostatnich kilku miesięcy widzieliśmy, jak pojawiły się wtyczki, których jedynym celem było rozszerzenie zakresu bloków dostępnych dla Gutenberga. Na przykład mamy wtyczki takie jak Atomic Blocks, które dodają nowe bloki, a także wtyczki takie jak Stackable lub EditorsKit, które zawierają nowe style i oferują dodatkowe opcje edycji już istniejących bloków.

Zalety Gutenberga

Jedną z największych krytyki, która zawsze istniała w WordPressie, był efekt inframous lock-in. Zasadniczo ten efekt opisuje zależność, która pojawia się w przypadku niektórych motywów lub wtyczek, gdy zaczynasz ich używać. Po utworzeniu treści za pomocą jednego z tych zablokowanych projektów nie możesz się ich łatwo pozbyć lub stracisz wspomnianą zawartość.

Edytor stron WordPress z warstwą edycyjną dodaną przez Visual Composer (obecnie znany jako WPBakery Page Builder dla WordPress).
Edytor stron WordPress z warstwą edycji dodaną przez kreator stron «WPBakery Page Builder for WordPress».

Większość przykładów tego efektu można znaleźć w programach do tworzenia stron. Kiedy mieliśmy tylko klasyczny edytor WordPress, wielu twórców motywów zidentyfikowało jeszcze jedną potrzebę: użytkownicy chcieli mieć możliwość układania stron za pomocą edytora wizualnego, który umożliwiałby im przeciąganie i upuszczanie bloków treści w celu łatwego budowania stron. Niestety, budowanie strony za pomocą takiego narzędzia do tworzenia stron oznaczało, że będziesz zablokowany na zawsze z tym narzędziem do tworzenia stron — jeśli nie chcesz już używać tego narzędzia do tworzenia stron, musisz najpierw ponownie utworzyć stronę lub ryzykować utratę to.

Gutenberg był pod tym względem rewolucją. Teraz, dzięki oficjalnemu wprowadzeniu koncepcji „bloku”, twórcy stron mają wreszcie w zasięgu ręki standardowy mechanizm, za pomocą którego można zdefiniować wygląd strony. Muszą po prostu wykorzystać nowe interfejsy dostarczone przez Gutenberga. Jasne, proces standaryzacji obecnych kreatorów stron do bloków WordPress będzie powolny, ale nie mam wątpliwości, że w końcu to nastąpi.

Ciągłe ulepszenia

Gutenberg staje się coraz lepszy z każdym nowym wydaniem, ponieważ w każdej wersji zawarte są nowe funkcje i kilka ulepszeń. Na przykład kilka tygodni temu pojawiła się nowa wersja wtyczki Gutenberg (już w wersji 7.1) z drobnymi ulepszeniami użyteczności dla użytkowników, takimi jak powitalne okno dialogowe „spotkania” z Gutenbergiem lub ulepszenia w selekcji treści w wielu blokach.

Ale jest jedno ulepszenie, które szczególnie mi się podoba, a są to ruchy w edytorze. Proszę spojrzeć na ten post Matiasa Ventury, w którym macie bardzo szczegółowe wyjaśnienie „w jaki sposób ruch pomaga nam zrozumieć zmianę”.

Co znaczył dla nas Gutenberg (w Nelio)

Pojawienie się Gutenberga przyniosło również interesujące zmiany w naszej firmie. Zasadniczo, jeśli chcieliśmy rozwijać nasze produkty i uczynić je kompatybilnymi z Gutenbergiem, musieliśmy poddać recyklingowi i nauczyć się zupełnie nowego stosu programistycznego.

Jak powiedział Toni kilka tygodni temu, w ciągu ostatnich dwóch lat studiowaliśmy i uczyliśmy się React i Redux. W wyniku tego etapu nauki uruchomiliśmy kilka konkretnych wtyczek dla Gutenberga, takich jak Nelio Maps, Nelio Translate lub Nelio Compare Images. Poświęciliśmy również znaczną część naszego czasu i zasobów na modernizację testów Nelio A/B, a obecnie podejmujemy się tego samego zadania w przypadku Nelio Content.

Testowanie Nelio A/B — Edytor testów
Nelio A/B Testowanie z wykorzystaniem nowych technologii.

Zastosowaliśmy nawet niektóre z naszych nowo nabytych umiejętności, aby współtworzyć WordPress i zaproponowaliśmy kilka pull requestów:

  • Naprawa błędów z datami
  • Naprawa błędów z argumentami zapytań i fragmentami adresów URL w JS
  • Propozycja pracy z atrybutami Number i Boolean w Block API
  • Naprawa błędu z (nie)unikniętymi encjami HTML

Nikt nie lubi zmian. Kiedy przyzwyczaisz się do zestawu narzędzi lub technologii, prawdopodobnie nie chcesz ich zostawiać, aby nauczyć się czegoś nowego. Ludzie niechętnie się zmieniają… ale jeśli mam być szczery, zmiana dobrze nam służyła. Jesteśmy bardzo dumni ze wszystkiego, czego nauczyliśmy się po drodze i z tego, co możemy dziś zrobić dzięki Gutenbergowi.

Co z tobą? Lubisz Gutenberga? Jak to zmieniło twoje życie? Daj nam znać w sekcji komentarzy poniżej.

Polecany obraz z freestocks.org na Unsplash.