Edytor blokowy w WordPress jest domyślnym edytorem do pisania treści i edycji twojej witryny.
Został on 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 wcześniej, jeśli 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.
Biorąc to pod uwagę, przyjrzyjmy się, jak korzystać z edytora bloków WordPress jak profesjonalista, aby tworzyć świetne treści.
Oto, co omówimy w tym poradniku Gutenberg:
- Using Gutenberg – The WordPress Block Editor
- Creating a New Blog Post or Page Using The Block Editor
- How to Add a Block in the Block Editor
- Working With Blocks in the New Editor
- Organizing Blocks in Groups and Columns
- Saving and Reusing Blocks in Gutenberg
- Publishing and Managing Options in Gutenberg Block Editor
- Plugin Settings in Gutenberg
- Adding Some Common Blocks in the Block Editor
- Exploring Other Content Blocks in the Block Editor
- Bonus Tips to Use Gutenberg Like a Pro
- Adding More Blocks to Gutenberg Block Editor in WordPress
- FAQs About Gutenberg – The Block Editor in WordPress
Gotowy? Zanurzmy się.
Film instruktażowy
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 wykonuje wszystkie 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 przy użyciu edytora bloków
Rozpoczniesz tworzenie nowego wpisu na blogu lub strony w normalny sposób. Po prostu kliknij na menu Wpisy ” Dodaj nowy wpis w twoim WordPress administratorze. Jeśli tworzysz stronę, przejdź do menu Strony ” Utwórz nową.
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 własny pasek narzędzi, który pojawia się na górze bloku. 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ć również własne ustawienia bloku, które pojawiają się w prawej kolumnie twojego 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 znajdujący się 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 go zidentyfikować, gdy będziesz musiał 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ą być nawet dostarczane z własnymi wzorcami lub możesz znaleźć wzorce stworzone przez innych w bibliotece WordPress Block Patterns.
Jeśli potrzebujesz więcej pomocy, to mamy osobny przewodnik na temat znajdowania i używania wzorców bloków WordPress dla początkujących.
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 tworzenia formularzy 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
Zasadniczo 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, wprowadzając kilka 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
Korzystając ze starego edytora, wielu naszych użytkowników nie mogło umieścić obrazka obok tekstu. 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
Dodawanie przycisków do twoich wpisów lub stron na blogu było kolejną irytacją w starym edytorze. 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 zawiera 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 Columns, który zasadniczo dodaje dwie kolumny bloków akapitów.
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żesz zastanawiać się, czy będziesz spędzać więcej czasu na dodawaniu i dostosowywaniu bloków niż na tworzeniu rzeczywistej treści.
Cóż, edytor bloków jest niesamowicie szybki i nawet bardzo podstawowe użycie przez kilka minut pozwoli ci błyskawicznie dodawać bloki 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 na górze każdego bloku znajduje się pasek narzędzi. Możesz przenieść ten pasek narzędzi na górę edytora.
Wystarczy kliknąć przycisk z trzema kropkami w prawym górnym rogu ekranu, a następnie wybrać opcję „Górny pasek narzędzi”.
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, a następnie 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 pozwala przeciągać i upuszczać pliki w dowolnym miejscu na ekranie, a automatycznie utworzy dla ciebie blok.
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, jeśli dodasz adres URL filmu z YouTube, automatycznie utworzy on blok osadzania YouTube i wyświetli film.
Domyślna opcja osadzania nie będzie działać w przypadku osadzania na Facebooku i Instagramie, ale istnieje obejście. Zobacz nasz artykuł o tym, jak osadzać wpisy 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. Istnieje kilka doskonałych wtyczek WordPress oferujących 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.
Stworzony przez ludzi stojących za popularnym motywem Astra WordPress, Spectra pomaga tworzyć 111111 piękne projekty bez pisania jakiegokolwiek kodu.
Aby uzyskać więcej informacji, zobacz naszą pełną recenzję Spectra.
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, pola obrazu, 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ć?
Twoje stare wpisy i strony są całkowicie bezpieczne i nie ma na nie wpływu edytor blokowy. Nadal możesz je edytować, a edytor 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 wyłączy on edytor bloków i będzie można nadal korzystać z klasycznego edytora.
Należy pamiętać, że edytor klasyczny będzie obsługiwany do 2024 roku. Lepiej zacząć korzystać z edytora bloków już teraz, aby się z nim zapoznać.
3. Co zrobić, jeśli edytor bloków nie działa z używaną przeze mnie wtyczką lub motywem?
Projekt Gutenberg był rozwijany przez długi czas. Dało to 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 mogą nie działać dobrze z edytorem bloków. W takim przypadku można zainstalować wtyczkę Classic Editor, poprosić dewelopera o dodanie pomocy technicznej Gutenberg lub po prostu znaleźć alternatywną wtyczkę lub motyw.
4. Jak mogę dowiedzieć się więcej o Gutenbergu?
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 napotykasz problemy z edytorem bloków WordPress, to stworzyliśmy szybki przewodnik po rozwiązywaniu problemów z wszystkimi typowymi problemami edytora bloków WordPress, które napotykają użytkownicy i jak je poprawić.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dayo Olobayo says
I’m curious to see how the block editor continues to develop in the future. I’m hoping that we’ll see even more blocks and features added that will make it even more powerful and versatile. It’s already a great tool, and I can only imagine how it will improve over time.
WPBeginner Support says
It will hopefully keep improving over time
Administrator
Moinuddin Waheed says
Let me take this comment as an opportunity to appreciate the grand old classic editor
which has ruled the wordpress space ever since the wordpress was launched.
Now since we have transitioned to the new edition of gutenburg editor and using it
for making posts and pages, I often miss that old classic editor for its simplicity and ease of use.
I remember recommending my non developer friends to write and post content on
my news website without any training or guide. They used to get familiar with it as soon
as they start using it.
Thanks for this detailed article for steps using gutenburg blocks.
Gin says
I write my posts in my computer first. Once done I copy it all to the Editor BUT I have to cut and paste each paragraph, into a paragraph block. Is there a way I can copy and paste an article and it ends automatically within 'blocks’?
WPBeginner Support says
We would recommend taking a look at our guide below on copying and pasting into the editor to make the process easier.
https://www.wpbeginner.com/beginners-guide/how-to-copy-and-paste-into-wordpress/
Administrator
Sunil Suresh says
Wonderful article. I learnt quite a lot about the Gutenberg block editor from your article.
One question: What is the difference between a „pattern” and a „reusable block”? They both seem to be very similar. When would one use one over the other?
WPBeginner Comments says
A pattern is a template you can copy and then edit separately each time to use it, whereas a reusable block allows you to change the reusable block and all instances then will update to match.
Melissa says
I really don’t know what I’m doing wrong, for some reason the website I’m working on, doesn’t look the same as the website that you can search for. I’m so clueless and really struggling. How does the published site look so different to site I’m still busy editing? I’m so confused…
WPBeginner Support says
There are a few possible reasons, if your theme adds many customizations to the design then it could be some confusion from your theme but if you mean your changes are not being applied then it is likely a caching issue.
Administrator
Jiří Vaněk says
I still think, and am convinced, that Gutenberg does not have the same quality as many external builders. The single and huge advantage of Gutenberg is that it is free and native to the system. And since WordPress itself announced a major improvement of the editor itself, I’m trying to learn to work with Gutenberg, which I didn’t really like from the beginning. These videos help me a lot. I just hope that such work pays off and that one day Gutenberg will be as simple as Seed Prod or Elementor.
Ahmed Omar says
actually I am using classic editor which is great for me.
butvi found that some plugins are not working with it.
so, I had to change to block editor which is new for me.
I am following the video step by step which make it easy
thank you
WPBeginner Support says
You’re welcome.
Administrator
Annabelle Franklin says
All I want is something that’s easy to use. The Classic editor has always allowed me to do things easily, e.g. copy and paste text from Word, without needing plugins that are only available to self-hosted sites.
WPBeginner Support says
There is a learning curve when anything changes but we hope as the block editor improves you find it more useful
Administrator
Annabelle Franklin says
Does the Block Editor only work better than the Classic for self-hosted blogs? I can’t afford to pay for a site, and before I start using it I want to make sure it works at least as well as the Classic for people who don’t pay for their WordPress blog.
WPBeginner Support says
It would depend on if there was something that you specifically wanted from the classic editor. If you are just starting out and don’t have experience with either editor then we would recommend using the block editor.
Administrator
Ben Eng says
How do I enable Gutenberg editor for comments?
WPBeginner Support says
The Gutenrberg/Block editor is not currently available for your comments section.
Administrator
ary says
I have downloaded Gutenberg plug in but I still see the same classic editor. What I need to do?
WPBeginner Support says
If your site is up to date it should be using the block editor by default, you would want to check if you have a plugin enabled to show the classic editor instead.
Administrator
Jackson Ndawala says
Is there a need for me to add a theme if the block editor can do all the things the theme can do? Please help.
WPBeginner Support says
You would still need a theme for WordPress to work for the time being. The theme is for the overall design and styling of your site and you can use the block editor to customize parts of your site.
Administrator
Cattie Coyle says
I literally just heard about this new „Gutenberg thing” and found your great tutorial – thank you, it will be super helpful once I figure out how to get Gutenberg to appear on my site. I still only have the classic editor (and I don’t have it as a plugin, it’s the way my site has always been), is there something I need to install to be able to see the Gutenberg editor?
WPBeginner Support says
You would want to be sure your WordPress site is updated to the most recent version to see it. You would also would want to check if the classic editor plugin is active on your site for why the block editor is not your default editor.
Administrator
jo gandomi says
Hello
How did you change the background color of the editor?
For me it is white but for you it is a different color
WPBeginner Support says
Unless your theme overrides this, the block editor should use the same background color as your content on your site.
Administrator
Nikki says
Thank you for the I’m informative video. I have been avoiding the new editor because I’ve been using WP for many years and didn’t see the usefulness in learning a new way when there was nothing wrong with the classic editor. I didn’t realize they were discontinuing classic in 2022, so I actually found this in perfect timing. I see there is still a bit of a learning curve, but it’s not as bad as I thought it would be.
WPBeginner Support says
Glad our guide was helpful and we hope you enjoy using the new editor
Administrator
Michael says
This tutorial has really helped me understand what I can do using Glutenberg. Thanks
WPBeginner Support says
Glad you found our guide helpful
Administrator
Arnold says
Hi there,
When I use the classic editor, the toolbar has a setting to choose a font-type from a drop down menu.
How do you change the font-type when using the block editor?
Arnold
WPBeginner Support says
It sounds like you mean the Advanced Editor Tools (TinyMCE Advanced) you can add some of those tools back but for changing the font for your site’s visitors you would want to take a look at the recommendations from our article below:
https://www.wpbeginner.com/wp-themes/how-to-add-custom-fonts-in-wordpress/
Administrator
Lio says
For some mysterious reason the block settings show up below the page (like YoastSEO settings etc.) instead of on the right side of it. What could be the problem?
WPBeginner Support says
More than likely your browser is too narrow, if you expand your browser window it should appear on the side again.
Administrator
Jay says
I am finding the block editor to be quite frustrating right now. This is because I was hoping to begin blog entries with a quote, poem, or song lyric. As I’m typing and hit enter to go to a different line in the poem, I get a new block. How can I do multiple lines without getting a new block for each line whenever I hit enter?
WPBeginner Support says
You would want to use shift enter instead of only enter to stay within the same block.
Administrator
Lisa Richardson says
Finally decided to learn the block editor. Wow! Why did I wait so long? I read this article, then started a new draft page using block editor. So easy. Once I get used to it and learn more writing new pages and post will be so easy and fun! To those still using classic editor, you really need to start learning and using block editor.
WPBeginner Support says
Glad you’re liking the block editor and we hope our guide can make the transition a little easier
Administrator
Carla says
I was wondering if there is a way to edit a block that has been used in multiple posts so that the changes would appear simultaneously?
WPBeginner Support says
You would want to use a reusable block for what you’re wanting to do. You can see our guide on it below:
https://www.wpbeginner.com/beginners-guide/how-to-create-a-reusable-block-in-wordpress/
Administrator
Marcel says
why Gutenberg appears in the list of modules so that it can be installed if when you install WordPress the block editor is the default?
WPBeginner Support says
There was a Gutenberg plugin for the block editor from before it was the default editor. You do not need to install the Gutenberg plugin to use the block editor anymore.
Administrator
Naureen Amjad says
Hi,
Thanks for the detailed article.
Some time ago, I deleted the block editor. How do I re-install it? there are so many Gutenberg plugins, can’t figure out which one is the default editor.
Thanks for your help.
WPBeginner Support says
You would want to disable the Classic editor plugin to use the Block editor on your site normally unless you are using a different plugin.
Administrator
Dana says
Thank you! This was the answer I was looking for LOL. Couldn’t figure out why the block editor wasn’t showing. You all are the best.
Muhmmad Humayoon says
Sir, I have to format my text spacing like margin and padding. Which block I should Use?
WPBeginner Support says
That would be CSS rather than a specific block, for a starting point you would want to take a look at our guide on inspect element below:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrator
James says
Awesome. Very detailed and helpful.
WPBeginner Support says
Glad our guide was helpful
Administrator
Steve says
What is the best way to copy content from MS Word into the Block Editor?
WPBeginner Support says
You would want to take a look at our article covering this below:
https://www.wpbeginner.com/plugins/how-to-import-docx-documents-in-wordpress/
Administrator
Ayoola Efunkoya says
Nice and helpful post. However, I am seriously looking for resources on how to use the new editor with screen readers. Please can you help?
WPBeginner Support says
We do not have a recommendation at the moment but we will keep a look out.
Administrator
Russ says
When I open my page and go to edit it, it ALWAYS first has the block editor tutorial pop up. How do I make this annoying pop up go away permanently so I can just get to my editing?
WPBeginner Support says
You may want to ensure that your browser is not preventing cookies from being set when you close that popup for one common reason.
Administrator
Sameo says
From using this block editor, I realised that there is no way to send global font colour and size for the entire blog. It is super time consuming to change each individual blog.
Is there a way around this ?
WPBeginner Support says
For that, you would need to use CSS. We cover CSS in our glossary page below:
https://www.wpbeginner.com/glossary/css/
Administrator
Joshua says
How do I reduce the visible post by putting 'read more’ where I want to keep hidden?
WPBeginner Support says
For that, you would use the More block
Administrator
Colin Burch says
Is there a way to index a block? Reduce its width?
WPBeginner Support says
It would depend on the specifics you are looking for when you say index. For the width, you can use CSS or columns as the most common methods for what you’re wanting to do.
Administrator
Colin says
I did not see something I have used often. Example is I have paragraph block where I describe a scripture reference. Then I make another paragraph block to contain the scripture. I would like to indent the scripture block. How would I do that?
WPBeginner Support says
For the moment you should be able to use a classic block to add that indent
Administrator
Colin says
Thanks for reply. Actually, decided to use the 'quote’ block, though the 'verse’ block would also work. Both give a little indent. The 'quote’ puts a vertical bar also.
WPBeginner Support says
Glad you found a solution that works for you
Nancy says
I’m just starting out on Word Press. Maybe this was the „right” time because I haven’t used the older version or gotten used to it. I’ll start right up w/ the new block editor. This guide was helpful. Thanks.
WPBeginner Support says
You’re welcome, glad our guide could be helpful
Administrator
Ted Owen says
Thannks for such a wonderful article. And thanks for your patience. I tried Gutenberg for a brief period, but had difficulty with one important issue: images surrounded by text were right up against each other, no space at all. Tried to find a way to add padding, but couldn’t find it. So went back to Classic.
But now your article shows how much more there is good about Gutenberg, that I’ll just ask you–how do you add padding (space) between an image and abutting text? If there is a current resolution, will return to Gutenberg in a short minute!
Best, Ted
WPBeginner Support says
You could use the media and text block for one method, you may also want to check with your theme’s support to ensure your theme’s styling isn’t part of the reason for this issue.
Administrator
Ted Owen says
Thank you. Will try it out next post.
Vatsalya Agnihotri says
Sir your blog is amazing, I want to ask that if I want to mark my post as featured post in the block editor then how can I do that plz sir tell me
WPBeginner Support says
There should be a checkbox in the post’s settings for sticking the post to the top of the blog for what it sounds like you want
Administrator
macide says
Hi,,Thank you veyr much for your article.
I was prejudiced against the new block editor at first but I am pleasantly surprised that it gives you many more option to transform your pages.
My only problem is that the block editors shows all titles in uppercase at the front end, though the titles on published posts look as they should. Is there any way to fix this so I can see what I’m doing on the editor ?
Thank you in advace.
WPBeginner Support says
We do not have a recommendation at this time but as the block editor improves it should start to look more like the front end of your site.
Administrator
Kathleen says
I have WordPress dot com. I’m trying to use the block editor, but I can’t find where to enter tags and categories. It seems to have disappeared. Any tips? Thanks.
WPBeginner Support says
That would be in the document settings, or you could check under the three verticle dots in the top right under options. Our tutorials are for self hosted installations so should the option not be available you would want to reach out to their support.
Administrator
Shannon says
is there a document that tells me what all these blocks do?
WPBeginner Support says
Not at the moment.
Administrator
Sarah says
I NEED IT OFF AND I NEED IT OFF NOW. I don’t have plugins, I don’t understand. There is no option for classic / a normal editor. How do you go back on the free version? Any time I try to use any plugin even free ones it says I need to upgrade to a paid version of wordpress to use any, even the free plugins, bizarre.
WPBeginner Support says
That would be due to your site being on WordPress.com, you are limited to their options for the classic editor as there are differences in WordPress.com and WordPress.org:
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Administrator
Dave Tolbert says
Thanks for this article, it’s terrific. So far I like the block editor. But when I want to insert an image in a numbered list it seems that there is no control over where the image appears in the list. Is there a way to control where an image appears in a list block?
WPBeginner Support says
If you’re having this issue with multiple blocks then you may want to try using a classic block for creating your list.
Administrator
Neal Umphred says
Thanks for this easy-to-follow tutorial on Gutenberg.
I just got to „Saving and Reusing Blocks in Gutenberg” and followed all the steps. I reached the page where I can manage my reusable blocks.
Now, how do I get back to my editor?
WPBeginner Support says
You would need to manually go back to the page through the posts/page admin area and edit the post again
Administrator
Neal Umphred says
Thanks—that is what I did!
Keep up the good work: This tutorial has helped me immensely in overcoming my fear of change from the Classic editor to the Gutenberg editor (a much more interesting and classy name that „block editor”).
PS: If you have an in with the Gutenbergers, you might suggest they add a return-to-editor option on that reusable page.
WPBeginner Support says
GLad our article could help with your confidence in swapping to the new editor
Senchibald says
Dear,
I have a problem with GUTENBERG block on wordpress. The block has suddenly become narrow, it is not all over the page and I do not have enough space. How to fix this problem?
WPBeginner Support says
To start, if it is not a block added by a plugin, you would want to reach out to your theme’s support to ensure this isn’t a styling error in the theme.
Administrator
Lily Girma says
My blocks are all jumbled up when I try to create a new post and I can’t even write. Please help? I have everything updated so am not sure why it’s doing this. I am in Chrome.
WPBeginner Support says
There are a few possible reasons, to start with you could try a different browser to see if an addon or similar is causing a problem. If that doesn’t fix the block location you could check for a theme or plugin conflict using our guide here: https://www.wpbeginner.com/beginners-guide/beginners-guide-to-troubleshooting-wordpress-errors-step-by-step/
Administrator
Steve Smith says
This new block system is awful.
I can’t do the basic of having a thumbnail image to the left and a h2 heading text centred inline at the top next to it with a h4 heading below.
This was the most basic of things to do with the old, superior system.
I have the illusion of more control but the reality is I have more options that achieve less.
I hope I can go back to classic style because this means i can’t add to my site anymore.
Just appalling.
WPBeginner Support says
It is a learning process for the new editor, for what you’re wanting you may want to try the column block to create that.
Administrator
Karen Fontaine says
After reading the tutorial, and want to uninstall the plugin for classic editor. However, I have a post that was written in both classic and block–the fonts are different and it looks weird. When I switch to block view one of the blocks says „contains unexpected or invalid content”. And then asks to switch to HTML.
If I uninstall the plugin will I have to recreate this content?
WPBeginner Support says
You will likely need to set up the content that was modified to HTML to get your styling back but for the most part, the content should still be there.
Administrator
jill says
is there a comprehensive list of the block symbols and what each one does?
WPBeginner Support says
Not at the moment, as plugins add blocks there will also be more blocks in your list but the blocks should state their name below their symbol to give you an idea on what they’re used for
Administrator
Annette Abrahamsen says
This is a great intoduction! I’ve learned a lot..
However I can’t seem to find a guide on how to make a link block.
I need to link from my site to another site just using a block with a link.
The only option I get is to edit my permalink
Any ideas, you guys??
WPBeginner Support says
When you edit text in a paragraph block by highlighting it, you should be able to use the small new toolbar to add a link.
Administrator
DaveM says
First started using WP V2.6 way back in 2008, and converted my own developed php sites, to use WP as a CMS. It’s certainly come a long way since then. While Gutenberg certainly seems to provide far better work-flow UI, which is packet with goodies, where once you either had to code yourself, or adopt a plugin, I must admit, even as seasoned WP user, the new interface has me stumped more often than not. It’s just another learning curve. So thanks for introduction, tips and guidance. I’ll use this inform to get handle on it! Cheers.
WPBeginner Support says
Thanks for sharing how you feel about Gutenberg, as it improves hopefully it should get easier to use
Administrator
Michael Lowing says
I was pleased to find I could insert a table using the block editor. I populated the cells with codes each of which I wanted to link to media content. However, I could not see any easy way to do this. I could have linked to the URL in each case but this is long-winded. Obviously it would be better to be able to add media content directly from the block editor – have I been stupid and missed something?
WPBeginner Support says
For the moment that is a limitation with the table block, the closest would be creating a column block to insert media blocks as another option.
Administrator
Jonathan says
Since I updated WordPress,I was alerted that „Connection lost” I disabled classic editor plugin before it was resolved. Please is there any way I can use the classic editor and disable the Block editor. Since the block came, my WordPress app always notify me of Generic error when I publish. what is the problem of the app too?
WPBeginner Support says
You would want to reach out to the app’s support and let them know about that issue for them to take a look into what could be the issue.
Administrator