{"id":233847,"date":"2023-02-23T17:59:00","date_gmt":"2023-02-23T14:59:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233847"},"modified":"2023-02-23T18:00:51","modified_gmt":"2023-02-23T15:00:51","slug":"opetusohjelma-luo-liukusaeaedin-dynaamisena-gutenberg-lohkona","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/opetusohjelma-luo-liukusaeaedin-dynaamisena-gutenberg-lohkona\/","title":{"rendered":"Opetusohjelma: Luo liukus\u00e4\u00e4din dynaamisena Gutenberg-lohkona"},"content":{"rendered":"\n

T\u00e4ss\u00e4 opetusohjelmassa k\u00e4yd\u00e4\u00e4n l\u00e4pi dynaamisen WordPress Gutenberg -lohkon luominen. Lopputuloksena on liukus\u00e4\u00e4din, joka n\u00e4ytt\u00e4\u00e4 valitun kategorian viestien esittelykuvat. Koodi sis\u00e4lt\u00e4\u00e4 korkeamman asteen komponentin (withSelect<\/code>) k\u00e4yt\u00f6n kaikkien lohkoeditorin kategorioiden hakemiseen.<\/p>\n

Mit\u00e4 teemme<\/h2>\n

Lohko tekee yksinkertaisen liukus\u00e4\u00e4timen k\u00e4ytt\u00e4m\u00e4ll\u00e4 jQuery Cycle2-<\/a> komentosarjaa. Mutta voit k\u00e4ytt\u00e4\u00e4 mit\u00e4 tahansa muuta liukus\u00e4\u00e4dint\u00e4. Lohko editorin sis\u00e4ll\u00e4 muodostaa luettelon kaikista luokista, jolloin k\u00e4ytt\u00e4j\u00e4 voi valita yhden luokan. Kun lohko n\u00e4ytet\u00e4\u00e4n k\u00e4ytt\u00f6liittym\u00e4ss\u00e4, se hakee dynaamisesti viestit valitusta luokasta ja n\u00e4ytt\u00e4\u00e4 niiden esittelykuvat dioina. T\u00e4m\u00e4 opetusohjelma pit\u00e4\u00e4 sen melko yksinkertaisena, joten voit laajentaa ja s\u00e4\u00e4t\u00e4\u00e4 liukus\u00e4\u00e4dint\u00e4si haluamallasi tavalla.<\/p>\n

Olen p\u00e4\u00e4tt\u00e4nyt olla render\u00f6im\u00e4tt\u00e4 diaesityst\u00e4 editorin sis\u00e4ll\u00e4. Yleens\u00e4 sinun on varmistettava, ett\u00e4 editorin ja k\u00e4ytt\u00f6liittym\u00e4n render\u00f6inti ovat samat. Mutta liukus\u00e4\u00e4timen tapauksessa haluan pit\u00e4\u00e4 sen yksinkertaisena, jotta en r\u00e4j\u00e4ytt\u00e4isi k\u00e4ytt\u00e4j\u00e4\u00e4 jatkuvilla animaatioilla editorissa.<\/p>\n

Lohkolla on vain kaksi asetusta; luokan valinta ja diojen (viestien) m\u00e4\u00e4r\u00e4. Suosittelen lis\u00e4\u00e4m\u00e4\u00e4n muita asetuksia, kuten liukunopeus, pillerien n\u00e4ytt\u00f6asetukset, nuolet, teksti ja muut tyypilliset liukus\u00e4\u00e4dinasetukset. N\u00e4iden asetusten lis\u00e4\u00e4misen pit\u00e4isi olla melko yksinkertaista.<\/p>\n

Kaikki koodi on kirjoitettu Javascript ES6 \/ ES2015+:lla. Muista, ett\u00e4 t\u00e4m\u00e4 koodi tarvitsee Babelin muuttamaan ja rakentamaan lopulliset Javascript-tiedostot. Katso alla oleva opas, jos et tied\u00e4 miten.<\/p>\n

Aseta tiedostot<\/h2>\n

T\u00e4ss\u00e4 esimerkiss\u00e4 luomme lohkon teeman sis\u00e4\u00e4n. Teemakansiossa minulla on alikansio ’ gutenberg\/<\/code>’, johon olen sijoittanut package.json<\/code>ja webpack-config.js<\/code>. src\/<\/code>T\u00e4m\u00e4n kansion alikansioon ’ ’ sijoitan kaikki koontitiedostoni. Webpack-kokoonpanoni on asetettu sijoittamaan koontitiedostot teemani alikansioon ’ assets\/js\/<\/code>’.<\/p>\n

Luo uusi tyhj\u00e4 l\u00e4hdetiedosto sis\u00e4\u00e4n theme-folder\/gutenberg\/src\/block-slider.js<\/code>ja m\u00e4\u00e4rit\u00e4 Webpack luomaan koontitiedosto kohteeseen theme-folder\/assets\/js\/block-slider.js<\/code>. Voit muuttaa sijainteja ja\/tai tiedostonimi\u00e4 haluamallasi tavalla, muista vain s\u00e4\u00e4t\u00e4\u00e4 alla olevaa koodia.<\/p>\n

Meid\u00e4n on my\u00f6s ladattava tarvittava liukus\u00e4\u00e4timen komentosarja. Voit ladata Cycle2:n t\u00e4st\u00e4 linkist\u00e4<\/a> tai voit k\u00e4ytt\u00e4\u00e4 mit\u00e4 tahansa muuta diakomentosarjaa ja s\u00e4\u00e4t\u00e4\u00e4 alla olevaa koodia. Laitan jquery.cycle2.min.js<\/code>tiedoston teemakansioni \/assets\/js\/<\/code>.<\/p>\n

Valmistan my\u00f6s pienen CSS-tiedoston, joka ladataan vain editoriin. Teemme vain pienen palan tyyli\u00e4 tehd\u00e4ksemme luokan valinnasta optimaalisen. Luon tyhj\u00e4n tiedoston editor-block-slider.css<\/code>ja laitan sen kansioon theme-folder\/assets\/css\/<\/code>.<\/p>\n

Lopuksi siirrymme PHP-tiedostoon, joka on ladattu teemaan. Yksinkertaisuuden vuoksi teen PHP-osan teemassa functions.php<\/code>.<\/p>\n

Rekister\u00f6i Gutenberg-lohko PHP:ss\u00e4<\/h2>\n

Kaikki Gutenberg-lohkot on rekister\u00f6it\u00e4v\u00e4 [register_block_type](https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/)()<\/code>. Kutsun sit\u00e4 mieluummin funktioon, joka on koukussa init<\/code>. Ensimm\u00e4inen parametri on lohkosi nimi, mukaan lukien nimiavaruus. Olen p\u00e4\u00e4tt\u00e4nyt kutsua liukus\u00e4\u00e4dinohjelmaani awp\/slider<\/code>(s\u00e4\u00e4d\u00e4 haluamallasi tavalla). Toinen argumentti on joukko argumentteja.<\/p>\n

Samassa toiminnossa rekister\u00f6in koontiskriptin [wp_register_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_register_script\/)()<\/code>ja rekister\u00f6in editorin CSS-tiedostoni -sovelluksella [wp_register_style](https:\/\/developer.wordpress.org\/reference\/functions\/wp_register_style\/)()<\/code>. Molemmat kahvat lis\u00e4t\u00e4\u00e4n argumentteina kentt\u00e4\u00e4n " editor_script<\/code>" ja " editor_style<\/code>". Mit\u00e4 tulee riippuvuuksiin, olen lis\u00e4nnyt joitain skriptin peruspaketteja varmistaakseni, ett\u00e4 lohkoskriptimme ladataan oikeassa j\u00e4rjestyksess\u00e4. Mit\u00e4 tulee editorin tyyliin, ’ wp-edit-blocks<\/code>’:n k\u00e4ytt\u00f6 on hyv\u00e4 riippuvuus, jotta v\u00e4ltyt\u00e4\u00e4n tyylien ohittamisesta.<\/p>\n

Ja lopuksi, koska t\u00e4m\u00e4 on dynaaminen lohko, meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 my\u00f6s render_callback<\/code>argumentti " ", joka osoittaa funktioon, joka vastaa lohkon hahmontamisesta k\u00e4ytt\u00f6liittym\u00e4ss\u00e4.<\/p>\n

add_action('init', function() {\n    wp_register_script(\n        'awp-block-slider-js', \n        get_template_directory_uri(). '\/assets\/js\/block-slider.js', \n        ['wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wp-data']\n    );\n    wp_register_style(\n        'awp-block-slider-style', \n        get_template_directory_uri(). '\/assets\/css\/editor-block-slider.css', \n        ['wp-edit-blocks']\n    );\n\u00a0\n    register_block_type('awp\/slider', [\n        'editor_script' => 'awp-block-slider-js',\n        'editor_style' => 'awp-block-slider-style',\n        'render_callback' => 'awp_gutenberg_slider_render',\n    ]);\n});<\/code><\/pre>\n
Lopuksi m\u00e4\u00e4ritell\u00e4\u00e4n render\u00f6intifunktio. Saamme kaksi parametria funktion takaisinsoittoon; lohkon attribuuttien joukko ja sis\u00e4inen sis\u00e4lt\u00f6 (ei k\u00e4ytet\u00e4 t\u00e4ss\u00e4 lohkossa). Palautan vain jonkinlaisen nuken narun. Palaamme ja t\u00e4smenn\u00e4mme render\u00f6intitoimintoa my\u00f6hemmin. Muista palauttaa merkkijono, ei kaiku.<\/p>\n
function awp_gutenberg_slider_render($attributes, $content) {\n    return 'Slider render comes here.';\n}<\/code><\/pre>\n
Palaamme PHP-render\u00f6intitoimintoon t\u00e4m\u00e4n opetusohjelman lopussa. Nyt on aika siirty\u00e4 Javascriptiin!<\/p>\n
Rekister\u00f6i mukautettu Gutenberg-lohko Javascriptiss\u00e4<\/h2>\n
Avataan block-slider.js<\/code>l\u00e4hdetiedostomme. T\u00e4ss\u00e4 vaiheessa aloitan komentosarjan (npm run start<\/code>) muuttaakseni kaiken t\u00e4ss\u00e4 tiedostossa tekem\u00e4mme koontitiedostoksi. Meid\u00e4n on rekister\u00f6it\u00e4v\u00e4 lohko k\u00e4ytt\u00e4m\u00e4ll\u00e4 [registerBlockType](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-registration\/)()<\/code>. Katso linkki n\u00e4hd\u00e4ksesi kaikki mahdolliset argumentit.<\/p>\n
Kuten p\u00e4\u00e4timme register_block_type()<\/code>PHP:ss\u00e4, lohkomme on nimelt\u00e4\u00e4n awp\/slider<\/code>. Haluamme my\u00f6s lis\u00e4t\u00e4 lohkoon kaksi attribuuttia, kuten aiemmin mainittiin: yksi valitulle termille ID ja toinen diojen lukum\u00e4\u00e4r\u00e4lle.<\/p>\n
Haluan my\u00f6s lis\u00e4t\u00e4 lohkojen kohdistustoiminnon. Se lis\u00e4t\u00e4\u00e4n automaattisesti lis\u00e4\u00e4m\u00e4ll\u00e4 objektiin " align<\/code>". supports<\/code>Jos haluat kaikki lohkokohdistukset, voit asettaa align<\/code>arvoksi tosi. Vasemmalle tai oikealle tasatussa liukus\u00e4\u00e4timess\u00e4 ei kuitenkaan ole paljon j\u00e4rke\u00e4, joten m\u00e4\u00e4rit\u00e4n tietyt lohkotasaustyypit, joita t\u00e4m\u00e4 lohko tukee: "Tasaa keskelle" (’ center<\/code>’), "Leve\u00e4 leveys" (’ wide<\/code>’) ja " T\u00e4ysi leveys" (’ full<\/code>’). Lis\u00e4ksi, jotta voin m\u00e4\u00e4ritt\u00e4\u00e4 oletusarvon ja tehd\u00e4 sen k\u00e4ytett\u00e4v\u00e4ksi PHP:ll\u00e4, lis\u00e4\u00e4n lohkoomme align<\/code>attribuutiksi " ".<\/p>\n
Asetan lohkon edit<\/code>argumentin erilliseksi komponentiksi, jonka luomme seuraavaksi. Ja lopuksi save<\/code>funktio yksinkertaisesti palauttaa null<\/code>, koska t\u00e4m\u00e4 on dynaaminen lohko.<\/p>\n
const { __ } = wp.i18n;\nconst { registerBlockType } = wp.blocks;\n\u00a0\nregisterBlockType('awp\/slider', {\n    title: __('AWP Slider', 'awp'),\n    icon: 'slides',\n    category: 'common',\n    supports: {\n        align: ['center', 'wide', 'full']\n    },\n    attributes: {\n        align: {\n            type: 'string',\n            default: 'center'\n        },\n        termId: {\n            type: 'number',\n            default: 0\n        },\n        numSlides: {\n            type: 'number',\n            default: 3\n        },\n    },\n    edit: BlockEdit,\n    save:() => { return null; }\n});<\/code><\/pre>\n
Meid\u00e4n on m\u00e4\u00e4ritett\u00e4v\u00e4 kiinteist\u00f6n komponentti edit<\/code>. Ennen rekister\u00f6intikoodia m\u00e4\u00e4rit\u00e4n funktiokomponentin BlockEdit<\/code>, joka yksinkertaisesti hahmontaa a :n div<\/code>ja a Placeholder<\/code>:n jollain valetekstill\u00e4.<\/p>\n
const { __ } = wp.i18n;\nconst { registerBlockType } = wp.blocks;\nconst { Placeholder } = wp.components;\nconst BlockEdit = (props) => {\n    return(\n        <div className={props.className}>\n            <Placeholder\n                label={__('Slider Category', 'awp')}\n            >\n                Select category comes here.\n            <\/Placeholder>\n        <\/div>\n    );\n}\n\u00a0\nregisterBlockType('awp\/slider', {\n    ...<\/code><\/pre>\n
[Placeholder](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/placeholder)<\/code>on mukava komponentti alueen hahmontamiseen asetuksille \u2013 eik\u00e4 v\u00e4ltt\u00e4m\u00e4tt\u00e4 lohkon varsinaiseen render\u00f6intiin. Komponentin sis\u00e4ll\u00e4 Placeholder<\/code>n\u00e4yt\u00e4mme luettelon termeist\u00e4, joista valita.<\/p>\n
T\u00e4ss\u00e4 vaiheessa lohkomme pit\u00e4isi olla saatavilla WordPress Gutenbergiss\u00e4! Luodaan uusi viesti, lis\u00e4t\u00e4\u00e4n uusi lohko ja etsit\u00e4\u00e4n lohkomme Common-luokasta. T\u00e4lt\u00e4 lohkomme n\u00e4ytt\u00e4\u00e4 t\u00e4ll\u00e4 hetkell\u00e4:<\/p>\n
\"Opetusohjelma:<\/a>\"Opetusohjelma:<\/a><\/p>\n
Tarkastajan asetusten lis\u00e4\u00e4minen<\/h2>\n
Lis\u00e4t\u00e4\u00e4n joitakin asetuksia Inspectoriin (editorin oikea sivupalkki). Kuten mainittiin, lohkollamme on vain yksi asetus; diojen m\u00e4\u00e4r\u00e4. T\u00e4ss\u00e4 suosittelen lis\u00e4\u00e4m\u00e4\u00e4n asetuksia liukus\u00e4\u00e4timeen. Muista rekister\u00f6id\u00e4 attribuutit jokaiselle lis\u00e4\u00e4m\u00e4llesi asetukselle.<\/p>\n
Lis\u00e4taksemme jotain Tarkastajaan k\u00e4yt\u00e4mme komponenttia [InspectorControls](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/block-editor\/src\/components\/inspector-controls)<\/code>( wp.blockEditor<\/code>). Sis\u00e4ll\u00e4 hahmonnetaan [PanelBody](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/panel#panelbody)<\/code>( wp.components<\/code>), jotta voidaan lis\u00e4t\u00e4 uusi kokoontaitettava osio. Sitten yksinkertaisesti render\u00f6imme [RangeControl](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/range-control)<\/code>( wp.components<\/code>) luodaksesi sy\u00f6tt\u00f6asetuksen diojen m\u00e4\u00e4r\u00e4n valitsemiseksi. Asetamme minimiarvoksi 1 ja maksimiarvon 10. Yhdist\u00e4mme value<\/code>ja onChange<\/code>tapahtuman attribuutille numSlides<\/code>.<\/p>\n
const { __ } = wp.i18n;\nconst { registerBlockType } = wp.blocks;\nconst { InspectorControls } = wp.blockEditor;\nconst { Placeholder, PanelBody, RangeControl } = wp.components;\n\u00a0\nconst BlockEdit = (props) => {\n    const { attributes, setAttributes } = props;\n\u00a0\n    return(\n        <div className={props.className}>\n            <InspectorControls>\n                <PanelBody\n                    title={__('Slider Settings', 'awp')}\n                    initialOpen={true}\n                >\n                    <RangeControl\n                        label={__('Number of slides', 'awp')}\n                        value={attributes.numSlides}\n                        onChange={(val) => setAttributes({ numSlides: val })}\n                        min={1}\n                        max={10}\n                    \/>\n                <\/PanelBody>\n            <\/InspectorControls>\n            <Placeholder\n                ...<\/code><\/pre>\n
Yll\u00e4 olevalla koodilla meid\u00e4n pit\u00e4isi nyt saada mukava osio, jossa on alueen liukus\u00e4\u00e4din diojen m\u00e4\u00e4r\u00e4n asettamiseksi.<\/p>\n
\"Opetusohjelma:<\/a><\/p>\n
J\u00e4lleen suosittelen, ett\u00e4 pelaat lis\u00e4\u00e4m\u00e4ll\u00e4 asetuksia liukus\u00e4\u00e4timeen. Seuraava vaihe on elementin luominen luokkien luettelon luomiseksi, joista valita.<\/p>\n
Luokan valintakomponentin luominen<\/h2>\n
Jotta koodimme pysyisi siistin\u00e4 ja uudelleenk\u00e4ytett\u00e4vin\u00e4, luodaan luokan valitsinkomponentti erillisess\u00e4 tiedostossa. Luon koontikansion sis\u00e4ll\u00e4 uuden tiedoston awp-category-picker.js<\/code>.<\/p>\n
T\u00e4m\u00e4n tiedoston sis\u00e4ll\u00e4 m\u00e4\u00e4rit\u00e4mme komponentin, joka k\u00e4y l\u00e4pi kaikki t\u00e4ll\u00e4 hetkell\u00e4 WordPressiss\u00e4 olevat luokat ja render\u00f6i ne jollain tavalla. Luokkien saamiseksi meid\u00e4n on k\u00e4\u00e4ritt\u00e4v\u00e4 se ns. korkeamman asteen komponenttiin, joka antaa komponentillemme tarvitsemamme rekvisiitta. T\u00e4t\u00e4 varten k\u00e4yt\u00e4mme [withSelect](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#withSelect)<\/code>. Sis\u00e4ll\u00e4 withSelect<\/code>voimme tehd\u00e4 pyynn\u00f6n noutaa kaikki WordPressin luokat k\u00e4ytt\u00e4m\u00e4ll\u00e4 myym\u00e4l\u00e4valitsinta [select](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#select)()<\/code>. Voimme k\u00e4ytt\u00e4\u00e4:<\/p>\n
select('core').getEntityRecords('taxonomy', '<category_slug>', <args>)<\/code><\/pre>\n
hakeaksesi kaikki ehdot toimitetusta taksonomiasta. Jos et tunne korkeamman asteen komponentteja ja valitsimia WordPress Gutenbergiss\u00e4, minulla on viesti, joka selitt\u00e4\u00e4 t\u00e4m\u00e4n k\u00e4sitteen yksityiskohtaisemmin: Luo mukautettu Gutenberg-lohko \u2013 Osa 10: Viestien ja korkeamman asteen komponenttien hakeminen<\/a>.<\/p>\n
Koska meid\u00e4n on viet\u00e4v\u00e4 komponentti t\u00e4st\u00e4 tiedostosta, asetamme lausekkeeseen yhdistelm\u00e4n withSelect<\/code>ja m\u00e4\u00e4ritt\u00e4m\u00e4mme komponentti export default<\/code>. Komponenttimme yksinkertaisesti palauttaa div:n, jossa on CategorySelect<\/code>tyhj\u00e4\u00e4 teksti\u00e4, jotta voimme n\u00e4hd\u00e4 sen toimivan. withSelect<\/code>Pit\u00e4isi tarjota ehdotus " " terms<\/code>kohteelle CategorySelect<\/code>. Olen lis\u00e4nnyt console.log()<\/code>t\u00e4h\u00e4n potkuriin, jotta voimme n\u00e4hd\u00e4, ett\u00e4 se toimii.<\/p>\n
const { withSelect } = wp.data;\n\u00a0\nconst CategorySelect = (props) => {\n    console.log(props.terms);\n\u00a0\n    return(\n        <div>This is category select<\/div>\n    );\n}\n\u00a0\nexport default withSelect((select, props) => {\n    return {\n        terms: select('core').getEntityRecords('taxonomy', 'category', {per_page: -1})\n    }\n})(CategorySelect);<\/code><\/pre>\n
Viimeinen asia, joka meid\u00e4n on teht\u00e4v\u00e4, on itse asiassa tuoda ja k\u00e4ytt\u00e4\u00e4 t\u00e4t\u00e4 luokan valitsinkomponenttia mukautetussa lohkossamme.<\/p>\n
Takaisin sis\u00e4\u00e4n block-slider.js<\/code>meid\u00e4n on ensin tuotava tiedoston yl\u00e4osassa oleva komponentti. Ja Placeholder<\/code>komponenttimme sis\u00e4ll\u00e4 yksinkertaisesti render\u00f6imme komponentin.<\/p>\n
const { Placeholder, PanelBody, RangeControl } = wp.components;\n\u00a0\nimport CategorySelect from '.\/awp-category-picker';\n\u00a0\nconst BlockEdit = (props) => {\n        ...\n            <Placeholder\n                label={__('Slider Category', 'awp')}\n            >\n                <CategorySelect \n                \/>\n            <\/Placeholder>\n        ...<\/code><\/pre>\n
Yll\u00e4 olevalla koodilla lohkosi pit\u00e4isi nyt tehd\u00e4 div CategorySelect<\/code>komponentista. Jos avaat konsolin selaimessasi, sinun pit\u00e4isi my\u00f6s n\u00e4hd\u00e4 joitakin lokeja. Muista, ett\u00e4 withSelect<\/code>se on asynkroninen kysely, mik\u00e4 tarkoittaa, ett\u00e4 se saattaa hahmottua useita kertoja. Ensimm\u00e4ist\u00e4 kertaa ehdotustermit ovat null<\/code>. Mutta viimeisen lokin (lokien) pit\u00e4isi p\u00e4\u00e4ty\u00e4 joukkoon luokkatermej\u00e4.<\/p>\n
Loistava! Jatketaan ty\u00f6skentely\u00e4 CategorySelect<\/code>komponenttimme kanssa ja saatetaan se todella hahmottamaan termiluettelo, jonka avulla k\u00e4ytt\u00e4j\u00e4 voi valita yhden!<\/p>\n
Muodostaa luettelo termeist\u00e4, joista valita<\/h3>\n
On olemassa monia tapoja luoda vaihtoehtoluettelo, jossa k\u00e4ytt\u00e4j\u00e4 voi valita yhden kohteen. Jos haluat jotain todella yksinkertaista, voit tehd\u00e4 tavallisen valintaluettelon ([SelectControl](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/select-control)<\/code>). Se on t\u00e4ysin sinusta kiinni. Olen valinnut puhtaamman ja mukavamman l\u00e4hestymistavan k\u00e4ytt\u00e4m\u00e4ll\u00e4 [MenuGroup](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/menu-group)<\/code>( wp.components<\/code>) ja [MenuItem](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/menu-item)<\/code>( wp.components<\/code>).<\/p>\n
Komponentin sis\u00e4ll\u00e4 MenuGroup<\/code>meid\u00e4n on kierrett\u00e4v\u00e4 props.terms<\/code>taulukon l\u00e4pi, ja jokaiselle kohteelle haluamme n\u00e4ytt\u00e4\u00e4 MenuItem<\/code>komponentin, joka tuottaa termin nimen. Ja tietysti haluamme hahmontaa t\u00e4m\u00e4n vain, jos se props.terms<\/code>todella sis\u00e4lt\u00e4\u00e4 jotain (muistatko asynkronointipyynn\u00f6n?).<\/p>\n
const { withSelect } = wp.data;\nconst { MenuGroup, MenuItem } = wp.components;\n\u00a0\nconst CategorySelect = (props) => {\n    const { terms } = props;\n    return(\n        <MenuGroup\n            className=\"awp-categoryselect\"\n        >\n            {terms && (terms.map((item) => (<MenuItem\n                        role=\"menuitemradio\"\n                    >\n                        {item.name}\n                    <\/MenuItem>\n                ))\n            )}\n        <\/MenuGroup>\n    );\n}\n\u00a0\nexport default withSelect((select, props) => {\n    ...<\/code><\/pre>\n
Olen antanut MenuGroup<\/code>komponentille mukautetun luokan, koska meid\u00e4n on kohdistettava t\u00e4m\u00e4 CSS:ll\u00e4. Ja olen asettanut rekvisiitin role<\/code>asentoon MenuItem<\/code>" menuitemradio<\/code>" varmistaakseni, ett\u00e4 vain yksi voidaan valita kerrallaan. Oletusarvoisesti ne toimivat valintaruutuina, jolloin voidaan valita useita kohteita.<\/p>\n
Yll\u00e4 olevan koodin avulla lohkomme pit\u00e4isi nyt (pienen sekunnin j\u00e4lkeen) tehd\u00e4 mukava luettelo kaikista WordPress-esiintymisesi luokista.<\/p>\n
Saatat huomata, ett\u00e4 lohkomme laajenee sis\u00e4lt\u00e4m\u00e4\u00e4n kaikki luokat. Jos olemme WordPress-esiintym\u00e4ss\u00e4, jossa on paljon luokkia, t\u00e4st\u00e4 tulee nopeasti ongelma. Haluamme varmistaa, ett\u00e4 valitsin on enimm\u00e4iskorkeuss\u00e4ili\u00f6, joka saa pystysuoran vierityspalkin, jos luokkia on useita. T\u00e4ss\u00e4 on CSS-tiedostomme.<\/p>\n
Lis\u00e4\u00e4 editor-block-slider.css<\/code>tiedostoomme:<\/p>\n
.awp-categoryselect div {\n    max-height: 200px;\n    overflow: hidden scroll;\n    border: 1px solid #b3bcc0;\n}<\/code><\/pre>\n
T\u00e4m\u00e4 CSS kohdistaa div<\/code>meid\u00e4n MenuGroup<\/code>sis\u00e4llemme ja varmistaa, ettei se koskaan nouse yli 200 pikseli\u00e4. Jos sis\u00e4lt\u00f6 MenuGroup<\/code>kasvaa (enemm\u00e4n luokkia), se n\u00e4ytt\u00e4\u00e4 pystysuoran vierityspalkin. T\u00e4m\u00e4 on CSS:n v\u00e4himm\u00e4ism\u00e4\u00e4r\u00e4 lohkollemme, mutta voit tietysti lis\u00e4t\u00e4 CSS:\u00e4\u00e4, jos haluat.<\/p>\n
Viimeinen asia, joka meid\u00e4n on korjattava kategoriavalitsimessamme, on toiminto, joka n\u00e4ytt\u00e4\u00e4 nykyisen valitun kohteen ja antaa k\u00e4ytt\u00e4j\u00e4n valita termin luettelosta. T\u00e4t\u00e4 varten meid\u00e4n on v\u00e4litett\u00e4v\u00e4 t\u00e4lle komponentille joitain rekvisiitta lohkostamme.<\/p>\n
Meid\u00e4n block-slider.js<\/code>on v\u00e4litett\u00e4v\u00e4 nykyinen valittu termi (attribuutin arvo termId<\/code>) ja funktio valitun termin (setAttributes<\/code>) p\u00e4ivitt\u00e4miseksi rekvisiittana luokkavalitsinkomponenttiamme.<\/p>\n
...\n\u00a0\nconst BlockEdit = (props) => {\n    const { attributes, setAttributes } = props;\n\u00a0\n    const selectTerm = (termId) => {\n        setAttributes({ termId: termId });\n    }\n\u00a0\n    return(\n        ...\n            <Placeholder\n                label={__('Slider Category', 'awp')}\n            >\n                <CategorySelect \n                    selectedTermId={attributes.termId}\n                    selectTerm={selectTerm}\n                \/>\n            <\/Placeholder>\n        ...<\/code><\/pre>\n
Yll\u00e4 olevassa koodissa rivill\u00e4 #6<\/code>m\u00e4\u00e4rittelemme funktion, joka yksinkertaisesti p\u00e4ivitt\u00e4\u00e4 attribuutin termId<\/code>. V\u00e4lit\u00e4mme t\u00e4m\u00e4n funktion nimen prop :na CategorySelect<\/code>riville at line #17<\/code>. Ja rivill\u00e4 #16<\/code>v\u00e4lit\u00e4mme nykyisen arvon termId<\/code>. Voimme p\u00e4ivitt\u00e4\u00e4 CategorySelect<\/code>komponenttimme vastaamaan valittua tuotetta ja antaa k\u00e4ytt\u00e4j\u00e4n itse valita termin.<\/p>\n
Takaisin awp-category-picker.js<\/code>lis\u00e4\u00e4mme uusia rekvisiitta MenuItem<\/code>. Palautamme true<\/code>tai false<\/code>ehdotukselle, isSelected<\/code>onko nykyinen termitunnus sama kuin nykyinen valittu. Aloitamme selectTerm<\/code>toiminnon onClick<\/code>tapahtumassa v\u00e4litt\u00e4m\u00e4ll\u00e4 termin ID. Ja jotta valitusta kohteesta tulee visuaalinen, lis\u00e4\u00e4mme ehdollisesti kuvakkeen jokaisen kohteen eteen.<\/p>\n
...\nconst CategorySelect = (props) => {\n    const { terms, selectedTermId, selectTerm } = props;\n\u00a0\n    return(\n        <MenuGroup\n            className=\"awp-categoryselect\"\n        >\n            {terms && (terms.map((item) => (<MenuItem\n                        role=\"menuitemradio\"\n                        isSelected={item.id == selectedTermId}\n                        icon={item.id == selectedTermId? 'yes': 'no-alt'}\n                        onClick={() => selectTerm(item.id)}\n                    >\n                        {item.name}\n                    <\/MenuItem>\n                ))\n            )}\n        ...<\/code><\/pre>\n
T\u00e4ll\u00e4 luokkavalitsimen pit\u00e4isi n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/p>\n
\"Opetusohjelma:<\/a><\/p>\n
Luettelossa tulee selv\u00e4sti merkit\u00e4 valittu termi valintamerkkikuvakkeella, ja voit napsauttaa mit\u00e4 tahansa termi\u00e4 valitaksesi sen sijaan.<\/p>\n
Siin\u00e4 oli kaikki editorille ja Javascriptille! Nyt on j\u00e4ljell\u00e4 k\u00e4ytt\u00f6liittym\u00e4n render\u00f6inti, jonka teemme PHP:ss\u00e4.<\/p>\n
Piirr\u00e4 dynaaminen lohko PHP:ss\u00e4<\/h2>\n
Ennen kuin sukeltaamme render\u00f6intitoimintoon, huolehditaan ensin joistakin asioista.<\/p>\n
Ensin meid\u00e4n on asetettava cycle2-skripti jonoon k\u00e4ytt\u00f6liittym\u00e4\u00e4n, jotta liukus\u00e4\u00e4dinkoodimme todella muuttuu liukus\u00e4\u00e4timeksi. Teemme t\u00e4m\u00e4n yksinkertaisella toiminnolla, joka on koukussa wp_enqueue_scripts<\/code>. S\u00e4\u00e4d\u00e4 alla, jos valitsit toisen liukus\u00e4\u00e4timen komentosarjan.<\/p>\n
add_action('wp_enqueue_scripts', function() {\n    wp_enqueue_script(\n        'cycle2-slider-js', \n        get_template_directory_uri(). '\/assets\/js\/jquery.cycle2.min.js', \n        ['jquery'], \n        '', \n        true\n    );\n});<\/code><\/pre>\n
Toiseksi haluamme palata register_block_type()<\/code>funktiokutsuun. Kun k\u00e4sittelemme dynaamisia lohkoja, meid\u00e4n tulee ehdottomasti lis\u00e4t\u00e4 uusi argumentti; attributes<\/code>. T\u00e4ss\u00e4 argumentissa m\u00e4\u00e4rit\u00e4mme kaikki attribuutit, jotka olemme m\u00e4\u00e4ritt\u00e4neet registerBlockType<\/code>Javascriptiss\u00e4, mukaan lukien niiden oletusarvot. Jos emme tee niin, kaikki attribuutit eiv\u00e4t ole k\u00e4ytett\u00e4viss\u00e4 render\u00f6innin takaisinkutsussamme. Jos attribuutti j\u00e4tettiin muuttamatta lohkoeditorissa, attribuutti ja sen arvo eiv\u00e4t ole k\u00e4ytett\u00e4viss\u00e4 PHP:n attribuuttitaulukossa. Joten suosittelen, ett\u00e4 lis\u00e4\u00e4t aina attributes<\/code>taulukon PHP- register_block_type()<\/code>funktioon, kun ty\u00f6skentelet dynaamisten lohkojen kanssa. Meid\u00e4n lohkollemme se n\u00e4ytt\u00e4isi t\u00e4lt\u00e4:<\/p>\n
register_block_type('awp\/slider', [\n    'editor_script' => 'awp-block-slider-js',\n    'editor_style' => 'awp-block-slider-style',\n    'render_callback' => 'awp_gutenberg_slider_render',\n    'attributes' => [\n        'align' => ['type' => 'string', 'default' => 'center'],\n        'termId' => ['type' => 'number', 'default' => 0],\n        'numSlides' => ['type' => 'number', 'default' => 3]\n    ]\n]);<\/code><\/pre>\n
Nyt palaamme takaisinsoitto-render\u00f6intitoimintoomme awp_gutenberg_slider_render()<\/code>. Tulos on t\u00e4ysin sinun p\u00e4\u00e4tett\u00e4viss\u00e4si, varsinkin jos olet valinnut toisen liukus\u00e4\u00e4timen skriptin. Alla on yksinkertainen esimerkki.<\/p>\n
P\u00e4\u00e4ajatuksena on, ett\u00e4 tarkistamme, onko termi valittu vai ei ($attributes['termId']<\/code>). Jos se on t\u00e4ytetty, luomme [WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)()<\/code>argumenteilla viestien lukum\u00e4\u00e4r\u00e4lle ($attributes['numSlides']<\/code>) ja valitulle luokkatunnukselle. Sitten on luotava asianmukainen HTML-koodi, jotta cycle2 toimii, kierret\u00e4\u00e4n viestien yli ja n\u00e4ytet\u00e4\u00e4n niiden esittelykuvat dioina.<\/p>\n
function awp_gutenberg_slider_render($attributes, $content) {\n    if (empty($attributes['termId'])) {\n        return '';\n    }\n\u00a0\n    $postQuery = new WP_Query([\n        'posts_per_page' => $attributes['numSlides'],\n        'cat' => $attributes['termId']\n    ]);\n\u00a0\n    if ($postQuery->have_posts()) {\n        $output = '<div class=\"wp-block-awp-slider align'. $attributes['align']. '\">';\n        $output .= '<div class=\"cycle-slideshow\" data-cycle-timeout=4000>';\n        while ($postQuery->have_posts()) {\n            $postQuery->the_post();\n\u00a0\n            if (has_post_thumbnail()) {\n                $img_url = get_the_post_thumbnail_url(get_the_ID(), 'loop-thumbnail');\n                $output .= '<img src=\"'. $img_url. '\" \/>';\n            }\n        }\n        wp_reset_postdata();\n        $output .= '<\/div>';\n        $output .= '<\/div>';\n\u00a0\n        return $output;\n\u00a0\n    } else {\n        return '';\n    }\n}<\/code><\/pre>\n
Huomaa, kuinka lis\u00e4\u00e4n riville oikean lohkokohdistusluokan #12<\/code>. Tuloksena pit\u00e4isi olla esill\u00e4 olevien kuvien liukus\u00e4\u00e4din. Muista, ett\u00e4 t\u00e4m\u00e4 on perusesimerkki, jossa on joitain puutteita. Haemme esimerkiksi kolme viimeist\u00e4 viesti\u00e4 valitusta kategoriasta. Mutta jos yhdell\u00e4 niist\u00e4 ei ole esitelty\u00e4 kuvaa, liukus\u00e4\u00e4din n\u00e4ytt\u00e4\u00e4 vain kaksi viesti\u00e4.<\/p>\n
T\u00e4rke\u00e4\u00e4 muistaa on palauttaa merkkijono eik\u00e4 toistaa sit\u00e4. Suosittelen my\u00f6s jonkinlaisen mallitoiminnon k\u00e4ytt\u00e4mist\u00e4 teemassasi t\u00e4llaisiin dynaamisiin lohkorender\u00f6ityihin. Siit\u00e4 voi nopeasti tulla sotkuinen HTML:n korjaaminen ja rakentaminen merkkijonoksi.<\/p>\n
Viimeiset sanat<\/h2>\n
T\u00e4m\u00e4 opetusohjelma on osoittanut, kuinka voit luoda mukautetun dynaamisen WordPress Gutenberg -lohkon, jossa hahmonnat sen k\u00e4ytt\u00f6liittym\u00e4n sis\u00e4ll\u00f6n PHP:ss\u00e4. Ja olet n\u00e4hnyt kuinka k\u00e4ytt\u00e4\u00e4 korkeamman asteen komponenttia withSelect<\/code>kaikkien luokkatermien kyselyyn ja menetelm\u00e4n valita valittavissa oleva luettelo.<\/p>\n
Kaikki yll\u00e4 oleva koodi on kirjoitettu mahdollisimman yksinkertaisesti. Olen lis\u00e4nnyt vain ehdottoman v\u00e4himm\u00e4isasetukset. Liukus\u00e4\u00e4din toimii, mutta yleens\u00e4 haluat enemm\u00e4n \u2013 esimerkiksi tehd\u00e4 dioihin linkkej\u00e4, n\u00e4ytt\u00e4\u00e4 otsikoita viesteist\u00e4, liukus\u00e4\u00e4timen nuolia tai mahdollisuuden mukauttaa nopeutta tai muita liukus\u00e4\u00e4timen asetuksia. Ajatuksena on n\u00e4ytt\u00e4\u00e4 sinulle perusasiat ja tehd\u00e4 siit\u00e4 helppoa laajentaa, rakentaa ja muuttaa projektisi tarpeiden mukaan.<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Opetusohjelma dynaamisen WordPress Gutenberg -lohkon luomiseen withSelect- ja PHP-render\u00f6innill\u00e4. Lopputuloksena on liukus\u00e4\u00e4din.<\/p>\n","protected":false},"author":1,"featured_media":151907,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[895,719,938,938,719,895,813,1110,843,813,843,864,864],"tags":[1166],"class_list":["post-233847","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-koodi","category-kehittaejae","category-gutenberg-5","category-laajennuksia","category-n-a","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233847","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=233847"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233847\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/151907"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}