WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
02/27/2024 12:04:55 PM (9 months ago)
Author:
youknowriad
Message:

Font face resolver: print font faces from font families defined in all theme.json origins.

This commit updates the theme.json style generation to allow a font family name to be repeated across theme.json origins (default, theme, custom).

Props mmaattiiaass, hellofromtonya, arthur791004, ironprogrammer.
Fixes #60605.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/tests/phpunit/tests/fonts/font-face/wp-font-face-tests-dataset.php

    r56500 r57720  
    9393            ),
    9494            'multiple woff2 format fonts'    => array(
    95                 'fonts'    => array(
     95                'fonts'                  => array(
    9696                    'DM Sans'       =>
    9797                        array(
    … …  
    185185                        ),
    186186                ),
    187                 'expected' => <<<CSS
     187                'expected'               => <<<CSS
    188188@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:fallback;src:url('https://example.org/assets/fonts/dm-sans/DMSans-Regular.woff2') format('woff2');font-stretch:normal;}
    189189@font-face{font-family:"DM Sans";font-style:italic;font-weight:400;font-display:fallback;src:url('https://example.org/assets/fonts/dm-sans/DMSans-Regular-Italic.woff2') format('woff2');font-stretch:normal;}
    … …  
    196196CSS
    197197            ,
     198                'indexed array as input' => array(
     199                    'fonts'    => array(
     200                        array(
     201                            array(
     202                                'font-family'  => 'Piazzolla',
     203                                'src'          => array( 'https://example.org/fonts/piazzolla400.ttf' ),
     204                                'font-style'   => 'normal',
     205                                'font-weight'  => '400',
     206                                'font-stretch' => 'normal',
     207                            ),
     208                            array(
     209                                'font-family'  => 'Piazzolla',
     210                                'src'          => array( 'https://example.org/fonts/piazzolla500.ttf' ),
     211                                'font-style'   => 'normal',
     212                                'font-weight'  => '400',
     213                                'font-stretch' => 'normal',
     214                            ),
     215                        ),
     216                        array(
     217                            array(
     218                                'font-family'  => 'Lobster',
     219                                'src'          => array( 'https://example.org/fonts/lobster400.ttf' ),
     220                                'font-style'   => 'normal',
     221                                'font-weight'  => '400',
     222                                'font-stretch' => 'normal',
     223                            ),
     224                            array(
     225                                'font-family'  => 'Lobster',
     226                                'src'          => array( 'https://example.org/fonts/lobster500.ttf' ),
     227                                'font-style'   => 'normal',
     228                                'font-weight'  => '500',
     229                                'font-stretch' => 'normal',
     230                            ),
     231                        ),
     232                    ),
     233                    'expected' => <<<CSS
     234@font-face{font-family:Piazzolla;font-style:normal;font-weight:400;font-display:fallback;src:url('https://example.org/fonts/piazzolla400.ttf') format('truetype');font-stretch:normal;}
     235@font-face{font-family:Piazzolla;font-style:normal;font-weight:400;font-display:fallback;src:url('https://example.org/fonts/piazzolla500.ttf') format('truetype');font-stretch:normal;}
     236@font-face{font-family:Lobster;font-style:normal;font-weight:400;font-display:fallback;src:url('https://example.org/fonts/lobster400.ttf') format('truetype');font-stretch:normal;}
     237@font-face{font-family:Lobster;font-style:normal;font-weight:500;font-display:fallback;src:url('https://example.org/fonts/lobster500.ttf') format('truetype');font-stretch:normal;}
     238CSS
     239                    ,
     240                ),
    198241            ),
    199242        );
    … …  
    207250            $data = array(
    208251                'fonts'            => array(
    209                     'DM Sans'          => array(
     252                    array(
    210253                        array(
    211254                            'src'          => array( $uri . 'dm-sans/DMSans-Regular.woff2' ),
    … …  
    237280                        ),
    238281                    ),
    239                     'Source Serif Pro' => array(
     282                    array(
    240283                        array(
    241284                            'src'          => array( $uri . 'source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2' ),
    … …  
    272315        return $data;
    273316    }
     317
     318    public static function get_custom_font_families( $key = '' ) {
     319        static $data = null;
     320
     321        $custom_theme_json_fonts = array(
     322            array(
     323                'fontFamily' => 'Piazzolla, serif',
     324                'name'       => 'Piazzolla',
     325                'slug'       => 'piazzolla',
     326                'fontFace'   => array(
     327                    array(
     328                        'fontFamily' => 'Piazzolla',
     329                        'src'        => array( 'https://example.org/fonts/piazzolla400.ttf' ),
     330                        'fontStyle'  => 'normal',
     331                        'fontWeight' => '400',
     332                    ),
     333                    array(
     334                        'fontFamily' => 'Piazzolla',
     335                        'src'        => array( 'https://example.org/fonts/piazzolla500.ttf' ),
     336                        'fontStyle'  => 'normal',
     337                        'fontWeight' => '400',
     338                    ),
     339                ),
     340            ),
     341            array(
     342                'fontFamily' => 'Lobster, sans-serif',
     343                'name'       => 'Lobster',
     344                'slug'       => 'lobster',
     345                'fontFace'   => array(
     346                    array(
     347                        'fontFamily' => 'Lobster',
     348                        'src'        => array( 'https://example.org/fonts/lobster400.ttf' ),
     349                        'fontStyle'  => 'normal',
     350                        'fontWeight' => '400',
     351                    ),
     352                    array(
     353                        'fontFamily' => 'Lobster',
     354                        'src'        => array( 'https://example.org/fonts/lobster500.ttf' ),
     355                        'fontStyle'  => 'normal',
     356                        'fontWeight' => '500',
     357                    ),
     358                ),
     359            ),
     360        );
     361
     362        $expected_font_faces = array(
     363            array(
     364                array(
     365                    'src'         => array( 'https://example.org/fonts/piazzolla400.ttf' ),
     366                    'font-family' => 'Piazzolla',
     367                    'font-style'  => 'normal',
     368                    'font-weight' => '400',
     369                ),
     370                array(
     371                    'src'         => array( 'https://example.org/fonts/piazzolla500.ttf' ),
     372                    'font-family' => 'Piazzolla',
     373                    'font-style'  => 'normal',
     374                    'font-weight' => '400',
     375                ),
     376            ),
     377            array(
     378                array(
     379                    'src'         => array( 'https://example.org/fonts/lobster400.ttf' ),
     380                    'font-family' => 'Lobster',
     381                    'font-style'  => 'normal',
     382                    'font-weight' => '400',
     383                ),
     384                array(
     385                    'src'         => array( 'https://example.org/fonts/lobster500.ttf' ),
     386                    'font-family' => 'Lobster',
     387                    'font-style'  => 'normal',
     388                    'font-weight' => '500',
     389                ),
     390            ),
     391        );
     392
     393        if ( null === $data ) {
     394            $data = array(
     395                'input'    => $custom_theme_json_fonts,
     396                'expected' => $expected_font_faces,
     397            );
     398        }
     399
     400        if ( isset( $data[ $key ] ) ) {
     401            return $data[ $key ];
     402        }
     403
     404        return $data;
     405    }
    274406}
Note: See TracChangeset for help on using the changeset viewer.