Jak zacząć z Gutenbergiem

Opublikowany: 2019-06-11

Jeśli jesteś ciekawy nowego edytora WordPress, Gutenberg, ten post jest dla Ciebie.

Gutenberg jest nowym dzieckiem w bloku dla edytora WordPress. Został opracowany na GitHub przy użyciu WordPress REST API , JavaScript i React . Edytor wydaje się nowoczesny, łatwy w obsłudze i bardzo skromny. Porównywanie Gutenberga z Edytorem Klasycznym jest jak porównywanie dwóch domów: jednego z dużą ilością mebli i drugiego prawie żadnego. Nawet jeśli uważasz, że minimalistyczny styl jest nieco zniechęcający, gdy zaczniesz używać Gutenberga, ogólne wrażenia mogą być przyjemne.

Oczywiście Gutenberg ma swoje wady i jeśli jesteś bardzo doświadczony w Edytorze klasycznym, możesz odnieść wrażenie, że praca z Gutenbergiem wydaje się krokiem wstecz.

W tym artykule postaram się omówić jak najwięcej informacji i dać jasny obraz tego, czego można się spodziewać po Gutenbergu. Omówię zalety i wady , a także sposoby poprawy tych wad, aby przejście było płynniejsze.

Aby rozpocząć, możesz użyć Gutenberga, aktualizując WordPressa do ostatniej wersji . Gutenberg jest teraz częścią rdzenia WordPressa. Jeśli nadal masz wtyczkę Classic Editor , możesz zacząć od jej usunięcia i przygotowania do korzystania z Gutenberga.

Pierwsze kroki

Gutenberg i Divi przeszli długą drogę integracji. Na wczesnych etapach nie można było zapisać posta Divi z Gutenbergiem bez ryzyka utraty całej zawartości. Dziś tego typu problemy zniknęły. Możesz łatwo zapisać post utworzony za pomocą Divi na Gutenbergu i nadal będziesz mógł go edytować za pomocą Divi. To samo dotyczy Elementora.

Funkcjonalność Gutenberga jest teraz bezproblemowa, możesz mieć Divi, Elementor i Gutenberg, które działają doskonale w tej samej witrynie, a nawet możesz tworzyć różne treści przy użyciu różnych kreatorów bez żadnych problemów. Oczywiście, o ile nie przełączysz się z powrotem do edytora Gutenberg podczas korzystania z Divi, a następnie wymusisz zapisanie, w którym to przypadku z pewnością nadpisze zawartość Divi, to samo stanie się, jeśli spróbujesz odrzucić i zapisać zawartość za pomocą innego konstruktora.

Ogólna struktura i bloki

Gutenberg składa się z ogólnej struktury bloków, każdy blok jest reprezentowany i podzielony przez cechy HTML, więc na przykład, jeśli masz tytuł H2 i akapit, zobaczysz 2 oddzielne bloki. Ideą Gutenberga jest oddzielenie bloków według klas HTML, choć na pierwszy rzut oka wydaje się to dziwne, ma to swoje zalety.

Aby wyświetlić opcje edycji i stylizacji, najedź myszą na blok. Spowoduje to wyświetlenie różnych opcji specyficznych dla bloku, takich jak oferowanie tytułów od H1 do H6 lub różnych stylów tekstu akapitowego, takich jak pogrubienie, kursywa, łącza i tak dalej.

Przycisk Dodaj nowy blok

Nieco w przeciwieństwie do płynnego budowania edytorów, przycisk Dodaj nowy blok jest nieco poza zasięgiem. Aby dodać do układu, musisz przesunąć kursor myszy do lewego górnego rogu i kliknąć ikonę plusa.
Pozycja nowego przycisku bloku jest nieco na uboczu. Po dodaniu nowego bloku pamiętaj, że pozycja drugiego przycisku Dodaj blok pojawi się bezpośrednio po ostatnim bloku.

Problem z minimalistycznym edytorem Gutenberga polega na tym, że drugi przycisk może się zgubić . Musisz najechać kursorem myszy na puste miejsce, aby pojawił się przycisk. Dzieje się tak tylko podczas dodawania nowych modułów, które nie są akapitami. Akapity są łatwo dodawane za pomocą „enter” z klawiatury.

Zarządzanie blokami

Gdy zaczniesz rozumieć bloki, zobaczysz, że Gutenberg to znacznie więcej niż tylko pusta przestrzeń z kilkoma przyciskami.
Gutenberg instaluje domyślnie ze wszystkimi rodzajami bloków, a każdy nowy blok dodany przez wtyczki lub motywy będzie wyświetlany w strukturze dodawania nowych bloków.
Wreszcie, po dodaniu bloku, możesz go edytować, sklonować lub usunąć. Funkcjonalność ta jest ukryta pod 3 kropkami po prawej stronie. Kliknij je, aby otworzyć menu edycji bloku. Na szczęście, jak widać, zdecydowana większość opcji ma skrót, dzięki czemu można je łatwo zapamiętać. Otwiera to możliwości łatwego klonowania bloków i przenoszenia ich.

Po dodaniu bloków możesz przesuwać je po zawartości, w górę iw dół za pomocą strzałek i tak dalej.

Pasek boczny

Pasek boczny jest najłatwiejszym ze wszystkich ustawień dla Gutenberga. Będziesz miał 2 bloki na pasku bocznym, sam układ, z identycznymi informacjami, które można znaleźć w Edytorze klasycznym i na karcie Blok.

Zakładka Blok wyświetla szczegółowe opcje dla konkretnego bloku. W tym przykładzie możemy połączyć obrazy z plikiem multimedialnym i wybrać liczbę kolumn, które chcemy wyświetlić. Każdy moduł ma własny zestaw konfigurowalnych opcji na karcie Blok na pasku bocznym.

Posuwanie się do przodu

Najlepszym sposobem podejścia do Gutenberga jest zabawa i pisanie jak najwięcej. Użycie klawisza Enter to najlepszy sposób na rozpoczęcie nowego bloku. Na przykład, jeśli zdecydujesz się dodać nowy blok akapitu, będziesz mieć możliwość przekonwertowania tego bloku na obraz lub galerię obrazów.

Tworzenie nowych bloków za pomocą klawisza Enter to najlepszy sposób na pominięcie ukrytego przycisku „nowy blok”. Próba dodania go za pomocą myszy poważnie wpłynie na Twoje umiejętności edytowania. Tworząc nowe bloki za pomocą klawisza Enter, możesz później dodać obraz, po prostu wybierając ikonę obrazu po prawej stronie tego bloku.

Pamiętaj jednak, że Gutenberg nie ma klawisza skrótu do dodawania nowych obrazów , takiego jak Edytor klasyczny . To zmusza cię do używania myszy, co całkowicie przerywa przepływ pisania. Gdyby Gutenberg dodał skrót do wstawiania obrazów i galerii, mogłoby to szybko sprawić, że stary Edytor klasyczny stanie się przestarzały.

Tworząc akapity, tytuły i galerie obrazów, możesz zobaczyć, dlaczego łatwiej jest pracować z Gutenbergiem, gdy masz mnóstwo bloków wymagających ponownego ułożenia. Gdy masz gotowy artykuł, możesz go opublikować i cieszyć się pierwszym postem Gutenberga. Pamiętaj tylko, że gdy zaczniesz tworzyć posty Gutenberga , nie możesz się cofnąć.

Gutenberg dodaje kod do każdego posta, który sprawi, że będzie wyglądał okropnie, jeśli później zdecydujesz się go wyłączyć, więc nawet jeśli możesz zacząć z nim eksperymentować, pamiętaj tylko, że jeśli zaczniesz go używać na swojej stronie, nie będziesz mógł przywrócić bez konieczności późniejszej ręcznej modyfikacji każdego postu.

Dodatkowe cechy

Ujednolicony pasek narzędzi i tryb Spotlight to dwa miłe dodatki do Gutenberga. Tryb ujednolicony robi dokładnie to, co mówi, ujednolica pasek narzędzi na górze dla wszystkich modułów, więc za każdym razem, gdy edytujesz moduł, cała zawartość paska narzędzi będzie na górze, jest to naprawdę przydatne i naśladuje edytor klasyczny w jakiś sposób.

Z drugiej strony funkcja Spotlight przyciemnia jasność całej zawartości z wyjątkiem edytowanej sekcji. Jest to przydatne, gdy masz bardzo złożony artykuł i musisz skoncentrować się na tym, co robisz. Dostęp do obu trybów można uzyskać w opcjach konfiguracji Gutenberga – 3 kropki w prawym górnym rogu ekranu.

Dla redaktorów

Gutenberg jest niesamowity dla redaktorów. O wiele łatwiej jest poradzić sobie z ogólnym copywritingiem, ponieważ możesz łatwo zmieniać i zamieniać bloki bez niszczenia czegokolwiek. Możesz także niezależnie edytować bloki i masz łatwe menu informacyjne, które pozwala liczyć słowa.

Motyw 42

Rzuć okiem na to, co nadchodzi, nasz nowy projekt oparty na nowym edytorze wizualnym WordPress, The 42 Theme. Wkrótce zostanie wydany na stronie Aspen Grove Studios, a także w repozytorium WordPress.

Podsumowując

Gutenberg jest łatwym w użyciu edytorem, gdy nauczysz się niuansów . Jeśli nauczysz się pisać za pomocą klawisza Enter i dodasz obrazy i inne bloki od tego momentu, Gutenberg może pozytywnie poprawić Twoje wrażenia z tworzenia stron internetowych.

Jeśli jednak wolisz używać myszy, całe piękno Gutenberga zostanie utracone, a Twoja produktywność może ucierpieć. Dla tych, którzy są bardzo biegli w Edytorze klasycznym, Gutenberg może być wyzwaniem, ale jeśli zastosujesz się do moich rad tutaj, możesz łatwo dostosować się do Gutenberga w mgnieniu oka.