{"language":"sk","path":"/sluzby/gutenberg-bloky/","switchPath":"/en/services/custom-gutenberg-blocks/","kind":"service","tags":["wordpress","blocks","editor"],"title":"Vlastné Gutenberg bloky | ACF Composer a dynamické bloky | Šimon Cihra","metaDescription":"Vlastné Gutenberg bloky cez ACF Composer: PHP triedy, dynamické bloky s renderom na serveri a náhľad v editore. Knižnica blokov namiesto page builderu.","kicker":"Gutenberg bloky","h1":"Prečo musí redaktor skladať stránku z pluginov namiesto pripravených blokov?","lead":"Staviam vlastné Gutenberg bloky moderným spôsobom: PHP triedy cez ACF Composer, dynamické bloky s renderom na serveri, verný náhľad priamo v editore a knižnicu blokov, ktorá sa opakuje naprieč webmi jedného klienta.","intro":["Väčšina firemných webov na WordPresse dnes vyzerá rovnako zvnútra: k téme je pribalený page builder, k builderu sada doplnkov a k doplnkom ešte jeden plugin na ikonky. Redaktor potom skladá stránku z desiatok nastavení, ktoré nikto nedokumentoval, a každá sekcia sa dá vyrobiť tromi rôznymi spôsobmi. Výsledok je na pohľad použiteľný, no v HTML je päť vnorených divov navyše, na mobile sa načítava pol megabajtu CSS pre funkcie, ktoré web nikdy nepoužije, a pri aktualizácii buildera sa rozpadne rozloženie na stránkach, ktoré sa roky nemenili.","Gutenberg tento problém rieši inak. Editor je súčasťou WordPressu, takže netreba tretiu vrstvu medzi obsahom a šablónou. Bloky, ktoré redaktor vidí, si viem definovať sám: presne toľko polí, koľko dáva zmysel, presne tie varianty, ktoré má značka schválené, a žiadne nastavenie navyše. Bloky píšem ako PHP triedy cez ACF Composer, obsah sa renderuje na serveri a v editore vyzerá rovnako ako na webe. Redaktor tak nemá slobodu rozbiť dizajn, ale má slobodu pridať ľubovoľnú stránku bez toho, aby ma musel volať."],"sections":[{"title":"Vlastný blok verzus page builder","paragraphs":["Page builder je univerzálny nástroj, ktorý musí zvládnuť každý web na svete, takže do každého projektu prinesie aj to, čo nepotrebuje. Vlastný blok je opak: robí jednu vec, má pomenované polia a generuje presne to značkovanie, ktoré téma očakáva. Redaktor nevyberá typ písma ani vnútorné odsadenie, pretože tie patria dizajnovému systému, nie obsahu. Zvyčajne stačí desať až pätnásť blokov na to, aby sa dal poskladať celý web, a práve toto obmedzenie drží stránky konzistentné aj po dvoch rokoch a piatich ľuďoch v administrácii."],"points":["Jeden blok, jedna úloha a pomenované polia","Značkovanie zodpovedá téme, nie generickému builderu","Redaktor nemôže omylom rozbiť dizajn","Bez stoviek kilobajtov CSS a JS navyše","Desať až pätnásť blokov pokryje bežný firemný web"]},{"title":"Bloky ako PHP triedy cez ACF Composer","paragraphs":["Bloky nedefinujem klikaním v administrácii, ale kódom. ACF Composer dá každému bloku vlastnú PHP triedu, v ktorej sú deklarované polia, náhľadové dáta aj podpory editora, a k nej patrí Blade šablóna. Definícia tak žije v gite spolu so zvyškom témy, dá sa revidovať v pull requeste a prenesie sa na staging aj produkciu nasadením, nie exportom JSON súboru cez administráciu. Keď sa blok zmení, zmena je viditeľná v histórii a vie sa vrátiť späť. To je rozdiel medzi témou, ktorú vie prevziať iný vývojár, a témou, ktorú treba dešifrovať z databázy."],"points":["Polia a nastavenia bloku v PHP triede","Šablóna bloku ako Blade komponent","Celá definícia v gite, nie v databáze","Rovnaká sada blokov na stagingu aj v produkcii","Prevzatie iným vývojárom bez archeológie"]},{"title":"Dynamické bloky s renderom na serveri","paragraphs":["Statický blok uloží hotové HTML do obsahu príspevku, čo je pri jednoduchom texte v poriadku, ale pri čomkoľvek živom je to pasca. Ak sa má blok pýtať na najnovšie články, produkty z kategórie, referencie alebo termíny, HTML v databáze zastará v momente uloženia. Dynamický blok ukladá iba nastavenia a obsah sa vykreslí až pri zobrazení stránky. Zmena šablóny sa tým premietne do všetkých existujúcich stránok naraz a nie je potrebná migrácia obsahu. Rovnako sa dá blok jednoducho preložiť, keďže texty prichádzajú zo šablóny a nie sú zamrznuté v starom uloženom výstupe."],"points":["V databáze sú uložené nastavenia, nie zastarané HTML","Výpisy článkov, produktov a referencií vždy aktuálne","Zmena šablóny prejde všetkými stránkami naraz","Ľahšie preklady a jazykové mutácie","Bez migračných skriptov pri každej úprave dizajnu"]},{"title":"Náhľad v editore, ktorý zodpovedá webu","paragraphs":["Najčastejšia sťažnosť na vlastné bloky je, že sa v editore zobrazia ako sivý obdĺžnik s nápisom a redaktor musí ukladať a obnovovať stránku, aby zistil, ako to vyzerá. Tomu sa dá predísť. Blok renderujem v editore rovnakou šablónou ako na webe, doplním náhľadové dáta pre prázdny stav a štýly editora natiahnem z rovnakého zostavenia ako frontend. Redaktor tak píše priamo do toho, čo návštevník uvidí. Pri odovzdaní k tomu pridávam krátky popis každého bloku a ikonu, aby bolo z vkladacieho panela jasné, na čo blok slúži."],"points":["Rovnaká šablóna v editore aj na webe","Náhľadové dáta pre prázdny a nový blok","Štýly editora z rovnakého buildu ako frontend","Popis a ikona pri každom bloku","Redaktor nemusí ukladať, aby videl výsledok"]},{"title":"Knižnica blokov naprieč webmi klienta","paragraphs":["Najväčšia úspora nevzniká na prvom webe, ale na treťom. Pre klienta, ktorý prevádzkuje viac stránok na rovnakej platforme, som postavil knižnicu blokov s hero sekciou, kartami, často kladenými otázkami a galériou, ktorá sa používa na všetkých šablónových weboch. Nový web sa potom nezačína prázdnou témou, ale hotovou sadou, do ktorej sa dopĺňa len to, čo je pre daný projekt naozaj špecifické. Ceny sú vrátane DPH. Cenu nového bloku aj základnej knižnice pre web dostanete písomne vopred po krátkej analýze."],"points":["Hero, karty, FAQ a galéria ako spoločný základ","Nový web začína hotovou sadou blokov","Oprava v knižnici sa prejaví na všetkých weboch","Cena bloku písomne vopred","Pevná cena za knižnicu, vrátane DPH"]}],"faqTitle":"Časté otázky o Gutenberg blokoch","faq":[{"question":"Nahradia vlastné bloky Elementor alebo WPBakery?","answer":"Vo väčšine firemných webov áno a stránka sa po výmene výrazne zrýchli. Builder je vhodný, keď si má obsah skladať niekto bez vývojára a dizajn nie je pevne daný. Ak má web brand manuál a opakujúce sa sekcie, vlastné bloky sú lacnejšie na údržbu."},{"question":"Je potrebné ACF Pro alebo sa dá blok spraviť aj bez neho?","answer":"Bloky sa dajú písať aj čisto v Reacte bez ACF, no pre bežný firemný web je to drahšie riešenie. ACF Pro s ACF Composerom umožní definovať polia aj šablónu v PHP, takže vývoj aj neskoršie zmeny sú výrazne rýchlejšie a lacnejšie."},{"question":"Čo sa stane s obsahom, keď blok neskôr zmeníme?","answer":"Pri dynamických blokoch sa v databáze drží iba nastavenie, takže úprava šablóny sa premietne do všetkých stránok naraz bez migrácie. Ak sa pridá nové pole, doplní sa mu predvolená hodnota, aby staršie stránky ostali funkčné."},{"question":"Zvládne redaktor vlastné bloky bez školenia?","answer":"Zvyčajne áno, pretože blok má menej nastavení než ktorýkoľvek builder. Pri odovzdaní prechádzam každý blok, jeho polia a náhľad. Ak má tím viac ľudí, pripravím aj krátku písomnú dokumentáciu priamo v administrácii."},{"question":"Koľko stojí sada vlastných blokov?","answer":"Cena jedného bloku závisí od jeho zložitosti a vrátane DPH ju dostanete písomne vopred. Rovnako vopred nacením aj základnú knižnicu pre firemný web. Cenu mení počet variantov a dynamické výpisy."}],"relatedTitle":"Súvisiace služby","related":[{"label":"Všetky služby","href":"/sluzby/","description":"Prehľad webových služieb a možností spolupráce."},{"label":"Headless WordPress","href":"/sluzby/headless-wordpress/","description":"Obsah vo WordPresse, moderný frontend bez obmedzení."},{"label":"WordPress multisite","href":"/sluzby/wordpress-multisite/","description":"Jedna inštalácia, viac webov a domén pod jednou správou."},{"label":"Vlastný e-shop","href":"/sluzby/eshop-na-mieru/","description":"Predávať online tak, ako naozaj predávate, nie podľa šablóny."},{"label":"PHP vývoj","href":"/sluzby/php-vyvoj/","description":"Vlastné pluginy, serverová logika a záchrana starého kódu."}],"ctaTitle":"Chcete editor, v ktorom sa stránka poskladá za desať minút?","ctaText":"Napíšte mi, aké sekcie sa vám na webe opakujú a čo dnes redaktori riešia najťažšie. Navrhnem sadu blokov, ktorá to pokryje, a poviem, koľko to bude stáť.","ctaLabel":"Prebrať bloky"}