Blockredigeraren

Modul 4: Skapa innehåll · Lästid: 8 minuter

Lärandemål: Efter den här lektionen kan du bygga upp en sida med block och mönster, och du vet hur utkast, schemaläggning och versioner fungerar.

Nyckelbegrepp: block, blockinställningar, verktygsfält, listvy, grupp, kolumner, mönster, synkroniserat mönster, utkast, privat, schemaläggning, versioner, förhandsgranskning

Allt är ett block

Sedan WordPress 5.0 (slutet av 2018) skapar du innehåll i blockredigeraren (även kallad Gutenberg, efter projektet). En sida består av fristående block: en rubrik, ett stycke, en bild, en knapp, en lista, en tabell, en inbäddad video. Varje block har sina egna inställningar. Du placerar block under varandra, bredvid varandra (i kolumner) eller inuti varandra (i en grupp).

Varför block? I den gamla redigeraren var en sida en enda stor textruta. Ville du ha två kolumner eller en knapp behövde du en sidbyggare, shortcodes eller HTML. Med block går det i själva WordPress, och resultatet blir ren HTML som temat formaterar.

Bakom kulisserna sparar WordPress blocken som HTML med kommentarstecken före och efter:

<!-- wp:heading -->
<h2 class="wp-block-heading">Öppettider</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Vi har öppet från tisdag till och med lördag.</p>
<!-- /wp:paragraph -->

Det är bra att veta: innehållet förblir läsbar HTML, även om du senare byter tema eller ett block inte längre finns. Du ser detta om du vid ett block väljer "Redigera som HTML", eller i kodredigeraren (Ctrl+Shift+Alt+M).

Redigeraren i tre delar

1. Arbetsytan (canvas) i mitten: din sida ungefär som den kommer att se ut.
2. Verktygsfältet ovanför ett markerat block: fet, kursiv, länk, justering, och omvandla blocket till en annan typ (ett stycke blir en lista, en bild blir ett galleri).
3. Sidofältet till höger med två flikar: Sida (eller Inlägg) med inställningar för hela sidan, och Block med inställningar för det markerade blocket, som färg, utrymme och textstorlek.

Två verktyg som gör ditt arbete mycket enklare:

• Listvy (ikonen med tre streck uppe till vänster): uppbyggnaden av din sida som ett träd. Med den väljer du exakt det block du vill ha, även om det ligger i en grupp inuti en kolumn.
• Snedstreck-kommandon: skriv på en tom rad / och namnet på ett block (/rubrik, /knapp, /bild) och tryck på Enter.

Bygg upp med grupper och kolumner

En bra sida har en tydlig uppbyggnad. För det använder du tre byggstenar:

• Grupp: en ram runt några block, med egen bakgrund eller utrymme. Till exempel ett färgat block med en rubrik, en mening och en knapp.
• Kolumner: block bredvid varandra. På en telefon hamnar de under varandra.
• Rad och Stapel: varianter av en grupp som ordnar block horisontellt eller vertikalt.

Använd rubrikerna på rätt sätt: en H1 (sidans titel, som temat oftast skapar själv), därunder H2 för kapitlen och H3 för delarna inom dem. Välj inte en rubriknivå på grund av textstorleken; den justerar du i blockinställningarna. Skärmläsare och sökmotorer använder rubrikerna för att förstå sidan (lektion 9.2).

Mönster: slipp börja om varje gång

Ett mönster är en färdig grupp block: en rubrik med text och bild, en pristabell, tre kolumner med ikoner. Du infogar dem via infogaknappen (plustecknet), fliken Mönster. Ditt tema levererar ofta några, och i mönsterbiblioteket på wordpress.org finns hundratals.

Du kan också skapa egna mönster: markera några block, välj de tre prickarna i verktygsfältet och Skapa mönster. Då väljer du om mönstret ska vara synkroniserat:

• Inte synkroniserat: varje gång du infogar det får du en fristående kopia. Ändrar du den förändras bara den kopian. Praktiskt som mall.
• Synkroniserat: överallt där det finns är det likadant. Ändrar du det på ett ställe förändras det överallt. Praktiskt för ett block "Kontakt och öppettider" som finns på tio sidor. (Tidigare hette dessa "återanvändbara block".)

En fallgrop: ett synkroniserat mönster som du "bara" justerar på en sida förändras också på alla andra sidor. Vill du ha något annat på ett enda ställe, gör då den kopian till en vanlig grupp (koppla loss den).

Spara, publicera och schemalägga

En sida har en status:

Använd Förhandsgranska för att se sidan som en besökare ser den, även på mobil och surfplatta, innan du publicerar.

Versioner: tillbaka i tiden

Varje gång du sparar bevarar WordPress en version: versionen från den stunden. I sidofältet ser du vid sidan hur många versioner det finns. Klickar du på den ser du med ett reglage skillnaderna mellan två versioner och kan återställa en äldre version.

Versioner är ditt första skyddsnät vid ett misstag ("jag råkade ta bort halva sidan"). De lagras dock alla i databasen. En webbplats med tusentals versioner blir större och ibland långsammare. Du kan begränsa antalet i wp-config.php:

define( 'WP_POST_REVISIONS', 20 );

Lektion 6.3 handlar om att städa upp gamla versioner.

Var redigeraren slutar

Blockredigeraren skapar innehållet på en sida. Det som finns runt innehållet (webbplatsens sidhuvud, menyn, sidfoten) hör till temat. Med ett blocktema redigerar du det i Webbplatsredigeraren (Utseende > Editor) med samma block; med ett klassiskt tema i Anpassaren och under Widgetar (lektion 5.1). Använder du en sidbyggare som Elementor eller Divi arbetar du i det programmet istället för blockredigeraren; nackdelarna med det diskuteras i lektion 5.1.

Sammanfattning

• En sida består av block som du placerar under, bredvid och inuti varandra; WordPress sparar dem som HTML med kommentarstecken.
• Listvyn och snedstreck-kommandon gör byggandet snabbt och precist.
• Använd rubriker för strukturen (H2, H3), inte för textstorleken.
• Mönster sparar arbete; ett synkroniserat mönster ändras överallt samtidigt.
• Utkast, schemalagd, privat och versioner ger dig kontroll över vad som syns när, och en väg tillbaka.

Quiz

Uppgift

Uppgift D4.1: Bygg en sida med block. Skapa ett utkast till sida "Om oss" med: en H2 och en H3, minst två stycken, en bild med alt-text, ett kolumnblock med två kolumner, en knapp med en länk, och ett mönster från biblioteket. Gör en grupp till ditt eget synkroniserade mönster och infoga det på en andra utkastsida. Justera det därefter på ett ställe och se vad som händer på den andra sidan. Återställ till sist en tidigare version. Pricka av varje steg och beskriv i två meningar när du skulle använda ett synkroniserat mönster och när inte.

Läs mer

För arbetet i själva WordPress har vi ännu inga egna artiklar; den officiella dokumentationen för WordPress är omfattande.

• Blockredigeraren (wordpress.org, engelska): https://wordpress.org/documentation/article/wordpress-block-editor/
• Mönster (wordpress.org, engelska): https://wordpress.org/documentation/article/block-pattern/
• Versioner (wordpress.org, engelska): https://wordpress.org/documentation/article/revisions/