Unified Editor View

When working with GenerateBlocks, I expect the Block Editor to work like full site editing, almost completely identical to what I see on the frontend. The team is doing a great job with this, but there are still many small differences that hurts the experience.

I’ve submitted one or more issues and potential fixes to the repo (GenerateBlocks and/or GeneratePress) before they was changed to private, and I also have many private fixes in my child theme.

One recent issue that I found is that when using official Heading and Paragraph blocks, they are centered by default because of the auto margins on each block added by WP default styles. However, on the frontend, those styles are either dequeued or overridden by GB/GP, which causes inconsistency. See the Editor and Frontend differences:

The specific issue here is that WP is registering and adding classic.css called “wp-editor-classic-layout-styles” as a dependency here, because the theme that I’m using (GeneratePress) does not have theme.json file.

As classic.css is never added to the frontend (at least with a GP+GB setup), that file should not be added to the dependencies either, as it just causes inconsistent layouts and I already have custom Editor CSS fixes just because of that file.

If it does not cause any unexpected side effects, I think either GP should add that theme.json just to prevent this file to be added or GB should remove it as a dependency – at least with GP+GB setups.

The latter is a bit complicated, but I was tired of CSS fixes so found this solution:

add_action( 'enqueue_block_editor_assets', function() {
	// Remove classic layout styles (inconsistency, not present in frontend)
	wp_dequeue_style( 'wp-editor-classic-layout-styles' );
	wp_deregister_style( 'wp-editor-classic-layout-styles' );

	// Re-register editor styles, as 'wp-editor-classic-layout-styles' was a dependency (missing theme.json)
	// See: https://github.com/WordPress/wordpress-develop/blob/6.9/src/wp-includes/script-loader.php#L1709-L1740
	$suffix = SCRIPT_DEBUG ? '' : '.min';
	// Original dependencies
	$wp_edit_blocks_dependencies = array(
		'wp-components',
		/*
		 * This needs to be added before the block library styles,
		 * The block library styles override the "reset" styles.
		 */
		'wp-reset-editor-styles',
		'wp-block-library',
		'wp-block-editor-content',
	);
	wp_deregister_style( 'wp-edit-blocks' ); // Deregister because previously was registered with 'wp-editor-classic-layout-styles' as a dependency
	wp_register_style(
		'wp-edit-blocks',
		"/wp-includes/css/dist/block-library/editor$suffix.css",
		$wp_edit_blocks_dependencies
	);
} );