Blokeditoren

Modul 4: Lav indhold · Læsetid: 8 minutter

Læringsmål: Efter denne lektion kan du opbygge en side med blokke og blokgrupper, og du ved hvordan kladder, planlægning og ændringer fungerer.

Nøglebegreber: blok, blokindstillinger, værktøjslinje, listevisning, gruppe, kolonner, blokgruppe, synkroniseret blokgruppe, kladde, privat, planlægning, ændringer, forhåndsvisning

Alt er en blok

Siden WordPress 5.0 (slutningen af 2018) laver du indhold i blokeditoren (også kaldet Gutenberg, efter projektet). En side består af enkeltstående blokke: en overskrift, et afsnit, et billede, en knap, en liste, en tabel, en indlejret video. Hver blok har sine egne indstillinger. Du placerer blokke under hinanden, ved siden af hinanden (i kolonner) eller inde i hinanden (i en gruppe).

Hvorfor blokke? I den gamle editor var en side ét stort tekstfelt. Ville du have to kolonner eller en knap, skulle du bruge en sidebygger, shortcodes eller HTML. Med blokke kan du gøre det i selve WordPress, og resultatet er pæn HTML som temaet formaterer.

Bag kulisserne gemmer WordPress blokkene som HTML med kommentartegn foran og bagved:

<!-- wp:heading -->
<h2 class="wp-block-heading">Åbningstider</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Vi har åbent fra tirsdag til og med lørdag.</p>
<!-- /wp:paragraph -->

Det er rart at vide: indholdet forbliver læsbar HTML, også hvis du senere skifter tema, eller en blok ikke findes længere. Du kan se dette hvis du ved en blok vælger "Rediger som HTML", eller i kodeeditoren (Ctrl+Shift+Alt+M).

Editoren i tre dele

1. Lærredet i midten: din side nogenlunde som den bliver.
2. Værktøjslinjen over en markeret blok: fed, kursiv, link, justering, og det at omdanne blokken til en anden type (et afsnit bliver en liste, et billede bliver et galleri).
3. Sidepanelet til højre med to faneblade: Side (eller Indlæg) med indstillinger for hele siden, og Blok med indstillinger for den valgte blok, som farve, afstand og skriftstørrelse.

To værktøjer der gør dit arbejde meget lettere:

• Listevisning (ikonet med tre streger øverst til venstre): opbygningen af din side som et træ. Dermed vælger du præcis den blok du vil have, også hvis den sidder i en gruppe i en kolonne.
• Skråstreg-kommandoer: skriv på en tom linje / og navnet på en blok (/heading, /button, /image) og tryk på Enter.

Opbygning med grupper og kolonner

En god side har en tydelig opbygning. Til det bruger du tre byggesten:

• Gruppe: en ramme omkring nogle blokke, med egen baggrund eller afstand. For eksempel en farvet blok med en overskrift, en sætning og en knap.
• Kolonner: blokke ved siden af hinanden. På en telefon kommer de under hinanden.
• Række og Stak: varianter af en gruppe der ordner blokke vandret eller lodret.

Brug overskrifterne på den rigtige måde: én H1 (sidens titel, som temaet som regel selv laver), derunder H2 til hovedafsnittene og H3 til delene inden i dem. Vælg ikke en overskrift ud fra skriftstørrelsen, den justerer du i blokindstillingerne. Skærmlæsere og søgemaskiner bruger overskrifterne til at forstå siden (lektion 9.2).

Blokgrupper: du behøver ikke starte forfra hver gang

En blokgruppe er en færdig gruppe af blokke: en overskrift med tekst og billede, en pristabel, tre kolonner med ikoner. Du indsætter dem via indsæt-knappen (plusset), fanebladet Blokgrupper. Dit tema leverer ofte nogle med, og i blokgruppebiblioteket på wordpress.org findes der hundredvis.

Du kan også selv lave blokgrupper: vælg nogle blokke, klik på de tre prikker i værktøjslinjen og Opret blokgruppe. Her vælger du om blokgruppen skal være synkroniseret:

• Ikke synkroniseret: hver gang du indsætter den, får du en separat kopi. Ændrer du den, ændres kun den kopi. Praktisk som skabelon.
• Synkroniseret: alle steder hvor den optræder, er den den samme. Ændrer du den ét sted, ændres den overalt. Praktisk til en blok "Kontakt og åbningstider" der står på ti sider. (Tidligere hed disse "genbrugelige blokke".)

En faldgrube: en synkroniseret blokgruppe som du "lige" justerer på én side, ændres også på alle andre sider. Vil du have noget andet ét sted, så gør den ene kopi til en almindelig gruppe (frigør den).

Gem, udgiv og planlæg

En side har en status:

Brug Forhåndsvis for at se siden som en besøgende ser den, også på mobil og tablet, inden du udgiver.

Ændringer: tilbage i tiden

Hver gang du gemmer, gemmer WordPress en ændring: versionen på det tidspunkt. I sidepanelet ser du ved siden hvor mange ændringer der er. Klik på den, så ser du med en skyder forskellene mellem to versioner og kan gendanne en tidligere version.

Ændringer er dit første sikkerhedsnet ved en fejl ("jeg har ved et uheld fjernet halvdelen af siden"). De ligger dog alle sammen i databasen. Et websted med tusindvis af ændringer bliver større og nogle gange langsommere. Du kan begrænse antallet i wp-config.php:

define( 'WP_POST_REVISIONS', 20 );

Lektion 6.3 handler om at rydde op i gamle ændringer.

Hvor editoren stopper

Blokeditoren laver indholdet af en side. Det der står omkring indholdet (sidens header, menuen, bundteksten) hører til temaet. Ved et bloktema redigerer du det i Webstedseditor (Udseende > Editor) med de samme blokke; ved et klassisk tema i Tilpasser og ved Widgets (lektion 5.1). Bruger du en sidebygger som Elementor eller Divi, arbejder du i det program i stedet for blokeditoren; ulemperne ved det behandles i lektion 5.1.

Opsummering

• En side består af blokke du placerer under, ved siden af og inde i hinanden; WordPress gemmer dem som HTML med kommentartegn.
• Listevisningen og skråstreg-kommandoer gør opbygningen hurtig og præcis.
• Brug overskrifter til strukturen (H2, H3), ikke til skriftstørrelsen.
• Blokgrupper sparer arbejde; en synkroniseret blokgruppe ændres alle steder på én gang.
• Kladde, planlagt, privat og ændringer giver dig kontrol over hvad der er synligt hvornår og en vej tilbage.

Quiz

Opgave

Opgave D4.1: Byg en side med blokke. Lav en kladdeside "Om os" med: en H2 og en H3, mindst to afsnit, et billede med alt-tekst, en kolonneblok med to kolonner, en knap med et link, og en blokgruppe fra biblioteket. Lav en af grupperne om til din egen synkroniserede blokgruppe og indsæt den på en anden kladdeside. Juster den derefter ét sted og se hvad der sker på den anden side. Gendan til sidst en tidligere ændring. Afkryds hvert trin og beskriv i to sætninger hvornår du ville bruge en synkroniseret blokgruppe, og hvornår ikke.

Læs mere

Til arbejdet i selve WordPress har vi endnu ikke egne artikler; den officielle dokumentation fra WordPress er omfattende.

• Blokeditoren (wordpress.org, engelsk): https://wordpress.org/documentation/article/wordpress-block-editor/
• Blokgrupper (wordpress.org, engelsk): https://wordpress.org/documentation/article/block-pattern/
• Ændringer (wordpress.org, engelsk): https://wordpress.org/documentation/article/revisions/