Gutenberg öppnar upp dig som utvecklare:i nya spännande möjligheter. I den här guiden ska jag berätta allt du behöver veta om Block Editor. Lär dig hur du skapar din egen WordPress block och justerar befintliga block.

Gutenberg är redaktören, som är WordPress 5.0. Med Gutenberg begreppet WordPress Block införs. Detta gör att webbplatsoperatörer kan dra och släppa designelement utan att behöva en extern sidbyggare eller programmeringskunskaper. 

Gutenberg kommer att användas som underlag för fullständig webbplatsredigering i framtiden. Förr i tiden var det alltid nödvändigt att programmera, även om du använde en sida byggare: vissa ändringar och justeringar nödvändigtvis inblandade kod.

Med varje ny WordPress Major Update inser att PHP-kunskap och den traditionella utvecklingen av WordPress webbplatser inte längre är tillräckliga. Som WordPress Utvecklare:i du måste Gutenberg Kontroll.

Denna handledning innehåller: 

• Vad Gutenberg Är
• Hur man handskas med WordPress Blockerar workest
• Hur du använder dessa nya funktioner och tekniker för att skapa kraftfulla WordPress Bygg webbplatser

Låt oss gå in i WordPress Gutenberg Handledning för utvecklare:dyka inuti!

Vad är Gutenberg ?

Gutenberg först rullade ut i WordPress 5.0 för att göra det lättare att skapa inlägg och sidor på ett rent visuellt sätt. Detta var dock bara fas 1 i projektet.

Gutenberg förlitar sig på modern teknik som JavaScript, React och REST API föratt skapa en dynamisk editor-upplevelse som efterliknar redigering av fronten. I denna första fas publicerades Blockredigeraren. 

Med ytterligare uppdateringar och Fas 2, kommer Gutenberg bli en fullfjädrad webbplatsredaktör. I framtiden kommer det att vara möjligt att WordPress Skapa webbplatser med block.

Detta innebär: Vem WordPress Webbplatser som utvecklats,måste omdefiniera din egen utvecklare arbetsflöde. PHP-kunskap är inte längre tillräcklig för att WordPress webbplats från grunden. Du måste vara bekant med JavaScript, React och REST API om du vill skapa enskilda block och designelement för Gutenberg vill skapa baserade webbplatser. 

Komma igång i WordPress Block

Det är spännande att kunna komma med på denna nya resa med den Gutenberg Blockredigerare. Med den här guiden lär du dig alla viktiga saker innan du Gutenberg Utvecklingsstarttest och din egen WordPress Block.

Vad du behöver veta innan du Gutenberg Utveckla 

Det viktigaste språk du behöver veta för att WordPress Gutenberg Självstudie för utvecklare:att följa inuti är Javascript. Mer specifikt måste du känna till ES5-versionen, som stöds av de flesta moderna webbläsare. 

Nyare funktioner ingår i 2015-versionen, ES6, och i den senaste versionen, ESNext. 

Att förstå ES6 och ESNext kan vara värdefullt. Om du använder dem i din utveckling av WordPress Block, måste du veta hur man konfigurerar verktyg som konverterar din nyare kod till ES5. 

Du måste också förstå JSX, som är en syntax förlängning av Javascript och kräver också en omvandling. Eftersom ES6, ESNext och JSX är så mycket lättare att skriva än ES5 är det värt mödan att ställa in omformningsverktyg. 

Webpack,i samband med Babel, är ett populärt omformningsverktyg. Denna verktygskombination minifies ditt Javascript. 

Sist men inte minst, att veta React JS kan hjälpa dig oerhört om du WordPress block eller olika WordPress Självstudier för utvecklare: följ dörrarna som fokuserar på att anpassa block. 

Innehåll visas i Gutenberg sparats annorlunda 

I motsats till den klassiska innehållsredigeraren kan innehållet i Gutenberg lagras på ett annat sätt. Innehåll lagras inte längre som HTML, utan som HTML-kommentarer i en viss struktur med JSON-format. Det gör det enklare att överföra innehåll till en annan WordPress installation eller till ett Content Management System (CMS). 

Att lagra innehåll i traditionell HTML är bra när det gäller enkelt och textbaserat innehåll. Men om du har att göra med dynamiskt genererat innehåll, kommer din kod tyvärr bli oren. 

Du behöver inte nödvändigtvis känna till de tekniska detaljerna om det, Hur WordPress Blockerar arbete. Viktigt, om du har innehåll i Gutenberg den genererade HTML:en är fri från parseous messy code. Eftersom alla detaljer lagras inom HTML-kommentarer. 

Det här gör du med WordPress Gutenberg block kan göras 

Du kan Gutenberg göra flera saker. Om du vill WordPress Självstudiekurs för utvecklaren: Följ dina alternativ. 

Låt oss undersöka några möjligheter: 

• Utveckla din egen WordPress Block: Detta är den mest komplexa uppgift du kan göra. Trots det kan egen WordPress Block ofta värt sin insats för att uppnå verkliga justeringar. 
• Förbered din Theme För Gutenberg före: Detta inkluderar att du har den WordPress .org Föreslagna Theme instruktioner för att följa din Theme kompatibel för Gutenberg att göra. Detta inkluderar att justera blockstylningen för att skapa önskat utseende på din Themes och upprätthålla blockfunktionalitet. 
• Befintliga WordPress Anpassa eller utöka innehållsblock: Som nämnts ovan kan du Befintliga WordPress Block i Gutenberg Anpassa. Detta inkluderar antingen lägga till anpassade block stilar, lägga till filter via Javascript, eller anpassa block kategorier och blocktyper som visas för specifika anpassningsbara inlägg typer. 

En utvecklingsmiljö för de Gutenberg Konfigurera Blockredigerare

Innan du gör något med Gutenberg eller skapa någon WordPress Självstudier för utvecklare: du måste ställa in en utvecklingsmiljö. Ditt första steg är att få dig .js. WordPress rekommenderar att du använder Node-versionschef (nvm) för att installera och hantera Node. 

Inom den klonade lagringsplatsen kan du Gutenberg genom att göra följande: 

npm ci
npm run build

Denna kodning garanterar att Gutenberg Som Plugin kan användas. Sedan lägger du till den skapade Gutenberg Katalog i mappen wp-content/ plugins i din lokala WordPress Miljö. En White Pixel rekommenderar också att du installerar Webpack och Babel. 

Gå igenom alla inställningssteg för att konfigurera en utvecklingsmiljö. Du behöver en lokal testwebbplats som WordPress med den du skapade Gutenberg Plugin och tillgång till Terminal för att utföra en serie kommandoradsuppmaningar. WordPress .org ger många resurser för utveckling skript. 

Nu när du har ställt in och konfigurerat din lokala miljö kan vi gå till huvuddelen av denna WordPress Självstudier för utvecklare:att hoppa över: WordPress Block.

WordPress Förstå block

WordPress Block är behållare i vilka innehåll finns inom WordPress blockredigerare. WordPress Block kan flyttas via ett drag & drop-gränssnitt.

För att förstå vad WordPress block är viktigt innan du skapar din egen. Det är WordPress Block är också mycket stora och omfattar flera viktiga funktioner, blandannat: 

• Innehåll:Dessa vanligt förekommande block inkluderar stycken, rubriker, bilder, listor, citat och multimedia.
• Formatering:Förbättra formateringen av innehållet med block som lägger till kod, anpassad HTML och tabeller.
• Layouter:Anpassa utseendet på dina sidor och inlägg med block för att lägga till sidbrytningar, distanser, kolumner, knappblock och avgränsare.
• Widgets:Dessa block kan du enkelt infoga widgets var som helst och inkludera alternativ såsom kortkod, kategorier,sociala ikoner, RSS och senaste kommentarer. 

Hur du skapar din egen WordPress Block håller på att ställas in

Med denna WordPress Gutenberg Handledning för utvecklare:inuti du lära dig vad du behöver anpassa WordPress innehållsblock. Sedan kan du använda dem på din webbplats eller dina kunder: 

Hur man skapar nya WordPress Blockregister

Varje nytt block börjar registrera. Använd funktionen registerBlockType för att registrera en ny blocktypsdefinition.  

Blocknamnet är en sträng som måste skrivas som namnområde/block-namn. Byt namnutrymme för namnet på det block du vill skapa. 

Därifrån måste du definiera egenskaperna för ditt nya block, till exempel rubrik, beskrivning, kategori, ikon, nyckelord eller stilar. 

Lägga till verktygsfält för anpassningsbara åtgärder

Om du vill lägga till anpassade åtgärder i ditt block med hjälp av ett interaktivt verktygsfält kan du använda fungerande Gutenberg Anpassa verktygsfält (eller skapa dem från grunden). Ange anpassade ikoner, formatering, positionering och tilldelade åtgärder, beroende på dina behov Plugins Eller Themes . 

Enligt Block Editor Handbook, lägga till en anpassad verktygsfält kan se ut ungefär så här: 

Hur man översätter WordPress Block 

När du genomför internationalisering kan du se till att de du skapar WordPress block för att nå en större publik. 

Sedan WordPress 5.0 du kan använda paketet wp-i18n JavaScript för att lägga till översättningsbara strängar. Du kan också skapa översättningsfiler och få dem inlästa när en användare begär innehåll på det språket. 

Lägga till inspektörsinställningar

Alla block har en uppsättning inspektörsinställningar som visas till höger på skärmen när de infogas i ditt innehåll. Och beroende på WordPress Block är de aspekter som användarna kan anpassa på olika sätt. För varje enskilt block du skapar måste inspektörsinställningarna definieras. 

Du kannst <InspectorControls> hinzufügen, indem du WordPress mitteilst, welche Inspektor Steuerelemente verwendet werden sollen, wie sie aussehen sollen, welche Optionen enthalten sein sollen und in welcher Reihenfolge sie erscheinen sollen. 

Det är JavaScripts insatser för WordPress se ut ungefär så här: 

Med dessa specifikationer kan du sedan använda JSX för att stil varje funktion och justera dess ordning. 

Hur utgång dynamiskt innehåll med PHP

Dynamiskt innehåll är väsentligt för WordPress . Det finns många anledningar till varför du kanske behöver ett dynamiskt block. 

Om du till exempel vill skapa ett enskilt Senaste inlägg s-block som visar de senaste blogginläggen i realtid, behöver du ett dynamiskt block. 

Blocket förlitar sig på PHP eftersom den behöver hämta ny information varje gång den återges. Nyckeln för de flesta block för att göra det dynamiskt är att ändra dess minnesfunktion till noll. Infoga sedan kod för att instruera det nya blocket att hämta lämpligt innehåll. 

Du kan också ställa in ett attribut för att instruera blocket att visa ett visst antal inlägg.

Lägga till individuella inställningar till befintliga Gutenberg Blockera

Du kan också lägga till anpassningsbara inställningar och göra ändringar i befintliga Gutenberg WordPress Block. Du kan till exempel lägga till anpassningsbara kontroller på den avancerade blockpanelen inom ett block inspektörsinställningar. Jeffrey Carandang har skrivit en super guide på sin blogg.

Skapa egna blockmönster

Låt oss gå in på detta WordPress handledning för utvecklare:inuti en annan aspekt av Gutenberg Utforska. Med WordPress BlockMönster låter dig skapa och dela fördefinierade blocklayouter. Detta är en gruppering av WordPress Block som gör att du kan skapa komplexa layouter med några få klick.

Du kommer åt blockmönstren i redigeringsskärmen För inlägg/sidor genom att trycka på tecknet + . Du kommer då att se alla tillgängliga blockmönster för din webbplats. 

Hur du skapar egna blockmönster 

För att komma igång, skapa en sida eller inlägg design. Infoga block i valfri önskad konfiguration. Om du är .B en nättidning kanske du vill skapa en sidlayout för nya artiklar med framträdande titlar, kolumner, bilder och citationstecken. 

Därefter måste du utforma blocken för att se ut som du vill att de ska. 

Nästa steg är att kopiera allt du har gjort hittills. Klicka på alla dina block medan du håller ner ALT-tangenten för att välja dem. Klicka sedan på ikonen med de tre staplade punkterna (fler alternativ) i verktygsfältet. Klicka på Kopiera. 

Därefter måste du dekryptera HTML-utgången du just kopierade. För att göra detta kan du använda JSON Escape/Unescape Tool. Kopiera koden Resultatsträng som visas efter att du har klickat på Escape. 

Nu måste du registrera ditt nya blockmönster. 

Hur man registrerar och avregistrera Block Patterns

Du kan registrera ett Anpassat Block-mönstermed hjälp av Block Patterns API för att infoga koden som du kopierade ovan i funktionerna.php filen på din WordPress Themes eller genom att lägga till den i en anpassad Plugin Ställen.

Du kan också använda den Byggaren för blockmönster Plugin för att eliminera kodningskraven för att skapa blockmönster.  

Hur Gutenberg Redaktör som Theme Utvecklare:i användningsområden

Gutenberg gör det enkelt att anpassade WordPress Skapa block som gör publicering av innehåll till en rik upplevelse. Du kan Gutenberg men också att byta till en separat sidbyggare. Plugin Hur Elementor eller Divi.

Gutenberg kan användas för att skapa tilltalande layouter för startsidan genom att aktivera block i full bredd och bredd. Eller så kan du använda en blockbaserade Theme från grunden. 

Låt oss diskutera några av dina alternativ i detalj. 

Använd omslagsblock för att lägga till sidavsnitt

Täckblock är ett nyare tillägg till Gutenberg och är ett bra sätt att lägga till olika avsnitt på en sida. Mer information finns i den här videon.

Överlägg block du kan lägga är:

• Bildblock
• Video Bakgrunder
• Rubrikblock
• Styckeblock
• Knapp block 

Täckblock gör din webbplats mer mångsidig. På så sätt kan du skapa en individuell hemsida. Du kan även ha en enkel WordPress Theme med en kombination av täckblock och blockmönster. 

Ännu mer omfattande sätt att helt redigera webbplatser är också på horisonten. Teamet av Göra WordPress Design indikerar att mallmanipulation, avancerade blockmönster och globala stilar kommer att vara huvudfokus. 

Användning av Advanced Custom Fields Plugin 

En begränsning av block är att du inte kan uppnå en Full Width layout: det kommer alltid att vara i lådor. 

Men med några smarta manipulationer kan du Advanced Custom Fields Plugin om du vill lägga till anpassade metainställningar och framtvinga layouter med full bredd. Detta är väsentligt om du Gutenberg vill använda för att skapa en egen Themes att skapa. 

Använda anpassade blockformat 

Ett annat sätt att Gutenberg Som Theme Developer:in är att använda Anpassade Block-stilar. När du har skapat blockmönster eller använt omslagsblock för att skapa sidavsnitt kan du sedan lägga till eller ta bort blockformat i varje block som är inblandat. 

Du behöver känna till namnet på blocket så att du kan lägga till eller ta bort format som är associerade med det. Detta ytterligare steg gör det möjligt att den anpassade CSS-klassen inte behöver infogas varje gång blocket används. 

WordPress Block för målsidor och framsidor

Vi har redan nämnt hur effektiva däck block är för att skapa hemsidor för din webbplats eller din webbplats Theme kan vara. De fungerar också bra för målsidor. 

Några andra block som är värda att nämna och kan hjälpa till med denna uppgift är: 

• Gallerier
• Kolumnblock
• Bildblock
• Tabellblock
• Block

De flesta block kan användas tillsammans med omslagsbildblocken för att skapa en proffsig startsida. 

Om du behöver fler funktioner kan du använda en Gutenberg Blockera Plugin lägga till ett enda block i ett enda block. Gutenberg tillägger, eller en Gutenberg Blockera bibliotek Plugin , som tillför mer. 

Ultimate Addons för Gutenberg och Atomic Blocks är enastående biblioteksalternativ som ger en enklare platsbyggnadsupplevelse med block för vittnesmål, call to action, sidlayoutalternativ, kontaktformulär, pristabeller och kortkoder. 

Plugins är idealiska för dem som är Gutenberg och utveckla webbplatser utan att använda en massa kod. 

Slutliga tankar om WordPress Block

Det är WordPress Gutenberg Block Editor är nu en del av WordPress Core och utvecklingsteamet bakom WordPress har stora planer med sig. Till kommer du Gutenberg för att skapa navigeringsmenyer. Och i framtiden kommer redaktören att Themes vara kompatibla.

Med hjälp av denna WordPress Självstudier för utvecklare:inuti kan du nu WordPress Använd block för att skapa webbplatser och anpassa innehåll efter dina behov. 

Du kan nu skapa WordPress-block från grunden och äntligen skapa hela WordPress-webbplatser med den inbyggda blockredigeraren.
Under tiden bör du se till att de webbplatser du utvecklar på Raidboxes vara värd.Raidboxes erbjuder omfattande WordPress-värdpaket som är lämpliga för enskilda webbplatsoperatörer såväl som byråer.