Tässä opetusohjelmassa käydään läpi dynaamisen WordPress Gutenberg -lohkon luominen. Lopputuloksena on liukusäädin, joka näyttää valitun kategorian viestien esittelykuvat. Koodi sisältää korkeamman asteen komponentin (withSelect) käytön kaikkien lohkoeditorin kategorioiden hakemiseen.
Mitä teemme
Lohko tekee yksinkertaisen liukusäätimen käyttämällä jQuery Cycle2- komentosarjaa. Mutta voit käyttää mitä tahansa muuta liukusäädintä. Lohko editorin sisällä muodostaa luettelon kaikista luokista, jolloin käyttäjä voi valita yhden luokan. Kun lohko näytetään käyttöliittymässä, se hakee dynaamisesti viestit valitusta luokasta ja näyttää niiden esittelykuvat dioina. Tämä opetusohjelma pitää sen melko yksinkertaisena, joten voit laajentaa ja säätää liukusäädintäsi haluamallasi tavalla.
Olen päättänyt olla renderöimättä diaesitystä editorin sisällä. Yleensä sinun on varmistettava, että editorin ja käyttöliittymän renderöinti ovat samat. Mutta liukusäätimen tapauksessa haluan pitää sen yksinkertaisena, jotta en räjäyttäisi käyttäjää jatkuvilla animaatioilla editorissa.
Lohkolla on vain kaksi asetusta; luokan valinta ja diojen (viestien) määrä. Suosittelen lisäämään muita asetuksia, kuten liukunopeus, pillerien näyttöasetukset, nuolet, teksti ja muut tyypilliset liukusäädinasetukset. Näiden asetusten lisäämisen pitäisi olla melko yksinkertaista.
Kaikki koodi on kirjoitettu Javascript ES6 / ES2015+:lla. Muista, että tämä koodi tarvitsee Babelin muuttamaan ja rakentamaan lopulliset Javascript-tiedostot. Katso alla oleva opas, jos et tiedä miten.
Aseta tiedostot
Tässä esimerkissä luomme lohkon teeman sisään. Teemakansiossa minulla on alikansio ‘ gutenberg/‘, johon olen sijoittanut package.jsonja webpack-config.js. src/Tämän kansion alikansioon ‘ ‘ sijoitan kaikki koontitiedostoni. Webpack-kokoonpanoni on asetettu sijoittamaan koontitiedostot teemani alikansioon ‘ assets/js/‘.
Luo uusi tyhjä lähdetiedosto sisään theme-folder/gutenberg/src/block-slider.jsja määritä Webpack luomaan koontitiedosto kohteeseen theme-folder/assets/js/block-slider.js. Voit muuttaa sijainteja ja/tai tiedostonimiä haluamallasi tavalla, muista vain säätää alla olevaa koodia.
Meidän on myös ladattava tarvittava liukusäätimen komentosarja. Voit ladata Cycle2:n tästä linkistä tai voit käyttää mitä tahansa muuta diakomentosarjaa ja säätää alla olevaa koodia. Laitan jquery.cycle2.min.jstiedoston teemakansioni /assets/js/.
Valmistan myös pienen CSS-tiedoston, joka ladataan vain editoriin. Teemme vain pienen palan tyyliä tehdäksemme luokan valinnasta optimaalisen. Luon tyhjän tiedoston editor-block-slider.cssja laitan sen kansioon theme-folder/assets/css/.
Lopuksi siirrymme PHP-tiedostoon, joka on ladattu teemaan. Yksinkertaisuuden vuoksi teen PHP-osan teemassa functions.php.
Rekisteröi Gutenberg-lohko PHP:ssä
Kaikki Gutenberg-lohkot on rekisteröitävä [register_block_type](https://developer.wordpress.org/reference/functions/register_block_type/)(). Kutsun sitä mieluummin funktioon, joka on koukussa init. Ensimmäinen parametri on lohkosi nimi, mukaan lukien nimiavaruus. Olen päättänyt kutsua liukusäädinohjelmaani awp/slider(säädä haluamallasi tavalla). Toinen argumentti on joukko argumentteja.
Samassa toiminnossa rekisteröin koontiskriptin [wp_register_script](https://developer.wordpress.org/reference/functions/wp_register_script/)()ja rekisteröin editorin CSS-tiedostoni -sovelluksella [wp_register_style](https://developer.wordpress.org/reference/functions/wp_register_style/)(). Molemmat kahvat lisätään argumentteina kenttään " editor_script" ja " editor_style". Mitä tulee riippuvuuksiin, olen lisännyt joitain skriptin peruspaketteja varmistaakseni, että lohkoskriptimme ladataan oikeassa järjestyksessä. Mitä tulee editorin tyyliin, ‘ wp-edit-blocks‘:n käyttö on hyvä riippuvuus, jotta vältytään tyylien ohittamisesta.
Ja lopuksi, koska tämä on dynaaminen lohko, meidän on lisättävä myös render_callbackargumentti " ", joka osoittaa funktioon, joka vastaa lohkon hahmontamisesta käyttöliittymässä.
Lopuksi määritellään renderöintifunktio. Saamme kaksi parametria funktion takaisinsoittoon; lohkon attribuuttien joukko ja sisäinen sisältö (ei käytetä tässä lohkossa). Palautan vain jonkinlaisen nuken narun. Palaamme ja täsmennämme renderöintitoimintoa myöhemmin. Muista palauttaa merkkijono, ei kaiku.
function awp_gutenberg_slider_render($attributes, $content) {
return 'Slider render comes here.';
}Palaamme PHP-renderöintitoimintoon tämän opetusohjelman lopussa. Nyt on aika siirtyä Javascriptiin!
Rekisteröi mukautettu Gutenberg-lohko Javascriptissä
Avataan block-slider.jslähdetiedostomme. Tässä vaiheessa aloitan komentosarjan (npm run start) muuttaakseni kaiken tässä tiedostossa tekemämme koontitiedostoksi. Meidän on rekisteröitävä lohko käyttämällä [registerBlockType](https://developer.wordpress.org/block-editor/developers/block-api/block-registration/)(). Katso linkki nähdäksesi kaikki mahdolliset argumentit.
Kuten päätimme register_block_type()PHP:ssä, lohkomme on nimeltään awp/slider. Haluamme myös lisätä lohkoon kaksi attribuuttia, kuten aiemmin mainittiin: yksi valitulle termille ID ja toinen diojen lukumäärälle.
Haluan myös lisätä lohkojen kohdistustoiminnon. Se lisätään automaattisesti lisäämällä objektiin " align". supportsJos haluat kaikki lohkokohdistukset, voit asettaa alignarvoksi tosi. Vasemmalle tai oikealle tasatussa liukusäätimessä ei kuitenkaan ole paljon järkeä, joten määritän tietyt lohkotasaustyypit, joita tämä lohko tukee: "Tasaa keskelle" (‘ center‘), "Leveä leveys" (‘ wide‘) ja " Täysi leveys" (‘ full‘). Lisäksi, jotta voin määrittää oletusarvon ja tehdä sen käytettäväksi PHP:llä, lisään lohkoomme alignattribuutiksi " ".
Asetan lohkon editargumentin erilliseksi komponentiksi, jonka luomme seuraavaksi. Ja lopuksi savefunktio yksinkertaisesti palauttaa null, koska tämä on dynaaminen lohko.
Meidän on määritettävä kiinteistön komponentti edit. Ennen rekisteröintikoodia määritän funktiokomponentin BlockEdit, joka yksinkertaisesti hahmontaa a :n divja a Placeholder:n jollain valetekstillä.
[Placeholder](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/placeholder)on mukava komponentti alueen hahmontamiseen asetuksille – eikä välttämättä lohkon varsinaiseen renderöintiin. Komponentin sisällä Placeholdernäytämme luettelon termeistä, joista valita.
Tässä vaiheessa lohkomme pitäisi olla saatavilla WordPress Gutenbergissä! Luodaan uusi viesti, lisätään uusi lohko ja etsitään lohkomme Common-luokasta. Tältä lohkomme näyttää tällä hetkellä:
Tarkastajan asetusten lisääminen
Lisätään joitakin asetuksia Inspectoriin (editorin oikea sivupalkki). Kuten mainittiin, lohkollamme on vain yksi asetus; diojen määrä. Tässä suosittelen lisäämään asetuksia liukusäätimeen. Muista rekisteröidä attribuutit jokaiselle lisäämällesi asetukselle.
Lisätaksemme jotain Tarkastajaan käytämme komponenttia [InspectorControls](https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/inspector-controls)( wp.blockEditor). Sisällä hahmonnetaan [PanelBody](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/panel#panelbody)( wp.components), jotta voidaan lisätä uusi kokoontaitettava osio. Sitten yksinkertaisesti renderöimme [RangeControl](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/range-control)( wp.components) luodaksesi syöttöasetuksen diojen määrän valitsemiseksi. Asetamme minimiarvoksi 1 ja maksimiarvon 10. Yhdistämme valueja onChangetapahtuman attribuutille numSlides.
Yllä olevalla koodilla meidän pitäisi nyt saada mukava osio, jossa on alueen liukusäädin diojen määrän asettamiseksi.
Jälleen suosittelen, että pelaat lisäämällä asetuksia liukusäätimeen. Seuraava vaihe on elementin luominen luokkien luettelon luomiseksi, joista valita.
Luokan valintakomponentin luominen
Jotta koodimme pysyisi siistinä ja uudelleenkäytettävinä, luodaan luokan valitsinkomponentti erillisessä tiedostossa. Luon koontikansion sisällä uuden tiedoston awp-category-picker.js.
Tämän tiedoston sisällä määritämme komponentin, joka käy läpi kaikki tällä hetkellä WordPressissä olevat luokat ja renderöi ne jollain tavalla. Luokkien saamiseksi meidän on käärittävä se ns. korkeamman asteen komponenttiin, joka antaa komponentillemme tarvitsemamme rekvisiitta. Tätä varten käytämme [withSelect](https://developer.wordpress.org/block-editor/packages/packages-data/#withSelect). Sisällä withSelectvoimme tehdä pyynnön noutaa kaikki WordPressin luokat käyttämällä myymälävalitsinta [select](https://developer.wordpress.org/block-editor/packages/packages-data/#select)(). Voimme käyttää:
hakeaksesi kaikki ehdot toimitetusta taksonomiasta. Jos et tunne korkeamman asteen komponentteja ja valitsimia WordPress Gutenbergissä, minulla on viesti, joka selittää tämän käsitteen yksityiskohtaisemmin: Luo mukautettu Gutenberg-lohko – Osa 10: Viestien ja korkeamman asteen komponenttien hakeminen.
Koska meidän on vietävä komponentti tästä tiedostosta, asetamme lausekkeeseen yhdistelmän withSelectja määrittämämme komponentti export default. Komponenttimme yksinkertaisesti palauttaa div:n, jossa on CategorySelecttyhjää tekstiä, jotta voimme nähdä sen toimivan. withSelectPitäisi tarjota ehdotus " " termskohteelle CategorySelect. Olen lisännyt console.log()tähän potkuriin, jotta voimme nähdä, että se toimii.
Viimeinen asia, joka meidän on tehtävä, on itse asiassa tuoda ja käyttää tätä luokan valitsinkomponenttia mukautetussa lohkossamme.
Takaisin sisään block-slider.jsmeidän on ensin tuotava tiedoston yläosassa oleva komponentti. Ja Placeholderkomponenttimme sisällä yksinkertaisesti renderöimme komponentin.
Yllä olevalla koodilla lohkosi pitäisi nyt tehdä div CategorySelectkomponentista. Jos avaat konsolin selaimessasi, sinun pitäisi myös nähdä joitakin lokeja. Muista, että withSelectse on asynkroninen kysely, mikä tarkoittaa, että se saattaa hahmottua useita kertoja. Ensimmäistä kertaa ehdotustermit ovat null. Mutta viimeisen lokin (lokien) pitäisi päätyä joukkoon luokkatermejä.
Loistava! Jatketaan työskentelyä CategorySelectkomponenttimme kanssa ja saatetaan se todella hahmottamaan termiluettelo, jonka avulla käyttäjä voi valita yhden!
Muodostaa luettelo termeistä, joista valita
On olemassa monia tapoja luoda vaihtoehtoluettelo, jossa käyttäjä voi valita yhden kohteen. Jos haluat jotain todella yksinkertaista, voit tehdä tavallisen valintaluettelon ([SelectControl](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/select-control)). Se on täysin sinusta kiinni. Olen valinnut puhtaamman ja mukavamman lähestymistavan käyttämällä [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).
Komponentin sisällä MenuGroupmeidän on kierrettävä props.termstaulukon läpi, ja jokaiselle kohteelle haluamme näyttää MenuItemkomponentin, joka tuottaa termin nimen. Ja tietysti haluamme hahmontaa tämän vain, jos se props.termstodella sisältää jotain (muistatko asynkronointipyynnön?).
Olen antanut MenuGroupkomponentille mukautetun luokan, koska meidän on kohdistettava tämä CSS:llä. Ja olen asettanut rekvisiitin roleasentoon MenuItem" menuitemradio" varmistaakseni, että vain yksi voidaan valita kerrallaan. Oletusarvoisesti ne toimivat valintaruutuina, jolloin voidaan valita useita kohteita.
Yllä olevan koodin avulla lohkomme pitäisi nyt (pienen sekunnin jälkeen) tehdä mukava luettelo kaikista WordPress-esiintymisesi luokista.
Saatat huomata, että lohkomme laajenee sisältämään kaikki luokat. Jos olemme WordPress-esiintymässä, jossa on paljon luokkia, tästä tulee nopeasti ongelma. Haluamme varmistaa, että valitsin on enimmäiskorkeussäiliö, joka saa pystysuoran vierityspalkin, jos luokkia on useita. Tässä on CSS-tiedostomme.
Lisää editor-block-slider.csstiedostoomme:
.awp-categoryselect div {
max-height: 200px;
overflow: hidden scroll;
border: 1px solid #b3bcc0;
}Tämä CSS kohdistaa divmeidän MenuGroupsisällemme ja varmistaa, ettei se koskaan nouse yli 200 pikseliä. Jos sisältö MenuGroupkasvaa (enemmän luokkia), se näyttää pystysuoran vierityspalkin. Tämä on CSS:n vähimmäismäärä lohkollemme, mutta voit tietysti lisätä CSS:ää, jos haluat.
Viimeinen asia, joka meidän on korjattava kategoriavalitsimessamme, on toiminto, joka näyttää nykyisen valitun kohteen ja antaa käyttäjän valita termin luettelosta. Tätä varten meidän on välitettävä tälle komponentille joitain rekvisiitta lohkostamme.
Meidän block-slider.json välitettävä nykyinen valittu termi (attribuutin arvo termId) ja funktio valitun termin (setAttributes) päivittämiseksi rekvisiittana luokkavalitsinkomponenttiamme.
Yllä olevassa koodissa rivillä #6määrittelemme funktion, joka yksinkertaisesti päivittää attribuutin termId. Välitämme tämän funktion nimen prop :na CategorySelectriville at line #17. Ja rivillä #16välitämme nykyisen arvon termId. Voimme päivittää CategorySelectkomponenttimme vastaamaan valittua tuotetta ja antaa käyttäjän itse valita termin.
Takaisin awp-category-picker.jslisäämme uusia rekvisiitta MenuItem. Palautamme truetai falseehdotukselle, isSelectedonko nykyinen termitunnus sama kuin nykyinen valittu. Aloitamme selectTermtoiminnon onClicktapahtumassa välittämällä termin ID. Ja jotta valitusta kohteesta tulee visuaalinen, lisäämme ehdollisesti kuvakkeen jokaisen kohteen eteen.
Tällä luokkavalitsimen pitäisi näyttää tältä:
Luettelossa tulee selvästi merkitä valittu termi valintamerkkikuvakkeella, ja voit napsauttaa mitä tahansa termiä valitaksesi sen sijaan.
Siinä oli kaikki editorille ja Javascriptille! Nyt on jäljellä käyttöliittymän renderöinti, jonka teemme PHP:ssä.
Piirrä dynaaminen lohko PHP:ssä
Ennen kuin sukeltaamme renderöintitoimintoon, huolehditaan ensin joistakin asioista.
Ensin meidän on asetettava cycle2-skripti jonoon käyttöliittymään, jotta liukusäädinkoodimme todella muuttuu liukusäätimeksi. Teemme tämän yksinkertaisella toiminnolla, joka on koukussa wp_enqueue_scripts. Säädä alla, jos valitsit toisen liukusäätimen komentosarjan.
add_action('wp_enqueue_scripts', function() {
wp_enqueue_script(
'cycle2-slider-js',
get_template_directory_uri(). '/assets/js/jquery.cycle2.min.js',
['jquery'],
'',
true
);
});Toiseksi haluamme palata register_block_type()funktiokutsuun. Kun käsittelemme dynaamisia lohkoja, meidän tulee ehdottomasti lisätä uusi argumentti; attributes. Tässä argumentissa määritämme kaikki attribuutit, jotka olemme määrittäneet registerBlockTypeJavascriptissä, mukaan lukien niiden oletusarvot. Jos emme tee niin, kaikki attribuutit eivät ole käytettävissä renderöinnin takaisinkutsussamme. Jos attribuutti jätettiin muuttamatta lohkoeditorissa, attribuutti ja sen arvo eivät ole käytettävissä PHP:n attribuuttitaulukossa. Joten suosittelen, että lisäät aina attributestaulukon PHP- register_block_type()funktioon, kun työskentelet dynaamisten lohkojen kanssa. Meidän lohkollemme se näyttäisi tältä:
Nyt palaamme takaisinsoitto-renderöintitoimintoomme awp_gutenberg_slider_render(). Tulos on täysin sinun päätettävissäsi, varsinkin jos olet valinnut toisen liukusäätimen skriptin. Alla on yksinkertainen esimerkki.
Pääajatuksena on, että tarkistamme, onko termi valittu vai ei ($attributes['termId']). Jos se on täytetty, luomme [WP_Query](https://developer.wordpress.org/reference/classes/wp_query/)()argumenteilla viestien lukumäärälle ($attributes['numSlides']) ja valitulle luokkatunnukselle. Sitten on luotava asianmukainen HTML-koodi, jotta cycle2 toimii, kierretään viestien yli ja näytetään niiden esittelykuvat dioina.
Huomaa, kuinka lisään riville oikean lohkokohdistusluokan #12. Tuloksena pitäisi olla esillä olevien kuvien liukusäädin. Muista, että tämä on perusesimerkki, jossa on joitain puutteita. Haemme esimerkiksi kolme viimeistä viestiä valitusta kategoriasta. Mutta jos yhdellä niistä ei ole esiteltyä kuvaa, liukusäädin näyttää vain kaksi viestiä.
Tärkeää muistaa on palauttaa merkkijono eikä toistaa sitä. Suosittelen myös jonkinlaisen mallitoiminnon käyttämistä teemassasi tällaisiin dynaamisiin lohkorenderöityihin. Siitä voi nopeasti tulla sotkuinen HTML:n korjaaminen ja rakentaminen merkkijonoksi.
Viimeiset sanat
Tämä opetusohjelma on osoittanut, kuinka voit luoda mukautetun dynaamisen WordPress Gutenberg -lohkon, jossa hahmonnat sen käyttöliittymän sisällön PHP:ssä. Ja olet nähnyt kuinka käyttää korkeamman asteen komponenttia withSelectkaikkien luokkatermien kyselyyn ja menetelmän valita valittavissa oleva luettelo.
Kaikki yllä oleva koodi on kirjoitettu mahdollisimman yksinkertaisesti. Olen lisännyt vain ehdottoman vähimmäisasetukset. Liukusäädin toimii, mutta yleensä haluat enemmän – esimerkiksi tehdä dioihin linkkejä, näyttää otsikoita viesteistä, liukusäätimen nuolia tai mahdollisuuden mukauttaa nopeutta tai muita liukusäätimen asetuksia. Ajatuksena on näyttää sinulle perusasiat ja tehdä siitä helppoa laajentaa, rakentaa ja muuttaa projektisi tarpeiden mukaan.