{"id":4581,"date":"2022-04-08T09:55:55","date_gmt":"2022-04-08T06:55:55","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&amp;p=4581"},"modified":"2022-04-08T09:55:55","modified_gmt":"2022-04-08T06:55:55","slug":"add-custom-colours-to-the-gutenberg-editor","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/code-snippets\/add-custom-colours-to-the-gutenberg-editor\/","title":{"rendered":"Add custom colours to the Gutenberg editor"},"content":{"rendered":"\n<p>The Gutenberg editor is very powerful and it lets you select from a palette of colours that&#8217;s been defined globally. If Blocksy&#8217;s colours are not enough for you, you can easily intercept the <code>editor-color-palette<\/code> function and add colours to it.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_filter('blocksy:editor-color-palette', function ($colors) {\n  $colors&#091;] = &#091;\n    'name' =&gt; __('Custom Color 1', 'blocksy'),\n    'slug' =&gt; 'custom-color-1',\n    'color' =&gt; '#a156b4',\n  ];\n\n  $colors&#091;] = &#091;\n    'name' =&gt; __('Custom Color 2', 'blocksy'),\n    'slug' =&gt; 'custom-color-2',\n    'color' =&gt; '#a156b3',\n  ];\n\n  return $colors;\n});<\/code><\/pre>\n\n\n\n<p>With this, you add support for additional colours inside of the Gutenberg editor, but you still need to declare them via CSS, so that the front-end knows how to apply them.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.has-custom-color-1 {\n color: #f78ae0 !important;\n}\n\n.has-custom-color-2 {\n color: #b0f566 !important;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The Gutenberg editor is very powerful and it lets you select from a palette of colours that&#8217;s been defined globally. If Blocksy&#8217;s colours are not enough for you, you can easily intercept the editor-color-palette function and add colours to it. With this, you add support for additional colours inside of the Gutenberg editor, but you [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[125],"class_list":["post-4581","documentation","type-documentation","status-publish","hentry","doc_categories-code-snippets"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/4581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=4581"}],"version-history":[{"count":0,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/4581\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=4581"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=4581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}