Samouczek Gutenberga: Jak korzystać z nowego edytora bloków WordPress

Opublikowany: 2019-04-22

Nazwany na cześć wynalazcy prasy drukarskiej, Johannesa Gutenberga, nowy edytor bloków WordPress Gutenberg zadebiutował w wersji WordPress 5.0 jako domyślny edytor WordPress.

Misja jest prosta: stworzyć nowe doświadczenie pisania i edycji za pomocą WordPressa.

Wyposażony w bloki edytor Gutenberg zapewnia wyjątkowe wrażenia w tworzeniu treści multimedialnych za pomocą WordPress.

Wprowadza wiele funkcji natywnie do edytora, które przy klasycznym edytorze wymagałyby wtyczek do wykonywania zadań.

Za chwilę pokażę Ci, jak korzystać z edytora bloków Gutenberga.

Pracując z wieloma klientami korzystającymi z WordPressa, niewielu było zachwyconych trudnym przejściem do ich edycji.

To prawdopodobnie wyjaśnia, dlaczego miliony użytkowników WordPressa zainstalowały klasyczny edytor, gdy odebrano im wybór wraz z wydaniem Gutenberga.

wordpress-classic-editor-plugin

Jednym uzasadnieniem może być kompatybilność ze starszymi motywami, a innym oburzenie użytkownika lub brak wiedzy na temat korzystania z edytora bloków Gutenberga.

Mam nadzieję, że po przejrzeniu tego artykułu na później poczujesz się komfortowo z edytorem bloków.

Krok po kroku: Jak korzystać z edytora bloków Gutenberga?

Zaczyna się od stworzenia strony lub posta. Coś, co już znasz.

Utwórz stronę lub post za pomocą edytora bloków gutenberg

Kiedy dodajesz nową stronę lub post, pierwszą rzeczą, którą powinieneś zauważyć, jest ten pasek narzędzi.

Pasek narzędzi edytora Gutenberg

Po lewej stronie mamy pasek narzędzi + Dodaj bloki. To jedno z miejsc, w których możesz dodawać bloki do swoich treści.

Blok paska narzędzi edytora Gutenberg

Możesz także dodać blok, klikając poniżej ostatniego bloku, a następnie klikając ikonę +, która się pojawi.

Alternatywnie, najedź kursorem na bloki, pojawi się ikona Dodaj bloki, kliknij ją, aby dodać blok.

Dodanie bloku paska narzędzi edytora Gutenberg

Dalej są przyciski Cofnij i Ponów.

Cofnij blokadę paska narzędzi edytora Gutenberg

Następna ikona na górnym pasku narzędzi pokazuje strukturę treści.

Struktura zawartości paska narzędzi edytora Gutenberg

Dalej jest nawigacja blokowa

Jeśli i kiedy zawartość rośnie z wieloma blokami, możesz przejść do bloków stąd. Fajne, czyż nie.

Pasek narzędzi edytora Gutenberg nawigacja

Po prawej,

Pasek narzędzi edytora Gutenberga po prawej

Są to całkiem proste, Zapisz wersję roboczą, Wyświetl podgląd swojego posta (Otwiera go w nowej karcie) i Opublikuj.

Następna ikona przełącza wyświetlanie ustawień. Wyświetla lub ukrywa odpowiednie okienka.

Wyświetlacz edytora Gutenberga ukryj prawy panel

Jeśli ustawienia są widoczne, kliknij je, aby ukryć szerszy edytor, który nie rozprasza uwagi. Kliknij go ponownie, aby wyświetlić ustawienia.

Prawy panel paska narzędzi edytora Gutenberga jest ukryty

Na końcu paska narzędzi znajdują się trzy pionowe kropki. To pozwala ukryć lub wyświetlić więcej narzędzi i opcji.

Pasek narzędzi edytora Gutenberg ukryj więcej opcji

Co dokładnie możesz zrobić z większą liczbą narzędzi i opcji?

  • Masz pasek narzędzi — dostęp do wszystkich narzędzi blokowania i dokumentowania w jednym miejscu.
  • Tryb reflektorów. Pozwala skupić się na bloku na raz
  • Pełny ekran. Powiększ swój edytor, aby uzyskać całkowicie wolne od rozpraszania wrażenia podczas edycji.
  • Przełączaj się między edytorem wizualnym — tym, co widzisz teraz, a edytorem kodu — jeśli chcesz napisać kod, którego nie mogą obsłużyć bloki Code i HTML.
  • Zarządzaj blokami wielokrotnego użytku
  • Skróty klawiaturowe i
  • Skopiuj całą zawartość w edytorze.

Bloki Gutenberga

Do tej pory widziałeś bloki, ale czym one są?

Podążymy długą drogą, aby zobaczyć, jak działają, i miejmy nadzieję, że wtedy będzie to miało sens i możesz nadać mu definicję opartą na swoim zrozumieniu.

W Gutenbergu istnieje sześć kategorii bloków, w tym najczęściej używane, wspólne bloki, formatowanie, elementy układu, widżety i osadzania.

Edytor Gutenberg dodaje bloki postów

Tworząc treść w klasycznym edytorze wystarczyło wpisać treść w pola tekstowe.

W nowym edytorze wykorzystasz bloki, które zostały zorganizowane według rodzaju treści. Aby dodać treść tekstową, potrzebny jest blok tekst/akapit, blok Images – blok Images, Html, blok HTML.

To coś innego niż klasyczny edytor, w którym wstawiasz całą zawartość w jednym miejscu.

Korzystanie z narzędzi blokowych

Każdy blok ma swoje narzędzia, których możesz używać podczas tworzenia i edycji treści.

W przeciwieństwie do klasycznego edytora, w którym widoczne były wszystkie narzędzia.

Aby uzyskać dostęp do tych narzędzi, kliknij zawartość w bloku. Użyjemy paragrafu/treści, ponieważ jest to ten, z którego często będziesz korzystać.

Narzędzia do blokowania dostępu do edytora Gutenberg

Po kliknięciu tekstu lub treści w bloku nad treścią otwiera się przybornik.

Narzędzia do otwartych bloków Gutenberg

Narzędzia, które zobaczysz, dotyczą wyłącznie bloku, którego używasz, więc nie oczekuj, że zobaczysz te same narzędzia po kliknięciu bloku multimediów.

Na przykład blok akapitu ma narzędzia do formatowania tekstu, wyrównanie do lewej, wyrównanie do środka, wyrównanie do prawej, pogrubienie, kursywa, wstawienie hiperłącza i przekreślenie tekstu.

Plus więcej narzędzi do formatowania, które są dodawane przez inne wtyczki, które instalujesz, aby rozszerzyć domyślną funkcjonalność bloków.

Dwie funkcje zestawu narzędzi blokowych, które przecinają bloki, to „ Przekształć blok ” na początku, a następnie na końcu powinieneś zobaczyć ikonę „ Więcej opcji” – trzy pionowe kropki – która zawiera więcej ustawień bloku z którymi pracujesz.

Przekształć blok Gutenberga

Aby przekształcić blok, kliknij blok, jak widać w bloku akapitu powyżej.

Zakładając, że chcemy przekształcić nasz pierwszy akapit w cytat, kliknij go, a następnie kliknij ikonę Przekształć w, a następnie wybierz nowy blok, do którego chcesz go przekształcić.

Przekształć blok Gutenberga

Przekształcenie bloku akapitu w cytat wygląda teraz tak.

Przekształć blok w cytat

Przycisk Więcej opcji

Drugim przyciskiem zestawu narzędzi blokowych jest ikona „ Więcej opcji ” – trzy pionowe kropki. Kliknij dowolny blok, aby go zobaczyć.

Opcje dodatkowych narzędzi do przekształcania bloków

Dzięki Więcej Opcji możesz zrobić więcej ze swoim blokiem; Ukryj ustawienia bloku, Powiel blok, Wstaw blok przed lub za blokiem poprzedzającym i poprzedzającym, edytuj blok jako HTML, dodaj blok do bloków wielokrotnego użytku i na koniec Usuń lub usuń blok.

Zmiana bezpośredniego linku posta lub strony za pomocą edytora bloków Gutenberg

Kliknij tytuł posta lub strony. Nad nim zostanie wyświetlony link.

Edytor Gutenberg zmienia permalink

Kliknij przycisk Edytuj, a następnie zmodyfikuj łącze, a następnie kliknij Zapisz

Edytor Gutenberg zmienia permalink zapisz

Ustawienia dokumentu i bloku w edytorze bloku Gutenberg

Po prawej stronie każdego postu lub strony Gutenberga znajduje się okienko z dwiema zakładkami.

Okienko dokumentu zawiera ustawienia dla całego dokumentu dla strony lub postu, w tym status i widoczność, autorzy postów, znaczniki, obraz funkcji, dyskusje – aby umożliwić komentowanie, kategorie i ustawienia związane z wtyczkami dla postów i/lub stron.

Ustawienia dokumentu edytora Gutenberg

Okienko bloku zawiera ustawienie specyficzne dla bloku.

Kliknij blok w obszarze zawartości, a następnie w prawym panelu kliknij panel Blokuj.

Ustawienia bloku edytora Gutenberg

Wniosek

Omówiliśmy garść informacji o edytorze Gutenberg Blocks.

Mam nadzieję, że dzięki tej wiedzy wykorzystanie jej do tworzenia i publikowania treści będzie mniej onieśmielające.

Czy używasz nowego edytora bloków? Jakie masz z tym doświadczenie?

Możesz także przekonwertować istniejące posty WordPress na bloki Gutenberga?