Ibis: Correctly load Editor Styles, update them to match front-end, fix typo

This PR has a few fixes.

- Correctly loads the Editor Styles for Ibis _after_ the Seedlet ones. Props @alaczek for pointing me in the right direction with her debuggin'.
- Adds some of the new front-end styles to the editor styles. Layout and fonts'll match now.
- Fixes a typo in the code I stole from Mayland. :)
This commit is contained in:
Ian Stewart 2020-07-30 12:49:41 -05:00
parent b67b0a1217
commit 3944332883
2 changed files with 30 additions and 5 deletions

View file

@ -22,10 +22,10 @@ if ( ! function_exists( 'ibis_setup' ) ) :
add_theme_support( 'editor-styles' );
// Enqueue editor styles.
add_editor_style( 'style-editor.css' );
add_editor_style( get_stylesheet_directory_uri() . '/style-editor.css' );
}
endif;
add_action( 'after_setup_theme', 'ibis_setup' );
add_action( 'after_setup_theme', 'ibis_setup', 999 );
/**
* Add Google webfonts
@ -40,9 +40,9 @@ function ibis_fonts_url() {
* supported by Lora, translate this to 'off'. Do not translate
* into your own language.
*/
$poppins = esc_html_x( 'on', 'Lora font: on or off', 'ibis' );
$lora = esc_html_x( 'on', 'Lora font: on or off', 'ibis' );
if ( 'off' !== $poppins ) {
if ( 'off' !== $lora ) {
$font_families = array();
$font_families[] = 'Lora:400,400i,600,600i,700,700i';

View file

@ -1,5 +1,11 @@
/* Override Seedlet variables with values from experimental-theme.json. */
body {
/* Font Family */
--global--font-primary: var(--font-headings, Lora, serif);
--global--font-secondary: var(--font-base, Lora, sans-serif);
--global--font-code: monospace, monospace;
--global--font-ui: var(--font-base, var(--global--font-secondary));
/* Font Size */
--global--font-size-xs: var(--wp--preset--font-size--tiny);
--global--font-size-sm: var(--wp--preset--font-size--small);
@ -8,6 +14,8 @@ body {
--global--font-size-xl: var(--wp--preset--font-size--extra-large);
--global--font-size-xxl: var(--wp--preset--font-size--huge);
--global--font-size-xxxl: var(--wp--preset--font-size--gigantic);
--heading--font-weight: 600;
--heading--font-weight-strong: 700;
/* Colors */
--global--color-background: var(--wp--preset--color--background);
@ -15,9 +23,26 @@ body {
--global--color-primary: var(--wp--preset--color--primary);
--global--color-secondary: var(--wp--preset--color--secondary);
--global--color-tertiary: var(--wp--preset--color--tertiary);
/* Colors */
--button--padding-vertical: calc(.66 * var(--global--spacing-horizontal) - var(--button--border-width));
--button--padding-horizontal: var(--global--spacing-horizontal);
}
/**
* Override Seedlet Media Query Variables
*/
@media only screen and (min-width: 1024px) {
body {
--responsive--aligndefault-width: calc(750px - var(--responsive--spacing-horizontal));
--responsive--alignwide-width: calc(990px - var(--responsive--spacing-horizontal));
--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
}
}
.site-content .wp-block[data-align="full"] > [data-block], .site-content .wp-block.alignfull > [data-block] {
margin-top: 0;
margin-bottom: 0;
}
}