WordPress/wp-content/themes/twentytwenty/inc/custom-css.php
audrasjb a0d3ee6717 Twenty Twenty: Fix style issues within iframed editor.
This changeset:
- Replaces `body` with `html` for the first CSS selector that makes text white against a dark background
- Moves `twentytwenty_block_editor_styles()` from the `enqueue_block_editor_assets` action to `enqueue_block_assets` for WordPress 6.3 and later
- Removes the obsolete `twentytwenty-block-editor-script` from the styles function to avoid an error in the iframe

Props floydwilde, poena, huzaifaalmesbah, greenshady, sabernhardt, audrasjb, pooja1210, shailu25, joemcgill.
Fixes #59086.




Built from https://develop.svn.wordpress.org/trunk@56783


git-svn-id: http://core.svn.wordpress.org/trunk@56295 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2023-10-04 20:56:24 +00:00

194 lines
9.1 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 Twenty Twenty 1.0
*/
if ( ! function_exists( 'twentytwenty_generate_css' ) ) {
/**
* Generate CSS.
*
* @since Twenty Twenty 1.0
*
* @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 $display Print the styles.
*/
function twentytwenty_generate_css( $selector, $style, $value, $prefix = '', $suffix = '', $display = 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 ( $display ) {
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.
*
* @since Twenty Twenty 1.0
*
* @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';
// 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( ':root .has-accent-color, .editor-styles-wrapper 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-color', '#' . $background );
twentytwenty_generate_css( '.has-background.has-primary-background-color:not(.has-text-color),.has-background.has-primary-background-color *:not(.has-text-color),.has-background.has-accent-background-color:not(.has-text-color),.has-background.has-accent-background-color *:not(.has-text-color)', 'color', '#' . $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( 'html .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.content a, body#tinymce.wp-editor.content a:focus, body#tinymce.wp-editor.content a:hover', 'color', $accent );
twentytwenty_generate_css( 'body#tinymce.wp-editor.content blockquote, body#tinymce.wp-editor.content .wp-block-quote', 'border-color', $accent, '', ' !important' );
twentytwenty_generate_css( 'body#tinymce.wp-editor.content button, body#tinymce.wp-editor.content .faux-button, body#tinymce.wp-editor.content .wp-block-button__link, body#tinymce.wp-editor.content .wp-block-file__button, body#tinymce.wp-editor.content input[type=\'button\'], body#tinymce.wp-editor.content input[type=\'reset\'], body#tinymce.wp-editor.content input[type=\'submit\']', 'background-color', $accent );
}
// Background color.
if ( $background && $background !== $background_default ) {
twentytwenty_generate_css( 'body#tinymce.wp-editor.content', 'background-color', '#' . $background );
}
// Text color.
if ( $body && $body !== $body_default ) {
twentytwenty_generate_css( 'body#tinymce.wp-editor.content', 'color', $body );
}
// Secondary color.
if ( $secondary && $secondary !== $secondary_default ) {
twentytwenty_generate_css( 'body#tinymce.wp-editor.content hr:not(.is-style-dots), body#tinymce.wp-editor.content cite, body#tinymce.wp-editor.content figcaption, body#tinymce.wp-editor.content .wp-caption-text, body#tinymce.wp-editor.content .wp-caption-dd, body#tinymce.wp-editor.content .gallery-caption', 'color', $secondary );
}
// Borders color.
if ( $borders && $borders !== $borders_default ) {
twentytwenty_generate_css( 'body#tinymce.wp-editor.content pre, body#tinymce.wp-editor.content hr, body#tinymce.wp-editor.content fieldset,body#tinymce.wp-editor.content input, body#tinymce.wp-editor.content textarea', 'border-color', $borders );
}
}
// Return the results.
return ob_get_clean();
}
}