Ten post ma na celu pomóc Ci zrozumieć kluczowe koncepcje tworzenia nowego edytora w WordPress; Gutenberga. Gutenberg jest wciąż dość nowy w momencie pisania tego. I podobnie jak w przypadku wszystkich nowych technologii w fazie narodzin, niestety brakuje dokumentacji i standardów.
Witryna z dokumentacją WordPressa ma dużą sekcję poświęconą Gutenbergowi dla programistów; zwany podręcznikiem redaktora Gutenberga. Zawiera już sporo informacji. Ale może to być trochę mylące lub onieśmielające dla kogoś, kto jest zupełnie nowy w technologiach opartych na Javascript. Dla programistów skoncentrowanych na PHP, którzy mogą mieć tylko podstawową wiedzę na temat Javascript/jQuery, nowe technologie WordPressa mogą wydawać się onieśmielające. Ale zaufaj mi, kiedy nauczysz się kluczowych pojęć, zobaczysz, jakie nowe możliwości masz teraz jako programista WordPress.
Zacznijmy od absolutnych podstaw. Jakich języków programowania i narzędzi będziesz potrzebować lub których musisz się nauczyć, aby najlepiej rozwijać się dla Gutenberga?
Język i biblioteki, które musisz znać
Krótka odpowiedź na pytanie, jakiego języka musisz używać do programowania w Gutenberg, to: JavaScript. Jednak w świecie JavaScript istnieje wiele pojęć, rozszerzeń i narzędzi, o których powinieneś wiedzieć.
Przede wszystkim chodzi o wersję Javascript. Istnieje oficjalna standaryzacja Javascript; ECMAScript. ECMAScript 5 (często skracany do ES5) pojawił się około 10 lat temu i jest wersją Javascript, z którą większość z nas, deweloperów, jest zaznajomiona. Następnie mamy ECMAScript 6 (często skracany do ES6 ), który ukazał się w 2015 roku. Niektórzy ludzie odnoszą się do tej wersji jako ES2015. I wreszcie ESNext, która jest dynamiczną nazwą obejmującą nadchodzącą wersję, zawierającą propozycje, które mamy nadzieję znaleźć się w każdej następnej standardowej wersji JavaScript.
Być może myślisz w stylu „więc to wszystko dobrze, a nowsze wersje JavaScript to po prostu więcej funkcji. Więc użyję tylko najnowszego". Ale jest bardzo ważna rzecz, którą musisz wiedzieć o wersjach JavaScript, a jest to następująca: większość dzisiejszych przeglądarek rozumie tylko ES5.
Oznacza to, że jeśli chcesz napisać JavaScript w ES6 lub ESNext, musisz skonfigurować narzędzia, które przekształcą Twój kod w ES5, aby przeglądarki mogły go zrozumieć. Ale zanim zaczniesz myśleć o całkowitym pominięciu nauki ES6 i ESNext, pamiętaj, że ES5 ma 10 lat. I będzie to wymagało napisania dużo więcej kodu. Będzie też znacznie mniej czytelny i bardziej złożony niż gdybyś napisał go w ES6 lub ESNext.
Ponadto do koncepcji Gutenberga chcesz również użyć JSX – rozszerzenia składni do JavaScript. JSX to także język, którego przeglądarki nie mogą zrozumieć bez jego przekształcenia.
Po co więc zawracać sobie głowę ES6, ESNext czy JSX?
Jeśli nadal nie jesteś przekonany, że ES6/ESNext jest wart dodatkowego kroku w celu jego przekształcenia, pozwól, że pokażę ci porównanie kodu. W ES6 i JSX możesz napisać to w celu zwrócenia prostego akapitu; z klasą i dynamicznym wyjściem ze zmiennej;
Dla tych z Was, którzy są w tym nowi i myślą, że zapomniałem cytatów – nie, nie. Na tym polega prostota JSX. Porównajmy powyższe z tym, jak pisałbyś za pomocą bibliotek JavaScript ES5 i WordPress:
return wp.element.createElement(
'p',
{ className: 'example' },
'Hello, my name is ' + name
);Cały powyższy kod jest wymagany do wypisania tego, co ES6 i JSX mogą zrobić w pojedynczej, bardzo łatwej do odczytania linii! Wyobraź sobie budowanie bardziej złożonego interfejsu użytkownika ze zdarzeniami i warunkami warunkowymi, gdy tylko prosty akapit wymaga tego niewygodnego fragmentu kodu.
Przekonany? Dobrze!
Narzędzia do transformacji i React JS
Najpopularniejszym narzędziem używanym przez WordPressa do przekształcania ES6/ESNext jest Babel. Zwykle używałbyś Babel jako wtyczki do Webpack, który jest narzędziem, które łączy i minimalizuje twoje pliki JavaScript. Oba narzędzia używają Node.js, co daje kilka narzędzi do uruchamiania skryptów dla Webpack i Babel w wierszu poleceń. Jeśli brzmi to myląc, mam post, który szczegółowo wyjaśnia, jak skonfigurować wszystkie te narzędzia do rozwoju Gutenberga.
Drugą rzeczą, którą musisz wiedzieć o technologiach, jest to, że Gutenberg opiera się na warstwie abstrakcji na wierzchu React JS. React JS to biblioteka JavaScript o otwartym kodzie źródłowym utrzymywana przez Facebooka i została wydana około roku 2013. Ponieważ React istnieje już od jakiegoś czasu, istnieje wiele samouczków, przewodników i dokumentacji dla tej biblioteki. Oficjalna strona Reacta zawiera dobry, szczegółowy samouczek dla nowych użytkowników Reacta. Zdecydowanie nie musisz być ekspertem w React, aby tworzyć dla Gutenberga, ale podstawy tego, jak działa z komponentami i stanami, pomogą ci bardzo w zrozumieniu Gutenberga.
Podsumowując:
- Nauka React JS pozwoli zrozumieć, jak rozwijać się dla Gutenberga. Zwłaszcza jeśli chcesz tworzyć własne niestandardowe bloki lub dostosowywać istniejące.
- Możesz to zrobić używając tylko ES5 Javascript, ale zdecydowanie zaleca się naukę ES6, ESNext i JSX.
- Zapoznaj się z potrzebnymi narzędziami, aby przekształcić swój kod ES6/ESNext/JSX. Te narzędzia to npm, Webpack i Babel.
Nowy sposób przechowywania treści postów i dlaczego
Jedną z największych zalet Gutenberga jest odejście od stałego HTML w treści postów. WordPress, przed Gutenbergiem i większość internetowych CMS-ów przechowuje treść artykułów w czystym HTML. W przypadku prostych treści (tytuły i akapity) generalnie nie jest to problem. Ale może być większy problem w przypadku bardziej złożonej i dynamicznej zawartości bogatej.
Każdy CMS, który zezwala na dynamiczną zawartość w treści artykułu, napotka problemy z zapisaniem tego jako prawidłowego kodu HTML. Może to być dowolny obraz, który odwołuje się do jego identyfikatora w systemie zamiast pełnego adresu URL. Lub widżet, który dynamicznie wyświetla najnowsze posty w danej kategorii. Zwykle zostanie to rozwiązane przez wypisanie niestandardowego zaszyfrowanego kodu HTML, który nie ma sensu normalnie wyprowadzać. A następnie pozwól parserowi CMS zająć się przekształcaniem tych elementów HTML w coś znaczącego lub dynamicznego. Wadą tego jest to, że jeśli przeniesiesz swoje treści do innego CMS, często spowoduje to brzydki kod HTML. Treść byłaby wypełniona nieprzeanalizowanym kodem HTML, który trzeba ręcznie wyczyścić. Właśnie tę kwestię chce rozwiązać Gutenberg.
Dzięki Gutenberg WordPress zdecydował się zapisywać dodatkowe i dynamiczne informacje jako komentarze HTML. Komentarze HTML nigdy nie są widoczne dla użytkowników w witrynie i zasadniczo wszystko jest dozwolone w bloku komentarzy. Komentarz HTML zaczyna się <!--i kończy na -->, a Gutenberg przechowuje dane w określonej strukturze w formacie JSON. Każdy blok w Gutenbergu jest otoczony początkowym komentarzem HTML i zamykającym komentarzem HTML po nim.
Nowy sposób przechowywania treści postów
Nie będę szczegółowo omawiał struktury bloków komentarzy – szczegółowy przewodnik na ten temat znajdziesz w Podręczniku edytora WordPress. Ale jako przykład, prosty akapit w treści posta Gutenberga zostanie zapisany w bazie danych jako:
Jeśli chodzi o zawartość dynamiczną, zwykle w ogóle nie zostanie wyświetlony żaden kod HTML. Wszystkie informacje, które WordPress potrzebuje, aby zrozumieć, co robi ten blok, znajdują się w komentarzach HTML. W ten sposób Gutenberg przechowuje blok „Najnowszych postów”:
Ponieważ wszystko jest komentarzem HTML, przeniesienie postów do innego WordPressa bez Gutenberga lub innego systemu CMS sprawi, że żaden brzydki, nieprzeanalizowany kod HTML nie zostanie wypluty. Zostanie po prostu zignorowany i pominięty.
Jak zapewne już się zorientowałeś, bloki komentarzy zaczynają się od nazwy bloku, poprzedzonej ‘ wp‘. Jeśli istnieją jakieś ustawienia niestandardowe, zostaną one wyprowadzone po nazwie w formacie JSON, jak widać na przykładzie bloku Ostatnie posty. Gutenberg nazywa je atrybutami, a ta koncepcja jest czymś, z czym bardzo dobrze się zapoznasz, kiedy zaczniesz uczyć się rozwijać dla Gutenberga.
Warto wiedzieć:
Jeśli chcesz dokładniej przyjrzeć się, jak zapisywana jest nowa treść posta, możesz zajrzeć do wp_poststabeli w bazie danych. Jest jeszcze jedna łatwiejsza metoda podglądania pełnej wartości bazy danych z poziomu szablonów WordPress. W swoim pojedynczym szablonie w pętli, po prostu użyj „ echo get_the_content()“. Użycie normalnego „ the_content()” spowoduje wyświetlenie przeanalizowanej treści posta, ale powtórzenie wartości treści spowoduje wyświetlenie dokładnie tego, co jest przechowywane w bazie danych. Możesz użyć narzędzia Inspect lub wyświetlić źródło w przeglądarce Chrome lub Firefox, aby zobaczyć bloki komentarzy.
Co Ty jako programista możesz zrobić w Gutenberg
Masz kilka opcji dostosowywania motywów lub wtyczek do Gutenberga. Poniżej wymieniono najczęstsze dostosowania, które prawdopodobnie wykonasz jako programista.
Rozszerz i dostosuj istniejące bloki
WordPress Gutenberg zawiera duży pakiet typów bloków i możesz je rozszerzyć. Możesz także usunąć niektóre z nich lub zdecydować się w niektórych przypadkach, aby zezwolić lub usunąć tylko niektóre z nich.
Najpopularniejszą metodą rozszerzania bloku jest dodawanie niestandardowych stylów bloku – które są odmianami stylu bloku. Style blokowe nie są tak powszechne w domyślnym WordPressie, ale są pewne. Spójrz na blok Cytat. W edytorze Gutenberg będziesz miał pole na prawym pasku bocznym o nazwie „Style”.
Innym sposobem dostosowywania istniejących bloków jest użycie filtrów. Prawdopodobnie znasz filtry używające PHP w WordPressie, ale w Gutenbergu są teraz filtry oparte na JavaScript na blokach. Na przykład możesz dodać własne niestandardowe atrybuty (ustawienia) do wszystkich lub określonych typów bloków lub filtrować sposób ich zapisywania lub wyprowadzania.
Możesz także manipulować kategoriami bloków, a także usuwać lub zezwalać na określone bloki w określonych sytuacjach. Możesz też na przykład upewnić się, że tylko kilka typów bloków jest dozwolonych dla niestandardowego typu postu.
Twórz własne niestandardowe bloki
Tworzenie niestandardowych bloków to prawdopodobnie pierwsza myśl, którą ma większość programistów WordPress. Domyślne bloki w WordPressie mogą przejść długą drogę, ale jeśli budujesz bardziej złożony motyw lub wtyczkę, prawdopodobnie masz określone potrzeby. Na przykład użycie Gutenberga do stworzenia ładnie wyglądającej strony głównej ze skrótami do treści i zawartości dynamicznej. Możliwe jest osiągnięcie największej personalizacji za pomocą opcji klasy CSS, która istnieje dla wszystkich bloków. Ale to nie jest szczególnie przyjazne dla użytkownika.
Pisanie własnych niestandardowych bloków jest prawdopodobnie najtrudniejsze w dostosowywaniu motywu lub wtyczki do Gutenberga. Ale może to być również najbardziej satysfakcjonujące! Nie tylko będziesz mógł tworzyć bloki, które działają i wyglądają dokładnie tak, jak chcesz – ale to także świetny sposób na szybkie poznanie nowej technologii opartej na Javascript.
Upewnij się, że Twój motyw jest gotowy do Gutenberg
Jeśli jesteś programistą motywów WordPress, powinieneś mieć świadomość, że Twój motyw może wymagać wielu ustawień dla Gutenberga, zwłaszcza w postaci add_theme_support(). Podręcznik WordPressa zawiera dobry przegląd wszystkich motywów, które musisz wziąć pod uwagę, aby Twój motyw był gotowy do Gutenberga.
Domyślnie WordPress obsługuje większość stylizacji domyślnych bloków, więc nie musisz się zbytnio martwić o stylizowanie ich w swoim motywie. Ale twórcy motywów są zwykle bardziej wybredni, jeśli chodzi o ich projektowanie i stylizację. Więc prawdopodobnie będziesz musiał dostosować lub dodać stylizację blokową. Możesz dodać style edytora tylko do frontendu, tylko do edytora lub do obu. Podręcznik WordPress Gutenberg zawiera przegląd stylów edytora i domyślnych stylów bloków.
Istnieje również koncepcja szablonów bloków, w których można wstępnie zdefiniować, jakie bloki powinny pojawiać się w postach. Szablony bloków mogą być używane jako symbole zastępcze, aby pomóc edytorowi w wypełnianiu bloków. Ale może być również użyty do zdefiniowania stałego zestawu bloków i pozycji.
I wreszcie, dostępne są funkcje do pracy z parserem Gutenberga i jak wyodrębniać bloki z postów. Ponieważ wszystkie treści są zapisywane z pełną informacją o rodzaju treści, możesz łatwo wyodrębnić określone części treści postu. Dobrym przykładem jest wyodrębnienie pierwszego akapitu postów do wyświetlenia jako fragment. Bardzo przydatną funkcją PHP dla tej koncepcji jest [parse_blocks](https://developer.wordpress.org/reference/functions/parse_blocks/)(), która używa parsera Gutenberga do dostarczonej zawartości posta, aw zamian otrzymasz tablicę PHP ze wszystkimi informacjami i zawartością bloków.
Wniosek
Mam nadzieję, że ten post nie tylko nauczył Cię czegoś o programowaniu dla Gutenberga, ale także sprawił, że zaciekawił Cię i chciał dowiedzieć się więcej! Jako programista WordPress skoncentrowany na PHP, który początkowo oparł się pomysłowi przejścia na technologię opartą na Javascript, mogę powiedzieć, że gdy już zrobisz krok w kierunku poznania „nowej drogi”, będziesz zadowolony, że to zrobiłeś. Gutenberg otwiera się na nowe sposoby dostosowywania, projektowania i wyświetlania treści WordPress bez potrzeby tworzenia stron lub motywów z ciężkimi bibliotekami, aby umożliwić elastyczną i dobrze wyglądającą treść postów. Musimy tylko nauczyć się optymalnie z nim pracować!