Jak Gutenberg zmieni WordPressa

WordPressa Gutenberga. Być może o tym słyszałeś. To byłaby wielka sprawa. To nowy edytor, który na zawsze zmieni WordPressa i już wkrótce. Będzie to domyślny edytor w WordPress 5.0. Ten nowy edytor WordPress oparty jest na blokach i zmieni sposób, w jaki budujemy nasze treści. W tym artykule przyjrzymy się, jak Gutenberg zmieni WordPressa.

Bloki Gutenberga

Gutenberg buduje treść za pomocą bloków – kontenera, który przechowuje określony rodzaj treści. W przeciwieństwie do edytora, którego używamy od lat, który przechowuje tekst, media, linki, kod itp., wszystko w jednym kontenerze, bloki zawierają tylko jeden rodzaj treści. Bloki tekstowe zawierają tekst. Bloki obrazów przechowują obrazy. Bloki nagłówków przechowują nagłówki. Bloki cytatów przechowują cytaty. Lista bloków przechowuje listy. Jak widać, bloki są bardzo specyficzne dla rodzaju treści, które zawierają.

W przypadku Gutenberga nie możemy dodawać multimediów do bloku tekstowego. Zbudowanie nawet prostego posta za pomocą Gutenberga wymaga od nas rozbicia elementów treści na ich najdrobniejsze elementy, aby stworzyć dokładnie taką treść, jaką zamierzamy stworzyć. Wymaga od nas spowolnienia i większej precyzji. Oznacza to, że tworzenie treści będzie wolniejsze, ale będzie wyglądać lepiej, lepiej będzie przepływać i będzie lepiej zorganizowana.

Jeśli jesteś przyzwyczajony do Divi, jesteś już przyzwyczajony do budowania stron z poszczególnymi modułami. Możesz nawet być przyzwyczajony do tworzenia postów na blogu z modułami dla tekstu, obrazów, galerii, a nawet kodu. WordPress Gutenberg to ten sam pomysł, ale posunięty nieco dalej. Dzięki Divi Builder możesz dodać całą swoją treść do modułu tekstowego (tak jak standardowy edytor WordPress), a następnie użyć modułów do specjalistycznych funkcji, takich jak tabele cen, zakładki, mapy itp. Z Gutenbergiem wszystko jest osobnym blokiem .

Redaktor Gutenberga

Edytor WordPress Gutenberg znacznie różni się od klasycznego edytora. Nadal mamy płótno na środku ekranu, na którym możemy tworzyć nasze treści, ale zamiast jednego obszaru, w którym znajduje się cała ta treść, każdy z bloków treści jest dodawany niezależnie do płótna treści. Możemy przesuwać te bloki w górę iw dół płótna, aby zmienić ich położenie.

Wszystkie elementy sterujące i ustawienia są wyświetlane po prawej stronie. Kliknięcie na blok spowoduje wyświetlenie jego ustawień. Nowe bloki dodaje się, klikając symbol plusa w lewym górnym rogu lub klikając miejsce pod ostatnim blokiem. Możesz kliknąć ikonę wyświetlaną po najechaniu kursorem, aby wybrać blok, kliknąć jedną z ikon po prawej stronie lub po prostu zacząć pisać, aby utworzyć blok akapitu (tekstu).

Mimo że zapewnia ładny widok WYSIWYG twoich treści, Gutenberg nadal jest twórcą zaplecza. Zawiera przycisk podglądu, podobnie jak klasyczny edytor. Możesz edytować za pomocą Edytora wizualnego lub Edytora kodu.

Strony i posty utworzone za pomocą klasycznego edytora

Celem Automattic jest, aby Gutenberg zastąpił klasyczny edytor bez niszczenia treści, które zostały utworzone za pomocą oryginalnego edytora. Nie musisz nic robić ze starą zawartością. Powinien nadal działać tak samo, jak zawsze. Możesz otworzyć dowolną klasyczną zawartość w bloku Klasycznym w Gutenbergu. Obszar zawartości nadal działa tak samo, jak w klasycznym edytorze.

Możesz nawet dodawać nowe treści w klasycznym bloku edytora lub dodając nowe bloki. Dodałem nagłówek i cytat. Wydaje się, że Gutenberg dobrze radzi sobie z klasycznymi treściami.

Wtyczka Gutenberga

Nie musisz czekać do WordPressa 5.0, aby rozpocząć naukę korzystania z Gutenberga. Jest teraz dostępny jako wtyczka, którą możesz zainstalować i rozpocząć testowanie. Gorąco polecam zainstalowanie go i rozpoczęcie przyzwyczajania się do jego działania. Klasyczny edytor będzie nadal dostępny przez jakiś czas, ale będzie to wtyczka, a nie domyślny edytor. Pamiętaj, aby najpierw wypróbować go na stronie testowej, zanim przeniesiesz go do działającej witryny. I oczywiście zawsze najpierw upewnij się, że masz kopię zapasową.

Rampa Gutenberga

Inną opcją jest użycie Rampy Gutenberga. Jest to wtyczka firmy Automattic, która umożliwia selektywne włączanie Gutenberga do określonych typów postów. To świetny sposób na przetestowanie witryny po jednym typie posta na raz, aby pomóc rozwiązać problemy, zanim Gutenberg stanie się domyślnym edytorem w WordPress 5.0.

Gutenberg z Divim

Jeśli używasz Divi (a powinieneś) podczas tworzenia strony lub postu, otrzymasz modal z pytaniem, czy chcesz użyć Divi Builder, czy domyślnego edytora. Domyślnym edytorem jest oczywiście Gutenberg. Korzystanie z Divi Builder automatycznie przeniesie Cię do frontendu, w którym będziesz korzystać z Visual Builder. Na tym ekranie dostępnych jest kilka opcji. Dokonaj wyboru tutaj, zanim wybierzesz Divi. W razie potrzeby możesz wrócić do tego ekranu później.

Ten ekran ma ustawienia strony Divi, w których możesz wybrać układ strony (wybierz z lewego paska bocznego, prawego paska bocznego lub bez paska bocznego), ukryć nawigację przed przewijaniem, użyć koloru tła (z próbnikiem kolorów, aby dostosować kolor) i tekst kolor (jasny lub ciemny). Zawiera również narzędzia do planowania, widoczności i formatowania postów.

Jeśli zdecydujesz się utworzyć stronę, będzie ona miała opcje szablonu, elementu nadrzędnego i kolejności oraz ustawienia strony Divi dla układu i ukrywania nawigacji przed przewijaniem.

Po wybraniu budowania za pomocą Divi Builder zobaczysz normalny Visual Builder.

Dokonaj wyboru i zbuduj jak zwykle. Divi Visual Builder działa dokładnie tak samo jak teraz.

Nadal możesz wyjść z Visual Builder i edytować post. Spowoduje to przejście do zaplecza, aby zobaczyć edytor Gutenberg, w którym możesz wprowadzić dowolne dostosowania zaplecza, takie jak status i widoczność lub ustawienia strony Divi. Aby edytować samą stronę, musisz ponownie uruchomić Divi Builder.

Jeśli przełączysz się z jednego kreatora do drugiego, ryzykujesz utratą wszystkiego, co zrobiłeś w innym kreatorze dla tej strony. Istnieje możliwość edycji treści za pomocą Divi. Tylko upewnij się, że masz kopię zapasową zawartości przed wypróbowaniem.

W tym przykładzie otworzyłem klasyczną zawartość, dodałem bloki nagłówka i cytatu, a następnie edytowałem stronę za pomocą Divi Builder.

Dwadzieścia dziewiętnaście

Każdego roku, z wyjątkiem 2018 r. (byli zajęci pracą nad Gutenbergiem), Automattic dostarcza nowy motyw, aby pomóc zaprezentować najnowsze funkcje i kierunek projektowania WordPress. WordPress 5.0 będzie zawierał także nowy motyw o nazwie Twenty Nineteen, który został zaprojektowany specjalnie dla Gutenberga. Jest to minimalistyczny, oparty na typografii motyw blogowy ze stylami front-end i back-end.

Kończące myśli

Oto nasz przegląd tego, jak Gutenberg zmieni WordPressa. W tym momencie omówiłem tylko interfejs użytkownika. Będą też inne zmiany do rozważenia, w tym SEO, szybkość ładowania, bezpieczeństwo itp. Omówimy te obszary w późniejszych postach.

Jeśli chodzi o interfejs użytkownika, istnieje krzywa uczenia się. Rozpoczęcie od Gutenberga jest niezręczne, ponieważ jest tak różne od tego, czego niektórzy z nas używali przez ponad dekadę. To nas spowolni. Większość z nas nie pomyśli o przejściu jako zabawnym doświadczeniu. Wielu pójdzie na skróty i użyje mniej obrazów lub innych specjalistycznych treści (przynajmniej przez jakiś czas).

Nie lubię zmian (wciąż pamiętam narzekanie na zmiany w narzędziu łączenia kilka wersji temu), ale myślę, że Gutenberg będzie dobrym redaktorem. Myślę, że kiedy już się do tego przyzwyczaimy, stanie się to bardziej intuicyjne i nie będzie tak niezręczne. Nie sądzę, że kiedykolwiek będzie to tak szybkie, jak przy użyciu klasycznego edytora.

Gutenberg ma pewne zalety. Będziemy mieć większą kontrolę nad układem w natywnym WordPressie. Obecnie mamy dużą kontrolę dzięki motywom i wtyczkom kreatora, ale dzięki Gutenberg mamy wysoki poziom kontroli bez konieczności korzystania z produktu innej firmy. Będziemy potrzebować mniej wtyczek. Niektóre funkcje, do których zwykle używamy wtyczek, są wbudowane w Gutenberg.

Użytkownicy Divi powinni przyzwyczaić się do korzystania z Visual Builder. Eleganckie motywy wprowadziły wiele ulepszeń do narzędzia Visual Builder i tak czy inaczej jest to lepszy wybór między narzędziami do tworzenia backendu i frontendu. Aby porównać narzędzia do tworzenia backendu i frontendu, zobacz artykuł Divi Space Divi Builder: Backend vs Frontend i zalety każdego z nich.

WordPress 5.0 przyniesie nam fazę 1 WordPress Gutenberg, która implementuje Gutenberg w obszarze treści twoich stron i postów. Faza 2, która jest znacznie późniejsza, zaimplementuje Gutenberg w każdym obszarze WordPress, w tym w nagłówkach, stopkach, paskach bocznych, menu itp. Dzięki temu Gutenberg będzie kompletnym narzędziem do tworzenia witryn. Oczywiście zawsze będzie zapotrzebowanie na budowniczych, takich jak Divi, które zapewniają specjalistyczne narzędzia i funkcje, których Gutenberg nie zapewni.

Nadchodzi Gutenberg. Gorąco polecam wypróbowanie jednej z wtyczek w tym artykule, aby uzyskać przewagę w nauce korzystania z niej.

Czy próbowałeś Gutenberga ze swoją witryną WordPress? Daj nam znać o swoich doświadczeniach w komentarzach.