Jak korzystać z edytora bloków WordPress (poradnik Gutenberg)

Edytor blokowy w WordPress jest domyślnym edytorem do pisania treści i edycji twojej witryny. Został wprowadzony w 2019 roku z przydomkiem Gutenberg i zastąpił stary klasyczny edytor.

Edytor bloków oferuje łatwy i intuicyjny sposób tworzenia treści i edytowania twojej witryny WordPress.

W tym poradniku pokażemy ci, jak korzystać z edytora bloków WordPress i opanować go, aby tworzyć wizualnie oszałamiające wpisy i strony na blogu.

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

Zanim zagłębimy się w edytor bloków, porównajmy i zrozumiejmy różnice między edytorem bloków Gutenberg a starszym edytorem klasycznym.

Oto jak wyglądał klasyczny edytor w WordPress:

Posiadał on okno edytora tekstu z kilkoma podstawowymi opcjami formatowania. Jego funkcjonalność i wygląd były dość ograniczone.

Tak wygląda edytor bloków w WordPress:

Jak widać, są to dwa zupełnie różne edytory do tworzenia treści w WordPressie.

Stary klasyczny edytor był edytorem tekstu z przyciskami formatowania podobnymi do Microsoft Word.

Nowy edytor wykorzystuje inne podejście, zwane „blokami” (stąd nazwa Block Editor).

Bloki to elementy treści, które można dodawać do ekranu edycji w celu tworzenia układów. Każdy element dodany do twojego wpisu lub strony jest blokiem.

Na przykład, można dodawać bloki dla akapitów, obrazków, filmów, galerii, audio, list i innych. Istnieją bloki dla wszystkich popularnych elementów treści, a więcej można dodać za pomocą wtyczek WordPress.

W czym edytor bloków WordPress jest lepszy od klasycznego edytora?

Edytor bloków WordPress oferuje prosty sposób dodawania różnego rodzaju treści do twoich wpisów i stron.

Na przykład, jeśli wcześniej chciałeś dodać tabelę do twojej treści za pomocą klasycznego edytora, potrzebowałeś osobnej wtyczki tabeli.

Dzięki edytorowi bloków możesz po prostu dodać blok tabeli, wybrać kolumny i wiersze, a następnie rozpocząć dodawanie treści.

Możesz przenosić elementy treści w górę i w dół, edytować je jako pojedyncze bloki i łatwo tworzyć treści bogate w multimedia.

Co najważniejsze, edytor bloków WordPress jest łatwy w użyciu i nauce.

Daje to ogromną przewagę wszystkim początkującym użytkownikom WordPressa, którzy właśnie rozpoczynają swój pierwszy blog lub budują witrynę internetową dla majsterkowiczów.

To powiedziawszy, przyjrzyjmy się, jak korzystać z edytora bloków WordPress, aby tworzyć świetne treści jak profesjonalista.

Oto, co omówimy w tym poradniku Gutenberg:

Gotowy? Zanurzmy się.

Film instruktażowy

Subscribe to WPBeginner

Jeśli wolisz pisemne instrukcje, czytaj dalej.

Korzystanie z Gutenberg – edytora bloków WordPress

Edytor bloków został zaprojektowany tak, aby był intuicyjny i elastyczny. Chociaż wygląda inaczej niż stary edytor WordPress, nadal robi wszystkie rzeczy, które można było zrobić 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 przy użyciu edytora bloków

Rozpoczniesz tworzenie nowego wpisu na blogu lub strony w normalny sposób. Po prostu kliknij menu Wpisy ” Dodaj nowy wpis w twoim WordPress administratorze. Jeśli tworzysz stronę, przejdź do menu Strony ” Utwórz nowy.

Spowoduje to uruchomienie edytora bloków.

Jak dodać blok w edytorze bloków

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

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

Domyślnie następnym blokiem jest blok akapitu. Pozwala to użytkownikom na natychmiastowe rozpoczęcie pisania.

Jeśli jednak chcesz dodać coś innego, możesz kliknąć przycisk Utwórz nowy blok [+] w lewym górnym rogu edytora, pod istniejącym blokiem lub po prawej stronie bloku.

Kliknięcie przycisku spowoduje wyświetlenie menu dodawania bloków z paskiem wyszukiwania u góry i najczęściej używanymi blokami poniżej.

Możesz klikać karty, aby przeglądać kategorie bloków lub wpisać rodzaj słowa kluczowego, aby szybko wyszukać określony blok.

Jeśli nie chcesz używać myszy do kliknięcia przycisku, możesz również użyć skrótu klawiaturowego.

Zacznij od wpisania rodzaju /, aby wyszukać blok, a następnie wstaw go, naciskając klawisz Enter na twojej klawiaturze.

Praca z blokami w nowym edytorze

Każdy blok ma pasek narzędzi, który pojawia się na górze. 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 Akapit, który pokazuje podstawowe przyciski formatowania, takie jak wyrównanie tekstu, pogrubienie, kursywa, wstawienie odnośnika i inne opcje, które są dostępne w menu z trzema kropkami.

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

Ustawienia te różnią się w zależności od edytowanego bloku. Na przykład blok Akapit umożliwia edycję koloru tekstu, tła i odnośnika, a także typografii.

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

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, jak usuwać blok w WordPress.

Organizowanie bloków w grupach i kolumnach

Edytor bloków zawiera również przydatne narzędzia do zarządzania i organizowania twoich układów treści.

Możesz zaznaczyć wiele bloków, klikając je z wciśniętym klawiszem Shift na twojej klawiaturze.

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

Następnie można zastosować style do całego bloku grupy, np. zmieniając wyrównanie lub odstępy.

Edytor bloków umożliwia także dodanie pustego bloku Grupy lub Kolumny.

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

W każdej kolumnie można dodać dowolny rodzaj bloku.

Pozwala to na tworzenie 111111 pięknych układów dla różnych przypadków użycia.

Zapisywanie i ponowne wykorzystywanie bloków w Gutenbergu

Jedną z najlepszych rzeczy w korzystaniu z bloków jest to, że można je zapisywać i ponownie wykorzystywać. Jest to szczególnie przydatne dla właścicieli witryn internetowych i blogerów, którzy często muszą dodawać określone fragmenty kodu do swoich artykułów lub stron.

Wystarczy kliknąć przycisk menu w prawym rogu paska narzędzi każdego bloku. Z menu wybierz opcję „Utwórz wzorzec”.

Uwaga: Można również używać całych grup i kolumn jako bloków wielokrotnego użycia. Pozwala to na zapisywanie całych sekcji i używanie ich w razie potrzeby.

Spowoduje to wyświetlenie wyskakującego okienka, w którym należy podać nazwę tego wzorca. Może to być cokolwiek, co pomoże ci łatwo zidentyfikować, kiedy musisz go ponownie użyć.

Następnie można opcjonalnie wybrać kategorie. Pomaga to posortować twoje wzorce w zorganizowany sposób.

Następnie kliknij przycisk „Utwórz”, aby zapisać twój wzorzec. WordPress zapisze twój wzorzec ze wszystkimi znajdującymi się w nim blokami.

Aby ponownie użyć twojego wzorca, po prostu edytuj wpis lub stronę, na której chcesz go dodać.

Następnie kliknij przycisk dodawania bloku [+] lub użyj skrótu klawiaturowego /. Możesz znaleźć wzorzec, wpisując rodzaj nadanej mu nazwy.

Wzorce ułatwiają właścicielom witryn dodawanie powszechnie 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 WordPress Block Patterns.

Jeśli potrzebujesz więcej pomocy, przygotowaliśmy osobny przewodnik dla początkujących na temat znajdowania i używania wzorców bloków WordPress.

Publikowanie i zarządzanie opcjami w edytorze bloków Gutenberg

Każdy wpis WordPress zawiera wiele metadanych. Obejmuje to informacje takie jak data publikacji, kategorie i tagi, wyróżniające się obrazki i wiele innych.

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

Opcje wtyczek w Gutenbergu

Wtyczki WordPress mogą korzystać z API edytora bloków, aby zintegrować swoje ustawienia na ekranie edycji.

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

Na przykład WPForms, najlepsza wtyczka do formularzy kontaktowych WordPress, umożliwia dodawanie formularzy do twojej 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 dla WordPress pozwala edytować twoje ustawienia SEO w dolnej części edytora bloków:

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

Bloki te umożliwiają dodawanie twoich produktów do dowolnych wpisów i stron WordPress.

Dodawanie niektórych popularnych bloków w edytorze bloków

Edytor bloków może robić wszystko to, co starszy edytor klasyczny.

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

Oto niektóre z popularnych bloków, których można użyć.

1. Dodawanie obrazka w edytorze bloków WordPress

W edytorze bloków WordPress znajduje się gotowy do użycia blok Obrazek. Wystarczy dodać blok, a następnie przesłać plik z obrazkiem lub wybrać go z biblioteki multimediów.

Możesz także przeciągać i upuszczać obrazki z twojego komputera, a edytor automatycznie utworzy blok Image.

Po dodaniu obrazka wyświetlone zostaną ustawienia bloku, w których można dodać metadane dla obrazka, takie jak tekst alternatywny, rozmiar rozdzielczości obrazka i dodanie odnośnika do obrazka.

Aby uzyskać więcej informacji, wystarczy zapoznać się z naszym poradnikiem na temat dodawania obrazków w WordPressie.

2. Dodawanie odnośnika w edytorze bloków

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

Wszystkie inne często używane bloki tekstowe również posiadają przycisk odnośnika na pasku narzędzi.

Można również wstawić odnośnik za pomocą skrótu klawiaturowego, którym jest Command + K na komputerach Mac i CTRL + K na komputerach z systemem Windows.

3. Dodawanie galerii obrazków w Gutenbergu

Blok Galeria działa podobnie jak blok obrazków. Dodajesz go, a następnie przesyłasz lub wybierasz pliki obrazków.

Więcej szczegółów można znaleźć w naszym przewodniku na temat tworzenia galerii obrazków w WordPress.

4. Dodawanie krótkich kodów we wpisach WordPress przy użyciu Gutenberga

Wszystkie twoje krótkie kody będą działać tak samo, jak w klasycznym edytorze. Możesz po prostu dodać je do bloku Paragraph lub użyć bloku Shortcode.

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

Edytor Gutenberg obiecał rozwiązać pewne długotrwałe problemy z użytecznością w WordPressie poprzez wprowadzenie nowych bloków.

Poniżej znajdują się niektóre z ulubionych, które naszym zdaniem będą niezwykle pomocne dla użytkowników.

1. Dodawanie obrazka obok tekstu w WordPressie

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

Ten prosty blok składa się z dwóch bloków umieszczonych obok siebie, umożliwiając łatwe dodanie obrazka z tekstem obok niego.

2. Dodawanie przycisku we wpisach i na stronach WordPressa

Kolejną uciążliwością starego edytora było dodawanie przycisków do twoich wpisów lub stron na blogu. Trzeba było albo użyć wtyczki, która tworzyła krótki kod dla przycisku, albo przełączyć się do trybu HTML i napisać kod.

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

Możesz dodać odnośnik do twojego przycisku, zmienić kolory i wiele więcej. Aby uzyskać szczegółowe informacje, zobacz nasz artykuł na temat łatwego dodawania przycisków w WordPress.

3. Dodawanie pięknych obrazków w wpisach na blogu i na stronach docelowych

Inną fajną funkcją, którą warto wypróbować, jest blok okładek, który umożliwia dodawanie obrazków okładek lub kolorowych okładek tła do twoich wpisów i stron.

Obrazek okładki to szerszy obrazek często używany do nowej sekcji na stronie lub początku relacji. Wygląda 111111 pięknie i pozwala tworzyć angażujące układy treści.

Wystarczy dodać blok Okładka, a następnie przesłać obrazek, którego chcesz użyć. Możesz wybrać kolor nakładki dla okładki lub ustawić ją jako poprawiony obrazek tła, aby stworzyć efekt paralaksy, gdy użytkownicy przewijają stronę w dół.

Więcej szczegółów można znaleźć w naszym artykule na temat różnicy między okładką a obrazkami wyróżniającymi w WordPress.

4. Tworzenie tabel wewnątrz artykułów

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

Teraz edytor bloków ma domyślny blok Tabela, dzięki czemu dodawanie tabel do twoich wpisów i stron jest bardzo łatwe. Wystarczy dodać blok i wybrać liczbę kolumn i wierszy, które chcesz wstawić.

Możesz teraz rozpocząć dodawanie danych do wierszy tabeli. W razie potrzeby zawsze możesz dodać więcej wierszy i kolumn, a dostępne są dwie podstawowe opcje stylu.

5. Tworzenie treści wielokolumnowych

Tworzenie treści wielokolumnowych było kolejnym problemem, z którym klasyczny edytor w ogóle sobie nie radził.

Na szczęście edytor bloków umożliwia dodanie bloku Kolumny, który dodaje dwie kolumny bloku akapitu.

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

Dodatkowe wskazówki dotyczące korzystania z Gutenberga jak profesjonalista

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

Cóż, edytor bloków jest niesamowicie szybki, a nawet bardzo podstawowe użycie przez kilka minut pozwoli ci dodawać bloki natychmiast, nawet bez zastanowienia.

Wkrótce zdasz sobie sprawę, o ile szybszy stanie się twój przepływ pracy dzięki takiemu podejściu.

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

1. Przesuń pasek narzędzi bloku na górę

Być może zauważyłeś 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żywanie skrótów klawiaturowych

Gutenberg zawiera kilka przydatnych skrótów, które sprawią, że twój przepływ pracy będzie jeszcze szybszy i łatwiejszy. Pierwszym z nich, którego powinieneś zacząć używać od razu, jest /.

Po prostu wpisz /, zacznij pisać, a edytor wyświetli pasujące bloki, które możesz natychmiast dodać.

Aby uzyskać więcej skrótów, kliknij menu z trzema kropkami w prawym górnym rogu twojego ekranu i wybierz „Skróty klawiaturowe”.

Spowoduje to wyświetlenie wyskakującego okienka 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 systemów Windows i Mac.

3. Przeciągnij i upuść multimedia, aby automatycznie utworzyć bloki multimedialne

Gutenberg umożliwia przeciąganie i upuszczanie plików w dowolnym miejscu na ekranie, automatycznie tworząc blok dla użytkownika.

Można na przykład upuścić pojedynczy obrazek lub plik z filmem, a blok zostanie utworzony. Alternatywnie, możesz upuścić wiele plików obrazków, aby utworzyć blok galerii.

4. Osadzanie treści z YouTube, Twittera, Vimeo i innych serwisów

Edytor bloków ułatwia osadzanie treści innych firm w twojej treści WordPress. Dostępne są bloki dla wszystkich popularnych usług innych firm.

Możesz jednak po prostu skopiować i wkleić adres URL osadzania w dowolnym momencie, a blok zostanie automatycznie utworzony.

Na przykład dodanie adresu URL filmu z YouTube spowoduje automatyczne utworzenie bloku osadzania YouTube i wyświetlenie filmu.

Domyślna opcja osadzania nie będzie działać w przypadku osadzania postów na Facebooku i Instagramie, ale istnieje obejście. Zobacz nasz artykuł na temat osadzania wpisów z Facebooka i Instagrama w WordPress.

Dodawanie kolejnych bloków do edytora bloków Gutenberg w WordPress

Edytor bloków w WordPress umożliwia programistom tworzenie własnych bloków. Niektóre doskonałe wtyczki WordPress oferują pakiety bloków dla nowego edytora.

Oto kilka z nich:

1. Spectra WordPress Gutenberg Blocks

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

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

Aby uzyskać więcej informacji, zobacz naszą pełną recenzję Spectra.

2. Bloki PublishPress

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, pokaz slajdów, przyciski, ikonki, galerie obrazków, mapy, karty, referencje, akordeony i wiele więcej.

3. Możliwość układania w stosy – bloki Gutenberg

Stackable – Gutenberg Blocks to kolekcja 111111 pięknie zaprojektowanych bloków Gutenberg, które możesz wykorzystać na swojej witrynie internetowej. Zawiera bloki dla kontenera, wpisów, siatki funkcji, akordeonu, ramki z obrazkami, listy ikonek, wezwania do działania i innych.

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

Odkąd Gutenberg stał się domyślnym edytorem WordPress, otrzymujemy wiele pytań o to, jak z niego korzystać. Oto odpowiedzi na niektóre z najczęściej zadawanych pytań dotyczących edytora bloków.

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

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

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

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

Tak, nadal możesz korzystać ze starego edytora. Wystarczy zainstalować i włączać wtyczkę Classic Editor.

Po włączaniu edytor bloków zostanie wyłączony i będzie można nadal korzystać z klasycznego edytora.

Należy pamiętać, że edytor klasyczny będzie wspierany do 2024 roku. Aby zapoznać się z edytorem bloków, zacznij korzystać z niego już teraz.

3. Co zrobić, jeśli edytor bloków nie działa z używaną przeze mnie wtyczką lub motywem?

Projekt Gutenberg był długo w fazie rozwoju, co dało autorom wtyczek i motywów mnóstwo czasu na przetestowanie swojego kodu pod kątem zgodności [może być też „kompatybilny”].

Nadal istnieje jednak szansa, że niektóre wtyczki i motywy nie będą dobrze współpracować z edytorem bloków. W takim przypadku można zainstalować wtyczkę Classic Editor, poprosić dewelopera o dodanie pomocy technicznej Gutenberg lub znaleźć alternatywną wtyczkę lub motyw.

4. Jak mogę dowiedzieć się więcej o poradach i sztuczkach Gutenberga?

WPBeginner to najlepsze miejsce, aby dowiedzieć się więcej o edytorze bloków w WordPress. Jesteśmy największą witryną z zasobami 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 witrynie internetowej.

5. Problemy z Gutenbergiem?

Jeśli masz problemy z edytorem bloków WordPress, stworzyliśmy krótki przewodnik po rozwiązywaniu problemów, w którym wymieniliśmy wszystkie typowe problemy z edytorem bloków napotykane przez użytkowników i sposoby ich poprawki.

Zasoby bonusowe

Poniżej znajduje się kilka dodatkowych zasób, które pomogą ci efektywniej korzystać z edytora bloków:

• Edytor bloków WordPress a kreatory stron: Jaka jest różnica?
• Jak utworzyć własny blok WordPress (prosty sposób)
• Jak importować / eksportować twoje bloki WordPress Gutenberg (2 kroki)
• Widżety WordPress a bloki – jaka jest różnica? (Wyjaśnienie)
• Kompletny przewodnik dla początkujących po pełnej edycji witryny WordPress
• Najlepsze motywy blokowe do pełnej edycji witryny w WordPress

Mamy nadzieję, że ten poradnik Gutenberg pomógł ci nauczyć się korzystać z edytora bloków WordPress. Możesz również zapoznać się z naszym kompletnym przewodnikiem po wydajności WordPress a, aby poprawić szybkość twojej witryny internetowej lub sprawdzić nasze porównanie najlepszych usług e-mail marketingu dla małych firm.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.