Lärande Gutenberg: En Primer med skapa-guten-block

0
26

Välkommen tillbaka! Vi har bara tagit en titt på vad Gutenberg är och hur det fungerar från admin-sidan. Gutenberg är säkerligen kommer att ha en massiv inverkan på WordPress-världen. Om du bara kommer här och har ingen aning om vad vi pratar om, jag rekommenderar att åtminstone skumma Del 1 se till att du har en lämplig bakgrund.

Låt oss skapa ett eget block med lite hjälp från ett underbart verktyg som heter skapa-guten-block. Framåt!

Artikel-Serien:

  1. Serien Introduktion
  2. Vad är Gutenberg, Ändå?
  3. En Primer med skapa-guten-blocket (Detta Inlägg)
  4. Modern JavaScript-Syntax (Kommer Snart!)
  5. Reagera 101 (Kommer Snart!)
  6. Att sätta upp en Egen webpack (Kommer Snart!)
  7. En Anpassad “Card” – Block (Kommer Snart!)

Block bor i plugins

För att skapa en Gutenberg-block, som du skapar ett WordPress-plugin. Något som påverkar *innehåll*, som en Gutenberg blockera vissa kommer, måste vara en plugin så att det förblir aktiv även när du ändrar teman. Något som är väldigt tema, särskilda eller bara påverkar hur din webbplats ser ut kan vara en del av temat filer eller functions.php fil i ditt tema. Läs mer om denna skillnad i vår artikel om WordPress Funktionalitet Plugins.

Som sagt, block i teman fråga som är ett hett ämne. WordPress Tema över Lag är att diskutera huruvida eller inte att låta block i teman alls som en del av teman. Ett inlägg, “Redo för Gutenberg”, på Temat över Lag är att Göra sidan ställde denna fråga, och möttes med starka åsikter från båda sidor. Den allmänna uppfattningen är dock att blocken är plugin territorium.

WordPress.org består av olika grupper, var och en med sin egen hemsida på make.wordpress.org/team-name kanal i WordPress Slack, och ett veckomöte. Om du är intresserad av att delta i WordPress eller nyfiken på hur det fungerar, rekommenderar jag starkt att bläddra igenom en lista över de lag här, gå med i en Slack-kanal, och dyker in på en vecka möte för att se hur det händer alla.

I en avlägsen framtid, det är möjligt att teman kommer att bestå av *bara en stylesheet*, medan alla anpassade funktioner och innehåll som struktur kommer från block i plugins. Jag är omskriva ord Tammie Lister, Gutenberg ‘ s design bly, på denna episod av Shoptalk Visa. Mycket värt att lyssna!

Med en inställning av genväg för nu…

Vad som höll mig från att dyka med huvudet först in i modern JavaScript är dang konfiguration. Den transpiling, buntning, koden dela upp trädet skakar… jisses, jag är upptagen! Jag älskar att lära mig nya saker, men det finns en gräns för mitt tålamod och, tydligen, konfigurera en byggprocessen för ett litet test för projektet är min gräns.

Det är denna känsla som ledde till utvecklingen av ett verktyg som heter skapa-reagera-app, noll-konfiguration bygga setup för, du gissat det, skapa Reagera apps. Det är lysande. Förutsatt att du har en fungerande nod och npm-installationen kan du köra ett enda kommando, och du har ett projekt redo för dig att börja koda i att Reagera. Den transpiling, buntning, och träd skakar är att ställa upp för dig.

Men vänta… vi kan använda för att skapa reagera-app för Gutenberg block? Nej, men nämnda skapa-guten-block, utvecklat och vackert dokumenteras av Ahmad Awais, gör ganska mycket samma sak för oss! Det är vad vi kommer att använda för våra block.

skapa-guten-blocket är inte bara att blockera skapa verktyg till vårt förfogande! Du kan byggnadsställning ett block med hjälp av WP-CLI, men jag har valt att inte, eftersom standardinställningen är för ES5 (för nu) och inte ger oss vad vi behöver för vår resa i modern JavaScript. Som sagt, jag fann det vara bra att gräva igenom ES5 genomförandet av ett block som ett sätt att stärka de centrala begreppen, så kanske ge det en chans när du är klar här!

Ja, det här är en genväg. Vi väljer att inte förstå de centrala begreppen i en teknik som med hjälp av ett verktyg. Vi kommer att ha att lära sig dessa begrepp en dag. Men för nu, jag är helt bra att kringgå denna konfiguration steg. Min filosofi om att använda verktyg som detta: använda dem, men gör det med insikten att det *förmodligen* det går inte att spara tid och ansträngning i det långa loppet.

Det är värt att notera att, som skapa-reagera-app, skapa-guten-block gör du för att npm mata ut din konfiguration. Detta innebär att exponera alla inställningar verktyget har skapat för oss och göra dem tillgängliga för anpassning. Observera dock att detta är bestående, om du mata ut och sedan göra ett misstag, du är på egen hand för att fixa det! Som jag sa, du måste lära dig det någon dag 🙂

Steg 1: Installera skapa-guten-block

Vi kommer först att installera skapa-guten-block globalt, så här:

npm install-g-skapa-guten-block

I teorin borde detta fungera utan problem, men det är inte realistiskt. skapa-guten-block kräver ett minimum av Nod version 8 och npm 5.3, så om du inte har uppdaterat någon av dem för ett tag, som ett möjligt fel (och här är en möjlig lösning).

Jag börjar alltid med att klistra in min konsol fel i en sökmotor och ta bort radnummer och filnamn för att hålla min fråga allmänhet. I syfte att förbättra denna tutorial, men jag är nyfiken på att höra om vad som gick fel så är du välkommen att skicka din fråga i kommentarerna också.

Steg 2: Skapa en guten-block

Det är dags! Låt oss göra det! Vet du vad? Jag tänker inte berätta hur, eftersom Ahmad dokumentation är så bra och det finns ingen mening i att replikera det.

Gå här och följ Ahmad ‘ s instruktioner för att skapa den guten-block i din kommandorad.

Du bör se någonting som liknar detta när du kör kommandot create-guten-block test, där “testet” är namnet på mitt block.

Steg 3: Aktivera plugin

Gå till din Plugins-skärmen, aktivera ditt nya block plugin — det borde heta något i stil test-block — CGB Gutenberg Block Plugin där “test-block” är vad du heter din block när du skapar det.

Steg 4: det är det! Låt oss använda vår egna blocket!

Så lätt! Nu, gå till redaktören syn på ett inlägg eller en sida, hitta ditt block, och sätt in det.

Även om jag heter my block “test”, söker på “test” i blocket väljare gett fel resultat som du kan se i gif ovan. Standardnamnet på blocket istället “CGB Block” — vi kommer att ändra på detta mycket snart!

Textredigerare för installationsprogrammet (valfri)

Jag har funnit det mycket bra att ha en specifik text editor inställningar för att utveckla block. Jag använder Visual Studio Kod för min textredigerare, men jag är säker på att du kan lista ut något liknande med vad editor är dina önskemål.

Här är de viktigaste ingredienserna:

  1. Enkel tillgång till kommandoraden för att hålla ett öga på att bygga fel (det kommer att bygga fel)
  2. En kopia av Gutenberg-källa från GitHub för kod referens (ladda ner eller klona den här)
  3. Enkel tillgång till både plugin directory och Gutenbergs källa katalog från #2
Min VS-Kod inställning för Gutenberg utveckling. Märker integrerad terminal och flera källor kataloger på höger.

I VS-Kod, jag åstadkomma detta med hjälp av följande funktioner:

  1. Integrerad terminal öppna med Kommando + ~ på Mac, eller från menyn bar med Utsikt > Integrerad Terminal
  2. En Arbetsyta som innehåller mappar för både plugin och Gutenbergs källa från GitHub. Du kan göra detta genom att öppna din plugin-katalogen i VS-Kod, och sedan välja Arkiv > Lägg till Mapp för att Arbetsyta och välja Gutenberg katalog du laddat ner från GitHub repo. Du kan sedan spara den Arbetsyta för enkel åtkomst med File > Save Workspace As (jag kallade min “Block” i bilden ovan).

Denna del är frivillig, och du behöver inte använda VS-Kod. Det viktiga är att ha tillgång till kommandoraden, plugin källa, och Gutenberg-plugin källa för referens. Du kan helt reference source på GitHub om du vill, men jag njuta av att ha filerna i samma miljö för sida-vid-sida jämförelse och enkel sökning med Hittar I Mappen.

Vi använder Gutenberg från plugin slutförvaret för den faktiska funktioner, men som exempel bara innehåller de kompilerade filerna. Vi vill referera till den källa filer, så behöver vi använda codebase direkt från GitHub. Om du vill få åtkomst till uppdateringar innan de släpps i plugin kan du duplicera lagret. Det skulle vara helt möjligt att bygga och arbeta från GitHub-version, men för enkelhetens skull har vi använder plugin-version i den här guiden.

När du är redo att gå, se till att du har cd-skivan skulle in på ditt block: s plugin-mappen och kör npm start. Du bör se en tillfredsställande meddelande som indikerar att processen har startat:

Efter att ha kört npm start i vår plugin-mappen, vi är officiellt “att Titta på för förändringar…” (och vi behövde inte röra någon config! Fuskare…)

Jag använder Wes Bim tema för Kobolt 2 i VS-Kod och samma tema för ZSH i min Terminal och iTerm. Det gör absolut ingen skillnad i hur tekniken fungerar, men det gör en skillnad, på en personlig nivå, att anpassa din arbetsyta och gör att det känns som ditt eget (eller Wes Bos”, i mitt fall).

Vad som är vad

Nu när vi är i kod-läge, låt oss ta en titt på de filer vi ska jobba med. Jag ska låna den här från skapa-guten-block viktigt för hänvisning:

└── test-block
├── plugin.php
├── paket.json
├── README.md
|
├── dist
| ├── blocks.build.js
| ├── block.redaktör.bygga.css
| └── block.style.bygga.css
|
└── src
├── block
| ├── block.js
| ├── redaktör.scss
| └── stil.scss
|
├── blocks.js
├── vanligt.scss
└── init.php

För tillämpningen av denna handledning, som vi bara har att göra med vad som är inne src-katalog. Vi kommer inte röra något i dist (de är kompilerade filerna), plugin.php eller någon eftersläntrare som paket.json -, paket-lås.json, eller.eslintignore.

plugin.php officiellt varningar WordPress av vår plugin existens. Det kräver src/init.php där vi ska skriva någon PHP som vi behöver för vår blocket(s). I allmänhet kommer vi inte skriva något i plugin.php — ur lådan, den enda kod som den innehåller är den kommentarer att registrera vår plugin.

Låt oss borra i src:

└── src
├── block
| ├── block.js
| ├── redaktör.scss
| └── stil.scss
|
├── blocks.js
├── vanligt.scss
└── init.php

Blocket katalogen som innehåller filerna för enstaka, enskilda block. Detta ingår:

  • block/block.js — Alla JavaScript för enskilda block.
  • blockera/redaktör.scss — Sass delvis för stilar som är specifika för redigeringsvyn
  • blockera/stil.scss — Sass delvis för stilar som är specifika för front-end-vy, det vill säga vad du ser när du läser din sida/inlägg.

Nu öppnar upp src/blocks.js:

Jag tänker på src/blocks.js som en innehållsförteckning för block, liknande den roll av ett index.scss eller main.scss i en Sass-projektet struktur. Om vi ville inkludera två block i vår plugin — låt oss säga att detta var en svit av egna block — vi kan, i teorin, dubbla blocket katalog, byt namn på den och lägga till något som detta för att src/blocks.js:

import ‘new-block/block.js’;>

Sedan, oavsett skapa-guten-block har förberett för oss bakom kulisserna skulle veta att inkludera våra nya block block.js i main script-fil kompileras till dist (som nu är en bra tid att ta en titt i dist, om du inte redan har gjort det).

Inte alltför illa så långt, eller hur? Vi har fortfarande inte riktigt fått till någon JavaScript…

En utmaning!

Okej, nu är det dags för en utmaning! Öppna upp src/block/block.js och tar ett par minuter att läsa igenom författare, Ahmad, utmärkta kommentarer.

Därefter, se om du kan lista ut hur man*:

  1. Ändra namnet på din blocket, som är, den som visar på blocket väljare
  2. Ändra ikon för din block (❤ Dashicons)
  3. Ändra den text som visas på fronten, det vill säga när du “Visa Inlägg”
  4. Ändra den text som visas på den bakre änden dvs redigeringsvyn
  5. Ge den främre änden visa en gräns radie av 30px
  6. Ge redaktören visa en tonad bakgrund
  7. Gör texten i första stycket tag redigerbar

* Du ska kunna arbeta igenom (nästan!) alla dessa i ca 10 minuter. 😉

Hur var det?

Vilka problem har du stött på? Har du tröttnat på att ladda redaktör? Visste du att se “Detta block verkar ha ändrats externt” budskap oftare än du skulle vilja? Jag gjorde det, men sådant är livet med ny teknik — det finns en hel del att önska i-utvecklare med erfarenhet, men detta är inte en prioriterad fråga för laget för närvarande och kommer att komma i senare skeden av Gutenbergs planerade utveckling.

Viktigast av allt, gjorde du får #7?

Om du gjorde det, då du ska skriva den här guiden! Det var en gotcha. Jag hoppas att du kände åtminstone lite förvirrad och nyfiken för det är så vi lär oss! Vi återkommer till detta i Del 3.

Nu när vi har vårt lager, låt oss gräva djupare i detta begrepp i ett block.

Skelett av ett block

Här är block.js med kommentarer tagits ut — vad vi kan kalla skelett av en statisk block:

// Avskalad version av src/block/block.js

// DEL 1: Importera beroenden
import ‘./style.scss’;
import ‘./redaktör.scss’;

// DEL 2: Inställning av referenser till externa funktioner
const { __ } = wp.i18n;
const { registerBlockType } = wp.block;

// DEL 3: Registrera dig blocket!
registerBlockType( ‘cgb/block-test”) {

// En del 3.1: inställningar för Block
titel: _ _ (“test – CGB Block”),
ikon: ‘sköld’,
kategori: ‘gemensam’,
nyckelord: [
_ _ (“test – CGB Block”),
__( ‘CGB Exempel’ ),
__( ‘skapa-guten-block ),
],

// En DEL 3.2: koden i editorn
edit: funktion( rekvisita ) {
avkastning (
<div>Du kommer att se detta i editorn</div>
);
},

// En DEL 3.3: Markup sparas till databasen
spara: funktion( rekvisita ) {
avkastning (
<div>den Här sparas till databasen och återvände med the_content();</div>
);
},
} );

Låt oss göra en sida-vid-sida jämförelse med en annan statisk block, “Separator” kvarter från standard block som ingår i Gutenberg. Filen ligger i gutenberg/blocks/library/separator/index.js. Om du har mappen öppen i antingen VS Kod eller Sublima, kan du använda kortkommandot Command + Option + 2 på en Mac, eller Visa > Split Editor för att få filerna sida vid sida.

Om du följer den text editor inställningar som beskrivs ovan, du bör ha något liknande detta:

I den här bilden, jag kopiera/klistrat in ovan avskalad version av blocket till en tom fil för att jämföra den utan kommentarer. Det är valfritt!

Vilka likheter ser du? Vilka skillnader? Öppna upp några av de andra blocket kataloger inne gutenberg-master/bibliotek/ och ta en titt in sina filer, jämföra dem med våra block skelett. Spendera ett par minuter att läsa koden och se om du kan hitta några mönster.

Här är några mönster som jag märkte:

  1. Det är klammerparenteser i varierande förklaringar och funktion argument överallt.
  2. Kodningen visas insidan av avkastning uttalanden och innehåller ofta gjort upp tagg namn (som du kanske känner igen dessa som Reagerar komponenter).
  3. Alla block verkar ha en inställningar objekt som innehåller entires för titel, ikon , kategori, etc. I biblioteket block, visas de i en export const inställningar = … objekt, medan i vår plugin block, de är en del av ett argument för att registerBlockType.
  4. Alla block har funktioner för att redigera och spara som en del av de inställningar som objekt.
    • Syntaxen för funktionerna är något annorlunda än våra block är redigeraoch spara funktioner:
      • redigera( { className } ) { … } i separator/index.js
      • edit: funktion(rekvisita) { … } i vår block.js
    • Biblioteket block som visas för att referera attribut och istället för rekvisita
  5. Alla block i biblioteket innehålla en index.js. Vissa innehåller en block.js eller andra filer som visas innehåller en definition för en klass att utvidga en Komponent, t ex klass LatestPostsBlock sträcker Komponent { ….

Vad hittade du? Välkommen att bidra i kommentarerna (men sluta inte läsa här!).

En något kort och relevant tangent

Märkte du förmodligen ett uttalande att importera @wordpress/i18n i varje index.js och block.js fil i biblioteket, liksom en hänvisning till wp.i18n i vår plugin block.js. i18n står för internationalisering precis som a11y står för tillgänglighet. Internationalisering hänvisar till praxis för att utveckla din ansökan ska vara lätt översättas till andra språk. Eftersom vi vill att förbereda alla statisk text i våra kvarter för översättning, kan vi tilldela wp.i18n till ett alias __för enkelhetens skull, väldigt mycket som vi använder $ som ett alias för bra ‘ol jQuery. Läs mer om i18n för WordPress här

Det är också värt att nämna var att wp i wp.i18n kommer ifrån och varför det är som det refereras som @wordpress/i18n i Gutenberg-källa. wp är ett globalt objekt — global vilket innebär en variabel, som finns överallt och som innehåller alla WordPress ” allmänt tillgänglig JavaScript API-metoder. För att visa detta, öppna upp konsolen samtidigt på en sida i WordPress admin. Typ wp och tryck Enter. Du bör se någonting som liknar det här:

Så, när vi hänvisning något inom wp objekt, allt vi gör är att komma åt vissa funktioner i WordPress JavaScript API ger oss. @wordpress/i18n i Gutenberg-källa är att göra samma sak, men att importera funktioner från ett npm-modul snarare än det globala objektet. Funktioner i wp globala ha varit avsiktligt utsätts för allmänheten API av WordPress core-utvecklare för användning i teman och plugins.

Om du är något som min inre kritiker, du kanske tänker, “Vad, Lara, jag bryr mig inte om dessa detaljer. Vill bara berätta för mig hur man gör en cool block med alla JavaScript redan!” Som jag skulle svara:

Det finns så många rörliga delar och nya begrepp i den här miljön som jag har hittat, mer kod jag tar för givet, desto mer frustrerande och tidskrävande processen blir. Tillvägagångssätt varje rad kod med nyfikenhet! Om du inte vet vad den gör, gör ett Sök i Mapp i Gutenberg-källa och se om du kan hitta ett spår att följa. För mig, åtminstone, detta har varit ett mycket roligare sätt att närma sig främmande kod än att försöka bygga något på måfå som du kan kopiera och klistra in.

Och med det, låt oss slå upp en Del 2!

Läxor

Vad? Läxor? Heck ja, det är läxor! I Del 3, Andy 🍉 kommer att dyka i modern JavaScript godsaker: Reagera, JSX, och ES6 syntax. Även om våra serien är skriven för de relativt ny att JavaScript är det bra att lära sig koden och begrepp från många olika vinklar och resurser.

I ett försök att införa några begrepp tidigt, här är ett utkast för att några “Läxor” före Del 3:

1. Spendera lite tid (1-2 timmar) på en Reagera handledning, eller tills du kan förklara med egna ord:

  • Render-metoden i Reagera
  • JSX, och att de som gjorde upp taggnamn karta till JavaScript-funktioner
  • Varför Reagerar använder className i stället för klass

Rekommenderade resurser:

  • Jag verkligen tyckte om att Lära sig React.js av Eva Porcello på Lynda.com. Lynda är en betaltjänst, men du kan titta på gratis med ett lånekort i vissa städer (Los Angeles, för säker).
  • Jag rekommenderar också denna artikel serie, Lära sig att Reagera med skapa-reagera-app av Brandon Richey
  • Det finns många, många alternativ på Youtube!
  • Jag har jobbat mig igenom Brian Holt är Komplett Intro Reagerar naturligtvis på Frontend Masters (betalt) och det är väldigt bra.
  • Jag kan inte gå utan att nämna Wes Bim: s Reagera för Nybörjare kurs(betalda) — jag har inte gjort det själv, men jag har hört bara bra saker, och han håller den uppdaterad!

Jag skulle också rekommendera att läsa Reagera Tillstånd från Marken Upp här på CSS-Tricks, av Kingsley Silas, eftersom det uttryckligen dyk i staten Reagera. Om du är helt ny till att Reagera, detta kommer vara en hel del att smälta, men jag tycker att det är värt att få in det i din hjärna ASAP även om det inte är vettigt riktigt ännu.

2. Förstår ES6 omstrukturering av valutan och hitta några exempel på det i både Gutenberg källa och vår plugin (det kommer inte vara svårt).

Rekommenderade resurser:

  • Blogg: En Död Enkel Intro till omstrukturering av valutan Objekt av Wes Bim
  • Video: omstrukturering av valutan: Vad, Varför och Hur kul Kul Funktion (dessa är A+ — titta här om pilen funktioner medan du är på det)

3. Att vara bekväm med villkorlig eller ternära aktörer.

I en mening, ternära aktörer är en förkortning för if…else-satser. Du kommer att se dessa över Gutenberg-källa — att hitta några enkla exempel som ger en återgång till en sträng som värde, liksom mer robust bruk som i blocks/library/paragraph/index.js till exempel.

Rekommenderade resurser:

  • Den MDN artikel är mycket bra.
  • Ser också till att inte operatören — här är ett Stack Overflow inlägg om det.
  • För att inte komma för långt ner denna kaninhålet, men om du är extra ambitiösa, göra lite forskning om vilken typ tvång i JavaScript. Denna artikel om FreeCodeCamp och detta kapitel från att Du inte Vet JS av Kyle Simpson är fasta utgångspunkter.

Okej! Tack så mycket för att läsa, och se dig i Del 3 för att Reagera, JSX, och andra godsaker.

Kommentarer

Var det någon del av denna handledning som inte är vettigt? Gjorde du går vilse någonstans? Vi vill gärna fortsätta att göra detta bättre, så snälla låt oss veta om någon del av detta var svårt att följa eller om någon information är felaktig eller inaktuell.

Tack, igen, och lycka till!

Artikel-Serien:

  1. Serien Introduktion
  2. Vad är Gutenberg, Ändå?
  3. En Primer med skapa-guten-blocket (Detta Inlägg)
  4. Modern JavaScript-Syntax (Kommer Snart!)
  5. Reagera 101 (Kommer Snart!)
  6. Att sätta upp en Egen webpack (Kommer Snart!)
  7. En Anpassad “Card” – Block (Kommer Snart!)