Editor stránok odolný voči klientom: Playbook pre theme.json

Zhrnutie

Keď klient prvýkrát otvorí Editor stránok WordPress, možnosť upravovať každý blok, farbu a rozloženie môže pre neho pôsobiť ako vymoženosť — a pre vás ako hrozba. Tento článok vysvetľuje, ako použiť theme.json na vytýčenie jasnej hranice medzi úpravou obsahu a kontrolou dizajnu. Namiesto boja s Editorom stránok nastavíte predvoľby, predvolené hodnoty a hranice, vďaka ktorým môžu netechnickí klienti bezpečne aktualizovať svoje vlastné stránky. Prejdeme si, čo uzamknúť, čo nechať otvorené a prečo je nadmerné uzamykanie skutočným rizikom. Tento prístup je postavený na dizajnových tokenoch a obmedzeniach na úrovni šablón, takže funguje konzistentne na všetkých klientskych stránkach, ktoré spravujete. Na konci budete mať opakovateľný pracovný postup pre odovzdanie Editora stránok bez toho, aby ste odovzdali kľúče od svojho dizajnového systému.

Čo urobíte ako prvé, keď vám klient napíše, že "len skúsil aktualizovať nadpis" a celému webu sa zrútilo rozostupy?

Ak spravujete viac ako jeden web WordPress, pravdepodobne ste takúto správu už dostali v nejakej podobe. Editor stránok dal vášmu klientovi kľúče od auta s piatimi prevodovými stupňami a bez bŕzd. Myslia si, že robia jednoduchú textovú zmenu, a zrazu je globálna typografia rozhodená, úvodná hrdinská časť má neónovú farbu, ktorú ste si nevybrali, a dva bloky sú teraz nad sebou namiesto vedľa seba.

Medzitým premýšľate o ďalších šiestich klientskych stránkach, ktoré podporujete, a posledné, čo potrebujete, je pasca na údržbu, kde každá "užitočná" úprava od klienta vyžaduje obnovenie zo zálohy.

Odpoveďou nie je odobrať Editor stránok. Je to nastavenie hraníc v ňom pomocou theme.json. Podľa WordPress Developer Resources je theme.json centrálnym zdrojom pravdy pre nastavenia a štýly blokového editora — definuje farebné palety, typografiu a možnosti rozloženia, ktoré sa zobrazujú klientovi. To znamená, že rovnaký súbor, ktorý riadi váš dizajn, môže tiež riadiť to, čo môže a nemôže klient upravovať.

Poďme sa pozrieť na to, ako o tom premýšľať, pretože väčšina návodov sa zameriava na to, čo theme.json dokáže pre vývojárov. Otázka pre agentúru je iná: ako ho použiť na to, aby boli klienti v bezpečí, ale aby sa necítili obmedzení?

Prečo sa Editor stránok zdá taký nebezpečný?

Váš klient sa nesnaží rozbiť web. Snaží sa urobiť to, na čo ste ho roky trénovali v starom editore: zmeniť nadpis, vymeniť obrázok, možno pridať odsek. Nebezpečenstvo nie je v ich zámere — ale v tom, že Editor stránok zobrazuje globálne ovládacie prvky na rovnakom mieste ako obsahové ovládacie prvky.

Tu je bežný scenár. Klient otvorí šablónu v Editore stránok a uvidí blok nadpisu. Zmení jeho farbu tak, aby zodpovedala novému farebnému štandardu značky. Ale pretože je tento nadpis v šablóne, zmena sa prejaví všade, kde sa šablóna používa. Pre klienta to vyzeralo ako jedna úprava. Pre web to bola globálna zmena.

Všeobecný princíp: keď niekomu dáte page builder, nakoniec nájde "nastavenia s poistkami" a vypne ich. Ale pomocou theme.json môžete tieto poistky samotné skryť. Namiesto toho, aby ste klientovi povedali "nesiahajte na globálne štýly," mu jednoducho nezobrazíte farebnú paletu, ktorá môže viesť k zlému výsledku. Definujete paletu schválených farieb, škálu veľkostí písma a sadu predvolieb medzier — a klient si vyberá z nich, nie z celého spektra CSS.

Toto je prvý posun: prestaňte myslieť na pravidlá a začnite myslieť na továrne. theme.json je vaša výrobná linka. Konfigurujete možnosti, ktoré klient vidí, a obmedzenia vynucuje samotné rozhranie, nie zoznam inštrukcií v odovzdávacom dokumente.

Čo by ste mali skutočne uzamknúť?

Nie všetko. Ak obsahovú oblasť uzamknete príliš tesne, klient vám bude buď volať vždy, keď potrebuje pridať odsek, alebo si nájde obchádzku — často pridaním jednorazového pluginu alebo skopírovaním HTML zo svojho starého webu.

Tu je praktická tabuľka, čo uzamknúť, čo nechať a prečo:

Oblasť úprav	Uzamknúť?	Prečo
Štruktúra šablóny a rozloženie blokov	Uzamknúť	Zabraňuje náhodnému odstráneniu alebo preskupeniu základných rozloženských blokov
Globálne štýly (farby, písma, predvoľby medzier)	Uzamknúť s predvoľbami	Klienti vyberajú zo schválenej sady, nie z ľubovoľných hodnôt
Obsahový text a obrázky	Nechať otvorené	To je ich práca; nechajte ich to robiť bez pýtania povolenia
Medzery medzi blokmi	Čiastočne uzamknúť	Poskytnite predvoľby medzier, aby mohli upraviť rytmus bez narušenia zarovnania
Vybrané blokové vzory	Nechať otvorené, ak ste ich preverili	Bezpečný spôsob, ako môžu klienti pridávať nové sekcie bez budovania od nuly

Dôležitý detail je "uzamknúť s predvoľbami," nie "vylúčiť." Pri globálnych štýloch neskrývate panel nastavení; znižujete počet možností na kurátorský výber. Pri štruktúre šablóny môžete uzamknúť určité bloky, aby ich nebolo možné odstrániť, ale klientom stále umožniť upravovať text v nich.

Jedno varovanie: uzamknutie bloku v šablóne sa líši od uzamknutia v konkrétnej stránke. Uzamknutia šablóny ovplyvňujú všetok obsah, ktorý šablónu používa. Ak potrebujete rôzne úrovne uzamknutia na rôznych stránkach, budete musieť pracovať na úrovni blokov v editore, čo je krehkejšie. Pre opakovateľnú agentúrnu prácu navrhnite šablóny tak, aby boli uzamknuté oblasti konzistentné.

Ako nastaviť hranice bez toho, aby editor pôsobil ako pasca?

Technika spočíva v definovaní vašich dizajnových tokenov v theme.json a potom v odolávaní činom čokoľvek iného v CSS.

Napríklad namiesto toho, aby ste klientovi dovolili nastaviť ľubovoľnú farbu na tlačidle, definujete štýl tlačidla v theme.json, ktorý používa konkrétnu farbu z vašej palety. Klient môže stále vybrať tlačidlo a zmeniť jeho text, ale výber farieb zobrazuje len vaše schválené vzorky. To isté platí pre veľkosti písma, riadkovanie a medzery.

Rovnaký princíp sa vzťahuje aj na šablóny. Funkciu "uzamknúť" môžete použiť na konkrétnych blokoch v rámci šablóny — napríklad uzamknúť stĺpcovú štruktúru bloku s odporúčaním, aby klient mohol zmeniť text citátu, ale nemohol z troch stĺpcov urobiť dva. Ak ste ešte nepoužívali uzamykanie blokov, je dostupné v paneli nástrojov editora; keď blok uzamknete, môžete si vybrať, či klient môže upravovať obsah, presúvať ho, alebo oboje. Dokonca to môžete nastaviť aj priamo v theme.json ako predvolené hodnoty na úrovni blokov.

Chcete dosiahnuť editor, v ktorom klient nikdy neuvidí ovládací prvok, ktorý by mohol rozbiť dizajn. To neznamená, že nemôžu urobiť nič zlé; znamená to, že najhoršia chyba, ktorú môžu urobiť, je zmeniť znenie nadpisu, nie vzhľad celého webu.

Ak používate vlastné typy príspevkov, rovnaké princípy platia aj mimo predvolených šablón — pozrite si nášho sprievodcu rozšírením theme.json na vlastné typy príspevkov a výstup pluginov.

Čo sa stane, keď uzamknete príliš veľa?

Tu je kontroverzný názor: nadmerné uzamykanie je rovnako škodlivé ako nedostatočné. Klient, ktorý nemôže zmeniť veľkosť nadpisu alebo pridať medzeru medzi sekciami, vás nakoniec požiada, aby ste to "jednoducho spravili, aby to vyzeralo dobre" — a potom ste späť pri robení malých úprav zadarmo. Horšie je, že sa môžu rozhodnúť, že Editor stránok je zbytočný, a vrátiť sa k page builderu tretej strany, ktorý im opäť dáva príliš veľa kontroly.

Tento kompromis je reálny. Uzamknuté editory vedú k menšiemu počtu núdzových volaní, ale tiež vedú k väčšiemu počtu požiadaviek "môžeš len posunúť to tlačidlo o päť pixelov vyššie". Otvorené editory prinášajú opak. Vašou úlohou je nájsť rovnovážny bod pre každého klienta, nie aplikovať jednu konfiguráciu univerzálne.

Dobrá počiatočná heuristika: uzamknite všetko, čo ovplyvňuje všetky inštancie niečoho (globálne štýly, štruktúru šablóny), a nechajte otvorené všetko, čo ovplyvňuje jednu inštanciu (text a obrázky jednotlivej stránky). Ak klient rozbije jednu stránku, je to oprava na 5 minút. Ak rozbije globálny štýl, je to oprava na 20 minút a bezpečnostný problém.

Ako to urobiť opakovateľné naprieč klientmi?

Tu prichádza na scénu agentúrny pracovný postup. Mali by ste mať základný theme.json, ktorý definuje vaše dizajnové tokeny — farebnú paletu, typografickú škálu a predvoľby medzier — a potom súbor s úpravami pre každého klienta, ktorý rozširuje alebo mení konkrétne hodnoty.

Začnite vytvorením "štartovacej" blokovej témy. Tu je návod, ako vytvoriť vlastnú blokovú tému s theme.json — keď ju raz vyviniete a zdokumentujete, kopírovanie pre nového klienta je len výmena značkových farieb a písiem. Neznovuobjavujete koleso; vymieňate tokeny. Toto je presne mentalita prestaňte prestavovať každý web WordPress, ale aplikovaná na editor, nie na backend.

Pretože theme.json je jeden súbor, je tiež ľahké ho spravovať vo verzovacom systéme a nasadzovať vo viacerých prostrediach. Môžete kontrolovať zmeny, vidieť, čo klient upravil v globálnych štýloch, a porovnať tieto zmeny so svojím základným súborom. To vám poskytuje silnú auditnú stopu pre požiadavky na podporu.

Ak spravujete viacero webov a ešte nemáte nastavenú základnú tému, toto je vaša príležitosť. Je to jeden kus vlastnej práce vo WordPress, ktorý sa vráti zakaždým, keď klient otvorí editor.

Čo s klientmi, ktorí stále žiadajú "ešte jednu farbu"?

Vaša paleta je sľub. Ak definujete päť značkových farieb a klient požiada o šiestu, odpoveď nie je "nie" — je to "áno, ale príde to ako zámerné rozšírenie palety, nie ako jednorazový hex kód v nadpise." Keď pridáte farbu do theme.json, stane sa konzistentne dostupnou na celom webe. Toto je správny spôsob, ako vybaviť takéto požiadavky.

Tu je tiež dôležité komunikovať s klientom. Vysvetlite, že Editor stránok im zobrazuje iba farby a písma, ktoré zodpovedajú štandardom ich značky. Ak chcú tieto štandardy rozšíriť, vybavíte to v dizajnovom systéme a potom bude každá nová farba dostupná všade — vrátane budúcich stránok, ktoré ešte nevytvorili. To je oveľa lepšia odpoveď ako "to nerobíme."

Zároveň nehromadte paletu so štyridsiatimi farbami. Revidujte ju štvrťročne a odstráňte všetko, čo bola jednorazová nehoda. Cieľom je malá, zámerná sada možností.

Ak uzamknete rozloženie, ale necháte obsah, a urobíte z palety živú súčasť vášho vzťahu s klientom, Editor stránok prestane byť hrozbou. Stane sa spôsobom, ako odovzdať klientom skutočnú autonómiu bez obetovania dizajnových štandardov, ktoré ste platení chrániť.