Du brukte 20 minutter på en stilig handlingsblokk. Du finjusterte farger, marger og tekst. En uke senere oppdager du at du bygger den samme blokken fra bunnen av på et annet nettsted. Høres det kjent ut?

Å manuelt kopiere blokker mellom WordPress-nettsteder sluker timer du ikke har. Men Gutenberg løste dette problemet for lenge siden: gjenbrukbare blokker pluss JSON-eksport lar deg flytte en hvilken som helst blokk til et annet nettsted på under ett minutt. Ingen utvidelser, ingen fulle databaseeksporter, ikke noe strev med XML-import.

Denne veiledningen går gjennom hvert trinn, fra å opprette en gjenbrukbar blokk til å importere den på et separat nettsted. Pluss et alternativt tillegg som gjør prosessen enda enklere.

💡 Rask oversikt:

• Opprett en blokk i Gutenberg-redigereren og konverter den til gjenbrukbar
• Eksporter den som en JSON-fil via grensesnittet for blokkadministrasjon
• Importer JSON-filen på mål-WordPress-nettstedet, så er blokken klar til bruk
• Som et alternativ lar tillegget Blocks Export Import deg eksportere alle blokker, ikke bare gjenbrukbare

Hva gjenbrukbare blokker er og hvorfor du trenger dem

En gjenbrukbar blokk i Gutenberg er en lagret innholdsmal som du oppretter én gang og deretter setter inn i et hvilket som helst innlegg eller side. Rediger originalblokken, så forplantes endringene overalt hvor den brukes.

Typiske bruksområder:

• En takkehilsen eller signatur på slutten av hver artikkel
• Et banner med en kampanje eller et påmeldingsskjema
• En blokk med kontaktdetaljer, juridisk informasjon eller opphavsrett
• En bilde-slider eller et galleri som gjenbrukes på tvers av flere sider

Før Gutenberg ville du ha oppbevart slike tekstbiter i en tekstfil på skrivebordet og limt dem inn fra utklippstavlen. Nå fungerer dette på WordPress-kjernenivå og overføres mellom nettsteder.

Viktig merknad: hvis en blokk er avhengig av et tredjepartstillegg (for eksempel blokker fra Getwid eller Stackable), må det samme tillegget være installert på målnettstedet. Ellers vil blokken åpnes med en feil eller miste noe av stilen sin.

1. Opprette en gjenbrukbar blokk

Åpne Gutenberg-redigereren via Innlegg → Legg til nytt. Klikk på Legg til blokk (+)-ikonet i den øverste verktøylinjen og velg blokktypen du trenger. I eksemplet nedenfor er det en enkel avsnittsblokk:

Konfigurer blokken: legg til tekst, lenker, bakgrunnsfarge, polstring, alt du trenger for det endelige utseendet. I vårt eksempel er resultatet en takkeblokk med sosiale lenker og farget bakgrunn:

Slik ser den ferdige blokken ut etter stil- og tekstjusteringer:

Så langt er dette en vanlig blokk. For å gjøre den gjenbrukbar klikker du på Flere valg-ikonet (tre prikker) på blokkverktøylinjen og velger Legg til i gjenbrukbare blokker:

Gi blokken et navn og klikk Lagre. Ferdig: blokken vises nå i nettstedets bibliotek for gjenbrukbare blokker.

2. Bruke en gjenbrukbar blokk i innlegg

Å legge til en lagret blokk i et innlegg eller en side tar bare et par klikk. I Gutenberg-redigeringsprogrammet klikker du på Legg til blokk (+), bytter til fanen Gjenbrukbare blokker og velger den du trenger:

Etter at du har satt inn blokken, klikker du på Forhåndsvis eller Publiser og sjekker resultatet på frontsiden:

Blokken fungerer i alle innleggstyper som støtter Gutenberg-redigeringsprogrammet: innlegg, sider, egendefinerte innleggstyper. Opprett den én gang, bruk den hvor som helst.

3. Eksportere blokken til JSON

Når blokken er klar og testet, kan du eksportere den for overføring til et annet nettsted. I Gutenberg-redigeringsprogrammet klikker du på ikonet Flere verktøy og alternativer (tre prikker øverst til høyre) og velger Administrer alle gjenbrukbare blokker:

En skjerm som viser alle nettstedets gjenbrukbare blokker, åpnes. Foreløpig er det bare én, takkemeldingen. Etter hvert som du oppretter flere blokker, vil listen vokse:

Hold musepekeren over blokkens navn, så ser du en lenke for Eksporter som JSON. Klikk på den:

Nettleseren din laster ned en fil med filtypen .json. Lagre den i en passende mappe på datamaskinen din:

Inne i JSON-filen ligger hele blokkstrukturen: HTML-markering, stiler, attributter, nestede blokker. Det er en selvstendig fil som er klar til å importeres på ethvert WordPress-nettsted med Gutenberg aktivert.

4. Importere blokken på et annet nettsted

På mål-WordPress-nettstedet åpner du Gutenberg-redigeringsprogrammet (Innlegg → Legg til nytt). Klikk på Flere verktøy og alternativer igjen og velg Administrer alle gjenbrukbare blokker:

På blokkskjermen klikker du på Importer fra JSON-knappen, velger filen du lastet ned tidligere og klikker på Importer:

Ferdig. Den importerte blokken vises i listen og er umiddelbart tilgjengelig for innsetting i innlegg:

Fra nå av kan du bruke blokken på det andre nettstedet nøyaktig slik du ville gjort på det første. Gjenta prosedyren for så mange blokker du vil; det finnes ingen begrensninger.

Alternativ metode: utvidelsen Blocks Export Import

Den manuelle metoden som innebærer konvertering til gjenbrukbar, fungerer i de fleste scenarioer, men den har én begrensning: du kan kun eksportere gjenbrukbare blokker. En vanlig blokk du nettopp har designet ferdig, må først konverteres og først deretter eksporteres.

Blocks Export Import-utvidelsen fra ThemeIsle fjerner denne begrensningen. Den legger til en eksportknapp direkte i menyen til enhver blokk, uten noe mellomliggende konverteringstrinn.

Installer og aktiver utvidelsen, åpne deretter Gutenberg-redigeringsverktøyet og opprett en blokk. Et nytt Eksporter JSON-alternativ dukker opp i Flere valg-menyen:

En JSON-fil med hele blokkstrukturen lastes ned til datamaskinen din. For å importere den på et annet nettsted, klikk Legg til blokk (+), bytt til fanen Widgeter og velg Importer blokker fra JSON:

Klikk deretter Velg fil, pek til JSON-filen på datamaskinen din og klikk Last opp:

Utvidelsesmetoden har en ulempe: blokker som importeres på denne måten, lagres ikke i nettstedets bibliotek for gjenbrukbare blokker. De eksisterer kun som en JSON-fil på datamaskinen din. Den manuelle metoden (avsnitt 1-4) lagrer derimot blokken i WordPress-databasen, slik at den forblir tilgjengelig via det vanlige grensesnittet for blokkadministrasjon.

Hvilken metode du bør velge, avhenger av situasjonen: for en engangsoverføring mellom dine egne nettsteder, bruk utvidelsen (det går raskere); for løpende arbeid med et blokkbibliotek på tvers av flere nettsteder, lær deg den innebygde eksporten av gjenbrukbare blokker.

Video: eksportere og importere Gutenberg-blokker i praksis

Se en kort videoopplæring som viser hele syklusen, fra å opprette en gjenbrukbar blokk til å importere den på et annet WordPress-nettsted:

⁉️🤔 Ofte stilte spørsmål

Kan jeg eksportere flere blokker i én enkelt fil?

Ja. Velg flere blokker i redigeringsverktøyet (hold Shift og klikk på hver enkelt), grupper dem via Legg til i gjenbrukbare blokker, og eksporter den resulterende gruppen som én JSON-fil. Utvidelsen Blocks Export Import støtter også eksport av flere blokker: velg blokkene og velg Export JSON, så havner alle valgte blokker i én fil.

Hva bør jeg gjøre hvis en importert blokk vises feil?

Tre sannsynlige årsaker. For det første: utvidelsen som det importerte innholdet er avhengig av (Getwid, Stackable, Kadence Blocks eller lignende), er ikke installert på målnettstedet. Installer utvidelsen og importer på nytt. For det andre: de to nettstedenes temaer har betydelige CSS-forskjeller, slik at blokken kan arve feil skrifttyper eller avstander. Juster i blokkinnstillingene eller legg til tilpasset CSS. For det tredje: JSON-filen ble ødelagt under overføringen; last den ned og importer den på nytt.

Hvordan kan jeg skille en vanlig blokk fra en gjenbrukbar blokk i redigeringsverktøyet?

En gjenbrukbar blokk i Gutenberg-redigeringsverktøyet er uthevet med en lilla kantlinje og har et gjenbruksikon (to løkkede piler) på verktøylinjen. En vanlig blokk har en blå kantlinje uten noe spesielt ikon. Når du holder musepekeren over en gjenbrukbar blokk, vises navnet på den.

Bevares temastiler når en blokk eksporteres?

Delvis. JSON-filen inkluderer innebygd markup og blokkattributter (bakgrunnsfarge, tekststørrelse, gradienter, alt som er satt via Gutenbergs innstillinger). Stiler som er definert i det aktive temaets style.css, er ikke inkludert i JSON-filen: de tilhører temaet, ikke blokken. På et annet nettsted med et annet tema kan blokken derfor se annerledes ut. For designkritiske blokker bør du sette nøkkelstiler gjennom blokkens egne innstillinger i stedet for via temaets CSS.

Finnes det en størrelsesgrense for den eksporterte JSON-filen?

Teknisk sett nei, men svært store blokker med dusinvis av nestede elementer kan produsere en JSON-fil på flere megabyte. Ved import av en slik fil slår direktivet upload_max_filesize i serverens PHP-konfigurasjon inn (standard er 2 MB). Hvis JSON-filen overskrider grensen, øker du direktivet i php.ini eller deler blokken i mindre deler.

Når manuell eksport er bedre enn en utvidelse

Den manuelle metoden via gjenbrukbare blokker er innebygd i WordPress-kjernen. Den er ikke avhengig av tredjepartsoppdateringer, legger ikke til ekstra kode på nettstedet ditt, og lagrer blokker i databasen slik at du kan se dem i standard administrasjonsgrensesnitt.

Utvidelsen Blocks Export Import vinner på hastighet når du bare trenger å hente en blokk og overføre den umiddelbart uten å lagre den i biblioteket. Men hvis du systematisk jobber med et sett standardblokker på tvers av flere nettsteder, bør du lære deg den innebygde gjenbrukbare eksporten. Et blokkbibliotek som er tilgjengelig fra ethvert innlegg, lønner seg til slutt for det ekstra konverteringsklikket.

Prøv begge metodene på et par testnettsteder og velg den som passer best for arbeidsflyten din. Ti minutters oppsett i dag sparer dusinvis av timer i løpet av et år.