2021.12.02.

Ismerd meg a Gutenberg szerkesztőt

ismerd-meg-a-gutenberg-szerkesztot

Mi is az a Gutenberg szerkesztő?

A Gutenberg bevezetése a WordPress fejlesztés következő állomása volt 2018-ban. Azóta a blokkszerkesztő rengeteget fejlődött, amely 2021-re már egy igazán jól használható platformmá alakult a folyamatos felhasználói visszajelzések és a WordPress közösség fejlesztőinek fáradhatatlan munkájának köszönhetően.

Ez a szerkesztőfelület most már a WordPress alapértelmezett szöveg- és tartalomszerkesztője. Tehát az admin felületen ezzel fogsz találkozni, hacsak nem használsz harmadik féltől származó bővítményt (pl. Elementort, vagy Divit). Ennek a szerkesztőnek a legfontosabb újítása a korábbihoz képest, hogy ún. blokkokban gondolkodik, szemben a régi megoldással, ami inkább hasonlított egy Word-szerű szövegszerkesztőre.

Mi az a blokk?

Gondolj inkább úgy erre, mint a játék építőkockákra, vagy a legóra, amelyekből fel lehet építeni például egy házat.

Egy weboldal tartalma nem csak szövegből állhat, hanem tartalmazhat képeket, galériákat egyéb multimédiás elemeket is. Ezen kívül a szövegformázás is több elemből épül fel, úgymint bekezdések, cím sorok, listák, stb. A Gutenberg ezeket mind önálló egységekre bontja, ezek a blokkok. Ez a felbontás biztosítja, hogy a blokkok áthelyezhetők, átrendezhetők, törölhetők és módosíthatók legyenek. Technikai oldalon a WordPress blokk egyébként egy JavaScript objektum (JSON Object). 

Érvek tömkelege szól mellette és ellene. Az biztos, hogy az első verzióhoz képest a mostani már tényleg egy megfelelően használható szoftver, ami lehetővé teszi, hogy a weboldal fejlesztéshez nem értő emberek is ütősebb weboldalt hozhassanak létre anélkül, hogy tele kellene pakolni a WordPresst mindenféle sablonokkal, bővítményekkel és shortkódokkal.

Őszintén szólva nekem a hideg végigfut a hátamon, ha a page buliderek szóba kerülnek. Rengeteg bennük a felesleges kód, ez pedig lassulást okozhat, mivel a generált kimenet számos osztályból, div-ből és HTML elemből áll, amelyek letöltése hamar felemészti a böngésző erőforrását. Hasonló rossz érzésem volt a Gutenberg szerkesztővel is – eleinte. Az elmúlt évben viszont annyit fejlődött, hogy nemcsak hogy megbarátkoztam vele, hanem egyenesen praktikusnak gondolom. Alább összeszedtem a főbb előnyeit a Gutenberg szerkesztőnek:

  • Rendkívül gyors vele a munka, nagyon hatékonyan lehet bemásolni szövegeket, amik azonnal felveszik a megfelelő formátumot.
  • Valamelyest áthidalja a felhasználó és a fejlesztő tudása közötti hézagot, most már kevésbé kell tartani attól, hogy az ügyfél elrontja a designt az általa bemásolt (alapból nem odaillő) elemekkel.
  • Az egyes blokkokat megfelelő osztályokkal lehet ellátni, ezekre külön saját CSS-t is lehet írni. Köszönöm Istenem, végre!
  • A webfejlesztők tudnak létrehozni saját blokkot. Az egyedi blokkok létrehozásához PHP helyett JavaScript tudásra van szükség, mivel a WordPress ezen részét már a React.js hajtja. Ezzel a tudással a weboldal céljához maximálisan illeszkedő elemeket lehet létrehozni, így mégjobban kiszolgálja a szerkesztő feleületet.

Milyen blokk típusok vannak a Gutenberg szerkesztőben?

  • grid
  • lista
  • bekezdés
  • címsor
  • fájl
  • idézet
  • galéria
  • kép
  • hang (audio)
  • videó

Ezek még önmagukban nem is annyira izgalmasak, de ha kombinálva használjuk őket a szerkesztő által kínált elrendezésekkel (layout elements) és formázási lehetőségekkel (formatting blocks), widget blokkokkal és beágyazási lehetőségekkel (embed blocks) akkor már egy pofás, gyors és hatékony szerkesztőfelületet kapunk.

Főbb elrendezési módok:

  • elválasztó
  • oszlopok
  • “továbbiak”
  • gomb
  • oldaltörés

Főbb formázási blokkok:

  • egyedi HTML
  • kiemelt idézet
  • klasszikus szerkesztő
  • táblázat
  • idézet/vers/dalszöveg
  • kód

Főbb widget blokkok:

  • legutóbbi bejegyzések (blog)
  • rövidkódok (pl Contact Form 7)
  • archívumok (blog)
  • kategóriák (blog)
  • kommentek (blog)

Néhány multimédiás beágyazási lehetőség: 

YouTube, Vimeo, Facebook, Reddit, Instagram, Spotify, stb.

Hátrányok

A teljesség kedvéért említsük meg a Gutenberg szerkesztő főbb hátrányait is, ezek a leggyakoribb felhasználói és fejlesztői panaszok:

  • a hosszú szövegeket nem mindig jól kezeli: minden új bekezdést külön blokkba rak, így nehézkes a szöveg szerkesztése (ezt ki lehet úgy küszöbölni, hogy a tartalmat egy asztali szövegszerkesztőben írod meg és utána másolod be a blokkszerkesztőbe),
  • bár a szerkesztő teljesítménye jelentősen megnőtt, a nagyobb bejegyzéseknél még most is akadozhat, ez a klasszikus szerkesztőben sokkal kevésbé valószínű, hogy megtörténik,
  • összehasonlítva a page builderekkel a blokkszerkesztő nem kínál vizuális szerkesztési lehetőséget, tehát nem lehet vele “felcsicsázni” a tartalmakat (hála istennek).
  • nincs benne fogd és vidd (drag & drop) funkció.

Az utolsó negatívumhoz érdemes hozzátenni, hogy a Gutenberg készítésekor nem is volt célja a fejlesztőknek, hogy a WordPress-t a Wix-hez, vagy Squarespace-hez hasonló fogd és vidd szerkesztővé alakítsák.

Ha még nem állsz készen arra, hogy kipróbáld, a Gutenberget, letilthatod, és használhatod a klasszikus szerkesztőt. A Gutenberg azonban tovább fog fejlődni, így nem érdemes örökre figyelmen kívül hagyni.



Tetszett a bejegyzés?

Iratkozz fel és küldök Neked E-mail értesítőt, ha ehhez hasonló új cikk kerül fel a blogra.

.
Nekem való?

Maradtak még kérdéseid?

Ha nem vagy biztos benne, hogy ez Neked való, vagy további kérdéseid vannak a kurzusokkal kapcsolatban,
írd meg chaten és 48 órán belül válaszolok!

Kérdezek!

Kövesd közösségi csatornáinkat is!

Beavatlak a frontend fejlesztői munka rejtelmeibe, mesélek a szabadúszáról, mutatok hasznos kódrészeleteket és engem is jobban megismerhetsz.