Get WordPress

Make WordPress Core

Changeset 53286

Timestamp:
04/26/2022 03:25:01 PM (2 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.

Location:
trunk/src/wp-content/themes/twentytwentytwo
Files:
29 added
1 deleted
5 edited

Legend:

Unmodified
Added
Removed

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

    r52392 r53286  
    5555        );
    5656
    57         // Add styles inline.
    58         wp_add_inline_style( 'twentytwentytwo-style', twentytwentytwo_get_font_face_styles() );
    59 
    6057        // Enqueue theme stylesheet.
    6158        wp_enqueue_style( 'twentytwentytwo-style' );
    … …  
    6764add_action( 'wp_enqueue_scripts', 'twentytwentytwo_styles' );
    6865
    69 if ( ! function_exists( 'twentytwentytwo_editor_styles' ) ) :
    70 
    71     /**
    72      * Enqueue editor styles.
    73      *
    74      * @since Twenty Twenty-Two 1.0
    75      *
    76      * @return void
    77      */
    78     function twentytwentytwo_editor_styles() {
    79 
    80         // Add styles inline.
    81         wp_add_inline_style( 'wp-block-library', twentytwentytwo_get_font_face_styles() );
    82 
    83     }
    84 
    85 endif;
    86 
    87 add_action( 'admin_init', 'twentytwentytwo_editor_styles' );
    88 
    89 
    90 if ( ! function_exists( 'twentytwentytwo_get_font_face_styles' ) ) :
    91 
    92     /**
    93      * Get font face styles.
    94      * Called by functions twentytwentytwo_styles() and twentytwentytwo_editor_styles() above.
    95      *
    96      * @since Twenty Twenty-Two 1.0
    97      *
    98      * @return string
    99      */
    100     function twentytwentytwo_get_font_face_styles() {
    101 
    102         return "
    103         @font-face{
    104             font-family: 'Source Serif Pro';
    105             font-weight: 200 900;
    106             font-style: normal;
    107             font-stretch: normal;
    108             font-display: swap;
    109             src: url('" . get_theme_file_uri( 'assets/fonts/SourceSerif4Variable-Roman.ttf.woff2' ) . "') format('woff2');
    110         }
    111 
    112         @font-face{
    113             font-family: 'Source Serif Pro';
    114             font-weight: 200 900;
    115             font-style: italic;
    116             font-stretch: normal;
    117             font-display: swap;
    118             src: url('" . get_theme_file_uri( 'assets/fonts/SourceSerif4Variable-Italic.ttf.woff2' ) . "') format('woff2');
    119         }
    120         ";
    121 
    122     }
    123 
    124 endif;
    125 
    126 if ( ! function_exists( 'twentytwentytwo_preload_webfonts' ) ) :
    127 
    128     /**
    129      * Preloads the main web font to improve performance.
    130      *
    131      * Only the main web font (font-style: normal) is preloaded here since that font is always relevant (it is used
    132      * on every heading, for example). The other font is only needed if there is any applicable content in italic style,
    133      * and therefore preloading it would in most cases regress performance when that font would otherwise not be loaded
    134      * at all.
    135      *
    136      * @since Twenty Twenty-Two 1.0
    137      *
    138      * @return void
    139      */
    140     function twentytwentytwo_preload_webfonts() {
    141         ?>
    142         <link rel="preload" href="<?php echo esc_url( get_theme_file_uri( 'assets/fonts/SourceSerif4Variable-Roman.ttf.woff2' ) ); ?>" as="font" type="font/woff2" crossorigin>
    143         <?php
    144     }
    145 
    146 endif;
    147 
    148 add_action( 'wp_head', 'twentytwentytwo_preload_webfonts' );
    149 
    15066// Add block patterns
    15167require get_template_directory() . '/inc/block-patterns.php';

  • trunk/src/wp-content/themes/twentytwentytwo/parts/header.html

    r52375 r53286  
    44<div class="wp-block-group"><!-- wp:site-logo {"width":64} /-->
    55
    6 <!-- wp:site-title {"style":{"typography":{"fontStyle":"italic","fontWeight":"400"}}} /--></div>
     6<!-- wp:site-title /--></div>
    77<!-- /wp:group -->
    88

  • trunk/src/wp-content/themes/twentytwentytwo/readme.txt

    r52781 r53286  
    22Contributors: wordpressdotorg
    33Requires at least: 5.9
    4 Tested up to: 5.9
     4Tested up to:
    55Requires PHP: 5.6
    6 Stable tag: 1.1
     6Stable tag: 1.
    77License: GPLv2 or later
    88License URI: http://www.gnu.org/licenses/gpl-2.0.html
    … …  
    1717
    1818== Changelog ==
     19
     20
     21
     22
     23
    1924
    2025= 1.1 =
    … …  
    4449
    4550This theme bundles the following third-party resources:
     51
     52
     53
     54
     55
     56
     57
     58
     59
     60
     61
     62
     63
     64
     65
     66
     67
    4668
    4769Source Serif Font

  • trunk/src/wp-content/themes/twentytwentytwo/style.css

    r52781 r53286  
    66Description: Built on a solidly designed foundation, Twenty Twenty-Two embraces the idea that everyone deserves a truly unique website. The theme’s subtle styles are inspired by the diversity and versatility of birds: its typography is lightweight yet strong, its color palette is drawn from nature, and its layout elements sit gently on the page. The true richness of Twenty Twenty-Two lies in its opportunity for customization. The theme is built to take advantage of the Full Site Editing features introduced in WordPress 5.9, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. It also includes dozens of block patterns, opening the door to a wide range of professionally designed layouts in just a few clicks. Whether you’re building a single-page website, a blog, a business website, or a portfolio, Twenty Twenty-Two will help you create a site that is uniquely yours.
    77Requires at least: 5.9
    8 Tested up to: 5.9
     8Tested up to:
    99Requires PHP: 5.6
    10 Version: 1.1
     10Version: 1.
    1111License: GNU General Public License v2 or later
    1212License URI: http://www.gnu.org/licenses/gpl-2.0.html

  • trunk/src/wp-content/themes/twentytwentytwo/theme.json

    r52430 r53286  
    179179                    "fontFamily": "\"Source Serif Pro\", serif",
    180180                    "name": "Source Serif Pro",
    181                     "slug": "source-serif-pro"
     181                    "slug": "source-serif-pro",
     182                    "fontFace": [
     183                        {
     184                            "fontFamily": "Source Serif Pro",
     185                            "fontWeight": "200 900",
     186                            "fontStyle": "normal",
     187                            "fontStretch": "normal",
     188                            "src": [ "file:./assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2" ]
     189                        },
     190                        {
     191                            "fontFamily": "Source Serif Pro",
     192                            "fontWeight": "200 900",
     193                            "fontStyle": "italic",
     194                            "fontStretch": "normal",
     195                            "src": [ "file:./assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2" ]
     196                        }
     197                    ]
    182198                }
    183199            ],
    … …  
    258274                    "lineHeight": "var(--wp--custom--typography--line-height--normal)",
    259275                    "fontSize": "var(--wp--preset--font-size--medium)",
     276
    260277                    "fontWeight": "normal"
    261278                }
Note: See TracChangeset for help on using the changeset viewer.