Solution for left alignment in Gutenberg Blocks

On several occasions it has happened to me that, due to the CSS of some plugin, blocks or of the theme, all the Gutenberg blocks are aligned to the left, without any separation from the left bar.

Something like in the following screenshot:

Block aligned to the left

Even if it is only a visual effect, it is quite uncomfortable to work with the contents aligned completely to the left, especially when using a large screen.

The solution is simple and effective: center the block. To achieve this, we apply an automatic margin on both the left and the right.

We used to perform this task with margin-left: auto; and margin-right: auto; but now we should do it with margin-inline-start and margin-inline-endwhich, although similar, take into account ltr and rtl taking the start and end to the left or right depending on the direction of the language.

But we also have the abbreviated way for both which is margin-inline (for top and bottom we have margin-block).

We add this CSS using the hook admin_head to add it in the header, but only in the administration pages, which is where we edit the blocks.

However, in order to avoid loading this line of CSS in administration pages that do not use blocks, we wrap it in a condition that checks if the block editor is being used.

The solution code

The resulting code that solves the annoying problem is as follows:

/**
 * Add custom css to admin view to fix the problem
 * with blocks sticked to left margin.
 * Added only in block editor pages.
 *
 * Carlos Longarela <[email protected]> Oct. 2023
 *
 * @return void
 */
function cl_add_admin_css() {
	$current_screen = get_current_screen();

	if ( method_exists( $current_screen, 'is_block_editor' ) && $current_screen->is_block_editor() ) {
		echo '<style id="cl-block-margins">
		.editor-styles-wrapper .wp-block {
			margin-inline: auto !important;
		}
		</style>';
	}
}
add_action( 'admin_head', 'cl_add_admin_css' );

It will show us the contents as follows:

Centered block

Join my superlist ;)

I won't share your details with anyone or bombard you with emails, only when I publish a new post or when I have something interesting to share with you.

Leave a Comment