Share
Noul editor WordPress (codificat Gutenberg) se va lansa în versiunea 5.0. Acum este momentul perfect pentru a face față cu ea înainte de a ateriza în WordPress de bază. În această serie, vă arăt cum să lucrați cu API-ul Block și să vă creați propriile blocuri de conținut pe care le puteți utiliza pentru a vă construi mesajele și paginile.
În postul anterior, am văzut cum să folosim crea-guten-bloc pentru a crea un plugin care conține un bloc de eșantioane gata pentru a lucra cu noi. Putem extinde cu ușurință acest lucru după cum este necesar, dar este o idee bună să știi cum să creezi un bloc de la zero pentru a înțelege pe deplin toate aspectele legate de dezvoltarea blocului Gutenberg.
În acest post vom crea un al doilea bloc în nostru mi-personalizat-bloc plugin pentru a afișa o imagine aleatoare din serviciul web PlaceIMG. De asemenea, veți putea personaliza blocul selectând categoria de imagini dintr-un control de selectare verticală.
Dar, mai întâi, vom învăța cum sunt blocate scripturile și stilurile de blocare înainte de a trece la cele mai importante registerBlockType () care este fundamentală pentru crearea blocurilor în Gutenberg.
Pentru a adăuga JavaScript și CSS cerut de blocurile noastre, putem folosi două noi cârlige WordPress furnizate de Gutenberg:
Accentsconagua
enqueue_block_editor_assetsenqueue_block_assetsAcestea sunt disponibile numai dacă pluginul Gutenberg este activ și funcționează în mod similar cu cârligele standard WordPress pentru scrierea de scripturi. Cu toate acestea, ele sunt destinate în mod special pentru lucrul cu blocurile Gutenberg.
enqueue_block_editor_assets cârligul adaugă scripturi și stiluri numai editorului de admin. Acest lucru îl face ideal pentru enqueue JavaScript pentru a înregistra blocuri și CSS pentru a personaliza elementele interfeței utilizator pentru setările de bloc.
Pentru ieșirea de blocuri, totuși, veți dori ca blocurile dvs. să fie redate la fel în editor ca cele pe front, de cele mai multe ori. Utilizarea enqueue_block_assets face acest lucru ușor, deoarece stilurile sunt adăugate automat atât la editor, cât și la partea frontală. De asemenea, puteți utiliza acest cârlig pentru a încărca JavaScript dacă este necesar.
Dar s-ar putea să te întrebi cum să înveți scripturi și stiluri numai pe capătul din față. Nu există un cârlig WordPress care să vă permită să faceți acest lucru în mod direct, dar puteți obține acest lucru prin adăugarea unei declarații condiționate în interiorul enqueue_block_assets funcția de apel invers.
add_action ('enqueue_block_assets', 'load_front_end scripts'); funcția load_front_end scripts () if (! is_admin () // introduce numai scripturi și stiluri din front-end aiciPentru a încorpora de fapt scripturile și stilurile folosind aceste două cârlige noi, puteți utiliza standardul wp_enqueue_style () și wp_enqueue_scripts () funcționează în mod normal.
Cu toate acestea, trebuie să vă asigurați că utilizați dependențele de script corecte. Pentru scrierea de scripturi în editor, puteți utiliza următoarele dependențe:
array ('blocuri wp', 'wp-i18n', 'wp-element', 'wp-components') array ('wp-edit-blocks') Și atunci când stilurile enqueueing atât pentru editor și front-end, puteți utiliza această dependență:
array ("blocuri wp")Un lucru demn de menționat aici este faptul că fișierele reale enumerate de noi mi-personalizat-bloc plugin sunt compilat versiuni ale JavaScript și CSS și nu fișierele care conțin codul sursă JSX și Sass.
Acest lucru este ceva ce trebuie avut în vedere atunci când introduceți fișiere manual. Dacă încercați să introduceți codul sursă brut care include React, ES6 + sau Sass, atunci veți întâlni numeroase erori.
Acesta este motivul pentru care este util să folosiți un set de instrumente cum ar fi crea-guten-bloc deoarece procesează și încorporează automat scripturile pentru dvs.!
Pentru a crea un nou bloc, trebuie să îl înregistrăm la Gutenberg sunând registerBlockType () și trecerea în numele blocului plus un obiect de configurare. Acest obiect are câteva proprietăți care necesită o explicație adecvată.
În primul rând, totuși, să aruncăm o privire la numele blocului. Acesta este primul parametru și este un șir alcătuit din două părți, un spațiu de nume și numele blocului propriu-zis, separate printr-un caracter de sare înainte.
De exemplu:
registerBlockType ('bloc-namespace / block-name', // configurare obiect);Dacă înregistrați mai multe blocuri într-un plugin, puteți utiliza același spațiu de nume pentru a vă organiza toate blocurile. Spațiul de nume trebuie să fie însă unic pentru plugin-ul dvs., ceea ce ajută la prevenirea conflictelor de numire. Acest lucru se poate întâmpla dacă un bloc cu același nume a fost deja înregistrat printr-un alt plugin.
Al doilea registerBlockType () parametru este un obiect de setări și necesită o serie de proprietăți care trebuie specificate:
titlu (șir): afișat în editor ca etichetă de blocare a căutărilorDescriere (șir opțional): descrie scopul unui blocicoană (element opțional Dashicon sau JSX): pictograma asociată cu un bloccategorie (șir): în cazul în care blocul apare în Adăugați blocuri dialogCuvinte cheie (matrice opțională): până la trei cuvinte cheie utilizate în căutările blocatribute (obiect opțional): gestionează datele blocului dinamicEditați | × (functie): o functie care returneaza marcajul care trebuie redat in editorSalvați (functie): o functie care returneaza marcajul care trebuie redat pe frontuseOnce (boolean opțional): blocați blocul de a fi adăugat de mai multe orisuporturi (obiect opțional): definește funcțiile acceptate de blocPresupunând că folosim JSX pentru dezvoltarea blocurilor, iată ce exemplu registerBlockType () apel ar putea arata ca pentru un bloc foarte simplu:
registerBlockType ('my-unic-namespace / ultimate-block', title: __ ('The Best Block Ever' ',' domeniu '), __ (' Gutenberg ',' domeniu '), __ (' Bine ați venit la editorul Gutenberg!
, salvați: () => Cum mă uit la capătul din față?
);Observați cum nu am inclus o intrare pentru Descriere, atribute, useOnce, și suporturi proprietăți? Toate câmpurile care sunt opționale (și nu sunt relevante pentru blocul dvs.) pot fi omise. De exemplu, deoarece acest bloc nu a implicat date dinamice, nu trebuie să ne facem griji cu privire la specificarea oricăror atribute.
Să acoperim acum registerBlockType () configurarea proprietăților obiectului în detaliu unul câte unul.
Când inserați sau căutați un bloc în editor, titlul va fi afișat în lista blocurilor disponibile.
Este, de asemenea, afișat în fereastra de inspector bloc, împreună cu descrierea blocului, dacă este definită. Dacă inspectorul de bloc nu este vizibil în prezent, puteți utiliza pictograma roată din colțul din dreapta sus al editorului Gutenberg pentru a comuta vizibilitatea.
Ambele câmpuri de titlu și de descriere ar trebui în mod ideal să fie înfășurate în funcții i18n pentru a permite traducerea în alte limbi.
În prezent sunt disponibile cinci categorii de blocuri:
comunformatareaschemăwidget-uriîncorporareAcestea determină secțiunea categoriei în care blocul dvs. este afișat în interiorul Adăugați bloc fereastră.
blocuri fila conține Blocuri comune, Formatarea, Elementele Layout, și Widget-uri categorii, în timp ce încorporări categoria are propriul tab.
Categoriile sunt în prezent fixate în Gutenberg, dar acest lucru ar putea fi modificat în viitor. Acest lucru ar fi util, de exemplu, dacă ați fi dezvoltat mai multe blocuri într-un singur plugin și ați dorit ca toți să fie listați într-o categorie comună, astfel încât utilizatorii să-i poată localiza mai ușor.
În mod prestabilit, blocul tău este atribuit scutului Dashicon, dar poți să o ignori prin specificarea unui Dashicon personalizat în icoană camp.
Fiecare Dashicon este prefixat cu dashicons- urmat de un șir unic. De exemplu, pictograma roată are numele dashicons-admin-generic. Pentru a utiliza aceasta ca o pictogramă bloc, trebuie doar să eliminați dashicons- prefixul pentru a fi recunoscut, de ex. pictogramă: "admin-generic".
Cu toate acestea, nu vă limitați doar la utilizarea Dashicons ca proprietate icon. De asemenea, funcția acceptă un element JSX, ceea ce înseamnă că puteți folosi orice imagine sau element SVG drept pictograma bloc.
Doar asigurați-vă că păstrați dimensiunea pictogramei în concordanță cu alte pictograme bloc, care este în mod implicit 20 x 20 pixeli.
Alegeți până la trei cuvinte cheie care pot fi translatabile pentru a vă ajuta să blocați aspectul când utilizatorii caută un bloc. Cel mai bine este să alegeți cuvinte cheie care se raportează îndeaproape la funcționalitatea blocului dvs. pentru obținerea celor mai bune rezultate.
cuvinte cheie: [__ ('căutare', 'domeniu'), __ ('pentru', 'domeniu'),Puteți chiar să declarați compania dvs. și / sau numele plugin-ului drept cuvinte cheie, astfel încât, dacă aveți mai multe blocuri, utilizatorii pot începe să scrie numele companiei și toate blocurile vor apărea în rezultatele căutării.
Cu toate că adăugarea de cuvinte cheie este complet opțională, este o modalitate foarte bună de a ușura utilizatorii să vă găsească blocurile.
Atribute ajuta la gestionarea datelor dinamice într-un bloc. Această proprietate este opțională, deoarece nu aveți nevoie de aceasta pentru blocuri foarte simple care generează conținut static.
Cu toate acestea, dacă blocul dvs. se ocupă de date care s-ar putea schimba (cum ar fi conținutul unei zone de text editabile) sau trebuie să stocați setările blocului, atunci folosirea atributelor este calea de urmat.
Atributele funcționează prin stocarea datelor bloc dinamice fie în conținutul mesajelor salvate în baza de date, fie în post-meta. În acest tutorial vom folosi numai atributele care stochează datele împreună cu conținutul mesajelor.
Pentru a prelua datele de atribut stocate în materialele postate, trebuie să specificăm unde se află în marcaj. Putem face acest lucru prin specificarea unui selector CSS care să indice datele de atribut.
De exemplu, dacă blocul nostru conținea o etichetă de ancorare, putem folosi titlu câmp ca atributul nostru, după cum urmează:
atribute: linktitle: source: 'atribut', selector: 'a', atribut: 'title'
Aici este numele atributului linktitle, care este un șir arbitrar și poate fi orice doriți.
De exemplu, am putea folosi acest atribut pentru a stoca titlul link-ului care a fost introdus printr-o casetă de text în setările de bloc. Făcând astfel, brusc, câmpul titlului este dinamic și vă permite să modificați valoarea acestuia în editor.
Când postul este salvat, valoarea atributului este inserată în linkuri titlu camp. În mod similar, atunci când editorul este încărcat, valoarea lui titlu eticheta este preluată din conținut și inserată în linktitle atribut.
Există mai multe moduri pe care le puteți utiliza sursă pentru a determina modul în care conținutul blocului este stocat sau preluat prin atribute. De exemplu, puteți utiliza funcția 'text' sursă pentru a extrage textul interior dintr-un element paragraf.
atribute: paragraf: sursa: 'text', selector: 'p'
De asemenea, puteți utiliza funcția copii sursă pentru a extrage toate nodurile copilului unui element într-un matrice și pentru a le stoca într-un atribut.
atribute: editablecontent: sursă: "copii", selector: ".parent"
Aceasta selectează elementul cu clasa .mamă și stochează toate nodurile copilului în editablecontent atribut.
Dacă nu specificați o sursă, atunci valoarea atributului este salvată în comentarii HTML, ca parte a marcării postului, când este salvată în baza de date. Aceste comentarii sunt scoase înainte ca postarea să fie făcută pe front.
Vom vedea un exemplu specific de acest tip de atribut atunci când intrăm în implementarea blocului nostru imagine aleatoriu mai târziu în acest tutorial.
Atributele pot să vă obișnuiască puțin, așa că nu vă faceți griji dacă nu le înțelegeți pe deplin de prima dată. Aș recomanda să aruncați o privire la secțiunea atribute din manualul Gutenberg pentru mai multe detalii și exemple.
Editați | × funcția controlează modul în care blocul dvs. apare în interfața editorului. Datele dinamice sunt transmise fiecărui bloc ca fiind recuzită, inclusiv toate atributele personalizate care au fost definite.
Este o practică obișnuită de adăugat className = props.className la elementul principal de bloc pentru a scoate o clasă CSS specifică blocului tău. WordPress nu adaugă acest lucru în interiorul editorului, deci trebuie adăugat manual pentru fiecare bloc dacă doriți să îl includeți.
Utilizarea props.className este o practică standard și este recomandată deoarece oferă o modalitate de a personaliza stilurile CSS pentru fiecare bloc individual. Formatul clasei CSS generate este .wp-bloc- namespace - name. După cum puteți vedea, acesta se bazează pe spațiul de nume / nume al blocului și îl face ideal pentru a fi utilizat ca un identificator unic al blocului.
Funcția de editare vă cere să reveniți la marcarea validă prin intermediul funcției face() , care este apoi folosit pentru a face blocul dvs. în interiorul editorului.
Similar cu Editați | × funcţie, Salvați afișează o reprezentare vizuală a blocului dvs., dar pe partea frontală. De asemenea, primește date bloc dinamice (dacă sunt definite) prin recuzită.
O diferență principală este aceea props.className nu este disponibilă în interior Salvați, dar aceasta nu este o problemă deoarece este introdusă automat de Gutenberg.
suporturi proprietatea acceptă un obiect de valori booleene pentru a determina dacă blocul dvs. acceptă anumite caracteristici principale.
Proprietățile obiectelor disponibile pe care le puteți seta sunt după cum urmează.
ancoră (default false): vă permite să conectați direct la un anumit bloccustomClassName (true): adaugă un câmp în inspectorul de bloc pentru a defini un personalizat numele clasei pentru bloc numele clasei (adevărat): adaugă a numele clasei la elementul rădăcină de bloc pe baza numelui bloculuihtml (true): permite marcajul blocului să fie editat directuseOnce ProprietateAceasta este o proprietate utilă care vă permite să restricționați blocarea unui bloc de a fi adăugat de mai multe ori pe o pagină. Un exemplu în acest sens este nucleul Mai Mult bloc, care nu poate fi adăugat la o pagină dacă este deja prezentă.
După cum puteți vedea, o dată Mai Mult bloc a fost adăugat, pictograma bloc este gri și nu poate fi selectat. useOnce proprietatea este setată la fals în mod implicit.
Este momentul să folosim cunoștințele pe care le-am câștigat până acum pentru a implementa un exemplu solid de lucru al unui bloc care face ceva mai interesant decât pur și simplu ieșirea conținutului static.
Vom construi un bloc pentru a extrage o imagine aleatoare obținută printr-o solicitare externă pe site-ul PlaceIMG, care returnează o imagine aleatorie. În plus, veți putea selecta categoria de imagini returnată printr-un control derulant selectat.
Pentru comoditate, vom adăuga noul nostru bloc la același mi-personalizat-bloc plugin, în loc să creeze un plugin nou. Codul pentru blocul implicit este situat în interiorul lui / Src / bloc dosar, adăugați alt dosar înăuntru / src denumit aleatoare imagine și adăugați trei fișiere noi:
Alternativ, puteți copia / Src / bloc dosarul și redenumiți-l dacă nu doriți să tastați totul manual. Asigurați-vă, totuși, că ați redenumit block.js la index.js în noul dosar bloc.
Noi folosim index.js pentru numele de fișier principal al blocului, deoarece acest lucru ne permite să simplificăm declarația de import din interior blocks.js. În loc să includem calea și numele de fișier complet al blocului, putem specifica calea către dosarul bloc și import va căuta în mod automat un index.js fişier.
Deschide /src/blocks.js și adăugați o referință la noul nostru bloc din partea de sus a fișierului, direct sub declarația de import existentă.
import "./random-image";
Interior /src/random-image/index.js, adăugați următorul cod pentru a da startul noului nostru bloc.
// Import CSS. import "./style.scss '; import "./editor.scss"; const __ = wp.i18n; const registerBlockType, interogare = wp.blocks; ("Random Image"), pictograma: 'format-image', categoria: 'common', cuvinte cheie: image ')], edita: funcția (recuzită) return ( Bara de imagini aleatorie (editor)
); , salvați: funcția (recuzită) return ( Bara de imagini aleatorie (capătul din față)
); );Aceasta stabilește cadrul blocului nostru și este destul de similar cu codul blocului de boilerplate generat de crea-guten-bloc set de instrumente.
Începem prin importarea editorului și a foilor de stil pentru front-end, iar apoi vom extrage câteva funcții utilizate în mod obișnuit wp.i18n și wp.blocks în variabilele locale.
Interior registerBlockType (), au fost introduse valori pentru titlu, icoană, categorie, și Cuvinte cheie proprietăți, în timp ce Editați | × și Salvați Funcțiile actuale doar de ieșire de conținut static.
Adăugați blocul de imagini aleatorii pe o pagină nouă pentru a vedea rezultatul generat până acum.
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 vizionaț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.
S-ar putea să te întrebi de ce nu trebuie să adăugăm niciun cod PHP pentru a scoate în evidență alte scripturi bloc. Scripturile de bloc pentru mi-personalizat-bloc bloc sunt enqueued via init.php, dar nu este nevoie să enqueue script-uri în mod special pentru noul nostru bloc ca acesta este îngrijit de noi de către crea-guten-bloc.
Atâta timp cât vom importa fișierul nostru principal bloc în src / blocks.js (așa cum am făcut mai sus), atunci nu este nevoie să facem nicio lucrare suplimentară. Toate codurile JSX, ES6 + și Sass vor fi automat compilate în următoarele fișiere:
Aceste fișiere conțin JavaScript și CSS pentru toate blocurile, deci trebuie să fie încorporate doar un singur set de fișiere, indiferent de numărul de blocuri create!
Acum suntem gata să adăugăm un pic de interactivitate blocului nostru și putem face acest lucru adăugând mai întâi un atribut pentru a stoca categoria de imagini.
atribute: category: type: 'string', implicit: 'nature'
Aceasta creează un atribut numit categorie, care stochează un șir cu o valoare implicită de 'natură'. Nu am specificat o locație în marcaj pentru a stoca și a prelua valoarea atributului, deci vor fi folosite în mod special comentarii HTML speciale. Acesta este comportamentul implicit dacă omiteți o sursă de atribut.
Avem nevoie de o modalitate de schimbare a categoriei de imagini, pe care o putem face printr-un control de tip drop-down selectat. Actualizați Editați | × funcționează la următoarele:
editare: funcție (recuzită) const atribute: category, setAttributes = recuzită; funcția setCategory (eveniment) const selected = event.target.querySelector ('opțiune: verificat'); setAttributes (category: selected.value); event.preventDefault (); întoarcere ( Categoria curentă este: category ); Iata cum va arata:
Acest lucru este destul de diferit de staticul anterior Editați | × funcția, deci hai să trecem prin schimbări.
Mai întâi am adăugat un control de selectare selectat cu mai multe opțiuni care corespund categoriilor de imagini disponibile pe site-ul PlaceIMG.
Când se modifică valoarea drop-down, setCategory este apelată funcția, care găsește categoria selectată în prezent și apoi la rândul ei apelează setAttributes funcţie. Aceasta este o funcție de bază Gutenberg și actualizează corect o valoare a atributului. Se recomandă să actualizați doar un atribut utilizând această funcție.
Acum, ori de câte ori este selectată o nouă categorie, valoarea atributului se actualizează și este trecută înapoi în Editați | × , care actualizează mesajul de ieșire.
Trebuie să efectuăm un ultim pas pentru a afișa imaginea aleatorie. Trebuie să creăm o componentă simplă, care va lua în categoria actuală și va ieși
Cererea pe care trebuie să o facem pentru PlaceIMG are forma: https://placeimg.com/[width]/[height]/[category]
Vom păstra lățimea și înălțimea fixă pentru moment, așa că trebuie să adăugăm doar categoria curentă la sfârșitul adresei URL a solicitării. De exemplu, în cazul în care categoria a fost 'natură' atunci adresa URL a solicitării complete ar fi: https://placeimg.com/320/220/nature.
Adauga o RandomImage mai sus registerBlockType ():
funcția RandomImage (category const src = 'https://placeimg.com/320/220/' + categorie; întoarcere;
Pentru ao folosi, trebuie doar să o adăugați în interiorul funcției de editare și să eliminați mesajul de ieșire statică. În timp ce suntem la el, faceți același lucru pentru funcția de salvare.
În totalitate index.js fișierul ar trebui să arate astfel:
// Import CSS. import "./style.scss '; import "./editor.scss"; const __ = wp.i18n; const registerBlockType, interogare = wp.blocks; funcția RandomImage (category const src = 'https://placeimg.com/320/220/' + categorie; întoarcere); , save: funcție (recuzită) const atribute: category = recuzită; întoarcere (
În sfârșit (pentru moment), adăugați următoarele stiluri editor.scss pentru a adăuga o margine colorată în jurul imaginii.
.wp-block-cgb-bloc-imagine aleatoare select padding: 2px; margine: 7px 0 5px 2px; raza de graniță: 3 pixeli;
De asemenea, veți avea nevoie de anumite stiluri style.css.
.wp-block-cgb-bloc-aleatoare-imagine fundal: # f3e88e; culoare: #fff; frontieră: 2px solid # ead9a6; raza de graniță: 10 pixeli; padding: 5px; lățime: -webkit-fit-content; lățime: -moz-fit-content; lățime: potrivire; img border-radius: moștenire; frontieră: 1px punctat # caac69; afișare: grilă;
Ori de câte ori pagina este actualizată în editor sau pe front, se va afișa o nouă imagine aleatorie.
Dacă vedeți aceeași imagine afișată mereu și repetată, puteți reîmprospăta greu pentru a preveni difuzarea imaginii din memoria cache a browserului dvs..
În acest tutorial am acoperit destul de mult teren. Dacă ați făcut-o până atunci, dați-vă un pat bine meritat pe spate! Gutenberg bloc de dezvoltare poate fi o mulțime de distracție, dar este cu siguranta o provocare pentru a înțelege fiecare concept la prima expunere.
Pe parcurs, am învățat cum să blocăm scripturile și stilurile de bloc și să le acopere registerBlockType () funcționează în profunzime.
Am urmat acest lucru punând teoria în practică și creând un bloc personalizat de la zero pentru a afișa o imagine aleatorie dintr-o anumită categorie utilizând serviciul web PlaceIMG.
În următoarea și ultima parte a acestei serii de tutorial, vom adăuga mai multe funcții în blocul de imagini aleatoriu prin panoul de setări din inspectorul bloc.
Dacă ați urmat împreună cu acest tutorial și doriți doar să experimentați cu codul fără a introduce totul, veți putea descărca versiunea finală mi-personalizat-bloc plugin în următorul tutorial.
