{"id":233910,"date":"2023-02-26T12:19:00","date_gmt":"2023-02-26T09:19:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233910"},"modified":"2023-02-26T12:25:42","modified_gmt":"2023-02-26T09:25:42","slug":"hur-man-laegger-till-faerginstaellningar-i-ditt-anpassade-gutenberg-block","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/hur-man-laegger-till-faerginstaellningar-i-ditt-anpassade-gutenberg-block\/","title":{"rendered":"Hur man l\u00e4gger till f\u00e4rginst\u00e4llningar i ditt anpassade Gutenberg-block"},"content":{"rendered":"\n<p>Det h\u00e4r inl\u00e4gget kommer att g\u00e5 in p\u00e5 djupet i hur du l\u00e4gger till f\u00e4rginst\u00e4llningar i ditt anpassade WordPress Gutenberg-block. Vi kommer att l\u00e4ra oss hur man l\u00e4gger till samma f\u00e4rginst\u00e4llningskomponent, som har att v\u00e4lja mellan palettf\u00e4rger och anpassade f\u00e4rger, som m\u00e5nga av WordPresss standardblock anv\u00e4nder.<\/p>\n<p>Det h\u00e4r \u00e4r vad vi kommer att l\u00e4gga till i v\u00e5rt anpassade block:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151572-61e4cc69ead10.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151572-61e4cc69ead10.png\" alt=\"Hur man l\u00e4gger till f\u00e4rginst\u00e4llningar i ditt anpassade Gutenberg-block\"><\/a><\/p>\n<p>Genom att anv\u00e4nda Gutenbergs komponenter kan vi mycket enkelt implementera denna palett\/f\u00e4rgsektion till v\u00e5rt eget anpassade block. Du kan definiera f\u00e4rginst\u00e4llningarna f\u00f6r att p\u00e5verka vilken f\u00e4rg du vill; bakgrund, textf\u00e4rg, kantf\u00e4rg eller vad som helst. Du kan ocks\u00e5 l\u00e4gga till s\u00e5 m\u00e5nga f\u00e4rginst\u00e4llningar du vill inuti den h\u00e4r panelen.<\/p>\n<p>Innan vi dyker in i koden finns det n\u00e5gra saker du m\u00e5ste vara medveten om. Hoppa inte vidare till koden eftersom n\u00e4sta avsnitt kommer att f\u00f6rklara mycket varf\u00f6r koden beh\u00f6ver g\u00f6ra det som det g\u00f6r.<\/p>\n<h2>Vad du beh\u00f6ver veta f\u00f6rst<\/h2>\n<p>Komponenterna f\u00f6r att implementera palett\/f\u00e4rginst\u00e4llningar \u00e4r <code>PanelColorSettings<\/code>och <code>withColors<\/code>fr\u00e5n <code>wp.blockEditor<\/code>paketet. Komponenten <code>withColors<\/code>\u00e4r en s\u00e5 kallad h\u00f6gre ordningskomponent och beh\u00f6ver implementeras lite annorlunda \u00e4n att bara mata ut en normal komponent. Jag ska g\u00e5 in p\u00e5 lite mer i detalj senare. Men f\u00f6rst m\u00e5ste vi vara medvetna om grunderna i hur Gutenberg hanterar blockf\u00e4rginst\u00e4llningar.<\/p>\n<h3>Hur Gutenberg-block hanterar f\u00e4rginst\u00e4llningar<\/h3>\n<p>Det finns vissa regler f\u00f6r hur Gutenberg hanterar f\u00e4rginst\u00e4llningar i block. Om du n\u00e5gonsin har formaterat ett Gutenberg-st\u00f6dt tema innan \u00e4r du f\u00f6rmodligen redan bekant med dessa regler. Vi g\u00e5r snabbt igenom dem \u00e4nd\u00e5 eftersom vi m\u00e5ste hantera detta i v\u00e5r blockkod.<\/p>\n<ul>\n<li>N\u00e4r en palettf\u00e4rg v\u00e4ljs kommer nodblockelementet att f\u00e5 en klass av ett visst m\u00f6nster. Klassen b\u00f6rjar med &#8221; <code>has-<\/code>&quot;, och sedan kommer palettens snigel efter. Slutet beror p\u00e5 vilket element f\u00e4rgen ska p\u00e5verka. F\u00f6r textf\u00e4rg slutar den med &quot; <code>-color<\/code>&quot;. F\u00f6r bakgrundsf\u00e4rg slutar den med &quot; <code>-background-color<\/code>&quot;. Som ett exempel, ett block med en palettf\u00e4rg &quot;r\u00f6d&quot; vald som bakgrundsf\u00e4rg kommer att f\u00e5 klassen &quot; <code>has-red-background-color<\/code>&quot;.<\/li>\n<li>N\u00e4r en anpassad f\u00e4rg v\u00e4ljs (fr\u00e5n f\u00e4rgv\u00e4ljaren), kommer nodblockelementet att f\u00e5 inline-stil med hex-koden. Till exempel kommer en anpassad f\u00e4rg #DD0000 vald f\u00f6r bakgrundsf\u00e4rg att f\u00e5 attributet &quot; <code>style=\"background-color: #DD0000;<\/code>&quot;.<\/li>\n<\/ul>\n<p>N\u00e4r vi implementerar f\u00e4rginst\u00e4llningar f\u00f6r v\u00e5rt block m\u00e5ste vi implementera r\u00e4tt klass och inline-stil. Vi kommer att g\u00f6ra det i slutet av denna handledning.<\/p>\n<h3>Hur man arbetar med<code>withColors<\/code><\/h3>\n<p>Som n\u00e4mnts tidigare <code>withColors<\/code>\u00e4r en <a href=\"https:\/\/reactjs.org\/docs\/higher-order-components.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">h\u00f6gre ordningskomponent<\/a>. Vad det i princip betyder att det \u00e4r en komponent som tar en komponent och returnerar en ny komponent. I den returnerade komponenten f\u00e5r vi anv\u00e4ndbara rekvisita fr\u00e5n den h\u00f6gre ordningens komponenten. F\u00f6r att uttrycka det enkelt kommer vi att anv\u00e4nda <code>withColors<\/code>f\u00f6r att returnera v\u00e5r egen komponent f\u00f6r v\u00e5rt anpassade block. V\u00e5r blockkomponent f\u00e5r n\u00f6dv\u00e4ndig rekvisita f\u00f6r att arbeta med f\u00e4rger fr\u00e5n <code>withColors<\/code>.<\/p>\n<p>Komponenten <code>withColors<\/code>hanterar tillst\u00e5nd och mycket funktionalitet f\u00f6r att arbeta med f\u00e4rger. Och vi f\u00e5r mycket automatisering i den h\u00e4r processen. Detta \u00e4r v\u00e4ldigt praktiskt f\u00f6r att ta reda p\u00e5 om den valda f\u00e4rgen \u00e4r en palettf\u00e4rg (vi m\u00e5ste l\u00e4gga till en klass) eller en anpassad f\u00e4rg (vi m\u00e5ste l\u00e4gga till inline-stil). <code>withColors<\/code>f\u00f6renkla mycket av processen att lagra den valda f\u00e4rgen, vad den \u00e4n \u00e4r, i v\u00e5rt blocks attribut. P\u00e5 tal om attribut..<\/p>\n<h3>Attribut och<code>withColors<\/code><\/h3>\n<p>Uppenbarligen beh\u00f6ver ditt block attribut f\u00f6r att lagra den valda f\u00e4rgen. F\u00f6r att dra nytta av withColors automatisering f\u00f6r att lagra r\u00e4tt f\u00e4rg m\u00e5ste du faktiskt definiera tv\u00e5 attribut f\u00f6r varje f\u00e4rginst\u00e4llning. En f\u00f6r att lagra palettf\u00e4rgens slug, och en annan f\u00f6r att lagra hex-koden. Det finns dock vissa regler.<\/p>\n<p>S\u00e4g att du vill l\u00e4gga till en f\u00e4rginst\u00e4llning f\u00f6r blockets textf\u00e4rg \u2013 s\u00e5 du best\u00e4mmer dig f\u00f6r att definiera ett attribut med passande namn &quot; <code>textColor<\/code>&quot;. Du m\u00e5ste sedan definiera ett annat attribut i m\u00f6nstret &quot; <code>customYourOriginalAttribute<\/code>&quot;. I det h\u00e4r exemplet m\u00e5ste det andra attributet heta &quot; <code>customTextColor<\/code>&quot;. T\u00e4nk p\u00e5 camelCase (stora bokst\u00e4ver) h\u00e4r. Att f\u00f6lja det h\u00e4r m\u00f6nstret <code>withColors<\/code>kommer automatiskt:<\/p>\n<ul>\n<li>Om en palettf\u00e4rg har valts kommer attributet &quot; <code>textColor<\/code>&quot; att inneh\u00e5lla palettens slug.<\/li>\n<li>Om en anpassad f\u00e4rg har valts kommer &quot; <code>customTextColor<\/code>&quot; att fyllas i med hex-koden.<\/li>\n<\/ul>\n<p>Dessa tv\u00e5 fungerar tillsammans. Om en anpassad f\u00e4rg v\u00e4ljs <code>textColor<\/code>blir det automatiskt <code>undefined<\/code>och vice versa.<\/p>\n<p>Och till sist, en sista sak att komma ih\u00e5g: <strong>du beh\u00f6ver inte anv\u00e4nda <code>setAttributes()<\/code>f\u00f6r att uppdatera dina f\u00e4rgattribut<\/strong>! De medf\u00f6ljande rekvisitana fr\u00e5n <code>withColors<\/code>inkluderar en funktion som automatiskt uppdaterar dina attribut \u00e5t dig. Allt du beh\u00f6ver g\u00f6ra \u00e4r att skicka denna funktion till <code>onChange<\/code>h\u00e4ndelsen till <code>PanelColorSettings<\/code>komponenten, s\u00e5 kommer dina attribut att uppdateras automatiskt.<\/p>\n<p>Ok, det \u00e4r dags att se allt detta i praktiken!<\/p>\n<h2>Implementera f\u00e4rginst\u00e4llningar i ett anpassat block<\/h2>\n<p>Till att b\u00f6rja med har jag ett ganska v\u00e4rdel\u00f6st anpassat block som inte g\u00f6r n\u00e5got annat \u00e4n att visa en h\u00e5rdkodad text. Detta g\u00f6r det bara enkelt att skilja ut vad vi beh\u00f6ver koda f\u00f6r att l\u00e4gga till f\u00e4rginst\u00e4llningar. Jag har en <a href=\"https:\/\/wordpress.mediadoma.com\/sv\/hur-man-skapar-ett-anpassat-wordpress-gutenberg-block-tutorial-serien\/\" title=\"handledningsserie om hur du skapar dina egna anpassade block\">handledningsserie om hur du skapar dina egna anpassade block<\/a> om du \u00e4r intresserad av att l\u00e4ra dig mer.<\/p>\n<p>Obs: Jag skriver all kod i ES6\/ESNext. Detta inkluderar pilfunktioner som kr\u00e4ver s\u00e4rskild omsorg i din Babel\/webpack-konfiguration. Om du f\u00e5r fel p\u00e5 en del av koden nedan, f\u00f6lj min <a href=\"https:\/\/wordpress.mediadoma.com\/sv\/komplett-guide-foer-att-skapa-en-utvecklingsmiljoe-foer-gutenberg\/\" title=\"guide i hur du st\u00e4ller in Webpack och Babel f\u00f6r ES6\/ESNext\">guide i hur du st\u00e4ller in Webpack och Babel f\u00f6r ES6\/ESNext<\/a> eller justerar koden s\u00e5 att den inte anv\u00e4nder &quot;experimentella syntaxer&quot;.<\/p>\n<p>Det h\u00e4r \u00e4r mitt grundl\u00e4ggande anpassade block innan jag g\u00f6r n\u00e5got med f\u00e4rginst\u00e4llningar:<\/p>\n<pre><code>const { registerBlockType } = wp.blocks;\nconst { __ } = wp.i18n;\n\u00a0\nconst BlockWithColorSettings = (props) =&gt; {\n    return(\n        &lt;div&gt;\n            PanelColorSettings Demo\n        &lt;\/div&gt;\n    );\n}\n\u00a0\nregisterBlockType('awp\/colorsettings', {\n    title: __('Color Settings Demo'),\n    icon: 'carrot',\n    category: 'common',\n    edit: BlockWithColorSettings,\n    save: (props) =&gt; { \n        return(\n            &lt;div&gt;\n                PanelColorSettings Demo\n            &lt;\/div&gt;\n        );\n    }\n});<\/code><\/pre>\n<p>Det \u00e4r ganska grundl\u00e4ggande. Observera att <code>edit<\/code>funktionen helt enkelt h\u00e4nvisar till en separat komponent <code>BlockWithColorSettings<\/code>, ist\u00e4llet f\u00f6r att skriva den inline. Detta g\u00f6r det l\u00e4ttare att implementera <code>withColors<\/code>senare.<\/p>\n<p>Okej, dags att implementera f\u00e4rginst\u00e4llningar i v\u00e5rt block! Som ett exempel vill jag st\u00e4lla in textf\u00e4rg.<\/p>\n<h3>L\u00e4gga till attribut<\/h3>\n<p>Som n\u00e4mnts tidigare m\u00e5ste vi definiera tv\u00e5 attribut f\u00f6r varje f\u00e4rginst\u00e4llning. Och vi m\u00e5ste vara extra f\u00f6rsiktiga i deras namngivning. Jag vill l\u00e4gga till ett textf\u00e4rgattribut, s\u00e5 jag d\u00f6per attributet <code>textColor<\/code>. Vilket betyder att jag ocks\u00e5 kommer att l\u00e4gga till ett attribut <code>customTextColor<\/code>. B\u00e5da ska vara av typen string.<\/p>\n<pre><code>...\nregisterBlockType('awp\/colorsettings', {\n    title: __('Color Settings Demo'),\n    icon: 'carrot',\n    category: 'common',\n    attributes: {\n        textColor: {\n            type: 'string'\n        },\n        customTextColor: {\n            type: 'string'\n        },\n    },\n    edit: BlockWithColorSettings,\n    save: (props) =&gt; { \n    ...<\/code><\/pre>\n<p>V\u00e5ra attribut \u00e4r redo f\u00f6r lagring av blockets textf\u00e4rginst\u00e4llning. Nu \u00e4r det dags att implementera <code>withColors<\/code>och <code>PanelColorSettings<\/code>.<\/p>\n<h3>Genomf\u00f6rande<code>withColors<\/code><\/h3>\n<p>Som n\u00e4mnts tidigare <code>withColors<\/code>\u00e4r en h\u00f6gre ordningskomponent som borde ta en komponent f\u00f6r att returnera. Vi vill uppenbarligen att den ska returnera v\u00e5r redigeringskomponent, <code>BlockWithColorSettings<\/code>. Men som parameter <code>withColors<\/code>tillhandah\u00e5ller vi ett objekt.<\/p>\n<p>I objektet som skickas till <code>withColors<\/code>m\u00e5ste vi ber\u00e4tta <code>withColors<\/code>vilket attribut vi vill anv\u00e4nda f\u00f6r att lagra f\u00e4rgen och vilken typ av element det kommer att f\u00e4rga (i v\u00e5rt fall textf\u00e4rg, vilket betyder CSS-regeln &quot;f\u00e4rg&quot;). Att informera om CSS-regeln s\u00e4kerst\u00e4ller att klassnamnen som returneras \u00e4r korrekta. Eftersom detta \u00e4r textf\u00e4rg vill vi ha klassnamn som &quot;har-f\u00e4rg&quot;.<\/p>\n<p>F\u00f6rst lite destrukturering p\u00e5 toppen. <code>withColors<\/code>finns i <code>wp.blockEditor<\/code>paketet.<\/p>\n<pre><code>const { withColors } = wp.blockEditor;<\/code><\/pre>\n<p>Vi \u00e4ndrar <code>edit<\/code>funktionen till:<\/p>\n<pre><code>    ...\n    attributes: {\n        ...\n    },\n    edit: withColors({textColor: 'color'})(BlockWithColorSettings),\n    save: (props) =&gt; { \n        ...<\/code><\/pre>\n<p>Med den h\u00e4r koden kommer v\u00e5r komponent <code>BlockWithColorSettings<\/code>att f\u00e5 ytterligare rekvisita:<\/p>\n<ul>\n<li><code>props.textColor<\/code>: \u00c4r ett objekt som best\u00e5r av all information om den valda f\u00e4rgen. Om en palettf\u00e4rg valdes kommer den att lagra egenskaper f\u00f6r hex-kod, palettsnigel, klassnamn och mer. Om en anpassad f\u00e4rg har valts kommer objektet att inneh\u00e5lla hex-koden. Hexkoden finns alltid i egenskapen <code>color<\/code>. Och klassnamnet (endast om en palettf\u00e4rg har valts) kommer att st\u00e4llas in i egenskapen <code>class<\/code>.<\/li>\n<li><code>props.setTextColor<\/code>: En funktion som uppdaterar v\u00e5ra attribut \u00e5t oss. Vi tillhandah\u00e5ller detta f\u00f6r f\u00e4rginst\u00e4llningarnas <code>onChange<\/code>h\u00e4ndelse som vi kommer att se senare. Funktionen kommer att uppdatera b\u00e5de <code>textColor<\/code>och <code>customTextColor<\/code>attribut. Eftersom vi f\u00f6ljde namnreglerna kommer det att uppdateras automatiskt <code>customTextColor<\/code>\u00e4ven om vi aldrig angav detta attributnamn.<\/li>\n<\/ul>\n<p>Observera att &quot;set&quot;-funktionen som tillhandah\u00e5lls som prop kommer att f\u00f6lja regeln: &quot; <code>setYourAttributeName<\/code>&quot;. Eftersom vi tillhandah\u00e5llit <code>textColor<\/code>, heter funktionen <code>setTextColor<\/code>. Om vi \u200b\u200bist\u00e4llet d\u00f6pte v\u00e5rt attribut <code>awesomeColor<\/code>och angav detta i <code>withColors<\/code>objektet, skulle set-funktionen f\u00e5 namnet <code>setAwesomeColor()<\/code>.<\/p>\n<h3>Genomf\u00f6rande<code>PanelColorSettings<\/code><\/h3>\n<p>N\u00e4sta steg \u00e4r att implementera sj\u00e4lva inspekt\u00f6rsektionen. F\u00f6r att g\u00f6ra detta l\u00e4gger vi till <code>PanelColorSettings<\/code>inuti en <code>InspectorControls<\/code>komponent. Eftersom React kr\u00e4ver att allt ska vara inuti en rotnod anv\u00e4nder vi ocks\u00e5 <code>Fragment<\/code>(fr\u00e5n <code>wp.elements<\/code>) f\u00f6r att linda in allt.<\/p>\n<p>F\u00f6rst lite destrukturering \u00f6verst i filen:<\/p>\n<pre><code>const { Fragment } = wp.element;\nconst { InspectorControls, PanelColorSettings, withColors } = wp.blockEditor;<\/code><\/pre>\n<p>Och vi uppdaterar v\u00e5r <code>BlockWithColorSettings<\/code>komponent till n\u00e5got s\u00e5nt h\u00e4r:<\/p>\n<pre><code>const BlockWithColorSettings = (props) =&gt; {\n    const { textColor, setTextColor } = props;  \/\/ Props received from withColors\n    return(\n        &lt;Fragment&gt;\n            &lt;InspectorControls&gt;\n                &lt;PanelColorSettings \n                    title={__('Color settings')}\n                    colorSettings={[\n                        {\n                            value: textColor.color,\n                            onChange: setTextColor,\n                            label: __('Text color')\n                        },\n                    ]}\n                \/&gt;\n            &lt;\/InspectorControls&gt;\n            &lt;div&gt;\n                PanelColorSettings Demo\n            &lt;\/div&gt;\n        &lt;\/Fragment&gt;\n    );\n}<\/code><\/pre>\n<p>Som du kan se i rad <code>#2<\/code>destrukturerar vi rekvisita som vi f\u00e5tt fr\u00e5n <code>withColors<\/code>, <code>textColor<\/code>och <code>setTextColor<\/code>. T\u00e4nk p\u00e5 att det <code>props.textColor<\/code>\u00e4r objektet som tas emot fr\u00e5n <code>withColors<\/code>och <code>props.attributes.textColor<\/code>\u00e4r attributet. Vi beh\u00f6ver dock inte h\u00e4nvisa till attributet.<\/p>\n<p>Som rekvisita till komponenten <code>PanelColorSettings<\/code>kan vi tillhandah\u00e5lla en titel f\u00f6r avsnittet (titel i den hopf\u00e4llbara rutan i Inspector). Det viktiga h\u00e4r \u00e4r rekvisitan <code>colorSettings<\/code>d\u00e4r vi beh\u00f6ver tillhandah\u00e5lla en m\u00e4ngd f\u00e4rginst\u00e4llningsobjekt. F\u00f6r varje f\u00e4rginst\u00e4llning (vi har f\u00f6r n\u00e4rvarande bara en) m\u00e5ste vi tillhandah\u00e5lla n\u00e5gra egenskaper. Egenskapen <code>value<\/code>f\u00f6rv\u00e4ntar sig den f\u00f6r n\u00e4rvarande valda hex-koden (\u00e4ven om en palettf\u00e4rg har valts). Detta tillhandah\u00e5lls f\u00f6r oss i <code>textColor<\/code>rekvisitan, inne i fastigheten <code>color<\/code>. F\u00f6r <code>onChange<\/code>fastigheten tillhandah\u00e5ller vi helt enkelt &quot;set&quot;-funktionen som tillhandah\u00e5lls av <code>withColors<\/code>, <code>setTextColor<\/code>. Och slutligen b\u00f6r vi ge ett <code>label<\/code>s\u00e5 att anv\u00e4ndaren vet vilket element denna f\u00e4rg kommer att p\u00e5verka. Det kommer att visas precis ovanf\u00f6r omr\u00e5det f\u00f6r att v\u00e4lja en f\u00e4rg.<\/p>\n<p>S\u00e5 h\u00e4r ser v\u00e5r komponent ut i Gutenberg-redigeraren just nu:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151572-61e4cc6b47b23.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151572-61e4cc6b47b23.png\" alt=\"Hur man l\u00e4gger till f\u00e4rginst\u00e4llningar i ditt anpassade Gutenberg-block\"><\/a><\/p>\n<p>Det h\u00e5ller nu p\u00e5 att uppdatera v\u00e5ra attribut n\u00e4r vi v\u00e4ljer f\u00e4rger. Du kan se att den kommer ih\u00e5g ditt f\u00e4rgval n\u00e4r du sparar inl\u00e4gget.<\/p>\n<p>Dock h\u00e4nder ingenting visuellt n\u00e4r du byter f\u00e4rg. F\u00e4rgvalet lagras i attributen, men ingen f\u00e4rg\u00e4ndring sker i editorn och inte heller vid f\u00f6rhandsgranskning av inl\u00e4gget. Detta beror p\u00e5 att vi beh\u00f6ver l\u00e4gga till kod f\u00f6r blockets klasser och stilar. Vi m\u00e5ste g\u00f6ra detta f\u00f6r b\u00e5de <code>edit<\/code>funktion (som \u00e4r f\u00f6r redakt\u00f6ren) och <code>save<\/code>funktion (frontend). Det \u00e4r n\u00e4sta steg.<\/p>\n<h3>Hantera klass och inline-stilar i<code>edit<\/code><\/h3>\n<p>Vi beh\u00f6ver bygga blockets nodklass och stilattribut enligt den valda f\u00e4rginst\u00e4llningen. Som tur <code>withColors<\/code>\u00e4r f\u00e5r vi lite automatisering i detta. Kom ih\u00e5g att det <code>props.textColor<\/code>\u00e4r ett objekt som inneh\u00e5ller all information vi beh\u00f6ver, inklusive klassnamnet.<\/p>\n<p>Vi skulle kunna g\u00f6ra n\u00e5got s\u00e5 h\u00e4r:<\/p>\n<pre><code>...\nconst BlockWithColorSettings = (props) =&gt; {\n    const { textColor, setTextColor } = props;  \/\/ Props received from withColors\n    let divClass;\n    let divStyles = {};\n    if (textColor != undefined) {\n        if (textColor.class != undefined) {\n            divClass = textColor.class;\n        } else {\n            divStyles.color = textColor.color;\n        }\n    }\n    return(\n        &lt;Fragment&gt;\n            &lt;InspectorControls&gt;\n                ...\n            &lt;\/InspectorControls&gt;\n            &lt;div className={divClass} style={divStyles}&gt;\n                PanelColorSettings Demo\n            &lt;\/div&gt;\n            ...<\/code><\/pre>\n<p>P\u00e5 line <code>#20<\/code>till\u00e4mpar vi den kritiska klassen och inline-stilen p\u00e5 rotnoden i v\u00e5rt block. Innan dess bygger vi attributet class och inline style genom att kontrollera <code>props.textColor<\/code>objektet.<\/p>\n<p>Efter denna \u00e4ndring b\u00f6r ditt anpassade block nu vara fullt fungerande i editorn. N\u00e4r du byter f\u00e4rg kommer blocket att \u00e4ndra textf\u00e4rgen. Grymt bra! Det sista steget \u00e4r att g\u00f6ra detta f\u00f6r <code>save<\/code>funktionen ocks\u00e5, s\u00e5 att vi f\u00e5r dessa klasser och stilar i frontend ocks\u00e5.<\/p>\n<h3>Hantera klass och inline-stilar i<code>save<\/code><\/h3>\n<p>Konceptet med att bygga klass- och inline-stilar och till\u00e4mpa dem p\u00e5 rotnoden \u00e4r samma i <code>save<\/code>som i <code>edit<\/code>. Men det finns en avg\u00f6rande skillnad. Vi <code>save<\/code>har inte rekvisita som tillhandah\u00e5lls av <code>withColors<\/code>. Och vi kan inte l\u00e4gga till komponenter av h\u00f6gre ordning till <code>save<\/code>funktionen. S\u00e5 i <code>save<\/code>funktionen \u00e4r all information vi har attributen.<\/p>\n<p>Det \u00e4r en bra tumregel att undvika h\u00e5rdkodning av &quot;har-&quot; klassnamn. Vad h\u00e4nder om WordPress best\u00e4mmer sig f\u00f6r att \u00e4ndra denna regel i framtiden? Som tur \u00e4r har vi en funktion som kan hj\u00e4lpa oss att skapa r\u00e4tt klassnamn f\u00f6r oss: <code>getColorClassName()<\/code>.<\/p>\n<p>Innan vi gl\u00f6mmer, l\u00e5t oss destrukturera det. Det finns ocks\u00e5 i <code>wp.blockEditor<\/code>paketet.<\/p>\n<pre><code>const { InspectorControls, PanelColorSettings, withColors, getColorClassName } = wp.blockEditor;<\/code><\/pre>\n<p>Anv\u00e4ndning av <code>getColorClassName()<\/code>funktionen kr\u00e4ver tv\u00e5 parametrar. F\u00f6rst en str\u00e4ng f\u00f6r CSS-regeln. Eftersom v\u00e5r f\u00e4rginst\u00e4llning \u00e4r f\u00f6r textf\u00e4rg tillhandah\u00e5ller vi &#8217; <code>color<\/code>&#8217;. Detta talar om f\u00f6r funktionen att den ska returnera ett klassnamn av &quot;har-n\u00e5got-f\u00e4rg&quot; och inte &quot;har-n\u00e5got-bakgrundsf\u00e4rg&quot; till exempel. Som andra parameter m\u00e5ste vi ange v\u00e4rdet p\u00e5 attributet.<\/p>\n<p>Style-attributet byggs helt enkelt genom att st\u00e4lla in &quot;color&quot; till v\u00e4rdet f\u00f6r attributet <code>customTextColor<\/code>, om det \u00e4r definierat.<\/p>\n<pre><code>save: (props) =&gt; { \n    const { textColor, customTextColor } = props.attributes;\n    let divClass;\n    let divStyles = {};\n    if (textColor != undefined) {\n        divClass = getColorClassName('color', textColor);\n    }\n    if (customTextColor != undefined) {\n        divStyles.color = customTextColor;\n    }\n    return(\n        &lt;div className={divClass} style={divStyles}&gt;\n            PanelColorSettings Demo\n        &lt;\/div&gt;\n    );\n}<\/code><\/pre>\n<p>Och naturligtvis, gl\u00f6m inte att till\u00e4mpa klassen och stilen p\u00e5 rotnoden i ditt block; som i rad <code>#12<\/code>.<\/p>\n<p>PS: Om du testar ditt block i editorn medan du skriver den h\u00e4r koden f\u00e5r du nu ett blockeringsfel. Detta beror p\u00e5 att vi nu har \u00e4ndrat utdata f\u00f6r <code>save<\/code>funktionen och det du har sparat tidigare \u00e4r i konflikt. Du m\u00e5ste ta bort blocket och l\u00e4gga till det igen.<\/p>\n<p>Efter denna \u00e4ndring b\u00f6r ditt block nu \u00e4ven till\u00e4mpa den valda textf\u00e4rgen i frontend.<\/p>\n<p>Och det \u00e4r allt! Du har nu framg\u00e5ngsrikt implementerat f\u00e4rginst\u00e4llningar i ditt block. Om du \u00e4r intresserad av att l\u00e4gga till flera f\u00e4rginst\u00e4llningar (inte bara textf\u00e4rg), l\u00e4s vidare.<\/p>\n<h2>En anteckning om flera f\u00e4rginst\u00e4llningar<\/h2>\n<p>Vid det h\u00e4r laget b\u00f6r du kunna implementera flera f\u00e4rginst\u00e4llningar. Du kanske vill l\u00e4gga till inst\u00e4llningar f\u00f6r bakgrundsf\u00e4rg, textf\u00e4rg, kantf\u00e4rg eller vad som helst annat f\u00f6r ditt block. I det h\u00e4r avsnittet ska jag g\u00f6ra en snabb \u00f6versikt \u00f6ver vad vi beh\u00f6ver g\u00f6ra f\u00f6r att implementera flera f\u00e4rginst\u00e4llningar.<\/p>\n<p>L\u00e5t oss anta att jag vill l\u00e4gga till bakgrundsf\u00e4rg till mitt block ocks\u00e5.<\/p>\n<p>F\u00f6rst m\u00e5ste jag definiera ett nytt attribut med ett kreativt namn <code>backgroundColor<\/code>. Jag definierar ett annat attribut <code>customBackgroundColor<\/code>ocks\u00e5.<\/p>\n<p>I <code>edit<\/code>funktionen \u00e4ndrar jag det angivna objektet till <code>withColors<\/code>:<\/p>\n<pre><code>withColors({textColor: 'color', backgroundColor: 'background-color'})<\/code><\/pre>\n<p>Detta s\u00e4ger <code>withColors<\/code>att mitt <code>textColor<\/code>attribut \u00e4r f\u00f6r CSS-regeln &quot; <code>color<\/code>&quot; (f\u00f6r textf\u00e4rg), och attributet <code>backgroundColor<\/code>\u00e4r f\u00f6r CSS-regeln &quot; <code>background-color<\/code>&quot;. <code>withColors<\/code>kommer automatiskt att k\u00e4nna igen och uppdatera attributen <code>customTextColor<\/code>och <code>customBackgroundColor<\/code>ocks\u00e5.<\/p>\n<p>I <code>PanelColorSettings<\/code>komponenten tillhandah\u00e5ller jag ett annat objekt till arrayen till prop <code>colorSettings<\/code>. S\u00e5h\u00e4r:<\/p>\n<pre><code>&lt;PanelColorSettings \n    title={__('Color settings')}\n    colorSettings={[\n        {\n            value: textColor.color,\n            onChange: setTextColor,\n            label: __('Text color')\n        },\n        {\n            value: backgroundColor.color,\n            onChange: setBackgroundColor,\n            label: __('Background color')\n        },\n    ]}\n\/&gt;<\/code><\/pre>\n<p>Med detta b\u00f6r du f\u00e5 tv\u00e5 separata f\u00e4rginst\u00e4llningar inuti Inspector-rutan f\u00f6r f\u00e4rginst\u00e4llningar.<\/p>\n<p>Det sista steget \u00e4r att bygga l\u00e4mpliga klassnamn och stilar i b\u00e5de <code>edit<\/code>och <code>save<\/code>. Detta \u00e4r ett ganska enkelt steg eftersom det bara \u00e4r att bygga en str\u00e4ng eller ett stilobjekt korrekt. Kom ih\u00e5g att ditt klassnamn m\u00e5ste st\u00f6dja flera f\u00e4rgklasser (t.ex. om b\u00e5de textf\u00e4rg och bakgrundsf\u00e4rg har valts). L\u00e4gg bara till ett mellanslag mellan varje klassnamn.<\/p>\n<p>PS: Om du beh\u00f6ver hantera m\u00e5nga klassnamn f\u00f6r ditt block kan du ha nytta av att installera <code>classnames<\/code>paketet. I stort sett alla komponenter i Gutenberg anv\u00e4nder det h\u00e4r biblioteket f\u00f6r att enklare kombinera klassnamn.<\/p>\n<h2>Slutsats och fullst\u00e4ndig kod<\/h2>\n<p>Du borde nu ha l\u00e4rt dig hur du implementerar f\u00e4rginst\u00e4llningar i ditt anpassade block. Jag hoppas att detta var till n\u00e5gon nytta f\u00f6r dig! Jag var tvungen att l\u00e4gga till den h\u00e4r funktionen i mitt projekt, och jag kunde verkligen inte hitta n\u00e5gon information eller bra dokumentation. S\u00e5 det h\u00e4r \u00e4r resultatet av att konsolidera allt jag l\u00e4rt mig om detta \u00e4mne, efter mycket f\u00f6rs\u00f6k och misstag.<\/p>\n<p>H\u00e4r \u00e4r den slutliga koden, helt och h\u00e5llet, f\u00f6r det anpassade blocket med textf\u00e4rginst\u00e4llning:<\/p>\n<pre><code>const { registerBlockType } = wp.blocks;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { InspectorControls, PanelColorSettings, withColors, getColorClassName } = wp.blockEditor;\n\u00a0\nconst BlockWithColorSettings = (props) =&gt; {\n    const { textColor, setTextColor } = props;  \/\/ Props received from withColors\n\u00a0\n    let divClass;\n    let divStyles = {};\n    if (textColor != undefined) {\n        if (textColor.class != undefined) {\n            divClass = textColor.class;\n        } else {\n            divStyles.color = textColor.color;\n        }\n    }\n    return(\n        &lt;Fragment&gt;\n            &lt;InspectorControls&gt;\n                &lt;PanelColorSettings \n                    title={__('Color settings')}\n                    colorSettings={[\n                        {\n                            value: textColor.color,\n                            onChange: setTextColor,\n                            label: __('Text color')\n                        },\n                    ]}\n                \/&gt;\n            &lt;\/InspectorControls&gt;\n            &lt;div className={divClass} style={divStyles}&gt;\n                PanelColorSettings Demo\n            &lt;\/div&gt;\n        &lt;\/Fragment&gt;\n    );\n}\n\u00a0\nregisterBlockType('awp\/colorsettings', {\n    title: __('Color Settings Demo'),\n    icon: 'carrot',\n    category: 'common',\n    attributes: {\n        textColor: {\n            type: 'string'\n        },\n        customTextColor: {\n            type: 'string'\n        },\n    },\n    edit: withColors({textColor: 'color'})(BlockWithColorSettings),\n    save: (props) =&gt; { \n        const { textColor, customTextColor } = props.attributes;\n        let divClass;\n        let divStyles = {};\n        if (textColor != undefined) {\n            divClass = getColorClassName('color', textColor);\n        }\n        if (customTextColor != undefined) {\n            divStyles.color = customTextColor;\n        }\n        return(\n            &lt;div className={divClass} style={divStyles}&gt;\n                PanelColorSettings Demo\n            &lt;\/div&gt;\n        );\n    }\n});<\/code><\/pre>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Det h\u00e4r inl\u00e4gget g\u00e5r in p\u00e5 djupet i hur du l\u00e4gger till f\u00e4rginst\u00e4llningar i ditt anpassade WordPress Gutenberg-block, p\u00e5 r\u00e4tt s\u00e4tt &#8211; precis som WordPress-blocken g\u00f6r det.<\/p>\n","protected":false},"author":1,"featured_media":151573,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[942,942,848,1110,807,807,818,818,848,868,868],"tags":[1173],"class_list":["post-233910","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-9","category-handledningar","category-n-a","category-php-9","category-plugins-3","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233910","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=233910"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233910\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/151573"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=233910"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233910"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}