top of page

Jak przygotować stronę na WordPressa 5.0 i nowy edytor Gutenberg


Kompatybilność z Gutenbergiem (obrazek)

WordPress 5.0 zbliża się wielkimi krokami. Będzie on zawierać nowy edytor treści – Gutenberg. Wiążąca data wdrożenia nie jest jeszcze znana, ale warto już dziś przygotować się na tę wielką zmianę, żeby zaoszczędzić sobie przykrych niespodzianek w przyszłości.

Z tego wpisu dowiesz się:

  1. Co się stanie z twoimi dotychczasowymi wpisami i podstronami po wdrożeniu WordPressa 5.0 i Gutenberga.

  2. Co może przestać działać na twojej stronie w WordPressie po wejściu nowego edytora.

  3. Jak już teraz możesz sprawdzić, czy twoja strona i wtyczki na niej zainstalowane będą kompatybilne z Gutenbergiem.


Czy Gutenberg rozwali moją stronę na WordPressie?

To pytanie zadaje sobie dziś tysiące użytkowników WordPressa. Przeciwnicy Gutenberga obawiają się takiego oto scenariusza:

  1. Wychodzi WordPress 5.0 wraz z nowym edytorem.

  2. Właściciel strony klika „Zaktualizuj WordPressa”.

  3. WordPress się aktualizuje poprawnie, ale połowa strony nie działa:

  4. Dotychczasowe wpisy i podstrony są rozwalone na front-endzie.

  5. W back-endzie zniknęła połowa przycisków i nie można kontynuować edycji treści jak dotychczas.

  6. Co krok napotykamy się na jakieś warningi i komunikaty z błędami, z którymi nie wiadomo co zrobić.

  7. Większość zainstalowanych wtyczek przestała działać, a my nie mamy pojęcia, które konkretnie i co sprawdzać.

  8. Trzeba konwertować pod nowe edytor dotychczasowe wpisy.

  9. Nie wiadomo, jak tworzyć treści w nowym edytorze.

  10. Nie mam żadnej możliwości kontynuacji pracy po staremu bez gruntownej przebudowy strony.

Oczywiście lista wyobrażeń, co może pójść nie tak, u niektórych pesymistów jest znacznie dłuższa, ale ta wyżej podsumowuje typowe obawy.

A teraz prawdopodobieństwo spełnienia się powyższych niepokojów:

  1. Znikome.

  2. Spore, wprost proporcjonalne do ilości zainstalowanych wtyczek, które dodają własne przyciski do dotychczasowego edytora. Szczególnie jeśli ich autorzy nie zrobili nic, żeby przygotować się na Gutenberga.

  3. Znikome.

  4. Znikome.

  5. Nie ma takiej potrzeby, choć można.

  6. Bez obaw. W nowym edytorze właśnie o to chodzi, że ma być intuicyjny dla laika. Problem może być tylko z wtyczkami, które są niekompatybilne z Gutenbergiem.

  7. Znikome.

A teraz nieco więcej szczegółów. I praktyczne przykłady.

Po pierwsze spokój, po drugie wiedza

Niepokój, który narasta wokół nowego edytora wynika w głównej mierze z niewiedzy, co tak naprawdę wydarzy się na stronie WordPressowej po wdrożeniu Gutenberga.

Co możesz zrobić już, żeby spać spokojnie:

  1. Zrozumieć, jakie obszary zostaną dotknięte zmianami. Będziesz wiedzieć na czym się skupić, a czym się nie przejmować.

  2. Zrobić kopię strony i zainstalować wtyczkę Gutenberg. Zobaczyć, co się zmieniło.

  3. Zrobić listę używanych przez ciebie wtyczek, których działanie się zmieni po wejściu Gutenberga i dowiedzieć się, jak autorzy przygotowali się do zmiany. Tworzenie treści w Gutenbergu odbywa się za pomocą bloków. Musisz wiedzieć, jak uzyskać dotychczasowy efekt za pomocą nowych klocków. Bo część starych zniknie.

  4. Subskrybować ten blog (przez RSS lub Newsletter). Temat Gutenberga śledzę na bieżąco i wszystkie wpisy powiązane znajdziesz pod tagiem Gutenberg.

Zacznijmy od podstaw, czyli zrozumienia, co się w ogóle stanie po wejściu Gutenberga do core’a WordPress.

Jak będą wyglądać stare wpisy po otwarciu w nowym edytorze?

Na zrzutach z ekranu niżej widzimy dwie wersje tego samego wpisu. Prezentowany wpis był napisany w starym, klasycznym edytorze i dotychczas wyglądał tak:

Stary wpis otwarty w klasycznym edytorze

Stary wpis otwarty w klasycznym edytorze


Teraz otwieramy ten „stary” wpis w nowym edytorze – Gutenberg. I będzie on wyglądać tak:

Ten sam wpis otwarty w nowym edytorze (Gutenbergu)

Ten sam wpis otwarty w nowym edytorze (Gutenbergu)


Jak widać nic nie wyparowało, wpis wygląda niemal identycznie. A to dlatego, że cała treść starego wpisu po otwarciu w nowym edytorze trafia do jednego bloku, który nazywa się Classic Block:

Stary wpis staje się jednym dużym blokiem

Stary wpis po otwarciu w nowym edytorze staje się jednym dużym blokiem


Użytkownik ma możliwość przekonwertowania go na serię bloków:

Możliwość konwersji "starego" wpisu na serię bloków

Możliwość konwersji „starego” wpisu na serię bloków


Wówczas każdy obrazek, nagłówek, embedowany filmik trafi do osobnego, dedykowanego bloku.

Konwersja taka jest opcjonalna i osobiście nie widzę żadnego sensu w konwertowaniu starych wpisów na bloki. W przypadku stron, owszem, ale tylko wtedy gdy często je edytujemy i chcemy korzystać z dobrodziejstw nowego podejścia.

Czy zmieni się wygląd dotychczasowych wpisów na front-endzie?

Ogólnie rzecz biorąc, wygląd treści na front-endzie w większości przypadków pozostanie ten sam, nawet jeśli twórcy wtyczek nie zrobili nic, żeby wpierać Gutenberga.

Przynajmniej na to wskazują testy, które wykonałam. Sprawdziła kilka nawet bardzo karkołomnych stron, w tym strony-patchworki, oparte na motywach-potworkach, page builderach i setkach shortcodów.

W moich przykładach front-end pozostał bez zmian. Dzieje się tak dlatego, że dotychczasowa zawartość treści wpisu/strony pozostaje nienaruszona. Zostaje jedynie wrzucona do jednego dużego blogu Classic blok.

Ale uwaga!

To że front-end będzie wyglądać dobrze, to tylko połowa sukcesu.

Po przełączeniu na nowy edytor może zniknąć kilka dotychczasowych przycisków, które miałeś wcześniej swoim klasycznym edytorze. I teraz powaga sytuacji sprowadza się do tego, jak istotną rolę odgrywał dany przycisk.

Co przestanie działać w edytorze wpisu

Pasek ze standardowymi kontrolkami edytora TinyMCE (dotychczasowego edytora) wygląda tak:

Zestaw przycisków w klasycznym edytorze (TinyMCE)

Zestaw przycisków w klasycznym edytorze (TinyMCE)


W świecie idealnym, w którym na swojej stronie WordPressa nie masz żadnej wtyczki, każdy z tych przycisków otrzyma odpowiednik w nowym edytorze albo zamiennik w postaci bloku.

Przyciski bloku Classic w nowym edytorze

Przyciski bloku Classic w nowym edytorze


Przyciski bloku Paragraph (akapit) w nowym edytorze

Przyciski bloku Paragraph (akapit) w nowym edytorze


Oznacza to, że wszystko, co byłeś w stanie zrobić w dotychczasowym edytorze WordPressa, będziesz mógł zrobić w Gutenbergu, tyle że łatwiej i przyjemniej.

Problem polega na tym, że mnóstwo wtyczek dodaje jakieś swoje przyciski do tego paska. Jeśli autorzy wtyczki nie zadbali o kompatybilność z nowym edytorem, po przełączeniu na Gutenberga wszystkie te dodatkowe przyciski znikną!

A zatem sprawdzanie, czy strona będzie działać po staremu po przełączeniu się na Gutenberga, należy rozpocząć od wyłapania dodatkowych przycisków w starym edytorze i identyfikacji wtyczki z której one pochodzą.

Przykład

Oto podstrona Kontakt otwarta w klasycznym edytorze. Widzimy przycisk Dodaj formularz. Pochodzi on z wtyczki Ninja form.

Przycisk Dodaj formularz w klasycznym edytorze

Przycisk Dodaj formularz w klasycznym edytorze


I teraz otwieramy ten sam wpis w Gutenbergu:

Ta sama strona po otwarciu w Gutenbergu

Ta sama strona po otwarciu w Gutenbergu


Jak widać przycisk Dodaj formularz zniknął!

Strona wyświetlona na front-endzie wyświetli formularz prawidłowo, ale jeśli właściciel strony będzie chciał wstawić jakiś inny formularz, to już nie ma dotychczasowej możliwości, bo starego przycisku nie zobaczy.

Więc pierwsze, co musisz sprawdzić to to, czy autorzy wtyczki przygotowali odpowiednik w postaci bloku.

W przypadku wtyczki Ninja Forms okazuje się, że tak!

Wstawianie formularza kontaktowego jest możliwe w formie bloku!

Wstawianie formularza kontaktowego jest możliwe w formie bloku!


Więc w przypadku Ninja Forms możesz spać spokojnie. Wystarczy, że osobie zarządzającej stroną powiesz, że teraz do wstawiania formularzy ma użyć bloku zamiast przycisku.

Przykład wtyczki, która nie jest (jeszcze) przygotowana na Gutenberga

Uwaga! To co czytasz poniżej to stan na moment tworzenia tego wpisu, czyli 3 marca 2018. Wiem, że autorzy wtyczek pełną parą pracują na kompatybilnością pod Gutenberga i w każdej chwili może się to zmienić.

Załóżmy, że na swojej stronie używasz page buildera Elementor.

Tak wygląda strona w klasycznym edytorze. Widzimy ogromny przycisk Edytuj w Elementorze.

Strona wykorzystująca page builder Elementor otwarta w klasycznym edytorze

Strona wykorzystująca page builder Elementor otwarta w klasycznym edytorze


Zobaczymy teraz, co się stanie z podstroną, której treść jest utworzona w Elementorze po tym, jak otworzymy tę stronę w edytorze Gutenberg.

Ta sama strona otwarta w edytorze Gutenberg

Ta sama strona otwarta w edytorze Gutenberg – nie ma przycisku „Edytuj w Elementorze”


Front-end będzie wyglądać bez zmian, ale w back-endzie użytkownik nie widzi przycisku Edytuj w Elementorze, a zatem nie ma pojęcia, jak edytować taką stronę po staremu, czyli za pomocą Elementora.

Co możesz w takiej sytuacji zrobić?

  1. Poszukać informację o kompatybilności z Gutenbergiem danej wtyczki.

  2. W przypadku page builderów sprawdź, czy możesz się dostać do edycji wpisu z front-endu.

  3. Otworzyć stronę w klasycznym edytorze.

Ad #1. W przypadku page buildera Elementor, na ten moment, znalazłam taką oto informację:

Jak Elementor będzie działać z Gutenbergiem

Jak Elementor będzie działać z Gutenbergiem – docs.elementor.com/article/257-gutenberg


Ad #2. Gdy stronę zbudowaną w Elementorze odwiedzimy na front-endzie, zobaczymy możliwość wejść w edycję za pomocją Elementora: