Następny wpis
Loading
0%
Wraz z nadejściem WordPressa 5.0 głównym edytorem treści ma być Gutenberg. Premiera wersji 5.0 planowana jest na wiosnę 2018, tak więc mamy już niewiele czasu.. Jak z niego korzystać? Czym różni się od dotychczasowego – TinyMCE? Czy przeciętny użytkownik WordPressa zauważy znaczącą różnicę? W poniższym wpisie postaramy się odpowiedzieć na te pytania.
Patrząc na panel Gutenberga mamy wrażenie, że nie jest to nasze pierwsze spotkanie. Charakterystyczne „plusy” sugerujące możliwość dodania kolejnego elementu, układanie treści w „bloki”, oddzielne opcje dla każdego z segmentów… Skąd my to znamy? Tak jest! Buildery! Nie bez powodu w opisie możemy przeczytać „Gutenberg is more than an editor”. Twórcy zdecydowali się na zaczerpnięcie z kreatorów typu Visual Composer, Muffin Builder, Elementor, tego co mają w sobie najlepsze – schematu blokowego z możliwością personalizacji każdego elementu. Dzięki takiemu rozwiązaniu unikniemy irytujących sytuacji z zaznaczaniem tekstu, zahaczaniem o poprzedni/następny akapit czy dodawaniem elementów w miejsca już formatowane. Przykład dla zobrazowania:
Zapomnieliśmy dodać nagłówek między pierwszym i drugim akapitem. Jak to naprawić? Nic prostszego – dodajemy nowy blok, wybieramy „Heading”, wybieramy rodzaj nagłówka, wpisujemy treść, przesuwamy na odpowiednią pozycję, gotowe!
Specjalistom od WordPressa prawdopodobnie niewiele to pomoże – znaczna część woli korzystać z czystego kodu HTML bez korzystania z pomocy builderów czy edytorów. Różnice odczują natomiast ich klienci – każdemu z nas zdarza się natknąć na wpis sformatowany w nikomu wcześniej nieznany sposób – z Gutenbergiem problem powinien występować rzadziej.
Przykładem niech będzie powyższy akapit. Z opcji zaawansowanych wybieramy „zamień na blok cytatu” i cały akapit jest zamknięty w znaczniki „blockquote”.
Przejdźmy teraz do umieszczania multimediów – w Gutenberga wbudowano możliwość osadzania multimediów z różnych źródeł. Dodając nowy blok przechodzimy do zakładki „Embeds” i wybieramy z listy ponad trzydziestu źródeł. Wybraliśmy losowy film z serwisu Youtube, wklejamy link, wyrównujemy, przesuwamy na odpowiednią pozycję postępując tak samo jak z każdym innym blokiem, gotowe!
Wstawmy teraz brakujące grafiki do tego artykułu i sprawdźmy jak poradzi sobie z tym nasz przyszły podstawowy edytor treści. Schemat postępowania dokładnie taki sam jak w przypadku poprzednich elementów. Czy wspominałem już że przypomina mi to trochę buildery Drag&Drop? 😉
Na początku tego wpisu wspominałem o pozornym podobieństwie do popularnych page builderów typu Elementor czy Visual Composer. Faktycznie – wygląd samego edytora może lekko przypominać wyżej wymienione, schemat blokowy również jest elementem wspólnym. Co zatem różni Gutenberga od większości popularnych page builderów? Zdecydowanie ślad pozostawiany w strukturze kodu HTML. Poniżej różnica pomiędzy strukturą tego artykułu stworzonego przy pomocy Gutenberga, a prostym fragmentem jakiejś losowej strony internetowej zrobionej przy pomocy Visual Composera.
Już na pierwszy rzut oka widać jak długą drogę musi przebyć przeglądarka, aby dotrzeć do pierwszego akapitu. Ponadto (w przypadku tego wpisu) Gutenberg załącza jedynie niewielki plik style.css (33kB). Visual Composer natomiast korzysta ze zmodyfikowanej wersji Bootstrapa, podstawowy plik js_composer.min.css waży ponad 10x więcej.
Gutenberg jest wciąż nowym edytorem, ma jednak duży potencjał i wiążemy z nim duże nadzieje. O ile standardowy edytor tekstów TinyMCE umożliwia w zasadzie pisanie artykułów, o tyle Gutenberg jest stworzony do budowy całego layoutu (kolumny, bloki, elementy osadzone).
Dla większości zwykłych użytkowników nowy edytor przyniesie bardziej elastyczny sposób tworzenia treści. Osoby niebędące programistami będą w stanie intuicyjnie tworzyć złożone układy z dodatkowymi elementami, takimi jak przyciski, osadzone treści i wiele innych bez konieczności stosowania shortcodów czy zewnętrznych wtyczek. Developerzy poprzez Block API uzyskają możliwość definiowania dowolnych bloków, które ułatwią klientom zmianę layoutu we własnym zakresie. A to, mamy nadzieję, pomoże WordPressowi w dalszym rozwoju.
Gutenberg jako rozwijający się projekt ma w sobie jeszcze kilka niedociągnięć i mankamentów. Przyciski edycji tekstu zasłaniają czasami treść, przesuwanie bloków góra-dół sporadycznie płata figle, niektóre bloki pozostawione puste „przyłączają się” do poprzednich przez co nie da się ich usunąć bez usuwania części treści. Prawdopodobnie można by znaleźć jeszcze kilka błędów, które utrudniają, w mniejszym lub większym stopniu, pracę. Na szczęście nie przyćmiewają one przyjemności płynącej z tworzenia treści przy pomocy Gutenberga. Jest wysoce intuicyjny, przyjazny użytkownikowi, szybki i przejrzysty. Z niecierpliwością czekamy na kolejne kroki twórców, po kilku godzinach korzystania bowiem wyczuć możemy ogromny potencjał i możliwości rozwoju edytora.