Share
Bine ați venit în seria noastră despre crearea blocurilor personalizate cu API-ul WordPress Gutenberg Block. Acest tutorial vizează extinderea blocului de imagine aleatoriu pe care l-am creat în postul anterior. Avem până la adăugarea unui control derulant pentru a selecta o categorie de imagini. Vom continua acest lucru adăugând mai multe opțiuni de bloc pentru a permite personalizarea ulterioară.
Mai precis, vom vedea cum să adăugăm setări de bloc în diferite părți ale editorului. Asta-i drept, nu ești doar limitat la adăugarea controalelor bloc direct pe blocul propriu-zis!
Finala mi-personalizat-bloc plugin-ul este disponibil pentru descărcare. Doar faceți clic pe link-ul de pe bara laterală spre dreapta și descărcați fișierul zip pe computer și instalați-l ca pe orice alt plugin WordPress. De asemenea, puteți găsi codul sursă în repo GitHub.
Dezvoltarea lui Gutenberg se desfasoara la un ritm echitabil si a fost lansata o noua lansare semnificativa de la publicarea ultimului tutorial. Versiunea Gutenberg utilizată în acest tutorial a fost actualizată la versiunea 3.0.1, iar unele dintre UI-ul editorului pot părea ușor diferite de capturile de ecran afișate în tutorialele anterioare din această serie.
Controlul derulant pe care l-am adăugat în tutorialul anterior a fost localizat în interiorul editorului, direct sub marca pentru imaginea aleatoare. Acest lucru a fost convenabil, dar avem și alte opțiuni.
De asemenea, putem adăuga comenzi bloc într-o bară de instrumente pop-up (care apare atunci când este selectat un bloc) și un panou de inspecție bloc.
În captura de ecran de mai sus, putem vedea comenzile din bara de instrumente pentru blocul de paragrafe [1], precum și comenzile asociate în inspectorul de panou [3]. Locația [2] arată comanda derulantă pentru blocul nostru de imagini aleatoriu.
S-ar putea să vă gândiți deja la locația pe care o alegeți pentru propriile setări de bloc, dar nu trebuie să alegeți una dintre aceste locații. Ele nu se exclud reciproc. De exemplu, pentru blocul de paragrafe (prezentat mai sus), puteți vedea că setările sunt împărțite între panoul de inspecție bloc și bara de instrumente.
În plus, este perfect OK să aveți două comenzi separate în locații diferite din editor care afectează la fel setare. S-ar putea să nu vreți să faceți acest lucru prea des, dar este util să știți cum să îl implementați, așa că vom vedea cum să facem acest lucru puțin mai târziu.
Să începem cu cea mai ușoară cale de a adăuga funcționalitate blocului tău, care este direct în interiorul blocului Editați | × funcţie. Am folosit deja această abordare pentru a adăuga controlul drop-down al imaginii aleatorii deoarece necesită foarte puțin efort suplimentar.
Nu vom trece peste adăugarea de noi controale la blocul propriu-zis, dar putem schimba comportamentul controlului drop-down pentru a fi puțin mai intuitiv. Pentru ca aceasta să se facă cât mai aproape de capătul din față, putem restricționa afișarea drop-down-ului dacă nu este selectat blocul.
Să facem această schimbare acum. Dacă urmăriți acest tutorial din ultima perioadă, deschideți-l /my-custom-block/src/random-image/index.js în editorul dvs. preferat. Acesta este fișierul JavaScript principal pentru blocul nostru de imagini aleatorii.
Unul dintre proiectilele trecute la toate blocurile este este selectat, care deține statutul de vizibilitate a blocului. Putem folosi acest lucru pentru a afișa în mod condiționat controlul drop-down categorie.
În primul rând, scoateți-vă este selectat de la recuzită obiect și adăugați-l la lista de constante din interiorul Editați | × funcţie. Acest lucru este util pentru a putea să îl referim printr-un nume scurt (adică. este selectat Decat props.isSelected).
const atribute: category, setAttributes, isSelected = recuzită;
Apoi, putem folosi această proprietate pentru a determina dacă trebuie afișat controlul drop-down:
este selectat && ()
Aceasta este o modalitate sustinatoare de a testa asta este selectat este adevărat, deoarece nu putem folosi JavaScript complet dacă declarație în interiorul codului JSX.
Asigurați-vă că mai vizionați fișierele pentru modificări, astfel încât orice cod sursă bloc (JSX, ES6 +, Sass etc.) să fie transpus în JavaScript și CSS valid. Dacă în prezent nu urmăriți fișierele pentru modificări, deschideți o fereastră de linie de comandă în interiorul mi-personalizat-bloc plugin root și introduceți npm start.
Deschide editorul Gutenberg și adaugă blocul de imagine aleatoriu. De data aceasta, controlul drop-down nu este vizibil dacă blocul nu a fost încă apăsat.
Acest lucru îi conferă blocului un aspect mult mai interactiv.
Dacă ați folosit oricare dintre blocurile de bază Gutenberg (cum ar fi blocul de paragrafe), atunci veți cunoaște setările barei de instrumente. De îndată ce este selectat blocul Paragraf, apare o bară de instrumente pop-up conținând butoane pentru formatarea textului. Acest tip de control este excelent pentru setările de bloc care au o stare tip on / off - de exemplu, alinierea textului sau formatarea, cum ar fi bold sau italic.
Vom folosi controlul bara de instrumente pentru alinierea încorporată pentru a permite alinierea categoriei drop-down categorie de imagini (implicit), dreapta sau centru.
În primul rând, trebuie să scoatem AlignmentToolBar și BlockControls componente de la wp.blocks. Acestea ne permit să afișăm comenzi de aliniere în interiorul unei bare de instrumente care plutește deasupra blocului nostru atunci când este selectat. Acestea fac parte din componentele de bază pe care le putem folosi în blocurile proprii.
const AlignmentToolbar, BlockControls, registerBlockType = wp.blocks;
BlockControls componenta acționează ca containerul bara de instrumente și AlignmentToolbar este plasat în interior.
Trebuie încă să conectăm manual bara de instrumente de aliniere, pe care o putem face adăugând un nou categoryAlign atribut pentru a stoca starea de aliniere bloc (stânga, dreapta sau centru).
Al nostru atribute Obiectul conține acum două setări.
atribute: category: type: 'string', implicit: 'nature', categoryAlign: type: 'string' implicit: "
Implicit pentru categoryAlign atributul este un șir gol, ceea ce nu va duce la aplicarea alinierii în mod implicit.
Pentru a face referire la noul atribut, putem extrage această valoare în propria ei variabilă constantă, așa cum am făcut pentru drop-down categorie atribut.
const atribute: category, categoryAlign, setAttributes, isSelected = recuzită;
Tot ce trebuie să facem acum este să renunțăm la cele două componente noi Editați | × funcția și configurați proprietățile.
setAttributes (categoryAlign: value) />
După cum puteți vedea tot ce trebuia să faceți este să alocați valoare atributul lui Alignmenttoolbar la categoryAlign atribuiți și apelați setAttributes funcția de fiecare dată când a fost apăsat un nou buton al barei de instrumente. Această funcție la rândul său actualizează categoryAlign atribuie și păstrează totul în sincronizare.
Pentru a aplica stilul de aliniere al controlului drop-down, trebuie să adăugăm o proprietate de stil elementului nostru de formă.
);Această funcție poate fi apoi menționată ori de câte ori avem nevoie de controlul categoriei drop-down redate. Marcajul panoului inspectorului de bloc trebuie să fie în afara marcării blocului, astfel încât să putem folosi
Apoi, trebuie să adăugăm componentele inspectorului bloc pentru meniurile pentru categorii și filtru de imagine. Acestea trebuie definite în interior cu privire la schimbările eveniment. Acesta este foarte asemănător codului drop-down de categorie din ultimul tutorial, așa că ar trebui să-l cunoașteți până acum.
Punând totul împreună, Editați | × metoda lui întoarcere Funcția acum arată astfel:
întoarcere (); showForm () setAttributes (categoryAlign: value) /> isSelected && (showForm ())
Si setFilter inversarea apelului este definită ca:
Accentsconagua
funcția setFilter (eveniment) const select = event.target.querySelector ('# opțiune imagine-filtru: bifată'); setAttributes (imageFilter: select.value); event.preventDefault (); Pentru a obține imaginea filtrată, trebuie să actualizăm imaginea RandomImage componentă pentru a accepta noua valoare a filtrului de fiecare dată când se modifică meniul derulant.
funcția RandomImage (category, filter) if (filtru) filter = '/' + filtru; const src = 'https://placeimg.com/320/220/' + categorie + filtru; întoarcere;
Observați cum folosim această proprietate nouă componentă în Editați | × pentru a trimite noua valoare a filtrului la PlaceIMG.
Toate aceste modificări ale codului au ca rezultat crearea unui nou panou de inspecție bloc cu două controale drop-down pentru a modifica categoria de imagini și filtrul.
Pentru ca noua proprietate a filtrului să funcționeze și pentru partea frontală, trebuie doar să actualizăm Salvați metodă.
salvați: funcția (recuzită) const atribute: category, imageFilter = recuzită; întoarcere ();
În acest post, am abordat trei metode diferite pentru adăugarea setărilor la un bloc:
Am adăugat doar setările de bază pentru fiecare bloc, dar am putea să luăm cu ușurință acest lucru și mai mult prin adăugarea de suport pentru mai multe imagini, prin adăugarea de subtitrări ale imaginilor și prin controlul unor stiluri precum culoarea frontală, raza sau dimensiunea aleatoare a imaginii.
Sunt sigur că până acum ați avut câteva idei pentru a vă crea propriile blocuri personalizate. Mi-ar plăcea să văd ce fel de blocuri ați fi de folos în proiectele voastre!
Începem doar cu Gutenberg la Envato Tuts +, așa că dacă există aspecte particulare ale dezvoltării blocului Gutenberg pe care doriți să le vedeți în detaliu în viitoarele tutoriale, vă rugăm să ne anunțați prin comentariile.
