custom-css.php 9.0 KB

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