Share
Welkom bij onze serie over het maken van aangepaste blokken met de WordPress Gutenberg Block API. Bij deze zelfstudie gaat het om het uitbreiden van het willekeurige afbeeldingblok dat we in de vorige post hebben gemaakt. We hebben zelfs een vervolgkeuzemenu toegevoegd om een afbeeldingscategorie te selecteren. We gaan hiermee verder door meer blokopties toe te voegen om verdere aanpassingen mogelijk te maken.
We zullen in het bijzonder zien hoe je blokinstellingen kunt toevoegen in verschillende delen van de editor. Dat klopt, je bent niet alleen beperkt tot het toevoegen van blokknoppen direct op het blok zelf!
De laatste my-maat-block plugin-code is beschikbaar om te downloaden. Klik gewoon op de link in de zijbalk aan de rechterkant en download het zipbestand naar uw computer en installeer het zoals u elke andere WordPress-plug-in zou doen. Je kunt de broncode ook vinden in onze GitHub-repo.
De ontwikkeling van Gutenberg kraakt in een redelijk tempo en er is een nieuwe belangrijke release sinds de laatste zelfstudie werd gepubliceerd. De versie van Gutenberg die in deze zelfstudie wordt gebruikt, is bijgewerkt naar 3.0.1 en sommige UI van de editor zien er enigszins anders uit dan de schermafbeeldingen die in vorige tutorials in deze serie zijn weergegeven.
Het drop-down-besturingselement dat we in de vorige zelfstudie hebben toegevoegd, bevindt zich in de editor, direct onder de opmaak voor de willekeurige afbeelding. Dit was handig, maar we hebben ook andere keuzes.
We kunnen ook besturingselementen voor blokken toevoegen aan een pop-upwerkbalk (die verschijnt wanneer een blok wordt geselecteerd) en een blokinspectiepaneel.
In de bovenstaande schermafbeelding kunnen we de werkbalkbesturingselementen voor het alineablok [1] zien, evenals de bijbehorende bedieningselementen in de paneelcontrole [3]. Locatie [2] toont de vervolgkeuzelijst voor ons willekeurige afbeeldingsblok.
Misschien denkt u al aan welke locatie u zou kiezen voor uw eigen blokinstellingen, maar u hoeft niet slechts een van deze locaties te kiezen. Ze sluiten elkaar niet uit. Voor het alineablok (hierboven weergegeven) kunt u bijvoorbeeld zien dat de instellingen zijn gesplitst tussen het blokinspectorvenster en de werkbalk..
Verder is het perfect OK om twee afzonderlijke besturingselementen op verschillende locaties in de editor te hebben die van invloed zijn op de dezelfde setting. Misschien wil je dit niet te vaak doen, maar het is handig om te weten hoe je het moet implementeren, dus we zullen later zien hoe we dit moeten doen.
Laten we beginnen met de eenvoudigste manier om functionaliteit aan uw blok toe te voegen, die zich direct in het blok bevindt Bewerk functie. We hebben deze aanpak al gebruikt om onze vervolgkeuzelijst voor willekeurige afbeeldingen toe te voegen, omdat dit zeer weinig extra inspanning vereist.
We zullen niet over het toevoegen van nieuwe besturingselementen aan het blok zelf gaan, maar we kunnen het gedrag van de vervolgkeuzelijst aanpassen om een beetje meer intuïtief te zijn. Om het zo dicht mogelijk bij de voorkant te laten renderen, kunnen we voorkomen dat de vervolgkeuzelijst verschijnt, tenzij het blok is geselecteerd.
Laten we deze verandering nu aanbrengen. Als je deze tutorial van de vorige keer volgt, open dan /my-custom-block/src/random-image/index.js in je favoriete editor. Dit is het belangrijkste JavaScript-bestand voor ons willekeurige afbeeldingsblok.
Een van de rekwisieten doorgegeven aan alle blokken is is geselecteerd, die de status van de zichtbaarheid van het blok bevat. We kunnen dit gebruiken om de categoriekeuzelijst voorwaardelijk weer te geven.
Trek eerst uit is geselecteerd van de rekwisieten object en voeg het toe aan de lijst met constanten in de Bewerk functie. Dit is handig, zodat we ernaar kunnen verwijzen door een verkorte naam (d.w.z.. is geselecteerd liever dan props.isSelected).
const attributes: category, setAttributes, isSelected = rekwisieten;
Vervolgens kunnen we deze eigenschap gebruiken om te bepalen of de vervolgkeuzelijst moet worden weergegeven:
is geselecteerd && ()
Dit is een steno om dat te testen is geselecteerd is waar, omdat we geen volledig JavaScript kunnen gebruiken als verklaring binnen de JSX-code.
Zorg ervoor dat u nog steeds bestanden bekijkt voor wijzigingen zodat elke blokbroncode (JSX, ES6 +, Sass, etc.) wordt omgezet in geldige JavaScript en CSS. Als u momenteel geen bestanden bekijkt voor wijzigingen, opent u een opdrachtregelvenster binnen de my-maat-block plug-in root-map en voer in npm start.
Open de Gutenberg-editor en voeg het willekeurige afbeeldingsblok toe. Deze keer is de vervolgkeuzelijst niet zichtbaar als er nog niet op het blok is geklikt.
Dit geeft het blok een veel interactiever gevoel.
Als u een van de kerngutenberg-blokken (zoals het lidblok) heeft gebruikt, bent u bekend met de werkbalkinstellingen. Zodra het Alinea-blok is geselecteerd, verschijnt een pop-upwerkbalk met knoppen voor het opmaken van de tekst. Dit type besturingselement is geweldig voor blokinstellingen met een aan / uit-type-bijvoorbeeld tekstuitlijning of -indeling, zoals vet of cursief.
We gebruiken de ingebouwde toolbar voor uitlijning om het besturingselement voor de vervolgkeuzebeeldcategorie te laten staan (standaard), rechts of midden uitgelijnd.
Ten eerste moeten we de AlignmentToolBar en BlockControls componenten van wp.blocks. Hiermee kunnen we afstemmingscontroles weergeven in een zwevende werkbalk boven ons blok wanneer deze is geselecteerd. Dit zijn deel van de kerncomponenten die we in onze eigen blokken kunnen gebruiken.
const AlignmentToolbar, BlockControls, registerBlockType = wp.blocks;
De BlockControls component fungeert als de werkbalkcontainer, en AlignmentToolbar wordt erin geplaatst.
We moeten nog steeds handmatig het gedrag van de uitlijningswerkbalk koppelen, wat we kunnen doen door een nieuwe toe te voegen categoryAlign attribuut om de status van de blokuitlijning op te slaan (links, rechts of midden).
Onze attributen object bevat nu twee instellingen.
attributen: category: type: 'string', standaard: 'nature', categoryAlign: type: 'string' standaard: "
De standaard voor de categoryAlign attribuut is een lege tekenreeks, waardoor standaard geen uitlijning wordt toegepast.
Om naar het nieuwe attribuut te verwijzen, kunnen we deze waarde op dezelfde manier naar zijn eigen constante variabele verplaatsen als voor de vervolgkeuzelijst categorie attribuut.
const attributes: category, categoryAlign, setAttributes, isSelected = rekwisieten;
Alles wat we nu moeten doen is de twee nieuwe componenten in de Bewerk functie en configuratie van de eigenschappen.
setAttributes (categoryAlign: value) />
Zoals je ziet was alles wat we moesten doen het toewijzen van de waarde kenmerk van Alignmenttoolbar naar categoryAlign attribuut en bel de setAttributes functie wanneer er op een nieuwe werkbalkknop is geklikt. Deze functie werkt op zijn beurt het categoryAlign attribuut en houdt alles gesynchroniseerd.
Als u de uitlijningsstijl van de vervolgkeuzelijst wilt toepassen, moeten we een stijleigenschap toevoegen aan ons formulierelement.
);Naar deze functie kan worden verwezen wanneer we het dropdown-besturingselement van de categorie nodig hebben. De markeringen voor het blokinspectiepaneel moeten buiten de blokmarge liggen, zodat we de. Kunnen gebruiken
Vervolgens moeten we de blokinspectoronderdelen toevoegen voor de vervolgkeuzelijsten voor categorie en afbeeldingsfilter. Deze moeten binnen worden gedefinieerd onChange evenement. Dit komt sterk overeen met de vervolgkeuzecodelcategorie van de laatste zelfstudie, dus het zou u al bekend moeten zijn.
Alles bij elkaar opgeteld, de Bewerk methode terugkeer functie ziet er nu als volgt uit:
terugkeer (); showForm () setAttributes (categoryAlign: value) /> isSelected && (showForm ())
En de setFilter callback wordt gedefinieerd als:
Accentsconagua
function setFilter (event) const selected = event.target.querySelector ('# image-filter option: checked'); setAttributes (imageFilter: selected.value); event.preventDefault (); Om de gefilterde afbeelding te krijgen, moeten we de RandomImage component om de nieuwe filterwaarde te accepteren elke keer dat de vervolgkeuzelijst wordt gewijzigd.
functie RandomImage (category, filter) if (filter) filter = '/' + filter; const src = 'https://placeimg.com/320/220/' + categorie + filter; terugkeer;
Merk op hoe we deze nieuwe componenteigenschap gebruiken in de Bewerk methode om de nieuwe filterwaarde naar PlaceIMG te verzenden.
Al deze codewijzigingen leiden ertoe dat een nieuw blokinspectiepaneel wordt gemaakt met twee vervolgkeuzeknoppen om de afbeeldingscategorie en het filter te wijzigen.
Om de nieuwe filtereigenschap ook voor de voorkant te laten werken, hoeven we alleen de opslaan methode.
save: function (props) const attributes: category, imageFilter = rekwisieten; terugkeer ();
In dit bericht hebben we drie verschillende methoden besproken voor het toevoegen van instellingen aan een blok:
We hebben alleen basisinstellingen voor elk blok toegevoegd, maar we zouden dit eenvoudig nog verder kunnen nemen door ondersteuning voor meerdere afbeeldingen toe te voegen, beeldbijschriften toe te voegen en stijlen zoals de randkleur, radius of willekeurige afbeeldingsgrootte te beheren.
Ik weet zeker dat je nu waarschijnlijk wat ideeën hebt voor het maken van je eigen aangepaste blokken. Ik zou graag horen wat voor soort blokken u nuttig zou vinden in uw eigen projecten!
We zijn net begonnen met Gutenberg hier bij Envato Tuts +, dus als er bepaalde aspecten van de ontwikkeling van Gutenberg-blokken zijn die je in toekomstige tutorials graag nader wilt bespreken, laat het ons dan weten via de reacties.
