[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Twenty Twenty functions and definitions
   4   *
   5   * @link https://developer.wordpress.org/themes/basics/theme-functions/
   6   *
   7   * @package WordPress
   8   * @subpackage Twenty_Twenty
   9   * @since Twenty Twenty 1.0
  10   */
  11  
  12  /**
  13   * Table of Contents:
  14   * Theme Support
  15   * Required Files
  16   * Register Styles
  17   * Register Scripts
  18   * Register Menus
  19   * Custom Logo
  20   * WP Body Open
  21   * Register Sidebars
  22   * Enqueue Block Editor Assets
  23   * Enqueue Classic Editor Styles
  24   * Block Editor Settings
  25   */
  26  
  27  /**
  28   * Sets up theme defaults and registers support for various WordPress features.
  29   *
  30   * Note that this function is hooked into the after_setup_theme hook, which
  31   * runs before the init hook. The init hook is too late for some features, such
  32   * as indicating support for post thumbnails.
  33   *
  34   * @since Twenty Twenty 1.0
  35   */
  36  function twentytwenty_theme_support() {
  37  
  38      // Add default posts and comments RSS feed links to head.
  39      add_theme_support( 'automatic-feed-links' );
  40  
  41      // Custom background color.
  42      add_theme_support(
  43          'custom-background',
  44          array(
  45              'default-color' => 'f5efe0',
  46          )
  47      );
  48  
  49      // Set content-width.
  50      global $content_width;
  51      if ( ! isset( $content_width ) ) {
  52          $content_width = 580;
  53      }
  54  
  55      /*
  56       * Enable support for Post Thumbnails on posts and pages.
  57       *
  58       * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
  59       */
  60      add_theme_support( 'post-thumbnails' );
  61  
  62      // Set post thumbnail size.
  63      set_post_thumbnail_size( 1200, 9999 );
  64  
  65      // Add custom image size used in Cover Template.
  66      add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );
  67  
  68      // Custom logo.
  69      $logo_width  = 120;
  70      $logo_height = 90;
  71  
  72      // If the retina setting is active, double the recommended width and height.
  73      if ( get_theme_mod( 'retina_logo', false ) ) {
  74          $logo_width  = floor( $logo_width * 2 );
  75          $logo_height = floor( $logo_height * 2 );
  76      }
  77  
  78      add_theme_support(
  79          'custom-logo',
  80          array(
  81              'height'      => $logo_height,
  82              'width'       => $logo_width,
  83              'flex-height' => true,
  84              'flex-width'  => true,
  85          )
  86      );
  87  
  88      /*
  89       * Let WordPress manage the document title.
  90       * By adding theme support, we declare that this theme does not use a
  91       * hard-coded <title> tag in the document head, and expect WordPress to
  92       * provide it for us.
  93       */
  94      add_theme_support( 'title-tag' );
  95  
  96      /*
  97       * Switch default core markup for search form, comment form, and comments
  98       * to output valid HTML5.
  99       */
 100      add_theme_support(
 101          'html5',
 102          array(
 103              'search-form',
 104              'comment-form',
 105              'comment-list',
 106              'gallery',
 107              'caption',
 108              'script',
 109              'style',
 110              'navigation-widgets',
 111          )
 112      );
 113  
 114      // Add support for full and wide align images.
 115      add_theme_support( 'align-wide' );
 116  
 117      // Add support for responsive embeds.
 118      add_theme_support( 'responsive-embeds' );
 119  
 120      /*
 121       * Adds starter content to highlight the theme on fresh sites.
 122       * This is done conditionally to avoid loading the starter content on every
 123       * page load, as it is a one-off operation only needed once in the customizer.
 124       */
 125      if ( is_customize_preview() ) {
 126          require get_template_directory() . '/inc/starter-content.php';
 127          add_theme_support( 'starter-content', twentytwenty_get_starter_content() );
 128      }
 129  
 130      // Add theme support for selective refresh for widgets.
 131      add_theme_support( 'customize-selective-refresh-widgets' );
 132  
 133      /*
 134       * Adds `async` and `defer` support for scripts registered or enqueued
 135       * by the theme.
 136       */
 137      $loader = new TwentyTwenty_Script_Loader();
 138      if ( version_compare( $GLOBALS['wp_version'], '6.3', '<' ) ) {
 139          add_filter( 'script_loader_tag', array( $loader, 'filter_script_loader_tag' ), 10, 2 );
 140      } else {
 141          add_filter( 'print_scripts_array', array( $loader, 'migrate_legacy_strategy_script_data' ), 100 );
 142      }
 143  }
 144  
 145  add_action( 'after_setup_theme', 'twentytwenty_theme_support' );
 146  
 147  /**
 148   * REQUIRED FILES
 149   * Include required files.
 150   */
 151  require get_template_directory() . '/inc/template-tags.php';
 152  
 153  // Handle SVG icons.
 154  require get_template_directory() . '/classes/class-twentytwenty-svg-icons.php';
 155  require get_template_directory() . '/inc/svg-icons.php';
 156  
 157  // Handle Customizer settings.
 158  require get_template_directory() . '/classes/class-twentytwenty-customize.php';
 159  
 160  // Require Separator Control class.
 161  require get_template_directory() . '/classes/class-twentytwenty-separator-control.php';
 162  
 163  // Custom comment walker.
 164  require get_template_directory() . '/classes/class-twentytwenty-walker-comment.php';
 165  
 166  // Custom page walker.
 167  require get_template_directory() . '/classes/class-twentytwenty-walker-page.php';
 168  
 169  // Custom script loader class.
 170  require get_template_directory() . '/classes/class-twentytwenty-script-loader.php';
 171  
 172  // Non-latin language handling.
 173  require get_template_directory() . '/classes/class-twentytwenty-non-latin-languages.php';
 174  
 175  // Custom CSS.
 176  require get_template_directory() . '/inc/custom-css.php';
 177  
 178  /**
 179   * Registers block patterns and pattern categories.
 180   *
 181   * @since Twenty Twenty 2.8
 182   */
 183  function twentytwenty_register_block_patterns() {
 184      require get_template_directory() . '/inc/block-patterns.php';
 185  }
 186  
 187  add_action( 'init', 'twentytwenty_register_block_patterns' );
 188  
 189  /**
 190   * Registers and Enqueues Styles.
 191   *
 192   * @since Twenty Twenty 1.0
 193   * @since Twenty Twenty 2.6 Enqueue the CSS file for the variable font.
 194   */
 195  function twentytwenty_register_styles() {
 196  
 197      $theme_version = wp_get_theme()->get( 'Version' );
 198  
 199      wp_enqueue_style( 'twentytwenty-style', get_stylesheet_uri(), array(), $theme_version );
 200      wp_style_add_data( 'twentytwenty-style', 'rtl', 'replace' );
 201  
 202      // Enqueue the CSS file for the variable font, Inter.
 203      wp_enqueue_style( 'twentytwenty-fonts', get_theme_file_uri( '/assets/css/font-inter.css' ), array(), $theme_version, 'all' );
 204  
 205      // Add output of Customizer settings as inline style.
 206      $customizer_css = twentytwenty_get_customizer_css( 'front-end' );
 207      if ( $customizer_css ) {
 208          wp_add_inline_style( 'twentytwenty-style', $customizer_css );
 209      }
 210  
 211      // Add print CSS.
 212      wp_enqueue_style( 'twentytwenty-print-style', get_template_directory_uri() . '/print.css', null, $theme_version, 'print' );
 213  }
 214  
 215  add_action( 'wp_enqueue_scripts', 'twentytwenty_register_styles' );
 216  
 217  /**
 218   * Registers and Enqueues Scripts.
 219   *
 220   * @since Twenty Twenty 1.0
 221   */
 222  function twentytwenty_register_scripts() {
 223  
 224      $theme_version = wp_get_theme()->get( 'Version' );
 225  
 226      if ( ( ! is_admin() ) && is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
 227          wp_enqueue_script( 'comment-reply' );
 228      }
 229  
 230      /*
 231       * This script is intentionally printed in the head because it involves the page header. The `defer` script loading
 232       * strategy ensures that it does not block rendering; being in the head it will start loading earlier so that it
 233       * will execute sooner once the DOM has loaded. The $args array is not used here to avoid unintentional footer
 234       * placement in WP<6.3; the wp_script_add_data() call is used instead.
 235       */
 236      wp_enqueue_script( 'twentytwenty-js', get_template_directory_uri() . '/assets/js/index.js', array(), $theme_version );
 237      wp_script_add_data( 'twentytwenty-js', 'strategy', 'defer' );
 238  }
 239  
 240  add_action( 'wp_enqueue_scripts', 'twentytwenty_register_scripts' );
 241  
 242  /**
 243   * Fixes skip link focus in IE11.
 244   *
 245   * This does not enqueue the script because it is tiny and because it is only for IE11,
 246   * thus it does not warrant having an entire dedicated blocking script being loaded.
 247   *
 248   * @since Twenty Twenty 1.0
 249   * @deprecated Twenty Twenty 2.3 Removed from wp_print_footer_scripts action.
 250   *
 251   * @link https://git.io/vWdr2
 252   */
 253  function twentytwenty_skip_link_focus_fix() {
 254      // The following is minified via `terser --compress --mangle -- assets/js/skip-link-focus-fix.js`.
 255      ?>
 256      <script>
 257      /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1);
 258      </script>
 259      <?php
 260  }
 261  
 262  /**
 263   * Enqueues non-latin language styles.
 264   *
 265   * @since Twenty Twenty 1.0
 266   *
 267   * @return void
 268   */
 269  function twentytwenty_non_latin_languages() {
 270      $custom_css = TwentyTwenty_Non_Latin_Languages::get_non_latin_css( 'front-end' );
 271  
 272      if ( $custom_css ) {
 273          wp_add_inline_style( 'twentytwenty-style', $custom_css );
 274      }
 275  }
 276  
 277  add_action( 'wp_enqueue_scripts', 'twentytwenty_non_latin_languages' );
 278  
 279  /**
 280   * Registers navigation menus.
 281   *
 282   * This theme uses wp_nav_menu() in five places.
 283   *
 284   * @since Twenty Twenty 1.0
 285   */
 286  function twentytwenty_menus() {
 287  
 288      $locations = array(
 289          'primary'  => __( 'Desktop Horizontal Menu', 'twentytwenty' ),
 290          'expanded' => __( 'Desktop Expanded Menu', 'twentytwenty' ),
 291          'mobile'   => __( 'Mobile Menu', 'twentytwenty' ),
 292          'footer'   => __( 'Footer Menu', 'twentytwenty' ),
 293          'social'   => __( 'Social Menu', 'twentytwenty' ),
 294      );
 295  
 296      register_nav_menus( $locations );
 297  }
 298  
 299  add_action( 'init', 'twentytwenty_menus' );
 300  
 301  /**
 302   * Gets the information about the logo.
 303   *
 304   * @since Twenty Twenty 1.0
 305   *
 306   * @param string $html The HTML output from get_custom_logo() (core function).
 307   * @return string
 308   */
 309  function twentytwenty_get_custom_logo( $html ) {
 310  
 311      $logo_id = get_theme_mod( 'custom_logo' );
 312  
 313      if ( ! $logo_id ) {
 314          return $html;
 315      }
 316  
 317      $logo = wp_get_attachment_image_src( $logo_id, 'full' );
 318  
 319      if ( $logo ) {
 320          // For clarity.
 321          $logo_width  = esc_attr( $logo[1] );
 322          $logo_height = esc_attr( $logo[2] );
 323  
 324          // If the retina logo setting is active, reduce the width/height by half.
 325          if ( get_theme_mod( 'retina_logo', false ) ) {
 326              $logo_width  = floor( $logo_width / 2 );
 327              $logo_height = floor( $logo_height / 2 );
 328  
 329              $search = array(
 330                  '/width=\"\d+\"/iU',
 331                  '/height=\"\d+\"/iU',
 332              );
 333  
 334              $replace = array(
 335                  "width=\"{$logo_width}\"",
 336                  "height=\"{$logo_height}\"",
 337              );
 338  
 339              // Add a style attribute with the height, or append the height to the style attribute if the style attribute already exists.
 340              if ( false === strpos( $html, ' style=' ) ) {
 341                  $search[]  = '/(src=)/';
 342                  $replace[] = "style=\"height: {$logo_height}px;\" src=";
 343              } else {
 344                  $search[]  = '/(style="[^"]*)/';
 345                  $replace[] = "$1 height: {$logo_height}px;";
 346              }
 347  
 348              $html = preg_replace( $search, $replace, $html );
 349  
 350          }
 351      }
 352  
 353      return $html;
 354  }
 355  
 356  add_filter( 'get_custom_logo', 'twentytwenty_get_custom_logo' );
 357  
 358  if ( ! function_exists( 'wp_body_open' ) ) {
 359  
 360      /**
 361       * Shim for wp_body_open(), ensuring backward compatibility with versions of WordPress older than 5.2.
 362       *
 363       * @since Twenty Twenty 1.0
 364       */
 365  	function wp_body_open() {
 366          /**
 367           * Triggered after the opening <body> tag.
 368           *
 369           * @since Twenty Twenty 1.0
 370           */
 371          do_action( 'wp_body_open' );
 372      }
 373  }
 374  
 375  /**
 376   * Include a skip to content link at the top of the page so that users can bypass the menu.
 377   *
 378   * @since Twenty Twenty 1.0
 379   */
 380  function twentytwenty_skip_link() {
 381      echo '<a class="skip-link screen-reader-text" href="#site-content">' .
 382          /* translators: Hidden accessibility text. */
 383          __( 'Skip to the content', 'twentytwenty' ) .
 384      '</a>';
 385  }
 386  
 387  add_action( 'wp_body_open', 'twentytwenty_skip_link', 5 );
 388  
 389  /**
 390   * Registers widget areas.
 391   *
 392   * @since Twenty Twenty 1.0
 393   *
 394   * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
 395   */
 396  function twentytwenty_sidebar_registration() {
 397  
 398      // Arguments used in all register_sidebar() calls.
 399      $shared_args = array(
 400          'before_title'  => '<h2 class="widget-title subheading heading-size-3">',
 401          'after_title'   => '</h2>',
 402          'before_widget' => '<div class="widget %2$s"><div class="widget-content">',
 403          'after_widget'  => '</div></div>',
 404      );
 405  
 406      // Footer #1.
 407      register_sidebar(
 408          array_merge(
 409              $shared_args,
 410              array(
 411                  'name'        => __( 'Footer #1', 'twentytwenty' ),
 412                  'id'          => 'sidebar-1',
 413                  'description' => __( 'Widgets in this area will be displayed in the first column in the footer.', 'twentytwenty' ),
 414              )
 415          )
 416      );
 417  
 418      // Footer #2.
 419      register_sidebar(
 420          array_merge(
 421              $shared_args,
 422              array(
 423                  'name'        => __( 'Footer #2', 'twentytwenty' ),
 424                  'id'          => 'sidebar-2',
 425                  'description' => __( 'Widgets in this area will be displayed in the second column in the footer.', 'twentytwenty' ),
 426              )
 427          )
 428      );
 429  }
 430  
 431  add_action( 'widgets_init', 'twentytwenty_sidebar_registration' );
 432  
 433  /**
 434   * Enqueues supplemental block editor styles.
 435   *
 436   * @since Twenty Twenty 1.0
 437   * @since Twenty Twenty 2.4 Removed a script related to the obsolete Squared style of Button blocks.
 438   * @since Twenty Twenty 2.6 Enqueue the CSS file for the variable font.
 439   */
 440  function twentytwenty_block_editor_styles() {
 441  
 442      $theme_version = wp_get_theme()->get( 'Version' );
 443  
 444      // Enqueue the editor styles.
 445      wp_enqueue_style( 'twentytwenty-block-editor-styles', get_theme_file_uri( '/assets/css/editor-style-block.css' ), array(), $theme_version, 'all' );
 446      wp_style_add_data( 'twentytwenty-block-editor-styles', 'rtl', 'replace' );
 447  
 448      // Add inline style from the Customizer.
 449      $customizer_css = twentytwenty_get_customizer_css( 'block-editor' );
 450      if ( $customizer_css ) {
 451          wp_add_inline_style( 'twentytwenty-block-editor-styles', $customizer_css );
 452      }
 453  
 454      // Enqueue the CSS file for the variable font, Inter.
 455      wp_enqueue_style( 'twentytwenty-fonts', get_theme_file_uri( '/assets/css/font-inter.css' ), array(), $theme_version, 'all' );
 456  
 457      // Add inline style for non-latin fonts.
 458      $custom_css = TwentyTwenty_Non_Latin_Languages::get_non_latin_css( 'block-editor' );
 459      if ( $custom_css ) {
 460          wp_add_inline_style( 'twentytwenty-block-editor-styles', $custom_css );
 461      }
 462  }
 463  
 464  if ( is_admin() && version_compare( $GLOBALS['wp_version'], '6.3', '>=' ) ) {
 465      add_action( 'enqueue_block_assets', 'twentytwenty_block_editor_styles', 1, 1 );
 466  } else {
 467      add_action( 'enqueue_block_editor_assets', 'twentytwenty_block_editor_styles', 1, 1 );
 468  }
 469  
 470  /**
 471   * Enqueues classic editor styles.
 472   *
 473   * @since Twenty Twenty 1.0
 474   * @since Twenty Twenty 2.6 Enqueue the CSS file for the variable font.
 475   */
 476  function twentytwenty_classic_editor_styles() {
 477  
 478      $classic_editor_styles = array(
 479          '/assets/css/editor-style-classic.css',
 480          '/assets/css/font-inter.css',
 481      );
 482  
 483      add_editor_style( $classic_editor_styles );
 484  }
 485  
 486  add_action( 'init', 'twentytwenty_classic_editor_styles' );
 487  
 488  /**
 489   * Output Customizer settings in the classic editor.
 490   * Adds styles to the head of the TinyMCE iframe. Kudos to @Otto42 for the original solution.
 491   *
 492   * @since Twenty Twenty 1.0
 493   *
 494   * @param array $mce_init TinyMCE styles.
 495   * @return array TinyMCE styles.
 496   */
 497  function twentytwenty_add_classic_editor_customizer_styles( $mce_init ) {
 498  
 499      $styles = twentytwenty_get_customizer_css( 'classic-editor' );
 500  
 501      if ( ! $styles ) {
 502          return $mce_init;
 503      }
 504  
 505      if ( ! isset( $mce_init['content_style'] ) ) {
 506          $mce_init['content_style'] = $styles . ' ';
 507      } else {
 508          $mce_init['content_style'] .= ' ' . $styles . ' ';
 509      }
 510  
 511      return $mce_init;
 512  }
 513  
 514  add_filter( 'tiny_mce_before_init', 'twentytwenty_add_classic_editor_customizer_styles' );
 515  
 516  /**
 517   * Output non-latin font styles in the classic editor.
 518   * Adds styles to the head of the TinyMCE iframe. Kudos to @Otto42 for the original solution.
 519   *
 520   * @param array $mce_init TinyMCE styles.
 521   * @return array TinyMCE styles.
 522   */
 523  function twentytwenty_add_classic_editor_non_latin_styles( $mce_init ) {
 524  
 525      $styles = TwentyTwenty_Non_Latin_Languages::get_non_latin_css( 'classic-editor' );
 526  
 527      // Return if there are no styles to add.
 528      if ( ! $styles ) {
 529          return $mce_init;
 530      }
 531  
 532      if ( ! isset( $mce_init['content_style'] ) ) {
 533          $mce_init['content_style'] = $styles . ' ';
 534      } else {
 535          $mce_init['content_style'] .= ' ' . $styles . ' ';
 536      }
 537  
 538      return $mce_init;
 539  }
 540  
 541  add_filter( 'tiny_mce_before_init', 'twentytwenty_add_classic_editor_non_latin_styles' );
 542  
 543  /**
 544   * Block Editor Settings.
 545   * Adds custom colors and font sizes to the block editor.
 546   *
 547   * @since Twenty Twenty 1.0
 548   */
 549  function twentytwenty_block_editor_settings() {
 550  
 551      // Block Editor Palette.
 552      $editor_color_palette = array(
 553          array(
 554              'name'  => __( 'Accent Color', 'twentytwenty' ),
 555              'slug'  => 'accent',
 556              'color' => twentytwenty_get_color_for_area( 'content', 'accent' ),
 557          ),
 558          array(
 559              'name'  => _x( 'Primary', 'color', 'twentytwenty' ),
 560              'slug'  => 'primary',
 561              'color' => twentytwenty_get_color_for_area( 'content', 'text' ),
 562          ),
 563          array(
 564              'name'  => _x( 'Secondary', 'color', 'twentytwenty' ),
 565              'slug'  => 'secondary',
 566              'color' => twentytwenty_get_color_for_area( 'content', 'secondary' ),
 567          ),
 568          array(
 569              'name'  => __( 'Subtle Background', 'twentytwenty' ),
 570              'slug'  => 'subtle-background',
 571              'color' => twentytwenty_get_color_for_area( 'content', 'borders' ),
 572          ),
 573      );
 574  
 575      // Add the background option.
 576      $background_color = get_theme_mod( 'background_color' );
 577      if ( ! $background_color ) {
 578          $background_color_arr = get_theme_support( 'custom-background' );
 579          $background_color     = $background_color_arr[0]['default-color'];
 580      }
 581      $editor_color_palette[] = array(
 582          'name'  => __( 'Background Color', 'twentytwenty' ),
 583          'slug'  => 'background',
 584          'color' => '#' . $background_color,
 585      );
 586  
 587      // If we have accent colors, add them to the block editor palette.
 588      if ( $editor_color_palette ) {
 589          add_theme_support( 'editor-color-palette', $editor_color_palette );
 590      }
 591  
 592      // Block Editor Font Sizes.
 593      add_theme_support(
 594          'editor-font-sizes',
 595          array(
 596              array(
 597                  'name'      => _x( 'Small', 'Name of the small font size in the block editor', 'twentytwenty' ),
 598                  'shortName' => _x( 'S', 'Short name of the small font size in the block editor.', 'twentytwenty' ),
 599                  'size'      => 18,
 600                  'slug'      => 'small',
 601              ),
 602              array(
 603                  'name'      => _x( 'Regular', 'Name of the regular font size in the block editor', 'twentytwenty' ),
 604                  'shortName' => _x( 'M', 'Short name of the regular font size in the block editor.', 'twentytwenty' ),
 605                  'size'      => 21,
 606                  'slug'      => 'normal',
 607              ),
 608              array(
 609                  'name'      => _x( 'Large', 'Name of the large font size in the block editor', 'twentytwenty' ),
 610                  'shortName' => _x( 'L', 'Short name of the large font size in the block editor.', 'twentytwenty' ),
 611                  'size'      => 26.25,
 612                  'slug'      => 'large',
 613              ),
 614              array(
 615                  'name'      => _x( 'Larger', 'Name of the larger font size in the block editor', 'twentytwenty' ),
 616                  'shortName' => _x( 'XL', 'Short name of the larger font size in the block editor.', 'twentytwenty' ),
 617                  'size'      => 32,
 618                  'slug'      => 'larger',
 619              ),
 620          )
 621      );
 622  
 623      add_theme_support( 'editor-styles' );
 624  
 625      // If we have a dark background color then add support for dark editor style.
 626      // We can determine if the background color is dark by checking if the text-color is white.
 627      if ( '#ffffff' === strtolower( twentytwenty_get_color_for_area( 'content', 'text' ) ) ) {
 628          add_theme_support( 'dark-editor-style' );
 629      }
 630  }
 631  
 632  add_action( 'after_setup_theme', 'twentytwenty_block_editor_settings' );
 633  
 634  /**
 635   * Overwrite default more tag with styling and screen reader markup.
 636   *
 637   * @param string $html The default output HTML for the more tag.
 638   * @return string
 639   */
 640  function twentytwenty_read_more_tag( $html ) {
 641      return preg_replace( '/<a(.*)>(.*)<\/a>/iU', sprintf( '<div class="read-more-button-wrap"><a$1><span class="faux-button">$2</span> <span class="screen-reader-text">"%1$s"</span></a></div>', get_the_title( get_the_ID() ) ), $html );
 642  }
 643  
 644  add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );
 645  
 646  /**
 647   * Enqueues scripts for customizer controls & settings.
 648   *
 649   * @since Twenty Twenty 1.0
 650   *
 651   * @return void
 652   */
 653  function twentytwenty_customize_controls_enqueue_scripts() {
 654      $theme_version = wp_get_theme()->get( 'Version' );
 655  
 656      // Add main customizer js file.
 657      wp_enqueue_script( 'twentytwenty-customize', get_template_directory_uri() . '/assets/js/customize.js', array( 'jquery' ), $theme_version );
 658  
 659      // Add script for color calculations.
 660      wp_enqueue_script( 'twentytwenty-color-calculations', get_template_directory_uri() . '/assets/js/color-calculations.js', array( 'wp-color-picker' ), $theme_version );
 661  
 662      // Add script for controls.
 663      wp_enqueue_script( 'twentytwenty-customize-controls', get_template_directory_uri() . '/assets/js/customize-controls.js', array( 'twentytwenty-color-calculations', 'customize-controls', 'underscore', 'jquery' ), $theme_version );
 664      wp_localize_script( 'twentytwenty-customize-controls', 'twentyTwentyBgColors', twentytwenty_get_customizer_color_vars() );
 665  }
 666  
 667  add_action( 'customize_controls_enqueue_scripts', 'twentytwenty_customize_controls_enqueue_scripts' );
 668  
 669  /**
 670   * Enqueues scripts for the customizer preview.
 671   *
 672   * @since Twenty Twenty 1.0
 673   *
 674   * @return void
 675   */
 676  function twentytwenty_customize_preview_init() {
 677      $theme_version = wp_get_theme()->get( 'Version' );
 678  
 679      wp_enqueue_script( 'twentytwenty-customize-preview', get_theme_file_uri( '/assets/js/customize-preview.js' ), array( 'customize-preview', 'customize-selective-refresh', 'jquery' ), $theme_version, array( 'in_footer' => true ) );
 680      wp_localize_script( 'twentytwenty-customize-preview', 'twentyTwentyBgColors', twentytwenty_get_customizer_color_vars() );
 681      wp_localize_script( 'twentytwenty-customize-preview', 'twentyTwentyPreviewEls', twentytwenty_get_elements_array() );
 682  
 683      wp_add_inline_script(
 684          'twentytwenty-customize-preview',
 685          sprintf(
 686              'wp.customize.selectiveRefresh.partialConstructor[ %1$s ].prototype.attrs = %2$s;',
 687              wp_json_encode( 'cover_opacity' ),
 688              wp_json_encode( twentytwenty_customize_opacity_range() )
 689          )
 690      );
 691  }
 692  
 693  add_action( 'customize_preview_init', 'twentytwenty_customize_preview_init' );
 694  
 695  /**
 696   * Gets accessible color for an area.
 697   *
 698   * @since Twenty Twenty 1.0
 699   *
 700   * @param string $area    The area we want to get the colors for.
 701   * @param string $context Can be 'text' or 'accent'.
 702   * @return string Returns a HEX color.
 703   */
 704  function twentytwenty_get_color_for_area( $area = 'content', $context = 'text' ) {
 705  
 706      // Get the value from the theme-mod.
 707      $settings = get_theme_mod(
 708          'accent_accessible_colors',
 709          array(
 710              'content'       => array(
 711                  'text'      => '#000000',
 712                  'accent'    => '#cd2653',
 713                  'secondary' => '#6d6d6d',
 714                  'borders'   => '#dcd7ca',
 715              ),
 716              'header-footer' => array(
 717                  'text'      => '#000000',
 718                  'accent'    => '#cd2653',
 719                  'secondary' => '#6d6d6d',
 720                  'borders'   => '#dcd7ca',
 721              ),
 722          )
 723      );
 724  
 725      // If we have a value return it.
 726      if ( isset( $settings[ $area ] ) && isset( $settings[ $area ][ $context ] ) ) {
 727          return $settings[ $area ][ $context ];
 728      }
 729  
 730      // Return false if the option doesn't exist.
 731      return false;
 732  }
 733  
 734  /**
 735   * Returns an array of variables for the customizer preview.
 736   *
 737   * @since Twenty Twenty 1.0
 738   *
 739   * @return array
 740   */
 741  function twentytwenty_get_customizer_color_vars() {
 742      $colors = array(
 743          'content'       => array(
 744              'setting' => 'background_color',
 745          ),
 746          'header-footer' => array(
 747              'setting' => 'header_footer_background_color',
 748          ),
 749      );
 750      return $colors;
 751  }
 752  
 753  /**
 754   * Gets an array of elements.
 755   *
 756   * @since Twenty Twenty 1.0
 757   *
 758   * @return array
 759   */
 760  function twentytwenty_get_elements_array() {
 761  
 762      // The array is formatted like this:
 763      // [key-in-saved-setting][sub-key-in-setting][css-property] = [elements].
 764      $elements = array(
 765          'content'       => array(
 766              'accent'     => array(
 767                  'color'            => array( '.color-accent', '.color-accent-hover:hover', '.color-accent-hover:focus', ':root .has-accent-color', '.has-drop-cap:not(:focus):first-letter', '.wp-block-button.is-style-outline', 'a' ),
 768                  'border-color'     => array( 'blockquote', '.border-color-accent', '.border-color-accent-hover:hover', '.border-color-accent-hover:focus' ),
 769                  'background-color' => array( 'button', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file .wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.bg-accent', '.bg-accent-hover:hover', '.bg-accent-hover:focus', ':root .has-accent-background-color', '.comment-reply-link' ),
 770                  'fill'             => array( '.fill-children-accent', '.fill-children-accent *' ),
 771              ),
 772              'background' => array(
 773                  'color'            => array( ':root .has-background-color', 'button', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.wp-block-button', '.comment-reply-link', '.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)' ),
 774                  'background-color' => array( ':root .has-background-background-color' ),
 775              ),
 776              'text'       => array(
 777                  'color'            => array( 'body', '.entry-title a', ':root .has-primary-color' ),
 778                  'background-color' => array( ':root .has-primary-background-color' ),
 779              ),
 780              'secondary'  => array(
 781                  'color'            => array( 'cite', 'figcaption', '.wp-caption-text', '.post-meta', '.entry-content .wp-block-archives li', '.entry-content .wp-block-categories li', '.entry-content .wp-block-latest-posts li', '.wp-block-latest-comments__comment-date', '.wp-block-latest-posts__post-date', '.wp-block-embed figcaption', '.wp-block-image figcaption', '.wp-block-pullquote cite', '.comment-metadata', '.comment-respond .comment-notes', '.comment-respond .logged-in-as', '.pagination .dots', '.entry-content hr:not(.has-background)', 'hr.styled-separator', ':root .has-secondary-color' ),
 782                  'background-color' => array( ':root .has-secondary-background-color' ),
 783              ),
 784              'borders'    => array(
 785                  'border-color'        => array( 'pre', 'fieldset', 'input', 'textarea', 'table', 'table *', 'hr' ),
 786                  'background-color'    => array( 'caption', 'code', 'code', 'kbd', 'samp', '.wp-block-table.is-style-stripes tbody tr:nth-child(odd)', ':root .has-subtle-background-background-color' ),
 787                  'border-bottom-color' => array( '.wp-block-table.is-style-stripes' ),
 788                  'border-top-color'    => array( '.wp-block-latest-posts.is-grid li' ),
 789                  'color'               => array( ':root .has-subtle-background-color' ),
 790              ),
 791          ),
 792          'header-footer' => array(
 793              'accent'     => array(
 794                  'color'            => array( 'body:not(.overlay-header) .primary-menu > li > a', 'body:not(.overlay-header) .primary-menu > li > .icon', '.modal-menu a', '.footer-menu a, .footer-widgets a:where(:not(.wp-block-button__link))', '#site-footer .wp-block-button.is-style-outline', '.wp-block-pullquote:before', '.singular:not(.overlay-header) .entry-header a', '.archive-header a', '.header-footer-group .color-accent', '.header-footer-group .color-accent-hover:hover' ),
 795                  'background-color' => array( '.social-icons a', '#site-footer button:not(.toggle)', '#site-footer .button', '#site-footer .faux-button', '#site-footer .wp-block-button__link', '#site-footer .wp-block-file__button', '#site-footer input[type="button"]', '#site-footer input[type="reset"]', '#site-footer input[type="submit"]' ),
 796              ),
 797              'background' => array(
 798                  'color'            => array( '.social-icons a', 'body:not(.overlay-header) .primary-menu ul', '.header-footer-group button', '.header-footer-group .button', '.header-footer-group .faux-button', '.header-footer-group .wp-block-button:not(.is-style-outline) .wp-block-button__link', '.header-footer-group .wp-block-file__button', '.header-footer-group input[type="button"]', '.header-footer-group input[type="reset"]', '.header-footer-group input[type="submit"]' ),
 799                  'background-color' => array( '#site-header', '.footer-nav-widgets-wrapper', '#site-footer', '.menu-modal', '.menu-modal-inner', '.search-modal-inner', '.archive-header', '.singular .entry-header', '.singular .featured-media:before', '.wp-block-pullquote:before' ),
 800              ),
 801              'text'       => array(
 802                  'color'               => array( '.header-footer-group', 'body:not(.overlay-header) #site-header .toggle', '.menu-modal .toggle' ),
 803                  'background-color'    => array( 'body:not(.overlay-header) .primary-menu ul' ),
 804                  'border-bottom-color' => array( 'body:not(.overlay-header) .primary-menu > li > ul:after' ),
 805                  'border-left-color'   => array( 'body:not(.overlay-header) .primary-menu ul ul:after' ),
 806              ),
 807              'secondary'  => array(
 808                  'color' => array( '.site-description', 'body:not(.overlay-header) .toggle-inner .toggle-text', '.widget .post-date', '.widget .rss-date', '.widget_archive li', '.widget_categories li', '.widget cite', '.widget_pages li', '.widget_meta li', '.widget_nav_menu li', '.powered-by-wordpress', '.footer-credits .privacy-policy', '.to-the-top', '.singular .entry-header .post-meta', '.singular:not(.overlay-header) .entry-header .post-meta a' ),
 809              ),
 810              'borders'    => array(
 811                  'border-color'     => array( '.header-footer-group pre', '.header-footer-group fieldset', '.header-footer-group input', '.header-footer-group textarea', '.header-footer-group table', '.header-footer-group table *', '.footer-nav-widgets-wrapper', '#site-footer', '.menu-modal nav *', '.footer-widgets-outer-wrapper', '.footer-top' ),
 812                  'background-color' => array( '.header-footer-group table caption', 'body:not(.overlay-header) .header-inner .toggle-wrapper::before' ),
 813              ),
 814          ),
 815      );
 816  
 817      /**
 818       * Filters Twenty Twenty theme elements.
 819       *
 820       * @since Twenty Twenty 1.0
 821       *
 822       * @param array Array of elements.
 823       */
 824      return apply_filters( 'twentytwenty_get_elements_array', $elements );
 825  }