Blokkredigereren

Modul 4: Lage innhold · Lesetid: 8 minutter

Læringsmål: Etter denne leksjonen kan du bygge opp en side med blokker og mønstre, og du vet hvordan konsepter, planlegging og revisjoner fungerer.

Nøkkelbegreper: blokk, blokkinnstillinger, verktøylinje, listevisning, gruppe, kolonner, mønster, synkronisert mønster, konsept, privat, planlegging, revisjoner, forhåndsvisning

Alt er en blokk

Siden WordPress 5.0 (slutten av 2018) lager du innhold i blokkredigereren (også kalt Gutenberg, etter prosjektet). En side består av separate blokker: en overskrift, et avsnitt, et bilde, en knapp, en liste, en tabell, en innebygd video. Hver blokk har sine egne innstillinger. Du setter blokker under hverandre, ved siden av hverandre (i kolonner) eller inni hverandre (i en gruppe).

Hvorfor blokker? I den gamle redigereren var en side ett stort tekstfelt. Ville du ha to kolonner eller en knapp, trengte du en sidebygger, shortcodes eller HTML. Med blokker kan du gjøre dette i WordPress selv, og resultatet er ryddig HTML som temaet formaterer.

Bak kulissene lagrer WordPress blokkene som HTML med kommentartegn før og etter:

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

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

Det er greit å vite: innholdet forblir lesbar HTML, selv om du senere bytter tema eller en blokk ikke lenger finnes. Du ser dette hvis du velger «Rediger som HTML» på en blokk, eller i kodebehandleren (Ctrl+Shift+Alt+M).

Redigereren i tre deler

1. Lerretet (canvas) i midten: siden din omtrent slik den blir.
2. Verktøylinjen over en valgt blokk: fet, kursiv, lenke, justering, og å gjøre om blokken til en annen type (et avsnitt blir en liste, et bilde blir et galleri).
3. Sidepanelet til høyre med to faner: Side (eller Innlegg) med innstillinger for hele siden, og Blokk med innstillinger for den valgte blokken, som farge, mellomrom og skriftstørrelse.

To hjelpemidler som gjør arbeidet ditt mye enklere:

• Listevisning (ikonet med tre streker øverst til venstre): oppbyggingen av siden din som et tre. Dermed velger du nøyaktig den blokken du vil ha, selv om den ligger i en gruppe i en kolonne.
• Skråstrek-kommandoer: skriv på en tom linje / og navnet på en blokk (/overskrift, /knapp, /bilde) og trykk Enter.

Bygge opp med grupper og kolonner

En god side har en tydelig oppbygging. Til dette bruker du tre byggesteiner:

• Gruppe: en ramme rundt noen blokker, med egen bakgrunn eller mellomrom. For eksempel en farget blokk med en overskrift, en setning og en knapp.
• Kolonner: blokker ved siden av hverandre. På en telefon havner de under hverandre.
• Rad og Stabel: varianter av en gruppe som ordner blokker horisontalt eller vertikalt.

Bruk overskriftene på riktig måte: én H1 (tittelen på siden, som temaet vanligvis lager selv), deretter H2 for hovedkapitlene og H3 for delene innenfor disse. Velg ikke en overskrift på grunn av skriftstørrelsen, den justerer du i blokkinnstillingene. Skjermlesere og søkemotorer bruker overskriftene for å forstå siden (leksjon 9.2).

Mønstre: ikke begynn på nytt hele tiden

Et mønster er en ferdig gruppe blokker: en overskrift med tekst og bilde, en pristabell, tre kolonner med ikoner. Du setter dem inn via innsettingsknappen (plusstegnet), fanen Mønstre. Temaet ditt leverer ofte noen med seg, og i mønsterbiblioteket på wordpress.org finnes det hundrevis.

Du kan også lage mønstre selv: velg noen blokker, velg de tre prikkene i verktøylinjen og Lag mønster. Her velger du om mønsteret skal være synkronisert:

• Ikke synkronisert: hver gang du setter det inn, får du en separat kopi. Endrer du den, endres bare den kopien. Praktisk som mal.
• Synkronisert: overalt der det brukes, er det likt. Endrer du det ett sted, endres det overalt. Praktisk for en blokk «Kontakt og åpningstider» som ligger på ti sider. (Tidligere het disse «gjenbrukbare blokker».)

En fallgruve: et synkronisert mønster du «bare» tilpasser på én side, endres også på alle andre sider. Vil du ha noe annet ett sted, gjør den ene kopien om til en vanlig gruppe (løsne den).

Lagre, publisere og planlegge

En side har en status:

Bruk Forhåndsvisning for å se siden slik en besøkende ser den, også på mobil og nettbrett, før du publiserer.

Revisjoner: tilbake i tid

Hver gang du lagrer, tar WordPress vare på en revisjon: versjonen av det øyeblikket. I sidepanelet ser du ved siden hvor mange revisjoner det finnes. Klikk på den, så ser du med en glidebryter forskjellene mellom to versjoner og kan gjenopprette en eldre versjon.

Revisjoner er ditt første sikkerhetsnett ved en feil («jeg fjernet ved et uhell halve siden»). De ligger imidlertid alle i databasen. Et nettsted med tusenvis av revisjoner blir større og noen ganger tregere. Du kan begrense antallet i wp-config.php:

define( 'WP_POST_REVISIONS', 20 );

Leksjon 6.3 handler om å rydde opp i gamle revisjoner.

Hvor redigereren slutter

Blokkredigereren lager innholdet på en side. Det som ligger rundt innholdet (toppen av nettstedet, menyen, bunnteksten) hører til temaet. På et blokktema redigerer du dette i Nettstedsredigereren (Visning > Redigeringsverktøy) med de samme blokkene; på et klassisk tema i Tematilpasseren og under Widgeter (leksjon 5.1). Bruker du en sidebygger som Elementor eller Divi, jobber du i det programmet i stedet for blokkredigereren; ulempene ved dette diskuteres i leksjon 5.1.

Oppsummering

• En side består av blokker som du setter under, ved siden av og inni hverandre; WordPress lagrer dem som HTML med kommentartegn.
• Listevisningen og skråstrek-kommandoene gjør byggingen rask og presis.
• Bruk overskrifter for oppbyggingen (H2, H3), ikke for skriftstørrelsen.
• Mønstre sparer arbeid; et synkronisert mønster endres alle steder samtidig.
• Konsept, planlagt, privat og revisjoner gir deg kontroll over hva som er synlig når, og en vei tilbake.

Quiz

Oppgave

Oppgave D4.1: Bygg en side med blokker. Lag en konseptside «Om oss» med: en H2 og en H3, minst to avsnitt, et bilde med alt-tekst, en kolonneblokk med to kolonner, en knapp med en lenke, og et mønster fra biblioteket. Gjør en gruppe om til ditt eget synkroniserte mønster og sett det inn på en andre konseptside. Tilpass det deretter ett sted og se hva som skjer på den andre siden. Gjenopprett til slutt en tidligere revisjon. Kryss av for hvert steg og beskriv i to setninger når du ville brukt et synkronisert mønster, og når ikke.

Les mer

For arbeidet i selve WordPress har vi ennå ikke egne artikler; den offisielle dokumentasjonen til WordPress er omfattende.

• Blokkredigereren (wordpress.org, engelsk): https://wordpress.org/documentation/article/wordpress-block-editor/
• Mønstre (wordpress.org, engelsk): https://wordpress.org/documentation/article/block-pattern/
• Revisjoner (wordpress.org, engelsk): https://wordpress.org/documentation/article/revisions/