Skip to content

Fix - Block editor ignores Customizer typography and colors #152

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
iamprazol merged 5 commits into from
Sep 28, 2026
Merged

Fix - Block editor ignores Customizer typography and colors #152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fd95922
Fix - Block editor ignores Customizer typography and colors
rajatgautam755421 Sep 25, 2026
35a374d
Fix - Editor post title used the H1 size instead of the front-end tit…
rajatgautam755421 Sep 25, 2026
de5481b
Add - E2E guard: block editor matches the front-end Customizer typogr…
rajatgautam755421 Sep 25, 2026
aec332d
Remove - manually added E2E spec; specs come from the verify-fix flow
rajatgautam755421 Sep 25, 2026
4fa6d9a
Merge branch 'develop' into fix/66-editor-customizer-styles
rajatgautam755421 Sep 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 105 additions & 0 deletions inc/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,115 @@
*/
function spacious_block_editor_styles() {
wp_enqueue_style( 'spacious-block-editor-styles', get_template_directory_uri() . '/style-editor-block.css', array(), SPACIOUS_THEME_VERSION );

$editor_css = spacious_block_editor_dynamic_css();

if ( $editor_css ) {
wp_add_inline_style( 'spacious-block-editor-styles', $editor_css );
Comment thread
Copilot marked this conversation as resolved.
}
}

add_action( 'enqueue_block_editor_assets', 'spacious_block_editor_styles', 1, 1 );

/**
* Load the theme fonts inside the block editor canvas.
*
* Lato is bundled with the theme, like on the front end; other Customizer fonts
* come from the same loader the front end uses.
*/
function spacious_block_editor_fonts() {
if ( ! is_admin() ) {
return;
}

$lato_faces = array(
'Thin' => array( 100, 'normal' ),
'ThinItalic' => array( 100, 'italic' ),
'Light' => array( 300, 'normal' ),
'LightItalic' => array( 300, 'italic' ),
'Regular' => array( 400, 'normal' ),
'Italic' => array( 400, 'italic' ),
'Bold' => array( 700, 'normal' ),
'BoldItalic' => array( 700, 'italic' ),
'Black' => array( 900, 'normal' ),
'BlackItalic' => array( 900, 'italic' ),
);
$lato_css = '';

foreach ( $lato_faces as $file => $face ) {
$lato_css .= "@font-face{font-family:'Lato';font-style:" . $face[1] . ';font-weight:' . $face[0] . ';src:url(' . esc_url( get_template_directory_uri() . '/assets/fonts/Lato-' . $file . '.woff' ) . ") format('woff');}";
}

wp_register_style( 'spacious-editor-fonts', false, array(), SPACIOUS_THEME_VERSION );
wp_enqueue_style( 'spacious-editor-fonts' );
wp_add_inline_style( 'spacious-editor-fonts', $lato_css );

Spacious_Generate_Fonts::render_fonts();
}

add_action( 'enqueue_block_assets', 'spacious_block_editor_fonts' );

if ( ! function_exists( 'spacious_block_editor_dynamic_css' ) ) :

/**
* Build block editor CSS from the Customizer typography and color settings.
*
* Mirrors the post content rules of Spacious_Dynamic_CSS::render_output(), scoped to
* the editor canvas. Like the front end, a setting outputs nothing while it is at its default.
*
* @return string Editor CSS.
*/
function spacious_block_editor_dynamic_css() {
$wrapper = '.editor-styles-wrapper';
$css = '';

// The Dark skin stylesheet is front-end only, so its colors would be overridden here.
if ( 'dark' !== get_theme_mod( 'spacious_color_skin', 'light' ) ) {
$primary_color = get_theme_mod( 'spacious_primary_color', '#0FBE7C' );
$primary_dark = spacious_darkcolor( $primary_color, -50 );

$css .= spacious_parse_css(
'#0FBE7C',
$primary_color,
array(
$wrapper . ' a, ' . $wrapper . ' .wp-block-file .wp-block-file__textlink' => array(
'color' => esc_html( $primary_color ),
),
$wrapper . ' input[type="reset"], ' . $wrapper . ' input[type="button"], ' . $wrapper . ' input[type="submit"]' => array(
'background-color' => esc_html( $primary_color ),
),
$wrapper . ' blockquote:not(.wp-block-quote)' => array(
'border-left-color' => esc_html( $primary_color ),
),
$wrapper . ' input[type="reset"]:hover, ' . $wrapper . ' input[type="button"]:hover, ' . $wrapper . ' input[type="submit"]:hover' => array(
'background' => esc_html( $primary_dark ),
),
)
);
}

$font_default = array(
'font-family' => 'Lato',
'font-weight' => 'regular',
);

$css .= spacious_parse_typography_css(
$font_default,
get_theme_mod( 'spacious_content_font_typography', $font_default ),
$wrapper . ', ' . $wrapper . ' > *, ' . $wrapper . ' p'
);

$css .= spacious_parse_typography_css(
$font_default,
get_theme_mod( 'spacious_titles_font_typography', $font_default ),
$wrapper . ' h1, ' . $wrapper . ' h2, ' . $wrapper . ' h3, ' . $wrapper . ' h4, ' . $wrapper . ' h5, ' . $wrapper . ' h6'
);

return $css;
}

endif;

/*
* Display the related posts.
*/
Expand Down
23 changes: 10 additions & 13 deletions style-editor-block.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,7 @@
max-width: 1268px;
}

.editor-styles-wrapper .wp-block.editor-post-title__block .editor-post-title__input {
font-weight: normal;
color: #222222;
font-family: 'Lato', sans-serif;
.editor-styles-wrapper .editor-post-title__input {
font-size: 22px;
padding-bottom: 0;
line-height: 36px;
Expand All @@ -42,32 +39,32 @@
font-family: 'Lato', sans-serif;
}

.editor-styles-wrapper .wp-block h1 {
.editor-styles-wrapper h1 {
font-size: 30px;
line-height: 36px;
}

.editor-styles-wrapper .wp-block h2 {
.editor-styles-wrapper h2 {
font-size: 28px;
line-height: 34px;
}

.editor-styles-wrapper .wp-block h3 {
.editor-styles-wrapper h3 {
font-size: 26px;
line-height: 30px;
line-height: 32px;
}

.editor-styles-wrapper .wp-block h4 {
.editor-styles-wrapper h4 {
font-size: 24px;
line-height: 28px;
line-height: 30px;
}

.editor-styles-wrapper .wp-block h5 {
.editor-styles-wrapper h5 {
font-size: 22px;
line-height: 26px;
line-height: 28px;
}

.editor-styles-wrapper .wp-block h6 {
.editor-styles-wrapper h6 {
font-size: 19px;
line-height: 25px;
}
Expand Down