Vahetasid teemat ja tuttav redaktor muutus võõraks plokikangaks? Igaüks, kes Gutenbergi esimest korda avab, kogeb seda tardumust. Tuttavad nupud kadusid, Metaboxi väljad liikusid ja lihtsa postituse loomine võtab kaks korda kauem aega.

Aga siin on tõde: WordPressi plokiredaktor on kiireim viis sisu kujundamiseks ilma koodita. Praktikas oleme leidnud, et pärast paari tundi plokkidega töötamist ei taha sa enam klassikalise redaktori juurde tagasi minna. Ja kui tead kiirklahve ja mõnda nippi, hakkab Gutenberg töötama kiiremini kui ükski leheehitaja.

Sellest juhendist leiad plokiredaktori täieliku lahtiseletuse: alates esmakäivitusest kuni kiirklahvideni. Ei mingit teooriat teooria pärast, vaid konkreetsed sammud, mida saad oma saidil korrata.

💡 Kiire ülevaade:

• Ava redaktor: Postitused → Lisa uus ja maandud Gutenbergi plokiliideses
• Lisa sisu plokkide abil: iga lõik, pealkiri, pilt või nupp on eraldi liigutatav plokk
• Lisa plokke „+" ikooni või / klahvi kaudu, lihtsalt trüki vajaliku ploki nimi
• Seadista plokke külgriba kaudu: vormindus- ja stiilivalikud muutuvad sõltuvalt valitud ploki tüübist
• Õpi selgeks kiirklahvid: Shift + Alt + H (Windows) avab spikrilehe kõigi otseteedega

Mis on Gutenbergi redaktor

Gutenberg on WordPressi tuumikusse alates versioonist 5.0 sisse ehitatud plokisisuredaktor. Erinevalt klassikalisest TinyMCE redaktorist, kus kogu postitus oli üks tekstiväli, jagab Gutenberg sisu iseseisvateks plokkideks: lõigud, pealkirjad, pildid, galeriid, nupud, veerud ja kümned muud elemendid.

Iga plokki saab teistest sõltumatult liigutada, seadistada ja kujundada. Tulemus on kohe nähtav: see on visuaalne redaktor, mitte tekstiväli koos „Eelvaate" nupuga.

1. aasta seisuga on Gutenberg arenenud vastuolulisest uudsusest täisväärtuslikuks leheehitajaks. Täieliku saidiredaktori (Full Site Editing, FSE) kasutuselevõtuga on plokiredaktor liikunud postitustest ja lehtedest kaugemale. Nüüd saad selle kaudu redigeerida päiseid, jaluseid, postituste malle ja arhiive. Klassikaline redaktor on endiselt saadaval eraldi pluginana, kuid WordPress lõpetas selle ametliku toe juba 2022. aastal. Turvauuendusi antakse endiselt välja, kuid uusi funktsioone ei lisata.

Kui suhtud WordPressiga töötamisse tõsiselt, pole Gutenberg valik, vaid peamine tööriist. Selle õppimine on vaeva väärt kasvõi kiiruse pärast: kui oled sellega harjunud, valmivad postitused 2-3 korda kiiremini kui klassikalises redaktoris koos selle Metaboxi väljade kuhjaga.

Liides: esmakäivitus

Redaktori avamiseks mine Postitused → Lisa uus (või lehtede puhul Lehed → Lisa uus). WordPress laadib Gutenbergi koos tervituskuva ja tühja pealkirjaväljaga.

Paremal on kahe vahelehega külgriba: Postitus (või Leht) ja Plokk. Postituse vaheleht sisaldab üldisi seadeid: püsilink, kategooriad, märksõnad, esiletõstetud pilt, väljavõte ja avaldamise olek. Ploki vaheleht näitab konkreetse valitud ploki seadeid.

Pane tähele, et püsilingi väli on kohe saadaval, ilma eraldi klõpsuta pealkirjal. See säästab iga postituse puhul paar sekundit.

Tekstiplokkidega töötamine

Postituse pealkiri

Redaktori esimene plokk on pealkiri. Sisesta lihtsalt tekst ja see muutub automaatselt postituse H1-ks. Pealkirja kõrval on Muuda nupp, mis avab püsilingi redigeerimise otse plokis.

Vajuta Enter ja pealkirja alla ilmub uus lõiguplokk. Gutenberg säilitab klassikalise redaktori tuttava klaviatuurinavigatsiooni: Enter loob uue ploki, Backspace ühendab selle eelmisega.

Lõigud ja vormindamise tööriistariba

Vaikimisi uus plokk on Lõik. Kuid enne teksti sisestamist näitab Gutenberg valikuid: ploki saab muuta pealkirjaks, pildiks, galeriiks, kaanepildiks ja kümneteks muudeks tüüpideks.

Pärast teksti sisestamist ilmub vormindamise tööriistariba:

Tööriistariba võimaldab:

• Muuta lõik tsitaadiks, pealkirjaks, loendiks, koodiks või eelvormindatud tekstiks
• Rakendada paksu, kaldkirja, läbikriipsutust ja allajoonimist
• Joondada teksti vasakule, paremale, keskele või rööpselt
• Lisada link koos võimalusega avada see uuel vahekaardil
• Lisada reasisene pilt otse reale
• Dubleerida, liigutada või kustutada plokk
• Redigeerida plokki HTML-ina
• Salvestada plokk korduvkasutatavate plokkide hulka

Külgriba vahekaardil Plokk leiad täpsemad seaded: fondi suurus, esisuurtäht, tausta- ja tekstivärv, polsterdus ja kohandatud CSS-klass. Värve saab määrata mis tahes; palett ei piirdu teema eelseadistustega.

Piltide lisamine

Pilte saab lisada kolmel viisil: „+" ikooni → Pilt vahekaardi kaudu, lohistades faili töölaualt otse redaktorisse või kasutades lõigu sees klaviatuurikäsku /image.

Klõpsa suvalist „+" ikooni, vali vahekaart Pilt ja ilmub plokk kolme allikaga: laadi arvutist üles, vali meediateegist või kleebi URL-i kaudu.

Ploki valimine sisestusmenüü kaudu on kõige visuaalsem meetod, eriti alguses. Kui oled sellega harjunud, lähed üle käsule /image, kuid visuaalne menüü jääb alati kättesaadavaks.

Pärast pildi lisamist pakub külgriba: alt-tekst (kriitilise tähtsusega SEO ja ligipääsetavuse jaoks), suurus, kuvasuhe ja stiilid (ümardamine, duotoon, varjud ja äärised).

Tavaline meediafailide dialoog on klassikalisest redaktorist tuttav; siin saad määrata pealkirja ja kirjelduse. Kuid peamised seaded on nüüd koondatud ploki külgribale.

Praktikas soovitame alati täita alternatiivteksti: see aitab nii otsingumootoreid kui ka ekraanilugeja kasutajaid. Kirjeldus peaks olema konkreetne, 4-8 sõna pikk ning sisaldama jaotise märksõna.

Allalaaditavad failid

Faili plokk võimaldab lisada PDF-i, ZIP-faili, pildi või mis tahes muu faili, mida lugejad saavad alla laadida.

Laadi fail üles või vali see meediakogust; Gutenberg loob automaatselt allalaadimisnupu.

Nupu tekst ja failinimi on muudetavad. Kohandatud kujunduse jaoks saad lisada CSS-klassi. Vaikimisi avaneb nupp uuel vahekaardil.

Tsitaadid ja esiletõstetud märkused

Tsitaadi plokk lisab kujundatud tsitaadi. Erinevalt tavalisest lõigust on tsitaat visuaalselt esile tõstetud; teema rakendab sellele erilist vormindust.

Tsitaadi ploki külgribal saad seadistada taustavärvi, fonti ja polsterdust. Tsitaat võib näida osana sinu brändingust, mitte standardse halli plokina.

Tsitaat mahutab sama teksti mis lõik, kuid eristub visuaalselt. Lisaks tavalisele tsitaadile on olemas ka esiletõstetud tsitaat (suurem esiletõste) ja salmiplokk (luule jaoks, mis säilitab tühikud ja reavahetused).

Video ja välise sisu manustamine

Gutenberg toetab sisu manustamist enam kui 30 platvormilt: YouTube, Vimeo, Twitter, Facebook, SoundCloud, WordPress.tv, Slideshare ja teised. Protsess on kõigi puhul sama: lisa Manusta plokk, vali platvorm, kleebi URL ja klõpsa Manusta.

Kleebi URL, klõpsa Manusta ja ongi valmis. Gutenberg tõmbab YouTube'ist automaatselt sisse eelvaate, pealkirja ja video pisipildi.

Video kuvatakse otse redaktoris; eelvaadet saad vaadata halduspaneelilt lahkumata. YouTube'i puhul on saadaval seaded: peida juhtelemendid, luba automaatesitus või määra algusaeg.

Nupud ja tegevusele kutsuvad elemendid

Nuppude plokk loob ühe või mitu nuppu reas. Ideaalne tegevusele kutsumiseks: „Laadi alla", „Registreeru", „Mine WordPress.org-i".

Sisesta tekst, kleebi URL ja seadista stiil: täidetud, kontuuriga, nurga ümardus, suurus. Nupud kohanduvad automaatselt mobiiliga; kitsastel ekraanidel venivad need täislaiuseks.

Gutenberg kontrollib nupu teksti ja tausta kontrastsust: kui värvikombinatsioon on loetamatu, kuvab redaktor hoiatuse. Väike detail, kuid säästab aega ligipääsetavuse kontrollimisel.

Veerud ja ruudustikud

Veerud plokk loob 2-6 veeruga ruudustiku. Igasse veergu saad lisada mis tahes muu ploki: lõigu, pildi, nupu või tsitaadi.

Vaikimisi luuakse kaks veergu, kuid ploki seadetes saad muuta nii veergude arvu kui ka iga veeru laiust.

Mobiilseadmetes paigutuvad veerud automaatselt vertikaalselt üksteise alla; sisu ei lagune laiali ja jääb loetavaks. Varem nõudis see CSS-i meediapäringuid, kuid nüüd töötab see kohe karbist välja võttes.

Meedia + tekst: pilt teksti kõrval

Meedia ja tekst plokk on vormindamise jaoks üks kasulikumaid: pilt või video vasakul (või paremal), tekst koos nupuga paremal (või vasakul).

Lae üles pilt, lisa tekst ja soovi korral nupp. Pooli saab vahetada ühe klõpsuga.

Ja siin on, kuidas see esilehel välja näeb:

See näeb professionaalne välja ja selle loomine võtab vaid minuti. Sellise paigutuse jaoks pole ühtegi lehe koostajat vaja.

Kolmandate osapoolte plokid: pistikprogrammid laiendavad Gutenbergi

Paljud pistikprogrammid lisavad Gutenbergile oma plokke. WooCommerce on kõige silmapaistvam näide: pärast pistikprogrammi paigaldamist ilmuvad redaktorisse plokid toodete, ostukorvi, filtrite ja poe kategooriate lisamiseks.

Jetpack lisab plokid vormide, tellimuste ja sotsiaalmeedia ikoonide jaoks. Yoast SEO manustab loetavuse analüüsi ja SEO nõuanded otse redaktori külgribale. Contact Form 7 pakub kontaktvormi plokki.

Põhimõte on igal pool sama: paigalda pistikprogramm ja plokid ilmuvad sisestusmenüüsse. Lisakoodi pole vaja.

Klaviatuuri otseteed ja näpunäited

Kõige kasulikum Gutenbergi nipp on / klahv. Kui oled ükskõik millises lõigus, trüki / ja hakka sisestama ploki nime. Redaktor näitab sobivaid valikuid; vali nooleklahvidega ja vajuta Enter.

Näiteks: /image → pildiplokk, /heading → pealkiri, /table → tabel, /column → veerud. Pärast nädalast kasutamist kiirendab see trikk sinu tööd märgatavalt.

Täielik klaviatuuri otseteede nimekiri: Shift + Alt + H (Windows) või Opt + Ctrl + H (Mac). See avab spikrilehe kõigi otseteedega alates plokkide liigutamisest kuni redigeerimisrežiimide vahetamiseni.

Veel mõned võtted, mida me praktikas kasutame:

• Ctrl + Shift + D: kopeeri valitud plokk
• Ctrl + Alt + T: lisa uus plokk praeguse ette
• Ctrl + Alt + Y: lisa uus plokk praeguse järele
• Klõpsa ülemisel tööriistaribal ikooni i: näita dokumendi struktuuri (pealkirjad, sõnade arv, lõigud)
• Loendivaade (kolme joonega ikoon üleval vasakul): navigeeri kõigis postituse plokkides nagu puus, mugav pikkade artiklite puhul

Ja lõpetuseks: tõrge „Update failed" on tavaliselt põhjustatud ebastabiilsest internetiühendusest, mitte redaktori probleemist. Kontrolli oma ühendust ja proovi uuesti salvestada.

Video: Gutenberg 15 minutiga

Tahad seda kõike töös näha? See lühike video WPBeginnerilt näitab täielikku postituse loomise tsüklit Gutenbergis alates esimesest plokist kuni avaldamiseni:

⁉️🤔 Korduma kippuvad küsimused

Kas ma pean Gutenbergi eraldi installima?

Ei, plokiredaktor on WordPressi tuumasse sisse ehitatud alates versioonist 5.0 (välja antud detsembris 2018). Kui sul on hiljutine WordPressi versioon, siis Gutenberg juba töötab. Eraldi Gutenbergi plugin on olemas ainult neile, kes soovivad uusi plokke testida enne nende tuumasse lisamist.

Kas ma saan klassikalise redaktori juurde tagasi minna?

Jah, installi tasuta Classic Editor plugin. See lülitab Gutenbergi täielikult välja ja taastab tuttava TinyMCE. Kuid pea meeles: WordPress lõpetas ametlikult klassikalise redaktori toe 2022. aastal. Praegused WordPressi versioonid (6.x aastal 2026) töötavad endiselt Classic Editoriga, kuid uued funktsioonid (Full Site Editing, Block Themes, Patterns) on saadaval ainult Gutenbergis.

Kuidas erineb Gutenberg Elementorist või Divist?

Gutenberg on sisseehitatud WordPressi sisuredaktor: tasuta ja ilma väliste sõltuvusteta. Elementor ja Divi on kommerts-leheehitajad, millel on laiemad disainivõimalused: hüpikaknad, liugurid, turundusintegratsioonid. Tüüpilise ajaveebi või ettevõtte saidi jaoks katab Gutenberg peamised küljendusülesanded. Kui sa teenid oma saidiga raha (pood, sihtlehed, funnelid), pakub leheehitaja rohkem paindlikkust. Hea uudis: Gutenberg ja leheehitajad töötavad samaaegselt. Sa võid lehti ehitada Elementoris, samal ajal kui postitusi haldad plokiredaktoris.

Mis siis, kui plokid kattuvad või purunevad mobiilis?

Tavaliselt on probleem teemas, mitte Gutenbergis. Kontrolli: (1) kas sinu aktiivne teema toetab plokiredaktorit (Block Themes tagavad korrektse küljenduse); (2) kas kohandatud CSS kirjutab üle ploki polsterduse ja laiuse. Lülitu testimiseks standardsele Twenty Twenty-Four teemale; kui plokid kuvatakse korrektselt, on probleem sinu teemas.

Kuidas lisada plokki, mida pole vaikimisi komplektis?

Kaks võimalust: (1) otsi pluginat, mis lisab vajaliku ploki (näiteks Otter Blocks või Spectra pakuvad kümneid lisablokke), või (2) loo kohandatud plokk Advanced Custom Fields (ACF) kaudu, mis on lihtsam kui ploki kirjutamine Reactis. Enamiku ülesannete jaoks piisab pluginatest: installi ja kasuta.

Kas Gutenberg töötab kohandatud postitüüpidega (CPT)?

Jah, täielikult. CPT registreerimisel määra 'show_in_rest' => true ja 'supports' => array('editor') ning plokiredaktor lülitub automaatselt sisse. Olemasolevate CPT-de jaoks, millel puudub REST API tugi, on adapterpluginad, kuid parem on postitüübi registreerimist uuendada.

Mida valida: Gutenberg või leheehitaja

Gutenberg on arenenud eksperimentaalsest „funktsioonist" küpseks redaktoriks, mis toidab miljoneid saite. Sisu loojate jaoks tähendab see otsest tootlikkuse kasvu: visuaalne küljendus, kohene eelvaade ja klaviatuuri otseteed säästavad iga postituse pealt 30 kuni 60 minutit võrreldes klassikalise redaktori ja shortcode'i pluginatega.

Kui haldad ajaveebi, uudiste saiti või ettevõtte portaali, katab Gutenberg peamised ülesanded. Tasuta, ilma välise koodita ja ilma täiendava serverikoormuseta.

Kui ehitad keerulisi sihtlehti, kohandatud küljendustega veebipoodi või turundusfunnel'eid, vaata leheehitajaid. Igapäevaseks sisutööks käivita Gutenberg, trüki /heading ja lihtsalt hakka kirjutama.