Changeset 53286 for trunk/src/wp-content/themes/twentytwentytwo/functions.php

Timestamp:

04/26/2022 03:25:01 PM (4 years ago)

Author:

jffng

Message:

Twenty Twenty-Two: Add three style variations.

This commit adds three style variations to Twenty Twenty-Two, allowing users to quickly swap between different visual styles — "Blue", "Pink", and "Swiss" — for the default theme. The variations are previewed and selected from the Site Editor's global styles panel.

For the implementation, each variation is defined by its own theme.json file within the "/styles" directory of the theme. All variations leverage the internal-only theme.json handler of the Webfonts API [53282] to load locally hosted fonts.

Props kjellr, hellofromtonya.
See #55433.

File:

• trunk/src/wp-content/themes/twentytwentytwo/functions.php (modified) (2 diffs)

trunk/src/wp-content/themes/twentytwentytwo/functions.php

@@ -55 +55 @@
         );
 
-        // Add styles inline.
-        wp_add_inline_style( 'twentytwentytwo-style', twentytwentytwo_get_font_face_styles() );
-
         // Enqueue theme stylesheet.
         wp_enqueue_style( 'twentytwentytwo-style' );
@@ -67 +64 @@
 add_action( 'wp_enqueue_scripts', 'twentytwentytwo_styles' );
 
-if ( ! function_exists( 'twentytwentytwo_editor_styles' ) ) :
-
-    /**
-     * Enqueue editor styles.
-     *
-     * @since Twenty Twenty-Two 1.0
-     *
-     * @return void
-     */
-    function twentytwentytwo_editor_styles() {
-
-        // Add styles inline.
-        wp_add_inline_style( 'wp-block-library', twentytwentytwo_get_font_face_styles() );
-
-    }
-
-endif;
-
-add_action( 'admin_init', 'twentytwentytwo_editor_styles' );
-
-
-if ( ! function_exists( 'twentytwentytwo_get_font_face_styles' ) ) :
-
-    /**
-     * Get font face styles.
-     * Called by functions twentytwentytwo_styles() and twentytwentytwo_editor_styles() above.
-     *
-     * @since Twenty Twenty-Two 1.0
-     *
-     * @return string
-     */
-    function twentytwentytwo_get_font_face_styles() {
-
-        return "
-        @font-face{
-            font-family: 'Source Serif Pro';
-            font-weight: 200 900;
-            font-style: normal;
-            font-stretch: normal;
-            font-display: swap;
-            src: url('" . get_theme_file_uri( 'assets/fonts/SourceSerif4Variable-Roman.ttf.woff2' ) . "') format('woff2');
-        }
-
-        @font-face{
-            font-family: 'Source Serif Pro';
-            font-weight: 200 900;
-            font-style: italic;
-            font-stretch: normal;
-            font-display: swap;
-            src: url('" . get_theme_file_uri( 'assets/fonts/SourceSerif4Variable-Italic.ttf.woff2' ) . "') format('woff2');
-        }
-        ";
-
-    }
-
-endif;
-
-if ( ! function_exists( 'twentytwentytwo_preload_webfonts' ) ) :
-
-    /**
-     * Preloads the main web font to improve performance.
-     *
-     * Only the main web font (font-style: normal) is preloaded here since that font is always relevant (it is used
-     * on every heading, for example). The other font is only needed if there is any applicable content in italic style,
-     * and therefore preloading it would in most cases regress performance when that font would otherwise not be loaded
-     * at all.
-     *
-     * @since Twenty Twenty-Two 1.0
-     *
-     * @return void
-     */
-    function twentytwentytwo_preload_webfonts() {
-        ?>
-        <link rel="preload" href="<?php echo esc_url( get_theme_file_uri( 'assets/fonts/SourceSerif4Variable-Roman.ttf.woff2' ) ); ?>" as="font" type="font/woff2" crossorigin>
-        <?php
-    }
-
-endif;
-
-add_action( 'wp_head', 'twentytwentytwo_preload_webfonts' );
-
 // Add block patterns
 require get_template_directory() . '/inc/block-patterns.php';