From 4056cf84d9d9a66c53b362fd747c3794181ef3e0 Mon Sep 17 00:00:00 2001 From: Commander1024 Date: Sun, 26 Jul 2026 22:25:10 +0200 Subject: [PATCH] Match Gutenberg editor styling to the frontend canvas --- editor-style.css | 221 ++++++++++++++++++++++++++++++++++++++++------- functions.php | 8 ++ 2 files changed, 196 insertions(+), 33 deletions(-) diff --git a/editor-style.css b/editor-style.css index 77cb63b..ad34145 100644 --- a/editor-style.css +++ b/editor-style.css @@ -1,41 +1,196 @@ -/* Editor previews use the same self-hosted faces as the front end; keep paths stylesheet-relative. */ +/* + * Editor canvas styles for Commander 1024 2026. + * These font URLs are relative to this stylesheet in the theme root. + */ @font-face { - font-family: 'Alpha Lyrae'; - src: url('fonts/AlphaLyrae-Medium.woff2') format('woff2'); -} - -@font-face { - font-family: 'Crimson Pro'; - src: url('fonts/crimson-pro-latin-ext-wght-normal.woff2') format('woff2'); -} - -@font-face { - font-family: 'Berkeley Mono'; - src: url('fonts/BerkeleyMono-Regular.woff2') format('woff2'); -} - -/* Static editor equivalents of the front-end light-mode typography and accent tokens. */ -body { - font-family: 'Crimson Pro', Georgia, serif; - font-size: 22px; - line-height: 1.55; - color: #1d1b19; -} - -h1, -h2, -h3, -h4 { - font-family: 'Alpha Lyrae', sans-serif; + font-family: "Alpha Lyrae"; + src: url("fonts/AlphaLyrae-Medium.woff2") format("woff2"); font-weight: 500; - letter-spacing: .025em; + font-style: normal; + font-display: swap; } -code, -pre { - font-family: 'Berkeley Mono', monospace; +@font-face { + font-family: "Crimson Pro"; + src: url("fonts/crimson-pro-latin-wght-normal.woff2") format("woff2"); + font-weight: 200 900; + font-style: normal; + font-display: swap; } -a { +@font-face { + font-family: "Crimson Pro"; + src: url("fonts/crimson-pro-latin-wght-italic.woff2") format("woff2"); + font-weight: 200 900; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "Berkeley Mono"; + src: url("fonts/BerkeleyMono-Regular.woff2") format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Berkeley Mono"; + src: url("fonts/BerkeleyMono-Bold.woff2") format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +/* Match the frontend's light canvas. The admin chrome is intentionally untouched. */ +body.editor-styles-wrapper { + max-width: 760px; + padding: 2rem; + margin: 0 auto; + background: #f8f5f0; + color: #1d1b19; + font-family: "Crimson Pro", Georgia, serif; + font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem); + font-weight: 400; + line-height: 1.55; +} + +.editor-styles-wrapper, +.editor-styles-wrapper .wp-block { + font-family: "Crimson Pro", Georgia, serif; +} + +.editor-styles-wrapper .wp-block { + max-width: 760px; +} + +/* + * Gutenberg's visual editor uses this wrapper (rather than ) as its canvas. + * Apply the frontend reading scale here so blocks do not inherit the admin's 16px UI size. + */ +.editor-styles-wrapper { + color: #1d1b19; + font-family: "Crimson Pro", Georgia, serif !important; + font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem) !important; + font-weight: 400; + line-height: 1.55 !important; +} + +/* Core block controls may set an admin UI face and size instead of inheriting from the canvas. */ +.editor-styles-wrapper .wp-block-paragraph, +.editor-styles-wrapper .wp-block-paragraph .block-editor-rich-text__editable, +.editor-styles-wrapper .wp-block-list, +.editor-styles-wrapper .wp-block-list .block-editor-rich-text__editable { + font-family: "Crimson Pro", Georgia, serif !important; + font-size: inherit !important; + line-height: inherit !important; +} + +.editor-styles-wrapper .wp-block[data-align="wide"] { + max-width: 1180px; +} + +.editor-styles-wrapper .wp-block[data-align="full"] { + max-width: none; +} + +.editor-styles-wrapper a { color: #c3480b; + text-decoration-thickness: 0.08em; + text-underline-offset: 0.14em; +} + +.editor-styles-wrapper a:hover, +.editor-styles-wrapper a:focus { + color: #8f3508; +} + +.editor-styles-wrapper h1, +.editor-styles-wrapper h2, +.editor-styles-wrapper h3, +.editor-styles-wrapper h4, +.editor-styles-wrapper .editor-post-title__input, +.editor-post-title__input, +.editor-post-title .editor-post-title__input, +.editor-styles-wrapper .wp-block-heading .block-editor-rich-text__editable, +.editor-styles-wrapper .wp-block-heading [contenteditable="true"] { + /* Gutenberg assigns editor UI font families to these controls unless overridden. */ + font-family: "Alpha Lyrae", sans-serif !important; + font-weight: 500; + line-height: 1.16; + letter-spacing: 0.025em; +} + +.editor-styles-wrapper h1 { + font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); +} + +.editor-styles-wrapper h2 { + margin-top: 2em; + font-size: 1.55em; +} + +.editor-styles-wrapper h3 { + margin-top: 1.8em; + font-size: 1.25em; +} + +.editor-styles-wrapper p, +.editor-styles-wrapper ul, +.editor-styles-wrapper ol, +.editor-styles-wrapper figure { + margin-top: 0; + margin-bottom: 1.3em; +} + +.editor-styles-wrapper ul, +.editor-styles-wrapper ol { + padding-left: 1.3em; +} + +.editor-styles-wrapper blockquote { + padding: 0.35rem 1.25rem; + border-left: 4px solid #c3480b; + margin-left: 0; + color: #706a63; + font-style: italic; +} + +.editor-styles-wrapper code, +.editor-styles-wrapper pre, +.editor-styles-wrapper .wp-block-code textarea, +.editor-styles-wrapper .wp-block-code .block-editor-rich-text__editable, +.editor-styles-wrapper .wp-block-code .block-editor-plain-text, +.editor-styles-wrapper .wp-block-preformatted .block-editor-rich-text__editable { + /* Code blocks use editable controls rather than a rendered element. */ + font-family: "Berkeley Mono", monospace !important; + font-size: 0.8em; +} + +.editor-styles-wrapper pre, +.editor-styles-wrapper .wp-block-code { + padding: 1rem 1.2rem; + overflow: auto; + border-radius: 2px; + background: #282623; + color: #f5eee5; +} + +.editor-styles-wrapper :not(pre) > code { + padding: 0.1em 0.3em; + border: 1px solid #d8d0c6; + border-radius: 2px; + background: #fffdf9; +} + +.editor-styles-wrapper .wp-element-caption { + color: #706a63; + font-family: "Berkeley Mono", monospace; + font-size: 0.68rem; +} + +.editor-styles-wrapper hr, +.editor-styles-wrapper .wp-block-separator { + border: 0; + border-top: 1px solid #d8d0c6; } diff --git a/functions.php b/functions.php index ba9d870..e59406a 100644 --- a/functions.php +++ b/functions.php @@ -10,6 +10,8 @@ function c1024_2026_setup() { add_theme_support( 'custom-logo', array( 'flex-width' => true, 'flex-height' => true ) ); add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption', 'style', 'script' ) ); add_theme_support( 'align-wide' ); + add_theme_support( 'editor-styles' ); + // Classic-editor stylesheet; the same file is explicitly enqueued for the block editor below. add_editor_style( 'editor-style.css' ); register_nav_menus( array( 'primary' => __( 'Primary menu', 'c1024-2026' ), @@ -26,6 +28,12 @@ function c1024_2026_assets() { // Load public assets through WordPress so dependencies and plugin integrations remain ordered. add_action( 'wp_enqueue_scripts', 'c1024_2026_assets' ); +function c1024_2026_block_editor_assets() { + // Load the complete canvas stylesheet inside Gutenberg's editor iframe. + wp_enqueue_style( 'c1024-2026-editor-style', get_theme_file_uri( '/editor-style.css' ), array(), '1.0.0' ); +} +add_action( 'enqueue_block_editor_assets', 'c1024_2026_block_editor_assets' ); + // These settings drive the optional front-page hero without hard-coding media or copy. function c1024_2026_customize_register( $wp_customize ) { $wp_customize->add_section( 'c1024_2026_home_hero', array(