Du publicerar en ny artikel. Den dyker upp i ”Senaste inlägg”. Bra. Men den syns också i ”Populärt just nu”. Och i sidofältet. Och i footern.
Samma artikel, fyra gånger på samma sida.
Det är inte ett designfel. Det är så de flesta arkivsidor fungerar. Varje sektion hämtar sina artiklar oberoende av de andra. Ingen vet vad som redan visas någon annanstans.
I början märks det knappt. Men ju mer innehåll du publicerar, desto rörigare blir det. Plötsligt har du en sida där besökaren scrollar förbi samma artikel tre gånger innan de hittar något nytt.
Den vanliga lösningen är manuell exkludering. Du går in i varje block och väljer bort de artiklar som redan visas. Det fungerar — tills du publicerar nästa artikel och måste göra om alltihop.
Eller så ger du upp och nöjer dig med en enkel lista. Inga sektioner, ingen struktur, bara en lång ström av inlägg i kronologisk ordning. Problemet försvinner, men det gör också möjligheten att lyfta fram det som faktiskt är viktigt.
Det finns ett bättre sätt.
Vad vi faktiskt vill ha
Innan vi pratar lösningar behöver vi vara tydliga med vad vi är ute efter.
En bra artikelsida ska ge dig kontroll där det spelar roll. Du vill kunna välja vilken artikel som syns störst, vilka som lyfts fram i sidofältet, vilka kategorier som dominerar i olika sektioner.
Men den ska också sköta sig själv. När du publicerar något nytt ska sidan uppdateras automatiskt. Utan att du behöver flytta runt saker manuellt. Utan att samma artikel plötsligt dyker upp överallt.
Och den ska aldrig visa samma artikel två gånger. Oavsett hur många sektioner du har, oavsett hur du kombinerar handplockat och automatiskt innehåll.
Det låter självklart. Men det kräver att blocken på sidan pratar med varandra.
Lösningen: Fyra block som pratar med varandra
Lösningen jag byggde består av fyra block som delar på ett gemensamt exkluderingssystem.
Blog Featured är hero-sektionen. En stor huvudartikel och två mindre vid sidan. Du kan handplocka alla tre, eller välja huvudartikeln och låta systemet fylla på resten. Eller låta allt vara automatiskt — då visas de tre senaste.
Blog Grid visar artiklar i ett rutnät. Du väljer hur många, hur många kolumner, om du vill filtrera på kategori. Det som gör det användbart: blocket vet vilka artiklar som redan visats högre upp på sidan och hoppar över dem automatiskt.
Blog Horizontal List är en kompaktare variant. Mindre bilder, tätare layout. Bra för att visa fler artiklar längre ner utan att det tar över.
Blog CTA Minikurs är inte ett artikelblock alls. Det är ett formulär — ett ställe att fånga upp nyhetsbrevsprenumeranter mitt i flödet, med styling som matchar resten av sidan.
Det som får alltihop att fungera är ett delat exkluderingssystem. När Blog Featured renderar sina tre artiklar rapporterar det tillbaka: ”Jag har visat artikel 1, 2 och 3.” När Blog Grid sedan hämtar sitt innehåll börjar det med att fråga: ”Vilka artiklar har redan visats?” och exkluderar dem från sin egen ”query”.
Resultatet blir att varje artikel bara visas en gång, oavsett hur många block du staplar på varandra.
Det innebär också att du kan blanda handplockat och automatiskt fritt. Välj huvudartikeln i Featured manuellt, låt resten fyllas på. Grid-blocket kommer ändå hoppa över den handplockade artikeln eftersom den redan markerats som visad.
Så fungerar det i praktiken
Låt oss ta ett konkret exempel. En typisk artikelsida kan se ut så här:
Överst: Blog Featured med tre artiklar. Den viktigaste i stor visning till vänster, två mindre till höger. Kanske handplockar du huvudartikeln för att styra vad som syns först. De andra två fylls på automatiskt.
Under det: Blog CTA Minikurs. Ett formulär med rubrik, kort text och ett fält för e-postadress. Avbryter flödet, men på ett sätt som känns naturligt — inte som en popup.
Sedan: Blog Grid med sex artiklar i tre kolumner. Helt automatiskt. Blocken vet att Featured redan visat tre artiklar, så Grid börjar från artikel fyra.
Längst ner: Blog Horizontal List med fyra artiklar till. Kompakt, horisontell layout. Visar artikel 10–13 (eftersom 1–9 redan tagits).
Totalt: 13 unika artiklar på sidan, utan en enda dubblett.
Om du publicerar en ny artikel i morgon flyttas allting ett steg. Den nya artikeln hamnar i Featured (om du inte handplockat något annat), och resten skjuts nedåt automatiskt.
Du kan också filtrera på kategori. Säg att du vill ha ett Grid-block som bara visar artiklar i kategorin ”Guider”. Blocken respekterar fortfarande exkluderingssystemet — om en guide redan visats i Featured kommer den inte dyka upp igen i det filtrerade gridet.
Och du kan kombinera flera Grid-block med olika kategorier. Ett för guider, ett för nyheter, ett för case studies. Varje block håller reda på vad de andra redan visat.
Vad som krävs för att bygga det
Den här lösningen bygger på Blockstudio — ett plugin som gör det möjligt att skapa egna Gutenberg-block utan att skriva JavaScript från scratch. Du definierar blockets attribut i en JSON-fil, skriver renderingslogiken i PHP, och stylar med vanlig CSS.
Det som gör blocken smarta är ett lager av PHP-hjälpfunktioner som hanterar exkluderingslogiken. En funktion som håller reda på vilka artiklar som visats. En som hämtar artiklar med automatisk exkludering. En som hanterar de olika format som Blockstudio kan returnera data i.
Hjälpfunktionerna är delade mellan alla block. Det betyder att du kan lägga till nya block senare som automatiskt fungerar med exkluderingssystemet — du behöver inte uppfinna hjulet på nytt varje gång.
För designen använder blocken CSS-variabler från temat. Färger, typsnitt och spacing ärvs automatiskt. Det gör att blocken ser konsekventa ut oavsett vilket tema du kör, och att du kan justera utseendet på ett ställe istället för i varje block.
En sak till som är värd att nämna: Blockstudio har en fil som heter blockstudio-llm.txt. Det är en textfil som beskriver hur block ska struktureras — och den är gjord för att delas med AI-verktyg. Om du använder AI för att hjälpa till med utveckling kan du ge den filen som kontext, och AI:n kommer generera kod som faktiskt följer Blockstudios mönster. Det sparar mycket tid jämfört med att rätta till strukturfel i efterhand.
Från idé till färdig lösning på en dag
Det här kanske låter som ett stort projekt. Fyra block, ett exkluderingssystem, hjälpfunktioner, styling.
Men med rätt förberedelser går det snabbare än man tror.
Jag började med en HTML-mockup av hela sidan. Ingen kod, bara markup som visade hur layouten skulle se ut och vilka element varje block behövde. Det tog en timme, kanske två. Men det betydde att jag visste exakt vad jag byggde innan jag skrev en rad PHP.
Sedan byggde jag blocken ett i taget. Featured först. Testade att det fungerade. Sedan Grid, med exkluderingslogiken på plats. Testade igen. Horizontal List. CTA-blocket.
Mellan varje block: review. Fungerar det som tänkt? Vad händer om det inte finns tillräckligt många artiklar? Vad händer om någon handplockar en artikel som inte finns längre?
Det tog en arbetsdag. Inte en arbetsvecka, inte en sprint. En dag.
Poängen är inte att det alltid går så snabbt. Poängen är att du inte behöver vara utvecklare för att bygga något som faktiskt fungerar. Du behöver veta vad du vill ha. Du behöver kunna beskriva det tydligt. Och du behöver rätt verktyg.
Struktur före kod. Det gäller här också.
En artikelsida som sköter sig själv
En bra artikelsida ska arbeta för dig, inte kräva konstant tillsyn.
Det du behöver är block som pratar med varandra. Ett system där varje artikel visas exakt en gång. Kontroll där det spelar roll, automatik där det inte gör det.
Fyra block. Ett exkluderingssystem. Noll manuellt underhåll.
Vill du lära dig mer om hur du bygger en hemsida som faktiskt fungerar — inte bara ser bra ut utan gör jobbet? Då kan du börja med minikursen där jag går igenom grunderna i att bygga en digital plattform som håller över tid.
