[add_filter](https:\/\/developer.wordpress.org\/reference\/functions\/add_filter\/)()<\/code>funktion har vi Javascript-funktionen [addFilter](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-hooks\/#api-usage)()<\/code>.<\/p>\nJag kommer att skriva koden i Javascript ES6-syntax, vilket kr\u00e4ver en kompilator f\u00f6r att transformera den. Du kan skriva i ES5-syntax men jag rekommenderar att du g\u00e5r f\u00f6r ES6\/ESNext. Jag har ett inl\u00e4gg som f\u00f6rklarar hur man st\u00e4ller in en transformator f\u00f6r ES6\/ESNext<\/a>. Jag antar ocks\u00e5 att du har en viss f\u00f6rtrogenhet med React\/JSX, m\u00f6jligen viss erfarenhet av hur du skapar dina egna anpassade Gutenberg-block<\/a>.<\/p>\nVad du kan filtrera p\u00e5 Gutenberg-block<\/h2>\n
Det finns inte mycket dokumentation i tillg\u00e4ngliga Gutenberg-krokar och filter. Men i syfte att l\u00e4gga till anpassade inst\u00e4llningar och p\u00e5 n\u00e5got s\u00e4tt till\u00e4mpa dem p\u00e5 befintliga block; det h\u00e4r \u00e4r vad jag har hittat hittills. Jag har fokuserat p\u00e5 att l\u00e4gga till enkla inst\u00e4llningar \u2013 inte operationer som kr\u00e4ver drastiska komponent\u00e4ndringar eller komplext beteende.<\/p>\n
Det finns tre steg f\u00f6r att l\u00e4gga till anpassade inst\u00e4llningar till befintliga block:<\/p>\n
\n- Vi l\u00e4gger till ett filter p\u00e5 befintliga blocks
[registerBlockType](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-registration\/#registerblocktype)<\/code>inst\u00e4llningar. Detta till\u00e5ter oss att l\u00e4gga till nya attribut till attributes<\/code>arrayen, vilket g\u00f6r att vi kan spara ytterligare information i blocket. Vi m\u00e5ste spara v\u00e5r anpassade inst\u00e4llning n\u00e5gonstans.<\/li>\n- Haka fast p\u00e5 blockets
edit<\/code>komponent (komponenten som ansvarar f\u00f6r att rendera blocket i editorn). I denna krok kan vi haka p\u00e5 Inspector (sidof\u00e4ltet) och l\u00e4gga till v\u00e5ra egna komponenter. Vi kan antingen l\u00e4gga till en ny sektion\/panel, eller s\u00e5 kan vi haka p\u00e5 avsnittet "Avancerat" som alltid finns i alla block. Sedan \u00e4r det upp till oss att rendera inst\u00e4llningsing\u00e5ngar, s\u00e5som textinmatningar, kryssrutor eller vad som helst.<\/li>\n- Filtrera blockets
save<\/code>rekvisita. Vi kan justera rekvisitan f\u00f6r spara, som \u00e4r ansvarig f\u00f6r att b\u00e5de spara blocket och rendera det i frontend (utanf\u00f6r editorn). I v\u00e5rt fall vill vi l\u00e4gga till en klass eller inline-stil.<\/li>\n<\/ul>\nVi kan rikta in oss p\u00e5 specifika block eller rikta in oss p\u00e5 alla. Vi har alltid tillg\u00e5ng till vilken typ av block vi befinner oss p\u00e5.<\/p>\n
F\u00f6r att s\u00e4ga det med andra ord: Vi l\u00e4gger till n\u00e5gra anpassade inst\u00e4llningar i Inspector och sparar det i anpassade attribut som vi har lagt till i blocket. Vi kan sedan p\u00e5verka blockets klassnamn eller inline-stil (i vissa fall), beroende p\u00e5 de sparade attributen. Med de anpassade klassnamnen kan vi enkelt l\u00e4gga till anpassad CSS som visuellt ger v\u00e5ra inst\u00e4llningar en effekt.<\/p>\n
Vad kan vi inte g\u00f6ra (f\u00f6r nu?)<\/h2>\n
Tyv\u00e4rr finns det vissa saker vi inte kan komma \u00e5t med filter p\u00e5 befintliga block. N\u00e4r det g\u00e4ller att l\u00e4gga till enkla anpassade inst\u00e4llningar till block \u00e4r dessa vanliga saker vi inte kan p\u00e5verka.<\/p>\n
Ingen \u00e5tkomst till blockets inline-stil i editorn<\/h3>\n
I kommande fall av inst\u00e4llningar som p\u00e5verkar ett blocks design m\u00e5ste vi l\u00e4gga till inline-stil p\u00e5 blockets omslutningsnod. Bara klassnamn duger inte. Om du till exempel l\u00e4gger till en anpassad f\u00e4rginst\u00e4llning och anv\u00e4ndaren v\u00e4ljer en anpassad f\u00e4rg (fr\u00e5n colorpicker), kan du inte l\u00f6sa detta genom att l\u00e4gga till en klass \u2013 du beh\u00f6ver inline stil.<\/p>\n
Tyv\u00e4rr verkar det som att WordPresss standardblock hanterar inline-stil i editor helt oberoende utan m\u00f6jlighet att filtrera eller "haka in". Jag kommer att visa ett s\u00e4tt att kringg\u00e5 detta i det sista exemplet nedan, men det \u00e4r inte idealiskt i alla fall.<\/p>\n
Varf\u00f6r bry sig om att blocket ser annorlunda ut i editor kontra frontend, kanske du fr\u00e5gar? Hela po\u00e4ngen med Gutenberg \u00e4r att implementera ett visuellt s\u00e4tt att redigera inneh\u00e5ll d\u00e4r det vi ser faktiskt \u00e4r vad vi f\u00e5r. Vi vill uppn\u00e5 samma visuella utseende b\u00e5de i editor och frontend.<\/p>\n
Vissa block inkluderar inte klassnamn i editorn<\/h3>\n
Som n\u00e4mnts ovan kan vi filtrera blockets inpackningsklassnamn eftersom detta \u00e4r en rekvisita som skickas till alla Gutenberg-block. Men tyv\u00e4rr finns det n\u00e5gra block som inte till\u00e4mpar blockets klass alls i edit<\/code>. Ett exempel \u00e4r t\u00e4ckblocket. Jag har lekt runt mycket med att anv\u00e4nda omslagsblock som "sektioner" f\u00f6r f\u00f6rstasidor och st\u00f6ter p\u00e5 problem eftersom omslagsblocket bygger sin egen klass inuti edit<\/code>. Den hoppar helt \u00f6ver blockets "globala" klass (som \u00e4r den vi har tillg\u00e5ng till via filter).<\/p>\nMen vi kan \u00e5tminstone vara s\u00e4kra p\u00e5 att filtrerade klassnamn alltid till\u00e4mpas i save<\/code>(frontend). Detta sker automatiskt utanf\u00f6r varje blocks specifika kod.<\/p>\nOm jag har fel om n\u00e5got av ovanst\u00e5ende, V\u00e4nligen meddela mig i kommentarerna nedan! Jag l\u00e4r mig st\u00e4ndigt Gutenberg, och samtidigt utvecklas Gutenberg ocks\u00e5. Jag hoppas n\u00e5gon g\u00e5ng ovanst\u00e5ende kommer att vara m\u00f6jligt n\u00e5gon g\u00e5ng eller att det \u00e4r m\u00f6jligt men jag saknar bara lite viktig information!<\/p>\n
Med det ur v\u00e4gen, l\u00e5t oss b\u00f6rja titta p\u00e5 lite kod.<\/p>\n
Exempel 1: L\u00e4gg till ett v\u00e4xlingsf\u00e4lt f\u00f6r att d\u00f6lja ett t\u00e4ckblock p\u00e5 mobilen<\/h2>\n
L\u00e5t oss anta att vi utvecklar ett tema d\u00e4r omslagsblock kommer att anv\u00e4ndas f\u00f6r "sektioner" p\u00e5 f\u00f6rstasidan. Och vi vill ge anv\u00e4ndaren en m\u00f6jlighet att d\u00f6lja en viss sektion fr\u00e5n mobilen. F\u00f6r att l\u00f6sa detta kan vi l\u00e4gga till ett v\u00e4xlingsf\u00e4lt i avsnittet "Avancerat" i Cover blocks Inspector. Om f\u00e4ltet \u00e4r aktiverat kommer Cover-blocket att f\u00e5 en extra anpassad klass som vi kan rikta in oss p\u00e5 med CSS och mediafr\u00e5gor.<\/p>\n
F\u00f6rresten: Detta \u00e4r ett fall d\u00e4r problemet med Cover block inte till\u00e4mpar v\u00e5ra anpassade klassnamn i editorn faktiskt \u00e4r en f\u00f6rdel! T\u00e4nk om det gjorde det; d\u00e5 skulle det vara om\u00f6jligt f\u00f6r anv\u00e4ndaren att redigera blocket i editorn om han eller hon har en liten sk\u00e4rm!<\/p>\n
Som n\u00e4mnts tidigare finns det tre steg vi beh\u00f6ver koda f\u00f6r. Vi m\u00e5ste ocks\u00e5 l\u00e4gga till lite PHP f\u00f6r att k\u00f6a v\u00e5r Javascript-fil till redigeraren. L\u00e5t oss g\u00f6ra det f\u00f6rst.<\/p>\n
L\u00e4gger till v\u00e5rt manus i editorn<\/h3>\n
Vi kopplar en funktion till handlingen [enqueue_block_editor_assets](https:\/\/developer.wordpress.org\/reference\/hooks\/enqueue_block_editor_assets\/)<\/code>. Inuti v\u00e5r funktion k\u00f6ar vi ett script, precis som vi brukar g\u00f6ra i wp_enqueue_scripts<\/code>hook.<\/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>\nKom ih\u00e5g att justera s\u00f6kv\u00e4gen till var ditt manus \u00e4r! Obs: Om du skriver i ES6 med webbpaket som kompilerar ditt Javascript, kom ih\u00e5g att st\u00e4lla in s\u00f6kv\u00e4gen till byggandet av ditt skript, inte k\u00e4llan.<\/p>\n
Jag gillar att l\u00e4gga till ’ wp-edit-post<\/code>’ som ett beroende till skriptet f\u00f6r att s\u00e4kerst\u00e4lla att det laddas tillr\u00e4ckligt sent.<\/p>\nDet \u00e4r allt PHP vi beh\u00f6ver g\u00f6ra. Resten skrivs i v\u00e5r Javascript-fil.<\/p>\n
L\u00e4gg till ett anpassat attribut<\/h3>\n
Det f\u00f6rsta filtret vi kommer att anv\u00e4nda \u00e4r blocks.registerBlockType<\/code>vilka filters registerBlockType<\/code>inst\u00e4llningsobjekt.<\/p>\nMen f\u00f6rst lite om att l\u00e4gga till filter i Javascript. Eftersom jag inte hittat n\u00e5gon bra dokumentation f\u00f6r detta s\u00e5 ska jag f\u00f6rklara det lite h\u00e4r. Funktionen addFilter<\/code>finns i wp.hooks<\/code>namnutrymmet och accepterar fyra argument.<\/p>\naddFilter('hookName', 'namespace', 'functionName', 'priority');<\/code><\/p>\nDen f\u00f6rsta parametern, ’hookName’, \u00e4r namnet p\u00e5 filtret vi vill haka p\u00e5. Detta motsvarar den f\u00f6rsta parametern n\u00e4r du anv\u00e4nder PHP:s add_filter()<\/code>. Den andra parametern, ’namespace’, \u00e4r ett anpassat namnomr\u00e5de f\u00f6r din kod. Detta \u00e4r bara f\u00f6r att undvika namnkollision. Du kan i stort sett st\u00e4lla in vad du vill h\u00e4r, anv\u00e4nd bara inte WordPress namnutrymme (’wp’). Anv\u00e4nd en kort form av ditt namn eller projektnamn. Den tredje parametern, ’functionName’, \u00e4r den kopplade funktionen \u2013 vilket \u00e4r samma som PHP: add_filter()<\/code>s andra argument. Och slutligen \u00e4r den fj\u00e4rde parametern, ’prioritet’, valfri. \u00c5terigen, detta \u00e4r detsamma som PHPs add_filter()<\/code>tredje argument.<\/p>\nProcessen f\u00f6r filter i Javascript \u00e4r densamma som i PHP. Vi definierar en funktion som beh\u00f6ver returnera den filtrerade variabeln. Ibland \u00e4r variabeln en str\u00e4ng, ett objekt eller en komponent. Inuti funktionen modifierar vi variabeln som vi tycker passar.<\/p>\n
I v\u00e5rt fall vill vi l\u00e4gga till ett nytt attribut till blockets attribute<\/code>objekt. Vi anropar det nya attributet hideOnMobile<\/code>och st\u00e4ller in dess typ till boolean<\/code>. Detta g\u00f6rs s\u00e5 h\u00e4r:<\/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>\nP\u00e5 linjen #3<\/code>ser vi till att endast rikta oss mot block av typen ’ core\/cover<\/code>’. Det andra argumentet att blocks.registerBlockType<\/code>filtrera \u00e4r l\u00e4mpligt nog blockets namn. Vi l\u00e4gger sedan till ett nytt objektobjekt till settings.attributes<\/code>objektet. Slutligen ser vi till att returnera den filtrerade variabeln, settings<\/code>.<\/p>\nVid denna tidpunkt har ingenting f\u00f6r\u00e4ndrats visuellt i Gutenberg. Men alla t\u00e4ckblock har nu ytterligare ett attribut som vi kan anv\u00e4nda f\u00f6r att lagra v\u00e5r inst\u00e4llning.<\/p>\n
L\u00e4gg till inst\u00e4llning i Inspector (avancerad panel)<\/h3>\n
Det andra filtret anropas editor.BlockEdit<\/code>och filtrerar blockets edit<\/code>komponent. Detta filter tar emot det ursprungliga blockets BlockEdit<\/code>komponent och returnerar en ny inpackad komponent. Vi m\u00e5ste anv\u00e4nda wp.compose.createHigherOrderComponent<\/code>f\u00f6r att returnera den inslagna komponenten.<\/p>\nInuti v\u00e5r komponent ser vi till att g\u00f6ra den inslagna komponenten BlockEdit<\/code>, oavsett. Men om blocket \u00e4r av typen Cover s\u00e5 hakar vi \u00e4ven fast p\u00e5 komponenten InspectorAdvancedControls<\/code>(som \u00e4r panelen "Advanced" i Inspector) och l\u00e4gger till en ToggleControl<\/code>. Vi skriver f\u00f6r ToggleControl<\/code>att visa v\u00e4rdet p\u00e5 och uppdatera det anpassade attributet som vi lade till tidigare, 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>\nGl\u00f6m inte att alltid l\u00e4mna tillbaka originalet BlockEdit<\/code>, vilket vi g\u00f6r p\u00e5 linjen #9<\/code>. P\u00e5 rad #10 kontrollerar vi om blockets typ \u00e4r Cover, och renderar InspectorAdvancedControls<\/code>komponenten. Inuti h\u00e4r l\u00e4gger vi till en ToggleControl<\/code>, som \u00e4r en ing\u00e5ngskontroll som visas som en v\u00e4xling mellan sant eller falskt. Vi s\u00e4tter en etikett och kopplar dess v\u00e4rde till hideOnMobile<\/code>attributet. Om du har lagt till inst\u00e4llningar i Inspector tidigare borde detta vara ganska enkelt f\u00f6r dig.<\/p>\nMed ovanst\u00e5ende kod b\u00f6r vi nu f\u00e5 detta inuti panelen "Avancerat" i Inspector on Cover blocks:<\/p>\n
![\"L\u00e4gg](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152421-61e4d70271f5a.png\")
<\/a><\/p>\nInmatningen kommer nu att uppdatera v\u00e5rt anpassade attribut hideOnMobile<\/code>. Det sista steget \u00e4r att g\u00f6ra n\u00e5got beroende p\u00e5 v\u00e4rdet av detta attribut. Fr\u00e5n och med nu \u00e4r attributet sparat, men det p\u00e5verkar faktiskt ingenting.<\/p>\nL\u00e4gg till en anpassad klass<\/h3>\n
Det sista steget \u00e4r att l\u00e4gga till en anpassad klass i blockets klass. Vi g\u00f6r detta med filtret blocks.getSaveContent.extraProps<\/code>. Detta filter p\u00e5verkar rekvisitan till blockets save<\/code>komponent. En av dem \u00e4r propen className<\/code>, som alltid kommer att till\u00e4mpas p\u00e5 frontend. Vi l\u00e4gger helt enkelt till v\u00e5r anpassade klass efter den om attributet var true<\/code>, och returnerar den sedan. Jag har best\u00e4mt mig f\u00f6r att l\u00e4gga till en klass ’ hide-on-mobile<\/code>’, men du kan kalla den vad du vill.<\/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>\nDen h\u00e4r koden \u00e4r ganska sj\u00e4lvf\u00f6rklarande. P\u00e5 raden #4<\/code>kontrollerar vi om attributet hideOnMobile<\/code>finns och \u00e4r true<\/code>. Om s\u00e5 \u00e4r fallet l\u00e4gger vi till en anpassad klass till className<\/code>str\u00e4ngen.<\/p>\nMed alla ovanst\u00e5ende tre filter b\u00f6r vi nu f\u00e5 en anpassad klass "g\u00f6m-p\u00e5-mobil" applicerad p\u00e5 v\u00e5rt Cover-block n\u00e4rhelst inst\u00e4llningen \u00e4r aktiverad.<\/p>\n
![\"L\u00e4gg](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152421-61e4d70343817.png\")
<\/a><\/p>\nAllt som \u00e5terst\u00e5r \u00e4r att l\u00e4gga till lite CSS till ditt temas frontend-stilmall. N\u00e5got som det h\u00e4r;<\/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>\nExempel 2: L\u00e4gg till Inspector-panel med anpassad bakgrundsf\u00e4rgsinst\u00e4llning f\u00f6r Spacer-block<\/h2>\n
F\u00f6r det andra anv\u00e4ndningsfallet vill vi l\u00e4gga till anpassade f\u00e4rginst\u00e4llningar till Spacer-blocket. Som standard har Spacer-blocket inga andra inst\u00e4llningar \u00e4n dess h\u00f6jd. L\u00e5t oss anta att vi vill l\u00e4gga till en bakgrundsf\u00e4rg som f\u00e4rgar Spacer-blockets fulla h\u00f6jd. Det g\u00f6r att anv\u00e4ndaren kan l\u00e4gga till tomma, f\u00e4rgade "r\u00e4nder" i sitt inneh\u00e5ll. I det h\u00e4r fallet vill vi l\u00e4gga till f\u00e4rginst\u00e4llningarna i sin egen separata panel i Inspector, enligt vanligt f\u00f6rv\u00e4ntat beteende f\u00f6r f\u00e4rginst\u00e4llningar.<\/p>\n
Obs: Att hantera f\u00e4rger \u00e4r lite mer komplicerat eftersom vi beh\u00f6ver anv\u00e4nda en (annan) h\u00f6gre ordningskomponent withColors<\/code>. Eftersom vi redan beh\u00f6ver implementera en h\u00f6gre ordningskomponent i editor.BlockEdit<\/code>vi beh\u00f6ver compose<\/code>flera komponenter. Dessutom m\u00e5ste vi l\u00e4gga till tv\u00e5 attribut f\u00f6r varje f\u00e4rginst\u00e4llning. En kommer att inneh\u00e5lla f\u00e4rgpalettens slug, och den andra kommer att inneh\u00e5lla hex-f\u00e4rgkoden \u2013 endast om anv\u00e4ndaren har valt en anpassad f\u00e4rg (anv\u00e4nt colorpicker). Allt detta \u00e4r vanligt beteende n\u00e4r man arbetar med withColors<\/code>. Jag har ett <a href="https:\/\/wordpress.mediadoma.com\/sv\/hur-man-laegger-till-faerginstaellningar-i-ditt-anpassade-gutenberg-block\/" title="inl\u00e4gg som f\u00f6rklarar att l\u00e4gga till f\u00e4rginst\u00e4llningar och withColors<\/code>i detalj” >inl\u00e4gg som f\u00f6rklarar att l\u00e4gga till f\u00e4rginst\u00e4llningar och withColors<\/code>i detalj<\/a> om du blir f\u00f6rvirrad.<\/p>\nF\u00f6r det andra kommer vi i detta fall att st\u00f6ta p\u00e5 problemet som f\u00f6rklaras ovan; d\u00e4r vi inte kan l\u00e4gga till l\u00e4mplig inline-stil till redigeraren. L\u00f6sningen jag har valt i det h\u00e4r fallet \u00e4r att linda Spacer-blocket inuti a div<\/code>i editorn och till\u00e4mpa r\u00e4tt klasser och inline-stil p\u00e5 omslaget div<\/code>. Detta g\u00f6r den valda f\u00e4rgen synlig i editorn n\u00e4r blocket \u00e4r avmarkerat. N\u00e4r du v\u00e4ljer blocket l\u00e4gger WordPress dock till sin egen anpassade ljusgr\u00e5 bakgrund till blocket, som t\u00e4cker v\u00e5r anpassade bakgrundsf\u00e4rg. En CSS till editorn kommer att fixa detta. Jag ska f\u00f6rklara mer i slutet.<\/p>\nStegen \u00e4r desamma som exemplet ovan. Vi k\u00f6ar v\u00e5rt skript till editorn i PHP f\u00f6rst. Sedan i Javascript filtrerar vi attributes<\/code>objektet, Spacers edit<\/code>komponent och slutligen Spacers save<\/code>komponent.<\/p>\nL\u00e4gger till v\u00e5rt manus i editorn<\/h3>\n
Vi kopplar en funktion till handlingen [enqueue_block_editor_assets](https:\/\/developer.wordpress.org\/reference\/hooks\/enqueue_block_editor_assets\/)<\/code>. Inuti v\u00e5r funktion k\u00f6ar vi ett script, precis som vi brukar g\u00f6ra i wp_enqueue_scripts<\/code>hook.<\/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>\nKom ih\u00e5g att justera s\u00f6kv\u00e4gen till ditt skript. Jag gillar att l\u00e4gga till ’ wp-edit-post<\/code>’ som ett beroende till skriptet f\u00f6r att s\u00e4kerst\u00e4lla att det laddas tillr\u00e4ckligt sent.<\/p>\nDet \u00e4r allt PHP vi beh\u00f6ver g\u00f6ra. Resten skrivs i v\u00e5r Javascript-fil.<\/p>\n
L\u00e4gg till anpassade attribut<\/h3>\n
Som i exemplet ovan l\u00e4gger vi till ett filter blocks.registerBlockType<\/code>f\u00f6r att l\u00e4gga till ytterligare objektobjekt till blockets attributes<\/code>objekt.<\/p>\nN\u00e4r vi arbetar med withColors<\/code>m\u00e5ste vi l\u00e4gga till tv\u00e5 attribut f\u00f6r varje f\u00e4rg. Namnet p\u00e5 v\u00e5rt bakgrundsf\u00e4rgattribut \u00e4r backgroundColor<\/code>, vilket betyder att det andra attributet m\u00e5ste namnges customBackgroundColor<\/code>. Allt detta f\u00f6rklaras i mitt inl\u00e4gg om hantering av f\u00e4rginst\u00e4llningar i Gutenberg<\/a>. B\u00e5da b\u00f6r vara av typen string och endast till\u00e4mpas p\u00e5 block av typen Spacer.<\/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>\nL\u00e4gg till panelen ColorSettings i Inspector<\/h3>\n
Det andra steget \u00e4r att l\u00e4gga till en f\u00e4rginst\u00e4llningspanel i Inspector f\u00f6r Spacer-blocket genom att filtrera 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>\nVi m\u00e5ste anv\u00e4nda compose<\/code>f\u00f6r att kombinera den h\u00f6gre ordningens komponent som returneras fr\u00e5n detta filter och withColors<\/code>. Med andra ord, vi lindar helt enkelt den returnerade komponenten i withColors<\/code>. Som parameter withColors<\/code>tillhandah\u00e5ller vi v\u00e5rt attribut backgroundColor<\/code>.<\/p>\nInuti den lindade komponenten ser vi till att alltid \u00e5terv\u00e4nda BlockEdit<\/code>(linje #9<\/code>och #39<\/code>f\u00f6r Spacer-block). F\u00f6r block av typen Spacer hakar vi \u00e4ven p\u00e5 InspectorControls<\/code>f\u00f6r att l\u00e4gga till en PanelColorSettings<\/code>f\u00f6r v\u00e5rt f\u00e4rgval. Detta \u00e4r standardproceduren f\u00f6r att l\u00e4gga till f\u00e4rginst\u00e4llningar.<\/p>\nP\u00e5 line #17 - 34<\/code>genererar vi manuellt den n\u00f6dv\u00e4ndiga klassen och\/eller inline-stilen. Sedan #38<\/code>l\u00e4gger vi till en omslutande div BlockEdit<\/code>med dessa klasser och inline-stilar.<\/p>\nResultatet \u00e4r en ny f\u00e4rginst\u00e4llningspanel i Inspector f\u00f6r Spacer-block, fullt fungerande.<\/p>\n
![\"L\u00e4gg](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152421-61e4d7041a66b.png\")
<\/a><\/p>\n![\"L\u00e4gg](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152421-61e4d7052e0c9.gif\")
<\/a><\/p>\n