Hur man exporterar och importerar Gutenberg-block i WordPress

Hur man exporterar och importerar Gutenberg-block i WordPress 1

I början hade WordPress-anvÀndare en bittersöt relation med den WordPress blockbaserade generatoren. SÄ, som vi upptÀckte i vÄr Gutenberg-guide, kommer den nya redaktören med fantastiska funktioner som gör att vackert innehÄll Àr enkelt och roligt. NÄgra kanske inte har tillrÀckligt med redaktören.

Gutenberg erbjuder dig tillrÀckligt med funktioner för att skapa anmÀrkningsvÀrda sidor och inlÀgg, utan att skriva kod. Oavsett vilket innehÄll du vill lÀgga till har Gutenberg bara blocket.

Vill du Àndra och designa varje block med innehÄll i stor utstrÀckning? Gutenberg stöder dig tack vare ett batteri med anpassningsalternativ. Vill du ha Ànnu fler block Àn tillgÀngliga i standardredigeraren? Det finns gott om ytterligare Gutenberg-plugins dÀr ute.

SĂ„ det Ă€r trĂ„kigt att mĂ„nga anvĂ€ndare inte kĂ€nner till det ÅteranvĂ€ndbara block, en av de lysande funktionerna i Gutenberg. Om du inte har nĂ„gon aning om vad vi pratar om Ă€r Ă„teranvĂ€ndbara block helt enkelt innehĂ„ll block du skapar, sparar och Ă„teranvĂ€nder nĂ€r du vill.

Anta att du vill lÀgga till ett samtal till handling, ett tack, en signatur, ett formulÀr eller nÄgot annat i slutet av varje inlÀgg eller sida.

Tidigare var du tvungen att spara funktionen i en textfil pÄ din dator. NÀr du behövde det kopierade du och klistrade in det i ditt inlÀgg eller din sida. Gutenberg har lindrat detta problem. Nu behöver du inte anvÀnda textfiler eller skapa samma block frÄn början varje gÄng.

Du kan skapa ett enda ÄteranvÀndbart block och anvÀnda det inte bara pÄ dina inlÀgg och sidor, utan ocksÄ pÄ andra WordPress-webbplatser.

Oavsett om du skapar mÄnga webbplatser eller behöver lÀgga till speciellt innehÄll till varje inlÀgg / sida, kan Gutenberg ÄteranvÀndbara block hjÀlpa dig att spara mycket tid.

Och i dagens inlÀgg visar vi dig exakt hur du skapar och exporterar ÄteranvÀndbara Gutenberg-block i WordPress. VÄrt mÄl Àr att hjÀlpa dig att flytta och ÄteranvÀnda anpassat innehÄllsblock över flera WordPress-inlÀgg / sidor / webbplatser enkelt.

IsÀr: Om du till exempel skapar ett block med ett plugin som Getwid, mÄste du installera plugin pÄ andra WordPress-webbplatser som du vill ÄteranvÀnda det blocket. Observera ocksÄ att dina block kan se nÄgot annorlunda ut frÄn tema till tema, men det Àr allt bra eftersom Gutenberg erbjuder dig mycket anpassning.

Ta ur en kopp kaffe och njut av att lÀsa.

Först och frÀmst behöver du ÄteranvÀndbara block

TyvÀrr kan du inte exportera eller importera regelbunden block För att exportera och importera Gutenberg-block mÄste du först skapa ÄteranvÀndbar block

I illustrativt syfte kommer jag att skapa en tackanmĂ€rkning som jag skulle vilja lĂ€gga till i slutet av varje inlĂ€gg jag publicerar. Du vet, utan att skriva om anteckningen varje gĂ„ng jag behöver lĂ€gga till den i ett inlĂ€gg 🙂

Min tackanmÀrkning Àr inte alls komplex; bara ett enkelt styckeblock med lÀnkar till Twitter och Facebook. TÀnk pÄ att ditt block kan vara vad du vill: en bannerannons, en bildreglage, en offert, en lista, de senaste inlÀggen, MailChimp-formulÀret etc.

Senare kommer jag att visa dig hur du kan exportera anteckningen (lÀs, blockera) till en andra WordPress-webbplats. LÄter bra? Bra, lÄt oss komma igÄng.

Hur man skapar ett ÄteranvÀndbart block

Att skapa ett ÄteranvÀndbart block Àr oerhört enkelt. Navigera till Publikationer> LÀgg till nytt att lansera Gutenberg-redaktören:

LÀgg till ett nytt WordPress-inlÀgg

Klicka sedan pÄ LÀgg till block (+) och vÀlj sedan ditt innehÄllsblock. I vÄrt fall har jag lagt till avsnittblocket, som visas i följande bild.

LĂ€gg till Gutenberg-block i WordPress

Efter det, anpassa och designa ditt block enligt dina behov. Jag lade till text, sociala medielÀnkar och bakgrundsfÀrg. SÄ hÀr Àr vÄrt nya block ocksÄ kÀnt som en tackanmÀrkning titta i min Gutenberg-redaktör:

Hur man exporterar och importerar Gutenberg-block i WordPress 2

Mycket söt John Doe. Mycket trevligt. Nu ska jag förmodligen följa din blogg pĂ„ sociala medier 🙂 Spola framĂ„t.

För tillfÀllet Àr den föregÄende noten a regelbunden att blockera. Vi mÄste förvandla det till en ÄteranvÀndbar blockera att vi kan exportera och importera. För att göra det, klicka pÄ Fler alternativ och sedan LÀgg till ÄteranvÀndbara block, Enligt nedanstÄende.

Hur man exporterar och importerar Gutenberg-block i WordPress 3

Namnge sedan ditt ÄteranvÀndbara block och tryck pÄ Spara som visas nedan.

ÄteranvÀndbar gutenberg block nomenklatur

Och det Àr det, du har precis skapat ditt första ÄteranvÀndbara block. SÄ blir du en vÀn.

Hur man anvÀnder ÄteranvÀndbara block

Det Ă€r extremt enkelt att lĂ€gga till det Ă„teranvĂ€ndbara blocket som vi just skapade i dina inlĂ€gg eller sidor. NĂ€r du har lagt till önskat innehĂ„ll till ditt inlĂ€gg eller sida klickar du pĂ„ LĂ€gg till block (+) ikon, blĂ€ddra till ÅteranvĂ€ndbara block fliken och vĂ€lj ditt block (tack i vĂ„rt fall), som visas nedan.

ÄteranvÀndbart gutenbergblock

NÀr du har lagt till skrapblocket till ditt inlÀgg eller sida trycker du pÄ Förskott/Att posta -knappen för att se dina resultat i front-end. Det hÀr Àr vad jag fick:

Hur man exporterar och importerar Gutenberg-block i WordPress 4

Min testwebbplats har Twenty Twenty-temat.

Det bÀsta Àr att jag kan ÄteranvÀnda mitt anteckningsblock för tack nÀr som helst utan att behöva skapa det frÄn grunden. Jag kan lÀgga till det i alla inlÀggstyper som stöder Gutenberg-block.

Nu nÀr du vet hur du skapar och anvÀnder ÄteranvÀndbara block, lÄt oss lÀra oss mer om hur du exporterar dessa block till en annan WordPress-webbplats. För att undvika förvirring anvÀnder jag samma block som vi just skapade.

Hur du exporterar Gutenberg-block i WordPress

Export av ett ÄteranvÀndbart Gutenberg-block Àr för fjÀrde klassare som ska göras pÄ nolltid.

Vad ska man göra?

Inuti Gutenberg-redigeraren klickar du pÄ Fler verktyg och alternativ och sedan Hantera alla ÄteranvÀndbara block, som vi markerar nedan:

hantera alla ÄteranvÀndbara block

Om du gör det leder du till Blocks skÀrm dÀr du kan se och hantera alla dina ÄteranvÀndbara block:

Hur man exporterar och importerar Gutenberg-block i WordPress 5

Vi har bara Tackkort blockera, men föregÄende skÀrm kommer att fyllas i nÀr du skapar mer. För att exportera, hÄll muspekaren över titeln och klicka pÄ Exportera som JSON lÀnk som visas. Se bilden nedan.

Hur man exporterar och importerar Gutenberg-block i WordPress 6

Spara sedan JSON-filen pÄ din dator:

Hur man exporterar och importerar Gutenberg-block i WordPress 7

Nu nÀr vi har JSON-filen pÄ din dator Àr det dags att importera blocket till vÄr andra testplats.

Hur du importerar Gutenberg-block till WordPress

Att importera dina Ă„teranvĂ€ndbara block Ă€r lika enkelt som A, B, C. Öppna först Gutenberg-redigeraren. För det andra, klicka pĂ„ Fler verktyg och alternativ och sedan Hantera alla Ă„teranvĂ€ndbara block, Enligt nedanstĂ„ende.

Hur man exporterar och importerar Gutenberg-block i WordPress 8

Om honom Blocks nÀsta skÀrmklick Importera frÄn JSON, vÀlj filen du laddat ner tidigare och tryck sedan pÄ att importera knappen i den ordningen:

Hur man exporterar och importerar Gutenberg-block i WordPress 9

Och det Àr! Precis som detta har du importerat ett ÄteranvÀndbart Gutenberg-block till din andra WordPress-webbplats:

Hur man exporterar och importerar Gutenberg-block i WordPress 10

Var det inte sÄ lÀtt? Sedan kan du anvÀnda och ÄteranvÀnda ditt Gutenberg-block pÄ den andra webbplatsen sÄ mÄnga gÄnger du vill.

Finns det plugins för att exportera Gutenberg-block?

Åh ja, och jag hittade en frĂ„n ThemeIsle, en ansedd WordPress-utvecklare. Det Ă€r ett gratis plugin som kallas Blocks Export Import. I huvudsak tillĂ„ter plugin-programmet dig att hoppa över hela tutorialen. Ja det Ă€r korrekt; Du behöver inte ens skapa Ă„teranvĂ€ndbara block.

Installera och aktivera plugin-programmet och öppna sedan Gutenberg-redigeraren. Designa ditt block som du vill och klicka sedan pÄ det Fler alternativ ikon. Tryck sedan pÄ Exportera JSON, Enligt nedanstÄende. HÀr Àr skÀrmdumpen:

Hur man exporterar och importerar Gutenberg-block i WordPress 11

DÄ laddar du ned JSON-filen till din dator. För att importera JSON-filen med plugin-programmet öppnar du Gutenberg-redigeraren. Klicka sedan pÄ LÀgg till block och sedan Importera JSON-block under widgets tunga:

Hur man exporterar och importerar Gutenberg-block i WordPress 12

Efter det klicket VÀlj filen för att vÀlja filen frÄn din dator och tryck pÄ Stiga knapp:

Hur man exporterar och importerar Gutenberg-block i WordPress 13

Det enda problemet med plugin-metoden Àr att dina block inte sparas pÄ din WordPress-webbplats. För att spara block i din WordPress-databas mÄste du anvÀnda den manuella metoden. Kanske kommer det att förÀndras i framtiden.

TyvĂ€rr kunde jag inte hitta ett annat plugin. ÄndĂ„ kan plugin spara mycket tid om du inte bryr dig om att spara Ă„teranvĂ€ndbara block pĂ„ din webbplats. Du kommer att ha blocken som JSON-filer pĂ„ din dator.

Gutenberg ÄteranvÀndbara block Àr en livrÀddare. De lÄter dig snabbt replikera mallar och funktioner, eftersom det inte börjar frÄn början. Om du skapar mÄnga inlÀgg / sidor och / eller webbplatser kommer det att vara praktiskt att lÀra sig att exportera Gutenberg-block.

Har du frÄgor eller förslag om Gutenberg-block? VÀnligen meddela oss i kommentarerna nedan.