Jak korzystać z Gutenberga (edytor WordPress)


jak korzystać z bloków GutenbergaW 2018 roku WordPress zrezygnował ze swojego długoletniego edytora na taki, który nazwano „Gutenberg”.


W przeciwieństwie do starych edytorów, użytkownicy WordPress używają teraz nowoczesnego edytora bloków typu „przeciągnij i upuść” do tworzenia i dostosowywania stron internetowych, publikowania treści oraz sprzedaży swoich usług i produktów online.

Niezależnie od tego, czy jesteś długoletnim użytkownikiem próbującym zrozumieć nowy edytor, czy jesteś nowy w WordPress, ten przewodnik nauczy Cię lin. Nauczysz się:

  • Czym różnią się bloki Gutenberga od klasycznego edytora.
  • Jak używać konstruktora bloków do tworzenia i edytowania stron.
  • Co robią bloki Gutenberga.
  • Jak odblokować dodatkowe ustawienia za pomocą paska bocznego.
  • Jak korzystać z paska narzędzi, aby zwiększyć wydajność.

Classic Editor vs. Gutenberg Blocks

Przejście z klasycznego edytora na bloki Gutenberga to ogromny skok dla WordPress. Zobaczmy, jak ewoluował edytor.

Klasyczny edytor WordPress

Od 2003 do 2018 roku WordPress zapewniał użytkownikom podstawowy edytor tekstu.

WordPress-Classic-Editor

Klasyczny edytor WordPress był typowym edytorem WYSIWYG („to, co widzisz, dostajesz”).

Innymi słowy, wpisałeś treść w otwartym polu, sformatowałeś ją za pomocą dostarczonego paska narzędzi, i mniej więcej tak wyglądał twój tekst w witrynie.

WordPress-WYSIWYG-Editor

Jest to dość prosty interfejs, do którego wielu użytkowników WordPress przyzwyczaiło się przez lata. Ale miało swoje ograniczenia.

Na przykład:

Przykład strony WordPress

W ten sposób treść będzie wyświetlana w witrynie po jej opublikowaniu. Ale możesz tylko potwierdzić, że wszystko zostało poprawnie przetłumaczone z edytora na stronę, używając funkcji „Podgląd”.

Nie było sposobu na napisanie treści w rzeczywistym kontekście strony. Ponadto wymagało pewnej znajomości HTML lub nadmiernego polegania na wtyczkach, aby móc tworzyć bardziej zaawansowane projekty i układy.

W 2018 roku WordPress postanowił naprawić te ograniczenia, wydając nowy edytor WordPress (tj. Gutenberg).

Edytor bloków Gutenberga

Nowy edytor WordPress to edytor bloków typu przeciągnij i upuść.

Gutenberg

Oznacza to, że treść nie jest już zapisywana w jednym głównym edytorze. Poszczególne bloki są upuszczane na miejsce, aby zbudować zawartość strony.

Bloki Gutenberga

Po wybraniu każdego bloku ma on unikalny pasek narzędzi. Pozwala to na usprawnienie i spersonalizowane edytowanie, ponieważ wyświetlane są tylko potrzebne Ci narzędzia redakcyjne.

Edytor Gutenberga znacznie ułatwił dodawanie treści i układów, które w innym przypadku byłyby zbyt czasochłonne lub trudne dla początkującego WordPressa.

Więcej przykładów bloków Gutenberga

Co więcej, nie ma już gry w zgadywanie. To, co tworzysz w edytorze bloków, to sposób, w jaki pojawia się na Twojej stronie. Wszystkie czcionki, styl i układy są zgodne:

WordPress-Page-Example-with-Gutenberg

Czy jeden edytor WordPress jest lepszy od drugiego??

Jeśli chodzi o to, co jest lepsze – klasyczny edytor lub Gutenberg – musisz to sobie wyobrazić.

Chociaż WordPress jest automatycznie instalowany z Gutenbergiem, użytkownicy mogą go zainstalować wtyczka Classic Editor jeśli nie są jeszcze gotowi do przejścia do edytora bloków.

Dostępne są również inne opcje dodatków do edytora. Elementor i Beaver Builder to dwie z bardziej popularnych alternatywnych opcji edytora „przeciągnij i upuść”, kategorie bloków
choć najlepiej nadają się dla profesjonalnych projektantów i programistów, którzy muszą odblokować więcej funkcji.

Póki co, zanurzmy się głębiej w Gutenberga i przedstawmy lepiej, czego można oczekiwać od edytora przeciągania i upuszczania WordPress.

Jak korzystać z edytora bloków Gutenberga

Przyjrzyjmy się edytorowi bloków Gutenberga, konfigurując nową stronę (lub post).

Zacznij od menu WordPress po lewej stronie ekranu. Jeśli chcesz utworzyć nową stronę internetową, najedź wskaźnikiem myszy na „Strony” i wybierz „Dodaj nowy”. Jeśli chcesz utworzyć nowy post na blogu, najedź wskaźnikiem myszy na „Posty” i wybierz „Dodaj nowy”.

WordPress-Add-New-Page

Dodaj tytuł

Po utworzeniu nowej strony lub postu nadaj jej tytuł w bloku „Dodaj tytuł”:

Gutenberg-Title-Block

Stwórz swój pierwszy blok

Akapity zazwyczaj zawierają większość treści, które umieszczamy na stronie internetowej, dlatego pierwszy blok, który daje nam Gutenberg, to zawsze blok akapitów:

Gutenberg-Nowy-akapit-blok

Jeśli chcesz zacząć od akapitu, dodaj kursor do pustego bloku z napisem „Rozpocznij pisanie lub wpisz /, aby wybrać blok”. Podczas pisania treść będzie wypełniać blok.

Dostosuj zawartość w bloku

Aby dostosować styl akapitu, użyj paska narzędzi, który pojawia się tuż nad nim.

Wyrównanie

W przypadku większości bloków Gutenberga możesz zmienić wyrównanie zawartości wewnątrz bloku:

Wyrównanie Gutenberga

Lewy jest domyślny. Możesz także wyśrodkować lub wyrównać zawartość do prawej.

Formatowanie

Za każdym razem, gdy w bloku jest tekst, możesz go sformatować pogrubioną czcionką:

Gutenberg-Paragraph-Bold

Wpisz tekst kursywą:

Gutenberg-Akapit-kursywa

Lub dodaj hiperłącze:

Link Gutenberga

Jeśli chcesz, aby linki były otwarte w nowym oknie przeglądarki, kliknij strzałkę w dół na pasku hiperłączy. Po zakończeniu wprowadzania zmian kliknij strzałkę „Return”, aby zapisać link.

Dodatkowe opcje stylu

Jeśli klikniesz strzałkę w dół na pasku narzędzi, znajdziesz dodatkowe opcje stylizacji tekstu:

Gutenberg-More-Text-Options

„Kod” stylizuje tekst tak, jakby był napisany w edytorze kodu:

Kod ust. Gutenberga

„Obraz w linii” umożliwia zawinięcie tekstu wokół obrazu:

Gutenberg-Paragraph-InlineImage

Jak widać, nie jest to skuteczny sposób łączenia obrazów i tekstu obok siebie w Gutenberg. (Później omówimy inny sposób).

Ostatnia opcja tutaj umożliwia dodanie przekreślenia poprzez podświetlony tekst:

Przekreślenie Gutenberga

Więcej opcji blokowania

Ostatni przycisk na pasku narzędzi zawsze pokazuje więcej opcji blokowania:

Gutenberg-More-Block-Options

Te opcje będą takie same bez względu na rodzaj edytowanego bloku.

Podsumujmy szybko:

  • Ukryj ustawienia bloku: Sprawia, że ​​pasek boczny po prawej zniknie.
  • Duplikować: Tworzy dokładną replikę tego bloku.
  • Wstaw przed: Dodaje nowy pusty blok powyżej tego.
  • Wstaw po: Dodaje nowy pusty blok poniżej tego.
  • Edytuj jako HTML: Zamienia blok w edytor kodu, jeśli chcesz pisać w HTML.
  • Dodaj do bloków wielokrotnego użytku: Zapisuje blok, aby można go było użyć w innym miejscu witryny.
  • Usuń blok: Usuwa blok.

Przekształć blok

Na pasku narzędzi jest jeszcze jeden przycisk, o którym musisz wiedzieć:

Bloki przełączników Gutenberga

Ten przycisk nie zawsze wygląda tak, więc pamiętaj, że pierwszy przycisk pozwala przekształcić bieżący blok w pokrewny.

Na przykład możesz zamienić blok tekstowy, taki jak Akapit, na Nagłówek, Listę lub Cytat. Nie można jednak przekształcić czegoś w rodzaju akapitu w obraz lub linię oddzielającą. Potrzebujesz do tego nowego bloku.

Dodaj nowy blok

Aby dodać nowy blok do swojej strony, masz wiele opcji.

Wstaw przed / po

Widziałeś już opcje Wstaw przed / Wstaw po na pasku narzędzi bloku. To jeden ze sposobów, aby to zrobić.

Jeśli klikniesz poza istniejący blok i najedziesz na niego, zobaczysz mały znak plus:

Gutenberg-Add-Block-Cross

Po kliknięciu zobaczysz swoje bloki:

Gutenberg-Add-Block-Plus-Sign

Wybierz ten, który chcesz dodać nowy blok powyżej tego, który już masz.

Jeśli najedziesz myszką na dolną część bloku, zobaczysz ten sam znak plus. Jedyną różnicą jest to, że doda nowy blok poniżej tego, który masz.

Użyj klawiatury

Innym sposobem dodania nowego bloku jest naciśnięcie klawisza „Return” na klawiaturze:

Gutenberg-Add-Block-Enter

Spowoduje to natychmiastowe dodanie nowego bloku akapitu do strony.

Jeśli chcesz zmienić go na inny rodzaj bloku, możesz użyć znaku plus po lewej stronie nowego bloku:

Gutenberg-Change-New-Block

Możesz też wpisać ukośnik (/), a następnie nazwę bloku, którego chcesz użyć:

Gutenberg-Change-Block-Slash

Na przykład, jeśli chcesz dodać obraz, wpisz „/ image”. Opcja blokowania zostanie automatycznie wypełniona podczas wpisywania pasującej nazwy.

Dodaj blok z paska narzędzi

Zawsze możesz po prostu użyć podstawowej funkcji dodawania bloku na pasku narzędzi:

Gutenberg-Add-Block

Przewiń opcje lub wpisz nazwę bloku, którego szukasz.

Przenieś blok

Gdy zaczniesz tworzyć bloki, możesz uznać, że nie jesteś zadowolony z kolejności ich wyświetlania. A może dodałeś blok powyżej, kiedy powinien być poniżej.

Nie ma potrzeby usuwania bloków ani wycinania i wklejania treści z jednego bloku do drugiego. Rozwiązanie jest proste.

Gutenberg to edytor bloków typu przeciągnij i upuść. Oznacza to, że możesz z łatwością przenosić bloki w dowolne miejsce.

Można to zrobić na dwa sposoby.

Użyj strzałek ruchu

Pierwszą opcją jest użycie strzałek ruchu po lewej stronie każdego bloku. Najedź kursorem na blok, który chcesz przenieść, a zobaczysz strzałkę w górę i w dół:

Gutenberg-Move-Arrows

Jeśli wszystko, co chcesz zrobić, to przesunąć blok raz w górę lub w dół, ta opcja działa dobrze.

Blok Gutenberga

Użyj przeciągnij i upuść

Jeśli chcesz dokonać bardziej drastycznego przestawienia bloków, powinieneś użyć przeciągania i upuszczania.

Znajduje się w tym samym miejscu co strzały. Najedź kursorem na blok, który chcesz przenieść, i chwyć za kropki pojawiające się na środku. Zobaczysz, jak kursor zmienia się w rękę, gdy:

Gutenberg-Grab-Drag-and-Drop

Przenosząc blok do nowej części strony, upewnij się, że przed upuszczeniem pojawiła się ciemna linia:

Gutenberg-Move-Block

Dzięki temu wiesz, że przenosisz blok na dostępną przestrzeń. Bez tej linii przeciąganie i upuszczanie nie działa.

Usuń blok

Jeśli zdecydujesz, że chcesz całkowicie usunąć blok, masz również do tego opcje.

Widziałeś już jedną z nich. Jest w dodatkowych opcjach twojego bloku. Wystarczy kliknąć „Usuń blok”, a zostanie on usunięty.

Zawsze możesz go również usunąć w staromodny sposób. Umieść kursor w bloku i użyj przycisku „Usuń” na klawiaturze, aby go usunąć.

Pamiętaj jednak, że jeśli jest to blok tekstowy, musisz najpierw usunąć zawartość, zanim będzie można ją usunąć w ten sposób. Do wszystkiego innego – obrazu, osadzonego widżetu itp. – wystarczy użyć klawisza „Usuń”.

Możesz także podświetlić blok (przeciągając kursor nad nim), a następnie nacisnąć klawisz „Usuń”. Jest to przydatne, jeśli chcesz zaznaczyć i usunąć więcej niż jeden blok na raz.

Utwórz blok wielokrotnego użytku

Bloki wielokrotnego użytku przydają się, gdy chcesz utworzyć element, który może być używany w całej witrynie, np. Blok promocyjny do postów na blogu lub wezwanie do działania.

Gutenberg-Create-Reusable-Block

Zamiast próbować odtworzyć blok na stronach, które musi przejść, otwórz opcje bloków i kliknij „Dodaj do bloków wielokrotnego użytku”. Następnie nadaj mu nazwę:

Nazwa Gutenberga wielokrotnego użytku

Po zapisaniu będziesz mógł je odzyskać i używać w taki sam sposób, jak w przypadku dowolnego bloku Gutenberga. Znajdziesz go w nowej kategorii o nazwie „Wielokrotnego użytku”:

Kategoria Gutenberga wielokrotnego użytku

Wycieczka po blokach Gutenberga

Klasyczny edytor WordPress pozostawił wiele do życzenia, jeśli chodzi o pomoc użytkownikom w tworzeniu złożonych treści i układów. Bloki Gutenberga usuwają tę blokadę drogi.

Zapoznajmy się z blokami:

Blokuj kategorie

WordPress wykonał niezłą robotę, organizując swoje bloki w kategorie.

Wspólne bloki

Oto twoje wspólne bloki:

Wspólne bloki

Tutaj znajdziesz podstawowe elementy tekstowe i wizualne, których używasz na stronie.

Bloki formatowania

Oto twoje bloki formatowania:

Bloki formatowania

Większość z nich to bloki przyjazne dla programistów, więc możesz ich nie potrzebować. Przydają się bloki tabeli i wyceny.

Bloki układu

Oto twoje bloki układu:

Bloki układu

Jeśli chcesz dodać przerwy do treści (na przykład z dużą spacją lub linią separatora) lub elementy specjalne (jak przycisk), znajdziesz tutaj te rzeczy.

Bloki widżetów

Oto twoje widżety:

Bloki widżetów

W większości są to elementy, które powinny wchodzić na pasek boczny bloga, a nie pojawiać się na stronach. Jedynymi wyjątkami, które znajdziesz, są bloki tworzone przez inne wtyczki, takie jak ten przykład WPForms.

Osadza bloki

Oto twoje osadzenia:

Osadza bloki

Użyjesz ich do przeniesienia treści z innych platform. Jest to dobre do osadzania takich rzeczy jak filmy z YouTube, klipy SoundCloud i posty na Twitterze.

Najczęściej używane bloki Gutenberga

Jak widać, dostępnych jest kilkadziesiąt bloków Gutenberga. To powiedziawszy, istnieją pewne elementy, których wszyscy używają do tworzenia stron lub postów w WordPress, więc zacznij od nauki podstaw:

Blok akapitu

Użyj bloku Akapit, aby dodać zwykły tekst do swojej strony.

Blok akapitowy

Blok nagłówka

Użyj bloku Nagłówek, aby dodać nagłówek do swojej strony.

Heading-Block

Umożliwiają one wprowadzanie nowych tematów na stronie, jednocześnie ułatwiając czytanie treści. Przyciski H2, H3 i H4 pozwalają również ustalić hierarchię nagłówków stron.

Blok listy

Użyj bloku Lista, aby dodać listę punktowaną lub numerowaną do strony:

Blok listy

Jest to również przydatne do poprawy czytelności.

Blok obrazów

Użyj bloku obrazu, aby dodać obraz do swojej strony.

Blok obrazu

Możesz przesłać obraz z dysku lub wybrać taki, który już istnieje w bibliotece multimediów.

Blok wideo

Użyj bloku wideo, aby osadzić obraz na swojej stronie.

Blok wideo

Możesz przesłać plik wideo, wybrać plik ze swojej biblioteki lub pobrać go z linku.

Ponieważ filmy zajmują dużo miejsca, najlepszą opcją jest zapisanie pliku na platformie udostępniania wideo, takiej jak Vimeo lub YouTube. Następnie umieść go za pomocą linku.

Nie użyjesz do tego bloku wideo. Zamiast tego poszukaj odpowiedniego osadzenia.

YouTube ma jeden:

Osadzanie na YouTube

Podobnie jak Vimeo:

Vimeo-Embed

Powinieneś zrobić to samo dla wszystkich plików audio (takich jak podcasty lub ścieżki dźwiękowe), które chcesz dodać do strony. Aby to zrobić, użyj bloku audio lub odpowiedniego osadzenia (jak w przypadku Spotify).

Blok przycisków

Użyj bloku przycisków, aby skierować odwiedzających lub czytelników do podjęcia działań:

Blok przycisków

Może to przekierować ich do: „Zaplanuj teraz”, „Zarejestruj się”, „Czytaj więcej” itp.

Blok multimediów i tekstu

Jak wspomniano wcześniej, opcja Obraz w wierszu w bloku akapitu jest nieefektywnym sposobem scalania tekstu i obrazów. Zamiast tego użyj bloku Media i Text, aby to zrobić:

Blok multimediów i tekstu

Blok kolumn

Innym sposobem umieszczenia dwóch różnych bloków (tego samego lub innego typu) obok siebie jest użycie bloku Kolumny:

Blok kolumny

Aby dodać dodatkowe kolumny po prawej lub lewej stronie, najedź kursorem na bloki wewnątrz kolumny i naciśnij znak plus. To tak samo, jak dodanie nowego bloku, tylko to doda je poziomo.

Bloki osadzania w mediach społecznościowych

Zamiast używać kodu do umieszczenia na stronie w mediach społecznościowych, aby umieścić post na swojej stronie, dodaj link do wpisu tutaj:

Media społecznościowe

Istnieją bloki do osadzania na Facebooku, Twitterze i Instagramie, więc znajdź blok do umieszczania na stronie, który odpowiada Twojemu wpisowi w mediach społecznościowych.

Klasyczny blok

Klasyczny blok pozwala kontynuować tworzenie treści w WordPressie za pomocą klasycznego edytora:

Gutenberg-Classic-Block

Klasyczny blok pojawia się także za każdym razem, gdy strona przechodzi z klasycznego edytora do edytora Gutenberga. Gutenberg nie próbuje automatycznie konwertować tekstu na własne bloki. Po prostu umieszcza je w klasycznym interfejsie edytora.

Jeśli chcesz przekonwertować swój klasyczny blok na bloki Gutenberga, przejdź do „Więcej opcji” i wybierz „Konwertuj na bloki”:

Bloki Gutenberga

Dołożą wszelkich starań, aby przekonwertować każdy element w edytorze do odpowiedniego bloku:

Gutenberg-Converted-Blocks

Pamiętaj tylko, aby przejrzeć wygenerowane bloki pod kątem błędów przed zapisaniem zmian.

Bloki wtyczek WordPress

Większość popularnych wtyczek używanych przez użytkowników WordPress jest kompatybilna z Gutenberg. W niektórych przypadkach wtyczki te utworzyły specjalne bloki, które pojawiają się w edytorze.

Na przykład, jeśli używasz wtyczki formularza kontaktowego, takiej jak WPForms, powinieneś znaleźć dla niego odpowiedni blok:

WPForms-Block

Po prostu utwórz formularz we wtyczce, a następnie znajdź go w podanym tutaj menu rozwijanym. Nie musisz już wyszukiwać i wklejać skrótów formularzy.

Yoast, popularna wtyczka SEO, to kolejna, która dodała nowe bloki do Gutenberga:

Yoast-Blocks

WooCommerce, Rozwiązanie eCommerce WordPressa zrobiło to samo:

WooCommerce-Blocks

Istnieją również „ostateczne” wtyczki Gutenberga, które dodają wiele nowych bloków do twojego konstruktora, na przykład Najlepsze dodatki dla Gutenberga:

Ultimate-Addons-Gutenberg

Te typy wtyczek rozszerzają funkcjonalność twojego konstruktora bloków. Jeśli tworzysz witrynę internetową, która wymaga specjalnych elementów – takich jak Mapy Google, bloki referencyjne lub funkcje eCommerce – możesz dodać je do Gutenberga za pomocą takich wtyczek.

Omówienie paska bocznego dokumentu i bloku

Teraz, gdy masz już edytor bloków, zwróć naszą uwagę na dokument i pasek boczny bloku.

Gdy kursor znajduje się w bloku tytułowym lub gdzieś na stronie, na której blok nie istnieje, pasek boczny wskazuje ustawienia dokumentu:

Pasek boczny dokumentu

Pozwalają one kontrolować takie rzeczy, jak stan i wygląd strony.

Oto najważniejsze, które musisz wiedzieć:

Status i widoczność

Status i widocznośćW tym panelu możesz określić, kto może zobaczyć stronę (publiczną, prywatną lub chronioną hasłem), a także kiedy zostanie opublikowana (jeśli nie natychmiast). Jeśli chcesz całkowicie usunąć stronę. Ty też możesz to zrobić tutaj.

PermalinkUżyj tego panelu, aby zmienić ślimak (identyfikujący fragment adresu URL). Na przykład:

https://mywebsite.com/gutenberg-block-builder /

Przedstawiony obrazPolecany obraz to miniatura, którą ludzie widzą, gdy posty na blogu pojawiają się w głównym kanale blogu. Tego właśnie używają platformy mediów społecznościowych podczas wyświetlania podglądu linków.

Kategorie

KategorieTa opcja jest dostępna tylko dla postów na blogu. Użyj tego, aby utrzymać uporządkowane tematy.

Tagi

TagiTo kolejne ustawienie dostępne tylko dla postów na blogu. Użyj tego, aby dodać słowa kluczowe pojawiające się w Twoim poście i pomóc czytelnikom znaleźć treść na pokrewne tematy.

Gdy kursor zostanie umieszczony w jednym z bloków na stronie (oprócz tytułu), pasek boczny przełączy się na edytor bloków:

Blok boczny

Ten pasek boczny udostępnia dodatkowe opcje edycji bloków, jeśli chcesz. Pasek boczny bloku zmieni się w zależności od rodzaju bloku, nad którym pracujesz.

Na przykład pasek boczny akapitu pokazuje opcje edycji dla:

Pasek boczny bloku akapitów

Możesz dostosować rozmiar tekstu, a także kolor tekstu lub tła bloku. Jeśli wiesz, jak korzystać z klas CSS, możesz dodatkowo dostosować wygląd bloku za pomocą „Ustawień zaawansowanych”.

Z drugiej strony pasek boczny obrazu udostępnia następujące ustawienia:

Blok boczny obrazu

Możesz dodać tekst alternatywny do obrazu (ważny dla SEO), zmienić rozmiar obrazu i połączyć obraz ze stroną internetową.

Niektóre bloki nie oferują żadnych dodatkowych ustawień na pasku bocznym, takich jak osadzanie na Twitterze:

Blok boczny na Twitterze

Jedyne, co możesz zrobić, to utworzyć niestandardową klasę CSS w „Ustawieniach zaawansowanych”.

Konkluzja: jeśli kiedykolwiek wydaje Ci się, że nie możesz w pełni edytować bloku za pomocą paska narzędzi bloków, sprawdź pasek boczny, aby uzyskać dodatkowe opcje.

Co zrobić z paskiem narzędzi?

Ostatnią częścią edytora, z którą musisz się zapoznać, jest pasek narzędzi umieszczony nad nim:

Pasek narzędzi Gutenberga

Może to wyglądać jak miejsce do przechowywania przycisków „Podgląd” i „Opublikuj”, ale jest o wiele więcej możliwości i powinien użyj paska narzędzi dla.

Przejrzyjmy podstawowe informacje:

Bloki

Pierwszy przycisk na pasku narzędzi to miejsce, w którym można uzyskać dostęp do nowych bloków:

Bloki paska narzędzi Gutenberga

Cofnij / Ponów

Następne dwa przyciski pozwalają cofnąć (strzałka skierowana w lewo) lub powtórzyć (strzałka skierowana w prawo) ostatnią zmianę wprowadzoną na stronie:

Gutenberg-Toolbar-Undo

Informacja o stronie

Dla tych, którzy chcą tworzyć strony, które będą łatwe do przeglądania przez odwiedzających, przycisk „i” (informacje) daje przegląd zawartości:

Gutenberg-Toolbar-Info

Zobaczysz:

  • Ile słów napisałeś.
  • Ile jest nagłówków, z podziałem tytułów poniżej.
  • Ile jest akapitów.
  • Ile wykorzystałeś bloków.

Najważniejsze informacje, na których należy się skupić, to liczba słów i nagłówków.

Struktura strony

Następna część paska narzędzi ujawnia każdy z bloków użytych do utworzenia strony:

Gutenberg-Block-Navigation

Użyj tego, aby natychmiast przewinąć do bloku, nad którym chcesz pracować. Jest to przydatne do edytowania treści na dłuższych stronach i postach.

Zapisz ustawienia

Tych pierwszych trzech przycisków będziesz używać na każdej tworzonej stronie lub poście:

Ustawienia Gutenberga

Użyj „Zapisz wersję roboczą”, aby prywatnie zapisać zmiany podczas pracy na stronie.

Użyj „Podglądu”, aby wyświetlić stronę w swojej witrynie.

Użyj „Publikuj”, aby przenieść swoją stronę na działającą witrynę. Po opublikowaniu strony przycisk zmieni się na „Aktualizuj”. Użyj tego, aby zapisać i wypchnąć nowe wersje swoich stron na stronę.

Ustawienia

Po kliknięciu ikony koła zębatego (ustawień) ukrywa lub pokazuje pasek boczny Gutenberga. Tak to wygląda po wyłączeniu:

Gutenberg-Toolbar-Ustawienia-Wyłączone

Tak to wygląda po włączeniu:

Gutenberg-Toolbar-Settings-Enabled

Więcej opcji

Ostatni przycisk na pasku narzędzi ujawnia dodatkowe opcje i narzędzia. Użyj tego, jeśli chcesz spersonalizować swój obszar roboczy Gutenberg.

Gutenberg-Toolbar-Więcej-Opcje

Widok

Pierwszy zestaw opcji dotyczących „Widoku”:

Widok paska narzędzi Gutenberga

„Górny pasek narzędzi” przesuwa pasek narzędzi poza bloki i umieszcza go na górze ekranu:

Pasek narzędzi Gutenberga

Opcje edycji wciąż się zmieniają w zależności od wybranego bloku. Jedyna różnica polega na tym, że teraz znajduje się tylko u góry strony.

„Tryb reflektora” wycisza wszystkie nieużywane bloki:

Tryb reflektora Gutenberga

Jeśli potrzebujesz pomocy w koncentrowaniu się na jednym bloku na raz, jest to przydatne narzędzie do włączenia.

„Tryb pełnoekranowy” to wolny od rozpraszania tryb pisania Gutenberga:

Tryb pełnoekranowy Gutenberga

Usuwa menu WordPress na górze i po lewej stronie, a także pasek boczny Gutenberga po prawej stronie.

Tryb edytora

Następny zestaw opcji dotyczy trybu edytora.

Gutenberg-Options-Editor

Domyślnie Gutenberg umieszcza użytkowników w „Edytorze wizualnym”.

Jeśli wolisz napisać stronę w formacie HTML, możesz przejść do „Edytora kodu”:

Gutenberg-Code-Editor

Jednak bardziej skutecznym i czystszym sposobem edytowania bloków w HTML jest obsługa go indywidualnie (ponieważ prawdopodobnie nie musisz edytować kodu całej strony).

Dostęp do edytora kodu można uzyskać pod „Edytuj jako HTML”:

Gutenberg-Edit-HTML

Spowoduje to konwersję bloku do HTML:

Gutenberg-HTML-Block

Edytuj go według własnego uznania. Jeśli chcesz przekonwertować go z powrotem do trybu wizualnego, otwórz opcje bloku i wybierz „Edytuj wizualnie”:

Gutenberg-Edycja-Wizualnie

Przybory

Gutenberg jest również wyposażony w zestaw narzędzi, które pozwalają usprawnić korzystanie z edytora:

Narzędzia Gutenberga

Pierwszym narzędziem jest „Block Manager”:

Gutenberg-Block-Manager

W przeciwieństwie do narzędzia do nawigacji po blokach, które widzieliśmy wcześniej, to narzędzie umożliwia wyłączenie wszystkich bloków, których nie używasz. W ten sposób, kiedy przychodzi czas na poszukiwanie nowego bloku, nie musisz przesiewać bloków, których nigdy nie będziesz używać.

„Zarządzaj blokami wielokrotnego użytku” przeniesie Cię do edytora bloków wielokrotnego użytku:

Bloki wielokrotnego użytku Gutenberga

Tutaj będą przechowywane zapisane bloki. Aby edytować kopię rodzica bloku (lub całkowicie utworzyć nową), zrób to tutaj.

Chociaż Gutenberg z pewnością ułatwił tworzenie treści w WordPressie, niektóre działania mogą być uciążliwe. Korzystając ze „Skrótów” Gutenberga, możesz cofać ostatnią edycję, powielać blok, wyróżniać wyróżniony tekst i zapisywać zmiany za pomocą samej klawiatury.

Skróty klawiszowe Gutenberga

Wszystko, co robi opcja „Kopiuj zawartość”, polega na podświetleniu i skopiowaniu wszystkich bloków na stronie. Użyj tego, aby utworzyć nową stronę o podobnej treści i wyglądzie. Wystarczy przejść do opcji Strony> Dodaj nowy, a następnie wkleić bloki na pustej stronie.

Ostatnia opcja nazywa się „Opcje”. Jednak tak naprawdę umożliwia dezaktywację niektórych części ustawień dokumentu na pasku bocznym:

Opcje paska bocznego Gutenberga

Ponownie, jeśli okaże się, że istnieją pewne części edytora, których nie używasz (np. Atrybuty strony), wyłącz je tutaj, aby nie odwracały uwagi od elementów, których musisz użyć.

Zakończyć

Ponieważ WordPress korzystał z tego samego edytora od pierwszego dnia, po wprowadzeniu Gutenberga pojawił się pewien luz.

Ale jeśli spojrzysz na konkurencję „przeciągnij i upuść” gromadzącą się wokół WordPressa (Wix, Shopify, Squarespace itp.), Nadszedł czas na zmianę.

Ta ewolucja edytora opłaciła się, umożliwiając WordPressowi obsługę użytkowników na wszystkich poziomach. Użytkownicy korzystają teraz z następujących korzyści związanych z budowaniem stron internetowych za pomocą edytora bloków:

  • Spersonalizowany widok edytora, który zwiększa produktywność.
  • Łatwiejsze tworzenie i dostosowywanie treści.
  • Bardziej zaawansowane tworzenie treści bez wcześniejszej wiedzy technicznej.
  • Bloki wielokrotnego użytku przyspieszają projektowanie i zapewniają spójność w całym miejscu.
  • Łatwiejsze dodawanie i konfigurowanie elementów konwersji (takich jak przyciski i formularze wezwania do działania).
  • Popularne wtyczki i motywy są kompatybilne z Gutenberg.
  • Szybszy czas na uruchomienie.

Od 2022 roku klasyczny edytor nie będzie już dostępny. Teraz jest idealny czas, aby dowiedzieć się, jak sprawić, by Gutenberg działał dla Ciebie.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map