Pierwsze wrażenia

Przed rozpoczęciem czytania tego poradnika zalecamy zainstalowanie najnowszej wersji WordPress (5 i wzwyż; jeżeli jeszcze się nie ukazała należy zainstalować wtyczkę “Gutenberg“). Następnie najlepiej przejść do widoku edycji wpisu i na bieżąco przeglądać samodzielnie opisane tutaj elementy Gutenberga.

Zadaniem Gutenberga dostępnego od 5 wersji WordPress jest zastąpienie TinyMCE edytora (Wysywig edytor, w którym obecnie piszemy posty i strony). Na początek rzućmy okiem jak bardzo różnią się oba edytory.

Niestety nie ma obecnie w pełni polskiej wersji Gutenberga, dlatego będziemy musieli korzystać z angielskiej.

Zaczniemy od najmniejszych zmian, dotyczą one bocznego paska widoku edycji posta/strony. W Gutenbergu mamy właściwie dostęp do takich samych sekcji jak do tej pory, czyli blok do zmiany statusu (w Gutenbergu “Status & Visibility”, dotychczas “Opublikuj), kategorie, tagi, obrazek wyróżniający. Poza tym dodany zostały dwie sekcje do tej pory domyślnie widoczne pod TinyMCE, czyli “Excerpt” (“Zajawka”) i “Discussion” (“Dyskusja”). Wszystkie te elementy pełnią takie same funkcje jak wcześniej, zostały po prostu odświeżone, dostosowane do wyglądu Gutenberga i zwinięte w tak zwany akordeon. Nowe są natomiast zakładki “Document” i “Block”. W pierwszej widzimy opisane wcześniej, stare elementy. W “Block” znajdują się ustawienia bloków, czyli elementu dla którego został stworzony. Żeby przejść dalej musimy sobie najpierw wytłumaczyć czym jest “blok”, wokół którego to całe zamieszanie. Mówiąc prosto, od teraz post i strona w WordPressie będzie dużym pudełkiem, do którego będzie można wkładać małe pudełka czyli bloki. Dobrze obrazuje to poniższa grafika. Krótko mówiąc blok jest to miejsce, w którym umieszczamy treści np. w naszym wpisie. Od teraz post czy strona będzie więc składał się z bloków. Blok może być tekstem, tytułem, obrazkiem, filmem, osadzonym linkiem, układem strony (przyciskiem, separatorem, kolumną, pustą przestrzenią), widgetem i wszystkim tym czym uczynią go programiści. Można go przeciągać i łatwo zmienić położenie względem innego bloku.

W praktyce

Zaczynamy od stworzenia nowego posta i od razu przechodzimy do akcji. Stworzymy prosty layout z kilkoma obrazkami, tekstem, elementami układu itd.

Tytuł wpisu

Zaczniemy od podstawowego elementu każdego postu czy strony– tytułu. W Gutenbergu za tytuł odpowiada specjalny, nieusuwalny blok, którego położenie nie można zmienić. W ramach edycji tytułu możemy jak wcześniej w WordPress po prostu zmienić tytuł oraz zmienić link do posta (w tym celu klikamy “Change Permalinks”). Poza tym otrzymaliśmy możliwość skopiowania linku do posta jednym kliknięciem (przydatna funkcja np. podczas przy publikacji postu na facebooku).

 

Domyślny blok

Skoro mamy już tytuł czas na treść postu. Nasz post ma zawierać trochę tekstu, zastosujemy w tym celu tekst wypełniacz “Lorem Ipsum”, który dodamy w domyślnie dodanym polu tekstowym. Cały proces można zobaczyć na filmie poniżej.

Nowy blok

Mamy już trochę tekstu, jednak nie do końca podoba nam się jego wygląd. Ten wpis chcemy zacząć od cytatu, w którym znajdzie się pierwsze napisane przez nas zdanie. Żeby to osiągniąć musimy dodać nowy blok. W tym celu klikamy przycisk z plusem w lewym górnym rogu obszaru Gutenberga. Pojawiło nam się menu, z którego wybieramy bloki. Chcemy dodać cytat więc wybieramy blok typu “Quote”. Wklejamy do niego treść, później opcjonalnie wpisujemy autora cytatu.

Zmiana pozycji bloków

Niestety dodany przez nas blok znajduje się pod wcześniej napisanym przez nas tekstem, a chcieliśmy żeby znalazł się zaraz pod tytułem. Możemy to zmienić na dwa sposoby. Najpierw najeżdamy na blok, z lewej strony pojawiły się 3 ikonki. Strzałki służą do zmiany pozycji bloku o jedo miejsce względem bloku poprzedniego lub następnego, prostokąt z kropkami służy do przeciągania bloku, po “upuszczeniu” przyjmuje on nową pozycję. 

W tym momencie warto potrenować przemieszczanie bloków. Dodamy sobie następny blok, tym razem w nieco inny sposób. Klikamy na tekst “Add text or type / to add content”. Ten tekst to domyślny pusty blok, z którego korzystaliśmy już wcześniej. Będzie on znajdował się zawsze na samym dole. To kliknięcie spowodowało dodanie bloku typu “paragraph”, czyli zwykłego bloku tekstowego. po lewej stronie widzimy ikonkę plusa, taką samą jak w lewym górnym rogu widoku Gutenberga. Jest to ten sam przycisk służący za dodawanie bloków. Po jego naciśnięciu w tym miejscu i wybraniu bloku z lewej stronyzamiast plusa zobaczymy przyciski służące do zmiany pozycji bloku. To samo wydaży się, jeżeli zaczniemy w pustym bloku tekstowym pisać. Skoro znamy już drugi sposób dodawania blokó wpiszmy sobie jakiś tekst w ten blok i przejdźmy do ćwiczeń zmiany pozycji bloków względem siebie. Jak to zrobić zaprezentowano na filmie poniżej.

Usuwanie bloków

Ostatnio dodany przez nas blok był tylko blokiem ćwiczebnym, warto się go pozbyć. Jest to świetna okazja do przećwiczenia usuwania bloków. Żeby usunąć blok musimy na niego kliknąć, następnie z menu, które pojawiło się nad nim kliknąć 3 kropki najbardziej z prawej strony i nacisnąć “Remove Block” (zobacz zrzut ekranu poniżej).

Zmiana typu bloku

Usuneliśmy blok, ale Gutenberg ma przecież opcję zmiany bloku w inny! Niestety nie możemy zmienić go odrazu w dowolny blok, ale możemy przekształcić każdy blok w inny przechodząc przez poszczególne rodzaje bloków. Spróbujmy więc zamiast usuwać blok zmienić go w inny blok. Musimy najpierw przywrócić go do życia. Najłatwiejszą metodą będzie skorzystanie ze skrótu klawiaturowego Ctrl + z. Możemy jednak spróbować samodzielnie dodać go jeszcze raz dla ćwiczeń. Gdy już przywróciliśmy blok do poprzedniego stanu spróbujmy przerobić go na blok typu obrazkowego (“Image”). W tym celu klikamy na blok, następnie najeżdżamy na ikonkę z lewej ¶ (oznacza ona, że mamy do czynienia z blokiem tekstowym, każdy typ bloku ma swoją ikonkę). Po najechaniu ikonka zmienia się na dwie strzałki skierowane w przeciwnych kierunkach, klikamy ją. Zobaczymy wyżej menu “Transform To:” (“Zmień w”).

Jak narazie nie widzimy bloku typu obrazkowego, klikamy więc w pierwszy lepszy typ “Heading”. Nasz blok tekstowy zmienił się w nagłówek, to. Próbujemy jeszcze raz. Klikamy ponownie w przycisk do zmieniania typu bloku, tym razem widzimy trzy ikonki. Wybieramy “Cover” ponieważ intuicyjnie jest to coś zbliżonego do obrazka. Na naszym bloku pojawiła się opcja dodania obrazka, ale wciąż widnieje wcześniej napisany przez nas tekst. Próbujemy więc zmienić obrazek jeszcze raz. Tym razem po kliknięciu widzimy ikonkę “Image” – to jest to czego szukaliśmy! Klikamy i mamy to co chcieliśmy, co więcej w Gutenbergu jak w przyrodzie jak widać nic nie ginie, nasz przykładowy tekst zmienił się w etykietę obrazka (dzieje się tak, jeżeli wrzucamy nowy obrazek z komputera, jeżeli wybieramy go z biblioteki tekst znika).Oczywiście łatwiej możemy dodać obrazek dodając nowy blok, jednak dla ćwiczeń warto było zmienić blok tekstowy w blok obrakowy. Cały proces możemy zobaczyć na filmie poniżej.

Bloki jako układ wpisu

Teraz wypróbujemy sobie nieco ciekawsze możliwości jakie oferuje Gutenberg. Będą to bloki należące do grupy “Layouts Elements” (“Elementy układu”). Pierwszym ciekawym elementem tego typu jest układ kolumnowy. Dodajemy go tak jak każdy blok, szukamy zakładki “Layouts Elements”, rozwijamy ją i wybieramy “Columns”. Po kliknięciu pojawią nam się dwie kolumny, które edytuje się tak jak zwyczajny blok. My dodamy tam trochę tekstu.

Dobrze jest w tym momencie zabawić się nieco i wypróbować różnie typy bloków samodzielnie.

Edycja bloku

Każdy blok ma również swoje opcje dodatkow, np. w obrazku możemy zminić rozmiar czcionki, zwiększyć pierwszą literę, zmienić kolory tekstu i tła. W przypadku cytatu możemy wybrać typ stylu, “Regular” albo “Large”. Opcje bloków dostępne są z prawej stronypo kliknięciu w zakładkę “Block” (musimy wcześniej kliknąć jakis blok). Spróbujemy sobie teraz nieco zmienić kilka naszych bloków. Zaczniemy od zwykłego tekstu. W tym celu klikamy na nasz tekstowy blok. Z prawej strony automatycznie prząłącza nam się zakładka na “Block”. Na pocątek dodamy większą pierwszą literę. W tym celu musimy rozwinąć opcję “Text Settings” jeżeli nie jest rozwinięta i zaznaczyć opcję “Drop Cap”. Zmienimy też sobie kolor tekstu, możemy go wybrać ze wcześniej przygotowanych albo wybać go samemu. Na koniec zmienimy sobie wielkość czcionki na “Small” (możemy też wpisać własną wartość podaną w pikselach). W podobny sposób można edytówać wszystkie inne bloki, zawierają one jednak inne opcje.

Wróć do poprzedniej strony
Autor:
Arkadiusz Wawrzyniak
O autorze
Zajmuje się tworzeniem frontendu i kodowaniem motywów Wordpressowych. Kiedy coś nie działa wciąż krzyczy "wciśnij control F5"! W wolnych chwilach lubi oglądać dobre filmy i grać w gry planszowe.
Kategorie: