Gutenberg 6+1 Tipp amit mindenkinek ismernie kell

Videó szöveges formában:


Ebben a videóban szeretnék Neked mutatni 6+1 kimondottan hasznosnak mondott tippet, hogyan varázsold a Gutenberg tapasztalatodat vagy élményedet egy sokkal kezelhetőbb valamivé.


Amióta WordPress 5.0 verziója megérkezett pár nappal ezelőtt, kimondottan sok volt a pozitív vagy negatív beszámoló, ugyanakkor ebben a „zajban” bizonyos dolgokra az emberek nem tudtak – mondjuk – rátalálni. Ezekre az apró tippekre, vagy inkább trükkökre szeretnék egy gyors bemutatót tartani. Remélem ezután a videó után egy sokkal gördülékenyebb szerkesztési élményben lehet majd részed.

Mint láthatod egy teljesen új WordPress 5.0-ás friss telepítéssel indítunk, és az első
dolog amit tenni fogunk, hogy bemegyünk a bejegyzések közé és láthatod, hogy az alap szerkesztési lehetőségnél nincs is semmi, csak az hogy szerkeszthetjük, és amint erre rákattintunk, akkor pedig a friss Gutenberg szerkesztő fog felugrani számunkra.

Most ahhoz, hogy ebben egy relatív jobb élményben lehessen részünk, különböző kis apró dolgokat tudunk, és az első tippem számodra, hogy a jobb felső sarokban a három kis pöttyre rákattintasz, akkor láthatod, hogy különböző egyéb nézeti lehetőségek vannak, és ezekből az egyik – mondhatni – szerkesztők számára kedvencem ez a fullscreen mód, vagy a teljes képernyős üzemmód, ugyanis ha erre rákattintasz, máris látod, hogy teljesen eltűnt a mind a baloldani WordPress admin felülete, mind a jobb oldalról amint kivesszük a beállítási lehetőségeket az a része is, és egy teljes szövegszerkesztési élményben lehet részünk.

Illetve ha már itt tartunk, amint visszamegyünk normál nézetbe, a második tippem pontosan
ugyanitt lesz
, tehát a jobb felső sarokban a három kis pöttyre rákattintunk, és a spotligh módra
kattintunk, akkor ez azt fogja eredményezni, hogy kiemeli azokat a dolgokat, amin éppen
szerkesztünk. Tehát ha éppen erre a képre kattintunk, minden más sokkal szürkébb, míg ez a
megfelelő élénk úgy ahogy kellene. Vagy ha átmegyünk egy másik szövegtartalomra, akkor ez lesz
kimondottan a fókuszunk tárgya, minden más elszürkül, mondhatni nem lesz annyira a figyelmünk
tárgya.

A harmadik tippem amit tudok mondani, ugye a hétköznapi vízuális szerkesztőkből már megszokhattunk, ez a “Drag and Drop” lehetősége, ez itt is elérhető számunkra, amint kilépünk a fókusz üzemmódból, láthatod, hogy amint az egeredet föléhúzod egy bizonyos szerkesztési blokknak, a bal
szélén van ez a hat kis pöttyös ikon
, ezt megfogod az egered bal egérgombját lenyomva tartva, máris
ugyanabban a hétköznapi drag and drop módban tudod szerkeszteni, avagy oda-vissza tudod mozgatni kedvedre, vagy a fölötte és az alatta lévő nyilakkal tudod csak egy-egy pozícióval följebb vagy lejjebb helyezni. Tehát most a példa kedvéért ezt a kis szöveget a kép alá szerettem volna helyezni, mint látod, ezt egy gombnyomással meg tehettem, illetve vissza.

A negyedik tippem, ami egy sokkal érdekesebb és hasznosabb tipp lesz, mint bármelyik eddigi, ez kimondottan azoknak lesz jó, akik építenének egy blokkot, amit szeretnének újra és újra felhasználni, különböző cikkeken belül de nem szeretnék, ha újra létre kellene ezt hozni úgymond a nulláról. Hogy ezt megtehessük, a hétköznapi módon csak az egerünket fölé húzzuk a szerkeszteni kívánt blokknak, majd a megjelent menüben a három kis pötty, amire rákattintunk és itt van egy ilyen lehetőségünk, hogy add to reusable block, vagy az újrahasznosítható blokkokhoz való hozzáadása. A következő lehetőségünk az lesz, hogy adunk neki egy nevet, majd a save vagy mentés gombban elmentjük. Ebben az esetben, amint a hétköznapi szerkesztéseinket csináljuk, és szeretnénk hozzáadni egy új blokkot, akkor mint láthatod, akkor vagy név szerint rákeresel, vagy legörgetsz a lista aljára, és megtalálod az újrahasznosítható fülecskét, máris látod, hogy van egy ilyen blokkunk. Amint erre rákattintunk, vagy hozzáadjuk, máris ugyanaz a blokk megtalálható, és ez bármelyik cikken vagy bárhol, bármelyik tartalomnál ugyanígy fel tudjuk használni.

Az ötödik tippem ismét egy hasznos trükk, amit mondjuk ha egy más típusú szöveget szeretnél használni, vagy valamiből egy más típusú valamit szeretnél létrehozni, ez akkor lesz hasznos. A példa kedvéért a H4-es ugye heading-emet – fejlécemet – szeretném átalakítani egy teljesen hétköznapi szöveggé vagy paragrafussá. Ebben az esetben amint rákattintunk erre a blokkra, mintha szerkeszteni szeretnénk, és az első ikon fölé odahúzzuk az egerünket, lesz egy change… a blokk típusának változtatása opció, látni fogod ezt a két kicsi nyilacskát, mondván hogy ezzel valamit csinálhatunk. Amint erre rákattintunk, adni fog három lehetőséget. Alapvetően négy lehetőség van, de az egyiket ugye éppen használjuk, a listában nem fog megmutatkozni. A négy lehetőség pedig nem más, mint a hétköznapi paragrafus, minthogyha szöveget szerkesztenénk, a heading vagy mint ugye valamilyen tipusú fejléc, a cover amit mindjárt megmutatok, ez ugye a nagy cover kép és rajta a fejléc szöveggel illetve a quote mint egy idézet létrehozása. Tehát most ha itt átkattintok paragrafusra, láthatjuk, hogy teljesen hétköznapi szöveg lesz belőle. Ha ezt visszaállítjuk Hedingre – tehát fejlécre, és átkattintunk mondjuk legyen egy cover belőle, adhatunk neki egy háttérképet, máris egy hero-header jellegű fejlécet kaptunk, amit innentől fogva így ilyen módon is képesek leszünk használni.

A hatodik tippem mondhatni inkább a bejegyzésünkre vonatkozó és egy specifikus sablonra vonatkozó kis tipp, a legújabb 2019-es sablonunk teljes Gutenberg élményt ad számunkra és teljes kompatibilitást. Mindjárt meg is mutatom, hogy néz ez ki esetünkben. Mint látod, a bejegyzésünk kinézete hm…. eléggé kivetnivalót hagy maga után. Mi van akkor, ha egy hatalmas Hero képet szeretnénk a tetejére? Ebben az esetben ezzel a sablonnal, amint a kiemelt képet beállítjuk és elmentjük, amint megtekintjük az új formáját, láthatjuk, hogy kaptunk egy hatalmas Hero szekciót, ami teljesen automatikusan történik a maga módján, ez sablon specifikus. Sajnos az overlay színnel ebben az esetben sokat még nem tudunk kezdeni, de ez csak egy apró tipp illetve trükk, hogy hogyan lehet ezt kezelni.

A +1 tippem egy kicsikét inkább a technikai, vagy azoknak szól, akik még nem szeretnék a Gutenberg szerkesztőjét használni, ugyanakkor nem okvetlenül szeretnének tőle teljesen megválni, erre van egy bővítmény, amit úgy hívnak, hogy Classical editor, ami ha jól tudom 2020. december végéig lesz támogatva, tehát 2021-től már nem lesz támogatott, ugyanakkor egy nagyon gyorsan telepíthető kis valamiről van szó, de ezt máris megmutatom, hogy milyen beállítási opciókat lehet benne alkalmazni. Hogy fog kinézni az élmény, ugyanis itt is van még néhány apróság, amit eddig nem láthattál. Kezdjük is az elején a dolgokat: amint a bővítmények menübe megyünk, és az új hozzáadásával telepítjük a classical editor nevezetű bővítményt, ezt aktiválhatjuk, és innentől fogva lesz egy pár új lehetőségünk.

Alapállapotban, ha ezt aktiváljuk, ez teljesen átveszi az irányítást a bejegyzéseink fölött és minden a jól megszokott hétköznapi módon fog történni. Ugyanakkor, ha beállításokkal kezdjük a klasszikus szerkesztőhöz, akkor megadhatjuk neki azokat a kis apróságokat, ami esetleg fontos lesz mindarra, hogy a jövőben hogyan szeretnénk kezelni a bejegyzéseinket, mind pedig arra, hogy ha esetleg szeretnénk más-más bejegyzést más és más módon kezelni. Tehát amint láthatod, be lehet állítani, hogy az alapszerkesztő melyik legyen egy új bejegyzés létrehozásánál, ugye legyen a klasszikus, már jól megszokott, vagy legyen az új blokkszerkesztő, a Gutenberg használata.

Ez mind szép és jó, de még mindig, ha ezt így az alapállapotban hagyjuk, nem lesz lehetőségünk váltani a kettő között. A következő opció ez a Allow user to switch editors lesz ami számunkra nagyon fontos, mert alapállapotban „nem” vagy „no” –ra van állítva, amint ezt „igen” vagy „yes”-re állítjuk, abban a pillanatban lehetőségünk lesz váltani a két szerkesztő között egy elég dinamikus módon. Ha visszamegyünk a bejegyzésekhez, és megnézzük – amint az egerünket fölé húzzuk egy bejegyzésnek – látható, hogy van két szerkesztési lehetőségünk: block editorral vagy klasszikus editorral. Na mármost meg kell jegyeznem, hogy ha esetleg egy klasszikus szerkesztőt használtunk, és átmegyünk block szerkesztőbe akkor van egy classical nevezetű blokk, ami lényegében mimikázza a klasszikus szerkesztőt, tehát nem fogunk elveszíteni semmit sem.

Na most ebben az esetben maradjunk a block szerkesztőnél, és amint ez elindult, a már eddig is megszokott módon láthatjuk, viszont itt jön a picike trükköcske, amint a jobb oldalon a hétköznapi dolgokat megnézzük, lett egy új lehetőségünk: mégpedig a Switch to classical editor, amit ha megnyomom, átvált a hétköznapi klasszikus szerkesztőre. Most itt látható, hogy vannak olyan dolgok, amiket nem okvetlenül kezel a már megszokott módon, viszont ugyanitt a Switch to block editorral vissza tudok váltani block szerkesztőre és láthatod, hogy minden ugyanott maradt, ahol van.

Remélem tetszett ez a gyors kis videó, és minden egyes tipp, amit itt most kaptál, meggyorsítja, vagy elősegíti egyrészt az élményedet a Gutenberg szerkesztővel, másrészt pedig egy jobb körképet ad, hogy miért is jó a Gutenberg szerkesztő, még ha nem is okvetlenül mindenre így első körben, de nagyon sok mindenre jó lesz a jövőben.

További szép napot, szia!

Ezek is   érdekesek lehetnek számodra: