WordPress/wp-content/themes/twentytwenty/inc/custom-css.php
desrosj 16e5753b48 Bundled Themes: Update Twenty Twenty.
This brings `trunk`’s version of Twenty Twenty in-sync with GitHub.

For a complete list of changes since [46551], see bc89c51...4549fd9.

Reviewed by SergeyBiryukov, desrosj, ianbelanger.
Props anlino, ianbelanger, poena, williampatton, nielslange, acosmin, intimez, itowhid06, decrecementofeliz, aristath, westonruter, mukesh27, jorgefilipecosta, karmatosed.
Fixes #48386.
Built from https://develop.svn.wordpress.org/trunk@46571


git-svn-id: http://core.svn.wordpress.org/trunk@46368 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-22 18:27:08 +00:00

185 lines
7.8 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<?php
/**
* Twenty Twenty Custom CSS
*
* @package WordPress
* @subpackage Twenty_Twenty
* @since 1.0.0
*/
if ( ! function_exists( 'twentytwenty_generate_css' ) ) {
/**
* Generate CSS.
*
* @param string $selector The CSS selector.
* @param string $style The CSS style.
* @param string $value The CSS value.
* @param string $prefix The CSS prefix.
* @param string $suffix The CSS suffix.
* @param bool $echo Echo the styles.
*/
function twentytwenty_generate_css( $selector, $style, $value, $prefix = '', $suffix = '', $echo = true ) {
$return = '';
/*
* Bail early if we have no $selector elements or properties and $value.
*/
if ( ! $value || ! $selector ) {
return;
}
$return = sprintf( '%s { %s: %s; }', $selector, $style, $prefix . $value . $suffix );
if ( $echo ) {
echo $return; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- We need to double check this, but for now, we want to pass PHPCS ;)
}
return $return;
}
}
if ( ! function_exists( 'twentytwenty_get_customizer_css' ) ) {
/**
* Get CSS Built from Customizer Options.
* Build CSS reflecting colors, fonts and other options set in the Customizer, and return them for output.
*
* @param string $type Whether to return CSS for the "front-end", "block-editor" or "classic-editor".
*/
function twentytwenty_get_customizer_css( $type = 'front-end' ) {
// Get variables.
$body = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'text' ) );
$body_default = '#000000';
$secondary = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'secondary' ) );
$secondary_default = '#6d6d6d';
$borders = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'borders' ) );
$borders_default = '#dcd7ca';
$accent = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'accent' ) );
$accent_default = '#cd2653';
/**
* Filters the CSS selectors targeting button component on frontend to apply common css
*
* @since 1.0.0
*
* @param string $string The comma separated string of all CSS selectors targeting button component
*/
$buttons_targets = apply_filters( 'twentytwenty_buttons_targets_front_end', 'button, .button, .faux-button, .wp-block-button__link, .wp-block-file__button, input[type=\'button\'], input[type=\'reset\'], input[type=\'submit\']' );
// Header.
$header_footer_background = sanitize_hex_color( twentytwenty_get_color_for_area( 'header-footer', 'background' ) );
$header_footer_background_default = '#ffffff';
// Cover.
$cover = sanitize_hex_color( get_theme_mod( 'cover_template_overlay_text_color' ) );
$cover_default = '#ffffff';
// Background.
$background = sanitize_hex_color_no_hash( get_theme_mod( 'background_color' ) );
$background_default = 'f5efe0';
ob_start();
/**
* Note Styles are applied in this order:
* 1. Element specific
* 2. Helper classes
*
* This enables all helper classes to overwrite base element styles,
* meaning that any color classes applied in the block editor will
* have a higher priority than the base element styles.
*/
// Front-End Styles.
if ( 'front-end' === $type ) {
// Auto-calculated colors.
$elements_definitions = twentytwenty_get_elements_array();
foreach ( $elements_definitions as $context => $props ) {
foreach ( $props as $key => $definitions ) {
foreach ( $definitions as $property => $elements ) {
/*
* If we don't have an elements array or it is empty
* then skip this iteration early;
*/
if ( ! is_array( $elements ) || empty( $elements ) ) {
continue;
}
$val = twentytwenty_get_color_for_area( $context, $key );
if ( $val ) {
twentytwenty_generate_css( implode( ',', $elements ), $property, $val );
}
}
}
}
if ( $cover && $cover !== $cover_default ) {
twentytwenty_generate_css( '.overlay-header .header-inner', 'color', $cover );
twentytwenty_generate_css( '.cover-header .entry-header *', 'color', $cover );
}
// Block Editor Styles.
} elseif ( 'block-editor' === $type ) {
// Colors.
// Accent color.
if ( $accent && $accent !== $accent_default ) {
twentytwenty_generate_css( '.has-accent-color, .editor-styles-wrapper .editor-block-list__layout a, .editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter, .editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link, .editor-styles-wrapper .wp-block-pullquote::before, .editor-styles-wrapper .wp-block-file .wp-block-file__textlink', 'color', $accent );
twentytwenty_generate_css( '.editor-styles-wrapper .wp-block-quote', 'border-color', $accent, '' );
twentytwenty_generate_css( '.has-accent-background-color, .editor-styles-wrapper .wp-block-button__link, .editor-styles-wrapper .wp-block-file__button', 'background-color', $accent );
}
// Background color.
if ( $background && $background !== $background_default ) {
twentytwenty_generate_css( '.editor-styles-wrapper', 'background', '#' . $background );
}
// Borders color.
if ( $borders && $borders !== $borders_default ) {
twentytwenty_generate_css( '.editor-styles-wrapper .wp-block-code, .editor-styles-wrapper pre, .editor-styles-wrapper .wp-block-preformatted pre, .editor-styles-wrapper .wp-block-verse pre, .editor-styles-wrapper fieldset, .editor-styles-wrapper .wp-block-table, .editor-styles-wrapper .wp-block-table *, .editor-styles-wrapper .wp-block-table.is-style-stripes, .editor-styles-wrapper .wp-block-latest-posts.is-grid li', 'border-color', $borders );
twentytwenty_generate_css( '.editor-styles-wrapper .wp-block-table caption, .editor-styles-wrapper .wp-block-table.is-style-stripes tbody tr:nth-child(odd)', 'background-color', $borders );
}
// Text color.
if ( $body && $body !== $body_default ) {
twentytwenty_generate_css( 'body .editor-styles-wrapper, .editor-post-title__block .editor-post-title__input, .editor-post-title__block .editor-post-title__input:focus', 'color', $body );
}
// Secondary color.
if ( $secondary && $secondary !== $secondary_default ) {
twentytwenty_generate_css( '.editor-styles-wrapper figcaption, .editor-styles-wrapper cite, .editor-styles-wrapper .wp-block-quote__citation, .editor-styles-wrapper .wp-block-quote cite, .editor-styles-wrapper .wp-block-quote footer, .editor-styles-wrapper .wp-block-pullquote__citation, .editor-styles-wrapper .wp-block-pullquote cite, .editor-styles-wrapper .wp-block-pullquote footer, .editor-styles-wrapper ul.wp-block-archives li, .editor-styles-wrapper ul.wp-block-categories li, .editor-styles-wrapper ul.wp-block-latest-posts li, .editor-styles-wrapper ul.wp-block-categories__list li, .editor-styles-wrapper .wp-block-latest-comments time, .editor-styles-wrapper .wp-block-latest-posts time', 'color', $secondary );
}
// Header Footer Background Color.
if ( $header_footer_background && $header_footer_background !== $header_footer_background_default ) {
twentytwenty_generate_css( '.editor-styles-wrapper .wp-block-pullquote::before', 'background-color', $header_footer_background );
}
} elseif ( 'classic-editor' === $type ) {
// Colors.
// Accent color.
if ( $accent && $accent !== $accent_default ) {
twentytwenty_generate_css( 'body#tinymce.wp-editor a', 'color', $accent );
twentytwenty_generate_css( 'body#tinymce.wp-editor blockquote, body#tinymce.wp-editor .wp-block-quote', 'border-color', $accent, '', ' !important' );
twentytwenty_generate_css( $buttons_targets, 'background-color', $accent );
}
// Background color.
if ( $background && $background !== $background_default ) {
twentytwenty_generate_css( 'body#tinymce.wp-editor', 'background', '#' . $background );
}
}
// Return the results.
return ob_get_clean();
}
}