ru-se.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

functions.php (27602B)


      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 	/*
    115 	 * Make theme available for translation.
    116 	 * Translations can be filed in the /languages/ directory.
    117 	 * If you're building a theme based on Twenty Twenty, use a find and replace
    118 	 * to change 'twentytwenty' to the name of your theme in all the template files.
    119 	 */
    120 	load_theme_textdomain( 'twentytwenty' );
    121 
    122 	// Add support for full and wide align images.
    123 	add_theme_support( 'align-wide' );
    124 
    125 	// Add support for responsive embeds.
    126 	add_theme_support( 'responsive-embeds' );
    127 
    128 	/*
    129 	 * Adds starter content to highlight the theme on fresh sites.
    130 	 * This is done conditionally to avoid loading the starter content on every
    131 	 * page load, as it is a one-off operation only needed once in the customizer.
    132 	 */
    133 	if ( is_customize_preview() ) {
    134 		require get_template_directory() . '/inc/starter-content.php';
    135 		add_theme_support( 'starter-content', twentytwenty_get_starter_content() );
    136 	}
    137 
    138 	// Add theme support for selective refresh for widgets.
    139 	add_theme_support( 'customize-selective-refresh-widgets' );
    140 
    141 	/*
    142 	 * Adds `async` and `defer` support for scripts registered or enqueued
    143 	 * by the theme.
    144 	 */
    145 	$loader = new TwentyTwenty_Script_Loader();
    146 	add_filter( 'script_loader_tag', array( $loader, 'filter_script_loader_tag' ), 10, 2 );
    147 
    148 }
    149 
    150 add_action( 'after_setup_theme', 'twentytwenty_theme_support' );
    151 
    152 /**
    153  * REQUIRED FILES
    154  * Include required files.
    155  */
    156 require get_template_directory() . '/inc/template-tags.php';
    157 
    158 // Handle SVG icons.
    159 require get_template_directory() . '/classes/class-twentytwenty-svg-icons.php';
    160 require get_template_directory() . '/inc/svg-icons.php';
    161 
    162 // Handle Customizer settings.
    163 require get_template_directory() . '/classes/class-twentytwenty-customize.php';
    164 
    165 // Require Separator Control class.
    166 require get_template_directory() . '/classes/class-twentytwenty-separator-control.php';
    167 
    168 // Custom comment walker.
    169 require get_template_directory() . '/classes/class-twentytwenty-walker-comment.php';
    170 
    171 // Custom page walker.
    172 require get_template_directory() . '/classes/class-twentytwenty-walker-page.php';
    173 
    174 // Custom script loader class.
    175 require get_template_directory() . '/classes/class-twentytwenty-script-loader.php';
    176 
    177 // Non-latin language handling.
    178 require get_template_directory() . '/classes/class-twentytwenty-non-latin-languages.php';
    179 
    180 // Custom CSS.
    181 require get_template_directory() . '/inc/custom-css.php';
    182 
    183 // Block Patterns.
    184 require get_template_directory() . '/inc/block-patterns.php';
    185 
    186 /**
    187  * Register and Enqueue Styles.
    188  *
    189  * @since Twenty Twenty 1.0
    190  */
    191 function twentytwenty_register_styles() {
    192 
    193 	$theme_version = wp_get_theme()->get( 'Version' );
    194 
    195 	wp_enqueue_style( 'twentytwenty-style', get_stylesheet_uri(), array(), $theme_version );
    196 	wp_style_add_data( 'twentytwenty-style', 'rtl', 'replace' );
    197 
    198 	// Add output of Customizer settings as inline style.
    199 	wp_add_inline_style( 'twentytwenty-style', twentytwenty_get_customizer_css( 'front-end' ) );
    200 
    201 	// Add print CSS.
    202 	wp_enqueue_style( 'twentytwenty-print-style', get_template_directory_uri() . '/print.css', null, $theme_version, 'print' );
    203 
    204 }
    205 
    206 add_action( 'wp_enqueue_scripts', 'twentytwenty_register_styles' );
    207 
    208 /**
    209  * Register and Enqueue Scripts.
    210  *
    211  * @since Twenty Twenty 1.0
    212  */
    213 function twentytwenty_register_scripts() {
    214 
    215 	$theme_version = wp_get_theme()->get( 'Version' );
    216 
    217 	if ( ( ! is_admin() ) && is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    218 		wp_enqueue_script( 'comment-reply' );
    219 	}
    220 
    221 	wp_enqueue_script( 'twentytwenty-js', get_template_directory_uri() . '/assets/js/index.js', array(), $theme_version, false );
    222 	wp_script_add_data( 'twentytwenty-js', 'async', true );
    223 
    224 }
    225 
    226 add_action( 'wp_enqueue_scripts', 'twentytwenty_register_scripts' );
    227 
    228 /**
    229  * Fix skip link focus in IE11.
    230  *
    231  * This does not enqueue the script because it is tiny and because it is only for IE11,
    232  * thus it does not warrant having an entire dedicated blocking script being loaded.
    233  *
    234  * @since Twenty Twenty 1.0
    235  *
    236  * @link https://git.io/vWdr2
    237  */
    238 function twentytwenty_skip_link_focus_fix() {
    239 	// The following is minified via `terser --compress --mangle -- assets/js/skip-link-focus-fix.js`.
    240 	?>
    241 	<script>
    242 	/(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);
    243 	</script>
    244 	<?php
    245 }
    246 add_action( 'wp_print_footer_scripts', 'twentytwenty_skip_link_focus_fix' );
    247 
    248 /**
    249  * Enqueue non-latin language styles.
    250  *
    251  * @since Twenty Twenty 1.0
    252  *
    253  * @return void
    254  */
    255 function twentytwenty_non_latin_languages() {
    256 	$custom_css = TwentyTwenty_Non_Latin_Languages::get_non_latin_css( 'front-end' );
    257 
    258 	if ( $custom_css ) {
    259 		wp_add_inline_style( 'twentytwenty-style', $custom_css );
    260 	}
    261 }
    262 
    263 add_action( 'wp_enqueue_scripts', 'twentytwenty_non_latin_languages' );
    264 
    265 /**
    266  * Register navigation menus uses wp_nav_menu in five places.
    267  *
    268  * @since Twenty Twenty 1.0
    269  */
    270 function twentytwenty_menus() {
    271 
    272 	$locations = array(
    273 		'primary'  => __( 'Desktop Horizontal Menu', 'twentytwenty' ),
    274 		'expanded' => __( 'Desktop Expanded Menu', 'twentytwenty' ),
    275 		'mobile'   => __( 'Mobile Menu', 'twentytwenty' ),
    276 		'footer'   => __( 'Footer Menu', 'twentytwenty' ),
    277 		'social'   => __( 'Social Menu', 'twentytwenty' ),
    278 	);
    279 
    280 	register_nav_menus( $locations );
    281 }
    282 
    283 add_action( 'init', 'twentytwenty_menus' );
    284 
    285 /**
    286  * Get the information about the logo.
    287  *
    288  * @since Twenty Twenty 1.0
    289  *
    290  * @param string $html The HTML output from get_custom_logo (core function).
    291  * @return string
    292  */
    293 function twentytwenty_get_custom_logo( $html ) {
    294 
    295 	$logo_id = get_theme_mod( 'custom_logo' );
    296 
    297 	if ( ! $logo_id ) {
    298 		return $html;
    299 	}
    300 
    301 	$logo = wp_get_attachment_image_src( $logo_id, 'full' );
    302 
    303 	if ( $logo ) {
    304 		// For clarity.
    305 		$logo_width  = esc_attr( $logo[1] );
    306 		$logo_height = esc_attr( $logo[2] );
    307 
    308 		// If the retina logo setting is active, reduce the width/height by half.
    309 		if ( get_theme_mod( 'retina_logo', false ) ) {
    310 			$logo_width  = floor( $logo_width / 2 );
    311 			$logo_height = floor( $logo_height / 2 );
    312 
    313 			$search = array(
    314 				'/width=\"\d+\"/iU',
    315 				'/height=\"\d+\"/iU',
    316 			);
    317 
    318 			$replace = array(
    319 				"width=\"{$logo_width}\"",
    320 				"height=\"{$logo_height}\"",
    321 			);
    322 
    323 			// Add a style attribute with the height, or append the height to the style attribute if the style attribute already exists.
    324 			if ( strpos( $html, ' style=' ) === false ) {
    325 				$search[]  = '/(src=)/';
    326 				$replace[] = "style=\"height: {$logo_height}px;\" src=";
    327 			} else {
    328 				$search[]  = '/(style="[^"]*)/';
    329 				$replace[] = "$1 height: {$logo_height}px;";
    330 			}
    331 
    332 			$html = preg_replace( $search, $replace, $html );
    333 
    334 		}
    335 	}
    336 
    337 	return $html;
    338 
    339 }
    340 
    341 add_filter( 'get_custom_logo', 'twentytwenty_get_custom_logo' );
    342 
    343 if ( ! function_exists( 'wp_body_open' ) ) {
    344 
    345 	/**
    346 	 * Shim for wp_body_open, ensuring backward compatibility with versions of WordPress older than 5.2.
    347 	 *
    348 	 * @since Twenty Twenty 1.0
    349 	 */
    350 	function wp_body_open() {
    351 		/** This action is documented in wp-includes/general-template.php */
    352 		do_action( 'wp_body_open' );
    353 	}
    354 }
    355 
    356 /**
    357  * Include a skip to content link at the top of the page so that users can bypass the menu.
    358  *
    359  * @since Twenty Twenty 1.0
    360  */
    361 function twentytwenty_skip_link() {
    362 	echo '<a class="skip-link screen-reader-text" href="#site-content">' . __( 'Skip to the content', 'twentytwenty' ) . '</a>';
    363 }
    364 
    365 add_action( 'wp_body_open', 'twentytwenty_skip_link', 5 );
    366 
    367 /**
    368  * Register widget areas.
    369  *
    370  * @since Twenty Twenty 1.0
    371  *
    372  * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
    373  */
    374 function twentytwenty_sidebar_registration() {
    375 
    376 	// Arguments used in all register_sidebar() calls.
    377 	$shared_args = array(
    378 		'before_title'  => '<h2 class="widget-title subheading heading-size-3">',
    379 		'after_title'   => '</h2>',
    380 		'before_widget' => '<div class="widget %2$s"><div class="widget-content">',
    381 		'after_widget'  => '</div></div>',
    382 	);
    383 
    384 	// Footer #1.
    385 	register_sidebar(
    386 		array_merge(
    387 			$shared_args,
    388 			array(
    389 				'name'        => __( 'Footer #1', 'twentytwenty' ),
    390 				'id'          => 'sidebar-1',
    391 				'description' => __( 'Widgets in this area will be displayed in the first column in the footer.', 'twentytwenty' ),
    392 			)
    393 		)
    394 	);
    395 
    396 	// Footer #2.
    397 	register_sidebar(
    398 		array_merge(
    399 			$shared_args,
    400 			array(
    401 				'name'        => __( 'Footer #2', 'twentytwenty' ),
    402 				'id'          => 'sidebar-2',
    403 				'description' => __( 'Widgets in this area will be displayed in the second column in the footer.', 'twentytwenty' ),
    404 			)
    405 		)
    406 	);
    407 
    408 }
    409 
    410 add_action( 'widgets_init', 'twentytwenty_sidebar_registration' );
    411 
    412 /**
    413  * Enqueue supplemental block editor styles.
    414  *
    415  * @since Twenty Twenty 1.0
    416  */
    417 function twentytwenty_block_editor_styles() {
    418 
    419 	// Enqueue the editor styles.
    420 	wp_enqueue_style( 'twentytwenty-block-editor-styles', get_theme_file_uri( '/assets/css/editor-style-block.css' ), array(), wp_get_theme()->get( 'Version' ), 'all' );
    421 	wp_style_add_data( 'twentytwenty-block-editor-styles', 'rtl', 'replace' );
    422 
    423 	// Add inline style from the Customizer.
    424 	wp_add_inline_style( 'twentytwenty-block-editor-styles', twentytwenty_get_customizer_css( 'block-editor' ) );
    425 
    426 	// Add inline style for non-latin fonts.
    427 	wp_add_inline_style( 'twentytwenty-block-editor-styles', TwentyTwenty_Non_Latin_Languages::get_non_latin_css( 'block-editor' ) );
    428 
    429 	// Enqueue the editor script.
    430 	wp_enqueue_script( 'twentytwenty-block-editor-script', get_theme_file_uri( '/assets/js/editor-script-block.js' ), array( 'wp-blocks', 'wp-dom' ), wp_get_theme()->get( 'Version' ), true );
    431 }
    432 
    433 add_action( 'enqueue_block_editor_assets', 'twentytwenty_block_editor_styles', 1, 1 );
    434 
    435 /**
    436  * Enqueue classic editor styles.
    437  *
    438  * @since Twenty Twenty 1.0
    439  */
    440 function twentytwenty_classic_editor_styles() {
    441 
    442 	$classic_editor_styles = array(
    443 		'/assets/css/editor-style-classic.css',
    444 	);
    445 
    446 	add_editor_style( $classic_editor_styles );
    447 
    448 }
    449 
    450 add_action( 'init', 'twentytwenty_classic_editor_styles' );
    451 
    452 /**
    453  * Output Customizer settings in the classic editor.
    454  * Adds styles to the head of the TinyMCE iframe. Kudos to @Otto42 for the original solution.
    455  *
    456  * @since Twenty Twenty 1.0
    457  *
    458  * @param array $mce_init TinyMCE styles.
    459  * @return array TinyMCE styles.
    460  */
    461 function twentytwenty_add_classic_editor_customizer_styles( $mce_init ) {
    462 
    463 	$styles = twentytwenty_get_customizer_css( 'classic-editor' );
    464 
    465 	if ( ! isset( $mce_init['content_style'] ) ) {
    466 		$mce_init['content_style'] = $styles . ' ';
    467 	} else {
    468 		$mce_init['content_style'] .= ' ' . $styles . ' ';
    469 	}
    470 
    471 	return $mce_init;
    472 
    473 }
    474 
    475 add_filter( 'tiny_mce_before_init', 'twentytwenty_add_classic_editor_customizer_styles' );
    476 
    477 /**
    478  * Output non-latin font styles in the classic editor.
    479  * Adds styles to the head of the TinyMCE iframe. Kudos to @Otto42 for the original solution.
    480  *
    481  * @param array $mce_init TinyMCE styles.
    482  * @return array TinyMCE styles.
    483  */
    484 function twentytwenty_add_classic_editor_non_latin_styles( $mce_init ) {
    485 
    486 	$styles = TwentyTwenty_Non_Latin_Languages::get_non_latin_css( 'classic-editor' );
    487 
    488 	// Return if there are no styles to add.
    489 	if ( ! $styles ) {
    490 		return $mce_init;
    491 	}
    492 
    493 	if ( ! isset( $mce_init['content_style'] ) ) {
    494 		$mce_init['content_style'] = $styles . ' ';
    495 	} else {
    496 		$mce_init['content_style'] .= ' ' . $styles . ' ';
    497 	}
    498 
    499 	return $mce_init;
    500 
    501 }
    502 
    503 add_filter( 'tiny_mce_before_init', 'twentytwenty_add_classic_editor_non_latin_styles' );
    504 
    505 /**
    506  * Block Editor Settings.
    507  * Add custom colors and font sizes to the block editor.
    508  *
    509  * @since Twenty Twenty 1.0
    510  */
    511 function twentytwenty_block_editor_settings() {
    512 
    513 	// Block Editor Palette.
    514 	$editor_color_palette = array(
    515 		array(
    516 			'name'  => __( 'Accent Color', 'twentytwenty' ),
    517 			'slug'  => 'accent',
    518 			'color' => twentytwenty_get_color_for_area( 'content', 'accent' ),
    519 		),
    520 		array(
    521 			'name'  => _x( 'Primary', 'color', 'twentytwenty' ),
    522 			'slug'  => 'primary',
    523 			'color' => twentytwenty_get_color_for_area( 'content', 'text' ),
    524 		),
    525 		array(
    526 			'name'  => _x( 'Secondary', 'color', 'twentytwenty' ),
    527 			'slug'  => 'secondary',
    528 			'color' => twentytwenty_get_color_for_area( 'content', 'secondary' ),
    529 		),
    530 		array(
    531 			'name'  => __( 'Subtle Background', 'twentytwenty' ),
    532 			'slug'  => 'subtle-background',
    533 			'color' => twentytwenty_get_color_for_area( 'content', 'borders' ),
    534 		),
    535 	);
    536 
    537 	// Add the background option.
    538 	$background_color = get_theme_mod( 'background_color' );
    539 	if ( ! $background_color ) {
    540 		$background_color_arr = get_theme_support( 'custom-background' );
    541 		$background_color     = $background_color_arr[0]['default-color'];
    542 	}
    543 	$editor_color_palette[] = array(
    544 		'name'  => __( 'Background Color', 'twentytwenty' ),
    545 		'slug'  => 'background',
    546 		'color' => '#' . $background_color,
    547 	);
    548 
    549 	// If we have accent colors, add them to the block editor palette.
    550 	if ( $editor_color_palette ) {
    551 		add_theme_support( 'editor-color-palette', $editor_color_palette );
    552 	}
    553 
    554 	// Block Editor Font Sizes.
    555 	add_theme_support(
    556 		'editor-font-sizes',
    557 		array(
    558 			array(
    559 				'name'      => _x( 'Small', 'Name of the small font size in the block editor', 'twentytwenty' ),
    560 				'shortName' => _x( 'S', 'Short name of the small font size in the block editor.', 'twentytwenty' ),
    561 				'size'      => 18,
    562 				'slug'      => 'small',
    563 			),
    564 			array(
    565 				'name'      => _x( 'Regular', 'Name of the regular font size in the block editor', 'twentytwenty' ),
    566 				'shortName' => _x( 'M', 'Short name of the regular font size in the block editor.', 'twentytwenty' ),
    567 				'size'      => 21,
    568 				'slug'      => 'normal',
    569 			),
    570 			array(
    571 				'name'      => _x( 'Large', 'Name of the large font size in the block editor', 'twentytwenty' ),
    572 				'shortName' => _x( 'L', 'Short name of the large font size in the block editor.', 'twentytwenty' ),
    573 				'size'      => 26.25,
    574 				'slug'      => 'large',
    575 			),
    576 			array(
    577 				'name'      => _x( 'Larger', 'Name of the larger font size in the block editor', 'twentytwenty' ),
    578 				'shortName' => _x( 'XL', 'Short name of the larger font size in the block editor.', 'twentytwenty' ),
    579 				'size'      => 32,
    580 				'slug'      => 'larger',
    581 			),
    582 		)
    583 	);
    584 
    585 	add_theme_support( 'editor-styles' );
    586 
    587 	// If we have a dark background color then add support for dark editor style.
    588 	// We can determine if the background color is dark by checking if the text-color is white.
    589 	if ( '#ffffff' === strtolower( twentytwenty_get_color_for_area( 'content', 'text' ) ) ) {
    590 		add_theme_support( 'dark-editor-style' );
    591 	}
    592 
    593 }
    594 
    595 add_action( 'after_setup_theme', 'twentytwenty_block_editor_settings' );
    596 
    597 /**
    598  * Overwrite default more tag with styling and screen reader markup.
    599  *
    600  * @param string $html The default output HTML for the more tag.
    601  * @return string
    602  */
    603 function twentytwenty_read_more_tag( $html ) {
    604 	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 );
    605 }
    606 
    607 add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );
    608 
    609 /**
    610  * Enqueues scripts for customizer controls & settings.
    611  *
    612  * @since Twenty Twenty 1.0
    613  *
    614  * @return void
    615  */
    616 function twentytwenty_customize_controls_enqueue_scripts() {
    617 	$theme_version = wp_get_theme()->get( 'Version' );
    618 
    619 	// Add main customizer js file.
    620 	wp_enqueue_script( 'twentytwenty-customize', get_template_directory_uri() . '/assets/js/customize.js', array( 'jquery' ), $theme_version, false );
    621 
    622 	// Add script for color calculations.
    623 	wp_enqueue_script( 'twentytwenty-color-calculations', get_template_directory_uri() . '/assets/js/color-calculations.js', array( 'wp-color-picker' ), $theme_version, false );
    624 
    625 	// Add script for controls.
    626 	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, false );
    627 	wp_localize_script( 'twentytwenty-customize-controls', 'twentyTwentyBgColors', twentytwenty_get_customizer_color_vars() );
    628 }
    629 
    630 add_action( 'customize_controls_enqueue_scripts', 'twentytwenty_customize_controls_enqueue_scripts' );
    631 
    632 /**
    633  * Enqueue scripts for the customizer preview.
    634  *
    635  * @since Twenty Twenty 1.0
    636  *
    637  * @return void
    638  */
    639 function twentytwenty_customize_preview_init() {
    640 	$theme_version = wp_get_theme()->get( 'Version' );
    641 
    642 	wp_enqueue_script( 'twentytwenty-customize-preview', get_theme_file_uri( '/assets/js/customize-preview.js' ), array( 'customize-preview', 'customize-selective-refresh', 'jquery' ), $theme_version, true );
    643 	wp_localize_script( 'twentytwenty-customize-preview', 'twentyTwentyBgColors', twentytwenty_get_customizer_color_vars() );
    644 	wp_localize_script( 'twentytwenty-customize-preview', 'twentyTwentyPreviewEls', twentytwenty_get_elements_array() );
    645 
    646 	wp_add_inline_script(
    647 		'twentytwenty-customize-preview',
    648 		sprintf(
    649 			'wp.customize.selectiveRefresh.partialConstructor[ %1$s ].prototype.attrs = %2$s;',
    650 			wp_json_encode( 'cover_opacity' ),
    651 			wp_json_encode( twentytwenty_customize_opacity_range() )
    652 		)
    653 	);
    654 }
    655 
    656 add_action( 'customize_preview_init', 'twentytwenty_customize_preview_init' );
    657 
    658 /**
    659  * Get accessible color for an area.
    660  *
    661  * @since Twenty Twenty 1.0
    662  *
    663  * @param string $area    The area we want to get the colors for.
    664  * @param string $context Can be 'text' or 'accent'.
    665  * @return string Returns a HEX color.
    666  */
    667 function twentytwenty_get_color_for_area( $area = 'content', $context = 'text' ) {
    668 
    669 	// Get the value from the theme-mod.
    670 	$settings = get_theme_mod(
    671 		'accent_accessible_colors',
    672 		array(
    673 			'content'       => array(
    674 				'text'      => '#000000',
    675 				'accent'    => '#cd2653',
    676 				'secondary' => '#6d6d6d',
    677 				'borders'   => '#dcd7ca',
    678 			),
    679 			'header-footer' => array(
    680 				'text'      => '#000000',
    681 				'accent'    => '#cd2653',
    682 				'secondary' => '#6d6d6d',
    683 				'borders'   => '#dcd7ca',
    684 			),
    685 		)
    686 	);
    687 
    688 	// If we have a value return it.
    689 	if ( isset( $settings[ $area ] ) && isset( $settings[ $area ][ $context ] ) ) {
    690 		return $settings[ $area ][ $context ];
    691 	}
    692 
    693 	// Return false if the option doesn't exist.
    694 	return false;
    695 }
    696 
    697 /**
    698  * Returns an array of variables for the customizer preview.
    699  *
    700  * @since Twenty Twenty 1.0
    701  *
    702  * @return array
    703  */
    704 function twentytwenty_get_customizer_color_vars() {
    705 	$colors = array(
    706 		'content'       => array(
    707 			'setting' => 'background_color',
    708 		),
    709 		'header-footer' => array(
    710 			'setting' => 'header_footer_background_color',
    711 		),
    712 	);
    713 	return $colors;
    714 }
    715 
    716 /**
    717  * Get an array of elements.
    718  *
    719  * @since Twenty Twenty 1.0
    720  *
    721  * @return array
    722  */
    723 function twentytwenty_get_elements_array() {
    724 
    725 	// The array is formatted like this:
    726 	// [key-in-saved-setting][sub-key-in-setting][css-property] = [elements].
    727 	$elements = array(
    728 		'content'       => array(
    729 			'accent'     => array(
    730 				'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' ),
    731 				'border-color'     => array( 'blockquote', '.border-color-accent', '.border-color-accent-hover:hover', '.border-color-accent-hover:focus' ),
    732 				'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' ),
    733 				'fill'             => array( '.fill-children-accent', '.fill-children-accent *' ),
    734 			),
    735 			'background' => array(
    736 				'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)' ),
    737 				'background-color' => array( ':root .has-background-background-color' ),
    738 			),
    739 			'text'       => array(
    740 				'color'            => array( 'body', '.entry-title a', ':root .has-primary-color' ),
    741 				'background-color' => array( ':root .has-primary-background-color' ),
    742 			),
    743 			'secondary'  => array(
    744 				'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' ),
    745 				'background-color' => array( ':root .has-secondary-background-color' ),
    746 			),
    747 			'borders'    => array(
    748 				'border-color'        => array( 'pre', 'fieldset', 'input', 'textarea', 'table', 'table *', 'hr' ),
    749 				'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' ),
    750 				'border-bottom-color' => array( '.wp-block-table.is-style-stripes' ),
    751 				'border-top-color'    => array( '.wp-block-latest-posts.is-grid li' ),
    752 				'color'               => array( ':root .has-subtle-background-color' ),
    753 			),
    754 		),
    755 		'header-footer' => array(
    756 			'accent'     => array(
    757 				'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', '#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' ),
    758 				'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"]' ),
    759 			),
    760 			'background' => array(
    761 				'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"]' ),
    762 				'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' ),
    763 			),
    764 			'text'       => array(
    765 				'color'               => array( '.header-footer-group', 'body:not(.overlay-header) #site-header .toggle', '.menu-modal .toggle' ),
    766 				'background-color'    => array( 'body:not(.overlay-header) .primary-menu ul' ),
    767 				'border-bottom-color' => array( 'body:not(.overlay-header) .primary-menu > li > ul:after' ),
    768 				'border-left-color'   => array( 'body:not(.overlay-header) .primary-menu ul ul:after' ),
    769 			),
    770 			'secondary'  => array(
    771 				'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', '.to-the-top', '.singular .entry-header .post-meta', '.singular:not(.overlay-header) .entry-header .post-meta a' ),
    772 			),
    773 			'borders'    => array(
    774 				'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' ),
    775 				'background-color' => array( '.header-footer-group table caption', 'body:not(.overlay-header) .header-inner .toggle-wrapper::before' ),
    776 			),
    777 		),
    778 	);
    779 
    780 	/**
    781 	 * Filters Twenty Twenty theme elements.
    782 	 *
    783 	 * @since Twenty Twenty 1.0
    784 	 *
    785 	 * @param array Array of elements.
    786 	 */
    787 	return apply_filters( 'twentytwenty_get_elements_array', $elements );
    788 }