Lärande Gutenberg: Att Bygga Våra Egna Kort Block

0
12

Vi har vissa baskunskaper, vi har spelat med en del Reagerar och nu har vi fått vårt projekt verktyg ställa upp. Låt oss dyka in i byggnaden våra egna kvarter.

Artikel-Serien:

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

Vad vi bygger

Vi kommer att bygga en egen kort block som har en bild, en rubrik och en sammanfattning. Det är ett riktigt vanligt mönster i nätet och det är också låt oss titta på några grundläggande Gutenberg komponenter, tillsammans med WordPress core element, såsom Media Bibliotek. Vi kommer också att spela med några visa logik med JSX för front-end-kod.

Vår härliga anpassade kort blocket!

Vår härliga anpassade kort blocket!

Vi kommer att fokusera enbart på CMS aspekt av detta block i denna handledning. Vad det gör är några fina, rena markeringar på front-end dock. Du kan utöka detta block att funktionen front-end stilar också, om man ville.

Komma igång

Det första vi ska göra är att öppna upp block.js filen vi skapade i föregående avsnitt. I din aktiva plugin-mappen, detta ligger på blocks/src/block/block.js.

Om du arbetar från fil struktur som skapats med skapa-guten-block, du kanske vill börja med att ta bort allt i block.js och skriva din kod från grunden tillsammans med läraren.

Rätt på toppen av denna fil, lägg till följande:

const { registerBlockType, RichText, MediaUpload, Klartext } = wp.block;
const { Knappen } = wp.komponenter;

Vi omfattas omstrukturering av valutan uppdrag i Del 3. Detta är ett bra exempel på dem, som du kommer att se en hel del i Gutenberg-kod. Här, i wp.komponenter som har mer än Knapp, men det är allt vi vill ha, så det är allt vi får. Det är en snygg, eftersom det hindrar oss från att behöva skriva sånt wp.komponenter.Knappen, vilket kommer att vara bra för att hålla vår kod trevlig och ljus.

Vi har som klarats upp, så låt oss importera våra Sass-filer. Det är så att webpack upptäcker dem.

import ‘./style.scss’;
import ‘./redaktör.scss’;

Låt oss nu börja skriva den komponent som driver våra kvarter. Rätt enligt dessa rader, lägg till följande:

registerBlockType(‘kort-block/main’, {
titel: ‘Kort’,
ikon: ‘hjärta’,
kategori: ‘vanliga’
});

Denna kod anger Gutenberg, “Hej, jag har ett block för dig att lägga till din samling. Det kallas “Kort”, “det har ett “hjärta” – ikonen och det ska leva i det “vanliga ” kategori”. Detta är vår del grundläggande definition, så låt oss lägga lite mer kod.

Detta bör bekant ut—kom ihåg vår utmaning i Del 2, skapa-guten-block? I fall du behöver påminna, kolla in det här. De första sex av dessa var relativt enkla och engagerade byta strängar eller lite HTML. Den sjunde artikel, “att Göra ett stycke text som kan redigeras,” är mycket mer komplicerat att genomföra och var avsedda att få dig att tänka lite. Tiden har kommit ändå, och vi kommer verkligen att göra någon text som kan redigeras i Gutenberg!

Du kan också känna igen detta registerBlockType funktion i PHP register_block_type funktion som vi använde i den förra artikeln. Medan denna funktion registrerar ett kvarter från server-sidan av WordPress, är detta ett register vårt block i ekosystem Reagerar på klientsidan. Båda är nödvändigt att ha ett block som använder Reagera, och sina registrerade namn, kort-block/main måste match.

Lägg till följande kod, men se till att du sätter ett kommatecken efter “vanliga”, så ser det ut så här: ‘common’.

Här är koden:

attribut: {
titel: {
källa: ‘text’,
väljare: ‘.kort__title’
},
kropp: {
typ: ‘array’,
källa: “barn”,
väljare: ‘.kort__kroppen”
},
imageAlt: {
attribut: ‘alt’,
väljare: ‘.kort__bild”
},
imageUrl: {
attribut: ‘src’,
väljare: ‘.kort__bild”
}
}

Här är vi som definierar den redigerbara attribut av våra block och DOM väljare som de är tilldelade. Detta attribut-objekt fungerar på ett mycket liknande sätt att Reagera staten objekt. Den har även en mycket liknande uppdatering av metod som kallas setAttributes. Vi återkommer till det senare dock.

Vid denna punkt, är det värt med en kort översikt av staten och attribut eftersom de representerar ett helt nytt sätt att tänka för WordPress-utvecklare. Jag ska ta över för en stund att gå över dem.

Om Attribut och Staten

Det kan se ut som en enkel JavaScript-objekt, men som bit av attribut introducerar ett helt stråk av nya koncept till en WordPress-theme developer ‘ s hjärna, inte minst som är staten. Begreppet staten har en lång historia i datavetenskap, och livet i allmänhet, verkligen. Nästan allt har en stat. Vad är din kaffe kopp i nu? Tom, nästan tom? Hur är det med dina kläder? Är dina skor smutsiga eller nya? Hur är det med din kropp? Är du trött eller vaken?

På en hög nivå, statens hänvisar helt enkelt till att det nuvarande kravet på en sak. I datavetenskap, är ett dator program, och att programmet kan vara mycket, mycket enklare än vad vi skapar här på webben. Ta en varuautomat, till exempel. Automaten har en stat som uppdateras varje gång du lägger i ett mynt. När staten av maskinen når en förutbestämd summa, säg $1.25, maskinen vet att tillåta dig att göra ditt snack val.

I Gutenberg, attribut spåra den nuvarande skick av data i ett block. Attribut är närmast parallell vi kan dra till egna fält i Gutenberg, men de finns endast i samband med Gutenberg och JavaScript. Låt oss ta attribut ovan för titel, till exempel:

titel: {
källa: ‘text’,
väljare: “kort__title’
},

När Gutenberg eldar upp, det säger, “jag måste hitta en text på insidan av en väljare kallas .kort__titel och fyller värde för titel med vad jag tycker.”

Attribut i Gutenberg är inte direkt anslutna till databasen som egna fält är ansluten till post_meta. De poster källa och väljaren finns instruktioner för Gutenberg att befolka staten för varje block. När vi laddar upp redaktör, följer dessa instruktioner och tilldelar ett värde till en titel som bygger på kod som sparas i databasen mellan HTML-kommentarer som tyder på ett block av denna typ. Vi ser inte värdet av title-attribut som vi registrerar, men om jag var att få tillgång till rekvisita.egenskaper.rubriken, att jag skulle få vilken text finns i .kort__avdelning.

Vi har satt upp vissa grunder, så låt oss dyka in i vårt redigera-funktionen. Detta är vad som kallas när blocket är tillgänglig från Gutenberg redaktör i visuellt läge. Användaren kommer att se de rika gränssnitt, snarare än den HTML-kod som den genererar. Det är vad jag ska täcka nästa.

Lägg till vår redigera funktion

Låt oss lägga till lite kod i. Lägg till följande efter stängning } attribut-objekt. Som innan, se till att du lägger till ett dynamiskt komma, så att det ser ut så här },.

Lägg till följande kod efter att:

redigera({ attribut, className, setAttributes }) {
avkastning (
);
}

Så, vi använder oss av annan omstrukturering av valutan uppdrag att selektivt plocka våra överförs parametrar till redigera-funktionen. De två mest viktiga attribut och setAttributes. Den parameter attribut är samma som attribut blocket, men det är den aktuella, reaktiva tillstånd. Detta innebär att om setAttributes funktion uppdateringar en av de egenskaper som värderingar, kommer det automatiskt att uppdatera var som helst som refererar till det, som är liknande till vår Reagera komponent från Del 3.

Det är en stor ol’ återgå i denna funktion. Kan du gissa vad som händer i den? Japp! Vi kommer att hålla lite JSX i det. Lägg till följande inom avkastning parentes:

<div className=”container”>
<MediaUpload
onSelect={ media => { setAttributes({ imageAlt: media.alt, imageUrl: media.url }); } }
type=”image”
värde={ attribut.imageID }
återge={ ({ öppen }) => getImageButton(öppen) }
/>
<Klartext
onChange={ content => setAttributes({ title: innehåll }) }
värde={ attribut.titel }
platshållare=”Ditt kort titel”
className=”rubrik”
/>
<RichText
onChange={ content => setAttributes({ kroppen: innehåll }) }
värde={ attribut.kroppen }
flerradigt=”p”
platshållare=”Ditt kort sms: a”
/>
</div>

OK, det finns en hel del som händer i här, men det är alla saker vi har i tidigare delar av serien. Vad vi har här är en behållare med tre befintliga Gutenberg komponenter. För varje, vi ställer relevanta attribut som dess värde, en relevant platshållare och en onChange/onSelect föraren. Vi är också passerar en anpassad renderare <MediaUpload />, som vi kommer att täcka kort.

Varje onChange handler är en behändig liten uttryck som passerar nytt innehåll som utlöste den onChange i setAttributes funktion, där vi satt som attribut-objekt för att uppdatera. Den här uppdateringen så forsar in någon referens som attribut, där innehållet kommer att uppdatera som magi. <MediaUpload / > – element har en onSelect händelse som aktiveras när användaren väljer eller laddar upp en sak till media-biblioteket.

På tal om <MediaUpload / > – element, kommer du att märka att det finns en anpassad göra attribut som refererar till en getImageButton funktion. Låt oss skriva det nästa. Högre än avkastningen i redigera-funktionen lägg till följande:

const getImageButton = (openEvent) => {
om(attribut.imageUrl) {
avkastning (
<img
src={ attribut.imageUrl }
onClick={ openEvent }
className=”bild”
/>
);
}
else {
avkastning (
<div className=”knappen-container”>
<Knappen
onClick={ openEvent }
className=”knappen-stor”
>
Välj en bild
</Button>
</div>
);
}
};

Vad den här funktionen gör är att upptäcka om det är en imageUrl i attribut-objekt. Om det är, det kommer att göra det till <img / > – taggen och låt användaren klicka på den för att välja en annan. Om det inte finns någon bild, det kommer att göra en WordPress-Knappen < / > som uppmanar användaren att välja en bild. Detta kräver samma openEvent som skickas in i funktionen.

Att hålla saker och ting enkla i den här guiden, vi har kopplat en klick till <img / > – element. Du bör överväga att bygga något fancy som utnyttjar en knappen < / > för din produktion-redo block, för bättre tillgänglighet support.

Rätt, det är vår redigera-funktionen gjort. Inte mycket kod för det, med tanke på vad det faktiskt gör, vilket är bra!

Lägg till våra spara-funktion

Vi har fått våra Gutenberg editor-slutet av blocket som skrivits till nu, och som är den svåra delen. Nu är allt vi har att göra är att berätta Gutenberg vad vi vill blocket att göra med innehållet. Med samma reaktiva data från attribut, vi kan göra vår front-end-kod i realtid. Det innebär att när någon byter du till HTML-läget för redigering på blocket, det ska vara uppdaterad. Om du redigera den i HTML-läget för redigering, visual-läget kommer också att hållas uppdaterad. Super bra.

Låt oss gräva i då. Efter vår redigera-funktionen, lägg till ett komma, så det ser ut }, och sedan lägga till följande på en ny rad:

spara({ attribut }) {

const cardImage = (src, alt) => {
if(!src) return null;

om(alt) {
avkastning (
<img
className=”kortet__bild”
src={ src }
alt={ alt }
/>
);
}

// Nej, alt, så låt oss dölja det för skärmläsare
avkastning (
<img
className=”kortet__bild”
src={ src }
alt=””
aria-hidden=”true”
/>
);
};

avkastning (
<div className=”card”>
{ cardImage(attribut.imageUrl, attribut.imageAlt) }
<div className=”kortet__content”>
<h3 className=”kortet__title”>{ attribut.titel }</h3>
<div className=”kortet__body”>
{ attribut.kroppen }
</div>
</div>
</div>
);
}

Ser ganska lik redigera-funktionen, eller hur? Låt oss gå igenom det.

Vi startar med hjälp av en omstrukturering av valutan uppdraget att dra ut attributen från den gått paramaters, precis som föregående redigera-funktionen.

Sedan har vi en annan bild av hjälpfunktioner som först känner av om det finns en bild och returnerar null om det inte är en. Kom ihåg: vi tillbaka null i JSX om vi vill ha den för att göra ingenting. Nästa sak detta hjälpare gör är att göra en något varierad <img /> taggen om det finns alt-text eller inte. För det senare, det döljer det från en skärmläsare genom att lägga till aria-hidden=”true” och ange en tom alt-attributet.

Slutligen, vår avkastning spottar ut en nice .kort block med rena, BEM-driven kod som kommer att ladda på front-end av vårt tema.

Och det är att för våra spara-funktion. Vi är så nära att ha ett färdigt block. Bara ett steg kvar att gå!

Lägg till lite stil

OK, vi har detta lite att göra och vi är klar. Den uppmärksamme bland er kanske har märkt några hänvisningar till className prickade om. Dessa refererar till vår redaktör.scss regler, så låt oss lägga till dem.

Öppna upp redaktör.scss, som bor i samma katalog som block.js. Lägg till följande:

@import “../vanliga”;

.gutenberg {

.container {
border: 1px solid $grå;
stoppning: 1rem;
}

.knapp-container {
text-align: center;
stoppning: 22% 0;
bakgrund: $off-white;
border: 1px solid $grå;
border-radius: 2px;
margin: 0 0 1.2 rem 0;
}

.rubrik {
font-size: 1.5 rem;
font-weight: 600;
}

.bild {
höjd: 15.7 rem;
width: 100%;
objekt-fit: omslag,
}
}

Detta är en del lösa CSS för att ge våra blockera vissa kort-liknande stil. Att märka att det är alla kapslade i en .gutenberg klass? Detta är att slåss mot den särskilda karaktären hos vissa grundläggande stilar. Inom redaktör, det är en <div class=”gutenberg” lindade runt kvarteret område av post-redigeraren, så att vi kan se till att endast beröra de delar med denna häckning. Du kommer förmodligen också att märka att vi importerar en annan Sass-fil, så låt oss fylla den.

Öppna gemensamma.scss som bor i src-katalog, som är moderbolag i den aktuella blocket katalog som vi är i.

/*
* Gemensamma SCSS kan innehålla era gemensamma variabler, hjälpare och mixins
* som är delad mellan alla dina kvarter.
*/

// Färger
$grå: #cccccc;
$off-white: #f1f1f1;

Hur som helst, gissa vad? Vi har bara gått och byggt ut en egen kort blocket!! Låt oss ge det en test-drive.

Kontrollera först din block är allt bra. Detta är vad den kompletta block.js filen bör se ut:

const { registerBlockType, RichText, MediaUpload, Klartext } = wp.block;
const { Knappen } = wp.komponenter;

// Importera vår CSS-filer
import ‘./style.scss’;
import ‘./redaktör.scss’;

registerBlockType(‘kort-block/main’, {
titel: ‘Kort’,
ikon: ‘hjärta’,
kategori: ‘gemensam’,
attribut: {
titel: {
källa: ‘text’,
väljare: ‘.kort__title’
},
kropp: {
typ: ‘array’,
källa: “barn”,
väljare: ‘.kort__kroppen”
},
imageAlt: {
attribut: ‘alt’,
väljare: ‘.kort__bild”
},
imageUrl: {
attribut: ‘src’,
väljare: ‘.kort__bild”
}
},
redigera({ attribut, className, setAttributes }) {

const getImageButton = (openEvent) => {
om(attribut.imageUrl) {
avkastning (
<img
src={ attribut.imageUrl }
onClick={ openEvent }
className=”bild”
/>
);
}
else {
avkastning (
<div className=”knappen-container”>
<Knappen
onClick={ openEvent }
className=”knappen-stor”
>
Välj en bild
</Button>
</div>
);
}
};

avkastning (
<div className=”container”>
<MediaUpload
onSelect={ media => { setAttributes({ imageAlt: media.alt, imageUrl: media.url }); } }
type=”image”
värde={ attribut.imageID }
återge={ ({ öppen }) => getImageButton(öppen) }
/>
<Klartext
onChange={ content => setAttributes({ title: innehåll }) }
värde={ attribut.titel }
platshållare=”Ditt kort titel”
className=”rubrik”
/>
<RichText
onChange={ content => setAttributes({ kroppen: innehåll }) }
värde={ attribut.kroppen }
flerradigt=”p”
platshållare=”Ditt kort sms: a”
formattingControls= { [“fetstil”, ‘kursiv’, ‘understruken’] }
isSelected={ attribut.isSelected }
/>
</div>
);

},

spara({ attribut }) {

const cardImage = (src, alt) => {
if(!src) return null;

om(alt) {
avkastning (
<img
className=”kortet__bild”
src={ src }
alt={ alt }
/>
);
}

// Nej, alt, så låt oss dölja det för skärmläsare
avkastning (
<img
className=”kortet__bild”
src={ src }
alt=””
aria-hidden=”true”
/>
);
};

avkastning (
<div className=”card”>
{ cardImage(attribut.imageUrl, attribut.imageAlt) }
<div className=”kortet__content”>
<h3 className=”kortet__title”>{ attribut.titel }</h3>
<div className=”kortet__body”>
{ attribut.kroppen }
</div>
</div>
</div>
);
}
});

Om du är nöjd, låt oss skjuta upp webpack. Medan det i din nuvarande plugin-katalogen i terminalen, köra det här:

npx webpack –se

Detta är något annorlunda än den tidigare delen i serien eftersom vi har lagt –titta på argument. Detta är i princip håller ett öga på din js-filer och åter går webpack om de förändras.

Brand upp redaktör!

Låt oss skjuta upp Gutenberg-editor genom att ladda upp ett inlägg i WordPress baksidan slutet. I Gutenberg-editorn, klicka på den lilla ikonen och titta i “block” – fliken och där är: vår fantastiska nya kort blocket!

Gå vidare och ge det ett test drive och lägga till lite innehåll i det. Känns bra va?

Här är en snabb video om vad du bör se just nu, med din fina nya kort block:

Och med som du gjort 🎉

Här är en sak du kanske tänker: Är inte block typ av ersättning för egna fält? Inte kan jag nu skapa mitt eget innehåll struktur direkt i WordPress istället för att använda en plugin som Advanced Custom Fields? Inte riktigt…

Block vs. Egna Fält

När Gutenberg inte att ge oss möjlighet att anpassa strukturen för inmatning från användarens upplevelse, på back-end-det är inte annorlunda än den nuvarande WYSIWYG-editor. Sparade Data från ett block är en del av post_content kolumn i databas tabellen wp_posts—det är inte lagras separat i wp_postmeta som egna fält. Detta innebär att det för närvarande kan vi inte få tillgång till data från våra kort kvarter från ett annat inlägg på samma sätt som vi skulle kunna om vi hade skapat egna fält för titel, bild och innehåll med en standard Advanced Custom Fields setup.

Som sagt, jag kunde se några riktigt intressanta plugins påsvetsning som ger ett sätt att port data från ett block till andra delar av en webbplats. Med WordPress REST API, möjligheterna är nästan obegränsade! I vår screencast, Andy och jag tog en stab på med en API-begäran till våra kort block och även om det inte blev precis som planerat, verktygen finns redan på plats och du kan få en smak av vad som kan vara möjligt med Gutenberg i framtiden. Tiden kommer att utvisa!

Att linda upp och nästa steg

Vilken resa vi har varit på tillsammans! Låt oss lista ut vad du har lärt dig i den här serien:

  • Du har lärt dig några grundläggande, moderna JavaScript av att komma tillrätta med ES6
  • Du har lärt dig grunderna i JSX
  • Du tog som ny kunskap och byggt ut en Reagera komponent från grunden
  • Du har då lärt sig hur webpack fungerar och skrev en skalbar config fil för Gutenberg blockera utvecklingen
  • Slutligen, har du byggt egna Gutenberg kort kvarter från scratch

Så, där kan du gå härifrån? Nu när du har fått några solid bas av kunskap från denna serie, kan du göra några ytterligare lärande. Det finns redan fantastiska resurser för att:

  • Du skriver Ditt Första Blocket Typ på WordPress.org (Andy: Det är hur jag lärde mig hur block arbete)
  • Gutenberg Kurser av Zac Gordon och Joe Casabona
  • Skapa en Anpassad Gutenberg Block av Pete Tasker
  • Anatomi av ett eget Block av Morgan Kay
  • Tusen och Ett Sätt att Förlänga Gutenberg Idag Riad Benguella
  • Gutenberg samtal om WordPress.tv

Några intressanta fallstudier:

  • Revision Din WordPress Plugin för Gutenberg
  • Gutenberg på Humanmade.com
  • Moderna Tribe “Kommer Gutenberg”

Håll ett öga på dessa resurser för att hålla dig uppdaterad med projektet:

  • Gutenberg Nyheter
  • Gutenberg Gånger

Experimentella saker som händer med Gutenberg:

  • Gutenberg Egna Fält plugin
  • Atomic Block-plugins och tema

När Gutenberg blir en del av WordPress core i version 5.0 (release datum ej fastställt), du kan också publicera en användbar anpassad block i WordPress plugins-katalog. Det finns definitivt plats för några praktiska komponenter såsom kort block som du precis har byggt.

Vi hoppas att du har haft denna serie, eftersom vi har verkligen haft att göra det. Vi hoppas verkligen att detta hjälper dig att få till Gutenberg och att du bygger en del coola grejer. Du bör helt skicka länkar till saker du har byggt!

Artikel-Serien:

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