Gutenberg Colored Blocks

I am trying to figure out if a Gutenberg block exists to create an entire section of one color like see on this blog post -

I really like her gray section explaining that explains cooking brisket. It catches the eye with that slight change of color.

I don’t know if that is a theme base thing or if there is a way to do it with just the block editor.

I know how to turn a single block background to a different color but if I hit enter I it would start a new block and thus a gap in the color, not what I want.

Any ideas?

You can do it using Atomic Blocks -

1 Like

@BethanySmith Thanks for the recommendation. Have you used the plugin yourself?

Yes, I used it for the membership site. I believe Madison (@graceandvine) also uses it!

Still looking…

I thought I had it but need to look further.

It looks like this block is a Yoast FAQ block. However, Yoast doesn’t have anything extra for that block.

Here’s what I would do:

Make a regular paragraph and change that paragraph to the color you want. Change to html and grab the code.

Made a FAQ block and change to html. Pop in the front and back code you found for the other one.

If you want a heading in there, you’ll also need to add that code.

Once you’ve done it one time, it should be very easy to add. You could make it a reusable block.

I don’t really think you need to add another plugin for it. Seems like you can slap it together pretty easily. :slight_smile:

@24bite I totally get what you are saying, but it doesn’t seem to be working out that way. Maybe I am inserting the code wrong.

Here is a screenshot as you can see it. How should I insert it?

I was hoping that would be a quick cheat. Let me take a look. Be back in a moment.

Here is some coding. Unfortunately, like most fancy html coding, Guttenberg doesn’t recognize it so you may need to keep it an html block, but it works.

You can take it and just change the question and answer portion for each question.

Like many other things, there is probably a plugin that will do this for you and not throw up the Guttenberg block error but I’ve been writing in code since 1998 and it doesn’t bother me.

Because it’s stand alone, you may want to customze the heading further by adding a specific font face as well.


@eatlikenooneelse I think you could write and format normally using the blocks and then group the blocks and call it a class and set the gray background-color.


@nbelgrave Yes that worked! That’s probably the easiest way to do it and don’t need to add any additional plugins. Thanks! And @24bite Thanks for all of your help as well. Your idea also worked.


Thanks again everyone that helped me figure out the block situation. Here is an example of a post that I just created that uses a gray block -