[add_filter](https:\/\/developer.wordpress.org\/reference\/functions\/add_filter\/)()<\/code>funktsioonile on meil Javascripti funktsioon [addFilter](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-hooks\/#api-usage)()<\/code>.<\/p>\nKirjutan koodi Javascript ES6 s\u00fcntaksis, mille teisendamiseks on vaja kompilaatorit. Saate kirjutada ES5 s\u00fcntaksis, kuid soovitan kasutada ES6\/ESNext. Mul on postitus, mis selgitab ES6\/ESNexti trafo seadistamist<\/a>. Samuti eeldan, et tunnete Reacti\/JSX-i, v\u00f5ib-olla on teil kogemusi, kuidas luua oma kohandatud Gutenbergi plokke<\/a>.<\/p>\nMida saate Gutenbergi plokkidel filtreerida<\/h2>\n
Saadaolevate Gutenbergi konksude ja filtrite hulgas pole palju dokumentatsiooni. Aga selleks, et lisada kohandatud s\u00e4tteid ja neid kuidagi olemasolevatele plokkidele rakendada; selle olen siiani leidnud. Olen keskendunud lihtsate s\u00e4tete lisamisele \u2013 mitte toimingutele, mis n\u00f5uavad komponentide drastilisi muudatusi v\u00f5i keerukat k\u00e4itumist.<\/p>\n
Olemasolevatele plokkidele kohandatud s\u00e4tete lisamiseks on kolm sammu:<\/p>\n
\n- Lisame olemasoleva ploki
[registerBlockType](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-registration\/#registerblocktype)<\/code>seadete massiivi filtri. See v\u00f5imaldab meil massiivile uusi atribuute lisada attributes<\/code>, v\u00f5imaldades seega plokki lisateavet salvestada. Peame oma kohandatud seaded kuhugi salvestama.<\/li>\n- Haakige ploki
edit<\/code>komponendi k\u00fclge (komponent, mis vastutab redaktoris ploki renderdamise eest). Selle konksuga saame haakuda inspektori (k\u00fcljeriba) k\u00fclge ja lisada oma komponente. Saame kas lisada uue jaotise\/paneeli v\u00f5i haakuda jaotisega "T\u00e4psemalt", mis on alati k\u00f5ikides plokkides olemas. Siis on meie teha seadistussisendeid, nagu tekstisisestus, m\u00e4rkeruudud v\u00f5i muu.<\/li>\n- Filtreerige ploki
save<\/code>rekvisiidid. Saame reguleerida salvestamise rekvisiite, mis vastutavad nii ploki salvestamise kui ka renderdamise eest (v\u00e4ljaspool redaktorit). Meie puhul tahame lisada klassi v\u00f5i tekstisisese stiili.<\/li>\n<\/ul>\nSaame sihtida konkreetseid plokke v\u00f5i k\u00f5iki. Meil on alati juurdep\u00e4\u00e4s sellele, millist t\u00fc\u00fcpi plokis me viibime.<\/p>\n
Teisis\u00f5nu \u00f6eldes: lisame Inspectoris m\u00f5ned kohandatud s\u00e4tted ja salvestame need kohandatud atribuutidesse, mille oleme plokki lisanud. Seej\u00e4rel saame m\u00f5jutada ploki klassi nime v\u00f5i tekstisisest stiili (m\u00f5nel juhul), olenevalt salvestatud atribuutidest. Kohandatud klassinimede abil saame h\u00f5lpsasti lisada kohandatud CSS-i, mis annab meie seadetele visuaalselt efekti.<\/p>\n
Mida me ei saa (praegu?)<\/h2>\n
Kahjuks on m\u00f5ned asjad, millele me olemasolevate plokkide filtritega juurde ei p\u00e4\u00e4se. Mis puudutab lihtsate kohandatud s\u00e4tete lisamist plokkidele, siis need on tavalised asjad, mida me m\u00f5jutada ei saa.<\/p>\n
Redaktoris pole juurdep\u00e4\u00e4su ploki tekstisisesele stiilile<\/h3>\n
Ploki kujundust m\u00f5jutavate s\u00e4tete puhul peame lisama ploki m\u00e4hkimiss\u00f5lmele tekstisisese stiili. Lihtsalt klassi nimi ei sobi. N\u00e4iteks kui lisate kohandatud v\u00e4rviseade ja kasutaja valib kohandatud v\u00e4rvi (v\u00e4rvivalija abil), ei saa te seda klassi lisamisega lahendada \u2013 vajate tekstisisese stiili.<\/p>\n
Kahjuks n\u00e4ib, et WordPressi vaikeplokid k\u00e4sitlevad redaktoris tekstisisest stiili t\u00e4iesti iseseisvalt, ilma filtreerimise v\u00f5i \u201ehaakimise" v\u00f5imaluseta. N\u00e4itan allpool viimases n\u00e4ites viisi, kuidas sellest m\u00f6\u00f6da minna, kuid see pole k\u00f5igil juhtudel ideaalne.<\/p>\n
V\u00f5ite k\u00fcsida, miks hoolite sellest, et plokk n\u00e4eb redaktoris v\u00e4lja erinevalt esik\u00fcljest? Kogu Gutenbergi m\u00f5te on rakendada visuaalset viisi sisu redigeerimiseks, kus see, mida n\u00e4eme, on tegelikult see, mida me saame. Soovime saavutada sama visuaalse v\u00e4limuse nii redaktoris kui ka kasutajaliideses.<\/p>\n
M\u00f5ned plokid ei sisalda redaktoris klassi nime<\/h3>\n
Nagu eespool mainitud, saame filtreerida ploki \u00fcmbrisklassi nime, kuna see on rekvisiit, mis edastatakse k\u00f5igile Gutenbergi plokkidele. Kuid kahjuks on m\u00f5ned plokid, mis ei rakenda ploki klassi edit<\/code>. \u00dcks n\u00e4ide on katteplokk. Olen palju m\u00e4nginud, kasutades kaaneplokke esilehtede "sektsioonidena", ja pidevalt tekib probleeme, kuna kaaneplokk loob oma klassi edit<\/code>. See j\u00e4tab t\u00e4ielikult vahele, kaasa arvatud ploki “globaalne” klass (millele on meil juurdep\u00e4\u00e4s filtrite kaudu).<\/p>\nKuid v\u00e4hemalt saame olla kindlad, et filtreeritud klassinimesid rakendatakse alati save<\/code>(frontendis). See juhtub automaatselt v\u00e4ljaspool iga ploki spetsiifilist koodi.<\/p>\nKui ma eksin m\u00f5ne \u00fclaltoodu suhtes, siis palun andke mulle allolevates kommentaarides teada! \u00d5pin pidevalt Gutenbergi ja samal ajal areneb ka Gutenberg. Loodan, et \u00fchel hetkel on \u00fclaltoodu \u00fchel hetkel v\u00f5imalik v\u00f5i et see on v\u00f5imalik, kuid mul on lihtsalt puudu oluline teave!<\/p>\n
Kui see on k\u00f5rvale j\u00e4\u00e4nud, hakkame m\u00f5nda koodi uurima.<\/p>\n
N\u00e4ide 1: lisage l\u00fclitusv\u00e4li, et peita mobiilis kaaneplokk<\/h2>\n
Oletame, et t\u00f6\u00f6tame v\u00e4lja teema, mille puhul kaaneplokke kasutatakse esilehel olevate jaotiste jaoks. Ja me tahame anda kasutajale v\u00f5imaluse teatud osa mobiili eest peita. Selle lahendamiseks saame kaaneploki inspektori jaotisesse "T\u00e4psemalt" lisada l\u00fclitusv\u00e4lja. Kui v\u00e4li on sisse l\u00fclitatud, saab kaaneplokk t\u00e4iendava kohandatud klassi, mida saame sihtida CSS-i ja meediap\u00e4ringute abil.<\/p>\n
Muide: see on juhtum, kus kaaneploki probleem, mis ei rakenda meie kohandatud klassinimesid redaktoris, on tegelikult kasuks! Kujutage ette, kui oleks; siis poleks kasutajal v\u00f5imalik plokki redigeerijas redigeerida, kui tal on v\u00e4ike ekraan!<\/p>\n
Nagu varem mainitud, peame kodeerima kolme sammu. Peame lisama ka PHP, et oma Javascripti fail redaktorisse j\u00e4rjekorda panna. Teeme seda k\u00f5igepealt.<\/p>\n
Meie skripti lisamine redaktorisse<\/h3>\n
Me \u00fchendame funktsiooni toimingu k\u00fclge [enqueue_block_editor_assets](https:\/\/developer.wordpress.org\/reference\/hooks\/enqueue_block_editor_assets\/)<\/code>. Oma funktsiooni sees paneme skripti j\u00e4rjekorda, nagu tavaliselt wp_enqueue_scripts<\/code>konksu puhul.<\/p>\nadd_action('enqueue_block_editor_assets', function() {\n wp_enqueue_script('awp-gutenberg-filters', get_template_directory_uri(). '\/assets\/js\/gutenberg-filters.js', ['wp-edit-post']);\n});<\/code><\/pre>\n\u00c4rge unustage kohandada teed sinna, kus teie skript asub! M\u00e4rkus. Kui kirjutate ES6-s ja Javascripti kompileerib veebipakett, \u00e4rge unustage m\u00e4\u00e4rata skripti j\u00e4rgu tee, mitte allika.<\/p>\n
Mulle meeldib lisada wp-edit-post<\/code>skriptile s\u00f5ltuvusena, et tagada selle laadimine piisavalt hilja.<\/p>\nSee on k\u00f5ik PHP, mida me tegema peame. \u00dclej\u00e4\u00e4nu on kirjutatud meie Javascripti faili.<\/p>\n
Lisage kohandatud atribuut<\/h3>\n
Esimene filter, mida kasutame, on see, blocks.registerBlockType<\/code>millise filtri registerBlockType<\/code>seadete objekt.<\/p>\nAga k\u00f5igepealt natuke Javascripti filtrite lisamisest. Kuna ma pole selle kohta \u00fchtegi head dokumentatsiooni leidnud, siis selgitan seda siin veidi. Funktsioon addFilter<\/code>asub wp.hooks<\/code>nimeruumis ja aktsepteerib nelja argumenti.<\/p>\naddFilter('hookName', 'namespace', 'functionName', 'priority');<\/code><\/p>\nEsimene parameeter ‘hookName’ on filtri nimi, mille k\u00fclge tahame \u00fchendada. See on samav\u00e4\u00e4rne esimese parameetriga PHP-de kasutamisel add_filter()<\/code>. Teine parameeter "nimeruum" on teie koodi kohandatud nimeruumi nimi. See on lihtsalt selleks, et v\u00e4ltida nimede kokkup\u00f5rkeid. Siin saate m\u00e4\u00e4rata peaaegu k\u00f5ike, mida soovite, lihtsalt \u00e4rge kasutage WordPressi nimeruumi (‘wp’). Kasutage oma nime v\u00f5i projekti nime l\u00fchivormi. Kolmas parameeter "functionName" on konksuga funktsioon \u2013 mis on sama mis PHP add_filter()<\/code>teine \u200b\u200bargument. Ja l\u00f5puks neljas parameeter "prioriteet" on valikuline. J\u00e4llegi, see on sama, mis PHP add_filter()<\/code>kolmas argument.<\/p>\nJavascripti filtrite protsess on sama, mis PHP-s. M\u00e4\u00e4ratleme funktsiooni, mis peab tagastama filtreeritud muutuja. M\u00f5nikord on muutujaks string, objekt v\u00f5i komponent. Funktsiooni sees muudame muutujat oma \u00e4ran\u00e4gemise j\u00e4rgi.<\/p>\n
Meie puhul tahame ploki attribute<\/code>objektile lisada uue atribuudi. Kutsume v\u00e4lja uue atribuudi hideOnMobile<\/code>ja m\u00e4\u00e4rame selle t\u00fc\u00fcbiks boolean<\/code>. Seda tehakse j\u00e4rgmiselt:<\/p>\nfunction addCoverAttribute(settings, name) {\n if (typeof settings.attributes !== 'undefined') {\n if (name == 'core\/cover') {\n settings.attributes = Object.assign(settings.attributes, {\n hideOnMobile: {\n type: 'boolean',\n }\n });\n }\n }\n return settings;\n}\n\u00a0\nwp.hooks.addFilter(\n 'blocks.registerBlockType',\n 'awp\/cover-custom-attribute',\n addCoverAttribute\n);<\/code><\/pre>\nReas sihime #3<\/code>kindlasti ainult plokke, mille t\u00fc\u00fcp on \u201e core\/cover<\/code>“. Teiseks blocks.registerBlockType<\/code>filtreerimisargumendiks piisab mugavalt ploki nimest. Seej\u00e4rel lisame objektile uue settings.attributes<\/code>objektielemendi. L\u00f5puks tagame kindlasti filtreeritud muutuja settings<\/code>.<\/p>\nPraegu ei ole Gutenbergis visuaalselt midagi muutunud. Kuid k\u00f5igil kaaneplokkidel on n\u00fc\u00fcd t\u00e4iendav atribuut, mida saame kasutada oma seadete salvestamiseks.<\/p>\n
Seade lisamine inspektorisse (t\u00e4psem paneel)<\/h3>\n
Teist filtrit kutsutakse editor.BlockEdit<\/code>ja see filtreerib ploki edit<\/code>komponendi. See filter v\u00f5tab vastu algse ploki BlockEdit<\/code>komponendi ja tagastab uue pakitud komponendi. wp.compose.createHigherOrderComponent<\/code>Pakitud komponendi tagastamiseks peame kasutama .<\/p>\nBlockEdit<\/code>Meie komponendi sees renderdame sellest hoolimata kindlasti pakitud komponendi. Kui aga plokk on t\u00fc\u00fcpi Cover, \u00fchendame me ka komponendi k\u00fclge InspectorAdvancedControls<\/code>(mis on Inspectori paneel Advanced) ja lisame ToggleControl<\/code>. Kirjutame, ToggleControl<\/code>et n\u00e4idata varem lisatud kohandatud atribuudi v\u00e4\u00e4rtust ja v\u00e4rskendada seda hideOnMobile<\/code>.<\/p>\nconst coverAdvancedControls = wp.compose.createHigherOrderComponent((BlockEdit) => {\n return (props) => {\n const { Fragment } = wp.element;\n const { ToggleControl } = wp.components;\n const { InspectorAdvancedControls } = wp.blockEditor;\n const { attributes, setAttributes, isSelected } = props;\n return (<Fragment>\n <BlockEdit {...props} \/>\n {isSelected && (props.name == 'core\/cover') && \n <InspectorAdvancedControls>\n <ToggleControl\n label={wp.i18n.__('Hide on mobile', 'awp')}\n checked={!!attributes.hideOnMobile}\n onChange={(newval) => setAttributes({ hideOnMobile: !attributes.hideOnMobile })}\n \/>\n <\/InspectorAdvancedControls>\n }\n <\/Fragment>\n );\n };\n}, 'coverAdvancedControls');\n\u00a0\nwp.hooks.addFilter(\n 'editor.BlockEdit',\n 'awp\/cover-advanced-control',\n coverAdvancedControls\n);<\/code><\/pre>\n\u00c4rge unustage alati originaali tagastada BlockEdit<\/code>, mida teeme real #9<\/code>. Real #10 kontrollime, kas ploki t\u00fc\u00fcp on Cover, ja renderdame InspectorAdvancedControls<\/code>komponendi. Siia sisse lisame ToggleControl<\/code>, mis on sisendi juhtelement, mis kuvatakse t\u00f5ese v\u00f5i vale vahel. M\u00e4\u00e4rame sildi ja \u00fchendame selle v\u00e4\u00e4rtuse hideOnMobile<\/code>atribuudiga. Kui olete varem Inspectori seadeid lisanud, peaks see olema teile \u00fcsna lihtne.<\/p>\n\u00dclaltoodud koodiga peaksime selle n\u00fc\u00fcd saama kaaneplokkide inspektori paneelil "T\u00e4psemalt":<\/p>\n
![\"Lisage](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152421-61e4d70271f5a.png\")
<\/a><\/p>\nSisend v\u00e4rskendab n\u00fc\u00fcd meie kohandatud atribuuti hideOnMobile<\/code>. Viimane samm on teha midagi s\u00f5ltuvalt selle atribuudi v\u00e4\u00e4rtusest. Praeguse seisuga on atribuut salvestatud, kuid see ei m\u00f5juta tegelikult midagi.<\/p>\nLisage kohandatud klass<\/h3>\n
Viimane samm on kohandatud klassi lisamine ploki klassi. Teeme seda filtriga blocks.getSaveContent.extraProps<\/code>. See filter m\u00f5jutab ploki save<\/code>komponendi tugipunkte. \u00dcks neist on prop className<\/code>, mida rakendatakse alati esiservas. Kui atribuut oli, lisame selle j\u00e4rele oma kohandatud klassi true<\/code>ja tagastame selle. Otsustasin lisada klassi \u201e hide-on-mobile<\/code>“, kuid v\u00f5ite seda nimetada kuidas iganes soovite.<\/p>\nfunction coverApplyExtraClass(extraProps, blockType, attributes) {\n const { hideOnMobile } = attributes;\n\u00a0\n if (typeof hideOnMobile !== 'undefined' && hideOnMobile) {\n extraProps.className = extraProps.className + ' hide-on-mobile';\n }\n return extraProps;\n}\n\u00a0\nwp.hooks.addFilter(\n 'blocks.getSaveContent.extraProps',\n 'awp\/cover-apply-class',\n coverApplyExtraClass\n);<\/code><\/pre>\nSee kood on \u00fcsna iseenesestm\u00f5istetav. Real #4<\/code>kontrollime, kas atribuut hideOnMobile<\/code>on olemas ja on true<\/code>. className<\/code>Kui jah, siis lisame stringile kohandatud klassi .<\/p>\nK\u00f5igi \u00fclaltoodud kolme filtriga peaksime n\u00fc\u00fcd saama kohandatud klassi \u201epeida mobiilis”, kui seade on sisse l\u00fclitatud, meie kaaneplokile rakendatud.<\/p>\n
![\"Lisage](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152421-61e4d70343817.png\")
<\/a><\/p>\nJ\u00e4\u00e4b \u00fcle vaid lisada oma teema kasutajaliidese stiililehele CSS-i. Midagi sellist;<\/p>\n
.wp-block-cover.hide-on-mobile { display: none; }\n@media (min-width: 480px) {\n .wp-block-cover.hide-on-mobile { display: block; }\n}<\/code><\/pre>\nN\u00e4ide 2: Lisage vaheploki jaoks kohandatud taustav\u00e4rvi s\u00e4ttega Inspektori paneel<\/h2>\n
Teisel kasutusjuhul tahame lisada v\u00e4liplokile kohandatud v\u00e4rvis\u00e4tteid. Vaikimisi pole spaceri plokil muid seadistusi peale selle k\u00f5rguse. Oletame, et tahame lisada taustav\u00e4rvi, mis v\u00e4rvib spaceri ploki t\u00e4isk\u00f5rguse. See v\u00f5imaldab kasutajal lisada sisu sisse t\u00fchje v\u00e4rvilisi triipe. Sel juhul tahame lisada v\u00e4rvis\u00e4tted Inspectori eraldi paneelile, nagu tavaliselt v\u00e4rvis\u00e4tete puhul oodatakse.<\/p>\n
M\u00e4rkus. V\u00e4rvide k\u00e4sitlemine on veidi keerulisem, kuna peame kasutama (muud) k\u00f5rgemat j\u00e4rku komponenti withColors<\/code>. Kuna me peame juba rakendama k\u00f5rgemat j\u00e4rku komponenti, editor.BlockEdit<\/code>peame kasutama compose<\/code>mitut komponenti. Lisaks peame iga v\u00e4rviseade jaoks lisama kaks atribuuti. \u00dcks sisaldab v\u00e4rvipaleti n\u00e4ppu ja teine \u200b\u200bhex-v\u00e4rvikoodi \u2013 ainult siis, kui kasutaja on valinud kohandatud v\u00e4rvi (kasutas v\u00e4rvivalijat). See k\u00f5ik on tavaline k\u00e4itumine rakendusega t\u00f6\u00f6tamisel withColors<\/code>. Mul on <a href="https:\/\/wordpress.mediadoma.com\/et\/kuidas-lisada-kohandatud-gutenbergi-plokki-vaervisaetteid\/" title="postitus, mis selgitab v\u00e4rviseadete lisamist ja withColors<\/code>\u00fcksikasjalikult,” >postitus, mis selgitab v\u00e4rviseadete lisamist ja withColors<\/code>\u00fcksikasjalikult,<\/a> kui j\u00e4\u00e4te segadusse.<\/p>\nTeiseks puutume sel juhul kokku \u00fclaltoodud probleemiga; kus me ei saa redaktorisse sobivat tekstisisest stiili lisada. Lahendus, mille olen sel juhul valinud, on m\u00e4hkida div<\/code>redaktoris spacer plokk a sisse ja rakendada m\u00e4histamisele \u00f5iged klassid ja tekstisisese stiili div<\/code>. See muudab valitud v\u00e4rvi redaktoris n\u00e4htavaks, kui plokk on t\u00fchistatud. Ploki valimisel lisab WordPress aga plokile oma kohandatud helehalli tausta, mis katab meie kohandatud taustav\u00e4rvi. \u00dcks CSS redaktorile parandab selle. L\u00f5pus selgitan t\u00e4psemalt.<\/p>\nToimingud on samad, mis \u00fclaltoodud n\u00e4ites. Esmalt paneme oma skripti PHP-redaktorisse j\u00e4rjekorda. Seej\u00e4rel filtreerime Javascriptis attributes<\/code>objekti, spaceri edit<\/code>komponendi ja l\u00f5puks spaceri save<\/code>komponendi.<\/p>\nMeie skripti lisamine redaktorisse<\/h3>\n
Me \u00fchendame funktsiooni toimingu k\u00fclge [enqueue_block_editor_assets](https:\/\/developer.wordpress.org\/reference\/hooks\/enqueue_block_editor_assets\/)<\/code>. Oma funktsiooni sees paneme skripti j\u00e4rjekorda, nagu tavaliselt wp_enqueue_scripts<\/code>konksu puhul.<\/p>\nadd_action('enqueue_block_editor_assets', function() {\n wp_enqueue_script('awp-gutenberg-filters', get_template_directory_uri(). '\/assets\/js\/gutenberg-filters.js', ['wp-edit-post']);\n});<\/code><\/pre>\n\u00c4rge unustage kohandada oma skripti teed. Mulle meeldib lisada wp-edit-post<\/code>skriptile s\u00f5ltuvusena, et tagada selle laadimine piisavalt hilja.<\/p>\nSee on k\u00f5ik PHP, mida me tegema peame. \u00dclej\u00e4\u00e4nu on kirjutatud meie Javascripti faili.<\/p>\n
Lisage kohandatud atribuudid<\/h3>\n
Nagu \u00fclaltoodud n\u00e4ites, lisame sisse filtri blocks.registerBlockType<\/code>, et lisada ploki attributes<\/code>objektile t\u00e4iendavaid objekte.<\/p>\nSellega t\u00f6\u00f6tades withColors<\/code>peame iga v\u00e4rvi jaoks lisama kaks atribuuti. Meie taustav\u00e4rvi atribuudi nimi on backgroundColor<\/code>, mis t\u00e4hendab, et teisele atribuudile tuleb anda nimi customBackgroundColor<\/code>. Seda k\u00f5ike selgitatakse minu postituses v\u00e4rviseadete k\u00e4sitlemise kohta Gutenbergis<\/a>. M\u00f5lemad peaksid olema stringi t\u00fc\u00fcpi ja neid tuleks rakendada ainult spacer t\u00fc\u00fcpi plokkidele.<\/p>\nfunction addSpacerAttributes(settings, name) {\n if (typeof settings.attributes !== 'undefined') {\n if (name == 'core\/spacer') {\n settings.attributes = Object.assign(settings.attributes, {\n backgroundColor: {\n type: 'string',\n },\n customBackgroundColor: {\n type: 'string'\n }\n });\n }\n }\n return settings;\n}\n\u00a0\nwp.hooks.addFilter(\n 'blocks.registerBlockType',\n 'awp\/spacer-background-attribute',\n addSpacerAttributes\n);<\/code><\/pre>\nLisage inspektorisse ColorSettings paneel<\/h3>\n
Teine samm on v\u00e4rviseadete paneeli lisamine ploki Inspector for the Spacer jaoks filtreerimise teel editor.BlockEdit<\/code>.<\/p>\nconst spacerInspectorControls = wp.compose.compose(\n wp.blockEditor.withColors({backgroundColor: 'background-color'}),\n\u00a0\n wp.compose.createHigherOrderComponent((BlockEdit) => {\n return (props) => {\n\u00a0\n if (props.name !== 'core\/spacer') {\n return(<BlockEdit {...props} \/>);\n }\n\u00a0\n const { Fragment } = wp.element;\n const { InspectorControls, PanelColorSettings } = wp.blockEditor;\n const { attributes, setAttributes, isSelected } = props;\n const { backgroundColor, setBackgroundColor } = props;\n\u00a0\n let newClassName = (attributes.className != undefined)? attributes.className: '';\n let newStyles = {...props.style};\n if (backgroundColor != undefined) {\n if (backgroundColor.class == undefined) {\n newStyles.backgroundColor = backgroundColor.color;\n } else {\n newClassName += ' ' + backgroundColor.class;\n }\n }\n const newProps = {\n ...props,\n attributes: {\n ...attributes,\n className: newClassName\n },\n style: newStyles\n }\n\u00a0\n return (<Fragment>\n <div style={newStyles} className={newClassName}>\n <BlockEdit {...newProps} \/>\n {isSelected && (props.name == 'core\/spacer') && \n <InspectorControls>\n <PanelColorSettings \n title={wp.i18n.__('Color Settings', 'awp')}\n colorSettings={[\n {\n value: backgroundColor.color,\n onChange: setBackgroundColor,\n label: wp.i18n.__('Background color', 'awp')\n }\n ]}\n \/>\n <\/InspectorControls>\n }\n <\/div>\n <\/Fragment>\n );\n };\n}, 'spacerInspectorControls'));\n\u00a0\nwp.hooks.addFilter(\n 'editor.BlockEdit',\n 'awp\/spacer-inspector-control',\n spacerInspectorControls\n);<\/code><\/pre>\nPeame kasutama compose<\/code>, et kombineerida sellest filtrist tagastatud k\u00f5rgemat j\u00e4rku komponenti ja withColors<\/code>. Teisis\u00f5nu m\u00e4hkime tagastatud komponendi lihtsalt withColors<\/code>. Parameetrina withColors<\/code>anname oma atribuudi backgroundColor<\/code>.<\/p>\nPakitud komponendi sees tagame alati tagasituleku BlockEdit<\/code>(joon #9<\/code>ja #39<\/code>vaheplokkide puhul). Spaceri t\u00fc\u00fcpi plokkide puhul \u00fchendame ka selle k\u00fclge InspectorControls<\/code>, et lisada PanelColorSettings<\/code>oma v\u00e4rvivaliku jaoks a. See on v\u00e4rviseadete lisamise standardprotseduur.<\/p>\nReal #17 - 34<\/code>genereerime k\u00e4sitsi vajaliku klassi ja\/v\u00f5i tekstisisese stiili. Seej\u00e4rel #38<\/code>lisame reale BlockEdit<\/code>nende klasside ja tekstisiseste stiilidega \u00fcmbrislause.<\/p>\nTulemuseks on Inspector for Spacer blocks uus v\u00e4rviseadete paneel, mis on t\u00e4iesti t\u00f6\u00f6korras.<\/p>\n
![\"Lisage](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152421-61e4d7041a66b.png\")
<\/a><\/p>\n![\"Lisage](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152421-61e4d7052e0c9.gif\")
<\/a><\/p>\n