Selles õpetuses käsitletakse dünaamilise WordPressi Gutenbergi ploki loomist. Lõpptulemus on liugur, mis näitab valitud kategooria postituste esiletõstetud pilti. Kood hõlmab kõrgema järgu komponendi (withSelect) kasutamist kõigi kategooriate toomiseks plokiredaktoris.
Mida me teeme
Plokk renderdab lihtsa liuguri, kasutades skripti jQuery Cycle2. Kuid võite kasutada mis tahes muud liuguri skripti. Plokk kuvab redaktoris kõigi kategooriate loendi, mis võimaldab kasutajal valida ühe kategooria. Kui kuvate ploki kasutajaliideses, toob see dünaamiliselt postitusi valitud kategooriast ja kuvab nende esiletõstetud pilte slaididena. See õpetus muudab selle üsna lihtsaks, võimaldades teil liugurit vastavalt soovile laiendada ja reguleerida.
Olen otsustanud slaidiesitlust redaktoris mitte renderdada. Tavaliselt peaksite veenduma, et redigeerija ja kasutajaliidese renderdus on sama. Kuid liuguri puhul meeldib mulle asi lihtsana hoida, et mitte tekitada kasutajat redaktoris pidevate animatsioonidega.
Plokis on ainult kaks seadet; kategooria valik ja slaidide (postituste) arv. Soovitan lisada rohkem sätteid, nagu slaidikiirus, pillide kuvamise sätted, nooled, tekst ja muud tüüpilised liuguri sätted. Nende seadete ise lisamine peaks olema üsna lihtne.
Kogu kood on kirjutatud Javascript ES6 / ES2015+. Pidage meeles, et see kood vajab lõplike Javascripti failide teisendamiseks ja koostamiseks Babelit. Kui te ei tea, kuidas seda teha, vaadake allolevat juhendit.
Seadistage failid
Selles näites loome ploki teema sees. Teemakaustas on mul alamkaust ‘ gutenberg/‘, kuhu olen paigutanud oma package.jsonja webpack-config.js. Selle kausta alamkaustas " src/" paigutan kõik oma ehitusfailid. Minu veebipaketi konfiguratsioon on seadistatud paigutama ehitusfailid minu teema alamkausta " assets/js/".
Looge uus tühi lähtefail theme-folder/gutenberg/src/block-slider.jsja seadistage Webpack, et luua ehitusfail asukohta theme-folder/assets/js/block-slider.js. Saate asukohti ja/või failinimesid vastavalt soovile muuta, lihtsalt ärge unustage allolevat koodi kohandada.
Samuti peame alla laadima vajaliku liuguri skripti. Cycle2 saate alla laadida sellelt lingilt või kasutada mõnda muud slaidiskripti ja kohandada allolevat koodi. Asetan jquery.cycle2.min.jsfaili oma teemakausta /assets/js/kausta.
Valmistan ette ka väikese CSS-faili, mis laaditakse ainult redaktorisse. Teeme vaid väikese stiilitüki, et kategooria oleks optimaalne. Loon tühja faili editor-block-slider.cssja asetan selle kausta theme-folder/assets/css/.
Lõpuks läheme teemasse laaditud PHP-faili juurde. Lihtsuse huvides teen PHP osa teemas functions.php.
Registreerige Gutenbergi plokk PHP-s
Kõik Gutenbergi plokid peavad olema registreeritud aadressil [register_block_type](https://developer.wordpress.org/reference/functions/register_block_type/)(). Eelistan seda nimetada funktsiooni sees, mis on ühendatud init. Esimene parameeter on teie ploki nimi, sealhulgas nimeruum. Otsustasin kutsuda oma liuguri skripti awp/slider(reguleerige nii, nagu soovite). Teine argument on argumentide hulk.
Sama funktsiooni raames registreerin koostamise skripti rakendusega [wp_register_script](https://developer.wordpress.org/reference/functions/wp_register_script/)()ja oma redaktori CSS-faili [wp_register_style](https://developer.wordpress.org/reference/functions/wp_register_style/)(). Mõlemad käepidemed lisatakse argumentidena vastavalt parameetritele " editor_script" ja " editor_style". Sõltuvuste osas olen lisanud skripti jaoks mõned kõige elementaarsemad paketid, et tagada meie plokiskripti õiges järjekorras laadimine. Mis puutub redaktori stiili, siis on ‘ wp-edit-blocks‘ kasutamine hea sõltuvus, et vältida stiilide ülekirjutamist.
Ja lõpuks, kuna see on dünaamiline plokk, peame lisama ka render_callbackargumendi " ", osutades funktsioonile, mis vastutab ploki esiotsas renderdamise eest.
Lõpuks määratleme renderdusfunktsiooni. Funktsiooni tagasihelistamisele saame kaks parameetrit; ploki atribuutide massiiv ja sisemine sisu (selles plokis ei kasutata). Ma lihtsalt tagastan mõne näivnööri. Tuleme tagasi ja täpsustame renderdusfunktsiooni hiljem. Ärge unustage tagastada stringi, mitte kaja.
function awp_gutenberg_slider_render($attributes, $content) {
return 'Slider render comes here.';
}Tuleme PHP renderdamisfunktsiooni juurde tagasi selle õpetuse lõpus. Nüüd on aeg liikuda edasi Javascripti juurde!
Registreerige kohandatud Gutenbergi plokk Javascriptis
Avame oma block-slider.jslähtefaili. Siinkohal käivitan skripti (npm run start), et muuta kõik, mida me selles failis teeme, ehitusfailiks. Peame ploki registreerima, kasutades [registerBlockType](https://developer.wordpress.org/block-editor/developers/block-api/block-registration/)(). Kõigi võimalike argumentide nägemiseks vaadake linki.
Nagu PHP-s otsustasime, register_block_type()on meie ploki nimi awp/slider. Nagu eelnevalt mainitud, tahame plokile lisada ka kaks atribuuti: ühe valitud termini ID ja teise slaidide arvu jaoks.
Mulle meeldib lisada ka plokkide joondamise funktsionaalsus. See lisatakse automaatselt, lisades objektile " align". supportsKui soovite kõiki plokkide joondusi, võite lihtsalt määrata alignväärtusele Tõene. Kuid vasakule või paremale joondatud liuguril pole erilist mõtet, nii et ma määratlen konkreetsed plokkide joondamise tüübid, mida see plokk toetab: "Joonda keskele" (‘ center‘), "Lai laius" (‘ wide‘) ja " Täislaius" (‘ full‘). Samuti lisan alignmeie plokki atribuudina atribuudi ‘ ‘, et määrata vaikimisi joondus ja muuta see PHP-st kättesaadavaks.
Seadsin ploki editargumendi eraldi komponendiks, mille me järgmisena loome. Ja lõpuks savetagastab funktsioon lihtsalt null, sest see on dünaamiline plokk.
Peame määratlema editatribuudi komponendi. Enne registreerimiskoodi defineerin funktsiooni komponendi BlockEdit, mis lihtsalt renderdab a divja a Placeholderkoos näiva tekstiga.
[Placeholder](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/placeholder)on kena komponent ala renderdamiseks sätete jaoks – ja mitte tingimata ploki tegelikuks renderdamiseks. Komponendi sees Placeholderrenderdame terminite loendi, mille hulgast valida.
Praegu peaks meie plokk olema WordPressis Gutenbergis saadaval! Loome uue postituse, lisame uue ploki ja leiame oma ploki jaotisest Ühine. Meie plokk näeb praegu välja selline:
Inspektori sätete lisamine
Lisame Inspectorile (redaktori parempoolsele külgribale) mõned sätted. Nagu mainitud, on meie plokil ainult üks seadistus; slaidide arv. Siin soovitan teil lisada liuguriploki jaoks rohkem sätteid. Ärge unustage registreerida atribuudid iga lisatava sätte jaoks.
Inspektorile millegi lisamiseks kasutame komponenti [InspectorControls](https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/inspector-controls)( wp.blockEditor). Sees renderdame uue kokkupandava jaotise lisamiseks [PanelBody](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/panel#panelbody)( ). wp.componentsSeejärel renderdame lihtsalt [RangeControl](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/range-control)( wp.components), et luua sisendseade slaidide arvu valimiseks. Seame miinimumi 1 ja maksimumi 10. Ühendame atribuudiga valueja onChangesündmuse numSlides.
Ülaltoodud koodiga peaksime nüüd saama kena jaotise vahemiku liuguriga slaidide arvu määramiseks.
Jällegi soovitan teil liugurile seadete lisamisega mängida. Järgmine samm on elemendi loomine kategooriate loendi renderdamiseks, mille hulgast valida.
Kategooria valimise komponendi loomine
Et meie kood oleks korras ja korduvkasutatav, loome kategooriavalija komponendi eraldi failis. Ehitamise kaustas loon uue faili awp-category-picker.js.
Selles failis määratleme komponendi, mis liigub läbi kõigi WordPressi praeguste kategooriate ja renderdab need mingil viisil. Kategooriate saamiseks peame selle pakkima nn kõrgema järgu komponendi sisse, mis varustab meie komponenti rekvisiitide kaudu vajalikuga. Selleks kasutame [withSelect](https://developer.wordpress.org/block-editor/packages/packages-data/#withSelect). Sees withSelectsaame esitada taotluse kõigi WordPressi kategooriate toomiseks, kasutades poevalijat [select](https://developer.wordpress.org/block-editor/packages/packages-data/#select)(). Saame kasutada:
et tuua kõik terminid pakutud taksonoomia nälkjas. Kui te ei tunne WordPress Gutenbergi kõrgema järgu komponente ja selektoreid, on mul postitus, mis selgitab seda kontseptsiooni üksikasjalikumalt: Kohandatud Gutenbergi ploki loomine – 10. osa: Postituste ja kõrgema järgu komponentide toomine.
Kuna peame sellest failist komponendi eksportima, asetame avalduse kombinatsiooni withSelectja meie määratletud komponendi export default. Meie CategorySelectkomponent lihtsalt tagastab div koos näiva tekstiga, et saaksime näha, et see töötab. withSelectPeaks andma prop " terms" CategorySelect. Lisasin console.log()sellele rekvisiidile lisa, et saaksime näha, kas see töötab.
Viimane asi, mida peame tegema, on tegelikult importida ja kasutada seda kategooria valija komponenti meie kohandatud plokis.
Tagasi sisse block-slider.jspeame esmalt importima faili ülaosas oleva komponendi. Ja meie Placeholderkomponendi sees muudame komponendi lihtsalt välja.
Ülaltoodud koodiga peaks teie plokk nüüd renderdama CategorySelectkomponendi div. Kui avate oma brauseris konsooli, peaksite nägema ka mõningaid logisid. Pidage meeles, et withSelectsee on asünkrooniline päring, mis tähendab, et seda võidakse renderdada mitu korda. Esimest korda on rekvisiidi terminid null. Kuid viimane (viimased logid) peaks lõppema kategooriaterminite massiiviga.
Suurepärane! Jätkame oma CategorySelectkomponendiga tööd ja paneme selle reaalselt renderdama terminite loendi, mis võimaldab kasutajal ühe valida!
Terminite loendi renderdamine, mille hulgast valida
Valikute loendi renderdamiseks, kus kasutaja saab valida ühe üksuse, on palju võimalusi. Kui soovite midagi väga lihtsat, võite renderdada tavalise valiku rippmenüü ([SelectControl](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/select-control)). See on täiesti sinu otsustada. Olen valinud puhtama ja kenama lähenemisviisi, kasutades [MenuGroup](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/menu-group)( wp.components) ja [MenuItem](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/menu-item)( wp.components).
Komponendi sees MenuGrouppeame props.termsmassiivi läbima ja iga üksuse jaoks tahame kuvada MenuItemkomponendi, mis renderdab termini nime. Ja loomulikult tahame seda renderdada ainult siis, kui props.termssee sisaldab midagi (asünkroonimistaotlus, mäletate?).
Andsin MenuGroupkomponendile kohandatud klassi, kuna peame selle sihtima CSS-iga. Ja ma olen seadnud rekvisiidi olekusse role" MenuItem" menuitemradio, et olla kindel, et korraga saab valida ainult ühe. Vaikimisi töötavad need märkeruutudena, võimaldades seega valida mitu üksust.
Ülaltoodud koodiga peaks meie plokk nüüd (väikese sekundi pärast) esitama kena loendi kõigist teie WordPressi eksemplari kategooriatest.
Võite märgata, et meie plokk laieneb, et see hõlmaks kõiki kategooriaid. Kui oleme WordPressi eksemplaris, kus on palju kategooriaid, muutub see kiiresti probleemiks. Tahame veenduda, et valija on maksimaalse kõrgusega konteiner, mis saab vertikaalse kerimisriba, kui kategooriaid on palju. See on koht, kus meie CSS-fail siseneb.
Lisage meie editor-block-slider.cssfaili:
.awp-categoryselect div {
max-height: 200px;
overflow: hidden scroll;
border: 1px solid #b3bcc0;
}See CSS sihib divmeie sisemust MenuGroupja tagab, et see ei ületaks kunagi 200 pikslit. Kui sisu MenuGroupmuutub suuremaks (rohkem kategooriaid), kuvatakse vertikaalne kerimisriba. See on meie ploki jaoks CSS-i miinimum, kuid loomulikult saate soovi korral lisada rohkem CSS-i.
Viimane asi, mida peame oma kategooriavalijas parandama, on funktsioon, mis näitab praegu valitud üksust ja võimaldab kasutajal valida loendist termini. Selleks peame oma plokist sellele komponendile edastama mõned rekvisiidid.
block-slider.jsPeame edastama praeguse valitud termini (atribuudi väärtus) termIdja funktsiooni valitud termini värskendamiseks (setAttributes) meie kategooriavalija komponendi rekvisiidina.
Ülaltoodud koodi real #6määratleme funktsiooni, mis lihtsalt värskendab atribuuti termId. Anname selle funktsiooni nime propina edasi CategorySelectreale #17. Ja real #16me edastame praeguse väärtuse termId. Sellega saame värskendada oma CategorySelectkomponenti, et see kajastaks valitud üksust, ja võimaldada kasutajal terminit tegelikult valida.
Tagasi awp-category-picker.jslisame lehele mõned uued rekvisiidid MenuItem. Tagastame truevõi falserekvisiidi jaoks, isSelectedkas praegune termin ID on sama, mis praegu valitud. selectTermFunktsiooni käivitame sündmuses onClick, edastades mõiste ID. Ja selleks, et valitud üksus oleks visuaalne, lisame iga üksuse ette tingimuslikult ikooni.
Sellega peaks meie kategooriavalija välja nägema järgmine:
Loendis tuleks valitud termin selgelt märgistada linnukese ikooniga ja selle asemel võite klõpsata mis tahes terminil.
See oli toimetaja ja Javascripti osa jaoks kõik! Nüüd jääb alles eesmise renderdus, mida teeme PHP-s.
Renderdage dünaamiline plokk PHP-s
Enne renderdusfunktsiooni sukeldumist hoolitseme kõigepealt mõne asja eest.
Kõigepealt peame järjekorda seadma skripti cycle2 esiservas, et meie liuguri kood muutuks tegelikult liuguriks. Teeme seda lihtsa funktsiooniga, mis on ühendatud wp_enqueue_scripts. Kui valisite mõne muu liuguri skripti, kohandage allolevat valikut.
add_action('wp_enqueue_scripts', function() {
wp_enqueue_script(
'cycle2-slider-js',
get_template_directory_uri(). '/assets/js/jquery.cycle2.min.js',
['jquery'],
'',
true
);
});Teiseks tahame naasta register_block_type()funktsioonikutse juurde. Dünaamiliste plokkide käsitlemisel peaksime kindlasti lisama uue argumendi; attributes. Selles argumendis määratleme kõik atribuudid, mille oleme registerBlockTypeJavascriptis määratlenud, sealhulgas nende vaikeväärtused. Kui me seda ei tee, ei ole kõik atribuudid meie renderdamise tagasihelistamisel saadaval. Kui atribuut jäeti plokiredaktoris muutmata, ei ole atribuut ja selle väärtus PHP atribuutide massiivis saadaval. Seega soovitan teil dünaamiliste plokkidega töötades alati lisada attributesmassiiv PHP register_block_type()funktsioonile. Meie ploki jaoks näeks see välja järgmine:
Nüüd pöördume tagasi tagasihelistamisfunktsiooni juurde awp_gutenberg_slider_render(). Väljund on täielikult teie enda otsustada, eriti kui olete valinud mõne muu liuguri skripti kasutamise. Allpool on lihtne näide.
Põhiidee seisneb selles, et kontrollime, kas termin on valitud või mitte ($attributes['termId']). Kui see on täidetud, loome [WP_Query](https://developer.wordpress.org/reference/classes/wp_query/)()argumentidega postituste arvu ($attributes['numSlides']) ja valitud kategooria ID. Seejärel tuleb luua õige HTML, et tsükkel2 töötaks, postitused üle käia ja nende esiletoodud pildid slaididena kuvada.
Pange tähele, kuidas ma lisan reale õige ploki joondusklassi #12. Tulemuseks peaks olema esiletoodud piltide liugur. Pidage meeles, et see on põhinäide, millel on mõned vead. Näiteks toome valitud kategooriast kolm viimast postitust. Kuid eeldades, et ühel neist pole esiletoodud pilti, kuvab liugur ainult kahte postitust.
Oluline on meeles pidada, et string tuleb tagastada ja seda mitte korrata. Samuti soovitan selliste dünaamiliste plokkide renderdamiste jaoks oma teemas kasutada mõnda mallifunktsiooni. HTML-i stringina parandamine ja koostamine võib kiiresti muutuda segaseks.
Lõpusõnad
See õpetus on näidanud, kuidas luua kohandatud dünaamiline WordPress Gutenbergi plokk, kus renderdate selle esiserva sisu PHP-s. Ja olete näinud, kuidas kasutada kõrgema järgu komponenti withSelectkõigi kategooriaterminite päringute tegemiseks ja meetodit valitava loendi kuvamiseks.
Kõik ülaltoodud kood on kirjutatud nii lihtsalt kui võimalik. Lisasin ainult absoluutse miinimumi seadistusi. Liugur töötab, kuid tavaliselt soovite rohkemat – näiteks slaidide linkide loomine, postituste pealkirjade kuvamine, liuguri nooled või kiiruse või muude liuguri sätete kohandamise võimalus. Idee on näidata teile põhitõdesid ja hõlbustada teie projekti laiendamist, edasi arendamist ja muutmist vastavalt oma projekti vajadustele.