Has there been any progress on this please?
Also seeing this issue occur only in WP 6.8 (was not happening in previous versions). Would love a fix. Thanks so much!
Since the authors aren’t going to fix this, I did this morning with Claude Code. Add this to your child theme
<?php
/**
* Fix WordPress 6.8 Block Editor Layout Issues
* Add to child theme functions.php: require_once get_stylesheet_directory() . '/fix-reusable-blocks-layout.php';
*/
/**
* Add layout fix CSS directly to the editor iframe using the proper WordPress method
*/
function reblex_add_editor_styles() {
// Create inline CSS for the editor
$editor_css = '
/* WordPress 6.8 Layout Fix */
/* Flow Layout (default) */
.is-layout-flow > * {
margin-block-start: 0;
margin-block-end: 0;
}
.is-layout-flow > * + * {
margin-block-start: 0.5em;
margin-block-end: 0;
}
/* Constrained Layout */
.is-layout-constrained > * {
margin-block-start: 0;
margin-block-end: 0;
}
.is-layout-constrained > * + * {
margin-block-start: 0.5em;
margin-block-end: 0;
}
/* Flex Layout */
.is-layout-flex {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5em;
}
.is-layout-flex > * {
margin: 0;
}
/* Grid Layout */
.is-layout-grid {
display: grid;
gap: 0.5em;
}
.is-layout-grid > * {
margin: 0;
}
/* Block spacing */
.wp-block-group.has-background {
padding: 1.25em 2.375em;
}
.wp-block-group {
padding: 1em;
margin-bottom: 1.5em;
}
.wp-block-columns {
margin-bottom: 1.5em;
display: flex;
gap: 2em;
flex-wrap: wrap;
}
.wp-block-column {
flex: 1;
min-width: 0;
}
/* General block spacing */
[class*="wp-block-"]:not(.wp-block-column) {
margin-bottom: 1em;
}
/* Add borders to blocks like in the working version */
.wp-block-group,
[class*="wp-block-ai"] {
border: 1px solid #ddd;
border-radius: 4px;
}
/* Form inputs */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
padding: 0.5em;
border: 1px solid #ddd;
border-radius: 4px;
width: 100%;
box-sizing: border-box;
margin-bottom: 1em;
}
/* Button spacing */
.wp-block-button {
margin-bottom: 1em;
}
';
// Write CSS to a temporary file and enqueue it properly
wp_add_inline_style( 'wp-edit-blocks', $editor_css );
}
add_action( 'enqueue_block_editor_assets', 'reblex_add_editor_styles' );
/**
* Add styles to editor iframe using after_setup_theme for theme.json compatibility
*/
function reblex_editor_iframe_styles() {
add_theme_support( 'editor-styles' );
// Add inline editor styles
add_editor_style();
}
add_action( 'after_setup_theme', 'reblex_editor_iframe_styles' );
/**
* Filter to add inline styles to the editor
*/
function reblex_block_editor_settings( $settings ) {
$custom_css = '
body {
padding: 2em;
}
.is-layout-flow > * + *,
.is-layout-constrained > * + * {
margin-top: 1em;
}
.is-layout-flex {
display: flex;
gap: 0.5em;
flex-wrap: wrap;
}
.is-layout-grid {
display: grid;
gap: 0.5em;
}
.wp-block-group {
padding: 1em;
margin-bottom: 1.5em;
}
.wp-block-group.has-background {
padding: 1.25em 2.375em;
}
[class*="wp-block-"] {
margin-bottom: 1em;
}
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
padding: 0.5em;
margin-bottom: 1em;
border: 1px solid #ddd;
border-radius: 4px;
width: 100%;
box-sizing: border-box;
}
';
// Add to existing editor styles
if ( isset( $settings['styles'] ) ) {
$settings['styles'][] = array( 'css' => $custom_css );
} else {
$settings['styles'] = array( array( 'css' => $custom_css ) );
}
return $settings;
}
add_filter( 'block_editor_settings_all', 'reblex_block_editor_settings', 10, 1 );
