Ismerd meg a Gutenberg szerkesztőt

Címkék:

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.



Mit mondanak mások?

Vélemények a tanfolyamról


Akikre büszkék vagyunk

Siker sztorik

Molnár Erika

Molnár Erika

Nekem borzasztó érthető volt, követhető és minden támogatást megkaptam. A facebook csoportban lehet kérdezni, rávezetnek a megoldásra és így nagyon gyorsan lehet fejlődni. Mindenképp ezzel akarok foglalkozni. Leginkábban abban szeretnék fejlődni, hogy egyedi sablonokat építsek, mert nagyon sok olyan felhasználó van, aki előre készített komponensekből akarja összerakatni a weboldalát, de én jobbat szeretnék, főleg így, hogy beleláttam a HTML és a sablonkészítés rejtelmeibe.

Elolvasom >>>

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!

A programozás alapjai

Ingyenes leckesorozat!

Ahhoz, hogy később kód szinten is meg tudj valósítani összetettebb frontend igényeket, tisztában kell lenned a programozás alapfogalmaival. Ebben a leckesorozatban bevezetlek a programozás alapismereteibe teljesen programfüggetlenül.

Megismerkedhetsz az algoritmusokkal, ciklusokkal, logikai műveletekkel és adattípusokkal, emellett gyakorlati feladatokat is kapsz minden témakörhöz. Mindezt egy kényelmes online oktatófelületen.

Regisztrálj és kezdd el még ma!

szám, kisbetű, nagybetű, legalább 8 karakter

Elolvastam és elfogadom az Adatvédelmi Nyilatkozatot

A programozás alapjai

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