Site Editor odolný vůči klientům: Příručka k theme.json

Shrnutí

Když klient poprvé otevře Site Editor ve WordPressu, možnost upravovat každý blok, barvu a rozložení může pro něj vypadat jako výhoda – a pro vás jako hrozba. Tento článek vysvětluje, jak pomocí theme.json vytvořit jasnou hranici mezi editací obsahu a kontrolou designu. Místo boje se Site Editorem nastavíte předvolby, výchozí hodnoty a hranice, díky kterým je pro netechnické klienty bezpečné aktualizovat si vlastní web. Projdeme si, co zamknout, co nechat otevřené a proč je přehnané zamykání skutečným rizikem. Přístup je postaven na design tokenech a omezeních na úrovni šablon, takže funguje konzistentně napříč všemi klientskými weby, které spravujete. Na konci budete mít opakovatelný postup, jak předat Site Editor, aniž byste předali klíče od svého designového systému.

Co uděláte jako první, když vám klient napíše, že „jen zkoušel upravit titulek“ a celému webu se rozpadly mezery?

Pokud spravujete více než jeden web WordPress, pravděpodobně jste takovou zprávu už v nějaké podobě dostali. Site Editor dal vašemu klientovi klíče od auta s pěti rychlostmi a bez brzdy. Myslí si, že dělá jednoduchou změnu textu, a najednou je globální typografie rozhozená, hero sekce na úvodní stránce má neonovou barvu, kterou jste nevybrali, a dva bloky jsou místo vedle sebe pod sebou.

Mezitím přemýšlíte o šesti dalších klientských webech, které podporujete, a to poslední, co potřebujete, je past na údržbu, kde každá „užitečná“ klientská úprava vyžaduje obnovení ze zálohy.

Odpověď nespočívá v odebrání Site Editoru. Je nastavit v něm hranice pomocí theme.json. Podle WordPress Developer Resources je theme.json centrálním zdrojem pravdy pro nastavení a styly editoru bloků – definuje barevné palety, typografii a možnosti rozložení, které se klientovi zobrazují. To znamená, že stejný soubor, který řídí váš design, může také řídit, co váš klient může a nemůže upravovat.

Pojďme se podívat, jak o tom přemýšlet, protože většina návodů se zaměřuje na to, co theme.json umí pro vývojáře. Otázka pro agenturu je jiná: jak ho použít, aby byli klienti v bezpečí, aniž by se cítili zavřeni v kleci?

Proč se Site Editor zdá tak nebezpečný?

Váš klient se nesnaží rozbít web. Snaží se dělat to, k čemu jste ho roky vedli ve starém editoru: změnit titulek, vyměnit obrázek, případně přidat odstavec. Nebezpečí není v jeho záměru – ale v tom, že Site Editor zobrazuje globální ovládací prvky na stejném místě jako obsahové prvky.

Častý scénář: Klient otevře v Site Editoru šablonu a uvidí blok nadpisu. Změní jeho barvu, aby odpovídala novému firemnímu odstínu. Ale protože je nadpis v šabloně, změna se projeví všude, kde se šablona používá. Pro klienta to vypadalo jako jedna úprava. Pro web to byla globální změna.

Obecný princip: Když někomu dáte page builder, nakonec najde „nastavení s pojistkami“ a vypne je. Ale s theme.json můžete pojistky samotné skrýt. Místo toho, abyste klientovi říkali „nesahejte na globální styly,“ jednoduše mu nezobrazíte barevnou paletu, která může vést ke špatnému výsledku. Definujete paletu schválených barev, škálu velikostí písma a sadu předvoleb mezer – a klient vybírá z nich, ne z celého spektra CSS.

To je první posun: přestaňte přemýšlet o pravidlech a začněte přemýšlet o továrnách. theme.json je vaše výrobní linka. Nakonfigurujete možnosti, které klient vidí, a omezení vynucuje samotné rozhraní, ne sada pokynů v předávacím dokumentu.

Co byste měli vlastně zamknout?

Ne všechno. Pokud obsahovou oblast zamknete příliš, klient vám bude buď volat pokaždé, když potřebuje přidat odstavec, nebo si najde cestu kolem vás – často tím, že si přidá jednorázový plugin nebo zkopíruje HTML ze svého starého webu.

Tady je praktická tabulka toho, co zamknout, co nechat a proč:

Oblast úprav	Zamknout?	Proč
Struktura šablony a rozložení bloků	Zamknout	Zabraňuje náhodnému odstranění nebo přeuspořádání základních bloků rozložení
Globální styly (barvy, písma, předvolby mezer)	Zamknout pomocí předvoleb	Klienti vybírají ze schválené sady, ne z libovolných hodnot
Text a obrázky obsahu	Nechat otevřené	To je jejich práce; nechte je to dělat bez žádosti o povolení
Mezery mezi bloky	Částečně zamknout	Poskytněte předvolby mezer, aby mohli upravit rytmus bez rozbití zarovnání
Kurátorské vzory bloků	Nechat otevřené, pokud jste je prověřili	Bezpečný způsob, jak klienti přidávají nové sekce bez stavění od nuly

Důležitou nuancí je „zamknout pomocí předvoleb“, ne „zamknout ven.“ U globálních stylů neskrýváte panel nastavení; snižujete počet voleb na kurátorskou sadu. U struktury šablony můžete zamknout určité bloky, aby je nebylo možné odstranit, ale klientům stále umožnit editaci textu v nich.

Jedno varování: zamknutí bloku v šabloně se liší od zamknutí na konkrétní stránce. Zámky šablony ovlivňují veškerý obsah, který šablonu používá. Pokud potřebujete různé úrovně zámků na různých stránkách, budete muset pracovat na úrovni bloků v editoru, což je křehčí. Pro opakovatelnou práci agentury navrhněte šablony tak, aby zamčené oblasti byly konzistentní.

Jak nastavit hranice, aniž by editor působil jako past?

Technika spočívá v definování design tokenů v theme.json a poté v odolání tomu, abyste dělali cokoli jiného v CSS.

Například místo toho, abyste klientovi nechali nastavit libovolnou barvu na tlačítku, definujete v theme.json styl tlačítka, který používá konkrétní barvu z vaší palety. Klient stále může tlačítko vybrat a změnit jeho text, ale výběr barev zobrazí pouze vaše schválené odstíny. Stejné to je s velikostmi písma, řádkováním a mezerami.

Stejný princip platí pro šablony. Funkci „zámek“ můžete použít na konkrétní bloky v šabloně – například zamknout strukturu sloupců v bloku reference, aby klient mohl změnit text citace, ale ne přeměnit tři sloupce na dva. Pokud jste zamykání bloků ještě nepoužili, je k dispozici na panelu nástrojů editoru; když blok zamknete, můžete zvolit, zda klient může upravovat obsah, přesouvat jej nebo obojí. Toto lze dokonce nastavit v theme.json pro výchozí hodnoty na úrovni bloků.

Cílem je editor, kde klient nikdy nevidí ovládací prvek, který by mohl rozbít design. To neznamená, že nemůže udělat nic špatně; znamená to, že nejhorší špatná věc, kterou může udělat, je změnit formulaci nadpisu, ne vzhled celého webu.

Pokud používáte vlastní typy příspěvků, platí stejné principy i nad rámec výchozích šablon – podívejte se na našeho průvodce rozšířením theme.json na vlastní typy příspěvků a výstup pluginů.

Co se stane, když zamknete příliš mnoho?

Tady je opačný pohled: přehnané zamykání je stejně škodlivé jako nedostatečné. Klient, který nemůže změnit velikost nadpisu nebo přidat mezeru mezi sekcemi, vás nakonec požádá, abyste to „prostě udělali, aby to vypadalo správně“ – a pak jste zpátky u malých úprav zadarmo. Horší je, že se může rozhodnout, že je Site Editor k ničemu, a vrátit se k page builderu třetí strany, který mu opět dá příliš mnoho kontroly.

Kompromis je reálný. Uzamčené editory produkují méně havarijních hovorů, ale také více žádostí typu „můžete posunout to tlačítko o pět pixelů výš?“ Otevřené editory produkují opak. Vaším úkolem je najít rovnováhu pro každého klienta, ne aplikovat jedno univerzální nastavení.

Dobrá počáteční heuristika: zamkněte vše, co ovlivňuje všechny instance něčeho (globální styly, struktura šablon), a nechte otevřené vše, co ovlivňuje jednu instanci (text a obrázky jedné stránky). Pokud klient rozbije jednu stránku, je to oprava na 5 minut. Pokud rozbije globální styl, je to oprava na 20 minut a bezpečnostní problém.

Jak to udělat opakovatelné napříč klienty?

Tady přichází na řadu pracovní postup agentury. Měli byste mít základní theme.json, který definuje vaše design tokeny – barevnou paletu, typografickou škálu a předvolby mezer – a poté soubor přepsání pro každého klienta, který rozšiřuje nebo mění konkrétní hodnoty.

Začněte vytvořením „startovacího“ blokového motivu. Tady je návod, jak vytvořit vlastní blokový motiv s theme.json – jakmile ho vyvinete a zdokumentujete, zkopírování pro nového klienta je otázkou výměny značkových barev a písem. Neznovuobjevujete kolo; vyměňujete tokeny. To je přesně to přestaňte znovu vytvářet každý web WordPress myšlení, ale aplikované na editor spíše než na backend.

Protože je theme.json jediný soubor, je také snadné ho verzovat a nasazovat v různých prostředích. Můžete zkontrolovat změny, vidět, co klient upravil v globálních stylech, a porovnat tyto změny se svým základním souborem. To vám poskytne silný auditní trail pro požadavky na podporu.

Pokud spravujete více webů a zatím jste nenastavili základní motiv, je to vaše příležitost. Je to jeden kus vlastní práce na WordPressu, který se zaplatí pokaždé, když klient otevře editor.

Co s klienty, kteří se neustále ptají na „ještě jednu barvu“?

Vaše paleta je slib. Pokud definujete pět značkových barev a klient požádá o šestou, odpověď není „ne“ – je „ano, ale přijde jako záměrné rozšíření palety, ne jako jednorázový hex kód v nadpisu.“ Když přidáte barvu do theme.json, stane se konzistentně dostupnou na celém webu. Toto je správný způsob, jak takové požadavky řešit.

Tady je také potřeba komunikovat s klientem. Vysvětlete, že Site Editor jim zobrazuje pouze barvy a písma, která odpovídají jejich značkovým standardům. Pokud chtějí tyto standardy rozšířit, zařídíte to v designovém systému a každá nová barva bude pak dostupná všude – včetně budoucích stránek, které ještě nevytvořili. To je mnohem lepší odpověď než „to neděláme.“

Zároveň nehromadte paletu čtyřiceti barev. Revidujte ji čtvrtletně a odstraňte vše, co byl jednorázový přešlap. Cílem je malá, záměrná sada možností.

Pokud zamknete rozložení, ale necháte obsah, a uděláte z palety živou součást vztahu s klientem, Site Editor přestane být hrozbou. Stane se způsobem, jak předat klientům skutečnou autonomii, aniž byste obětovali designové standardy, které jste placeni chránit.