woocommerce/storefront
2
0
Fork 0
mirror of https://github.com/woocommerce/storefront.git synced 2025-08-21 04:11:59 +08:00
Code Issues Packages Wiki Activity Actions

Adds Gutenberg editor styles

Browse source
This commit is contained in:
Tiago Noronha 2018-12-05 15:27:36 +00:00
parent 19ca599ad1
commit 884ac6dd27
4 changed files with 491 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

58
inc/customizer/class-storefront-customizer.php
View file

@ -28,6 +28,7 @@ if ( ! class_exists( 'Storefront_Customizer' ) ) :
add_action( 'wp_enqueue_scripts', array( $this, 'add_customizer_css' ), 130 );
add_action( 'customize_controls_print_styles', array( $this, 'customizer_custom_control_css' ) );
add_action( 'customize_register', array( $this, 'edit_default_customizer_settings' ), 99 );
add_action( 'enqueue_block_editor_assets', array( $this, 'block_editor_customizer_css' ) );
add_action( 'init', array( $this, 'default_theme_mod_values' ), 10 );
}
@ -894,6 +895,63 @@ if ( ! class_exists( 'Storefront_Customizer' ) ) :
return apply_filters( 'storefront_gutenberg_customizer_css', $styles );
}
/**
* Enqueue dynamic colors to use editor blocks.
*/
public static function block_editor_customizer_css() {
global $storefront_version;
$storefront_theme_mods = $this->get_storefront_theme_mods();
$brighten_factor = apply_filters( 'storefront_brighten_factor', 25 );
$darken_factor = apply_filters( 'storefront_darken_factor', -25 );
$styles = '
.editor-styles-wrapper table th {
background-color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['background_color'], -7 ) . ';
}
.editor-styles-wrapper table tbody td {
background-color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['background_color'], -2 ) . ';
}
.editor-styles-wrapper table tbody tr:nth-child(2n) td,
.editor-styles-wrapper fieldset,
.editor-styles-wrapper fieldset legend {
background-color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['background_color'], -4 ) . ';
}
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
color: ' . $storefront_theme_mods['heading_color'] . ';
}
.editor-styles-wrapper .editor-block-list__block {
color: ' . $storefront_theme_mods['text_color'] . ';
}
.editor-styles-wrapper a,
.wp-block-freeform.block-library-rich-text__tinymce a {
color: ' . $storefront_theme_mods['accent_color'] . ';
}
.editor-styles-wrapper a:focus,
.wp-block-freeform.block-library-rich-text__tinymce a:focus {
outline-color: ' . $storefront_theme_mods['accent_color'] . ';
}
body.post-type-post .editor-post-title__block::after {
content: "";
}';
$styles .= $this->gutenberg_get_css();
wp_add_inline_style( 'storefront-editor-block-styles', apply_filters( 'storefront_gutenberg_block_editor_customizer_css', $styles ) );
}
/**
* Add CSS in <head> for styles handled by the theme customizer
*