Leren Gutenberg: Het Bouwen Van Custom-Kaart Blokkeren

0
12

We hebben wel wat basis kennis, we hebben gespeeld met sommige Reageren en nu hebben we ons project tools instellen. Duik in het bouwen van onze custom block.

Serie Artikelen:

  1. Serie Inleiding
  2. Wat is Gutenberg, Toch?
  3. Een Primer met create-guten-blok
  4. De Moderne Syntaxis Van JavaScript
  5. Reageren 101
  6. Het opzetten van een Aangepaste webpack
  7. Een Aangepaste “Kaart” Blok (Deze Post)

Wat we aan het bouwen bent

We gaan tot het bouwen van een aangepaste kaart te blokkeren die de kenmerken van een afbeelding, een titel en een samenvatting. Het is een echt gemeenschappelijk ontwerp patroon in de web en het ook laten we eens kijken naar enkele core Gutenberg onderdelen, samen met de core van WordPress elementen, zoals de Media Bibliotheek. We spelen ook met sommige scherm logica met JSX voor de front-end markup.

Onze heerlijke aangepaste kaart blokkeren!

Onze heerlijke aangepaste kaart blokkeren!

We gaan om alleen te focussen op de CMS aspect van dit blok in deze tutorial. Wat maakt dat sommige mooi, schoon, de markeringen op de front-end hoor. Je zou kunnen uitbreiden dit blok te voorzien van front-end stijlen ook, als je wilde.

Aan de slag

Het eerste wat we gaan doen is het openen van de block.js het bestand dat we in de vorige sectie gemaakt. In de actieve map plugin, deze is gevestigd aan de blocks/src/block/block.js.

Als je werkt vanuit de structuur van het bestand gemaakt met het maken van-guten-blok, wilt u misschien om te beginnen met het verwijderen van alles in block.js en het schrijven van je code vanaf nul samen met de tutorial.

Rechts op de top van dit bestand, voeg het volgende toe:

const { registerBlockType, Rtf, MediaUpload, Leesbare tekst } = wp.blokken;
const { Knop } = wp.onderdelen;

We vallen destructuring opdrachten in Deel 3. Dit is een goed voorbeeld van degenen, die zie je veel in het Gutenberg-code. Hier, wp.onderdelen bevat meer dan Knop, maar dat is alles wat we willen, dus dat is alles wat we krijgen. Het is een nette, omdat het verhindert ons te schrijven dingen zoals wp.onderdelen.Knop, die zal groot zijn voor het houden van onze code mooi en licht.

We hebben dat opgeruimd, dus laten we importeren onze Sass bestanden. Dit is dus die webpack vastgesteld.

importeren ‘./stijl.scss’;
importeren ‘./editor.scss’;

Laten we nu beginnen met het schrijven van het onderdeel dat de bevoegdheden van onze blok. Recht onder deze lijnen, voeg het volgende toe:

registerBlockType(‘kaart-blok/main’, {
titel: ‘Kaart’,
icoon: ‘hart’,
categorie: ‘common’
});

Deze code vertelt Gutenberg, “Hé, ik heb een blok voor je om toe te voegen aan uw collectie. Het heet ‘Kaart’ het is een ‘hart’ – pictogram en het moeten leven in de ‘gewone’ categorie.” Dit is ons onderdeel basic definitie, dus laten we meer code toevoegen.

Dit moet bekend look—vergeet niet onze uitdaging in Deel 2 maken-guten-blok? In het geval dat u moet herinneren, check it out hier. De eerste zes van hen waren relatief eenvoudig en betrokken vervangen van snaren of een beetje van HTML. De zevende item “Maak de alinea tekst bewerkbaar,” is veel meer ingewikkeld om te implementeren en is bedoeld om je op weg te denken een beetje. De tijd is gekomen, en we zullen inderdaad een aantal bewerkbare tekst in Gutenberg!

U kunt ook herkennen in deze registerBlockType functie van de PHP register_block_type functie hebben we in het laatste artikel. Terwijl die functie registreert een blok van de server-kant van WordPress, deze registers onze blokkeren in het Reageren van het ecosysteem op de client-side. Beide zijn nodig om een blok dat gebruik maakt van Reageren, en hun geregistreerde namen, kaart-blok/main moeten overeenkomen.

De volgende code toevoegen, maar zorg ervoor dat je een komma na ‘common’, zo ziet het er zo uit: ‘common’,.

Hier is de code:

kenmerken: {
titel: {
bron: ‘tekst’,
kiezen: ‘.kaart__titel’
},
lichaam: {
type: ‘array’,
bron: ‘kinderen’,
kiezen: ‘.kaart__lichaam’
},
imageAlt: {
kenmerk: de ‘alt’,
kiezen: ‘.kaart__afbeelding’
},
imageUrl: {
kenmerk: ‘src’,
kiezen: ‘.kaart__afbeelding’
}
}

Hier zijn we met het definiëren van de bewerkbare eigenschappen van onze blok en de DOM kiezen waaraan ze zijn toegewezen. Dit attribuut object werkt op een soortgelijke manier te Reageren state object. Het heeft zelfs een zeer gelijkaardig updaten methode genaamd setAttributes. We zullen dat later wel.

Op dit punt, het is de moeite waard voor een kort overzicht van de toestand en kenmerken, omdat ze vertegenwoordigen een geheel nieuwe manier van denken voor WordPress ontwikkelaars. Ik neem dan een moment om over hen gaan.

Over de Kenmerken en de Staat

Het lijkt een eenvoudige JavaScript-object, maar dat stuk van de kenmerken introduceert een hele reeks nieuwe concepten om een WordPress theme ontwikkelaar hersenen, niet in het minst van die staat. Het concept van state heeft een lange geschiedenis in computer science, en het leven in het algemeen, echt. Bijna alles heeft een staat. Wat staat uw kopje koffie in het nu? Leeg, bijna leeg? Hoe zit het met uw kleding? Zijn uw schoenen vuil of nieuw? Hoe zit het met je lichaam? Ben je moe of wakker?

Op een hoog niveau, staat gewoon verwijst naar de huidige toestand van een ding. In computer science, dat ding is een computer programma en dat programma kan veel, veel eenvoudiger dan wat we maken hier op het web. Neem een automaat, bijvoorbeeld. De automaat heeft een staat die updates elke keer dat je in een munt. Wanneer de status van de machine bereikt een vooraf bepaald bedrag, zeg $1.25, de machine weet dat u om uw snack naar keuze.

In Gutenberg, attributen track van de huidige toestand van de gegevens in een blok. Kenmerken zijn de dichtstbijzijnde parallelle we kunnen trekken om aangepaste velden in Gutenberg, maar ze bestaan alleen in de context van Gutenberg en JavaScript. We nemen het kenmerk boven voor de titel, bijvoorbeeld:

titel: {
bron: ‘tekst’,
kiezen: ‘kaart__titel’
},

Toen Gutenberg branden, het zegt, “ik moet zoeken naar bepaalde tekst in een selector genoemd .kaart__titel en vult de waarde voor de titel met wat ik vind.”

Kenmerken in Gutenberg zijn niet rechtstreeks verbonden met de database, zoals aangepaste velden worden aangesloten op post_meta. De vermeldingen van de bron en de kiezen zijn de instructies voor het Gutenberg voor het vullen van de status van elk blok. Wanneer we laden de editor, volgt u deze instructies en wijst een waarde toe aan de titel, gebaseerd op de markering opgeslagen in de database tussen de HTML-opmerkingen die duiden op een blok van dit type. Zien We niet de waarde van de titel in de eigenschappen die we registreren, maar als ik om toegang te krijgen tot rekwisieten.kenmerken.titel, ik zou de tekst bestaat .kaart__titel.

We hebben een aantal basisprincipes, dus laten we duiken in onze edit-functie. Dit is wat genoemd wanneer het blok is toegankelijk via het Gutenberg-editor in de visuele modus. De gebruiker ziet de rijke interface, in plaats van de HTML-code genereert. Dat is wat ik zal betrekking hebben op volgende.

Voeg onze edit-functie

Laten we het toevoegen van een stukje code in. Voeg het volgende toe na de sluiting } van de kenmerken object. Zoals voor, zorg ervoor dat u een afsluitende komma, dus het lijkt erop dat dit },.

Voeg de volgende code na dat:

bewerken({ kenmerken, className, setAttributes }) {
return (
);
}

Zo, we zijn met een andere destructuring opdracht om selectief te zijn over ons doorgegeven parameters om de edit-functie. De twee belangrijkste zijn de kenmerken en setAttributes. De kenmerken parameter is hetzelfde als de attributen te blokkeren, maar het is in de huidige, reactieve staat. Dit betekent dat als de setAttributes functie voor het bijwerken van één van de kenmerken, waarden, zal het automatisch bijwerken waar dat naar verwijst, die vergelijkbaar is met onze Reageren onderdeel van Deel 3.

Er is een grote ol’ terug in deze functie. Kunt u raden wat er in zit? Yup! We gaan aan de stok sommige JSX in. Voeg de volgende in de return tussen haakjes:

<div className=”container”>
<MediaUpload
onSelect={ media => { setAttributes({ imageAlt: media.alt, imageUrl: media.url }); } }
type=”image”
waarde={ kenmerken.imageID }
render={ ({ open }) => getImageButton(open) }
/>
<PlainText
onChange={ inhoud => setAttributes({ title: inhoud }) }
waarde={ kenmerken.titel }
placeholder=”Uw card titel”
className=”post”
/>
<RichText
onChange={ inhoud => setAttributes({ lichaam: inhoud }) }
waarde={ kenmerken.body }
multiline=”p”
placeholder=”Uw kaart op tekst”
/>
</div>

OK, er is veel aan de hand hier, maar het is alle dingen die we hebben besproken in vorige delen van deze serie. Wat hebben we hier een container met drie bestaande Gutenberg onderdelen. Voor elk, we zijn de betreffende attribuut als waarde, een relevante aanduiding en een onChange – /onSelect handler. We zijn ook het passeren van een aangepaste renderer aan de <MediaUpload />, die we dekken kort.

Elke onChange-handler is een handige kleine uitdrukking voor het doorgeven van de nieuwe inhoud die de oorzaak van de wijziging in de setAttributes functie, waarin we de eigenschappen die het object bij te werken. Deze update dan cascades in een verwijzing van het attribuut, waarin de inhoud wordt bijgewerkt als magie. De <MediaUpload / > – element heeft een onSelect gebeurtenis die wordt geactiveerd wanneer de gebruiker selecteert of een upload van een item aan de media bibliotheek.

Het spreken van de <MediaUpload / > – element, zult u merken dat er een aangepaste renderen kenmerk, die verwijst naar een getImageButton functie. Laten we dat volgende. Boven de return in de edit-functie kunt u het volgende toevoegen:

const getImageButton = (openEvent) => {
als(kenmerken.imageUrl) {
return (
<img
src={ kenmerken.imageUrl }
onClick={ openEvent }
className=”image”
/>
);
}
anders {
return (
<div className=”knop-container”>
Knop <
onClick={ openEvent }
className=”button button-groot”
>
Kies een afbeelding
</Button>
</div>
);
}
};

Wat deze functie doet is het detecteren of er een imageUrl in de kenmerken object. Als die er is, het zal renderen dat de <img /> tag en laat een gebruiker, klikt u op het selecteren van een ander. Als er geen beeld verschijnt, zal het maken van een WordPress Knop < / > welke de gebruiker wordt gevraagd om te kiezen van een afbeelding. Dit vraagt dezelfde openEvent dat werd doorgegeven aan de functie.

Om het eenvoudig te houden in deze tutorial hebben we een gebonden klik op de <img /> element. U zou moeten overwegen het gebouw iets verbeelding die maakt gebruik van een knop < / > voor uw productie-klaar blokken, voor betere ondersteuning van toegankelijkheid.

Rechts, dat is onze edit-functie gedaan. Niet veel code, uitgaande van wat het eigenlijk doet, dat is geweldig!

Voeg ons save functie

We hebben onze Gutenberg-editor-einde van het blok geschreven nu, dat is het moeilijke gedeelte. Nu al hebben we te vertellen Gutenberg wat wij willen en het blok te maken met de inhoud. Met dezelfde reactieve gegevens van attributen, we kunnen maken uit onze front-end aantekeningen in real-time. Dat betekent dat wanneer iemand wordt overgeschakeld naar de HTML-modus voor het bewerken van het blok, het zal up-to-date. Als u deze bewerken in HTML-modus voor het bewerken van de visuele modus zal ook worden up to date gehouden. Super handig.

Laten we graven in dan. Na onze edit-functie, een komma toevoegen, zodat het lijkt alsof }, en voeg de volgende op een nieuwe regel:

opslaan({ attributen }) {

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

als(alt) {
return (
<img
className=”kaart__afbeelding”
src={ src }
alt={ alt }
/>
);
}

// Geen alt ingesteld, dus laten we het verbergen van het scherm lezers
return (
<img
className=”kaart__afbeelding”
src={ src }
alt=””
aria-hidden=”true”
/>
);
};

return (
<div className=”kaart”>
{ cardImage(kenmerken.imageUrl, attributen.imageAlt) }
<div className=”kaart__content”>
<h3 className=”kaart__title”>{ kenmerken.titel }</h3>
<div className=”kaart__lichaam”>
{ kenmerken.body }
</div>
</div>
</div>
);
}

Ziet er vrij gelijkaardig aan de edit-functie, toch? Laten we stap voor stap door.

We starten met een destructuring opdracht terug te trekken uit de kenmerken van de doorgegeven paramaters, net als de vorige edit-functie.

Dan hebben we een ander beeld helper functie die in de eerste plaats detecteert als er een afbeelding en geeft null als resultaat als er niet één. Vergeet niet: wij return null in JSX als we willen dat het niets te maken. Het volgende wat deze helper doet is het maken van een enigszins gevarieerd <img /> tag als er een alt-tekst of niet. Voor de laatste, het verbergt het van een screenreader door het toevoegen van aria-hidden=”true” en het instellen van een leeg alt-attribuut.

Tot slot, ons terug spuugt een mooie .kaart blokkeren met schoon, BEM-gedreven markup die de belasting op de front-end van ons thema.

En dat is voor ons save functie. We zijn zo dicht bij het hebben van een voltooid blok. Nog maar één stap te gaan!

Voeg wat stijl

OK, we zitten met een klein beetje om te doen en we zijn klaar. De oplettende onder jullie hebben misschien gemerkt dat sommige verwijzingen naar className verspreid. Deze verwijzen naar onze redacteur.scss regels, dus laten we deze toevoegen.

Open tot editor.scss, die woont in de dezelfde directory als block.js. Voeg het volgende toe:

@import ‘../common’;

.gutenberg {

.container {
border: 1px solid $gray;
padding: 1rem;
}

.knop-container {
text-align: center;
padding: 22% 0;
achtergrond: $off-white;
border: 1px solid $gray;
border-radius: 2px;
margin: 0 0 1.2 rem 0;
}

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

.afbeelding {
hoogte: 15.7 rem;
breedte: 100%;
object-fit: cover;
}
}

Dit is een losse CSS om ons blok op de kaart-achtige stijl. Merk het is allemaal genest binnen .gutenberg klasse? Dit is om de strijd van de specificiteit van sommige kern-stijlen. Binnen de editor is er een <div class=”gutenberg” gewikkeld rond de blokken van de post editor scherm, zodat we ervoor kunnen zorgen dat alleen van invloed op de elementen met deze nesten. U zult waarschijnlijk ook merken dat we het importeren van een ander Sass-bestand, dus laten we dat invullen.

Open common.scss, die woont in de src map, die de ouder van het huidige blok map die we in.

/*
* Gemeenschappelijke SCSS kunnen bevatten uw gemeenschappelijke variabelen, helpers en mixins
* die worden gedeeld tussen alle van uw blokken.
*/

// Kleuren
$grijs: #cccccc;
$off-white: #f1f1f1;

Hoe dan ook, wat denk je? We hebben alleen gegaan en opgebouwd uit een aangepaste kaart blokkeren!! Laten we het maar een test-drive.

Controleer eerst of je blok is goed. Dit is wat de volledige block.js het bestand moet er als volgt uitzien:

const { registerBlockType, Rtf, MediaUpload, Leesbare tekst } = wp.blokken;
const { Knop } = wp.onderdelen;

// Importeren onze CSS-bestanden
importeren ‘./stijl.scss’;
importeren ‘./editor.scss’;

registerBlockType(‘kaart-blok/main’, {
titel: ‘Kaart’,
icoon: ‘hart’,
categorie: ‘gewone’,
kenmerken: {
titel: {
bron: ‘tekst’,
kiezen: ‘.kaart__titel’
},
lichaam: {
type: ‘array’,
bron: ‘kinderen’,
kiezen: ‘.kaart__lichaam’
},
imageAlt: {
kenmerk: de ‘alt’,
kiezen: ‘.kaart__afbeelding’
},
imageUrl: {
kenmerk: ‘src’,
kiezen: ‘.kaart__afbeelding’
}
},
bewerken({ kenmerken, className, setAttributes }) {

const getImageButton = (openEvent) => {
als(kenmerken.imageUrl) {
return (
<img
src={ kenmerken.imageUrl }
onClick={ openEvent }
className=”image”
/>
);
}
anders {
return (
<div className=”knop-container”>
Knop <
onClick={ openEvent }
className=”button button-groot”
>
Kies een afbeelding
</Button>
</div>
);
}
};

return (
<div className=”container”>
<MediaUpload
onSelect={ media => { setAttributes({ imageAlt: media.alt, imageUrl: media.url }); } }
type=”image”
waarde={ kenmerken.imageID }
render={ ({ open }) => getImageButton(open) }
/>
<PlainText
onChange={ inhoud => setAttributes({ title: inhoud }) }
waarde={ kenmerken.titel }
placeholder=”Uw card titel”
className=”post”
/>
<RichText
onChange={ inhoud => setAttributes({ lichaam: inhoud }) }
waarde={ kenmerken.body }
multiline=”p”
placeholder=”Uw kaart op tekst”
formattingControls={ [‘vet’, ‘cursief’, ‘onderstreept’] }
isSelected={ kenmerken.isSelected }
/>
</div>
);

},

opslaan({ attributen }) {

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

als(alt) {
return (
<img
className=”kaart__afbeelding”
src={ src }
alt={ alt }
/>
);
}

// Geen alt ingesteld, dus laten we het verbergen van het scherm lezers
return (
<img
className=”kaart__afbeelding”
src={ src }
alt=””
aria-hidden=”true”
/>
);
};

return (
<div className=”kaart”>
{ cardImage(kenmerken.imageUrl, attributen.imageAlt) }
<div className=”kaart__content”>
<h3 className=”kaart__title”>{ kenmerken.titel }</h3>
<div className=”kaart__lichaam”>
{ kenmerken.body }
</div>
</div>
</div>
);
}
});

Als u tevreden bent, laat het vuur van webpack. Terwijl u in uw huidige plugin map in terminal uitvoeren:

npx webpack –horloge

Dit is iets anders dan het vorige deel in de serie, want we hebben toegevoegd –kijk argument. Dit principe houdt een oogje op uw js-bestanden en re-runs webpack als ze veranderen.

Het vuur van de redacteur!

Laat het vuur van de Gutenberg-editor door het laden van een bericht in de WordPress back-end. In het Gutenberg-editor, klik op het plus-pictogram en kijk in de “blokken” tab en daar is hij dan: onze geweldige nieuwe kaart blokkeren!

Ga je gang en geef het een test drive en toevoegen van inhoud in. Voelt goed toch?

Hier is een korte video over wat je moet zien, met je mooie nieuwe kaart blokkeren:

En met dat, je bent klaar 🎉

Hier is een ding dat je zou kunnen denken: niet blokkeert soort van vervanging voor aangepaste velden? Kan ik nu zelf mijn eigen structuur van de inhoud rechtstreeks in WordPress in plaats van het gebruik van een plugin zoals Advanced Custom Fields? Niet helemaal…

Blokken vs. Aangepaste Velden

Terwijl Gutenberg heeft het zich veroorloven ons de mogelijkheid om het aanpassen van de structuur van de data-entry van de ervaring van de gebruiker, op de back-end is het niet anders dan de huidige WYSIWYG-editor. Opgeslagen gegevens van een blok is een onderdeel van de post_content kolom in de wp_posts database tabel niet apart worden opgeslagen in wp_postmeta, zoals aangepaste velden. Dit betekent dat, op dit moment hebben we geen toegang tot de gegevens van onze kaart blokkeren van een andere post op dezelfde manier kunnen we als we hadden gemaakt van aangepaste velden voor titel, afbeelding en de inhoud met een standaard Advanced Custom Fields setup.

Dat gezegd hebbende, zie ik een aantal echt interessante plugins verhardingen die een manier bieden om de haven van gegevens uit een blok naar andere onderdelen van een website. Met de WordPress REST API, de mogelijkheden zijn eindeloos! In onze screencast, Andy en ik nam een steek in het opnemen van een API verzoek in onze kaart blokkeren en, hoewel de dingen niet precies zoals gepland, de hulpmiddelen zijn al aanwezig en kunt u een voorproefje van wat er mogelijk zou kunnen zijn met Gutenberg in de toekomst. De tijd zal het leren!

Inpakken en volgende stappen

Wat voor een reis we hebben samen! Laten we een lijst van wat je hebt geleerd in deze serie:

  • Je hebt geleerd wat de kern, de moderne JavaScript door greep te krijgen op ES6
  • Je heb de basis geleerd van JSX
  • Je nam die nieuwe kennis en opgebouwd uit een Reageren onderdeel van kras
  • Vervolgens geleerd hoe webpack werkt en schreef een schaalbare config file voor Gutenberg blok ontwikkeling
  • Ten slotte, voor het bouwen van aangepaste Gutenberg-kaart blokkeren vanuit het niets

Dus, waar kan je heen vanaf hier? Nu heb je een solide basis van kennis uit deze serie, die je zou kunnen doen wat voor het verdere leren. Er is al een fantastische middelen voor dat:

  • Het schrijven van het Eerste Blok van het Type op WordPress.org (Andy: Dat is hoe ik geleerd hoe blokken werken)
  • Gutenberg Cursussen van Zac Gordon en Joe Casabona
  • Het maken van een Aangepaste Gutenberg Blokkeren door Pete Tasker
  • Anatomie van een Custom Block door Morgan Kay
  • Duizend-en-één Manieren uit te Breiden Gutenberg Vandaag door Riad Benguella
  • Gutenberg gesprekken op WordPress.tv

Een aantal interessante case-studies:

  • Controle van Uw WordPress Plugin voor Gutenberg
  • Gutenberg op Humanmade.com
  • Moderne Stam “Gutenberg”

Houd een oogje op deze middelen te blijven up-to-date met het project:

  • Gutenberg Nieuws
  • Gutenberg Keer

Experimentele dingen gebeuren met Gutenberg:

  • Gutenberg Aangepaste Velden plugin
  • Atomic Blokken plugins en thema

Zodra Gutenberg wordt een deel van de core van WordPress in versie 5.0 (release datum nader te bepalen.), kunt u ook het publiceren van een handig custom block in de WordPress plugins directory. Er is zeker ruimte voor een aantal handige onderdelen, zoals de card blokkeren die u net hebt gebouwd.

We hopen dat je hebt genoten van deze serie, want we hebben zeker genoten van het maken van het. We hopen echt dat dit helpt u in Gutenberg en dat bouw je een aantal coole dingen. Moet je volledig stuur ons links van de spullen die je hebt gebouwd!

Serie Artikelen:

  1. Serie Inleiding
  2. Wat is Gutenberg, Toch?
  3. Een Primer met create-guten-blok
  4. De Moderne Syntaxis Van JavaScript
  5. Reageren 101
  6. Het opzetten van een Aangepaste webpack
  7. Een Aangepaste “Kaart” Blok (Deze Post)