Nemrég kiadta a WordPress a 4.9.8-as frissítést, amivel megérkezett a sokak által várva-várt beépített szerkesztő béta verziója, amely már nem csak szövegszerkesztésre és média beágyazására lesz képes, hanem blokkszerkezet létrehozására, a blokkok rendezésére is – mindezt reszponzívan. Leteszteltük, mire is képes jelenleg: íme a Gutenberg editor!

A Gutenberg telepítése és aktiválása

Az új editort a WordPress a Vezérlőpult főoldalán automatikusan felajánlja, mint telepíthető bővítmény, de felhívja a figyelmet rá, hogy még nem végleges verzióról van szó, és minden véleményt és hibajelentést szívesen vesznek, elvégre a közösség erejére épít a WordPress is. A plugin letölthető a hivatalos WordPress oldalról is: https://wordpress.org/gutenberg/

Első használat: tippek és példa bejegyzés

Telepítés után automatikusan az új bejegyzés készítése oldalra visz a bővítmény, és betölt egy alap blokkokkal feltöltött bejegyzést, amin kipróbálhatjuk az új szerkesztőt. Mivel jobb szeretem magam megtalálni a helyes utat, én a cím megadása után azonnal kitöröltem a blokkokat, hogy tiszta lappal indíthassam a felfedezést.

Első használatkor a Gutenberg tippeket ad a felület kezelésére (bár jelenleg még csak angolul), valamint a WordPress egyelőre arra is lehetőséget biztosít, hogy kiválasszuk az új bejegyzés típusát. Aki nem jártas az oldalszerkesztők (ún. page builderek) használatában, az is könnyen bele fog tanulni az új felület kelezésébe.

Blokk létrehozása, szerkesztése és törlése

A Gutenberg előnye, hogy lehet a megszokott módon egyszerű szövegszerkesztőként használni, ehhez csak létre kell hozni egy blokkot, belekattintani, és elkezdeni írni bele. De nem ez a Gutenberg fő szolgáltatása, csak amolyan „fallback” azon felhasználók számára, akik megelégednek ennyivel.

A szerkesztés elég intuitív módon történik, blokk hozzáadásához a fejlécben a ⊕ jelre kell kattintani, és kiválasztani a megfelelő elemet. A leggyakrabban használt elemeket a rendszer kigyűjti a „Most Used” lenyíló alá, így azokhoz gyorsan hozzá tudunk férni.

Az egyes elemek szerkesztéséhez bele kell kattintani a modulba, ekkor előjön a hozzá tartozó lebegő menü, amiben a beállításokat elvégezhetjük.

Blokkok hozzáadása a Gutenberg cikkhez
Blokkok hozzáadása a cikkhez

Innen jön az izgalmasabb rész: felfedezni, milyen modulokkal dolgozik az új szerkesztő. Megmaradtak a régi szerkesztőből az alapelemek, mint a bekezdés, cím, alcímek, felsorolások, kiemelések, képek, galériák, és a gombok – viszont mindegyik új köntösben mutatkozik be.

Minden egyes blokknak megvannak a maga stíluselemei, amelyek bekerültek a jobboldali oldalsávba. Természetesen ezek még csak kezdetleges beállítások, főleg méret, szín és elrendezés-beállítások. Amit továbbra is hiányolok, az a sorkizárttá tevés lehetősége a szövegeknél, de nem lehet mindent egyszerre – kódból továbbra is működik. 🙂 Mostantól azonban minden modulnak megadhatunk egy CSS osztályt az „Advanced” lenyíló alatt, ami sokat segíthet a stílus egységesítésében, és az oldal kódjának átláthatóságában.

Az egyes blokkok stílusait az oldalsávban lehet szerkeszteni
Az egyes blokkok stílusait az oldalsávban lehet szerkeszteni

Blokkok törléséhez a blokk fölé kell vinni az egeret, majd a jobboldali három pontos menüre kattintani, és ott a „Remove Block” parancsra. Ugyanitt lehet megnyitni a blokk HTML kódnézetét is. További újítás, hogy az elkészült blokkokat lehet duplikálni, valamint el lehet menteni az „Add to Reusable Blocks” parancsra kattintva, így bármikor felhasználhatjuk azokat akár más bejegyzésben is.

Ezen felül a blokkok sorrendjét is lehet változtatni – bár még nem drag-and-drop módszerrel, hanem a mozgatandó blokk fölé vitt egérre megjelenő fel-le nyilacskákra való kattintással.

Blokkok menüje: szerkesztés HTML-ként, duplikálás, mentés, törlés
Blokkok menüje: szerkesztés HTML-ként, duplikálás, mentés, törlés

A szerkezeti elemek még csak teszt verziósak, így a működésük néha kiszámíthatatlan.

Minden esetre lehet hasábokat (columns) létrehozni, maximum hatot, de az pont elég is.

Az alap modulokon és a hasábokon túl mostantól viszont lehetőség van közösségi média oldalak tartalmait is beágyazni a bejegyzéseinkbe. Van modul Facebook, Instagram, Twitter, Youtube, Vimeo, Spotify és még ezernyi más tartalom beszúrására, és bár nem mindegyiknek van a szerkesztőfelületen látható verziója, az „Előnézet” gombra kattintva megtekinthető, hogy is fog ez kinézni. Itt van példának legutóbbi cikkünk megosztva a Facebookon, beágyazva ebbe a bejegyzésbe:

Egy Facebook poszt beágyazása
Egy Facebook poszt beágyazása

Úgy érzed, hogy a mindennapjaidra ráférne egy kis tudatos szervezés? Ajánljuk figyelmedbe az alábbi cikkünket, amiben…

Közzétette: Amega Full Service ügynökség – 2018. augusztus 3., péntek

Egyéb funkciók

A Gutenberg a blokk kezelésen túl behozta a visszavonás lehetőségét – ezúttal követhető módon. A blokk hozzáadását jelző ⊕ jel melletti nyilak segítségével visszavonhatjuk illetve megismételhetjük a legutóbbi lépést. Néha még ez is hibásan működik, mindenki a maga szakállára tesztelje!

Modul hozzáadása, Visszavonás és Újra gombok
Modul hozzáadása, Visszavonás és
Újra gombok, Információs menü

Ezen kívül bekerült egy információs menü, ami statisztikát szolgáltat a bejegyzés tartalmáról:

  • szavak száma,
  • alcímek száma,
  • bekezdések száma,
  • blokkok száma.

Ezalatt pedig a dokumentum szerkezete látható amolyan élő tartalomjegyzékként, ugyanis automatikusan belekerül a cím és minden alcím, és mindegyik kap egy-egy kattintható linket, ami az adott fejezethez visz a cikk szerkesztőfelületén.

Dokumentum szerkezet és statisztikák
Dokumentum szerkezet és statisztikák

Összegzés

Összességében remek újításnak tartom a Gutenberg editort, bár még van rajta mit csiszolni. A bétaként jelzett hasábkezelés még nagyon gyerekcipőben jár, időnként a kettőből csak egy hasábot enged szerkeszteni, máskor összecsúsznak a kezelőgombjai. Továbbra is mostohagyerek a galériakezelés, mert bár már nem szigorúan táblázatszerűen jelennek meg a képek, azok nagy méretben való megnyitása még mindig hiányzik, és néha nem csak a kijelölt képet tölti be a galériába, hanem az összeset, ami nagy gondot okozhat egy olyan oldalnál, amin nem 10-20 kép van… tehát az összes élő oldalnál.

Biztos vagyok benne, hogy az éles verzióig ezekkel a problémákkal is foglalkoznak majd a WordPress fejlesztői. Addig is mindenki, aki teheti, egy tesztoldalon próbálja ki, és ossza meg a tapasztalatait a fejlesztőkkel!

Link a fejlesztői fórumhoz, hibajelzéshez: https://make.wordpress.org/core/tag/gutenberg/