Wielki WordPress Gutenberg tutorial dla programistów - twórz własne bloki

Maddy Osman
.
. 11 Min.
WordPress -Gutenberg-Tutorial-Developer

Gutenberg otwiera nowe, ekscytujące możliwości dla Ciebie jako dewelopera. W tym tutorialu wyjaśnię wszystko, co musisz wiedzieć o edytorze bloków. Dowiedz się, jak tworzyć własne bloki WordPress i jak dostosowywać istniejące bloki.

Gutenberg jest edytorem, który został wydany wraz z WordPress 5.0. Wraz z Gutenberg wprowadzono pojęcie bloków WordPress . Dzięki temu właściciele stron mogą umieszczać elementy projektu metodą "przeciągnij i upuść" - bez potrzeby korzystania z zewnętrznego kreatora stron czy umiejętności programowania. 

Gutenberg w przyszłości posłuży jako podstawa do pełnej edycji strony. W przeszłości zawsze trzeba było kodować, nawet jeśli korzystało się z kreatora stron: Niektóre zmiany i dostosowania wymagały obowiązkowego kodu.

Z każdą nową aktualizacją WordPress staje się jasne, że znajomość PHP i tradycyjne tworzenie stron WordPress już nie wystarcza. Jako programista WordPress , musisz opanować Gutenberg .

Ten poradnik zawiera: 

  • Co to jest Gutenberg
  • Jak pracować z blokami WordPress
  • Jak wykorzystać te nowe funkcje i technologie do budowy potężnych witryn WordPress .

Zanurzmy się w WordPress Gutenberg tutorial dla programistów: inside!

Co to jest Gutenberg?

Gutenberg został po raz pierwszy wprowadzony wWordPress 5.0, aby ułatwić tworzenie postów i stron w czysto wizualny sposób. Ale to była tylko pierwsza faza projektu.

Gutenberg opiera się na nowoczesnych technologiach, takich jak JavaScript, React i REST API, aby stworzyć dynamiczny edytor, który naśladuje edycję front-end. W tej pierwszej fazie udostępniony został Edytor bloków

Czym jest edytor bloków Gutenberg ?

Gutenberg zastępuje edytor TinyMCE (który jest często określany jako klasyczny edytor) i pozwala na używanie bloków treści do dodawania elementów takich jak tekst lub obrazy do swoich postów i stron.

Wraz z kolejnymi aktualizacjami i fazą 2, Gutenberg powinien stać się pełnoprawnym edytorem stron internetowych. W przyszłości będzie można tworzyć całe strony WordPress za pomocą bloków.

WordPress -Gutenberg-Tutorial-Developer

Oznacza to, że każdy, kto tworzy strony internetoweWordPress musi na nowo zdefiniować swój własny tok pracy programisty. Znajomość PHP nie wystarczy już do zbudowania od podstaw strony WordPress . Musisz znać JavaScript, React i REST API, jeśli chcesz tworzyć niestandardowe bloki i elementy projektowe dla stron internetowych opartych na Gutenberg . 

Dostęp do WordPress bloki

Rozpoczęcie nowej podróży z Gutenberg Block Editor jest ekscytujące. Dzięki temu tutorialowi dowiesz się wszystkiego, co musisz wiedzieć, zanim zaczniesz pracę z Gutenberg Development i stworzysz własne bloki WordPress .

Co musisz wiedzieć, zanim zaczniesz tworzyć dla Gutenberg 

Najważniejszym językiem, który musisz znać, aby podążać za tym WordPress Gutenberg tutorial dla programistów jest Javascript. Dokładniej, musisz znać wersję ES5, która jest obsługiwana przez większość nowoczesnych przeglądarek. 

Nowsze funkcje są zawarte w wersji 2015, ES6, oraz w najnowszej wersji, ESNext. 

Zrozumienie ES6 i ESNext może być cenne. Jeśli jednak chcesz je wykorzystać w swoim rozwoju bloków WordPress , musisz wiedzieć, jak skonfigurować narzędzia, które przekonwertują Twój nowszy kod na ES5. 

WordPress -Gutenberg-Tutorial-Developer

Musisz również zrozumieć JSX, który jest rozszerzeniem składni javascript i również wymaga transformacji. Ponieważ ES6, ESNext i JSX są o wiele łatwiejsze do napisania niż ES5, warto podjąć wysiłek, aby skonfigurować narzędzia transformacji. 

WordPress -Gutenberg-Tutorial-Developer

Webpack, w połączeniu z Babel, jest popularnym narzędziem do transformacji. Ta kombinacja narzędzi minifies twój javascript. 

WordPress -Gutenberg-Tutorial-Developer

Wreszcie, wiedza na temat React JS może pomóc Ci ogromnie, gdy tworzysz własne bloki WordPress lub śledzisz różne WordPress tutoriale dla programistów, które koncentrują się na dostosowywaniu bloków. 

Zawartość jest przechowywana w różny sposób w Gutenberg 

W przeciwieństwie do klasycznego edytora treści, w Gutenberg treść jest przechowywana w inny sposób. Treść nie jest już przechowywana jako HTML, ale jako komentarze HTML w określonej strukturze z formatem JSON. Ułatwia to przenoszenie treści do innej instalacji WordPress lub do systemu zarządzania treścią (CMS). 

Przechowywanie treści w tradycyjnym HTML jest w porządku, gdy jest to treść prosta i tekstowa. Jednakże, gdy masz do czynienia z dynamicznie generowaną treścią, twój kod niestety staje się niechlujny. 

Nie musisz koniecznie znać szczegółów technicznych działania bloków WordPress . Ważne jest to, że podczas tworzenia treści w Gutenberg , generowany HTML jest wolny od parsowanego, niechlujnego kodu. Dzieje się tak, ponieważ wszystkie szczegóły są przechowywane w komentarzach HTML. 

Co można zrobić z klockami WordPress Gutenberg 

W Gutenberg można zrobić kilka rzeczy. Jeśli korzystasz z WordPress tutorial dla programistów, powinieneś być świadomy swoich możliwości. 

Zbadajmy kilka opcji: 

  • Opracuj swoje własne WordPress bloki: Jest to najbardziej złożone zadanie, jakie możesz wykonać. Jednak niestandardowe WordPress bloki są często warte wysiłku, aby osiągnąć prawdziwą personalizację. 
  • Przygotuj swoją stronę Theme na Gutenberg : Obejmuje to przestrzeganie WordPress .org Theme przewodnik, dzięki któremu Twój Theme będzie kompatybilny z Gutenberg . Obejmuje to dostosowanie stylizacji bloku, aby uzyskać pożądany wygląd Themes i zachować funkcjonalność bloku. 
  • Dostosuj lub rozszerz istniejące bloki treści WordPress : Jak wspomniano powyżej, można dostosować istniejące bloki WordPress w Gutenberg . Obejmuje to dodawanie niestandardowych stylów bloków, dodawanie filtrów za pośrednictwem javascript lub dostosowywanie kategorii bloków i typów bloków, które pojawiają się dla określonych dostosowywanych typów postów. 

Konfigurowanie środowiska programistycznego dla edytora bloków Gutenberg .

WordPress -Gutenberg-Tutorial-Developer

Zanim będziesz mógł zbudować cokolwiek za pomocą Gutenberg lub skorzystać z tutoriali dla programistów WordPress , musisz skonfigurować środowisko program istyczne. Twoim pierwszym krokiem jest zdobycie Node.js. WordPress zaleca używanie Node Version Manager (nvm) do instalacji i zarządzania Node. 

Wewnątrz sklonowanego repozytorium można zbudować Gutenberg wykonując następujące polecenia: 

npm ci
npm run build

Takie kodowanie zapewnia, że Gutenberg może być używany jako Plugin może być użyty. Następnie dodaj utworzony katalog Gutenberg do folderu wp-content/plugins w swoim lokalnym środowisku WordPress . A White Pixel zaleca również zainstalowanie Webpacka i Babela. 

Przejdź przez wszystkie kroki konfiguracji, aby skonfigurować środowisko programistyczne. Potrzebna będzie lokalna strona testowa działająca pod adresem WordPress z utworzonym adresem Gutenberg Plugin oraz dostęp do Terminala, aby uruchomić zestaw poleceń. WordPress .org udostępnia liczne zasoby dla skryptów programistycznych

Teraz, gdy masz już ustawione i skonfigurowane swoje lokalne środowisko, możemy przejść do głównej części tego WordPress tutoriala dla programistów: WordPress blocks.

WordPress Rozumienie bloków

WordPress Bloki to pojemniki, w których umieszcza się zawartość w edytorze bloków WordPress . WordPress Bloki mogą być przenoszone za pomocą interfejsu "przeciągnij i upuść".

Zrozumienie czym są bloki WordPress jest ważne przed stworzeniem własnych. Bloki WordPress są również bardzo obszerne i zawierają kilka ważnych funkcji, m.in: 

Jak stworzyć własne bloki WordPress

Dzięki temu WordPress Gutenberg tutorialowi dla programistów dowiesz się, czego potrzebujesz, aby stworzyć niestandardowe bloki treści WordPress . Następnie możesz je wykorzystać na swojej stronie internetowej lub stronie swoich klientów. 

Jak zarejestrować nowe bloki WordPress

Każdy nowy blok zaczyna się od rejestracji. Użyj funkcji registerBlockType do zarejestrowania nowej definicji typu bloku.  

Nazwa bloku jest łańcuchem znaków, który musi być zapisany jako namespace/block-name. W miejsce namespace wstaw nazwę bloku, który chcesz utworzyć. 

Z tego miejsca musisz zdefiniować właściwości swojego nowego bloku, takie jak tytuł, opis, kategoria, ikona, słowa kluczowe czy style. 

Dodawanie pasków narzędzi dla konfigurowalnych działań

Jeśli chcesz dodać niestandardowe działania do swojego bloku za pomocą interaktywnego paska narzędzi, możesz dostosować (lub stworzyć od podstaw) działające paski narzędzi Gutenberg . Ustaw niestandardowe ikony, formatowanie, pozycjonowanie i przypisane akcje w zależności od potrzeb Twojej strony Plugins lub Themes. 

WordPress -Gutenberg-Tutorial-Developer

Zgodnie z podręcznikiem Block Editor Handbook, dodanie niestandardowego paska narzędzi może wyglądać mniej więcej tak: 

Pasek narzędzi importu

Jak tłumaczyć bloki WordPress 

Podejmując działania międzynarodowe, możesz mieć pewność, że tworzone przez Ciebie bloki WordPress dotrą do szerszego grona odbiorców. 

Od WordPress 5.0 możesz użyć pakietu wp-i18n JavaScript, aby dodać przetłumaczalne ciągi znaków. Możesz również tworzyć pliki tłumaczeń i ładować je, gdy użytkownik zażąda zawartości w danym języku. 

Dodawanie ustawień inspektora

Wszystkie bloki mają zestaw ustawień inspektora, które pojawiają się po prawej stronie ekranu, gdy są wstawiane do treści. A w zależności od bloku WordPress , aspekty, które użytkownicy mogą dostosować do swoich potrzeb, będą się różnić. Dla każdego pojedynczego tworzonego bloku należy zdefiniować ustawienia inspektora. 

WordPress -Gutenberg-Tutorial-Developer

Możesz <InspectorControls>dodawać, mówiąc WordPress , których kontrolek Inspektora używać, jak mają wyglądać, jakie opcje zawierać i w jakiej kolejności mają się pojawiać</InspectorControls>. 

Starania JavaScript dla WordPress wyglądają mniej więcej tak: 

WordPress -Gutenberg-Tutorial-Developer

Mając te specyfikacje, możesz następnie użyć JSX do stylizacji każdej funkcji i dostosować jej kolejność. 

Jak wyświetlać dynamiczną treść za pomocą PHP

Dynamiczna treść jest niezbędna dla WordPress . Istnieje wiele powodów, dla których może być potrzebny blok dynamiczny. 

Na przykład, jeśli chcesz utworzyć niestandardowy blok Najnowszeposty, który wyświetla najnowsze posty na blogu w czasie rzeczywistym, potrzebujesz dynamicznego bloku. 

Blok opiera się na PHP, ponieważ musi pobierać nowe informacje za każdym razem, gdy jest renderowany. Kluczem dla większości bloków, aby uczynić go dynamicznym, jest zmiana jego funkcji przechowywania na null. Następnie dodaj kod, który powie nowemu blokowi, aby pobierał odpowiednią zawartość. 

Możesz również ustawić atrybut, aby powiedzieć blokowi, aby wyświetlił określoną liczbę postów.

Dodawanie indywidualnych ustawień do istniejących bloków Gutenberg

Można również dodawać konfigurowalne ustawienia i dokonywać zmian w istniejących blokach Gutenberg WordPress . Na przykład, możesz dodać konfigurowalne kontrolki do zaawansowanego panelu bloku w ustawieniach inspektora bloku. Jeffrey Carandang napisał świetny tutorial na ten temat na swoim blogu.

Tworzenie niestandardowych wzorów bloków

Poznajmy inny aspekt Gutenberg w tym WordPress tutorialu dla programistów. Dzięki WordPress Block Patterns możesz tworzyć i udostępniać predefiniowane układy bloków. Jest to grupa bloków WordPress , które pozwalają na tworzenie złożonych układów za pomocą kilku kliknięć.

Możesz uzyskać dostęp do Wzorów bloków z ekranu edycji postu/strony, naciskając znak + . Następnie zobaczysz wszystkie dostępne Wzory bloków dla swojej witryny. 

WordPress -Gutenberg-Tutorial-Developer

Aby utworzyć własne wzory bloków 

Aby rozpocząć, stwórz projekt strony lub postu. Dodawaj bloki w dowolnej konfiguracji. Na przykład, jeśli prowadzisz magazyn online, możesz chcieć stworzyć układ strony dla nowych artykułów z wyróżniającymi się tytułami, kolumnami, obrazami i cytatami. 

Następnie musisz zaprojektować bloki tak, aby wyglądały tak, jak chcesz. 

Następnym krokiem jest skopiowanie wszystkiego, co zrobiłeś do tej pory. Kliknij na wszystkie swoje bloki, trzymając wciśnięty klawisz ALT, aby je zaznaczyć. Następnie kliknij na ikonę z trzema ułożonymi w stos kropkami (więcej opcji) na pasku narzędzi. Kliknij na Kopiuj. 

WordPress -Gutenberg-Tutorial-Developer

Następnie musisz zdekodować skopiowane dane HTML. Aby to zrobić, możesz użyć narzędzia JSON Escape/Unescape. Skopiuj kod ciągu wynikowego, który pojawia się po kliknięciu przycisku Escape

WordPress -Gutenberg-Tutorial-Developer

Teraz musisz zarejestrować swój nowy wzór bloku. 

Jak zarejestrować i wyrejestrować wzorce blokowe

Możesz zarejestrować niestandardowe wzorce bloków, używając interfejsu API wzorców bloków, aby wkleić kod skopiowany powyżej do pliku functions.php witryny WordPress Themes lub dodając go do niestandardowej witryny Plugin .

Można również użyć narzędzia Block Pattern Builder Plugin, aby wyeliminować wymagania dotyczące kodowania przy tworzeniu wzorców bloków.  

WordPress -Gutenberg-Tutorial-Developer

Jak używać edytora Gutenberg jako Theme developer:in

Gutenberg ułatwia tworzenie niestandardowych bloków WordPress , które sprawiają, że publikowanie treści staje się bogatym doświadczeniem. Możesz również użyć Gutenberg , aby zrezygnować z oddzielnego kreatora stron Plugin jak Elementor lub Divi.

Gutenberg może być używany do tworzenia responsywnych układów strony głównej poprzez włączenie bloków o pełnej szerokości i szerokości. Możesz też stworzyć od podstaw stronę Themeopartą na blokach

Omówmy szczegółowo kilka z Twoich opcji. 

Używanie bloków okładki do dodawania sekcji strony

Bloki okładek są nowszym dodatkiem do Gutenberg i są świetnym sposobem na dodanie różnych sekcji do strony. Aby uzyskać więcej informacji, obejrzyj ten film.

Co to są bloki osłonowe?

Bloki okładek to bloki obrazów, na których można umieścić tekst. Są one doskonałym sposobem na tworzenie nagłówków lub niestandardowych sekcji, które można znaleźć w WordPress Plugins dla układu strony lub w WordPress Themes .

Bloki nakładki, które można dodać to:

  • Bloki obrazów
  • Tła wideo
  • Bloki nagłówków
  • Bloki akapitowe
  • Bloki przycisków 

Bloki okładek sprawiają, że Twoja strona staje się bardziej uniwersalna. W ten sposób możesz stworzyć własną stronę główną. Możesz nawet stworzyć prosty WordPress Theme z kombinacji bloków okładek i wzorów bloków. 

Na horyzoncie są jeszcze bardziej rozbudowane możliwości pełnej edycji stron internetowych. Zespół Make WordPress Design twierdzi, że manipulacja szablonami, zaawansowane wzorce bloków i style globalne będą głównym przedmiotem zainteresowania. 

Wykorzystanie strony Advanced Custom Fields Plugin 

Jednym z ograniczeń bloków jest to, że nie można uzyskać układu o pełnej szerokości: To zawsze będzie w pudełkach. 

Jednakże, przy pomocy kilku sprytnych manipulacji można użyć Advanced Custom Fields Plugin , aby dodać niestandardowe ustawienia meta i wymusić układy o pełnej szerokości. Jest to niezbędne, jeśli chcesz użyć Gutenberg do stworzenia własnej strony Themes . 

WordPress -Gutenberg-Tutorial-Developer

Użyj niestandardowych stylów bloków 

Innym sposobem wykorzystania Gutenberg jako Theme developer:in jest użycie Custom Block Styles. Po utworzeniu wzorów bloków lub użyciu bloków okładek do utworzenia sekcji strony można dodać lub usunąć style blok ów do każdego z nich. 

Musisz znać nazwę bloku, aby móc dodawać lub usuwać style z nim związane. Ten dodatkowy krok pozwala uniknąć wstawiania niestandardowej klasy CSS za każdym razem, gdy blok jest używany. 

WordPress Bloki dla stron docelowych i stron frontowych

Wspomnieliśmy już, jak skuteczne mogą być bloki okładek do tworzenia stron głównych dla Twojej witryny lub Theme . Świetnie sprawdzają się również na landing page'ach. 

Kilka innych bloków, o których warto wspomnieć i które mogą pomóc w tym zadaniu, to: 

  • Galerie
  • Bloki kolumnowe
  • Bloki obrazów
  • Bloki tabeli
  • Bloki tekstu

Większość bloków może być używana w połączeniu z blokami okładek, aby stworzyć profesjonalnie wyglądającą stronę główną. 

Jeśli potrzebujesz więcej funkcji, możesz dodać blok Gutenberg Plugin , który dodaje pojedynczy blok do Gutenberg , lub bibliotekę bloków Gutenberg Plugin , która dodaje kilka. 

Ultimate Addons for Gutenberg i Atomic Blocks to wyjątkowe opcje biblioteczne, które zapewniają łatwiejsze budowanie stron dzięki blokom dla referencji, wezwań do działania, opcji układu strony, formularzy kontaktowych, tabel cenowych i shortcodes. 

WordPress -Gutenberg-Tutorial-Developer

Plugins są idealne dla tych, którzy chcą się nauczyć Gutenberg i tworzyć strony internetowe - bez używania dużej ilości kodu. 

Końcowe przemyślenia na temat bloków WordPress

Edytor bloków WordPress Gutenberg jest teraz częścią rdzenia WordPress , a zespół odpowiedzialny za rozwój WordPress ma wobec niego wielkie plany. W końcu będziesz mógł użyć Gutenberg do stworzenia menu nawigacyjnego. A w przyszłości edytor będzie kompatybilny z jeszcze większą liczbą stron Themes .

Z pomocą tego WordPress tutoriala dla programistów, możesz teraz używać bloków WordPress do tworzenia stron internetowych i dostosowywania zawartości do swoich potrzeb. 

Możesz teraz tworzyć bloki WordPress od podstaw, a w końcu tworzyć całe strony WordPress za pomocą wbudowanego edytora bloków.
W międzyczasie należy upewnić się, że strony internetowe, które tworzysz, sąhostowane pod adresem RAIDBOXES . RAIDBOXES oferuje kompleksowe pakiety hostingowe WordPress , które są odpowiednie zarówno dla indywidualnych właścicieli stron internetowych, jak i agencji.

Państwa pytania dotyczące Gutenberg Development

Masz pytania do Maddy na temat przewodnika Gutenberg dla deweloperów? Czekamy na Twój komentarz. Chcesz być informowany o nowych artykułach na temat WordPress ? Następnie śledź RAIDBOXES na Twitterze, Facebooku lub poprzez nasz newsletter.

Maddy Osman jest SEO Content Strategist. Współpracuje z wybranymi klientami w WordPress i sektora hostingowego. Z doświadczeniem w projektowaniu stron internetowych i WordPress , ma głębokie zrozumienie SEO - i wie dokładnie, jak połączyć marki z treściami odpowiednimi dla SEO.

Powiązane artykuły

Komentarze do tego artykułu

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Pola obowiązkowe oznaczone są *.