WordPress.org
Get WordPress

Make WordPress Core

Changeset 56500


Ignore:
Timestamp:
08/31/2023 09:47:40 PM (3 years ago)
Author:
hellofromTonya
Message:

Introduce font-face styles generator and printer.

Introducing Font Face, a server-side @font-face styles generator and printer.

tl;dr:

  • Introduces Font Face.
  • Deprecates _wp_theme_json_webfonts_handler().

Introduce Font Face

From an array of fonts (i.e. each font-family and its font variations to be processed), it:

  1. Validates each font-face declaration, i.e. the CSS property and value pairing. If validation fails, processing stops with no font-face styles printed.
  2. Generates the @font-face CSS for each font-family.
  3. Prints the CSS within a <style id="wp-fonts-local"> element.

The entry point into Font Face is through a new global function called wp_print_font_faces(), which is automatically called:

  • when the 'wp_head' hook runs (for the front-end).
  • when the 'admin_print_styles' hook runs (for the back-end).
  • when _wp_get_iframed_editor_assets() runs to inject the @font-face styles into the iframed editor.

Once called, it gets the fonts from Theme_JSON merged data layer, which includes theme defined fonts and user activated fonts (once the Font Library #59166 is introduced into Core).

For classic sites, themes and plugins can directly call wp_print_font_faces() and pass their fonts array to it for processing.

Deprecates _wp_theme_json_webfonts_handler().

As Font Face is a direct replacement, the stopgap code in _wp_theme_json_webfonts_handler() (introduced in 6.0.0 via [53282]) is deprecated and unused in Core.

Props note:
There's a long multiple year history baked into Font Face, which dates back to the early versions of a web font API (see #46370 and ​roadmap. The props list includes those who contributed from those early versions up to this commit.

References:

Follow-up to [53282].

Props aristath, jonoaldersonwp, hellofromTonya, andraganescu, annezazu, antonvlasenko, arena, askdesign, azaozz, bph, bradley2083, colorful-tones, costdev, davidbaumwald, desrosj, dingo_d, djcowan, domainsupport, dryanpress, elmastudio, flixos90, francina, garrett-eclipse, gigitux, grantmkin, grapplerulrich, gziolo, ironprogrammer, jb510, jeffpaul, jeremyyip, jffng, joostdevalk, jorgefilipecosta, juanmaguitar, mamaduka, matveb, mburridge, mitogh, ndiego, ntsekouras, oandregal, ocean90, oglekler, paaljoachim, pagelab, peterwilsoncc, poena, priethor, scruffian, SergeyBiryukov, shiloey, simison, skorasaurus, soean, westonruter, wildworks, zaguiini.
Fixes #59165.

Location:
trunk
Files:
42 added
1 deleted
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/phpcs.xml.dist

    r56392 r56500  
    260260                                <element value="WP_Tests_Image_Resize_UnitTestCase"/>
    261261                                <element value="WP_Theme_UnitTestCase"/>
     262                                <element value="WP_Font_Face_UnitTestCase"/>
    262263
    263264                                <!-- Mock classes. -->

  • trunk/src/wp-admin/includes/admin-filters.php

    r56199 r56500  
    169169// Append '(Draft)' to draft page titles in the privacy page dropdown.
    170170add_filter( 'list_pages', '_wp_privacy_settings_filter_draft_page_titles', 10, 2 );
     171
     172// Font management.
     173add_action( 'admin_print_styles', 'wp_print_font_faces', 50 );

  • trunk/src/wp-includes/block-editor.php

    r56047 r56500  
    362362        ob_start();
    363363        wp_print_styles();
     364        wp_print_font_faces();
    364365        $styles = ob_get_clean();
    365366

  • trunk/src/wp-includes/default-filters.php

    r56140 r56500  
    359359add_action( 'after_switch_theme', '_wp_sidebars_changed' );
    360360add_action( 'wp_print_styles', 'print_emoji_styles' );
    361 add_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' );
    362361
    363362if ( isset( $_GET['replytocom'] ) ) {
    … …  
    720719add_action( 'init', 'wp_create_initial_post_meta' );
    721720
     721// Font management.
     722add_action( 'wp_head', 'wp_print_font_faces', 50 );
     723
    722724unset( $filter, $action );

  • trunk/src/wp-includes/deprecated.php

    r56249 r56500  
    53685368        return $colors;
    53695369}
     5370
     5371/**
     5372 * Runs the theme.json webfonts handler.
     5373 *
     5374 * Using `WP_Theme_JSON_Resolver`, it gets the fonts defined
     5375 * in the `theme.json` for the current selection and style
     5376 * variations, validates the font-face properties, generates
     5377 * the '@font-face' style declarations, and then enqueues the
     5378 * styles for both the editor and front-end.
     5379 *
     5380 * Design Notes:
     5381 * This is not a public API, but rather an internal handler.
     5382 * A future public Webfonts API will replace this stopgap code.
     5383 *
     5384 * This code design is intentional.
     5385 *    a. It hides the inner-workings.
     5386 *    b. It does not expose API ins or outs for consumption.
     5387 *    c. It only works with a theme's `theme.json`.
     5388 *
     5389 * Why?
     5390 *    a. To avoid backwards-compatibility issues when
     5391 *       the Webfonts API is introduced in Core.
     5392 *    b. To make `fontFace` declarations in `theme.json` work.
     5393 *
     5394 * @link  https://github.com/WordPress/gutenberg/issues/40472
     5395 *
     5396 * @since 6.0.0
     5397 * @deprecated 6.4.0 Use wp_print_font_faces() instead.
     5398 * @access private
     5399 */
     5400function _wp_theme_json_webfonts_handler() {
     5401        _deprecated_function( __FUNCTION__, '6.4.0', 'wp_print_font_faces' );
     5402
     5403        // Block themes are unavailable during installation.
     5404        if ( wp_installing() ) {
     5405                return;
     5406        }
     5407
     5408        if ( ! wp_theme_has_theme_json() ) {
     5409                return;
     5410        }
     5411
     5412        // Webfonts to be processed.
     5413        $registered_webfonts = array();
     5414
     5415        /**
     5416         * Gets the webfonts from theme.json.
     5417         *
     5418         * @since 6.0.0
     5419         *
     5420         * @return array Array of defined webfonts.
     5421         */
     5422        $fn_get_webfonts_from_theme_json = static function() {
     5423                // Get settings from theme.json.
     5424                $settings = WP_Theme_JSON_Resolver::get_merged_data()->get_settings();
     5425
     5426                // If in the editor, add webfonts defined in variations.
     5427                if ( is_admin() || ( defined( 'REST_REQUEST' ) && REST_REQUEST ) ) {
     5428                        $variations = WP_Theme_JSON_Resolver::get_style_variations();
     5429                        foreach ( $variations as $variation ) {
     5430                                // Skip if fontFamilies are not defined in the variation.
     5431                                if ( empty( $variation['settings']['typography']['fontFamilies'] ) ) {
     5432                                        continue;
     5433                                }
     5434
     5435                                // Initialize the array structure.
     5436                                if ( empty( $settings['typography'] ) ) {
     5437                                        $settings['typography'] = array();
     5438                                }
     5439                                if ( empty( $settings['typography']['fontFamilies'] ) ) {
     5440                                        $settings['typography']['fontFamilies'] = array();
     5441                                }
     5442                                if ( empty( $settings['typography']['fontFamilies']['theme'] ) ) {
     5443                                        $settings['typography']['fontFamilies']['theme'] = array();
     5444                                }
     5445
     5446                                // Combine variations with settings. Remove duplicates.
     5447                                $settings['typography']['fontFamilies']['theme'] = array_merge( $settings['typography']['fontFamilies']['theme'], $variation['settings']['typography']['fontFamilies']['theme'] );
     5448                                $settings['typography']['fontFamilies']          = array_unique( $settings['typography']['fontFamilies'] );
     5449                        }
     5450                }
     5451
     5452                // Bail out early if there are no settings for webfonts.
     5453                if ( empty( $settings['typography']['fontFamilies'] ) ) {
     5454                        return array();
     5455                }
     5456
     5457                $webfonts = array();
     5458
     5459                // Look for fontFamilies.
     5460                foreach ( $settings['typography']['fontFamilies'] as $font_families ) {
     5461                        foreach ( $font_families as $font_family ) {
     5462
     5463                                // Skip if fontFace is not defined.
     5464                                if ( empty( $font_family['fontFace'] ) ) {
     5465                                        continue;
     5466                                }
     5467
     5468                                // Skip if fontFace is not an array of webfonts.
     5469                                if ( ! is_array( $font_family['fontFace'] ) ) {
     5470                                        continue;
     5471                                }
     5472
     5473                                $webfonts = array_merge( $webfonts, $font_family['fontFace'] );
     5474                        }
     5475                }
     5476
     5477                return $webfonts;
     5478        };
     5479
     5480        /**
     5481         * Transforms each 'src' into an URI by replacing 'file:./'
     5482         * placeholder from theme.json.
     5483         *
     5484         * The absolute path to the webfont file(s) cannot be defined in
     5485         * theme.json. `file:./` is the placeholder which is replaced by
     5486         * the theme's URL path to the theme's root.
     5487         *
     5488         * @since 6.0.0
     5489         *
     5490         * @param array $src Webfont file(s) `src`.
     5491         * @return array Webfont's `src` in URI.
     5492         */
     5493        $fn_transform_src_into_uri = static function( array $src ) {
     5494                foreach ( $src as $key => $url ) {
     5495                        // Tweak the URL to be relative to the theme root.
     5496                        if ( ! str_starts_with( $url, 'file:./' ) ) {
     5497                                continue;
     5498                        }
     5499
     5500                        $src[ $key ] = get_theme_file_uri( str_replace( 'file:./', '', $url ) );
     5501                }
     5502
     5503                return $src;
     5504        };
     5505
     5506        /**
     5507         * Converts the font-face properties (i.e. keys) into kebab-case.
     5508         *
     5509         * @since 6.0.0
     5510         *
     5511         * @param array $font_face Font face to convert.
     5512         * @return array Font faces with each property in kebab-case format.
     5513         */
     5514        $fn_convert_keys_to_kebab_case = static function( array $font_face ) {
     5515                foreach ( $font_face as $property => $value ) {
     5516                        $kebab_case               = _wp_to_kebab_case( $property );
     5517                        $font_face[ $kebab_case ] = $value;
     5518                        if ( $kebab_case !== $property ) {
     5519                                unset( $font_face[ $property ] );
     5520                        }
     5521                }
     5522
     5523                return $font_face;
     5524        };
     5525
     5526        /**
     5527         * Validates a webfont.
     5528         *
     5529         * @since 6.0.0
     5530         *
     5531         * @param array $webfont The webfont arguments.
     5532         * @return array|false The validated webfont arguments, or false if the webfont is invalid.
     5533         */
     5534        $fn_validate_webfont = static function( $webfont ) {
     5535                $webfont = wp_parse_args(
     5536                                $webfont,
     5537                                array(
     5538                                                'font-family'  => '',
     5539                                                'font-style'   => 'normal',
     5540                                                'font-weight'  => '400',
     5541                                                'font-display' => 'fallback',
     5542                                                'src'          => array(),
     5543                                )
     5544                );
     5545
     5546                // Check the font-family.
     5547                if ( empty( $webfont['font-family'] ) || ! is_string( $webfont['font-family'] ) ) {
     5548                        trigger_error( __( 'Webfont font family must be a non-empty string.' ) );
     5549
     5550                        return false;
     5551                }
     5552
     5553                // Check that the `src` property is defined and a valid type.
     5554                if ( empty( $webfont['src'] ) || ( ! is_string( $webfont['src'] ) && ! is_array( $webfont['src'] ) ) ) {
     5555                        trigger_error( __( 'Webfont src must be a non-empty string or an array of strings.' ) );
     5556
     5557                        return false;
     5558                }
     5559
     5560                // Validate the `src` property.
     5561                foreach ( (array) $webfont['src'] as $src ) {
     5562                        if ( ! is_string( $src ) || '' === trim( $src ) ) {
     5563                                trigger_error( __( 'Each webfont src must be a non-empty string.' ) );
     5564
     5565                                return false;
     5566                        }
     5567                }
     5568
     5569                // Check the font-weight.
     5570                if ( ! is_string( $webfont['font-weight'] ) && ! is_int( $webfont['font-weight'] ) ) {
     5571                        trigger_error( __( 'Webfont font weight must be a properly formatted string or integer.' ) );
     5572
     5573                        return false;
     5574                }
     5575
     5576                // Check the font-display.
     5577                if ( ! in_array( $webfont['font-display'], array( 'auto', 'block', 'fallback', 'optional', 'swap' ), true ) ) {
     5578                        $webfont['font-display'] = 'fallback';
     5579                }
     5580
     5581                $valid_props = array(
     5582                                'ascend-override',
     5583                                'descend-override',
     5584                                'font-display',
     5585                                'font-family',
     5586                                'font-stretch',
     5587                                'font-style',
     5588                                'font-weight',
     5589                                'font-variant',
     5590                                'font-feature-settings',
     5591                                'font-variation-settings',
     5592                                'line-gap-override',
     5593                                'size-adjust',
     5594                                'src',
     5595                                'unicode-range',
     5596                );
     5597
     5598                foreach ( $webfont as $prop => $value ) {
     5599                        if ( ! in_array( $prop, $valid_props, true ) ) {
     5600                                unset( $webfont[ $prop ] );
     5601                        }
     5602                }
     5603
     5604                return $webfont;
     5605        };
     5606
     5607        /**
     5608         * Registers webfonts declared in theme.json.
     5609         *
     5610         * @since 6.0.0
     5611         *
     5612         * @uses $registered_webfonts To access and update the registered webfonts registry (passed by reference).
     5613         * @uses $fn_get_webfonts_from_theme_json To run the function that gets the webfonts from theme.json.
     5614         * @uses $fn_convert_keys_to_kebab_case To run the function that converts keys into kebab-case.
     5615         * @uses $fn_validate_webfont To run the function that validates each font-face (webfont) from theme.json.
     5616         */
     5617        $fn_register_webfonts = static function() use ( &$registered_webfonts, $fn_get_webfonts_from_theme_json, $fn_convert_keys_to_kebab_case, $fn_validate_webfont, $fn_transform_src_into_uri ) {
     5618                $registered_webfonts = array();
     5619
     5620                foreach ( $fn_get_webfonts_from_theme_json() as $webfont ) {
     5621                        if ( ! is_array( $webfont ) ) {
     5622                                continue;
     5623                        }
     5624
     5625                        $webfont = $fn_convert_keys_to_kebab_case( $webfont );
     5626
     5627                        $webfont = $fn_validate_webfont( $webfont );
     5628
     5629                        $webfont['src'] = $fn_transform_src_into_uri( (array) $webfont['src'] );
     5630
     5631                        // Skip if not valid.
     5632                        if ( empty( $webfont ) ) {
     5633                                continue;
     5634                        }
     5635
     5636                        $registered_webfonts[] = $webfont;
     5637                }
     5638        };
     5639
     5640        /**
     5641         * Orders 'src' items to optimize for browser support.
     5642         *
     5643         * @since 6.0.0
     5644         *
     5645         * @param array $webfont Webfont to process.
     5646         * @return array Ordered `src` items.
     5647         */
     5648        $fn_order_src = static function( array $webfont ) {
     5649                $src         = array();
     5650                $src_ordered = array();
     5651
     5652                foreach ( $webfont['src'] as $url ) {
     5653                        // Add data URIs first.
     5654                        if ( str_starts_with( trim( $url ), 'data:' ) ) {
     5655                                $src_ordered[] = array(
     5656                                                'url'    => $url,
     5657                                                'format' => 'data',
     5658                                );
     5659                                continue;
     5660                        }
     5661                        $format         = pathinfo( $url, PATHINFO_EXTENSION );
     5662                        $src[ $format ] = $url;
     5663                }
     5664
     5665                // Add woff2.
     5666                if ( ! empty( $src['woff2'] ) ) {
     5667                        $src_ordered[] = array(
     5668                                        'url'    => sanitize_url( $src['woff2'] ),
     5669                                        'format' => 'woff2',
     5670                        );
     5671                }
     5672
     5673                // Add woff.
     5674                if ( ! empty( $src['woff'] ) ) {
     5675                        $src_ordered[] = array(
     5676                                        'url'    => sanitize_url( $src['woff'] ),
     5677                                        'format' => 'woff',
     5678                        );
     5679                }
     5680
     5681                // Add ttf.
     5682                if ( ! empty( $src['ttf'] ) ) {
     5683                        $src_ordered[] = array(
     5684                                        'url'    => sanitize_url( $src['ttf'] ),
     5685                                        'format' => 'truetype',
     5686                        );
     5687                }
     5688
     5689                // Add eot.
     5690                if ( ! empty( $src['eot'] ) ) {
     5691                        $src_ordered[] = array(
     5692                                        'url'    => sanitize_url( $src['eot'] ),
     5693                                        'format' => 'embedded-opentype',
     5694                        );
     5695                }
     5696
     5697                // Add otf.
     5698                if ( ! empty( $src['otf'] ) ) {
     5699                        $src_ordered[] = array(
     5700                                        'url'    => sanitize_url( $src['otf'] ),
     5701                                        'format' => 'opentype',
     5702                        );
     5703                }
     5704                $webfont['src'] = $src_ordered;
     5705
     5706                return $webfont;
     5707        };
     5708
     5709        /**
     5710         * Compiles the 'src' into valid CSS.
     5711         *
     5712         * @since 6.0.0
     5713         * @since 6.2.0 Removed local() CSS.
     5714         *
     5715         * @param string $font_family Font family.
     5716         * @param array  $value       Value to process.
     5717         * @return string The CSS.
     5718         */
     5719        $fn_compile_src = static function( $font_family, array $value ) {
     5720                $src = '';
     5721
     5722                foreach ( $value as $item ) {
     5723                        $src .= ( 'data' === $item['format'] )
     5724                                        ? ", url({$item['url']})"
     5725                                        : ", url('{$item['url']}') format('{$item['format']}')";
     5726                }
     5727
     5728                $src = ltrim( $src, ', ' );
     5729
     5730                return $src;
     5731        };
     5732
     5733        /**
     5734         * Compiles the font variation settings.
     5735         *
     5736         * @since 6.0.0
     5737         *
     5738         * @param array $font_variation_settings Array of font variation settings.
     5739         * @return string The CSS.
     5740         */
     5741        $fn_compile_variations = static function( array $font_variation_settings ) {
     5742                $variations = '';
     5743
     5744                foreach ( $font_variation_settings as $key => $value ) {
     5745                        $variations .= "$key $value";
     5746                }
     5747
     5748                return $variations;
     5749        };
     5750
     5751        /**
     5752         * Builds the font-family's CSS.
     5753         *
     5754         * @since 6.0.0
     5755         *
     5756         * @uses $fn_compile_src To run the function that compiles the src.
     5757         * @uses $fn_compile_variations To run the function that compiles the variations.
     5758         *
     5759         * @param array $webfont Webfont to process.
     5760         * @return string This font-family's CSS.
     5761         */
     5762        $fn_build_font_face_css = static function( array $webfont ) use ( $fn_compile_src, $fn_compile_variations ) {
     5763                $css = '';
     5764
     5765                // Wrap font-family in quotes if it contains spaces.
     5766                if (
     5767                                str_contains( $webfont['font-family'], ' ' ) &&
     5768                                ! str_contains( $webfont['font-family'], '"' ) &&
     5769                                ! str_contains( $webfont['font-family'], "'" )
     5770                ) {
     5771                        $webfont['font-family'] = '"' . $webfont['font-family'] . '"';
     5772                }
     5773
     5774                foreach ( $webfont as $key => $value ) {
     5775                        /*
     5776                         * Skip "provider", since it's for internal API use,
     5777                         * and not a valid CSS property.
     5778                         */
     5779                        if ( 'provider' === $key ) {
     5780                                continue;
     5781                        }
     5782
     5783                        // Compile the "src" parameter.
     5784                        if ( 'src' === $key ) {
     5785                                $value = $fn_compile_src( $webfont['font-family'], $value );
     5786                        }
     5787
     5788                        // If font-variation-settings is an array, convert it to a string.
     5789                        if ( 'font-variation-settings' === $key && is_array( $value ) ) {
     5790                                $value = $fn_compile_variations( $value );
     5791                        }
     5792
     5793                        if ( ! empty( $value ) ) {
     5794                                $css .= "$key:$value;";
     5795                        }
     5796                }
     5797
     5798                return $css;
     5799        };
     5800
     5801        /**
     5802         * Gets the '@font-face' CSS styles for locally-hosted font files.
     5803         *
     5804         * @since 6.0.0
     5805         *
     5806         * @uses $registered_webfonts To access and update the registered webfonts registry (passed by reference).
     5807         * @uses $fn_order_src To run the function that orders the src.
     5808         * @uses $fn_build_font_face_css To run the function that builds the font-face CSS.
     5809         *
     5810         * @return string The `@font-face` CSS.
     5811         */
     5812        $fn_get_css = static function() use ( &$registered_webfonts, $fn_order_src, $fn_build_font_face_css ) {
     5813                $css = '';
     5814
     5815                foreach ( $registered_webfonts as $webfont ) {
     5816                        // Order the webfont's `src` items to optimize for browser support.
     5817                        $webfont = $fn_order_src( $webfont );
     5818
     5819                        // Build the @font-face CSS for this webfont.
     5820                        $css .= '@font-face{' . $fn_build_font_face_css( $webfont ) . '}';
     5821                }
     5822
     5823                return $css;
     5824        };
     5825
     5826        /**
     5827         * Generates and enqueues webfonts styles.
     5828         *
     5829         * @since 6.0.0
     5830         *
     5831         * @uses $fn_get_css To run the function that gets the CSS.
     5832         */
     5833        $fn_generate_and_enqueue_styles = static function() use ( $fn_get_css ) {
     5834                // Generate the styles.
     5835                $styles = $fn_get_css();
     5836
     5837                // Bail out if there are no styles to enqueue.
     5838                if ( '' === $styles ) {
     5839                        return;
     5840                }
     5841
     5842                // Enqueue the stylesheet.
     5843                wp_register_style( 'wp-webfonts', '' );
     5844                wp_enqueue_style( 'wp-webfonts' );
     5845
     5846                // Add the styles to the stylesheet.
     5847                wp_add_inline_style( 'wp-webfonts', $styles );
     5848        };
     5849
     5850        /**
     5851         * Generates and enqueues editor styles.
     5852         *
     5853         * @since 6.0.0
     5854         *
     5855         * @uses $fn_get_css To run the function that gets the CSS.
     5856         */
     5857        $fn_generate_and_enqueue_editor_styles = static function() use ( $fn_get_css ) {
     5858                // Generate the styles.
     5859                $styles = $fn_get_css();
     5860
     5861                // Bail out if there are no styles to enqueue.
     5862                if ( '' === $styles ) {
     5863                        return;
     5864                }
     5865
     5866                wp_add_inline_style( 'wp-block-library', $styles );
     5867        };
     5868
     5869        add_action( 'wp_loaded', $fn_register_webfonts );
     5870        add_action( 'wp_enqueue_scripts', $fn_generate_and_enqueue_styles );
     5871        add_action( 'admin_init', $fn_generate_and_enqueue_editor_styles );
     5872}

  • trunk/src/wp-includes/script-loader.php

    r56496 r56500  
    32253225
    32263226/**
    3227  * Runs the theme.json webfonts handler.
    3228  *
    3229  * Using `WP_Theme_JSON_Resolver`, it gets the fonts defined
    3230  * in the `theme.json` for the current selection and style
    3231  * variations, validates the font-face properties, generates
    3232  * the '@font-face' style declarations, and then enqueues the
    3233  * styles for both the editor and front-end.
    3234  *
    3235  * Design Notes:
    3236  * This is not a public API, but rather an internal handler.
    3237  * A future public Webfonts API will replace this stopgap code.
    3238  *
    3239  * This code design is intentional.
    3240  *    a. It hides the inner-workings.
    3241  *    b. It does not expose API ins or outs for consumption.
    3242  *    c. It only works with a theme's `theme.json`.
    3243  *
    3244  * Why?
    3245  *    a. To avoid backwards-compatibility issues when
    3246  *       the Webfonts API is introduced in Core.
    3247  *    b. To make `fontFace` declarations in `theme.json` work.
    3248  *
    3249  * @link  https://github.com/WordPress/gutenberg/issues/40472
    3250  *
    3251  * @since 6.0.0
    3252  * @access private
    3253  */
    3254 function _wp_theme_json_webfonts_handler() {
    3255         // Block themes are unavailable during installation.
    3256         if ( wp_installing() ) {
    3257                 return;
    3258         }
    3259 
    3260         if ( ! wp_theme_has_theme_json() ) {
    3261                 return;
    3262         }
    3263 
    3264         // Webfonts to be processed.
    3265         $registered_webfonts = array();
    3266 
    3267         /**
    3268          * Gets the webfonts from theme.json.
    3269          *
    3270          * @since 6.0.0
    3271          *
    3272          * @return array Array of defined webfonts.
    3273          */
    3274         $fn_get_webfonts_from_theme_json = static function() {
    3275                 // Get settings from theme.json.
    3276                 $settings = WP_Theme_JSON_Resolver::get_merged_data()->get_settings();
    3277 
    3278                 // If in the editor, add webfonts defined in variations.
    3279                 if ( is_admin() || ( defined( 'REST_REQUEST' ) && REST_REQUEST ) ) {
    3280                         $variations = WP_Theme_JSON_Resolver::get_style_variations();
    3281                         foreach ( $variations as $variation ) {
    3282                                 // Skip if fontFamilies are not defined in the variation.
    3283                                 if ( empty( $variation['settings']['typography']['fontFamilies'] ) ) {
    3284                                         continue;
    3285                                 }
    3286 
    3287                                 // Initialize the array structure.
    3288                                 if ( empty( $settings['typography'] ) ) {
    3289                                         $settings['typography'] = array();
    3290                                 }
    3291                                 if ( empty( $settings['typography']['fontFamilies'] ) ) {
    3292                                         $settings['typography']['fontFamilies'] = array();
    3293                                 }
    3294                                 if ( empty( $settings['typography']['fontFamilies']['theme'] ) ) {
    3295                                         $settings['typography']['fontFamilies']['theme'] = array();
    3296                                 }
    3297 
    3298                                 // Combine variations with settings. Remove duplicates.
    3299                                 $settings['typography']['fontFamilies']['theme'] = array_merge( $settings['typography']['fontFamilies']['theme'], $variation['settings']['typography']['fontFamilies']['theme'] );
    3300                                 $settings['typography']['fontFamilies']          = array_unique( $settings['typography']['fontFamilies'] );
    3301                         }
    3302                 }
    3303 
    3304                 // Bail out early if there are no settings for webfonts.
    3305                 if ( empty( $settings['typography']['fontFamilies'] ) ) {
    3306                         return array();
    3307                 }
    3308 
    3309                 $webfonts = array();
    3310 
    3311                 // Look for fontFamilies.
    3312                 foreach ( $settings['typography']['fontFamilies'] as $font_families ) {
    3313                         foreach ( $font_families as $font_family ) {
    3314 
    3315                                 // Skip if fontFace is not defined.
    3316                                 if ( empty( $font_family['fontFace'] ) ) {
    3317                                         continue;
    3318                                 }
    3319 
    3320                                 // Skip if fontFace is not an array of webfonts.
    3321                                 if ( ! is_array( $font_family['fontFace'] ) ) {
    3322                                         continue;
    3323                                 }
    3324 
    3325                                 $webfonts = array_merge( $webfonts, $font_family['fontFace'] );
    3326                         }
    3327                 }
    3328 
    3329                 return $webfonts;
    3330         };
    3331 
    3332         /**
    3333          * Transforms each 'src' into an URI by replacing 'file:./'
    3334          * placeholder from theme.json.
    3335          *
    3336          * The absolute path to the webfont file(s) cannot be defined in
    3337          * theme.json. `file:./` is the placeholder which is replaced by
    3338          * the theme's URL path to the theme's root.
    3339          *
    3340          * @since 6.0.0
    3341          *
    3342          * @param array $src Webfont file(s) `src`.
    3343          * @return array Webfont's `src` in URI.
    3344          */
    3345         $fn_transform_src_into_uri = static function( array $src ) {
    3346                 foreach ( $src as $key => $url ) {
    3347                         // Tweak the URL to be relative to the theme root.
    3348                         if ( ! str_starts_with( $url, 'file:./' ) ) {
    3349                                 continue;
    3350                         }
    3351 
    3352                         $src[ $key ] = get_theme_file_uri( str_replace( 'file:./', '', $url ) );
    3353                 }
    3354 
    3355                 return $src;
    3356         };
    3357 
    3358         /**
    3359          * Converts the font-face properties (i.e. keys) into kebab-case.
    3360          *
    3361          * @since 6.0.0
    3362          *
    3363          * @param array $font_face Font face to convert.
    3364          * @return array Font faces with each property in kebab-case format.
    3365          */
    3366         $fn_convert_keys_to_kebab_case = static function( array $font_face ) {
    3367                 foreach ( $font_face as $property => $value ) {
    3368                         $kebab_case               = _wp_to_kebab_case( $property );
    3369                         $font_face[ $kebab_case ] = $value;
    3370                         if ( $kebab_case !== $property ) {
    3371                                 unset( $font_face[ $property ] );
    3372                         }
    3373                 }
    3374 
    3375                 return $font_face;
    3376         };
    3377 
    3378         /**
    3379          * Validates a webfont.
    3380          *
    3381          * @since 6.0.0
    3382          *
    3383          * @param array $webfont The webfont arguments.
    3384          * @return array|false The validated webfont arguments, or false if the webfont is invalid.
    3385          */
    3386         $fn_validate_webfont = static function( $webfont ) {
    3387                 $webfont = wp_parse_args(
    3388                         $webfont,
    3389                         array(
    3390                                 'font-family'  => '',
    3391                                 'font-style'   => 'normal',
    3392                                 'font-weight'  => '400',
    3393                                 'font-display' => 'fallback',
    3394                                 'src'          => array(),
    3395                         )
    3396                 );
    3397 
    3398                 // Check the font-family.
    3399                 if ( empty( $webfont['font-family'] ) || ! is_string( $webfont['font-family'] ) ) {
    3400                         trigger_error( __( 'Webfont font family must be a non-empty string.' ) );
    3401 
    3402                         return false;
    3403                 }
    3404 
    3405                 // Check that the `src` property is defined and a valid type.
    3406                 if ( empty( $webfont['src'] ) || ( ! is_string( $webfont['src'] ) && ! is_array( $webfont['src'] ) ) ) {
    3407                         trigger_error( __( 'Webfont src must be a non-empty string or an array of strings.' ) );
    3408 
    3409                         return false;
    3410                 }
    3411 
    3412                 // Validate the `src` property.
    3413                 foreach ( (array) $webfont['src'] as $src ) {
    3414                         if ( ! is_string( $src ) || '' === trim( $src ) ) {
    3415                                 trigger_error( __( 'Each webfont src must be a non-empty string.' ) );
    3416 
    3417                                 return false;
    3418                         }
    3419                 }
    3420 
    3421                 // Check the font-weight.
    3422                 if ( ! is_string( $webfont['font-weight'] ) && ! is_int( $webfont['font-weight'] ) ) {
    3423                         trigger_error( __( 'Webfont font weight must be a properly formatted string or integer.' ) );
    3424 
    3425                         return false;
    3426                 }
    3427 
    3428                 // Check the font-display.
    3429                 if ( ! in_array( $webfont['font-display'], array( 'auto', 'block', 'fallback', 'optional', 'swap' ), true ) ) {
    3430                         $webfont['font-display'] = 'fallback';
    3431                 }
    3432 
    3433                 $valid_props = array(
    3434                         'ascend-override',
    3435                         'descend-override',
    3436                         'font-display',
    3437                         'font-family',
    3438                         'font-stretch',
    3439                         'font-style',
    3440                         'font-weight',
    3441                         'font-variant',
    3442                         'font-feature-settings',
    3443                         'font-variation-settings',
    3444                         'line-gap-override',
    3445                         'size-adjust',
    3446                         'src',
    3447                         'unicode-range',
    3448                 );
    3449 
    3450                 foreach ( $webfont as $prop => $value ) {
    3451                         if ( ! in_array( $prop, $valid_props, true ) ) {
    3452                                 unset( $webfont[ $prop ] );
    3453                         }
    3454                 }
    3455 
    3456                 return $webfont;
    3457         };
    3458 
    3459         /**
    3460          * Registers webfonts declared in theme.json.
    3461          *
    3462          * @since 6.0.0
    3463          *
    3464          * @uses $registered_webfonts To access and update the registered webfonts registry (passed by reference).
    3465          * @uses $fn_get_webfonts_from_theme_json To run the function that gets the webfonts from theme.json.
    3466          * @uses $fn_convert_keys_to_kebab_case To run the function that converts keys into kebab-case.
    3467          * @uses $fn_validate_webfont To run the function that validates each font-face (webfont) from theme.json.
    3468          */
    3469         $fn_register_webfonts = static function() use ( &$registered_webfonts, $fn_get_webfonts_from_theme_json, $fn_convert_keys_to_kebab_case, $fn_validate_webfont, $fn_transform_src_into_uri ) {
    3470                 $registered_webfonts = array();
    3471 
    3472                 foreach ( $fn_get_webfonts_from_theme_json() as $webfont ) {
    3473                         if ( ! is_array( $webfont ) ) {
    3474                                 continue;
    3475                         }
    3476 
    3477                         $webfont = $fn_convert_keys_to_kebab_case( $webfont );
    3478 
    3479                         $webfont = $fn_validate_webfont( $webfont );
    3480 
    3481                         $webfont['src'] = $fn_transform_src_into_uri( (array) $webfont['src'] );
    3482 
    3483                         // Skip if not valid.
    3484                         if ( empty( $webfont ) ) {
    3485                                 continue;
    3486                         }
    3487 
    3488                         $registered_webfonts[] = $webfont;
    3489                 }
    3490         };
    3491 
    3492         /**
    3493          * Orders 'src' items to optimize for browser support.
    3494          *
    3495          * @since 6.0.0
    3496          *
    3497          * @param array $webfont Webfont to process.
    3498          * @return array Ordered `src` items.
    3499          */
    3500         $fn_order_src = static function( array $webfont ) {
    3501                 $src         = array();
    3502                 $src_ordered = array();
    3503 
    3504                 foreach ( $webfont['src'] as $url ) {
    3505                         // Add data URIs first.
    3506                         if ( str_starts_with( trim( $url ), 'data:' ) ) {
    3507                                 $src_ordered[] = array(
    3508                                         'url'    => $url,
    3509                                         'format' => 'data',
    3510                                 );
    3511                                 continue;
    3512                         }
    3513                         $format         = pathinfo( $url, PATHINFO_EXTENSION );
    3514                         $src[ $format ] = $url;
    3515                 }
    3516 
    3517                 // Add woff2.
    3518                 if ( ! empty( $src['woff2'] ) ) {
    3519                         $src_ordered[] = array(
    3520                                 'url'    => sanitize_url( $src['woff2'] ),
    3521                                 'format' => 'woff2',
    3522                         );
    3523                 }
    3524 
    3525                 // Add woff.
    3526                 if ( ! empty( $src['woff'] ) ) {
    3527                         $src_ordered[] = array(
    3528                                 'url'    => sanitize_url( $src['woff'] ),
    3529                                 'format' => 'woff',
    3530                         );
    3531                 }
    3532 
    3533                 // Add ttf.
    3534                 if ( ! empty( $src['ttf'] ) ) {
    3535                         $src_ordered[] = array(
    3536                                 'url'    => sanitize_url( $src['ttf'] ),
    3537                                 'format' => 'truetype',
    3538                         );
    3539                 }
    3540 
    3541                 // Add eot.
    3542                 if ( ! empty( $src['eot'] ) ) {
    3543                         $src_ordered[] = array(
    3544                                 'url'    => sanitize_url( $src['eot'] ),
    3545                                 'format' => 'embedded-opentype',
    3546                         );
    3547                 }
    3548 
    3549                 // Add otf.
    3550                 if ( ! empty( $src['otf'] ) ) {
    3551                         $src_ordered[] = array(
    3552                                 'url'    => sanitize_url( $src['otf'] ),
    3553                                 'format' => 'opentype',
    3554                         );
    3555                 }
    3556                 $webfont['src'] = $src_ordered;
    3557 
    3558                 return $webfont;
    3559         };
    3560 
    3561         /**
    3562          * Compiles the 'src' into valid CSS.
    3563          *
    3564          * @since 6.0.0
    3565          * @since 6.2.0 Removed local() CSS.
    3566          *
    3567          * @param string $font_family Font family.
    3568          * @param array  $value       Value to process.
    3569          * @return string The CSS.
    3570          */
    3571         $fn_compile_src = static function( $font_family, array $value ) {
    3572                 $src = '';
    3573 
    3574                 foreach ( $value as $item ) {
    3575                         $src .= ( 'data' === $item['format'] )
    3576                                 ? ", url({$item['url']})"
    3577                                 : ", url('{$item['url']}') format('{$item['format']}')";
    3578                 }
    3579 
    3580                 $src = ltrim( $src, ', ' );
    3581 
    3582                 return $src;
    3583         };
    3584 
    3585         /**
    3586          * Compiles the font variation settings.
    3587          *
    3588          * @since 6.0.0
    3589          *
    3590          * @param array $font_variation_settings Array of font variation settings.
    3591          * @return string The CSS.
    3592          */
    3593         $fn_compile_variations = static function( array $font_variation_settings ) {
    3594                 $variations = '';
    3595 
    3596                 foreach ( $font_variation_settings as $key => $value ) {
    3597                         $variations .= "$key $value";
    3598                 }
    3599 
    3600                 return $variations;
    3601         };
    3602 
    3603         /**
    3604          * Builds the font-family's CSS.
    3605          *
    3606          * @since 6.0.0
    3607          *
    3608          * @uses $fn_compile_src To run the function that compiles the src.
    3609          * @uses $fn_compile_variations To run the function that compiles the variations.
    3610          *
    3611          * @param array $webfont Webfont to process.
    3612          * @return string This font-family's CSS.
    3613          */
    3614         $fn_build_font_face_css = static function( array $webfont ) use ( $fn_compile_src, $fn_compile_variations ) {
    3615                 $css = '';
    3616 
    3617                 // Wrap font-family in quotes if it contains spaces.
    3618                 if (
    3619                         str_contains( $webfont['font-family'], ' ' ) &&
    3620                         ! str_contains( $webfont['font-family'], '"' ) &&
    3621                         ! str_contains( $webfont['font-family'], "'" )
    3622                 ) {
    3623                         $webfont['font-family'] = '"' . $webfont['font-family'] . '"';
    3624                 }
    3625 
    3626                 foreach ( $webfont as $key => $value ) {
    3627                         /*
    3628                          * Skip "provider", since it's for internal API use,
    3629                          * and not a valid CSS property.
    3630                          */
    3631                         if ( 'provider' === $key ) {
    3632                                 continue;
    3633                         }
    3634 
    3635                         // Compile the "src" parameter.
    3636                         if ( 'src' === $key ) {
    3637                                 $value = $fn_compile_src( $webfont['font-family'], $value );
    3638                         }
    3639 
    3640                         // If font-variation-settings is an array, convert it to a string.
    3641                         if ( 'font-variation-settings' === $key && is_array( $value ) ) {
    3642                                 $value = $fn_compile_variations( $value );
    3643                         }
    3644 
    3645                         if ( ! empty( $value ) ) {
    3646                                 $css .= "$key:$value;";
    3647                         }
    3648                 }
    3649 
    3650                 return $css;
    3651         };
    3652 
    3653         /**
    3654          * Gets the '@font-face' CSS styles for locally-hosted font files.
    3655          *
    3656          * @since 6.0.0
    3657          *
    3658          * @uses $registered_webfonts To access and update the registered webfonts registry (passed by reference).
    3659          * @uses $fn_order_src To run the function that orders the src.
    3660          * @uses $fn_build_font_face_css To run the function that builds the font-face CSS.
    3661          *
    3662          * @return string The `@font-face` CSS.
    3663          */
    3664         $fn_get_css = static function() use ( &$registered_webfonts, $fn_order_src, $fn_build_font_face_css ) {
    3665                 $css = '';
    3666 
    3667                 foreach ( $registered_webfonts as $webfont ) {
    3668                         // Order the webfont's `src` items to optimize for browser support.
    3669                         $webfont = $fn_order_src( $webfont );
    3670 
    3671                         // Build the @font-face CSS for this webfont.
    3672                         $css .= '@font-face{' . $fn_build_font_face_css( $webfont ) . '}';
    3673                 }
    3674 
    3675                 return $css;
    3676         };
    3677 
    3678         /**
    3679          * Generates and enqueues webfonts styles.
    3680          *
    3681          * @since 6.0.0
    3682          *
    3683          * @uses $fn_get_css To run the function that gets the CSS.
    3684          */
    3685         $fn_generate_and_enqueue_styles = static function() use ( $fn_get_css ) {
    3686                 // Generate the styles.
    3687                 $styles = $fn_get_css();
    3688 
    3689                 // Bail out if there are no styles to enqueue.
    3690                 if ( '' === $styles ) {
    3691                         return;
    3692                 }
    3693 
    3694                 // Enqueue the stylesheet.
    3695                 wp_register_style( 'wp-webfonts', '' );
    3696                 wp_enqueue_style( 'wp-webfonts' );
    3697 
    3698                 // Add the styles to the stylesheet.
    3699                 wp_add_inline_style( 'wp-webfonts', $styles );
    3700         };
    3701 
    3702         /**
    3703          * Generates and enqueues editor styles.
    3704          *
    3705          * @since 6.0.0
    3706          *
    3707          * @uses $fn_get_css To run the function that gets the CSS.
    3708          */
    3709         $fn_generate_and_enqueue_editor_styles = static function() use ( $fn_get_css ) {
    3710                 // Generate the styles.
    3711                 $styles = $fn_get_css();
    3712 
    3713                 // Bail out if there are no styles to enqueue.
    3714                 if ( '' === $styles ) {
    3715                         return;
    3716                 }
    3717 
    3718                 wp_add_inline_style( 'wp-block-library', $styles );
    3719         };
    3720 
    3721         add_action( 'wp_loaded', $fn_register_webfonts );
    3722         add_action( 'wp_enqueue_scripts', $fn_generate_and_enqueue_styles );
    3723         add_action( 'admin_init', $fn_generate_and_enqueue_editor_styles );
    3724 }
    3725 
    3726 /**
    37273227 * Loads classic theme styles on classic themes in the frontend.
    37283228 *

  • trunk/src/wp-settings.php

    r56434 r56500  
    361361require ABSPATH . WPINC . '/style-engine/class-wp-style-engine-css-rules-store.php';
    362362require ABSPATH . WPINC . '/style-engine/class-wp-style-engine-processor.php';
     363require ABSPATH . WPINC . '/fonts/class-wp-font-face-resolver.php';
     364require ABSPATH . WPINC . '/fonts/class-wp-font-face.php';
     365require ABSPATH . WPINC . '/fonts.php';
    363366
    364367$GLOBALS['wp_embed'] = new WP_Embed();

  • trunk/tests/phpunit/tests/theme/themeDir.php

    r55294 r56500  
    186186                        'Block Theme [1.0.0] in subdirectory',
    187187                        'Block Theme Deprecated Path',
    188                         'Webfonts theme',
     188                        'Block Theme with defined Typography Fonts',
    189189                        'Empty `fontFace` in theme.json - no webfonts defined',
    190190                        'A theme with the Update URI header',
Note: See TracChangeset for help on using the changeset viewer.