Du spenderade 20 minuter på ett snyggt call-to-action-block. Du finjusterade färger, marginaler och text. En vecka senare bygger du samma block från grunden på en annan sajt. Känns det igen?

Att manuellt kopiera block mellan WordPress-sajter äter upp timmar du inte har. Men Gutenberg löste det här problemet för länge sedan: återanvändbara block plus JSON-export låter dig flytta vilket block som helst till en annan sajt på under en minut. Inga tillägg, inga fullständiga databasexporter, inget krångel med XML-importer.

Den här guiden går igenom varje steg, från att skapa ett återanvändbart block till att importera det på en separat sajt. Plus ett alternativt tillägg som gör processen ännu enklare.

💡 Snabb översikt:

• Skapa ett block i Gutenberg-redigeraren och gör det återanvändbart
• Exportera det som en JSON-fil via blockhanteringsgränssnittet
• Importera JSON-filen på målwebbplatsen i WordPress, så är blocket redo att användas
• Som ett alternativ låter tillägget Blocks Export Import dig exportera alla block, inte bara återanvändbara

Vad återanvändbara block är och varför du behöver dem

Ett återanvändbart block i Gutenberg är en sparad innehållsmall som du skapar en gång och sedan infogar i vilket inlägg eller vilken sida som helst. Redigera originalblocket så slår ändringarna igenom överallt där det används.

Typiska användningsområden:

• En tackhälsning eller signatur i slutet av varje artikel
• En banner med en kampanj eller ett prenumerationsformulär
• Ett block med kontaktuppgifter, juridisk information eller copyright
• Ett bild-skjutreglage eller galleri som återanvänds på flera sidor

Före Gutenberg hade du sparat sådana snuttar i en textfil på skrivbordet och klistrat in dem från urklipp. Nu fungerar det här på WordPress kärnnivå och kan överföras mellan sajter.

Viktigt att notera: om ett block är beroende av ett tredjepartstillägg (till exempel block från Getwid eller Stackable), måste samma tillägg vara installerat på målwebbplatsen. Annars öppnas blocket med ett fel eller tappar en del av sin stil.

1. Skapa ett återanvändbart block

Öppna Gutenberg-redigeraren via Inlägg → Lägg till nytt. Klicka på ikonen Lägg till block (+) i det övre verktygsfältet och välj den blocktyp du behöver. I exemplet nedan är det ett enkelt styckeblock:

Konfigurera blocket: lägg till text, länkar, bakgrundsfärg, utfyllnad, allt du behöver för det slutliga utseendet. I vårt exempel blir resultatet ett tack-block med sociala länkar och en färgad bakgrund:

Så här ser det färdiga blocket ut efter stil- och textjusteringar:

Än så länge är detta ett vanligt block. För att göra det återanvändbart, klicka på ikonen Fler alternativ (tre punkter) i blockets verktygsfält och välj Lägg till i återanvändbara block:

Ge blocket ett namn och klicka på Spara. Klart: blocket visas nu i din sajts bibliotek för återanvändbara block.

2. Använda ett återanvändbart block i inlägg

Att lägga till ett sparat block i ett inlägg eller en sida tar bara ett par klick. I Gutenberg-redigeraren klickar du på Lägg till block (+), byter till fliken Återanvändbara block och väljer det du behöver:

När du har infogat blocket klickar du på Förhandsgranska eller Publicera och kontrollerar resultatet på sajtens framsida:

Blocket fungerar i alla inläggstyper som stöder Gutenberg-redigeraren: inlägg, sidor, anpassade inläggstyper. Skapa det en gång, använd det överallt.

3. Exportera blocket till JSON

När blocket är klart och testat kan du exportera det för att flytta det till en annan sajt. I Gutenberg-redigeraren klickar du på ikonen Fler verktyg och alternativ (tre punkter i det övre högra hörnet) och väljer Hantera alla återanvändbara block:

En skärm som listar alla sajtens återanvändbara block öppnas. Just nu finns det bara ett, tackmeddelandet. Allt eftersom du skapar fler block kommer listan att växa:

För muspekaren över blockets namn så ser du en Exportera som JSON-länk. Klicka på den:

Din webbläsare laddar ner en fil med filändelsen .json. Spara den i en lämplig mapp på din dator:

Inuti JSON-filen finns den kompletta blockstrukturen: HTML-uppmärkning, stilar, attribut, nästlade block. Det är en fristående fil redo att importeras på vilken WordPress-sajt som helst med Gutenberg aktiverat.

4. Importera blocket på en annan sajt

På mål-WordPress-sajten öppnar du Gutenberg-redigeraren (Inlägg → Lägg till nytt). Klicka på Fler verktyg och alternativ igen och välj Hantera alla återanvändbara block:

På blockskärmen klickar du på knappen Importera från JSON, väljer filen du laddade ner tidigare och klickar på Importera:

Klart. Det importerade blocket visas i listan och är omedelbart tillgängligt för infogning i inlägg:

Från och med nu kan du använda blocket på den andra sajten precis som du gjorde på den första. Upprepa proceduren för så många block du vill, det finns inga begränsningar.

Alternativ metod: tillägget Blocks Export Import

Den manuella metoden som innebär att man konverterar till återanvändbart fungerar i de flesta scenarier, men den har en begränsning: du kan bara exportera återanvändbara block. Ett vanligt block du just har designat klart måste först konverteras och först därefter exporteras.

Tillägget Blocks Export Import från ThemeIsle tar bort den begränsningen. Det lägger till en exportknapp direkt i valfritt blocks meny, utan något mellanliggande konverteringssteg.

Installera och aktivera tillägget, öppna sedan Gutenberg-redigeraren och skapa ett block. Ett nytt alternativ, Exportera JSON, visas i menyn Fler alternativ:

En JSON-fil med hela blockstrukturen laddas ner till din dator. För att importera den på en annan webbplats klickar du på Lägg till block (+), byter till fliken Widgetar och väljer Importera block från JSON:

Klicka sedan på Välj fil, peka ut JSON-filen på din dator och klicka på Ladda upp:

Tilläggsmetoden har en hake: block som importeras på det här sättet sparas inte i webbplatsens bibliotek för återanvändbara block. De finns bara som en JSON-fil på din dator. Den manuella metoden (avsnitt 1-4) lagrar däremot blocket i WordPress-databasen så att det förblir tillgängligt via det vanliga gränssnittet för blockhantering.

Vilken metod du ska välja beror på ditt scenario: för en engångsöverföring mellan dina egna webbplatser, använd tillägget (det går snabbare); för löpande arbete med ett blockbibliotek över flera webbplatser, lär dig den inbyggda exporten av återanvändbara block.

Video: exportera och importera Gutenberg-block i praktiken

Se en kort videohandledning som visar hela cykeln, från att skapa ett återanvändbart block till att importera det på en annan WordPress-webbplats:

⁉️🤔 Vanliga frågor

Kan jag exportera flera block i en enda fil?

Ja. Markera flera block i redigeraren (håll ned Skift och klicka på varje), gruppera dem via Lägg till i återanvändbara block och exportera den resulterande gruppen som en enda JSON-fil. Pluginet Blocks Export Import stöder också flera exporter: markera blocken och välj Export JSON, så hamnar alla markerade block i en fil.

Vad ska jag göra om ett importerat block visas felaktigt?

Tre troliga orsaker. För det första: pluginet vars block det importerade innehållet bygger på (Getwid, Stackable, Kadence Blocks eller liknande) är inte installerat på mottagarsajten. Installera pluginet och importera igen. För det andra: de två sajternas teman skiljer sig markant i CSS, så blocket kan ärva fel typsnitt eller avstånd. Justera i blockets inställningar eller lägg till anpassad CSS. För det tredje: JSON-filen skadades under överföringen; ladda ned och importera den igen.

Hur kan jag skilja ett vanligt block från ett återanvändbart i redigeraren?

Ett återanvändbart block i Gutenberg-redigeraren markeras med en lila ram och har en återanvändningsikon (två loopade pilar) i verktygsfältet. Ett vanligt block har en blå ram utan särskild ikon. När du för muspekaren över ett återanvändbart block visas dess namn.

Bevaras temastilar när ett block exporteras?

Delvis. JSON-filen innehåller inline-uppmärkning och blockattribut (bakgrundsfärg, textstorlek, gradienter, allt som ställs in via Gutenbergs inställningar). Stilar som definieras i det aktiva temats style.css ingår inte i JSON-filen: de tillhör temat, inte blocket. På en annan sajt med ett annat tema kan blocket därför se annorlunda ut. För designkritiska block, sätt nyckelstilar via blockets egna inställningar snarare än via temats CSS.

Finns det en storleksgräns för den exporterade JSON-filen?

Tekniskt sett nej, men mycket stora block med dussintals nästlade element kan producera en JSON-fil på flera megabyte. Vid import av en sådan fil slår direktivet upload_max_filesize i serverns PHP-konfiguration till (standard är 2 MB). Om JSON-filen överskrider gränsen, öka direktivet i php.ini eller dela upp blocket i mindre delar.

När manuell export är bättre än ett plugin

Den manuella metoden via återanvändbara block är inbyggd i WordPress kärna. Den är inte beroende av tredjepartsuppdateringar, lägger inte till extra kod på din sajt och sparar blocken i databasen så att du kan se dem i det vanliga administrationsgränssnittet.

Pluginet Blocks Export Import vinner på snabbhet när du bara behöver ta ett block och överföra det direkt utan att spara i biblioteket. Men om du systematiskt arbetar med en uppsättning standardblock över flera sajter, lär dig den inbyggda återanvändbara exporten. Ett blockbibliotek som är tillgängligt från vilket inlägg som helst betalar igen den där extra konverteringsklicken med tiden.

Testa båda metoderna på ett par testsajter och välj den som passar ditt arbetsflöde. Tio minuters inställning idag sparar dussintals timmar under ett år.