Gutenberg FSE: WordPress-suunnittelun tulevaisuus vuonna 2026

Full Site Editing (FSE) julkaistiin WordPress 5.9:n mukana. Kolme vuotta myöhemmin useimmat toimistot eivät vieläkään käytä sitä kunnolla – ja ne, jotka käyttävät, omaavat merkittävän kilpailuedun.

Mitä FSE todella tarkoittaa

Ennen FSE:tä WordPress-teemat hallitsivat otsikoita, alatunnisteita ja globaalia asettelua PHP-mallien avulla. Gutenberg käsitteli vain sisältöaluetta. Voit muokata blogikirjoitustasi lohkoilla, mutta navigointisi oli lukittu PHP-tiedostoon.

FSE muuttaa tämän. Lohko-teeman avulla jokainen sivuston osa – otsikko, alatunniste, sivupalkki, arkistomallit, yksittäisen julkaisun asettelu – on muokattavissa Gutenberg-editorissa lohkoja käyttäen. Ei PHP:tä tarvita asettelumuutoksiin.

Tämä on tärkeää tekoälygeneroinnin kannalta, koska se tarkoittaa, että koko sivusto voidaan ilmaista lohko-JSONina. Ei ole olemassa hybridijärjestelmää, jossa jotkin osat ovat PHP-malleja ja jotkin lohkoja. Kaikki on lohkoja, kaikki on JSONia, kaikki voidaan generoida ja muokata ohjelmallisesti.

Kuinka PAGEnza käyttää FSE:tä

Kun PAGEnza luo sivuston, se ei luo vain etusivua. Se luo täydellisen lohko-teeman, joka sisältää:

• templates/index.html — oletusmalli
• templates/single.html — yksittäisen julkaisun asettelu
• templates/archive.html — blogi/kategoria-listaus
• templates/404.html — virhesivu
• parts/header.html — uudelleenkäytettävä otsikkomuoto
• parts/footer.html — uudelleenkäytettävä alatunnistemuoto
• theme.json — globaalit tyylit (värit, typografia, välit)

Kaikki nämä on luotu samasta Design Mandate -määrittelystä. Etusivulle määritelty väripaletti on sama kuin theme.json-tiedoston globaaleissa tyyleissä käytetty. Sankari-osiossa valittu fontt trio on sama, joka ladataan lohko-teeman tyylitaulukkoon.

Tämä on FSE:n keskeinen etu tekoälygeneroinnissa: järjestelmä pakottaa yhtenäisyyden, eikä luota siihen, että suunnittelija muistaa käyttää samaa fonttia kaikkialla.

theme.json — tärkein tiedosto, jota et ole koskaan muokannut

theme.json on konfiguraatiotiedosto, joka määrittelee lohko-teeman globaalin suunnittelujärjestelmän. Se hallitsee:

• Väripaletti — nimetyt värit, jotka näkyvät editorin värivalitsimessa
• Typografia — fonttiperheet, koot, rivivälit
• Välit — täyte- ja marginaalisäätimien käyttämä väliskaala
• Pyöristetyt kulmat — oletusarvoiset kulmien säteet
• Asettelu — sisältöleveys, leveä leveys

Kun PAGEnza luo sivuston, theme.json rakennetaan ohjelmallisesti Design Mandate -määrittelystä. ink, bg1, bg2 ja accent-värit rekisteröidään nimetyiksi palettiväreiksi. Fontt trio rekisteröidään fonttiperheiksi oikeilla Google Fonts @import-URL-osoitteilla.

Tuloksena on, että kun asiakas avaa Gutenberg-editorin tekstin muokkaamiseksi, värivalitsin näyttää täsmälleen neljä brändiväriä – ei mitään muuta. Fonttivalitsin näyttää kolme valittua fonttia. Välisäätimet käyttävät järjestelmän skaalaa. Suunnittelujärjestelmä pakotetaan editoritasolla.

Mitä "muokkaa livenä Gutenbergissä" todella tarkoittaa

Jokainen PAGEnzan luoma sivusto on live WordPress-asennus, jossa Gutenberg FSE on aktiivinen. Asiakas voi:

• Klikata mitä tahansa tekstiä ja muokata sitä suoraan
• Muuttaa osioiden taustoja klikkaamalla ja valitsemalla brändiväripaletista
• Järjestellä osioita uudelleen vetämällä lohkoja
• Lisätä uusia osioita lohkojen lisäysvalitsimesta
• Muuttaa kuvia klikkaamalla paikkamerkkiä

He eivät voi vahingossa rikkoa suunnittelujärjestelmää valitsemalla brändin ulkopuolista väriä, koska ainoat käytettävissä olevat värit ovat neljä brändiväriä. He eivät voi valita epäyhteensopivaa fonttia, koska vain kolme brändifonttia on rekisteröity.

Tämä tekee tekoälyn luomista sivustoista käytännöllisiä todellisille asiakkaille – rajoitukset, jotka tekevät suunnittelusta toimivan, säilyvät luovutuksen jälkeen.

Lohkojen kattavuusongelma

FSE on tehokas, mutta sillä on kattavuusongelma. Kaikkia suunnittelumalleja ei voida ilmaista selkeästi ydin-Gutenberg-lohkoilla. Monimutkaiset asettelut, interaktiiviset komponentit ja mukautetut datanäytöt vaativat usein mukautettuja lohkoja tai kolmannen osapuolen lisäosia.

PAGEnza käsittelee tämän kahdella tavalla:

Asetteluun: käytämme yhdistelmää Group, Cover, Columns ja Media & Text -lohkoja huolellisesti hallituilla attribuuteilla. Noin 95 % markkinointisivujen asetteluista voidaan saavuttaa näillä neljällä lohkotyypillä.

Interaktiivisiin komponentteihin: Plugin Builder luo mukautettuja Gutenberg-lohkoja PHP-lisäosina. Hinnoittelutaulukko, varauslomake, suositteluliukusäädin – nämä luodaan asianmukaisina rekisteröityinä lohkoina, jotka integroituvat FSE-editoriin, eivätkä lyhytkoodeina, jotka on liitetty sivulle.

Tavoitteena on, että kaikki, mitä asiakkaan tarvitsee muokata, on muokattavissa visuaalisessa editorissa koskematta koodiin.