Genesis - How to select a custom color inside the block editor

Each 17th Avenue theme comes with a predefined color palette that will display inside the block editor on your site. If you changed your colors inside the Theme Customizer, those color selections will not appear in the block editor color palette. These two areas are separate and do not communicate with one another. However, you can easily use your own colors inside the block editor! We'll show you how in this tutorial!

1. In your WordPress dashboard, open the page or post you'd like to edit (or create a new one).

2. If editing an existing block (i.e. a button), click on the block to access the block settings.

3. If adding a new block, click the blue "+" icon at the top left of your editor to add a new block. Then click on the element to access the block settings.

4. On the right side of your screen, you'll see block settings that look similar to below. The exact settings available will vary from block to block. For example, the settings for a button block will look different than the settings for a paragraph block.

Note: If you don't see this panel, click the settings "wheel" icon at the top right corner of your editor screen to enable the settings panel.

5. Click on "Colors." Depending on the type of block, you may see color settings for Text Color, Background Color, or both.

6. To select a custom color, click on the color "bar" above the Theme Color Palette (the color "circles").

In this screenshot, you can see the color palette from our Clover theme under "Theme."

7. A color picker window will pop up. Next, click on the color settings toggle icon.

8. Then enter your new custom hex code in the field shown below.

You're all set! You should see the new color reflected in your editor and on the front end of your site.