{"id":233835,"date":"2023-02-23T18:01:00","date_gmt":"2023-02-23T15:01:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233835"},"modified":"2023-02-23T18:05:44","modified_gmt":"2023-02-23T15:05:44","slug":"opetus-looge-liugur-duenaamilise-gutenbergi-plokina","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/opetus-looge-liugur-duenaamilise-gutenbergi-plokina\/","title":{"rendered":"\u00d5petus: looge liugur d\u00fcnaamilise Gutenbergi plokina"},"content":{"rendered":"\n

Selles \u00f5petuses k\u00e4sitletakse d\u00fcnaamilise WordPressi Gutenbergi ploki loomist. L\u00f5pptulemus on liugur, mis n\u00e4itab valitud kategooria postituste esilet\u00f5stetud pilti. Kood h\u00f5lmab k\u00f5rgema j\u00e4rgu komponendi (withSelect<\/code>) kasutamist k\u00f5igi kategooriate toomiseks plokiredaktoris.<\/p>\n

Mida me teeme<\/h2>\n

Plokk renderdab lihtsa liuguri, kasutades skripti jQuery Cycle2<\/a>. Kuid v\u00f5ite kasutada mis tahes muud liuguri skripti. Plokk kuvab redaktoris k\u00f5igi kategooriate loendi, mis v\u00f5imaldab kasutajal valida \u00fche kategooria. Kui kuvate ploki kasutajaliideses, toob see d\u00fcnaamiliselt postitusi valitud kategooriast ja kuvab nende esilet\u00f5stetud pilte slaididena. See \u00f5petus muudab selle \u00fcsna lihtsaks, v\u00f5imaldades teil liugurit vastavalt soovile laiendada ja reguleerida.<\/p>\n

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.<\/p>\n

Plokis on ainult kaks seadet; kategooria valik ja slaidide (postituste) arv. Soovitan lisada rohkem s\u00e4tteid, nagu slaidikiirus, pillide kuvamise s\u00e4tted, nooled, tekst ja muud t\u00fc\u00fcpilised liuguri s\u00e4tted. Nende seadete ise lisamine peaks olema \u00fcsna lihtne.<\/p>\n

Kogu kood on kirjutatud Javascript ES6 \/ ES2015+. Pidage meeles, et see kood vajab l\u00f5plike Javascripti failide teisendamiseks ja koostamiseks Babelit. Kui te ei tea, kuidas seda teha, vaadake allolevat juhendit.<\/p>\n

Seadistage failid<\/h2>\n

Selles n\u00e4ites loome ploki teema sees. Teemakaustas on mul alamkaust ‘ gutenberg\/<\/code>‘, kuhu olen paigutanud oma package.json<\/code>ja webpack-config.js<\/code>. Selle kausta alamkaustas " src\/<\/code>" paigutan k\u00f5ik oma ehitusfailid. Minu veebipaketi konfiguratsioon on seadistatud paigutama ehitusfailid minu teema alamkausta " assets\/js\/<\/code>".<\/p>\n

Looge uus t\u00fchi l\u00e4htefail theme-folder\/gutenberg\/src\/block-slider.js<\/code>ja seadistage Webpack, et luua ehitusfail asukohta theme-folder\/assets\/js\/block-slider.js<\/code>. Saate asukohti ja\/v\u00f5i failinimesid vastavalt soovile muuta, lihtsalt \u00e4rge unustage allolevat koodi kohandada.<\/p>\n

Samuti peame alla laadima vajaliku liuguri skripti. Cycle2 saate alla laadida sellelt lingilt<\/a> v\u00f5i kasutada m\u00f5nda muud slaidiskripti ja kohandada allolevat koodi. Asetan jquery.cycle2.min.js<\/code>faili oma teemakausta \/assets\/js\/<\/code>kausta.<\/p>\n

Valmistan ette ka v\u00e4ikese CSS-faili, mis laaditakse ainult redaktorisse. Teeme vaid v\u00e4ikese stiilit\u00fcki, et kategooria oleks optimaalne. Loon t\u00fchja faili editor-block-slider.css<\/code>ja asetan selle kausta theme-folder\/assets\/css\/<\/code>.<\/p>\n

L\u00f5puks l\u00e4heme teemasse laaditud PHP-faili juurde. Lihtsuse huvides teen PHP osa teemas functions.php<\/code>.<\/p>\n

Registreerige Gutenbergi plokk PHP-s<\/h2>\n

K\u00f5ik Gutenbergi plokid peavad olema registreeritud aadressil [register_block_type](https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/)()<\/code>. Eelistan seda nimetada funktsiooni sees, mis on \u00fchendatud init<\/code>. Esimene parameeter on teie ploki nimi, sealhulgas nimeruum. Otsustasin kutsuda oma liuguri skripti awp\/slider<\/code>(reguleerige nii, nagu soovite). Teine argument on argumentide hulk.<\/p>\n

Sama funktsiooni raames registreerin koostamise skripti rakendusega [wp_register_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_register_script\/)()<\/code>ja oma redaktori CSS-faili [wp_register_style](https:\/\/developer.wordpress.org\/reference\/functions\/wp_register_style\/)()<\/code>. M\u00f5lemad k\u00e4epidemed lisatakse argumentidena vastavalt parameetritele " editor_script<\/code>" ja " editor_style<\/code>". S\u00f5ltuvuste osas olen lisanud skripti jaoks m\u00f5ned k\u00f5ige elementaarsemad paketid, et tagada meie plokiskripti \u00f5iges j\u00e4rjekorras laadimine. Mis puutub redaktori stiili, siis on ‘ wp-edit-blocks<\/code>‘ kasutamine hea s\u00f5ltuvus, et v\u00e4ltida stiilide \u00fclekirjutamist.<\/p>\n

Ja l\u00f5puks, kuna see on d\u00fcnaamiline plokk, peame lisama ka render_callback<\/code>argumendi " ", osutades funktsioonile, mis vastutab ploki esiotsas renderdamise eest.<\/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
L\u00f5puks m\u00e4\u00e4ratleme renderdusfunktsiooni. Funktsiooni tagasihelistamisele saame kaks parameetrit; ploki atribuutide massiiv ja sisemine sisu (selles plokis ei kasutata). Ma lihtsalt tagastan m\u00f5ne n\u00e4ivn\u00f6\u00f6ri. Tuleme tagasi ja t\u00e4psustame renderdusfunktsiooni hiljem. \u00c4rge unustage tagastada stringi, mitte kaja.<\/p>\n
function awp_gutenberg_slider_render($attributes, $content) {\n    return 'Slider render comes here.';\n}<\/code><\/pre>\n
Tuleme PHP renderdamisfunktsiooni juurde tagasi selle \u00f5petuse l\u00f5pus. N\u00fc\u00fcd on aeg liikuda edasi Javascripti juurde!<\/p>\n
Registreerige kohandatud Gutenbergi plokk Javascriptis<\/h2>\n
Avame oma block-slider.js<\/code>l\u00e4htefaili. Siinkohal k\u00e4ivitan skripti (npm run start<\/code>), et muuta k\u00f5ik, mida me selles failis teeme, ehitusfailiks. Peame ploki registreerima, kasutades [registerBlockType](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-registration\/)()<\/code>. K\u00f5igi v\u00f5imalike argumentide n\u00e4gemiseks vaadake linki.<\/p>\n
Nagu PHP-s otsustasime, register_block_type()<\/code>on meie ploki nimi awp\/slider<\/code>. Nagu eelnevalt mainitud, tahame plokile lisada ka kaks atribuuti: \u00fche valitud termini ID ja teise slaidide arvu jaoks.<\/p>\n
Mulle meeldib lisada ka plokkide joondamise funktsionaalsus. See lisatakse automaatselt, lisades objektile " align<\/code>". supports<\/code>Kui soovite k\u00f5iki plokkide joondusi, v\u00f5ite lihtsalt m\u00e4\u00e4rata align<\/code>v\u00e4\u00e4rtusele T\u00f5ene. Kuid vasakule v\u00f5i paremale joondatud liuguril pole erilist m\u00f5tet, nii et ma m\u00e4\u00e4ratlen konkreetsed plokkide joondamise t\u00fc\u00fcbid, mida see plokk toetab: "Joonda keskele" (‘ center<\/code>‘), "Lai laius" (‘ wide<\/code>‘) ja " T\u00e4islaius" (‘ full<\/code>‘). Samuti lisan align<\/code>meie plokki atribuudina atribuudi ‘ ‘, et m\u00e4\u00e4rata vaikimisi joondus ja muuta see PHP-st k\u00e4ttesaadavaks.<\/p>\n
Seadsin ploki edit<\/code>argumendi eraldi komponendiks, mille me j\u00e4rgmisena loome. Ja l\u00f5puks save<\/code>tagastab funktsioon lihtsalt null<\/code>, sest see on d\u00fcnaamiline plokk.<\/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
Peame m\u00e4\u00e4ratlema edit<\/code>atribuudi komponendi. Enne registreerimiskoodi defineerin funktsiooni komponendi BlockEdit<\/code>, mis lihtsalt renderdab a div<\/code>ja a Placeholder<\/code>koos n\u00e4iva tekstiga.<\/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 kena komponent ala renderdamiseks s\u00e4tete jaoks \u2013 ja mitte tingimata ploki tegelikuks renderdamiseks. Komponendi sees Placeholder<\/code>renderdame terminite loendi, mille hulgast valida.<\/p>\n
Praegu peaks meie plokk olema WordPressis Gutenbergis saadaval! Loome uue postituse, lisame uue ploki ja leiame oma ploki jaotisest \u00dchine. Meie plokk n\u00e4eb praegu v\u00e4lja selline:<\/p>\n
\"\u00d5petus:<\/a>\"\u00d5petus:<\/a><\/p>\n
Inspektori s\u00e4tete lisamine<\/h2>\n
Lisame Inspectorile (redaktori parempoolsele k\u00fclgribale) m\u00f5ned s\u00e4tted. Nagu mainitud, on meie plokil ainult \u00fcks seadistus; slaidide arv. Siin soovitan teil lisada liuguriploki jaoks rohkem s\u00e4tteid. \u00c4rge unustage registreerida atribuudid iga lisatava s\u00e4tte jaoks.<\/p>\n
Inspektorile millegi lisamiseks kasutame komponenti [InspectorControls](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/block-editor\/src\/components\/inspector-controls)<\/code>( wp.blockEditor<\/code>). Sees renderdame uue kokkupandava jaotise lisamiseks [PanelBody](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/panel#panelbody)<\/code>( ). wp.components<\/code>Seej\u00e4rel renderdame lihtsalt [RangeControl](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/range-control)<\/code>( wp.components<\/code>), et luua sisendseade slaidide arvu valimiseks. Seame miinimumi 1 ja maksimumi 10. \u00dchendame atribuudiga value<\/code>ja onChange<\/code>s\u00fcndmuse 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
\u00dclaltoodud koodiga peaksime n\u00fc\u00fcd saama kena jaotise vahemiku liuguriga slaidide arvu m\u00e4\u00e4ramiseks.<\/p>\n
\"\u00d5petus:<\/a><\/p>\n
J\u00e4llegi soovitan teil liugurile seadete lisamisega m\u00e4ngida. J\u00e4rgmine samm on elemendi loomine kategooriate loendi renderdamiseks, mille hulgast valida.<\/p>\n
Kategooria valimise komponendi loomine<\/h2>\n
Et meie kood oleks korras ja korduvkasutatav, loome kategooriavalija komponendi eraldi failis. Ehitamise kaustas loon uue faili awp-category-picker.js<\/code>.<\/p>\n
Selles failis m\u00e4\u00e4ratleme komponendi, mis liigub l\u00e4bi k\u00f5igi WordPressi praeguste kategooriate ja renderdab need mingil viisil. Kategooriate saamiseks peame selle pakkima nn k\u00f5rgema j\u00e4rgu komponendi sisse, mis varustab meie komponenti rekvisiitide kaudu vajalikuga. Selleks kasutame [withSelect](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#withSelect)<\/code>. Sees withSelect<\/code>saame esitada taotluse k\u00f5igi WordPressi kategooriate toomiseks, kasutades poevalijat [select](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#select)()<\/code>. Saame kasutada:<\/p>\n
select('core').getEntityRecords('taxonomy', '<category_slug>', <args>)<\/code><\/pre>\n
et tuua k\u00f5ik terminid pakutud taksonoomia n\u00e4lkjas. Kui te ei tunne WordPress Gutenbergi k\u00f5rgema j\u00e4rgu komponente ja selektoreid, on mul postitus, mis selgitab seda kontseptsiooni \u00fcksikasjalikumalt: Kohandatud Gutenbergi ploki loomine \u2013 10. osa: Postituste ja k\u00f5rgema j\u00e4rgu komponentide toomine<\/a>.<\/p>\n
Kuna peame sellest failist komponendi eksportima, asetame avalduse kombinatsiooni withSelect<\/code>ja meie m\u00e4\u00e4ratletud komponendi export default<\/code>. Meie CategorySelect<\/code>komponent lihtsalt tagastab div koos n\u00e4iva tekstiga, et saaksime n\u00e4ha, et see t\u00f6\u00f6tab. withSelect<\/code>Peaks andma prop " terms<\/code>" CategorySelect<\/code>. Lisasin console.log()<\/code>sellele rekvisiidile lisa, et saaksime n\u00e4ha, kas see t\u00f6\u00f6tab.<\/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
Viimane asi, mida peame tegema, on tegelikult importida ja kasutada seda kategooria valija komponenti meie kohandatud plokis.<\/p>\n
Tagasi sisse block-slider.js<\/code>peame esmalt importima faili \u00fclaosas oleva komponendi. Ja meie Placeholder<\/code>komponendi sees muudame komponendi lihtsalt v\u00e4lja.<\/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
\u00dclaltoodud koodiga peaks teie plokk n\u00fc\u00fcd renderdama CategorySelect<\/code>komponendi div. Kui avate oma brauseris konsooli, peaksite n\u00e4gema ka m\u00f5ningaid logisid. Pidage meeles, et withSelect<\/code>see on as\u00fcnkrooniline p\u00e4ring, mis t\u00e4hendab, et seda v\u00f5idakse renderdada mitu korda. Esimest korda on rekvisiidi terminid null<\/code>. Kuid viimane (viimased logid) peaks l\u00f5ppema kategooriaterminite massiiviga.<\/p>\n
Suurep\u00e4rane! J\u00e4tkame oma CategorySelect<\/code>komponendiga t\u00f6\u00f6d ja paneme selle reaalselt renderdama terminite loendi, mis v\u00f5imaldab kasutajal \u00fche valida!<\/p>\n
Terminite loendi renderdamine, mille hulgast valida<\/h3>\n
Valikute loendi renderdamiseks, kus kasutaja saab valida \u00fche \u00fcksuse, on palju v\u00f5imalusi. Kui soovite midagi v\u00e4ga lihtsat, v\u00f5ite renderdada tavalise valiku rippmen\u00fc\u00fc ([SelectControl](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/select-control)<\/code>). See on t\u00e4iesti sinu otsustada. Olen valinud puhtama ja kenama l\u00e4henemisviisi, kasutades [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
Komponendi sees MenuGroup<\/code>peame props.terms<\/code>massiivi l\u00e4bima ja iga \u00fcksuse jaoks tahame kuvada MenuItem<\/code>komponendi, mis renderdab termini nime. Ja loomulikult tahame seda renderdada ainult siis, kui props.terms<\/code>see sisaldab midagi (as\u00fcnkroonimistaotlus, m\u00e4letate?).<\/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
Andsin MenuGroup<\/code>komponendile kohandatud klassi, kuna peame selle sihtima CSS-iga. Ja ma olen seadnud rekvisiidi olekusse role<\/code>" MenuItem<\/code>" menuitemradio<\/code>, et olla kindel, et korraga saab valida ainult \u00fche. Vaikimisi t\u00f6\u00f6tavad need m\u00e4rkeruutudena, v\u00f5imaldades seega valida mitu \u00fcksust.<\/p>\n
\u00dclaltoodud koodiga peaks meie plokk n\u00fc\u00fcd (v\u00e4ikese sekundi p\u00e4rast) esitama kena loendi k\u00f5igist teie WordPressi eksemplari kategooriatest.<\/p>\n
V\u00f5ite m\u00e4rgata, et meie plokk laieneb, et see h\u00f5lmaks k\u00f5iki kategooriaid. Kui oleme WordPressi eksemplaris, kus on palju kategooriaid, muutub see kiiresti probleemiks. Tahame veenduda, et valija on maksimaalse k\u00f5rgusega konteiner, mis saab vertikaalse kerimisriba, kui kategooriaid on palju. See on koht, kus meie CSS-fail siseneb.<\/p>\n
Lisage meie editor-block-slider.css<\/code>faili:<\/p>\n
.awp-categoryselect div {\n    max-height: 200px;\n    overflow: hidden scroll;\n    border: 1px solid #b3bcc0;\n}<\/code><\/pre>\n
See CSS sihib div<\/code>meie sisemust MenuGroup<\/code>ja tagab, et see ei \u00fcletaks kunagi 200 pikslit. Kui sisu MenuGroup<\/code>muutub suuremaks (rohkem kategooriaid), kuvatakse vertikaalne kerimisriba. See on meie ploki jaoks CSS-i miinimum, kuid loomulikult saate soovi korral lisada rohkem CSS-i.<\/p>\n
Viimane asi, mida peame oma kategooriavalijas parandama, on funktsioon, mis n\u00e4itab praegu valitud \u00fcksust ja v\u00f5imaldab kasutajal valida loendist termini. Selleks peame oma plokist sellele komponendile edastama m\u00f5ned rekvisiidid.<\/p>\n
block-slider.js<\/code>Peame edastama praeguse valitud termini (atribuudi v\u00e4\u00e4rtus) termId<\/code>ja funktsiooni valitud termini v\u00e4rskendamiseks (setAttributes<\/code>) meie kategooriavalija komponendi rekvisiidina.<\/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
\u00dclaltoodud koodi real #6<\/code>m\u00e4\u00e4ratleme funktsiooni, mis lihtsalt v\u00e4rskendab atribuuti termId<\/code>. Anname selle funktsiooni nime propina edasi CategorySelect<\/code>reale #17<\/code>. Ja real #16<\/code>me edastame praeguse v\u00e4\u00e4rtuse termId<\/code>. Sellega saame v\u00e4rskendada oma CategorySelect<\/code>komponenti, et see kajastaks valitud \u00fcksust, ja v\u00f5imaldada kasutajal terminit tegelikult valida.<\/p>\n
Tagasi awp-category-picker.js<\/code>lisame lehele m\u00f5ned uued rekvisiidid MenuItem<\/code>. Tagastame true<\/code>v\u00f5i false<\/code>rekvisiidi jaoks, isSelected<\/code>kas praegune termin ID on sama, mis praegu valitud. selectTerm<\/code>Funktsiooni k\u00e4ivitame s\u00fcndmuses onClick<\/code>, edastades m\u00f5iste ID. Ja selleks, et valitud \u00fcksus oleks visuaalne, lisame iga \u00fcksuse ette tingimuslikult ikooni.<\/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
Sellega peaks meie kategooriavalija v\u00e4lja n\u00e4gema j\u00e4rgmine:<\/p>\n
\"\u00d5petus:<\/a><\/p>\n
Loendis tuleks valitud termin selgelt m\u00e4rgistada linnukese ikooniga ja selle asemel v\u00f5ite kl\u00f5psata mis tahes terminil.<\/p>\n
See oli toimetaja ja Javascripti osa jaoks k\u00f5ik! N\u00fc\u00fcd j\u00e4\u00e4b alles eesmise renderdus, mida teeme PHP-s.<\/p>\n
Renderdage d\u00fcnaamiline plokk PHP-s<\/h2>\n
Enne renderdusfunktsiooni sukeldumist hoolitseme k\u00f5igepealt m\u00f5ne asja eest.<\/p>\n
K\u00f5igepealt peame j\u00e4rjekorda seadma skripti cycle2 esiservas, et meie liuguri kood muutuks tegelikult liuguriks. Teeme seda lihtsa funktsiooniga, mis on \u00fchendatud wp_enqueue_scripts<\/code>. Kui valisite m\u00f5ne muu liuguri skripti, kohandage allolevat valikut.<\/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
Teiseks tahame naasta register_block_type()<\/code>funktsioonikutse juurde. D\u00fcnaamiliste plokkide k\u00e4sitlemisel peaksime kindlasti lisama uue argumendi; attributes<\/code>. Selles argumendis m\u00e4\u00e4ratleme k\u00f5ik atribuudid, mille oleme registerBlockType<\/code>Javascriptis m\u00e4\u00e4ratlenud, sealhulgas nende vaikev\u00e4\u00e4rtused. Kui me seda ei tee, ei ole k\u00f5ik atribuudid meie renderdamise tagasihelistamisel saadaval. Kui atribuut j\u00e4eti plokiredaktoris muutmata, ei ole atribuut ja selle v\u00e4\u00e4rtus PHP atribuutide massiivis saadaval. Seega soovitan teil d\u00fcnaamiliste plokkidega t\u00f6\u00f6tades alati lisada attributes<\/code>massiiv PHP register_block_type()<\/code>funktsioonile. Meie ploki jaoks n\u00e4eks see v\u00e4lja j\u00e4rgmine:<\/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
N\u00fc\u00fcd p\u00f6\u00f6rdume tagasi tagasihelistamisfunktsiooni juurde awp_gutenberg_slider_render()<\/code>. V\u00e4ljund on t\u00e4ielikult teie enda otsustada, eriti kui olete valinud m\u00f5ne muu liuguri skripti kasutamise. Allpool on lihtne n\u00e4ide.<\/p>\n
P\u00f5hiidee seisneb selles, et kontrollime, kas termin on valitud v\u00f5i mitte ($attributes['termId']<\/code>). Kui see on t\u00e4idetud, loome [WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)()<\/code>argumentidega postituste arvu ($attributes['numSlides']<\/code>) ja valitud kategooria ID. Seej\u00e4rel tuleb luua \u00f5ige HTML, et ts\u00fckkel2 t\u00f6\u00f6taks, postitused \u00fcle k\u00e4ia ja nende esiletoodud pildid slaididena kuvada.<\/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
Pange t\u00e4hele, kuidas ma lisan reale \u00f5ige ploki joondusklassi #12<\/code>. Tulemuseks peaks olema esiletoodud piltide liugur. Pidage meeles, et see on p\u00f5hin\u00e4ide, millel on m\u00f5ned vead. N\u00e4iteks toome valitud kategooriast kolm viimast postitust. Kuid eeldades, et \u00fchel neist pole esiletoodud pilti, kuvab liugur ainult kahte postitust.<\/p>\n
Oluline on meeles pidada, et string tuleb tagastada ja seda mitte korrata. Samuti soovitan selliste d\u00fcnaamiliste plokkide renderdamiste jaoks oma teemas kasutada m\u00f5nda mallifunktsiooni. HTML-i stringina parandamine ja koostamine v\u00f5ib kiiresti muutuda segaseks.<\/p>\n
L\u00f5pus\u00f5nad<\/h2>\n
See \u00f5petus on n\u00e4idanud, kuidas luua kohandatud d\u00fcnaamiline WordPress Gutenbergi plokk, kus renderdate selle esiserva sisu PHP-s. Ja olete n\u00e4inud, kuidas kasutada k\u00f5rgema j\u00e4rgu komponenti withSelect<\/code>k\u00f5igi kategooriaterminite p\u00e4ringute tegemiseks ja meetodit valitava loendi kuvamiseks.<\/p>\n
K\u00f5ik \u00fclaltoodud kood on kirjutatud nii lihtsalt kui v\u00f5imalik. Lisasin ainult absoluutse miinimumi seadistusi. Liugur t\u00f6\u00f6tab, kuid tavaliselt soovite rohkemat \u2013 n\u00e4iteks slaidide linkide loomine, postituste pealkirjade kuvamine, liuguri nooled v\u00f5i kiiruse v\u00f5i muude liuguri s\u00e4tete kohandamise v\u00f5imalus. Idee on n\u00e4idata teile p\u00f5hit\u00f5desid ja h\u00f5lbustada teie projekti laiendamist, edasi arendamist ja muutmist vastavalt oma projekti vajadustele.<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
\u00d5petus, kuidas luua d\u00fcnaamilist WordPressi Gutenbergi plokki withSelecti ja PHP renderdusega. L\u00f5pptulemus on liugur.<\/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":[718,894,718,937,937,894,1110,842,812,812,842,863,863],"tags":[1165],"class_list":{"0":"post-233835","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-arendaja","8":"category-kood","10":"category-gutenberg-4","13":"category-n-a","14":"category-opetused","15":"category-pistikprogrammid","18":"category-wordpress-4","20":"tag-affiai-et"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233835","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=233835"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233835\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/151907"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=233835"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=233835"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=233835"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}