Gutenberg offers a refreshing, streamlined way to write and lay out content, but if you’ve added blocks plugins that offer a lot of options in the Block sidebar, it’s definitely a double-edged sword.

It’s been a long time coming, but I’ve finally warmed up to using Gutenberg on my projects. That journey has involved understanding the benefits of Gutenberg as well as coming across block plugins such as GenerateBlocks, Getwid, and my personal tool of choice, Kadence Blocks.

However, one of the trade-offs I’ve found is that the sidebar can start to get really messy when a block has a lot of options. I also find this to be a problem with vanilla WordPress as well, but it’s definitely worse when more sections are added. There just isn’t enough visual contrast to understand where the section toggles and content are at a glance.

Using the browser inspector, I isolated the HTML element that is used in the native Gutenberg blocks as well as Kadence (it might work with the other plugins as well) to add a pleasant light blue background to these sections that helps me process where to click:

Of course, this can be adjusted for any combination of colors:

Code solutions

Plain CSS

h2.components-panel__body-title {
	background-color: #b0ddff;
}

PHP snippet

add_action( 'admin_enqueue_scripts', 'kadence_colorizer');
function kadence_colorizer() {
	echo "
		<style>
			h2.components-panel__body-title {
				background-color: #b0ddff;
			}
		</style>
	";
}

(Not sure what to do with this code? Read my guide on adding CSS to the WordPress admin.)

This adds the light blue background from the first example to the accordion headers, which feels a lot easier for my brain to process.

If you’re using the Kadence theme, you can go the extra mile here and use your universal palette colors to match your site:

I also added drop shadows to the text and removed a blue border that appears after clicking a section. Here are the CSS rules I use for that:

/* override header colors */
h2.components-panel__body-title,
h2.components-panel__body-title button:hover {
	background-color: var(--global-palette1);
}

/* remove blue border when clicked */
h2.components-panel__body-title button:focus {
	box-shadow: none !important;
}

/* apply light palette color to text and arrow */
h2.components-panel__body-title button,
.components-panel__body-toggle.components-button .components-panel__arrow {
	color: var(--global-palette7) !important;
	text-shadow: 1px 0px 3px var(--global-palette3);
}

This CSS can also be used if you’re not using the Kadence theme, simply swap out the color variables for fixed colors.

This solution is admittedly not pixel perfect, as there are some minor border issues and what seems to be a flash of another background color momentarily while hovering over the sections, but it helps things feel much more branded as well as introducing some contrast through color. Feel free to change the palette color variable or use arbitrary colors instead to get your preferred look.

Questions or comments? Let me know below.