Jak używać edytora bloków WordPress (poradnik Gutenberg)

Tworzenie pięknych treści w WordPress nie musi być przytłaczające.

Edytor bloków (Gutenberg) został specjalnie zaprojektowany, aby tworzenie stron i wpisów było tak proste, jak przeciąganie i upuszczanie bloków na miejsce. Nie są wymagane żadne umiejętności techniczne.

Pomyśl o tym jak o budowaniu z cyfrowych klocków Lego. Każdy element treści – czy to tekst, obrazy, czy przyciski – staje się blokiem, który można łatwo przesuwać i dostosowywać.

Używamy go od lat. Pomogło to tysiącom użytkowników WPBeginner w opanowaniu tego systemu.

W tym samouczku pokażemy Ci dokładnie, jak działa edytor bloków WordPress.

Nauczysz się prostych technik, które przyspieszą tworzenie treści. Ponadto odkryjesz funkcje, które nadadzą Twojej stronie dopracowany wygląd bez znajomości kodowania.

Jaka jest różnica między edytorem bloków (Gutenberg) a klasycznym edytorem?

Największa różnica polega na sposobie tworzenia treści. Edytor klasyczny był prostym edytorem tekstu, podczas gdy Edytor bloków jest nowoczesnym kreatorem stron.

Oto szybkie porównanie kluczowych różnic:

Funkcja	Edytor klasyczny	Edytor bloków (Gutenberg)
Struktura treści	Pojedyncze pole tekstowe (jak MS Word)	Poszczególne bloki dla każdego elementu
Opcje układu	Ograniczone (wymaga wtyczek do kolumn)	Przeciąganie i upuszczanie kolumn, grup i wierszy
Obsługa multimediów	Podstawowe wyrównanie (lewe, prawe, środkowe)	Obrazy pełnoekranowe, galerie i bloki okładek
Responsywność mobilna	Często wymaga niestandardowego kodu CSS	Bloki automatycznie układają się na urządzeniach mobilnych
Krótkie kody	Wklejane bezpośrednio do tekstu	Dedykowany blok Shortcode dla czystszego kodu

Edytor bloków daje większą kontrolę nad wyglądem i stylem treści. Możesz tworzyć złożone układy, które były po prostu niemożliwe w starym edytorze.

Czym edytor bloków WordPress jest lepszy od klasycznego edytora?

Edytor bloków WordPress oferuje szybszy, bardziej wizualny sposób tworzenia treści. Eliminuje potrzebę stosowania wielu wtyczek jednofunkcyjnych, które kiedyś spowalniały strony internetowe.

Oto sprawdzone korzyści z przejścia na Edytor bloków:

• Bogactwo mediów: Zawiera potężne opcje multimedialne, takie jak blok Okładka (dla zdjęć głównych) i blok Media i tekst, które wcześniej były niemożliwe bez niestandardowego kodu.
• Redukuje nadmiar wtyczek: Nie potrzebujesz już oddzielnych wtyczek do tabel, przycisków ani kolumn. Wszystko to są teraz wbudowane bloki w rdzeniu.
• Domyślnie responsywny mobilnie: W klasycznym edytorze złożone układy często psują się na telefonach. Kolumny bloków automatycznie układają się pionowo na urządzeniach mobilnych, zapewniając płynne wrażenia dla odwiedzających.
• Edycja wizualna: Widzisz dokładnie, jak wygląda Twoja treść podczas jej edycji. Nie ma potrzeby przełączania się między edytorem a przyciskiem „Podgląd”.
• Zabezpieczenie na przyszłość: Edytor bloków jest wymagany do nowoczesnych funkcji WordPressa, takich jak Edycja całej witryny (FSE) i Motywy bloków. Klasyczny edytor nie ma dostępu do tych nowych narzędzi projektowych.

Oto, co omówimy w tym samouczku Gutenberg:

Gotowi? Zaczynajmy.

Korzystanie z Gutenberga – Edytora bloków WordPressa

Edytor bloków został zaprojektowany tak, aby był intuicyjny i elastyczny. Chociaż wygląda inaczej niż stary edytor WordPress, nadal wykonuje wszystkie te czynności, które można było wykonać w klasycznym edytorze.

Zacznijmy od omówienia podstawowych rzeczy, które robiłeś w klasycznym edytorze i jak są one wykonywane w edytorze bloków.

Tworzenie nowego wpisu na blogu lub strony za pomocą edytora bloków

Zaczniesz tworzyć nowy wpis lub stronę tak, jak zwykle. Po prostu kliknij menu Wpisy » Dodaj nowy wpis w panelu administracyjnym WordPress.

Jeśli tworzysz stronę, zamiast tego przejdź do menu Strony » Dodaj nową.

Uruchomi to edytor bloków.

Jak dodać blok w edytorze bloków

Pierwszym blokiem każdego wpisu lub strony jest tytuł.

Możesz użyć myszy, aby przesunąć się poniżej tytułu, lub nacisnąć klawisz Tab na klawiaturze, aby przesunąć kursor w dół i rozpocząć pisanie.

Domyślnie następnym blokiem jest blok Akapitu. Pozwala to użytkownikom od razu zacząć pisać.

Jeśli jednak chcesz dodać coś innego, możesz kliknąć przycisk dodawania nowego bloku [+] w lewym górnym rogu edytora, poniżej istniejącego bloku lub po prawej stronie bloku.

Kliknięcie przycisku wyświetli menu dodawania bloku z paskiem wyszukiwania na górze i najczęściej używanymi blokami poniżej.

Możesz klikać na zakładki, aby przeglądać kategorie bloków lub wpisać słowo kluczowe, aby szybko wyszukać konkretny blok.

Jeśli nie chcesz klikać przycisku myszą, możesz również użyć skrótu klawiaturowego.

Zacznij od wpisania / w celu wyszukania bloku, a następnie wstaw go, naciskając klawisz Enter na klawiaturze.

Praca z blokami w nowym edytorze

Każdy blok ma pasek narzędzi, który pojawia się nad nim. Przyciski na pasku narzędzi zmieniają się w zależności od edytowanego bloku.

Na przykład, na poniższym zrzucie ekranu pracujemy nad blokiem akapitu, który pokazuje podstawowe przyciski formatowania, takie jak wyrównanie tekstu, pogrubienie, kursywa, wstawienie linku i więcej opcji dostępnych w menu z trzema kropkami.

Oprócz paska narzędzi, każdy blok może mieć własne ustawienia, które pojawiają się w prawej kolumnie ekranu edycji.

Te ustawienia różnią się w zależności od edytowanego bloku. Na przykład blok Akapit pozwala edytować kolor tekstu, tła i linku, a także typografię.

Możesz przesuwać bloki w górę i w dół oraz zmieniać ich kolejność.

Jeśli chcesz to zrobić, po prostu kliknij, aby przeciągnąć lub upuścić, lub kliknij przyciski w górę i w dół na pasku narzędzi bloku.

Powiązane: Zobacz nasz przewodnik o tym, jak usunąć blok w WordPress.

Organizowanie bloków w grupy i kolumny

Edytor bloków zawiera przydatne narzędzia do zarządzania i organizowania układów.

Możesz zaznaczyć wiele bloków, klikając je, przytrzymując klawisz Shift na klawiaturze.

Następnie kliknij przycisk typu bloku na pasku narzędzi, aby przekształcić zaznaczone bloki w Grupy lub Kolumny.

Następnie możesz zastosować style do całego bloku Grupa, takie jak zmiana wyrównania lub odstępów.

Edytor bloków pozwala również na dodanie pustego bloku Grupa lub Kolumny.

Następnie możesz wypełnić je innymi blokami.

Możesz dodawać dowolny typ bloku w każdej kolumnie, w zależności od potrzeb.

Pozwala to na tworzenie pięknych układów do różnych zastosowań.

Zapisywanie i ponowne wykorzystywanie treści za pomocą zsynchronizowanych wzorców (bloki wielokrotnego użytku)

Jedną z najpotężniejszych funkcji edytora bloków jest możliwość zapisywania i ponownego wykorzystywania treści w całej witrynie. Odbywa się to za pomocą zsynchronizowanych wzorców (dawniej znanych jako bloki wielokrotnego użytku).

Wzorzec zsynchronizowany to blok lub grupa bloków, których można używać na wielu wpisach i stronach.

Najlepsze jest to, że po edycji wzorca jest on automatycznie aktualizowany wszędzie tam, gdzie został użyty. Jest to idealne rozwiązanie dla treści, które muszą pozostać spójne, takich jak pole wezwania do działania lub ujawnienie informacji o afiliacji.

Aby go utworzyć, po prostu zaznacz blok lub bloki, które chcesz zapisać. Następnie kliknij ikonę menu z trzema kropkami na pasku narzędzi bloku i wybierz opcję „Utwórz wzorzec”.

Pojawi się okno dialogowe. Tutaj możesz nadać swojemu wzorowi nazwę i przypisać go do kategorii, aby zachować porządek.

Co najważniejsze, musisz upewnić się, że opcja „Synchronizowane” jest włączona. To sprawia, że wzorzec aktualizuje się wszędzie jednocześnie.

Po kliknięciu „Utwórz” Twój nowy Wzorzec synchronizacji zostanie zapisany.

Aby użyć go w innym poście lub stronie, po prostu kliknij przycisk wstawiania bloku (+) i znajdź go w zakładce „Szablony” lub po prostu wyszukaj go po nazwie.

Wzorce ułatwiają właścicielom witryn dodawanie często używanych elementów do ich układów, takich jak wezwania do działania, przyciski mediów społecznościowych, banery i inne.

Twój motyw WordPress lub wtyczki mogą nawet zawierać własne wzorce, lub możesz znaleźć wzorce stworzone przez innych w bibliotece wzorców bloków WordPress.

Jeśli potrzebujesz więcej pomocy, mamy osobny przewodnik dla początkujących o tym, jak znaleźć i używać wzorców bloków WordPress.

Opcje publikowania i zarządzania w edytorze bloków Gutenberg

Każdy wpis w WordPress zawiera wiele metadanych. Obejmuje to informacje takie jak data publikacji, kategorie i tagi, obrazy wyróżniające i inne.

Wszystkie te opcje są schludnie umieszczone w prawej kolumnie na ekranie edytora.

Opcje wtyczki w Gutenbergu

Wtyczki WordPress mogą wykorzystywać API edytora bloków do integracji swoich ustawień na ekranie edycji.

Niektóre popularne wtyczki zawierają własne bloki.

Na przykład WPForms, najlepsza wtyczka do formularzy kontaktowych WordPress, pozwala dodawać formularze do treści za pomocą bloku.

Inne wtyczki WordPress mogą również dodawać swoje ustawienia do ekranu edytora bloków.

Na przykład, oto jak All in One SEO for WordPress pozwala edytować ustawienia SEO na dole edytora bloków:

Podobnie, jeśli prowadzisz sklep internetowy za pomocą WooCommerce, zauważysz, że również ma on własne bloki.

Te bloki pozwalają dodawać Twoje produkty do dowolnych wpisów i stron WordPress.

Dodawanie niektórych typowych bloków w edytorze bloków

Edytor bloków potrafi wszystko, co potrafił starszy klasyczny edytor.

Jednak będziesz robić rzeczy szybciej i bardziej elegancko niż wcześniej. Ponadto, może zrobić znacznie więcej, na przykład pozwolić ci stylizować treści za pomocą wielu opcji bez kodu.

Oto niektóre z powszechnie używanych bloków.

1. Dodawanie obrazu w edytorze bloków WordPress

W edytorze bloków WordPress dostępny jest gotowy do użycia blok Obraz. Po prostu dodaj blok, a następnie prześlij plik obrazu lub wybierz go z biblioteki mediów.

Możesz również przeciągać i upuszczać obrazy z komputera, a edytor automatycznie utworzy blok Obraz.

Po dodaniu obrazu zobaczysz ustawienia bloku, gdzie możesz dodać metadane dla obrazu, takie jak tekst alternatywny, rozmiar rozdzielczości obrazu i dodanie linku do obrazu.

Aby uzyskać więcej informacji, zapoznaj się z naszym poradnikiem o tym, jak dodawać obrazy w WordPress.

2. Dodawanie linku w edytorze blokowym

Edytor bloków zawiera kilka bloków, do których można dodawać tekst. Najczęściej używanym jest blok Akapit, który ma przycisk wstaw link na pasku narzędzi.

Wszystkie inne powszechnie używane bloki tekstowe również mają przycisk linku na pasku narzędzi.

Możesz również wstawić link za pomocą skrótu klawiaturowego, który wynosi Command + K na Macu i CTRL + K na komputerach z systemem Windows.

3. Dodawanie galerii obrazów w Gutenberg

Blok Galeria działa podobnie do bloku Obraz. Dodajesz go, a następnie przesyłasz lub wybierasz pliki obrazów.

Aby uzyskać więcej szczegółów, zobacz nasz przewodnik o tym, jak tworzyć galerie obrazów w WordPress.

4. Dodawanie Shortcode’ów w postach WordPress przy użyciu Gutenberga

Wszystkie Twoje krótkie kody będą działać tak, jak poprzednio. Zalecamy jednak używanie dedykowanego bloku „Krótki kod”.

Chociaż technicznie można wklejać shortcode'y do bloku Akapit, blok Shortcode zapobiega problemom z formatowaniem i zapewnia poprawne renderowanie kodu.

Eksplorowanie innych bloków treści w edytorze bloków

Edytor Gutenberg obiecywał rozwiązać niektóre długotrwałe problemy z użytecznością w WordPress poprzez wprowadzenie nowych bloków.

Poniżej znajdują się niektóre z ulubionych, które naszym zdaniem użytkownicy uznają za niezwykle pomocne.

1. Dodawanie obrazu obok tekstu w WordPressie

Wielu naszych użytkowników nie mogło umieścić obrazu obok tekstu za pomocą starego edytora. Teraz możesz to zrobić za pomocą bloku Media i tekst.

Ten prosty blok zawiera dwa bloki umieszczone obok siebie, co pozwala łatwo dodać obrazek z tekstem obok.

2. Dodawanie przycisku w postach i stronach WordPressa

Inną irytacją starego edytora było dodawanie przycisku do swoich postów lub stron blogowych. Trzeba było albo użyć wtyczki, która tworzyła skrót dla przycisku, albo przełączyć się w tryb HTML i napisać kod.

Na szczęście Gutenberg ma blok Przycisk, który pozwala szybko dodać przycisk do dowolnego wpisu lub strony.

Możesz dodać link do swojego przycisku, zmienić kolory i nie tylko. Szczegóły znajdziesz w naszym artykule o tym, jak łatwo dodawać przyciski w WordPress.

3. Dodawanie pięknych obrazów nagłówkowych do wpisów na blogu i stron docelowych

Inną fajną funkcją, którą możesz wypróbować, jest blok okładki, który pozwala dodawać obrazy okładkowe lub tła kolorowe do Twoich postów i stron.

Obraz nagłówka to szerszy obraz, często używany do nowej sekcji na stronie lub początku historii. Wygląda pięknie i pozwala tworzyć angażujące układy treści.

Po prostu dodaj blok Okładka, a następnie prześlij obraz, którego chcesz użyć. Możesz wybrać kolor nakładki dla okładki lub ustawić ją jako stały obraz tła, aby uzyskać efekt paralaksy podczas przewijania strony przez użytkowników.

Więcej szczegółów znajdziesz w naszym artykule na temat różnicy między obrazami okładki a obrazami wyróżniającymi w WordPress.

4. Tworzenie tabel w artykułach

Klasyczny edytor nie miał przycisku do dodawania tabel do wpisów w WordPress. Trzeba było użyć wtyczki lub utworzyć tabelę, pisząc niestandardowy kod CSS i HTML.

Teraz edytor bloków ma domyślny blok Tabeli, co znacznie ułatwia dodawanie tabel do wpisów i stron. Po prostu dodaj blok i wybierz liczbę kolumn i wierszy, które chcesz wstawić.

Możesz teraz zacząć dodawać dane do wierszy tabeli. Zawsze możesz dodać więcej wierszy i kolumn, jeśli zajdzie taka potrzeba, a dostępne są dwie podstawowe opcje stylu.

5. Tworzenie treści wielokolumnowych

Tworzenie treści wielokolumnowych było w przeszłości głównym problemem. Na szczęście edytor bloków pozwala łatwo dodać blok Kolumny.

Ten blok jest dość elastyczny. Możesz dodać do 6 kolumn w rzędzie, a nawet używać innych bloków wewnątrz każdej kolumny.

Co najlepsze, te kolumny są responsywne mobilnie. WordPress automatycznie układa je pionowo na mniejszych ekranach, dzięki czemu Twoja witryna wygląda świetnie na wszystkich urządzeniach bez dodatkowego kodowania.

Dodatkowe wskazówki, jak używać Gutenberga jak profesjonalista

Patrząc na edytor bloków, możesz się zastanawiać, czy spędzisz więcej czasu na dodawaniu i dostosowywaniu bloków niż na tworzeniu faktycznej treści.

Cóż, edytor bloków jest niezwykle szybki, a nawet bardzo podstawowe użycie przez kilka minut pozwoli Ci natychmiast dodawać bloki, nawet o tym nie myśląc.

Już wkrótce zdasz sobie sprawę, jak znacznie przyspieszy Twój przepływ pracy dzięki temu podejściu.

Oto kilka dodatkowych wskazówek dla zaawansowanych użytkowników, które pomogą Ci pracować jeszcze szybciej z edytorem bloków WordPress.

1. Przenieś pasek narzędzi bloku na górę

Mogłeś zauważyć na powyższych zrzutach ekranu, że pasek narzędzi pojawia się na górze każdego bloku. Możesz przenieść ten pasek narzędzi na górę edytora.

Aby uzyskać dostęp do opcji „Górny pasek narzędzi”, kliknij przycisk z trzema kropkami w prawym górnym rogu ekranu.

2. Używaj skrótów klawiaturowych

Gutenberg oferuje kilka przydatnych skrótów, które sprawią, że Twoja praca będzie jeszcze szybsza i łatwiejsza. Pierwszym, który powinieneś zacząć używać od razu, jest /.

Po prostu wpisz /, zacznij pisać, a edytor pokaże Ci pasujące bloki, które możesz natychmiast dodać.

Więcej skrótów znajdziesz, klikając menu z trzema kropkami w prawym górnym rogu ekranu i wybierając „Skróty klawiaturowe”.

Spowoduje to wyświetlenie okna podręcznego z listą wszystkich skrótów klawiaturowych, których można użyć. Lista będzie zawierać różne skróty dla użytkowników systemu Windows i Mac.

3. Przeciągnij i upuść multimedia, aby automatycznie tworzyć bloki multimediów

Gutenberg pozwala na przeciąganie i upuszczanie plików w dowolne miejsce na ekranie, automatycznie tworząc dla Ciebie blok.

Na przykład możesz upuścić pojedynczy plik obrazu lub wideo, a zostanie on automatycznie przekształcony w blok. Alternatywnie, możesz upuścić wiele plików obrazów, aby utworzyć blok Galerii.

4. Dodawanie osadzonych materiałów z YouTube, Twittera, Vimeo i innych

Edytor bloków ułatwia osadzanie treści stron trzecich w treści WordPress. Istnieją bloki dla popularnych usług, takich jak YouTube, X (Twitter), Vimeo i Spotify.

Możesz również po prostu skopiować i wkleić adres URL osadzania w dowolnym momencie, a WordPress automatycznie utworzy dla Ciebie blok.

Na przykład, dodanie adresu URL filmu z YouTube automatycznie utworzy blok osadzania YouTube i wyświetli film.

Dodawanie większej liczby bloków do edytora bloków Gutenberg w WordPress

Edytor bloków w WordPress pozwala programistom tworzyć własne bloki. Niektóre doskonałe wtyczki WordPress oferują pakiety bloków dla nowego edytora.

Oto kilka z nich:

1. Bloki Gutenberg Spectra WordPress

Spectra WordPress Gutenberg Blocks to biblioteka bloków z wieloma zaawansowanymi blokami, które pomagają dodawać więcej elementów projektowych do treści.

Spectra, stworzona przez ludzi stojących za popularnym motywem WordPress Astra, pomaga tworzyć piękne projekty bez pisania kodu.

Więcej informacji znajdziesz w naszym kompletnym przeglądzie Spectra.

2. PublishPress Blocks

PublishPress Blocks to kolejna potężna biblioteka bloków, która zawiera dodatkowe bloki rozszerzające edytor bloków Gutenberg.

Zawiera piękne opcje układu, suwaki, przyciski, ikony, galerie obrazów, mapy, karty, referencje, akordeony i wiele więcej.

3. Układalne – Bloki Gutenberga

Stackable – Gutenberg Blocks to kolekcja pięknie zaprojektowanych bloków Gutenberg, których możesz używać na swojej stronie internetowej. Zawiera bloki dla kontenera, postów, siatki funkcji, akordeonu, pola obrazu, listy ikon, wezwania do działania i innych.

Aby uzyskać więcej opcji, zobacz naszą pełną listę najlepszych wtyczek bloków WordPress Gutenberg.

Najczęściej zadawane pytania dotyczące Gutenberga – Edytora bloków w WordPressie

Od kiedy Gutenberg stał się domyślnym edytorem WordPress, otrzymujemy wiele pytań o to, jak go używać. Oto odpowiedzi na niektóre z najczęściej zadawanych pytań dotyczących edytora bloków.

1. Co stanie się z moimi starszymi wpisami i stronami w edytorze bloków? Czy nadal mogę je edytować?

Edytor bloków nie wpływa na Twoje stare posty i strony. Nadal możesz je edytować, a edytor bloków automatycznie otworzy je w bloku zawierającym klasyczny edytor.

Możesz je edytować w starym edytorze lub przekonwertować starsze artykuły na bloki i używać edytora bloków.

2. Czy nadal mogę używać starego edytora?

Tak, nadal możesz używać starego edytora. Po prostu zainstaluj i aktywuj wtyczkę Classic Editor.

Po aktywacji edytor bloków zostanie wyłączony i będziesz mógł nadal korzystać z klasycznego edytora.

Wtyczka Edytor klasyczny będzie oficjalnie wspierana w dającej się przewidzieć przyszłości. Jednak zdecydowanie zalecamy rozpoczęcie korzystania z edytora bloków już teraz, aby zapoznać się z nowoczesnym sposobem tworzenia treści w WordPressie.

3. Co mam zrobić, jeśli edytor bloków nie działa z wtyczką lub motywem, którego używam?

Projekt Gutenberg był długo w fazie rozwoju, co dało autorom wtyczek i motywów mnóstwo czasu na przetestowanie ich kodu pod kątem kompatybilności.

Istnieje jednak nadal szansa, że niektóre wtyczki i motywy mogą nie działać dobrze z edytorem bloków. W takim przypadku możesz zainstalować wtyczkę Edytor klasyczny, poprosić dewelopera o dodanie obsługi Gutenberga lub znaleźć alternatywną wtyczkę lub motyw.

4. Jak mogę dowiedzieć się więcej o wskazówkach i trikach dotyczących Gutenberga?

WPBeginner to najlepsze miejsce do nauki o edytorze bloków w WordPress. Jesteśmy największą witryną zasobów WordPress w Internecie.

Będziemy publikować nowe artykuły i aktualizować nasze stare zasoby, aby pomóc Ci opanować edytor bloków.

W międzyczasie, jeśli masz jakiekolwiek pytania, skontaktuj się z nami, zostawiając komentarz lub korzystając z formularza kontaktowego na naszej stronie internetowej.

5. Napotykasz problemy z Gutenbergiem?

Jeśli masz problemy z edytorem bloków WordPress, przygotowaliśmy szybki przewodnik rozwiązywania problemów, który zawiera listę wszystkich typowe problemy z edytorem bloków, na które napotykają użytkownicy, i jak je naprawić.

Samouczek wideo

Wolisz wideo? Możesz obejrzeć nasz samouczek poniżej:

Subskrybuj WPBeginner

Dodatkowe zasoby

Poniżej znajdują się dodatkowe zasoby, które pomogą Ci efektywniej korzystać z edytora bloków:

• Edytor bloków WordPress vs. Page Builders: Jaka jest różnica?
• Jak stworzyć niestandardowy blok WordPress (łatwy sposób)
• Jak importować / eksportować własne bloki Gutenberga w WordPressie (2 kroki)
• Widgety WordPress vs Bloki – Jaka jest różnica? (Wyjaśnione)
• Kompletny przewodnik dla początkujących po edycji całych stron w WordPress
• Najlepsze motywy blokowe do edycji pełnej strony w WordPress
• Wskazówki dotyczące mistrzowskiego opanowania edytora treści WordPress

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.