WordPress blokkeditor (Gutenberg) 2026: gyakorlati útmutató

Ha pár éve még úgy voltál vele, hogy „jó, jó a Gutenberg, de én csak posztot írok benne”, akkor 2026-ra ideje újranézni. A blokkeditor mára nem egy fancy bejegyzésszerkesztő, hanem egy komplett site building eszközkészlet: blokkok, patternök, sablonok (templates), sablonrészek (template parts), globális stílusok, és fejlesztőként a theme.json.

Ebben a cikkben azt mutatom meg, hogyan érdemes használni a blokkeditort a mindennapokban, és mik azok a trükkök, amikkel gyorsabb, konzisztens és átadható (ügyfélbiztos) WordPress oldalakat tudsz összerakni.

Mi az a WordPress blokkeditor (és miért nem csak „Gutenberg”)?

A blokkeditor a WordPress core része (WordPress 5.0 óta), és a lényege, hogy a tartalom és a layout blokkokból épül fel. Egy bekezdés egy blokk, egy kép egy blokk, egy gomb egy blokk, és így tovább. A blokkokat egymásba is lehet ágyazni (pl. Columns → Column → Image + Paragraph).

Ami igazán nagy váltás: a blokkos gondolkodás nem áll meg a bejegyzésnél. Blokkokkal tudsz template-eket (pl. egy single post sablon), template partokat (pl. header/footer), sőt teljes oldalszintű stílusokat is kezelni a Site Editor-ban.

Alapfogalmak, amiket érdemes tisztán látni

• Block (blokk): a legkisebb építőelem (Paragraph, Image, Columns, Button, Query Loop stb.).
• Block pattern (minta/pattern): előre összerakott blokk-csomag, amiből komplett szekciót dobsz be (hero, pricing, gallery, CTA).
• Template (sablon): egy adott tartalomtípus megjelenési váza (pl. single post, archive, 404, search results).
• Template part (sablonrész): újrahasznosítható, globális rész (header, footer, sidebar jellegű részek).
• Site Editor: az a felület, ahol a template-eket, template partokat és a globális stílusokat szerkeszted — ehhez általában block theme kell.
• Synced pattern (korábban reusable block): olyan pattern, amit több helyen használsz, és ha egyet módosítasz, mindenhol frissül.

Előnyök és kompromisszumok fejlesztői szemmel

Amiért sok esetben megéri blokkokra váltani

• Gyorsabb workflow: patternök, synced patternök, billentyűparancsok, drag&drop, és a dokumentumok (pl. Google Docs) okos beillesztése miatt.
• Full Site Editing (FSE): header/footer/template szerkesztés kód nélkül is, ami ügyfélátadásnál aranyat ér.
• Teljesítmény: sok oldalon kiváltja a nehéz page builder stackeket; a kimenő markup gyakran tisztább, kevesebb plugin kell.
• Ökoszisztéma: WooCommerce, Jetpack és rengeteg plugin ad saját blokkokat/patternöket.
• Folyamatos fejlődés: a core csapat elég agresszíven tolja előre a blokkos irányt.

Ahol fájhat (és amire készülj)

• Téma- és szerkezetváltás: ha régi, klasszikus témáról jössz, lehet, hogy részben újra kell építeni szekciókat. A Site Editorhoz tipikusan block theme kell.
• Tanulási görbe: a felület gyors, de a logika (nested blokkok, List View, template hierarchia) eleinte szokatlan.
• 3rd-party blokkok minősége: egy rosszul megírt blokk tud lassítani, törni, vagy furán renderelni. Érdemes szelektálni.

A blokkeditor felülete: mit hol találsz (és mi mire jó)

Na, nézzük meg a mindennapi „hol a fenében van ez a beállítás?” kérdéseket.

A blokkeditorban tipikusan ezekkel fogsz dolgozni:

• Block Inserter (+): itt veszel fel új blokkokat és patternöket, keresővel.
• List View: a legjobb barátod hosszú oldalaknál; hierarchiában látod a blokkokat, és draggel rendezheted őket.
• Settings panel (jobb oldalt): két füllel: Post/Page beállítások és Block beállítások. Itt jön a színezés, spacing, typó, advanced.
• Toolbar a blokk felett: gyors műveletek (átalakítás más blokk típusra, igazítás, link, duplikálás, lock, stb.).
• Details: statisztikák (szószám, olvasási idő, blokkok száma).
• More options (⋮): nézetváltás, Code Editor, preferenciák.

How-To: bejegyzés összerakása blokkokból (a tipikus workflow)

A példa most egy sima blogposzt lesz, de ugyanígy működik oldalnál, landingnél, sőt sokszor template-eknél is.

Útvonal: Bejegyzések → Új hozzáadása (Posts → Add New).

1) Cím + első blokk beszúrás

Add meg a címet, majd kattints a bal felső + ikonra (Block Inserter), és dobj be egy Paragraph blokkot. Alternatíva: kattints a szerkesztőbe és írd be, hogy /paragraph vagy csak kezdj el gépelni — a WordPress sokszor kitalálja, mit akarsz.

2) Gyors formázás a toolbarból, finomhangolás a jobb oldali panelen

Ha beleállsz egy blokkba, felül megjelenik a mini toolbar (félkövér, dőlt, link, igazítás, blokk típus váltás, stb.).

A részletesebb dolgok (színek, typó, padding/margin, CSS class, anchor) a jobb oldali Settings panelen vannak a Block fül alatt.

Színek, typó, spacing: a három leggyakoribb állítás

A blokkeditorban a „designolás” nagy része három helyen történik:

– Color: szöveg/háttér/link színek, akár gradient.
– Typography: betűméret, font family (ha engedélyezett), line-height, letter-spacing.
– Dimensions: padding/margin.

Tipp: ha azt látod, hogy túl sok mindent lehet állítani és az ügyfél szét fogja csúsztatni a dizájnt, akkor ezt inkább globális stílusokkal és theme.json-nal érdemes korlátozni (erről lentebb).

3) Oszlopok: tipikus „kép + szöveg” layout

Jöhet a klasszikus marketing layout: balra kép, jobbra szöveg.

– Szúrj be egy Columns blokkot.
– Válassz elrendezést (pl. 33/66).
– A bal oszlopba Image, a jobb oszlopba Paragraph (vagy bármi más).

4) Preview + Publish

Mielőtt élesítesz, nézd meg a frontendet. A Preview → Preview in a new tab általában pontosabb képet ad, mint a beépített mini preview.

Ha oké, mehet a Publish.

Block patternök: amikor nem akarsz mindent nulláról összerakni

A patternök arra valók, hogy komplett szekciókat dobj be 1 mozdulattal. Ez nem „csalás”, hanem workflow.

Lépések:
– Nyisd meg a Block Insertert (+)
– Válts a Patterns fülre
– Szűrj kategóriára vagy keress
– Drag&drop a szerkesztőbe, majd cseréld a placeholder tartalmat

Site Editor: template-ek és template partok szerkesztése block theme-mel

Na most jön a lényeg: ha block theme-et használsz, akkor a WordPress adminban megjelenik az Megjelenés → Szerkesztő (Appearance → Editor). Ez a Site Editor, ahol a teljes site struktúráját tudod blokkosan kezelni.

Itt két fontos menüpont van:
– Templates: sablonok
– Template Parts: sablonrészek (header/footer stb.)

Template szerkesztés példa: Single (blogposzt) sablon

Ha megnyitod a Single template-et, általában találsz benne olyan blokkokat, mint:
– Featured image
– Post title
– Post content
– Post meta
– Comments

Ezeket tudod átrendezni, stílusolni, vagy kiegészíteni új blokkokkal.

CTA minden poszt aljára: egyszer beállítod, és kész

Ez az egyik legjobb „miért nem csináltam eddig?” use-case.

A Single template aljára beszúrsz egy CTA pattern-t (vagy saját blokkcsomagot), és onnantól minden blogposzt automatikusan megkapja.

Template Parts: header/footer globális szerkesztése

A Template Parts alatt például a Header-t megnyitva látod, milyen blokkokból áll a fejléc (Site Title, Navigation, stb.). Amit itt módosítasz, az az egész site-on átmegy.

Példa: keresőmező a menübe.

A Navigation blokkban a menüpontok végén megjelenik egy + (gyakran fekete). Ezzel nem csak linket, hanem blokkokat is be tudsz szúrni (pl. Search, button, social ikonok).

10 haladó tipp, amitől tényleg gyorsabb leszel Gutenbergben

1) Billentyűparancsok: a legolcsóbb sebességboost

Ha sokat szerkesztesz, a shortcutok rengeteget számítanak. Pár hasznos (Windows):

– Settings panel ki/be: Ctrl + Shift + ,
– Mentés: Ctrl + S
– Undo: Ctrl + Z
– Blokk duplikálás: Ctrl + Shift + D

A teljes lista: WordPress keyboard shortcuts.

2) Globális stílusok a Site Editorban: brand-konzisztencia kézzel foghatóan

Ha több szerkesztő dolgozik a site-on (vagy ügyfélnek adod át), a globális stílusokkal tudod „keretek közé” tenni a dizájnt.

Útvonal: Megjelenés → Szerkesztő → Styles (jobb felső ikon). Itt tudsz tipót, színeket, layoutot beállítani site-szinten, és block-szinten is (pl. a Button default színei).

3) Synced patternök: a „globális CTA” és társai

A synced pattern (régi nevén reusable block) akkor jó, ha ugyanazt a blokkcsomagot több helyen használod, és központilag akarod frissíteni.

Workflow:
– Rakd össze és stílusold a blokkot/blokkcsomagot
– Toolbar ⋮ → Create pattern / reusable block
– Adj neki nevet, mentsd
– Ezután a beszúrásnál külön listában eléred

4) Code Editor: amikor precízen akarsz belenyúlni

Fejlesztőként néha gyorsabb HTML-ben igazítani. A blokkeditorban van Code Editor mód:

⋮ (jobb felső) → Code Editor.

Figyelem: itt már könnyebb elrontani dolgokat, szóval éles oldalon mentés előtt backup erősen ajánlott.

5) List View: nested blokkoknál kötelező

A List View (három vonal ikon) az a funkció, amit ha megszoksz, nem akarsz nélküle dolgozni. Hierarchiában látod a blokkokat, ki tudod nyitni a beágyazott részeket, és draggel rendezhetsz.

6) Bővítsd a blokk/pattern készletet, de okosan

Három fő forrásból jönnek extra blokkok/patternök:

– Téma: sok block theme ad saját pattern library-t.
– Pluginok: WooCommerce, Jetpack, LMS-ek stb. gyakran hoznak blokkokat.
– Kifejezetten blokk pluginok: pl. Ultimate Blocks, Otter Blocks, CoBlocks, Kadence Blocks.

Tipp: fejlesztői projektnél érdemes limitálni, mit engedsz be, különben a szerkesztő „tele lesz mindennel”, és a csapat/ügyfél elveszik.

7) Google Docs beillesztés + drag&drop média

Ha tartalomgyártás Docs-ban történik, akkor a teljes doksit be tudod tolni a szerkesztőbe, és a WordPress blokkokra bontja (headings, linkek, képek). Ugyanez médiával: képet simán behúzol a gépedről, és lesz belőle Image blokk.

8) Query Loop: dinamikus listák postokból (és nem csak postokból)

A Query Loop blokk az egyik legerősebb core elem. Lényegében egy vizuális lekérdezés-szerkesztő: listázol vele posztokat, termékeket, egyedi post type-okat, szűrőkkel és rendezéssel.

Tipikus use-case: „legfrissebb hírek”, „kiemelt cikkek kategória szerint”, „termékek ár szerint”, „referenciák város alapján” (ha a data modell megvan hozzá).

9) theme.json: a „globális stílusok” fejlesztői szintje

A theme.json a block theme-ek központi konfigurációs fájlja. Itt tudod többek között:

– alap színpalettát adni
– font size scale-t definiálni
– letiltani az egyedi színeket (hogy ne legyen „szivárvány mód”)
– kurálni, milyen kontrollok látszanak a szerkesztőben

Fejlesztőként ez az egyik legjobb eszköz arra, hogy a szerkesztői élményt brand-kompatibilissé tedd, és ne CSS-hackekkel kelljen rendet tartani.

10) Block lock: védelem csapatmunkához és ügyfélátadáshoz

Ha nem akarod, hogy valaki arrébb húzza/törölje a kritikus részeket, lockold a blokkot:

Toolbar ⋮ → Lock → letiltod a mozgatást és/vagy törlést.

Core blokkok: mik vannak alapból (gyors áttekintés)

A WordPress core elég sok blokkot ad gyárilag. Fejlesztőként azért fontos ezt ismerni, mert sok plugin csak olyan dolgot „talál fel újra”, ami már eleve ott van.

Néhány gyakori kategória:

– Text: Paragraph, Heading, List, Quote, Code, Table
– Media: Image, Gallery, Video, Cover, Media & Text
– Design: Buttons, Columns, Group, Row, Stack, Separator, Spacer
– Widgets jelleg: Search, Latest Posts, Categories, RSS, Social Icons
– Theme blokkok: Navigation, Site Logo/Title/Tagline, Query Loop, Comments, Template Part

Plusz ott vannak az embed blokkok (YouTube, podcast platformok, social embedek, stb.).

Összefoglaló: hogyan állj neki 2026-ban Gutenberg projekttel?

1. Tartalomhoz használd bátran a blokkokat és patternöket, és szokj rá a List View-ra.
2. Ha full site kontroll kell, válts block theme-re, és dolgozz a Site Editorban template-ekkel/template partokkal.
3. Konzisztenciához globális stílusok + synced patternök; csapat/ügyfél esetén lockold a kritikus blokkokat.
4. Fejlesztőként a theme.json a kulcs: ezzel kurálod a szerkesztői lehetőségeket és a brandet.
5. Ne pluginokkal próbáld megoldani azt, amit a core már tud — de ha bővítesz, válogass minőségi blokkokból.