Od WordPress 5.0 użytkownicy tego systemu CMS mają nowego edytora tworzenia treści internetowych – Gutenberg. Podczas tworzenia witryny korzysta z tak zwanych bloków. Poszczególne bloki można edytować. Oto jak używać tego edytora do tworzenia zawartości strony internetowej.
Spis treści
Co to jest Gutenberg?
Gutenberg jest nowym domyślnym edytorem WordPress. Działa na innej zasadzie niż poprzednio używany edytor TinyMCE. Tworzenie stron z blokami oferuje zupełnie nowe doświadczenie w tworzeniu strony internetowej. Istnieje możliwość pracy z tekstem w pojedynczych blokach, podobnie jak w edytorze tekstu.
Bloki można przenosić i grupować na stronie według określonych preferencji użytkownika. Z Gutenbergiem użytkownik ma możliwość lepszego dostosowania wyglądu i układu strony.
Co to jest blok?
Bloki są częściami treści na stronie. Możesz utworzyć blok tekstu, widżetów, obrazów, wideo, cytatów i tak dalej. Każdy blok może nadal działać. Zaletą utworzenia strony internetowej jest funkcja drag and drop, która umożliwia łatwe przenoszenie bloków.
Jak utworzyć stronę w Gutenberg
Aby utworzyć nową stronę, przejdź do administracji strony i wybierz Strony → Dodaj nową. Zostanie otwarta następująca strona:
W wyświetlonym bloku wprowadź nagłówek. Znajdziesz tam także opcję edycji slugu strony. Możesz edytować slug w dowolnym momencie, klikając jego tytuł. Po prostu kliknij przycisk Edytuj obok adresu URL strony.
Tworzenie bloków
Po wprowadzeniu tytułu możesz dodać kolejny tekst do wstępnie ustawionego bloku w celu napisania tekstu lub wstawić własny blok. Aby to zrobić, kliknij ikonę plusa: 
. Tutaj możesz wybrać rodzaj zawartości, którą chcesz dodać.
W moim przykładzie zdecydowałem się dodać akapit. W bloku akapitu znajdziesz czcionkę, wyrównanie i ikonę wstawiania łącza. Znajdziesz przycisk dodatkowych opcji edycji na końcu paska narzędzi edycji bloku 
. Dzięki niemu możesz na przykład ukryć ustawienia bloków, powielić, edytować jako HTML, dodać do bloków wielokrotnego użytku i usunąć blok.
Więcej opcji tekstowych znajduje się po prawej stronie ekranu. Ustawienia czcionek są dostępne tutaj. Możesz wybrać rozmiar czcionki z kilku wstępnie ustawionych opcji lub ustawić własny rozmiar. Możesz także wybrać kolor tła, kolor tekstu lub dokonać własnych dostosowań.
Opcje edycji bloków bezpośrednio nad blokiem oraz po prawej stronie ekranu mogą się różnić w zależności od typu bloku.
Zmiana typu bloku
Możesz zmienić typ bloku w dowolnym momencie podczas tworzenia strony. Aby to zrobić, kliknij pierwszy przycisk nad aktywnym blokiem. Znak dla aktywnego typu bloku jest zawsze wyświetlany tutaj. Kliknij, aby wyświetlić listę bloków do wyboru.
Typy bloków
Istnieje kilka rodzajów bloków dostępnych do tworzenia stron. Są one wymienione na przejrzystej liście podzielonej na kilka sekcji:
Najczęściej używane – tutaj są najczęściej używane typy bloków, takie jak akapit, obraz, galeria i tak dalej.
Elementy bezpośrednie – dostępny jest blok dla bezpośredniego obrazu.
Wspólne bloki – tutaj znajdziesz bloki do zdjęć, wideo, plików, list, cytatów i innych często używanych części strony.
Formatowanie – umożliwia dodanie sformatowanej zawartości, takiej jak tabela, kod, niestandardowy kod HTML, ale także blok w klasycznym edytorze tekstu WordPress.
Elementy układu – tutaj znajdziesz bloki podziału strony, przycisk, kolumny lub blok ze wstępnie utworzonym układem dla mediów i tekstu.
Widżety – dzięki dostępnym opcjom możesz dodawać skróty, kategorie, listę najnowszych komentarzy i inne.
Wbudowane elementy – umożliwia osadzanie zewnętrznych treści, takich jak YouTube, Twitter, Instagram, Facebook i inne treści.
Jak utworzyć podstawowy układ strony
Na początku stworzymy prostą stronę. Wystarczy, że ma tytuł, tekst, obraz, listę wypunktowaną i galerię zdjęć.
Dodawanie tekstu
Po wpisaniu tytułu, po prostu zacznij pisać w ustawionym bloku. Dla każdego akapitu Gutenberg tworzy oddzielny blok. Nie musisz dodawać go do strony za każdym razem. Wystarczy nacisnąć Enter. Nowy blok akapitu jest tworzony samodzielnie.
Dodawanie obrazu
Jeśli chcesz dodać obraz, wybierz odpowiedni blok z listy bloków. Lista bloków jest wyświetlana po kliknięciu ikony plusa w lewym górnym rogu ekranu. Możesz wybrać obraz z biblioteki multimediów lub przesłać go na swoją stronę.
Po przesłaniu pojawi się w układzie strony. Ustawisz rozmiar obrazu w prawej części ekranu, wypełnisz alternatywny tekst lub wstawisz link.
Dodawanie listy punktowanej
Wybierz odpowiedni blok z listy. Podczas edycji tekstu możesz również wybrać listę numerowaną, wstawić link i tak dalej.
Dodawanie galerii obrazów
Wybierz blok dla galerii z listy bloków. Następnie prześlij swoje zdjęcia. Możesz edytować, wyrównywać lub usuwać obraz w bloku galerii. Po prawej stronie ekranu znajdziesz funkcje do ustawiania liczby kolumn i kadrowania obrazów w galerii.
Jak przenieść bloki
Poszczególne bloki można przenosić na stronie. Niezbędne przyciski pojawiają się po najechaniu myszką na blok, który chcesz przenieść. Istnieją dwie strzałki do poruszania się w górę i w dół. Spowoduje to przesunięcie wybranego bloku o jedną pozycję wyżej lub niżej. Pomiędzy strzałkami znajdziesz ikonę drag&drop 
. Po najechaniu na nią kursorem pojawi się ręka, za pomocą której możesz po prostu przytrzymać blok i przenieść go w wybrane miejsce.
Jak ponownie wykorzystać utworzone bloki
Jeśli utworzyłeś blok, który chcesz ponownie wykorzystać, kliknij ikonę Więcej opcji. Możesz go znaleźć w menu funkcji u góry bloku. Wybierz opcję Dodaj do bloków wielokrotnego użytku.
W ten sposób zawsze będziesz mieć dostęp do utworzonych bloków podczas tworzenia nowego wpisu. Zapisane bloki są wyświetlane na liście typów bloków w sekcji Ponowne użycie. Mogą być również zarządzane. Możesz przekonwertować je z powrotem do normalnego bloku lub usunąć z menu.
Inne funkcje
Podczas tworzenia stron lub artykułów dostępnych jest kilka praktycznych funkcji. Najpierw patrzymy na przyciski u góry strony.
Wspomniałem o pierwszej ikonie. Służy do dodania bloku do strony.
Strzały w przód i w tył nie muszą być prezentowane – po prostu przeniosą cię do tyłu lub do przodu.
i – tutaj możesz zobaczyć strukturę treści.
Ciekawą funkcją jest ostatni przycisk – blokuj nawigację. Oprócz wyświetlania kolejności poszczególnych bloków służy również do szybkiego przejścia do wybranego bloku.
Możesz znaleźć więcej funkcji po prawej stronie. Możesz już znać niektóre z nich z poprzedniej pracy z WordPress. Inne z nich są nowe.
Dokument – umożliwia dostęp do ustawień dokumentu, takich jak edycja adresu URL strony, dodanie obrazu ilustracyjnego i włączenie komentarzy. Przypisania kategorii i tagów są również dostępne na stronie tworzenia wpisu. Możesz także dodać tekst do podsumowania.
Blok – wspomniałem już o niektórych funkcjach tego przycisku powyżej w części Tworzenie bloków. Różnią się one w zależności od wybranego typu bloku.
Podgląd – przycisk podglądu wyświetla podgląd strony lub wpisu na żywo.
Publikować – użyj tego przycisku, aby opublikować stronę. Jeśli edytujesz istniejącą stronę, zamiast przycisku Publikować pojawia się przycisk Aktualizować.
Stały link – edytuj tutaj część tekstową adresu URL.
Właściwości strony – Ustaw szablon strony i przypisz stronę nadrzędną.
Pokaż więcej narzędzi i opcji – ostatnim przyciskiem w prawym górnym rogu strony jest Pokaż więcej narzędzi i opcji . Tutaj znajdziesz kilka funkcji, takich jak tryb reflektorów, który pomoże Ci skupić się na zawartości konkretnego bloku podczas tworzenia strony.
Następnie znajdziesz przełącznik między edytorem wizualnym a edytorem kodu, a także tryb pełnoekranowy. Ponadto znajdziesz skróty klawiaturowe, możliwość zarządzania blokami wielokrotnego użytku i inne opcje konfiguracji strony.
Porady dla zaawansowanych
Wymienię też kilka bardziej zaawansowanych funkcji edytora:
Szybkie tworzenie bloku
Aby nie zawsze szukać konkretnego bloku na liście, możesz ułatwić sobie pracę. Wystarczy wpisać ukośnik i pierwsze litery nazwy bloku w ustawionym bloku:
/tytuł bloku
Po rozpoczęciu pisania zobaczysz listę pasujących opcji.
Edycja kodu źródłowego
Możesz edytować kod źródłowy na każdym etapie tworzenia strony. Aby to zrobić, kliknij ikonę . Znajdź tutaj opcję edytora kodu.
Włączanie trybu pełnoekranowego
W edytorze Gutenberga możesz pracować bez niepotrzebnego rozpraszania menu strony. Przejdź do prawego górnego rogu strony i kliknij . Tutaj znajdziesz Tryb pełnoekranowy. Aby jeszcze bardziej skupić się na konkretnym bloku, możesz również wybrać Tryb reflektora.
Korzystanie ze skrótów klawiaturowych
Gutenberg pozwala na użycie wielu specjalnych skrótów klawiaturowych oprócz zwykłych skrótów. Na przykład:
- pokazać lub ukryj ustawienia paska bocznego Ctrl + Shift + ,
- cofnąć ostatnie zmiany Ctrl + Z
- anulować zmiany ponownie Ctrl + Shift + Z
Użyj Ctrl + Shift + H, aby otworzyć listę skrótów.
Rozszerzanie opcji za pomocą wtyczek
Aby rozszerzyć opcje projektowania, zainstaluj jedną z wtyczek Gutenberga. Na przykład wtyczka Stackable oferuje kolekcję gotowych bloków. Tworzy interesujące strony główne. Doskonałą wtyczką jest także Otter Blocks. Pozwala tworzyć bloki, takie jak ceny, Mapy Google i inne.
Kilka odpowiedzi na często zadawane pytania
Co jeśli nie chcę używać Gutenberga?
Niektórzy użytkownicy zastanawiają się, czy WordPress pozwala na użycie poprzedniego edytora TinyMCE. Tak, jest to możliwe. W tym przypadku Gutenberg można wyłączyć. Wystarczy zainstalować WordPress wtyczkę Classic Editor.
Czy zmienią się stare treści?
Wszystkie treści, które już masz na stronie, pozostaną niezmienione. Gutenberg umieszcza określoną stronę lub wpis w jednym bloku. W tym celu Gutenberg ma tak zwany klasyczny blok. Ten pozwala na pracę z oryginalną treścią, jak w klasycznym edytorze TinyMCE.
Możesz po prostu edytować oryginalną treść w klasycznym bloku lub przekonwertować ją na bloki. Potrzebną funkcję możesz znaleźć pod ikoną Więcej opcji . Możesz także pracować z treścią tak, jakbyś tworzył ją w edytorze bloków.
Ale jak zrobić aby było więcej klawiszy podczas pisania z widokiem tych bloków. Brakuje szybszego klikania a blokowe bardzo spowalnia pracę.