forked from WordPress/wordpress-develop
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcustom-css.php
More file actions
195 lines (161 loc) · 9.04 KB
/
custom-css.php
File metadata and controls
195 lines (161 loc) · 9.04 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<?php
/**
* Twenty Twenty Custom CSS
*
* @package WordPress
* @subpackage Twenty_Twenty
* @since Twenty Twenty 1.0
*/
if ( ! function_exists( 'twentytwenty_generate_css' ) ) {
/**
* Generates 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.
* @return string Generated CSS.
*/
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;
}
return $return;
}
}
if ( ! function_exists( 'twentytwenty_get_customizer_css' ) ) {
/**
* Gets CSS Built from Customizer Options.
* Builds CSS reflecting colors, fonts and other options set in the Customizer, and returns them for output.
*
* @since Twenty Twenty 1.0
*
* @param string $type Whether to return CSS for the "front-end", "block-editor", or "classic-editor".
* @return string CSS styles built from Customizer options.
*/
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();
}
}