[ Index ]

PHP Cross Reference of WordPress

title

Body

[close]

/wp-content/themes/twentytwenty/inc/ -> custom-css.php (source)

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


Generated: Sat Dec 14 01:00:04 2019 Cross-referenced by PHPXref 0.7.1