WordPress -Gutenberg-Tutorial-Developer

WordPress Gutenberg, kompletny tutorial dla programistów

Gutenberg otwiera nowe możliwości przed Tobą, jako deweloperem. W tym tutorialu wyjaśnię wszystko, co musisz wiedzieć o edytorze kolumn i bloków. Dowiedz się, jak tworzyć własne bloki WordPress i jak modyfikować już istniejące kolumny.

Gutenberg jest edytorem, który został wydany wraz z WordPress 5.0. Wspólnie z Gutenberg wprowadzono pojęcie bloków w WordPress. Dzięki tej funkcji właściciele stron mogą umieszczać elementy projektu metodą "Drag & Drop" - bez potrzeby korzystania z zewnętrznego kreatora stron czy umiejętności programowania. 

Gutenberg w przyszłości posłuży jako podstawowe narzędzie do pełnej edycji stron. Kiedyś trzeba było kodować, nawet jeśli korzystało się z kreatora stron: Niektóre zmiany i dostosowania wymagały tzw. obowiązkowego kodowania.

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ć również narzędzie, jakim jest Gutenberg .

Ten samouczek zawiera: 

  • Co to jest Gutenberg
  • Jak pracować z blokami WordPressa
  • 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 ujrzał światło dzienne wraz z aktualizacjąWordPress 5.0, aby ułatwić tworzenie postów i stron w czysto wizualny sposób. Była to 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 i kolumn

Czym jest edytor bloków Gutenberg ?

Gutenberg zastępuje edytor TinyMCE (który jest często określany jako klasyczny edytor) i pozwala na dodawanie treści wewnątrz kolumn, które następnie zostają wypełnione elementami takimi jak tekst lub obrazy do 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ć z jego pomocą całe witryny WordPress.

WordPress -Gutenberg-Tutorial-Developer

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

Rozpoczęcie pracy z blokami WordPressa

Przed Tobą rozpoczęcie ekscytującej przygody z Gutenberg Block Editor. Dzięki temu tutorialowi dowiesz się wszystkiego, co musisz wiedzieć, zanim zaczniesz pracę z Gutenberg Development i stworzysz bloki oraz kolumny na stronie WordPress .

Co musisz wiedzieć, zanim zaczniesz tworzyć za pomocą kreatora 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 najpierw poznać wersję ES5, która jest obsługiwana przez większość nowoczesnych przeglądarek. 

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

Zrozumienie ES6 i ESNext może być cenne. Jeśli jednak chcesz je wykorzystać w rozbudowaniu bloków na własnej stronie 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 to twój javascript. 

WordPress -Gutenberg-Tutorial-Developer

Wreszcie, wiedza na temat React JS może być dla Ciebie ogromnie przydatna, gdy tworzysz własne bloki WordPress lub powtarzasz kroki zawarte w stworzonych niedawno tutorialach dla programistów, które koncentrują się na dostosowywaniu bloków oraz kolumn. 

Gutenberg przechowuje treści na wiele sposobów 

W przeciwieństwie do klasycznego edytora treści, w Gutenberg treść jest przechowywana w inny sposób. Nie jest już przechowywana wyłącznie 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ść nieskomplikowana i zapisana w formacie tekstowym. Kiedy masz do czynienia z dynamicznie generowaną treścią, twój kod może się 'rozjechać' i stać 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 dane są przechowywane w komentarzach zapisanych jako kod HTML. 

Do czego można używać kolumn tworzonych za pomocą kreatora WordPress Gutenberg? 

W Gutenberg daje nam pare nowych i ciekawych możliwości. O części z nich możesz się dowiedzieć oglądając specjalne tutoriale dla programistów. 

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ę. 
  • Przystosuj aktualny szablon do możliwości kreatora Gutenberg : Obejmuje to przestrzeganie edycję szablonu , dzięki której będzie on kompatybilny z kreatorem Gutenberg. Obejmuje to dostosowanie stylizacji bloku, aby uzyskać pożądany wygląd, przy zachowaniu funkcjonalności strony. 
  • Dostosuj lub rozszerz istniejące bloki treści : Jak wspomniano powyżej, w Gutenberg można dostosować istniejące bloki WordPress . Obejmuje to dodanie 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. 

Konfiguracja środowiska programistycznego pod kątem edytora bloków i kolumn 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 programistyczne. Twoim pierwszym krokiem jest Node.js. WordPress zaleca używanie Node Version Manager (nvm) do instalacji i zarządzania Node. 

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

npm ci
npm run build

Kodowanie zapewnia, że Gutenberg może być używany jako wtyczka. Następnie dodaj utworzony katalog Gutenberg do folderu wp-content/plugins w swoim lokalnym środowisku WordPress. FirmaWhite Pixel zaleca również instalację pakietu Webpack i Babel. 

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

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

Zrozumienie bloków WordPressa

W WordPress bloki to pojemniki, w których umieszcza się zawartość za pomocą edytora bloków WordPress. Bloki mogą być przenoszone za pomocą interfejsu "drag & drop".

Warto zrozumieć czym są bloki WordPress jeszcze przed stworzeniem ich na własnej stronie. Bloki WordPress są również bardzo obszerne i mają kilka ważnych funkcji, m.in: 

Jak stworzyć bloki?

Dzięki temu 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 na stronach swoich klientów. 

Jak należy wprowadzać nowe bloki WordPress?

Każdy nowy blok zaczyna się od rejestracji. Użyj funkcji 'register BlockType' do zarejestrowania oraz dzefinicjowania typu bloku.  

Nazwa bloku jest ciągiem znaków, który należy zapisać jako namespace/block-name. Zastąp nazwę przestrzeni nazw nazwą bloku, który chcesz utworzyć. 

W tym momencie musisz zdefiniować właściwości swojego nowego bloku, takie jak tytuł, opis, kategoria, ikona, słowa kluczowe czy styl. 

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

Jeśli chcesz dodać niestandardowe funkcje 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 i zainstalowanych na nie wtyczek czy szablonu. 

WordPress -Gutenberg-Tutorial-Developer

Zgodnie z Podręcznikiem Edytora Bloków dodanie własnego paska narzędzi może wyglądać następująco: 

Pasek narzędzi - import

Jak tłumaczyć bloki WordPressa 

Pracując nad projektami międzynarodowymi, możesz mieć pewność, że tworzone przez Ciebie bloki WordPress dotrą do szerszego grona odbiorców. 

Od aktualizacji 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 zechce korzystać z zawartości w jednym z dostępnych języków. 

Dodawanie nowych ustawień

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

WordPress -Gutenberg-Tutorial-Developer

Du kannst <InspectorControls> hinzufügen, indem du WordPress mitteilst, welche Inspektor Steuerelemente verwendet werden sollen, wie sie aussehen sollen, welche Optionen enthalten sein sollen und in welcher Reihenfolge sie erscheinen sollen. 

JavaScript dla WordPress ma wyglądać następująco: 

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 tworzyć dynamiczną zawartość w PHP

Dynamiczny content to nieodzowny element każdnej witryny WordPress. Istnieje wiele powodów, dla których warto mieć na stronie blok dynamiczny. 

Na przykład, jeśli chcesz utworzyć niestandardowyniestendardowy blok, który wyświetla najnowsze posty na blogu w czasie rzeczywistym, musisz zastosować typ 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 zero. Następnie dodaj kod, który podpowie 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 własnych wzorów bloków

Poznajmy inny aspekt Gutenberg, jako kolejny przydatny aspekt w tym tutorialu dla programistów. Dzięki WordPress Block Patterns możesz tworzyć i udostępniać 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 przykładowych bloków z ekranu edycji postu/strony, naciskając znak + . Następnie zobaczysz wszystkie dostępne szablony bloków, dostępne dla swojej Twojej. 

WordPress -Gutenberg-Tutorial-Developer

Jak utworzyć własne wzory bloków 

Aby rozpocząć, utwórz projekt strony lub postu. Dodawaj bloki w dowolnej konfiguracji. Na przykład, jeśli prowadzisz magazyn internetowy, możesz 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 w pożądany sposób. 

Następnym krokiem jest skopiowanie wszystkiego, co zrobiłeś/aś 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. Wybierz opcję 'kopiuj'. 

WordPress -Gutenberg-Tutorial-Developer

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

WordPress -Gutenberg-Tutorial-Developer

Teraz musisz zarejestrować nowy Block Pattern. 

Jak zarejestrować i wyrejestrować standardowe Block Patterns?

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 lub dodając go do niestandardowej wtyczki.

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 deweloper motywów

Gutenberg ułatwia tworzenie niestandardowych bloków WordPress, które sprawiają, że publikowanie treści staje się satysfakcjonującym doświadczeniem. Możesz również użyć Gutenberg, aby zrezygnować z oddzielnego kreatora stron, takich 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ę szablon na wykorzystaniu bloków i kolumn. 

Omówmy szczegółowo kilka opcji, które masz do wyboru. 

Używanie bloków do dodawania sekcji strony

Bloki osłonowe (ang. cover blocks) 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/osłonowe (oba terminy są poprawne) 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źć we wtyczkach WordPress dla układu strony lub w szablonach WP.

Cover blocks, które można dodać to:

  • Bloki obrazów
  • Tła wideo
  • Bloki nagłówków
  • Bloki paragrafów
  • Bloki przycisków (button blocks 

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 szablon WordPress 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 zabawa szablonami, zaawansowane wzorce bloków i style 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 atrybut gotowych pakietów szablonowych. 

Jednakże, przy pomocy kilku sprytnych tricków 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łasnego szablonu dla witryny WordPress. 

WordPress -Gutenberg-Tutorial-Developer

Użyj niestandardowych stylów kolumn 

Innym sposobem wykorzystania Gutenberg jako kreatora stony, 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 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. 

Bloki i kolumny WordPress dla stron docelowych i front pages

Wspomnieliśmy już, jak skuteczne mogą być bloki okładek do tworzenia stron głównych dla Twojej witryny lub szablonu. Ś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żna wykorzystać w połączeniu z blokami okładki, 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ę wtyczek do bloków Gutenberg. 

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 WordPressa

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. W przyszłości edytor będzie kompatybilny z jeszcze większą liczbą szablonów.

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 WordPressa od podstaw, a w końcu budować całe strony internetowe WordPressa, korzystając z wbudowanego edytora bloków. 
W międzyczasie powinieneś upewnić się, że strony, które tworzysz, są hostowane przez Raidboxes. Raidboxes oferuje kompleksowe pakiety hostingowe WordPressa odpowiednie zarówno dla indywidualnych właścicieli stron, jak i agencji.

Pytania dotyczące usługi Gutenberg Development

Czy masz pytania do Maddy dotyczące Przewodnika Gutenberga dla programistów? Czekamy na Twój komentarz. Chcesz być informowany o nowych wpisach w WordPressie? Obserwuj Raidboxes na TwitterzeFacebooku lub poprzez nasz Newsletter.

Spodobał Ci się ten artykuł?

Zostawiając opinię pomożesz nam udoskonalać publikowane przez nas treści.

Jeden komentarz do: "Wspaniały samouczek WordPressa Gutenberg dla programistów - twórz własne bloki".

Napisz komentarz

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