custom-css.php (9288B)
1 <?php 2 /** 3 * Twenty Twenty Custom CSS 4 * 5 * @package WordPress 6 * @subpackage Twenty_Twenty 7 * @since Twenty Twenty 1.0 8 */ 9 10 if ( ! function_exists( 'twentytwenty_generate_css' ) ) { 11 12 /** 13 * Generate CSS. 14 * 15 * @since Twenty Twenty 1.0 16 * 17 * @param string $selector The CSS selector. 18 * @param string $style The CSS style. 19 * @param string $value The CSS value. 20 * @param string $prefix The CSS prefix. 21 * @param string $suffix The CSS suffix. 22 * @param bool $echo Echo the styles. 23 */ 24 function twentytwenty_generate_css( $selector, $style, $value, $prefix = '', $suffix = '', $echo = true ) { 25 26 $return = ''; 27 28 /* 29 * Bail early if we have no $selector elements or properties and $value. 30 */ 31 if ( ! $value || ! $selector ) { 32 33 return; 34 } 35 36 $return = sprintf( '%s { %s: %s; }', $selector, $style, $prefix . $value . $suffix ); 37 38 if ( $echo ) { 39 40 echo $return; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- We need to double check this, but for now, we want to pass PHPCS ;) 41 42 } 43 44 return $return; 45 46 } 47 } 48 49 if ( ! function_exists( 'twentytwenty_get_customizer_css' ) ) { 50 51 /** 52 * Get CSS Built from Customizer Options. 53 * Build CSS reflecting colors, fonts and other options set in the Customizer, and return them for output. 54 * 55 * @since Twenty Twenty 1.0 56 * 57 * @param string $type Whether to return CSS for the "front-end", "block-editor", or "classic-editor". 58 */ 59 function twentytwenty_get_customizer_css( $type = 'front-end' ) { 60 61 // Get variables. 62 $body = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'text' ) ); 63 $body_default = '#000000'; 64 $secondary = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'secondary' ) ); 65 $secondary_default = '#6d6d6d'; 66 $borders = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'borders' ) ); 67 $borders_default = '#dcd7ca'; 68 $accent = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'accent' ) ); 69 $accent_default = '#cd2653'; 70 71 // Header. 72 $header_footer_background = sanitize_hex_color( twentytwenty_get_color_for_area( 'header-footer', 'background' ) ); 73 $header_footer_background_default = '#ffffff'; 74 75 // Cover. 76 $cover = sanitize_hex_color( get_theme_mod( 'cover_template_overlay_text_color' ) ); 77 $cover_default = '#ffffff'; 78 79 // Background. 80 $background = sanitize_hex_color_no_hash( get_theme_mod( 'background_color' ) ); 81 $background_default = 'f5efe0'; 82 83 ob_start(); 84 85 /* 86 * Note – Styles are applied in this order: 87 * 1. Element specific 88 * 2. Helper classes 89 * 90 * This enables all helper classes to overwrite base element styles, 91 * meaning that any color classes applied in the block editor will 92 * have a higher priority than the base element styles. 93 */ 94 95 // Front-End Styles. 96 if ( 'front-end' === $type ) { 97 98 // Auto-calculated colors. 99 $elements_definitions = twentytwenty_get_elements_array(); 100 foreach ( $elements_definitions as $context => $props ) { 101 foreach ( $props as $key => $definitions ) { 102 foreach ( $definitions as $property => $elements ) { 103 /* 104 * If we don't have an elements array or it is empty 105 * then skip this iteration early; 106 */ 107 if ( ! is_array( $elements ) || empty( $elements ) ) { 108 continue; 109 } 110 $val = twentytwenty_get_color_for_area( $context, $key ); 111 if ( $val ) { 112 twentytwenty_generate_css( implode( ',', $elements ), $property, $val ); 113 } 114 } 115 } 116 } 117 118 if ( $cover && $cover !== $cover_default ) { 119 twentytwenty_generate_css( '.overlay-header .header-inner', 'color', $cover ); 120 twentytwenty_generate_css( '.cover-header .entry-header *', 'color', $cover ); 121 } 122 123 // Block Editor Styles. 124 } elseif ( 'block-editor' === $type ) { 125 126 // Colors. 127 // Accent color. 128 if ( $accent && $accent !== $accent_default ) { 129 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 ); 130 twentytwenty_generate_css( '.editor-styles-wrapper .wp-block-quote', 'border-color', $accent, '' ); 131 twentytwenty_generate_css( '.has-accent-background-color, .editor-styles-wrapper .wp-block-button__link, .editor-styles-wrapper .wp-block-file__button', 'background-color', $accent ); 132 } 133 134 // Background color. 135 if ( $background && $background !== $background_default ) { 136 twentytwenty_generate_css( '.editor-styles-wrapper', 'background-color', '#' . $background ); 137 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 ); 138 } 139 140 // Borders color. 141 if ( $borders && $borders !== $borders_default ) { 142 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 ); 143 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 ); 144 } 145 146 // Text color. 147 if ( $body && $body !== $body_default ) { 148 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 ); 149 } 150 151 // Secondary color. 152 if ( $secondary && $secondary !== $secondary_default ) { 153 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 ); 154 } 155 156 // Header Footer Background Color. 157 if ( $header_footer_background && $header_footer_background !== $header_footer_background_default ) { 158 twentytwenty_generate_css( '.editor-styles-wrapper .wp-block-pullquote::before', 'background-color', $header_footer_background ); 159 } 160 } elseif ( 'classic-editor' === $type ) { 161 162 // Colors. 163 // Accent color. 164 if ( $accent && $accent !== $accent_default ) { 165 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 ); 166 twentytwenty_generate_css( 'body#tinymce.wp-editor.content blockquote, body#tinymce.wp-editor.content .wp-block-quote', 'border-color', $accent, '', ' !important' ); 167 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 ); 168 } 169 170 // Background color. 171 if ( $background && $background !== $background_default ) { 172 twentytwenty_generate_css( 'body#tinymce.wp-editor.content', 'background-color', '#' . $background ); 173 } 174 175 // Text color. 176 if ( $body && $body !== $body_default ) { 177 twentytwenty_generate_css( 'body#tinymce.wp-editor.content', 'color', $body ); 178 } 179 180 // Secondary color. 181 if ( $secondary && $secondary !== $secondary_default ) { 182 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 ); 183 } 184 185 // Borders color. 186 if ( $borders && $borders !== $borders_default ) { 187 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 ); 188 } 189 } 190 191 // Return the results. 192 return ob_get_clean(); 193 194 } 195 }