Нет описания

functions.php 27KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789
  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. * Table of Contents:
  13. * Theme Support
  14. * Required Files
  15. * Register Styles
  16. * Register Scripts
  17. * Register Menus
  18. * Custom Logo
  19. * WP Body Open
  20. * Register Sidebars
  21. * Enqueue Block Editor Assets
  22. * Enqueue Classic Editor Styles
  23. * Block Editor Settings
  24. */
  25. /**
  26. * Sets up theme defaults and registers support for various WordPress features.
  27. *
  28. * Note that this function is hooked into the after_setup_theme hook, which
  29. * runs before the init hook. The init hook is too late for some features, such
  30. * as indicating support for post thumbnails.
  31. *
  32. * @since Twenty Twenty 1.0
  33. */
  34. function twentytwenty_theme_support() {
  35. // Add default posts and comments RSS feed links to head.
  36. add_theme_support( 'automatic-feed-links' );
  37. // Custom background color.
  38. add_theme_support(
  39. 'custom-background',
  40. array(
  41. 'default-color' => 'f5efe0',
  42. )
  43. );
  44. // Set content-width.
  45. global $content_width;
  46. if ( ! isset( $content_width ) ) {
  47. $content_width = 580;
  48. }
  49. /*
  50. * Enable support for Post Thumbnails on posts and pages.
  51. *
  52. * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
  53. */
  54. add_theme_support( 'post-thumbnails' );
  55. // Set post thumbnail size.
  56. set_post_thumbnail_size( 1200, 9999 );
  57. // Add custom image size used in Cover Template.
  58. add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );
  59. // Custom logo.
  60. $logo_width = 120;
  61. $logo_height = 90;
  62. // If the retina setting is active, double the recommended width and height.
  63. if ( get_theme_mod( 'retina_logo', false ) ) {
  64. $logo_width = floor( $logo_width * 2 );
  65. $logo_height = floor( $logo_height * 2 );
  66. }
  67. add_theme_support(
  68. 'custom-logo',
  69. array(
  70. 'height' => $logo_height,
  71. 'width' => $logo_width,
  72. 'flex-height' => true,
  73. 'flex-width' => true,
  74. )
  75. );
  76. /*
  77. * Let WordPress manage the document title.
  78. * By adding theme support, we declare that this theme does not use a
  79. * hard-coded <title> tag in the document head, and expect WordPress to
  80. * provide it for us.
  81. */
  82. add_theme_support( 'title-tag' );
  83. /*
  84. * Switch default core markup for search form, comment form, and comments
  85. * to output valid HTML5.
  86. */
  87. add_theme_support(
  88. 'html5',
  89. array(
  90. 'search-form',
  91. 'comment-form',
  92. 'comment-list',
  93. 'gallery',
  94. 'caption',
  95. 'script',
  96. 'style',
  97. 'navigation-widgets',
  98. )
  99. );
  100. /*
  101. * Make theme available for translation.
  102. * Translations can be filed in the /languages/ directory.
  103. * If you're building a theme based on Twenty Twenty, use a find and replace
  104. * to change 'twentytwenty' to the name of your theme in all the template files.
  105. */
  106. load_theme_textdomain( 'twentytwenty' );
  107. // Add support for full and wide align images.
  108. add_theme_support( 'align-wide' );
  109. // Add support for responsive embeds.
  110. add_theme_support( 'responsive-embeds' );
  111. /*
  112. * Adds starter content to highlight the theme on fresh sites.
  113. * This is done conditionally to avoid loading the starter content on every
  114. * page load, as it is a one-off operation only needed once in the customizer.
  115. */
  116. if ( is_customize_preview() ) {
  117. require get_template_directory() . '/inc/starter-content.php';
  118. add_theme_support( 'starter-content', twentytwenty_get_starter_content() );
  119. }
  120. // Add theme support for selective refresh for widgets.
  121. add_theme_support( 'customize-selective-refresh-widgets' );
  122. /*
  123. * Adds `async` and `defer` support for scripts registered or enqueued
  124. * by the theme.
  125. */
  126. $loader = new TwentyTwenty_Script_Loader();
  127. add_filter( 'script_loader_tag', array( $loader, 'filter_script_loader_tag' ), 10, 2 );
  128. }
  129. add_action( 'after_setup_theme', 'twentytwenty_theme_support' );
  130. /**
  131. * REQUIRED FILES
  132. * Include required files.
  133. */
  134. require get_template_directory() . '/inc/template-tags.php';
  135. // Handle SVG icons.
  136. require get_template_directory() . '/classes/class-twentytwenty-svg-icons.php';
  137. require get_template_directory() . '/inc/svg-icons.php';
  138. // Handle Customizer settings.
  139. require get_template_directory() . '/classes/class-twentytwenty-customize.php';
  140. // Require Separator Control class.
  141. require get_template_directory() . '/classes/class-twentytwenty-separator-control.php';
  142. // Custom comment walker.
  143. require get_template_directory() . '/classes/class-twentytwenty-walker-comment.php';
  144. // Custom page walker.
  145. require get_template_directory() . '/classes/class-twentytwenty-walker-page.php';
  146. // Custom script loader class.
  147. require get_template_directory() . '/classes/class-twentytwenty-script-loader.php';
  148. // Non-latin language handling.
  149. require get_template_directory() . '/classes/class-twentytwenty-non-latin-languages.php';
  150. // Custom CSS.
  151. require get_template_directory() . '/inc/custom-css.php';
  152. // Block Patterns.
  153. require get_template_directory() . '/inc/block-patterns.php';
  154. /**
  155. * Register and Enqueue Styles.
  156. *
  157. * @since Twenty Twenty 1.0
  158. */
  159. function twentytwenty_register_styles() {
  160. $theme_version = wp_get_theme()->get( 'Version' );
  161. wp_enqueue_style( 'twentytwenty-style', get_stylesheet_uri(), array(), $theme_version );
  162. wp_style_add_data( 'twentytwenty-style', 'rtl', 'replace' );
  163. // Add output of Customizer settings as inline style.
  164. wp_add_inline_style( 'twentytwenty-style', twentytwenty_get_customizer_css( 'front-end' ) );
  165. // Add print CSS.
  166. wp_enqueue_style( 'twentytwenty-print-style', get_template_directory_uri() . '/print.css', null, $theme_version, 'print' );
  167. }
  168. add_action( 'wp_enqueue_scripts', 'twentytwenty_register_styles' );
  169. /**
  170. * Register and Enqueue Scripts.
  171. *
  172. * @since Twenty Twenty 1.0
  173. */
  174. function twentytwenty_register_scripts() {
  175. $theme_version = wp_get_theme()->get( 'Version' );
  176. if ( ( ! is_admin() ) && is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
  177. wp_enqueue_script( 'comment-reply' );
  178. }
  179. wp_enqueue_script( 'twentytwenty-js', get_template_directory_uri() . '/assets/js/index.js', array(), $theme_version, false );
  180. wp_script_add_data( 'twentytwenty-js', 'async', true );
  181. }
  182. add_action( 'wp_enqueue_scripts', 'twentytwenty_register_scripts' );
  183. /**
  184. * Fix skip link focus in IE11.
  185. *
  186. * This does not enqueue the script because it is tiny and because it is only for IE11,
  187. * thus it does not warrant having an entire dedicated blocking script being loaded.
  188. *
  189. * @since Twenty Twenty 1.0
  190. *
  191. * @link https://git.io/vWdr2
  192. */
  193. function twentytwenty_skip_link_focus_fix() {
  194. // The following is minified via `terser --compress --mangle -- assets/js/skip-link-focus-fix.js`.
  195. ?>
  196. <script>
  197. /(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);
  198. </script>
  199. <?php
  200. }
  201. add_action( 'wp_print_footer_scripts', 'twentytwenty_skip_link_focus_fix' );
  202. /**
  203. * Enqueue non-latin language styles.
  204. *
  205. * @since Twenty Twenty 1.0
  206. *
  207. * @return void
  208. */
  209. function twentytwenty_non_latin_languages() {
  210. $custom_css = TwentyTwenty_Non_Latin_Languages::get_non_latin_css( 'front-end' );
  211. if ( $custom_css ) {
  212. wp_add_inline_style( 'twentytwenty-style', $custom_css );
  213. }
  214. }
  215. add_action( 'wp_enqueue_scripts', 'twentytwenty_non_latin_languages' );
  216. /**
  217. * Register navigation menus uses wp_nav_menu in five places.
  218. *
  219. * @since Twenty Twenty 1.0
  220. */
  221. function twentytwenty_menus() {
  222. $locations = array(
  223. 'primary' => __( 'Desktop Horizontal Menu', 'twentytwenty' ),
  224. 'expanded' => __( 'Desktop Expanded Menu', 'twentytwenty' ),
  225. 'mobile' => __( 'Mobile Menu', 'twentytwenty' ),
  226. 'footer' => __( 'Footer Menu', 'twentytwenty' ),
  227. 'social' => __( 'Social Menu', 'twentytwenty' ),
  228. );
  229. register_nav_menus( $locations );
  230. }
  231. add_action( 'init', 'twentytwenty_menus' );
  232. /**
  233. * Get the information about the logo.
  234. *
  235. * @since Twenty Twenty 1.0
  236. *
  237. * @param string $html The HTML output from get_custom_logo (core function).
  238. * @return string
  239. */
  240. function twentytwenty_get_custom_logo( $html ) {
  241. $logo_id = get_theme_mod( 'custom_logo' );
  242. if ( ! $logo_id ) {
  243. return $html;
  244. }
  245. $logo = wp_get_attachment_image_src( $logo_id, 'full' );
  246. if ( $logo ) {
  247. // For clarity.
  248. $logo_width = esc_attr( $logo[1] );
  249. $logo_height = esc_attr( $logo[2] );
  250. // If the retina logo setting is active, reduce the width/height by half.
  251. if ( get_theme_mod( 'retina_logo', false ) ) {
  252. $logo_width = floor( $logo_width / 2 );
  253. $logo_height = floor( $logo_height / 2 );
  254. $search = array(
  255. '/width=\"\d+\"/iU',
  256. '/height=\"\d+\"/iU',
  257. );
  258. $replace = array(
  259. "width=\"{$logo_width}\"",
  260. "height=\"{$logo_height}\"",
  261. );
  262. // Add a style attribute with the height, or append the height to the style attribute if the style attribute already exists.
  263. if ( strpos( $html, ' style=' ) === false ) {
  264. $search[] = '/(src=)/';
  265. $replace[] = "style=\"height: {$logo_height}px;\" src=";
  266. } else {
  267. $search[] = '/(style="[^"]*)/';
  268. $replace[] = "$1 height: {$logo_height}px;";
  269. }
  270. $html = preg_replace( $search, $replace, $html );
  271. }
  272. }
  273. return $html;
  274. }
  275. add_filter( 'get_custom_logo', 'twentytwenty_get_custom_logo' );
  276. if ( ! function_exists( 'wp_body_open' ) ) {
  277. /**
  278. * Shim for wp_body_open, ensuring backward compatibility with versions of WordPress older than 5.2.
  279. *
  280. * @since Twenty Twenty 1.0
  281. */
  282. function wp_body_open() {
  283. /** This action is documented in wp-includes/general-template.php */
  284. do_action( 'wp_body_open' );
  285. }
  286. }
  287. /**
  288. * Include a skip to content link at the top of the page so that users can bypass the menu.
  289. *
  290. * @since Twenty Twenty 1.0
  291. */
  292. function twentytwenty_skip_link() {
  293. echo '<a class="skip-link screen-reader-text" href="#site-content">' . __( 'Skip to the content', 'twentytwenty' ) . '</a>';
  294. }
  295. add_action( 'wp_body_open', 'twentytwenty_skip_link', 5 );
  296. /**
  297. * Register widget areas.
  298. *
  299. * @since Twenty Twenty 1.0
  300. *
  301. * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
  302. */
  303. function twentytwenty_sidebar_registration() {
  304. // Arguments used in all register_sidebar() calls.
  305. $shared_args = array(
  306. 'before_title' => '<h2 class="widget-title subheading heading-size-3">',
  307. 'after_title' => '</h2>',
  308. 'before_widget' => '<div class="widget %2$s"><div class="widget-content">',
  309. 'after_widget' => '</div></div>',
  310. );
  311. // Footer #1.
  312. register_sidebar(
  313. array_merge(
  314. $shared_args,
  315. array(
  316. 'name' => __( 'Footer #1', 'twentytwenty' ),
  317. 'id' => 'sidebar-1',
  318. 'description' => __( 'Widgets in this area will be displayed in the first column in the footer.', 'twentytwenty' ),
  319. )
  320. )
  321. );
  322. // Footer #2.
  323. register_sidebar(
  324. array_merge(
  325. $shared_args,
  326. array(
  327. 'name' => __( 'Footer #2', 'twentytwenty' ),
  328. 'id' => 'sidebar-2',
  329. 'description' => __( 'Widgets in this area will be displayed in the second column in the footer.', 'twentytwenty' ),
  330. )
  331. )
  332. );
  333. }
  334. add_action( 'widgets_init', 'twentytwenty_sidebar_registration' );
  335. /**
  336. * Enqueue supplemental block editor styles.
  337. *
  338. * @since Twenty Twenty 1.0
  339. */
  340. function twentytwenty_block_editor_styles() {
  341. // Enqueue the editor styles.
  342. wp_enqueue_style( 'twentytwenty-block-editor-styles', get_theme_file_uri( '/assets/css/editor-style-block.css' ), array(), wp_get_theme()->get( 'Version' ), 'all' );
  343. wp_style_add_data( 'twentytwenty-block-editor-styles', 'rtl', 'replace' );
  344. // Add inline style from the Customizer.
  345. wp_add_inline_style( 'twentytwenty-block-editor-styles', twentytwenty_get_customizer_css( 'block-editor' ) );
  346. // Add inline style for non-latin fonts.
  347. wp_add_inline_style( 'twentytwenty-block-editor-styles', TwentyTwenty_Non_Latin_Languages::get_non_latin_css( 'block-editor' ) );
  348. // Enqueue the editor script.
  349. 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 );
  350. }
  351. add_action( 'enqueue_block_editor_assets', 'twentytwenty_block_editor_styles', 1, 1 );
  352. /**
  353. * Enqueue classic editor styles.
  354. *
  355. * @since Twenty Twenty 1.0
  356. */
  357. function twentytwenty_classic_editor_styles() {
  358. $classic_editor_styles = array(
  359. '/assets/css/editor-style-classic.css',
  360. );
  361. add_editor_style( $classic_editor_styles );
  362. }
  363. add_action( 'init', 'twentytwenty_classic_editor_styles' );
  364. /**
  365. * Output Customizer settings in the classic editor.
  366. * Adds styles to the head of the TinyMCE iframe. Kudos to @Otto42 for the original solution.
  367. *
  368. * @since Twenty Twenty 1.0
  369. *
  370. * @param array $mce_init TinyMCE styles.
  371. * @return array TinyMCE styles.
  372. */
  373. function twentytwenty_add_classic_editor_customizer_styles( $mce_init ) {
  374. $styles = twentytwenty_get_customizer_css( 'classic-editor' );
  375. if ( ! isset( $mce_init['content_style'] ) ) {
  376. $mce_init['content_style'] = $styles . ' ';
  377. } else {
  378. $mce_init['content_style'] .= ' ' . $styles . ' ';
  379. }
  380. return $mce_init;
  381. }
  382. add_filter( 'tiny_mce_before_init', 'twentytwenty_add_classic_editor_customizer_styles' );
  383. /**
  384. * Output non-latin font styles in the classic editor.
  385. * Adds styles to the head of the TinyMCE iframe. Kudos to @Otto42 for the original solution.
  386. *
  387. * @param array $mce_init TinyMCE styles.
  388. * @return array TinyMCE styles.
  389. */
  390. function twentytwenty_add_classic_editor_non_latin_styles( $mce_init ) {
  391. $styles = TwentyTwenty_Non_Latin_Languages::get_non_latin_css( 'classic-editor' );
  392. // Return if there are no styles to add.
  393. if ( ! $styles ) {
  394. return $mce_init;
  395. }
  396. if ( ! isset( $mce_init['content_style'] ) ) {
  397. $mce_init['content_style'] = $styles . ' ';
  398. } else {
  399. $mce_init['content_style'] .= ' ' . $styles . ' ';
  400. }
  401. return $mce_init;
  402. }
  403. add_filter( 'tiny_mce_before_init', 'twentytwenty_add_classic_editor_non_latin_styles' );
  404. /**
  405. * Block Editor Settings.
  406. * Add custom colors and font sizes to the block editor.
  407. *
  408. * @since Twenty Twenty 1.0
  409. */
  410. function twentytwenty_block_editor_settings() {
  411. // Block Editor Palette.
  412. $editor_color_palette = array(
  413. array(
  414. 'name' => __( 'Accent Color', 'twentytwenty' ),
  415. 'slug' => 'accent',
  416. 'color' => twentytwenty_get_color_for_area( 'content', 'accent' ),
  417. ),
  418. array(
  419. 'name' => _x( 'Primary', 'color', 'twentytwenty' ),
  420. 'slug' => 'primary',
  421. 'color' => twentytwenty_get_color_for_area( 'content', 'text' ),
  422. ),
  423. array(
  424. 'name' => _x( 'Secondary', 'color', 'twentytwenty' ),
  425. 'slug' => 'secondary',
  426. 'color' => twentytwenty_get_color_for_area( 'content', 'secondary' ),
  427. ),
  428. array(
  429. 'name' => __( 'Subtle Background', 'twentytwenty' ),
  430. 'slug' => 'subtle-background',
  431. 'color' => twentytwenty_get_color_for_area( 'content', 'borders' ),
  432. ),
  433. );
  434. // Add the background option.
  435. $background_color = get_theme_mod( 'background_color' );
  436. if ( ! $background_color ) {
  437. $background_color_arr = get_theme_support( 'custom-background' );
  438. $background_color = $background_color_arr[0]['default-color'];
  439. }
  440. $editor_color_palette[] = array(
  441. 'name' => __( 'Background Color', 'twentytwenty' ),
  442. 'slug' => 'background',
  443. 'color' => '#' . $background_color,
  444. );
  445. // If we have accent colors, add them to the block editor palette.
  446. if ( $editor_color_palette ) {
  447. add_theme_support( 'editor-color-palette', $editor_color_palette );
  448. }
  449. // Block Editor Font Sizes.
  450. add_theme_support(
  451. 'editor-font-sizes',
  452. array(
  453. array(
  454. 'name' => _x( 'Small', 'Name of the small font size in the block editor', 'twentytwenty' ),
  455. 'shortName' => _x( 'S', 'Short name of the small font size in the block editor.', 'twentytwenty' ),
  456. 'size' => 18,
  457. 'slug' => 'small',
  458. ),
  459. array(
  460. 'name' => _x( 'Regular', 'Name of the regular font size in the block editor', 'twentytwenty' ),
  461. 'shortName' => _x( 'M', 'Short name of the regular font size in the block editor.', 'twentytwenty' ),
  462. 'size' => 21,
  463. 'slug' => 'normal',
  464. ),
  465. array(
  466. 'name' => _x( 'Large', 'Name of the large font size in the block editor', 'twentytwenty' ),
  467. 'shortName' => _x( 'L', 'Short name of the large font size in the block editor.', 'twentytwenty' ),
  468. 'size' => 26.25,
  469. 'slug' => 'large',
  470. ),
  471. array(
  472. 'name' => _x( 'Larger', 'Name of the larger font size in the block editor', 'twentytwenty' ),
  473. 'shortName' => _x( 'XL', 'Short name of the larger font size in the block editor.', 'twentytwenty' ),
  474. 'size' => 32,
  475. 'slug' => 'larger',
  476. ),
  477. )
  478. );
  479. add_theme_support( 'editor-styles' );
  480. // If we have a dark background color then add support for dark editor style.
  481. // We can determine if the background color is dark by checking if the text-color is white.
  482. if ( '#ffffff' === strtolower( twentytwenty_get_color_for_area( 'content', 'text' ) ) ) {
  483. add_theme_support( 'dark-editor-style' );
  484. }
  485. }
  486. add_action( 'after_setup_theme', 'twentytwenty_block_editor_settings' );
  487. /**
  488. * Overwrite default more tag with styling and screen reader markup.
  489. *
  490. * @param string $html The default output HTML for the more tag.
  491. * @return string
  492. */
  493. function twentytwenty_read_more_tag( $html ) {
  494. 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 );
  495. }
  496. add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );
  497. /**
  498. * Enqueues scripts for customizer controls & settings.
  499. *
  500. * @since Twenty Twenty 1.0
  501. *
  502. * @return void
  503. */
  504. function twentytwenty_customize_controls_enqueue_scripts() {
  505. $theme_version = wp_get_theme()->get( 'Version' );
  506. // Add main customizer js file.
  507. wp_enqueue_script( 'twentytwenty-customize', get_template_directory_uri() . '/assets/js/customize.js', array( 'jquery' ), $theme_version, false );
  508. // Add script for color calculations.
  509. wp_enqueue_script( 'twentytwenty-color-calculations', get_template_directory_uri() . '/assets/js/color-calculations.js', array( 'wp-color-picker' ), $theme_version, false );
  510. // Add script for controls.
  511. 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 );
  512. wp_localize_script( 'twentytwenty-customize-controls', 'twentyTwentyBgColors', twentytwenty_get_customizer_color_vars() );
  513. }
  514. add_action( 'customize_controls_enqueue_scripts', 'twentytwenty_customize_controls_enqueue_scripts' );
  515. /**
  516. * Enqueue scripts for the customizer preview.
  517. *
  518. * @since Twenty Twenty 1.0
  519. *
  520. * @return void
  521. */
  522. function twentytwenty_customize_preview_init() {
  523. $theme_version = wp_get_theme()->get( 'Version' );
  524. 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 );
  525. wp_localize_script( 'twentytwenty-customize-preview', 'twentyTwentyBgColors', twentytwenty_get_customizer_color_vars() );
  526. wp_localize_script( 'twentytwenty-customize-preview', 'twentyTwentyPreviewEls', twentytwenty_get_elements_array() );
  527. wp_add_inline_script(
  528. 'twentytwenty-customize-preview',
  529. sprintf(
  530. 'wp.customize.selectiveRefresh.partialConstructor[ %1$s ].prototype.attrs = %2$s;',
  531. wp_json_encode( 'cover_opacity' ),
  532. wp_json_encode( twentytwenty_customize_opacity_range() )
  533. )
  534. );
  535. }
  536. add_action( 'customize_preview_init', 'twentytwenty_customize_preview_init' );
  537. /**
  538. * Get accessible color for an area.
  539. *
  540. * @since Twenty Twenty 1.0
  541. *
  542. * @param string $area The area we want to get the colors for.
  543. * @param string $context Can be 'text' or 'accent'.
  544. * @return string Returns a HEX color.
  545. */
  546. function twentytwenty_get_color_for_area( $area = 'content', $context = 'text' ) {
  547. // Get the value from the theme-mod.
  548. $settings = get_theme_mod(
  549. 'accent_accessible_colors',
  550. array(
  551. 'content' => array(
  552. 'text' => '#000000',
  553. 'accent' => '#cd2653',
  554. 'secondary' => '#6d6d6d',
  555. 'borders' => '#dcd7ca',
  556. ),
  557. 'header-footer' => array(
  558. 'text' => '#000000',
  559. 'accent' => '#cd2653',
  560. 'secondary' => '#6d6d6d',
  561. 'borders' => '#dcd7ca',
  562. ),
  563. )
  564. );
  565. // If we have a value return it.
  566. if ( isset( $settings[ $area ] ) && isset( $settings[ $area ][ $context ] ) ) {
  567. return $settings[ $area ][ $context ];
  568. }
  569. // Return false if the option doesn't exist.
  570. return false;
  571. }
  572. /**
  573. * Returns an array of variables for the customizer preview.
  574. *
  575. * @since Twenty Twenty 1.0
  576. *
  577. * @return array
  578. */
  579. function twentytwenty_get_customizer_color_vars() {
  580. $colors = array(
  581. 'content' => array(
  582. 'setting' => 'background_color',
  583. ),
  584. 'header-footer' => array(
  585. 'setting' => 'header_footer_background_color',
  586. ),
  587. );
  588. return $colors;
  589. }
  590. /**
  591. * Get an array of elements.
  592. *
  593. * @since Twenty Twenty 1.0
  594. *
  595. * @return array
  596. */
  597. function twentytwenty_get_elements_array() {
  598. // The array is formatted like this:
  599. // [key-in-saved-setting][sub-key-in-setting][css-property] = [elements].
  600. $elements = array(
  601. 'content' => array(
  602. 'accent' => array(
  603. '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' ),
  604. 'border-color' => array( 'blockquote', '.border-color-accent', '.border-color-accent-hover:hover', '.border-color-accent-hover:focus' ),
  605. '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' ),
  606. 'fill' => array( '.fill-children-accent', '.fill-children-accent *' ),
  607. ),
  608. 'background' => array(
  609. '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)' ),
  610. 'background-color' => array( ':root .has-background-background-color' ),
  611. ),
  612. 'text' => array(
  613. 'color' => array( 'body', '.entry-title a', ':root .has-primary-color' ),
  614. 'background-color' => array( ':root .has-primary-background-color' ),
  615. ),
  616. 'secondary' => array(
  617. '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' ),
  618. 'background-color' => array( ':root .has-secondary-background-color' ),
  619. ),
  620. 'borders' => array(
  621. 'border-color' => array( 'pre', 'fieldset', 'input', 'textarea', 'table', 'table *', 'hr' ),
  622. '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' ),
  623. 'border-bottom-color' => array( '.wp-block-table.is-style-stripes' ),
  624. 'border-top-color' => array( '.wp-block-latest-posts.is-grid li' ),
  625. 'color' => array( ':root .has-subtle-background-color' ),
  626. ),
  627. ),
  628. 'header-footer' => array(
  629. 'accent' => array(
  630. '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' ),
  631. '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"]' ),
  632. ),
  633. 'background' => array(
  634. '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"]' ),
  635. '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' ),
  636. ),
  637. 'text' => array(
  638. 'color' => array( '.header-footer-group', 'body:not(.overlay-header) #site-header .toggle', '.menu-modal .toggle' ),
  639. 'background-color' => array( 'body:not(.overlay-header) .primary-menu ul' ),
  640. 'border-bottom-color' => array( 'body:not(.overlay-header) .primary-menu > li > ul:after' ),
  641. 'border-left-color' => array( 'body:not(.overlay-header) .primary-menu ul ul:after' ),
  642. ),
  643. 'secondary' => array(
  644. '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' ),
  645. ),
  646. 'borders' => array(
  647. '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' ),
  648. 'background-color' => array( '.header-footer-group table caption', 'body:not(.overlay-header) .header-inner .toggle-wrapper::before' ),
  649. ),
  650. ),
  651. );
  652. /**
  653. * Filters Twenty Twenty theme elements.
  654. *
  655. * @since Twenty Twenty 1.0
  656. *
  657. * @param array Array of elements.
  658. */
  659. return apply_filters( 'twentytwenty_get_elements_array', $elements );
  660. }