Edytor blokowy

Moduł 4: Tworzenie treści · Czas czytania: 8 minut

Cel lekcji: Po tej lekcji będą Państwo potrafili zbudować stronę z bloków i wzorców oraz będą wiedzieć, jak działają koncepty, planowanie publikacji i wersje.

Kluczowe pojęcia: blok, ustawienia bloku, pasek narzędzi, widok listy, grupa, kolumny, wzorzec, zsynchronizowany wzorzec, koncept, prywatne, planowanie, wersje, podgląd

Wszystko jest blokiem

Od WordPressa 5.0 (koniec 2018) treści tworzy się w edytorze blokowym (nazywanym też Gutenbergiem, od nazwy projektu). Strona składa się z osobnych bloków: nagłówka, akapitu, obrazu, przycisku, listy, tabeli, osadzonego wideo. Każdy blok ma własne ustawienia. Bloki można układać jeden pod drugim, obok siebie (w kolumnach) lub jeden w drugim (w grupie).

Dlaczego bloki? W starym edytorze strona była jednym dużym polem tekstowym. Aby uzyskać dwie kolumny lub przycisk, potrzebny był kreator stron, shortcody lub HTML. Dzięki blokom można to zrobić bezpośrednio w WordPressie, a efektem jest czysty kod HTML, który formatuje motyw.

W tle WordPress zapisuje bloki jako HTML z komentarzami przed i po:

<!-- wp:heading -->
<h2 class="wp-block-heading">Godziny otwarcia</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Jesteśmy otwarci od wtorku do soboty.</p>
<!-- /wp:paragraph -->

Warto o tym wiedzieć: treść pozostaje czytelnym kodem HTML, nawet jeśli później zmienią Państwo motyw lub dany blok przestanie istnieć. Można to zobaczyć, wybierając przy bloku opcję „Edytuj jako HTML” lub w edytorze kodu (Ctrl+Shift+Alt+M).

Edytor w trzech częściach

1. Płótno pośrodku: strona taka, jak będzie wyglądać mniej więcej po publikacji.
2. Pasek narzędzi nad zaznaczonym blokiem: pogrubienie, kursywa, link, wyrównanie oraz zmiana typu bloku (akapit staje się listą, obraz staje się galerią).
3. Panel boczny po prawej stronie z dwiema zakładkami: Strona (lub Wpis) z ustawieniami dotyczącymi całej strony oraz Blok z ustawieniami zaznaczonego bloku, takimi jak kolor, odstępy i rozmiar czcionki.

Dwa narzędzia, które znacznie ułatwiają pracę:

• Widok listy (ikona z trzema kreskami w lewym górnym rogu): struktura strony w formie drzewa. Dzięki temu można zaznaczyć dokładnie ten blok, który jest potrzebny, nawet jeśli znajduje się w grupie w kolumnie.
• Polecenia ze slashem: w pustej linii wystarczy wpisać / i nazwę bloku (/heading, /button, /image) i nacisnąć Enter.

Budowanie za pomocą grup i kolumn

Dobra strona ma przejrzystą strukturę. Służą do tego trzy elementy konstrukcyjne:

• Grupa: ramka obejmująca kilka bloków, z własnym tłem lub odstępami. Na przykład kolorowy blok z nagłówkiem, zdaniem i przyciskiem.
• Kolumny: bloki obok siebie. Na telefonie wyświetlają się jeden pod drugim.
• Rząd i Stos: warianty grupy, które porządkują bloki poziomo lub pionowo.

Proszę używać nagłówków we właściwy sposób: jeden H1 (tytuł strony, który zwykle tworzy sam motyw), pod nim H2 dla rozdziałów i H3 dla ich podpunktów. Nie wybierają Państwo nagłówka ze względu na rozmiar czcionki, ten dostosowuje się w ustawieniach bloku. Czytniki ekranu i wyszukiwarki korzystają z nagłówków, aby zrozumieć strukturę strony (lekcja 9.2).

Wzorce: nie trzeba zaczynać za każdym razem od nowa

Mamy tu wzorzec to gotowa grupa bloków: nagłówek z tekstem i obrazem, tabela cenowa, trzy kolumny z ikonami. Wstawia się je za pomocą przycisku wstawiania (plusa), zakładka Wzorce. Motyw często dostarcza ich kilka, a w bibliotece wzorców na wordpress.org znajdują się ich setki.

Można też tworzyć własne wzorce: proszę zaznaczyć kilka bloków, wybrać w pasku narzędzi trzy kropki i opcję Utwórz wzorzec. Przy tym wybiera się, czy wzorzec ma być zsynchronizowany:

• Nie zsynchronizowano: za każdym razem, gdy go Państwo wstawiają, powstaje osobna kopia. Zmiana w niej wpływa tylko na tę kopię. Przydatne jako szablon.
• Zsynchronizowano: wszędzie tam, gdzie się znajduje, wygląda tak samo. Zmiana w jednym miejscu zmienia go wszędzie. Przydatne na przykład dla bloku „Kontakt i godziny otwarcia”, który znajduje się na dziesięciu stronach. (Dawniej nazywało się to „blokami wielokrotnego użytku”.)

Pułapka: zsynchronizowany wzorzec, który Państwo „tylko trochę” zmienią na jednej stronie, zmieni się też na wszystkich pozostałych stronach. Jeśli chcą Państwo zmienić coś tylko w jednym miejscu, proszę przekształcić tę jedną kopię w zwykłą grupę (odłączyć ją).

Zapisywanie, publikowanie i planowanie

Strona posiada status:

Proszę skorzystać z opcji Podgląd, aby zobaczyć stronę tak, jak zobaczy ją odwiedzający, również na telefonie i tablecie, zanim ją Państwo opublikują.

Wersje: cofnięcie się w czasie

Za każdym razem, gdy zapisują Państwo stronę, WordPress zachowuje wersję: stan z danego momentu. W panelu bocznym przy stronie widać, ile wersji zostało zapisanych. Po kliknięciu można za pomocą suwaka zobaczyć różnice między dwiema wersjami i przywrócić starszą wersję.

Wersje to pierwsza siatka bezpieczeństwa w razie pomyłki („przypadkiem usunąłem/usunęłam połowę strony”). Są one jednak wszystkie przechowywane w bazie danych. Strona z tysiącami wersji staje się większa, a czasem wolniejsza. Liczbę wersji można ograniczyć w pliku wp-config.php:

define( 'WP_POST_REVISIONS', 20 );

Lekcja 6.3 dotyczy porządkowania starych wersji.

Gdzie kończy się rola edytora

Edytor blokowy tworzy treść strony. To, co znajduje się wokół treści (nagłówek strony, menu, stopka), należy do motywu. W przypadku motywu blokowego edytuje się to w Edytorze witryny (Wygląd > Edytor) za pomocą tych samych bloków; w przypadku motywu klasycznego w Personalizacji oraz w Widżetach (lekcja 5.1). Jeśli korzystają Państwo z kreatora stron, takiego jak Elementor lub Divi, pracują Państwo w tym programie zamiast w edytorze blokowym; wady takiego rozwiązania omawia lekcja 5.1.

Podsumowanie

• Strona składa się z bloków, które układa się jeden pod drugim, obok siebie i jeden w drugim; WordPress zapisuje je jako HTML z komentarzami.
• Widok listy i polecenia ze slashem sprawiają, że budowanie jest szybkie i precyzyjne.
• Proszę używać nagłówków do budowania struktury (H2, H3), a nie do zmiany rozmiaru czcionki.
• Wzorce oszczędzają pracę; zsynchronizowany wzorzec zmienia się wszędzie jednocześnie.
• Koncept, planowanie, prywatność i wersje dają Państwu kontrolę nad tym, co i kiedy jest widoczne, oraz możliwość cofnięcia zmian.

Quiz

Zadanie

Zadanie D4.1: Proszę zbudować stronę z bloków. Proszę utworzyć stronę konceptu „O nas” zawierającą: nagłówek H2 i H3, co najmniej dwa akapity, obraz z tekstem alternatywnym, blok kolumn z dwiema kolumnami, przycisk z linkiem oraz wzorzec z biblioteki. Proszę przekształcić jedną grupę we własny zsynchronizowany wzorzec i wstawić go na drugiej stronie konceptu. Następnie proszę zmienić go w jednym miejscu i sprawdzić, co dzieje się na drugiej stronie. Na koniec proszę przywrócić wcześniejszą wersję. Proszę odhaczyć każdy krok i opisać w dwóch zdaniach, kiedy warto, a kiedy nie warto używać zsynchronizowanego wzorca.

Przydatne materiały

Na temat pracy w samym WordPressie nie mamy jeszcze własnych artykułów; oficjalna dokumentacja WordPressa jest obszerna.

• Edytor blokowy (wordpress.org, po angielsku): https://wordpress.org/documentation/article/wordpress-block-editor/
• Wzorce (wordpress.org, po angielsku): https://wordpress.org/documentation/article/block-pattern/
• Wersje (wordpress.org, po angielsku): https://wordpress.org/documentation/article/revisions/