Share
Den nya WordPress-redigeraren (kodnamn Gutenberg) beror på release i version 5.0. Nu är det den perfekta tiden att ta tag i det innan den landar i WordPress-kärnan.
Jag ska visa dig hur du arbetar med block API och skapa dina egna innehållsblock som du kan använda för att bygga dina inlägg och sidor.
Det finns inte ett exakt datum för när WordPress 5.0 kommer att släppas, men det ska vara lite tid inom de närmaste månaderna. Fram till dess finns Gutenberg tillgängligt som ett fristående plugin.
Jag rekommenderar starkt att du testar den nya Gutenberg-redaktören om du inte redan har det. Det är väldigt enkelt att installera direkt från din WordPress-administratör. Men eftersom det fortfarande är en betaversion av den nya redaktören rekommenderas det inte att du använder det på produktionsplatser än. Håll det bara för lokala utvecklingsplatser för nu.
Att ha Gutenberg installerat är också viktigt om du vill följa med denna handledning. På så sätt kan du experimentera med att skapa egna egna block. Utvecklingen av den nya redaktören har snabbt stigit i takt de senaste månaderna, med flera utgåvor redan så långt 2018. Den senaste versionen av Gutenberg är för närvarande 2,7,0 vid skrivningstidpunkten.
Med varje utgåva läggs nya funktioner till och redigeringsgränssnittet förbättras ständigt utifrån användarens återkoppling. Det börjar se och känna sig mycket slicker än tidigare versioner. Också många buggar har åtgärdats, vilket gör redaktionen mycket robustare.
Gutenberg ger ett nytt sätt att bygga in postinnehåll via "block", som kan staplas ovanpå varandra för att bilda en komplett sida. Varje enskilt block existerar oberoende av andra block och kan innehålla nästan alla uppslag, stilar och JavaScript du vill ha.
Under hela handledningen täcker vi allt du behöver veta om block-API, så att du kan börja skapa dina egna anpassade block direkt. När du förstår fundamentet är det lättare att skapa mer komplicerade block än du kanske tror!
Gutenberg-projektet är stora nyheter för WordPress för en annan viktig anledning. Den är byggd ovanpå React. Det är rätt, för första gången i WordPress kommer React att ingå i kärnan! Det här är bra nyheter för temat och plugin-utvecklare, eftersom React enkelt kan läggas till vilken sida som helst genom att använda React and ReactDOM-biblioteken som ingår i WordPress-kärnan.
Ganska snart kan du skapa UI-komponenter för alla dina WordPress-projekt direkt i React. Tidigare, om du ville använda React and ReactDOM-bibliotek måste du inkludera dem manuellt. Att ha dem i kärnan gör det mycket bekvämare.
Tänk bara på hur fantastisk det skulle vara att skapa en skärm för plugin-alternativ helt i React! Eller hur är det med några coola avancerade anpassningsverktyg? Dessa nya verktyg kommer att ge utvecklare en hel del frihet och flexibilitet för att skapa några bra interaktiva användargränssnitt.
Jag förutser att WordPress-utveckling under de närmaste åren kommer att bli väldigt intressant och mycket roligt också!
Begreppet block i den nya redigeraren är en riktig förändring från den nuvarande TinyMCE-baserade redaktören, så låt oss titta närmare på vad ett block är innan vi dyker in i block-API. Tänk på block som svarta lådor, som varje innehåller en massa markup, stilar och JavaScript, alla inslagna i en bekväm enhet som heter "block".
När ett block läggs till i redigeraren, visar det en förhandsgranskning av hur det kommer att se ut på framsidan. Nästan alla block har inställningar för att ytterligare anpassa sitt utseende och / eller beteende.
Några av de tillgängliga blocken i den nya redigeraren är:
Detta ger dig en uppfattning om vilken typ av innehåll du kan lägga till i redigeraren med hjälp av block som ingår i den nya redigeraren. Alla dessa blocktyper är användbara men ganska grundläggande, så förvänta dig att många plugins ska börja visas med mycket mer omfattande block för att lägga till nästan vilken typ av innehåll du kan tänka på.
Du kanske redan har tänkt på några innehållsblock som du behöver för dina egna projekt. Om ingen av dessa finns i Gutenberg är de förmodligen bra kandidater för att skapa ditt eget anpassade block.
Jag rekommenderar att du provar koden som presenteras i den här handledningsserien eftersom det är det bästa sättet att lära dig hur du skapar egna block med hjälp av block-API. För all del läs igenom handledningen först för att få tag i hur block API fungerar, men kom tillbaka och prova en del av koden själv och börja skapa några block!
Detta är en medium till avancerad nivå tutorial serie, så det antas att du inte är ny för WordPress utveckling. För att få ut det mesta av denna serie borde du ha minst en fungerande kunskap om följande:
Om du behöver borsta på något av dessa ämnen kan det vara en bra idé att göra det innan du fortsätter. Jag ska förklara koncept som vi går med, men det ligger utanför handledningen för att förklara varje liten detalj.
Det är vanligt att skapa anpassade block i WordPress med JSX, men det är inte på något sätt nödvändigt. Om du är van att utveckla React-komponenter i vanilj JavaScript kan du göra det också i WordPress. Valet är helt ditt. Men det mesta av blockkoden du kommer att stöta på kommer att skrivas i JSX (inklusive denna handledning), så det är lättare att förstå koncept om du använder JSX också.
Gutenberg-projektet utvecklas fortfarande väldigt mycket, så vissa saker kan komma att ändras även när du läser denna handledning. Detta kan innefatta ändringar i redigeringsgränssnittet, nya kärnkomponenter, etc..
Den nya redigeraren är dock ganska stabil nu, och de nyligen tillagda funktionerna som kapslade block och dra / släpp-omreglering är ganska spännande. Även om några av de mindre detaljerna av på vilket sätt du implementerar block kan förändras, det viktiga att komma ihåg är det övergripande begreppet block och hur du kan använda dem för att skapa vilken typ av innehåll som helst.
Om du fastnar, skulle jag rekommendera att ta en titt på den officiella Gutenberg-handboken, som hålls uppdaterad med de senaste ändringarna. Kolla även på Gutenberg-projektet på GitHub för att inspektera källkoden och logga in eventuella problem du kan komma överens om.
Detta kommer bara att hjälpa projektet att bli starkare ju fler människor testar det. Detta är en annan stor anledning att börja utveckla block nu, innan de officiellt ingår i WordPress!
För att följa med koden i denna handledning behöver du följande:
Om du inte redan har en lokal utvecklingsmiljö upprättad kan du använda något som Local by Flywheel eller DesktopServer eftersom de båda har gratisversioner tillgängliga och stöder flera operativsystem.
Se till att du kör de senaste versionerna av WordPress och Gutenberg-plugin för att vara säker på att du använder alla de senaste funktionerna. Det finns också några bra kodredigerare där ute, så om du inte redan har en installerad, ta en titt på gratisredigerare som Visual Studio Code eller Atom, vilket borde vara mer än tillräckligt.
För att enkelt skapa nya block ska vi använda en relativt ny verktygslåda som heter skapa-guten-blocket. Det låter dig snabbt snurra upp ett nytt plugin som innehåller all installations- och startkod som krävs för att skapa block. Det är också en nollkonfigurationsverktygssats, så det fungerar rätt ur lådan på samma sätt som skapa reagera-app verktygslåda för ställning av nya React-appar med minimal ansträngning. Så om du någonsin har använt skapa reagera-app, du vet vad du kan förvänta dig.
Låt oss ta en titt nu på hur vi kan använda detta verktyg för att skapa Gutenberg-block. Öppna ett terminalfönster i din plugin-mapp (/ Wp-content / plugins /) för din lokala utvecklingsplats och ange följande:
npx skapa-guten-block my-custom-block cd my-custom-block npm start
(Obs! Npm v5.2 + krävs för att använda NPX kommando.)
Efter några minuter skapas ett nytt plugin i en mapp som heter my-custom-blocket innehållande alla filer och verktyg som behövs för att skapa block med React! Inte dåligt, eh?
Namnet på pluginprogrammet i WordPress-administratören kommer att vara mitt anpassade block - CGB Gutenberg Block Plugin. Gå vidare och aktivera det.
Pluggen skapar ett nytt block som är tillgängligt för oss att använda i Gutenberg-redigeraren. För att testa vårt nya block, navigera till postredigeraren och klicka på platshållarteksten märkt Skriv din historia.
Klicka sedan på / nyckel för att visa en popup-box som vi kan använda för att söka efter alla tillgängliga block.
Obs! Det finns andra sätt att söka efter ett block, men jag gillar att använda / för att visa sökfönstret ganska snabbt och bekvämt. Men använd den metod som du känner dig mest bekväm med.
Med sökrutan öppen, börja skriva my-custom-blocket och välj mitt anpassade block - CGB Block. Detta visar vårt anpassade block inuti redigeringsfönstret.
För tillfället är det bara ett boilerplate block, vilket inte gör något annat än att visa platshållare i en färgad låda. Det markerar dock en intressant aspekt av att skapa block.
Klick Visa inlägg för att se hur posten kommer att se till besökare på webbplatsen.
Som du kan se är både innehållet och stilen på det gjorda blocket olika på framsidan och baksidan. Detta gäller även JavaScript-kod, vilket också kan vara annorlunda för frontänden.
Anledningen till skillnaden i rendering är att när du skapar block måste du specifikt deklarera separata funktioner för frontend och back-end-rendering.
Det beror på att många block kräver ytterligare användargränssnitt som ska göras inuti postredigeraren för att hjälpa till att konfigurera blockinställningar. Eftersom detta bara är relevant för postredigeraren är det fullständigt överflödigt när det gör blocket på framsidan. Därför anger du utdata som måste visas i frontänden i en separat reningsfunktion.
Även om detta tillvägagångssätt är meningsfullt och fungerar bra, orsakar det problem med koddubbling. Om du inte är försiktig kan du sluta med många dubbla definitioner av innehåll.
Där det är möjligt, är det en bra idé att skilja ut innehåll som är gemensamma för front-end och back-end rendering funktioner för att minska dubbletter. Vi följer denna metod genom hela denna tutorial-serie.
I denna handledning presenterade jag begreppet vad ett block är och varför den nya Gutenberg-redaktören kommer att bli stora nyheter när den skickas med WordPress 5.0. Det är en riktig förändring från den nuvarande TinyMCE-baserade redigeraren.
Att hjälpa till att skapa block snabbt, skapa-guten-blocket är ett mycket användbart verktyg som låter dig skapa ett komplett plugin som innehåller ett arbetsstartblock redo för anpassning.
Vi avrundade saker genom att se hur vi använder vårt anpassade block inuti den nya postredigeraren, och vi upptäckte att rendering på fram- och baksidan kan se väldigt annorlunda ut. I Gutenberg behöver du inte matcha produktionen alls!
I del 2 kommer vi in i specifika blockprogrammet och hur du kan utnyttja det för att skapa egna egna block.
Under tiden, kolla in några av våra andra inlägg om WordPress Gutenberg!
Accentsconagua