diff --git a/lib/class-enqueue.php b/lib/class-enqueue.php index 5e46ff4..be5f8f7 100644 --- a/lib/class-enqueue.php +++ b/lib/class-enqueue.php @@ -23,6 +23,7 @@ class Enqueue { public function __construct() { add_action( 'wp_enqueue_scripts', array( $this, 'enqFEAssets' ) ); add_action( 'admin_enqueue_scripts', array( $this, 'enqBEAssets' ) ); + add_action( 'enqueue_block_editor_assets', array( $this, 'enqEditorAssets' ) ); } /** @@ -64,15 +65,6 @@ class Enqueue { $theme_dir = get_stylesheet_directory(); $theme_uri = get_stylesheet_directory_uri(); - /** - * Editor CSS - */ - $editor_css_path = '/styles/backend/editor.css'; - if ( file_exists( $theme_dir . $editor_css_path ) ) { - $version = filemtime( $theme_dir . $editor_css_path ); - wp_enqueue_style( 'basicwp-editor', $theme_uri . $editor_css_path, array(), $version ); - } - $font_ver = gmdate( 'U' ); wp_enqueue_style( 'raleway', 'https://fonts.googleapis.com/css2?family=Raleway:wght@100..900&display=swap', false, $font_ver ); @@ -96,6 +88,24 @@ class Enqueue { wp_enqueue_script_module( 'basicwp-button', $theme_uri . '/static/js/components/button.js', array( 'basicwp-admin' ), $version ); } } + + /** + * Enqueue block editor CSS (scoped to editor to avoid leaking into wp-admin UI). + */ + public function enqEditorAssets() { + $theme_dir = get_stylesheet_directory(); + $theme_uri = get_stylesheet_directory_uri(); + + $editor_css_path = '/styles/backend/editor.css'; + + $font_ver = gmdate( 'U' ); + wp_enqueue_style( 'raleway', 'https://fonts.googleapis.com/css2?family=Raleway:wght@100..900&display=swap', false, $font_ver ); + + if ( file_exists( $theme_dir . $editor_css_path ) ) { + $version = filemtime( $theme_dir . $editor_css_path ); + wp_enqueue_style( 'basicwp-editor', $theme_uri . $editor_css_path, array(), $version ); + } + } } // Initialize the Enqueue class. diff --git a/styles/backend/admin.css b/styles/backend/admin.css index a9c16df..849a676 100644 --- a/styles/backend/admin.css +++ b/styles/backend/admin.css @@ -1,16 +1,2 @@ -/* Theme admin styles */ +/* Light admin styles; avoid overriding core wp-admin UI */ -@import "../../static/dist/theme.css"; - -body { - font-family: 'Raleway', sans-serif; - - #wpwrap { - @layer utilities { - table.fixed { table-layout: fixed; position: static; } - } - } -} - -#wpbody ul, ol, ul li, ol li { list-style-type: none; } -#adminmenu li ul, li ol { margin: 0; } diff --git a/styles/backend/editor.css b/styles/backend/editor.css index 0b07790..9fa735b 100644 --- a/styles/backend/editor.css +++ b/styles/backend/editor.css @@ -2,9 +2,18 @@ @import "../../static/dist/theme.css"; -body { font-family: 'Raleway', sans-serif; } +body { + font-family: var(--font-sans); + + h1, h2, h3, + h4, h5, h6 { + font-family: var(--font-headings); + font-weight: 700; + margin: 0 0 1rem; + } +} .wp-block-buttons .block-editor-block-list__layout { - display: flex; - gap: 1rem; + display: flex; + gap: 1rem; } diff --git a/styles/base/typography.css b/styles/base/typography.css index 9fddf7b..3bbc0c3 100644 --- a/styles/base/typography.css +++ b/styles/base/typography.css @@ -68,74 +68,76 @@ } body { - background-color: white; - color: black; - font-family: var(--font-sans); - font-size: var(--text-base); - line-height: var(--line-height); + background-color: white; + color: black; + font-family: var(--font-sans); + font-size: var(--text-base); + line-height: var(--line-height); } ::selection { background: var(--color-warning); } @layer components { - h1, h2, h3, - h4, h5, h6 { - font-weight: 700; - margin: 0 0 1rem; - } + h1, h2, h3, + h4, h5, h6 { + font-family: var(--font-headings); + font-weight: 700; + margin: 0 0 1rem; + } - h1, .h1 { - font-size: var(--h1); - line-height: 1.2; - } + h1, .h1 { + font-size: var(--h1); + line-height: 1.2; + } - h2, .h2 { - font-size: var(--h2); - line-height: 1.3; - } + h2, .h2 { + font-size: var(--h2); + line-height: 1.3; + } - h3, .h3 { - font-size: var(--h3); - line-height: 1.4; - } + h3, .h3 { + font-size: var(--h3); + line-height: 1.4; + } - h4, .h4 { - font-size: var(--h4); - line-height: 1.5; - } + h4, .h4 { + font-size: var(--h4); + line-height: 1.5; + } - h5, .h5 { font-size: var(--h5); } + h5, .h5 { font-size: var(--h5); } - h6, .h6 { font-size: var(--h6); } + h6, .h6 { font-size: var(--h6); } } a, .link { - color: var(--color-bodylinks); - text-decoration: none; - transition: color 200ms; - cursor: pointer; + color: var(--color-bodylinks); + text-decoration: none; + transition: color 200ms; + cursor: pointer; - &:hover { color: var(--color-primary); } + &:hover { color: var(--color-primary); } } h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a { - color: inherit; - text-decoration: underline; + color: inherit; + text-decoration: underline; } p { - margin-top: 0; - margin-bottom: 1rem; + margin-top: 0; + margin-bottom: 1rem; } -li ul, li ol { margin: 0 1rem; } ul { list-style-type: disc; } ol { list-style-type: decimal; } +li ul, li ol { margin: 0 1rem; } + ol ol { list-style: lower-alpha; } ol ol ol { list-style: lower-roman; } @@ -146,16 +148,16 @@ pre, code, samp, style { font-family: monospace; } pre { - font-size: 0.875rem; - overflow: auto; - padding: 1.5rem; + font-size: 0.875rem; + overflow: auto; + padding: 1.5rem; } pre code { - background-color: inherit; - border-radius: 0; - color: inherit; - padding: 0; + background-color: inherit; + border-radius: 0; + color: inherit; + padding: 0; } code { @@ -163,10 +165,10 @@ code { } hr { - background-color: black; - border: none; - display: block; - height: 1px; - margin: 1rem 0; - width: 100%; + background-color: black; + border: none; + display: block; + height: 1px; + margin: 1rem 0; + width: 100%; }