Highlight Gutenberg Blocks. An easier way to tell apart Gutenberg blocks on the Editor, with just a few lines of CSS. Read more: https://www.gsarigiannidis.gr/an-easier-way-to-tell-apart-gutenberg-blocks-on-the-editor/

highlight-gutenberg-blocks.css

.wp-block:not([data-type="core/paragraph"]):not(.block-list-appender):not(.block-editor-default-block-appender):not(.editor-post-title):hover::before,
.wp-block-group:hover::before {
	content: '';
	width: 100%;
	height: 100%;
	pointer-events: none;
	border: 1px dashed;
	position: absolute;
	top: 0;
	left: 0;
}

.wp-block:not([data-type="core/paragraph"]):not(.block-list-appender):not(.block-editor-default-block-appender):not(.editor-post-title):hover::after,
.wp-block-group:hover::after {
	content: attr(data-title);
	position: absolute;
	top: -20px;
	left: unset;
	right: 0;
	padding: 0 8px;
	font-size: 11px;
	background: #404040;
	color: #fff;
	display: inline-block;
	height: 20px;
}