Edytor bloków WordPress: wszystko, co musisz wiedzieć (2022)

Opublikowany: 2022-04-23

WordPress wypuścił nowy edytor Block, który zastąpił stary klasyczny edytor. Ten edytor działa w zupełnie inny sposób i jest kierunkiem, w którym zmierza WordPress.

Jeśli jesteś nowy w edytorze bloków WordPress i szukasz zasobu, który pomoże ci zrozumieć, jak to działa, jesteś we właściwym miejscu!

W tym poście przeprowadzę Cię przez nowy edytor bloków WordPress.

Co więcej, pokażę ci, jak to działa i jak możesz porzucić klasyczny edytor na rzecz tego znacznie lepszego i wydajnego edytora.

Więc zacznijmy.

Spis treści:
  • Co to jest edytor bloków WordPress?
  • Edytor bloku vs Edytor klasyczny: jaka jest różnica?
  • Szybkie wprowadzenie do interfejsu edytora bloku
  • Wprowadzenie do bloków
  • Konwertowanie starych postów na bloki
  • Wstawianie nowego bloku
  • Powielanie, przenoszenie i usuwanie bloków
  • Tworzenie bloku wielokrotnego użytku
  • Dodawanie większej liczby bloków do Edytora bloków

Co to jest edytor bloków WordPress?

Edytor bloków WordPress to nowy domyślny edytor WordPressa oparty na blokach. Bloki to elementy zawartości, których można używać do dodawania akapitów, obrazów, filmów, przycisków, list i nie tylko.

A Gutenberg to nazwa projektu nowego edytora bloków WordPress. Projekt nosi imię Johannesa Gutenberga, który wynalazł mechaniczną prasę do druku ruchomego.

WordPress stwierdził, że jednym z największych celów nowego edytora było umożliwienie użytkownikom tworzenia bogatych postów i pięknych układów za pomocą zaledwie kilku kliknięć.

WordPress Gutenberg aka Edytor bloków

Dzięki nowemu interfejsowi blokowemu użytkownicy WordPress mogą teraz tworzyć piękne strony i posty bez potrzeby stosowania wtyczek do tworzenia stron.

Aby lepiej zrozumieć blok, musimy przyjrzeć się, jak różni się on od klasycznego edytora.


Edytor bloku vs Edytor klasyczny: jaka jest różnica?

Nowy edytor bloków bardzo różni się od klasycznego edytora.

Zobaczmy jak:

Tak wygląda klasyczny edytor WordPress:

Edytor klasyczny WordPress

Oto nowy edytor Block stworzony przez WordPress:

Na powierzchni wyglądają zupełnie inaczej. Ale te różnice są znacznie większe, jeśli zagłębisz się w każdy edytor.

Największą różnicą między klasycznym edytorem a edytorem bloków jest to:

Klasyczny edytor to prosty edytor tekstu z różnymi opcjami formatowania. Możesz dodawać obrazy, skróty, wideo itp., Tak jak dodajesz w dowolnym innym edytorze tekstu.

Z drugiej strony edytor bloków używa bloków, w których każdy element lub jednostka jest reprezentowana jako bloki. Tak więc każdy obraz, galeria, wideo lub krótki kod, który dodajesz do swoich treści, ma postać bloku.

Dlatego jest również nazywany Edytorem bloku.

Edytor bloków zawiera wiele predefiniowanych bloków, które można dodać do zawartości. Możesz także dodać wiele nowych bloków za pomocą wtyczki bloku Gutenberg.

Więc teraz znasz różnicę między edytorem klasycznym a edytorem bloków.

Pytanie brzmi:

W jaki sposób edytor bloków Gutenberga jest lepszy od klasycznego edytora?

Istnieje wiele zalet korzystania z edytora bloków w porównaniu z edytorem klasycznym.

Największym jest to, że jest łatwy w użyciu niż klasyczny edytor. Możesz także edytować poszczególne bloki, co daje większą kontrolę nad projektem i układem strony.

Przeczytaj: Gutenberg (edytor bloków) Vs. Edytor klasyczny: który wybrać?


Szybkie wprowadzenie do interfejsu edytora bloku

Przyjrzyjmy się bliżej interfejsowi edytora bloków Gutenberga. Za każdym razem, gdy tworzysz post lub stronę w Gutenberg, tak wygląda edytor:

Oto krótkie podsumowanie elementów interfejsu edytora Gutenberga:

  1. Tytuł Twojego posta/strony na blogu.
  2. Obszar treści Twojego posta/strony.
  3. Pozwala dodawać nowe bloki.
  4. Przyciski Cofnij/Ponów.
  5. Dostęp do ustawień postów, w których możesz dodawać kategorie, zmieniać polecany obraz, ustawiać datę publikacji i nie tylko.
  6. Ustawienia dla indywidualnie wybranego bloku. Każdy blok może mieć inne ustawienia bloku.
  7. Podgląd na żywo lub opublikuj/zaktualizuj post.

Teraz, gdy znasz już interfejs edytora bloków, przyjrzyjmy się blokom dołączonym do Gutenberga.


Wprowadzenie do bloków

Czytasz, że nowy edytor działa z blokami od początku tego przewodnika. Ale czym są te bloki? A jak one działają?

Oto różne rodzaje bloków dostępnych w Gutenbergu w oparciu o różne kategorie:

Bloki
  • Blok akapitowy
  • Blok nagłówków
  • Blok obrazu
  • Galeria Blok
  • Blokuj listę
  • Cytat blok
  • Blok audio
  • Blok okładki
  • Blokowanie plików
  • Blok wideo
  • Niestandardowy blok HTML
  • Blok tabeli
  • Blok kodu
  • Klasyczny blok
  • Wstępnie sformatowany blok
  • Blok cytatów
  • Blok wersetu
  • Blok kolumn
  • Blok przycisków
  • Blok mediów i tekstu
  • Blok podziału strony
  • Blok separatora
  • Blok dystansowy
  • Blok skrótów
  • Najnowsze posty
  • Blokowanie umieszczania w YouTube

Wspólne bloki

Są to klocki, które są bardzo często używane podczas pracy z postami. Wspólne bloki obejmują najbardziej podstawowe bloki elementów.

Blok akapitowy

Blok akapitu umożliwia pisanie tekstu w edytorze bloku. To proste pole, w którym możesz napisać treść swojego posta.

Blok akapitowy Gutenberga

Ten blok zawiera standardowe opcje formatowania umożliwiające zmianę rozmiaru czcionki, wyrównania, tła, koloru tekstu itp. akapitu.

Blok nagłówków

Blok nagłówków umożliwia dodawanie nagłówków do treści. Możesz wybrać rodzaj nagłówka spośród sześciu rozmiarów (H1 do H6).

Możesz zmienić wyrównanie nagłówka, sformatować go, a nawet wstawić linki.

Blok obrazu

Blok obrazu umożliwia dodanie obrazu do edytora. Możesz wstawić obraz z komputera, biblioteki multimediów WordPress lub z adresu URL.

Blok obrazu Gutenberg

Możesz dodać podpisy, zmienić rozmiar obrazu, dodać tekst ALT i nie tylko w bloku obrazu.

Galeria Blok

Możesz tworzyć piękne galerie za pomocą bloku Galeria. Za pomocą tego bloku możesz dodać więcej niż jeden obraz do tego samego bloku.

Blok Galerii Gutenberg

Możesz wybrać liczbę kolumn dla galerii, dodać podpisy do obrazów, a nawet połączyć obrazy w swojej galerii.

Blokuj listę

Blok listy umożliwia tworzenie listy punktowanej lub numerowanej.

Blok listy Gutenberg

Ten blok zawiera również standardowe opcje formatowania, które umożliwiają tworzenie elementów podrzędnych, dodawanie linków do zakotwiczenia i formatowanie tekstu listy.

Cytat blok

Blok cytatów pozwala dodawać piękne cytaty do treści.

Blok cytatów Gutenberga

Możesz dodać cytat wraz z nazwiskiem autora i sformatować go jak każdy inny blok.

Blok audio

Blok audio umożliwia przesyłanie plików audio do treści. Blok wyświetla piękny odtwarzacz audio.

Blok audio Gutenberg

Możesz dostosować odtwarzacz audio, aby odtwarzał dźwięk automatycznie i/lub w pętli.

Blok okładki

Blok okładki może być użyty do dodania obrazu lub wideo z nakładką tekstową.

Blok okładki Gutenberg

Możesz zmienić kolor tła i krycie nakładki.

Blokowanie plików

Za pomocą bloku plików można dodawać różne typy plików.

Blok plików Gutenberg

Blok pliku pozwala wyświetlić przycisk, wybrać otwarcie pliku w nowej karcie i nie tylko.

Blok wideo

Blok wideo umożliwia przesyłanie filmów do treści.

Blok wideo Gutenberg

Możesz automatycznie odtwarzać filmy, wyciszać je, przesyłać miniatury wideo i nie tylko.

Bloki formatowania

Bloki formatowania obejmują bloki kodu, niestandardowe bloki HTML i inne podobne bloki.

Przejrzyjmy każdy blok formatowania dostępny w Gutenbergu.

Niestandardowy blok HTML

Niestandardowy blok HTML pozwala szybko dodać niestandardowy kod HTML do posta i wyświetlić jego podgląd.

Niestandardowy blok HTML

Blok tabeli

Teraz możesz tworzyć tabele w WordPressie bez korzystania z żadnej wtyczki.

Blok stołu Gutenberg

Blok tabeli umożliwia łatwe tworzenie tabel. Możesz wybrać liczbę wierszy i kolumn oraz wybrać układ.

Blok kodu

Możesz wyświetlać fragmenty kodu pięknie za pomocą bloku kodu.

Blok kodu Gutenberga

Blok kodu nie jest blokiem, w którym kod jest wykonywalny. Służy tylko do wyświetlania kodu swoim czytelnikom.

Klasyczny blok

Możesz dodać mały klasyczny edytor za pomocą klasycznego bloku.

Klasyczny blok Gutenberg

Klasyczny blok ma wszystkie opcje formatowania klasycznego edytora.

Wstępnie sformatowany blok

Wstępnie sformatowany blok umożliwia wyświetlanie tekstu na interfejsie użytkownika podczas jego wpisywania.

Preformatowany blok Gutenberga

Wyświetla tekst czcionką o stałej szerokości.

Blok cytatów

Możesz wyróżnić dowolny tekst treści za pomocą bloku pullquote.

Blok Gutenberga Pullquote

Możesz dostosować kolory bloku, zmieniając kolor główny i kolor tekstu.

Blok wersetu

Bloki wersetów służą do pisania wersetów, takich jak poezja lub teksty.

Blok wersetowy Gutenberga

Wersety są wyświetlane w nowej linii i możesz napisać tyle wersetów, ile chcesz.

Bloki elementów układu

Bloki elementów układu umożliwiają piękne dostosowanie układu posta.

Oto bloki elementów układu w Gutenberg:

Blok kolumn

Możesz dodać kolumny do treści za pomocą bloku kolumn. Nie musisz już używać żadnych wtyczek shortcode dla kolumn!

Blok Kolumn Gutenberga

Blok kolumny można dostosować i zmienić kolor tła kolumny.

Blok przycisków

Możesz dodać piękne przyciski do swojego posta za pomocą bloku przycisków.

Blok przycisku Guttenberg

Istnieje wiele ustawień bloku przycisków, które pozwalają dostosować obramowanie i kolor przycisku.

Blok mediów i tekstu

Blok multimediów i tekstu może służyć do wyświetlania tekstu i multimediów obok siebie.

Gutenberg Media i blok tekstowy

Ten blok ma standardowe opcje formatowania tekstu i multimediów.

Blok podziału strony

Blok podziału strony umożliwia dodawanie do treści prostych podziałów stron.

Blok separatora

Blok separatora to prosty blok, który pozwala dodawać separatory do posta.

Blok dystansowy

Ten blok dodaje przestrzeń między blokami.

Bloki elementów widżetu

Bloki elementów widżetów umożliwiają dodawanie widżetów do posta. Te bloki widżetów obejmują skróty, archiwa, kategorie, wyszukiwanie, chmurę tagów i inne.

Blok skrótów

Blok shortcode umożliwia dodawanie skrótów do treści.

Blok skrótów Gutenberga

W przeciwieństwie do klasycznego edytora, w którym wklejasz krótki kod bezpośrednio w treści, blok shortcode pozwala łatwo wstawić krótki kod.

Najnowsze posty

Blok najnowszych postów umożliwia wyświetlanie w postach najnowszych postów opublikowanych na Twoim blogu.

Gutenberg Blok najnowszych postów

Dostępne są ustawienia, które pozwalają wybrać kategorię postów, wybrać liczbę elementów do wyświetlenia, zamówić posty i wyświetlić datę publikacji.

Osadź elementy

Osadzanie elementów umożliwia umieszczanie w poście treści z innych źródeł.

Niektóre bloki elementów do osadzania obejmują osadzanie z YouTube, Spotify, SlideShare i inne.

Blokowanie umieszczania w YouTube

Blok osadzania YouTube umożliwia osadzanie dowolnych filmów z YouTube w swoich treściach.

Blok osadzania YouTube Gutenberga

To są klocki, które są dostarczane z Gutenbergiem.


Konwertowanie starych postów na bloki

Jeśli twoje zainteresowanie edytorem bloków osiągnęło szczyt, czas przyjrzeć się, jak możesz przekonwertować stare klasyczne posty edytora na bloki.

Proces jest bardzo prosty i zajmuje tylko kilka kliknięć.

Oto jak możesz to zrobić:

Przejdź do Posty > Wszystkie posty na pulpicie WordPress.

Posty WordPress

Kliknij „Edytuj” przy poście, który chcesz przekonwertować na bloki.

Teraz, jeśli masz zainstalowanego Gutenberga na swoim WordPressie, post zostanie załadowany z nowym interfejsem edytora bloków.

Ale cała zawartość będzie znajdować się w „Klasycznym bloku”, o którym mówiliśmy w poprzedniej sekcji.

Klasyczny blok to po prostu edytor TinyMCE ze wszystkimi funkcjami edytora klasycznego.

Ważne jest, aby pamiętać, że tylko to, że Twój post jest załadowany w nowym edytorze bloków, nie oznacza, że ​​został on przekonwertowany na bloki.

Aby przekonwertować klasyczny blok na pojedyncze bloki, kliknij opcję „Konwertuj na bloki”.

Cały Twój post zostanie przekonwertowany na pojedyncze bloki.

I to wszystko!

Przekształcenie starych postów w bloki jest tak proste.

Ale co z tworzeniem nowych postów za pomocą interfejsu edytora bloków?

Spójrzmy na to.


Wstawianie nowego bloku

W poprzednich sekcjach przyjrzeliśmy się interfejsowi edytora bloków Gutenberga. Jest to prosty i przejrzysty interfejs, który pozwala łatwo tworzyć posty.

Aby dodać cokolwiek do swojego posta, musisz wstawić blok.

Oto różne sposoby wstawiania bloku do swojego postu w Gutenbergu.

Istnieją trzy sposoby wstawiania bloku i wszystkie są dość proste.

Pierwszym z nich jest po prostu kliknięcie znaku „+” w edytorze postów.

Możesz także dodać nowy blok, klikając znak „+” na górnym pasku narzędzi.

A ostatnia jest całkiem niesamowita. Wystarczy wpisać /, a następnie nazwę bloku i wstawić blok w edytorze.

Używanie ukośnika, aby dodać nowy blok w Gutenberg

Najlepsze w tej metodzie jest to, że nie musisz wpisywać pełnej nazwy bloku. Blok automatycznie wyświetla sugestie podczas pisania.


Powielanie, przenoszenie i usuwanie bloków

Najlepsze w edytorze bloków jest to, że wszystko jest w bloku. Tak więc, jeśli chcesz skopiować tekst, obraz lub tabelę, nie musisz kopiować całej rzeczy.

Po prostu wybierz blok i wybierz, co chcesz z nim zrobić. Możesz powielać bloki, przesuwać je po prostu przeciągając lub usuwać.

Oto jak możesz to zrobić.

Powielanie bloków

Powielanie bloków jest bardzo łatwe.

Aby zduplikować blok, wybierz blok i kliknij jego ustawienia (trzy pionowe kropki). W ustawieniach istnieje możliwość zduplikowania bloku.

Kliknij na niego, a Twój blok zostanie zduplikowany.

Powielanie bloków w Gutenberg

Możesz także zduplikować bloki, zaznaczając blok i używając klawisza skrótu Ctrl+Shift+D.

Ruchome bloki

Możesz przesuwać bloki, przeciągając je lub po prostu klikając przyciski w górę i w dół.

Najedź na swój blok, a po lewej stronie zobaczysz dwa przyciski w górę i w dół oraz przycisk pośrodku.

Kliknięcie przycisków w górę/w dół spowoduje przesunięcie bloku w górę/w dół. Możesz też kliknąć środkowy przycisk i przeciągnąć blok w dowolne miejsce.

Usuwanie bloków

Aby usunąć blok, kliknij ustawienia bloku i wybierz opcję usuwania bloku.

Usuwanie bloków w Gutenberg

Możesz także usunąć blok, używając skrótu klawiszowego Shift+Alt+Z.


Tworzenie bloku wielokrotnego użytku

Jedną wielką cechą edytora bloków jest koncepcja bloków wielokrotnego użytku. Blok wielokrotnego użytku to w zasadzie blok, który można zapisać i wykorzystać w innych postach.

Jest to bardzo przydatna funkcja, ponieważ możesz teraz zapisywać bloki i ponownie je wykorzystywać.

Aby utworzyć blok wielokrotnego użytku, kliknij ustawienia bloku i wybierz opcję „Dodaj do bloków wielokrotnego użytku”.

Tworzenie bloku wielokrotnego użytku w Gutenberg

Następnie nadaj nazwę zapisywanemu blokowi i kliknij przycisk Zapisz.

Nazewnictwo bloku wielokrotnego użytku

Spowoduje to zapisanie twojego bloku w bibliotece bloków Gutenberga.

Teraz, gdy chcesz użyć swojego bloku wielokrotnego użytku w innych postach, możesz go wstawić jak każdy inny blok.

Możesz także zarządzać blokami wielokrotnego użytku na stronie menedżera bloków. Na tej stronie możesz edytować lub usuwać swoje bloki. Możesz także importować lub eksportować bloki.


Dodawanie większej liczby bloków do Edytora bloków

Domyślne bloki dostępne w edytorze bloków są naprawdę świetne i pomagają tworzyć piękne posty i strony.

Ale co, jeśli chcesz pójść o krok dalej?

Na szczęście edytor bloków pozwala programistom tworzyć własne bloki. Doprowadziło to programistów do stworzenia naprawdę niesamowitych wtyczek blokowych Gutenberga.

Jedną z takich wtyczek jest Ultimate Blocks.

Ostateczne bloki

Ta wtyczka blokowa jest stworzona dla tych, którzy chcą urozmaicić swoje posty na blogu i uczynić je bardziej atrakcyjnymi.

Wypróbuj Ultimate Blocks

Wtyczka zawiera ponad 15 bloków. Niektóre z godnych uwagi bloków to:

  • Filtr zawartości
  • Recenzja
  • Spis treści
  • Wezwanie do działania
  • Kliknij, aby tweetować
  • Udostępnianie społecznościowe
  • Odliczanie

Ultimate Blocks jest niesamowicie łatwy w użyciu i bardzo szybki. Dzięki tej wtyczce możesz dodawać unikalne bloki do swoich postów oraz zwiększać zaangażowanie i udostępnianie społecznościowe.


Wniosek

Na tym kończy się nasz przewodnik po edytorze bloków WordPress. Mam nadzieję, że ten przewodnik pomógł ci lepiej poznać i zrozumieć Gutenberga.

Jeśli jesteś zupełnie nowy w tym edytorze, najlepszą radą, jaką mam dla ciebie, jest wypróbowanie go. Przyzwyczaisz się do korzystania z tego niesamowitego edytora.

A jeśli masz jakiekolwiek pytania dotyczące tego postu, możesz je zadać w sekcji komentarzy poniżej.