WordPress Full Site Editing: Første indtryk

WordPress har for nylig fået en opdatering til Gutenberg-editoren, som gør det muligt at redigere hele sitet med blokke. Funktionen er stadig i beta, men den er spændende nok til, at jeg havde lyst til at prøve den af og se, hvad den kan i praksis.

I WordPress’ udviklerhåndbog beskrives Full Site Editing sådan her:

På et overordnet niveau er visionen med Full Site Editing at samle en række funktioner, som bringer den velkendte blokoplevelse og dens udvidelsesmuligheder ud til alle dele af sitet - ikke kun indlæg og sider. Full Site Editing er altså et paraplybegreb for flere delprojekter i Gutenberg, som tilsammen gør visionen mulig.

— https://developer.wordpress.org/block-editor/getting-started/full-site-editing/

Hvorfor Full Site Editing?

At kunne redigere hele sitet direkte fra WordPress-administrationen gør webdesign mere tilgængeligt for flere. Man kan komme langt uden at skrive kode, fordi der findes mange blokke, man kan installere og kombinere. For de fleste brugere er det derfor muligt at designe og bygge et site ved at arbejde direkte i templates med blokke.

Kom i gang

For at bruge Full Site Editing skal du have et block theme - altså et tema, der understøtter funktionen. Et centralt element er filen theme.json, som indeholder globale indstillinger og styles for temaet. Hvis du vil have det fulde overblik over mulighederne, så se dokumentationen.

Den nemmeste måde at komme i gang på er at kopiere Twenty Twenty-Two i themes-mappen og give kopien et nyt navn (fx my-awesome-block-theme). Husk også at ændre navnet i style.css, så temaerne kan skelnes i theme picker.

Når du har kopieret temaet, bør du nu have to temaer med samme preview-billede, men forskellige navne - forudsat at du huskede ændringen i style.css. Aktivér kopien, og begynd at eksperimentere. Twenty Twenty-Two følger normalt med som standard, men kan installeres igen, hvis det er blevet fjernet.

Brug af Site Editor

Site Editor er en central del af Full Site Editing og findes under menuen Udseende. Bemærk, at den stadig er i beta på tidspunktet for dette indlæg, så detaljer kan ændre sig over tid.

Når du åbner Site Editor første gang, vil det meste virke genkendeligt, hvis du tidligere har arbejdet i Gutenberg til indlæg og sider.

Klikker du på WordPress-ikonet øverst til venstre, får du adgang til flere muligheder. Strukturen vil være velkendt for dem, der tidligere har arbejdet med temaer: sitet består stadig af templates og template parts. Template-hierarkiet følger de samme principper som i klassiske temaer, så du kan oprette templates til arkiver, indlæg, sider, custom post types osv.

Eksport af ændringer

Ændringer fra Site Editor gemmes i databasen, så temafilerne opdateres ikke automatisk. Hvis du vil have ændringerne ud som filer, skal temaet eksporteres. Det gør det muligt at have et standarddesign i temaet, samtidig med at brugeren kan tilpasse templates uden at miste ændringer ved en opdatering.

Klik på menuen med de tre prikker øverst til højre og vælg eksport. Så får du temaet som en zip-fil, klar til upload på et andet site eller distribution via wordpress.org.

Finder du et eksisterende block theme, du hellere vil bruge, kan du naturligvis bare installere og aktivere det og gå i gang med Site Editor med det samme.

Begrænsninger

På tidspunktet for dette indlæg har jeg lagt mærke til et par områder, hvor Site Editor stadig føles begrænset.

Media queries: Core-layoutblokkene er begrænsede, og selvom fx Columns-blokken kollapser på mobil, er det svært at få fuld kontrol over mobil- og tabletlayout. Lige nu ser jeg primært disse muligheder:

• style core-blokke via temaet
• oprette egne klasser i temaet og tilføje dem til blokke, der kræver særlig styling på bestemte enheder
• bygge en custom blok i temaet eller bruge en eksisterende blok, der understøtter det ønskede layout

Brugerdefinerede templates: Nogle templates kan ikke oprettes direkte i Site Editor. Et eksempel er custom side- eller indlægstemplates. Her skal du ofte gå ind på den konkrete side/indlæg og oprette templaten derfra i indstillingerne. Nogle templates kræver desuden, at den tilhørende fil allerede findes i temaet, før de kan redigeres i Site Editor, fx ved custom archive-sider til custom post types.

Se også dokumentationen om templates og template parts, som indeholder komplette kodeeksempler på at oprette templates fra bunden (selvom den tilgang efter min mening stadig er lidt tung).

Tilpasning af Query Loop: Core-blokken til Query Loop er stadig ret begrænset. Udvalget af felter, der kan vises i loopet, er forholdsvis lille, og fx meta-felter er ikke tilgængelige.

Konklusion

Det var en kort gennemgang af mine første indtryk af Full Site Editing i WordPress. Jeg synes, det er en spændende retning for fremtidens WordPress-temaer, fordi det gør det lettere for flere at tilpasse designet af deres site - både for brugere, udviklere og designere.

Core-blokkene i WordPress giver allerede mange muligheder for at bygge forskellige designs uden kode, og økosystemet af eksterne blokke udvider mulighederne yderligere.

Betyder det så, at man slet ikke behøver kunne kode for at lave et nyt tema? Ikke helt. Nogle funktioner og designkrav kan stadig ikke løses med eksisterende blokke alene, og så kræver det udvikling. Derudover vil tilpasning af theme.json ofte kræve en vis forståelse for CSS. Men adgangsbarrieren er uden tvivl lavere end tidligere.

Jeg har stadig meget at lære om Full Site Editing, og jeg er fortsat ved at finde den bedste måde at bruge det i de sites, jeg bygger. Måske følger jeg op med en ny status, når jeg har arbejdet mere med både brugen og udviklingen af block themes.

Hvis du har gode erfaringer med at håndtere nogle af de begrænsninger, jeg nævner her, hører jeg meget gerne fra dig.