mirror of
https://github.com/woocommerce/storefront.git
synced 2025-08-21 04:11:59 +08:00
Add Gutenberg Customizer CSS
This commit is contained in:
parent
bdd01fe238
commit
656b044784
2 changed files with 73 additions and 16 deletions
|
@ -819,6 +819,78 @@ if ( ! class_exists( 'Storefront_Customizer' ) ) :
|
|||
return apply_filters( 'storefront_customizer_css', $styles );
|
||||
}
|
||||
|
||||
/**
|
||||
* Get Gutenberg Customizer css.
|
||||
*
|
||||
* @see get_storefront_theme_mods()
|
||||
* @return array $styles the css
|
||||
*/
|
||||
public function gutenberg_get_css() {
|
||||
$storefront_theme_mods = $this->get_storefront_theme_mods();
|
||||
$brighten_factor = apply_filters( 'storefront_brighten_factor', 25 );
|
||||
$darken_factor = apply_filters( 'storefront_darken_factor', -25 );
|
||||
|
||||
// Gutenberg
|
||||
$styles = '
|
||||
.wp-block-button .wp-block-button__link {
|
||||
border-color: ' . $storefront_theme_mods['button_background_color'] . ';
|
||||
}
|
||||
|
||||
.wp-block-button:not(.has-text-color) .wp-block-button__link {
|
||||
color: ' . $storefront_theme_mods['button_text_color'] . ';
|
||||
}
|
||||
|
||||
.wp-block-button:not(.has-text-color) .wp-block-button__link:hover,
|
||||
.wp-block-button:not(.has-text-color) .wp-block-button__link:focus,
|
||||
.wp-block-button:not(.has-text-color) .wp-block-button__link:active {
|
||||
color: ' . $storefront_theme_mods['button_text_color'] . ';
|
||||
}
|
||||
|
||||
.wp-block-button:not(.has-background) .wp-block-button__link {
|
||||
background-color: ' . $storefront_theme_mods['button_background_color'] . ';
|
||||
}
|
||||
|
||||
.wp-block-button:not(.has-background) .wp-block-button__link:hover,
|
||||
.wp-block-button:not(.has-background) .wp-block-button__link:focus,
|
||||
.wp-block-button:not(.has-background) .wp-block-button__link:active {
|
||||
border-color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['button_background_color'], $darken_factor ) . ';
|
||||
background-color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['button_background_color'], $darken_factor ) . ';
|
||||
}
|
||||
|
||||
.wp-block-quote footer,
|
||||
.wp-block-quote cite {
|
||||
color: ' . $storefront_theme_mods['text_color'] . ';
|
||||
}
|
||||
|
||||
.wp-block-image figcaption {
|
||||
color: ' . $storefront_theme_mods['text_color'] . ';
|
||||
}
|
||||
|
||||
.wp-block-separator.is-style-dots::before {
|
||||
color: ' . $storefront_theme_mods['heading_color'] . ';
|
||||
}
|
||||
|
||||
.wp-block-file .wp-block-file__button {
|
||||
color: ' . $storefront_theme_mods['button_text_color'] . ';
|
||||
background-color: ' . $storefront_theme_mods['button_background_color'] . ';
|
||||
border-color: ' . $storefront_theme_mods['button_background_color'] . ';
|
||||
}
|
||||
|
||||
.wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button:active {
|
||||
color: ' . $storefront_theme_mods['button_text_color'] . ';
|
||||
background-color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['button_background_color'], $darken_factor ) . ';
|
||||
background-color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['button_background_color'], $darken_factor ) . ';
|
||||
}
|
||||
|
||||
.wp-block-code,
|
||||
.wp-block-preformatted pre {
|
||||
color: ' . $storefront_theme_mods['text_color'] . ';
|
||||
}
|
||||
';
|
||||
|
||||
return apply_filters( 'storefront_gutenberg_customizer_css', $styles );
|
||||
}
|
||||
|
||||
/**
|
||||
* Add CSS in <head> for styles handled by the theme customizer
|
||||
*
|
||||
|
@ -827,6 +899,7 @@ if ( ! class_exists( 'Storefront_Customizer' ) ) :
|
|||
*/
|
||||
public function add_customizer_css() {
|
||||
wp_add_inline_style( 'storefront-style', $this->get_css() );
|
||||
wp_add_inline_style( 'storefront-gutenberg-blocks', $this->gutenberg_get_css() );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue