Classic Themes: Enable Fonts and thus global styles #73971
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| https://github.com/WordPress/wordpress-develop/pull/10623 | ||
|
|
||
| * https://github.com/WordPress/gutenberg/pull/73971 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| <?php | ||
| /** | ||
| * WordPress 7.0 compatibility functions for Global Styles. | ||
| * | ||
| * Overrides WordPress Core functions to enable full global styles support | ||
| * (including fonts) for classic themes without theme.json. | ||
| * | ||
| * @package gutenberg | ||
| */ | ||
|
|
||
| // Remove WordPress Core's wp_print_font_faces action. | ||
| remove_action( 'wp_head', 'wp_print_font_faces', 50 ); | ||
|
|
||
| /** | ||
| * Gets font-face styles CSS for fonts from Gutenberg's global styles. | ||
| * | ||
| * WordPress Core's wp_print_font_faces() relies on wp_get_global_settings() | ||
| * which excludes custom origin for classic themes. This function uses | ||
| * Gutenberg's settings resolver to include user-customized fonts. | ||
| * | ||
| * @since Gutenberg 20.0.0 | ||
| * @return string Font-face CSS. | ||
| */ | ||
| function gutenberg_get_font_face_styles() { | ||
| // Get settings using Gutenberg's resolver with custom origin. | ||
| $settings = gutenberg_get_global_settings(); | ||
|
|
||
| // Bail out early if there are no font settings. | ||
| if ( empty( $settings['typography']['fontFamilies'] ) ) { | ||
| return ''; | ||
| } | ||
|
|
||
| // Parse fonts from settings. | ||
| $fonts = array(); | ||
| foreach ( $settings['typography']['fontFamilies'] as $font_families ) { | ||
| foreach ( $font_families as $definition ) { | ||
| // Skip if "fontFace" is not defined, meaning there are no variations. | ||
| if ( empty( $definition['fontFace'] ) ) { | ||
|
youknowriad marked this conversation as resolved.
|
||
| continue; | ||
| } | ||
|
|
||
| // Skip if "fontFamily" is not defined. | ||
| if ( empty( $definition['fontFamily'] ) ) { | ||
| continue; | ||
| } | ||
|
|
||
| $font_family_name = $definition['fontFamily']; | ||
|
youknowriad marked this conversation as resolved.
|
||
| // Parse font-family name from comma-separated lists. | ||
| if ( str_contains( $font_family_name, ',' ) ) { | ||
| $font_family_name = explode( ',', $font_family_name )[0]; | ||
| } | ||
| $font_family_name = trim( $font_family_name, "\"'" ); | ||
|
|
||
| // Skip if no font family is defined. | ||
| if ( empty( $font_family_name ) ) { | ||
| continue; | ||
| } | ||
|
Comment on lines
+49
to
+57
Member
There was a problem hiding this comment. I don't get this section. But after conversion to array, it executes a
Contributor
Author
There was a problem hiding this comment. I'm not able to reply the full question here but I suggest that we keep the code as is. This code is copied as is exactly from Core, it's only in Gutenberg because it's not filtrable so we need to override/copy the full function.
Member
There was a problem hiding this comment. @youknowriad ok, I'm still trying to figure out how Gutenberg integrates with Core not as straightforward, as I thought. I'm assuming you took the In this case, I'm going to send a PR in core to fix this part 👍 PS: I have tested and its not problematic as is returning just the first font family not the whole list so this section is technically correct. |
||
|
|
||
| // Convert font face properties. | ||
| $converted_font_faces = array(); | ||
| foreach ( $definition['fontFace'] as $font_face ) { | ||
|
youknowriad marked this conversation as resolved.
|
||
| // Add the font-family property to the font-face. | ||
| $font_face['font-family'] = $font_family_name; | ||
|
|
||
| // Convert camelCase to kebab-case. | ||
| $converted_face = array(); | ||
| foreach ( $font_face as $key => $value ) { | ||
| $kebab_case = _wp_to_kebab_case( $key ); | ||
| $converted_face[ $kebab_case ] = $value; | ||
| } | ||
|
|
||
| $converted_font_faces[] = $converted_face; | ||
| } | ||
|
|
||
| $fonts[] = $converted_font_faces; | ||
| } | ||
| } | ||
|
|
||
| if ( empty( $fonts ) ) { | ||
| return ''; | ||
| } | ||
|
|
||
| // Use WordPress Core's WP_Font_Face class to generate the CSS. | ||
| if ( ! class_exists( 'WP_Font_Face' ) ) { | ||
| return ''; | ||
| } | ||
|
|
||
| // WP_Font_Face only has generate_and_print(), so use output buffering to capture. | ||
| ob_start(); | ||
| $wp_font_face = new WP_Font_Face(); | ||
| $wp_font_face->generate_and_print( $fonts ); | ||
| $css = ob_get_clean(); | ||
|
|
||
| // Remove the wrapping <style> tags if present, we'll add our own. | ||
| $css = preg_replace( '/<\/?style[^>]*>/', '', $css ); | ||
|
|
||
| return trim( $css ); | ||
| } | ||
|
|
||
| /** | ||
| * Prints font-face styles for fonts on the frontend. | ||
| * | ||
| * @since Gutenberg 20.0.0 | ||
| */ | ||
| function gutenberg_print_font_faces() { | ||
| $font_face_styles = gutenberg_get_font_face_styles(); | ||
| if ( ! empty( $font_face_styles ) ) { | ||
| printf( "<style id='wp-fonts-local'>\n%s\n</style>\n", $font_face_styles ); | ||
| } | ||
| } | ||
| add_action( 'wp_head', 'gutenberg_print_font_faces', 50 ); | ||
|
|
||
| /** | ||
| * Adds font-face styles to block editor settings. | ||
| * | ||
| * @since Gutenberg 20.0.0 | ||
| * | ||
| * @param array $settings Block editor settings. | ||
| * @return array Modified settings. | ||
| */ | ||
| function gutenberg_add_font_face_styles_to_editor( $settings ) { | ||
| $font_face_styles = gutenberg_get_font_face_styles(); | ||
|
|
||
| if ( ! empty( $font_face_styles ) ) { | ||
| // Add font faces as a style entry in the editor settings. | ||
| if ( ! isset( $settings['styles'] ) ) { | ||
| $settings['styles'] = array(); | ||
| } | ||
|
|
||
| // Insert font faces at the beginning so they load before other styles. | ||
| array_unshift( | ||
| $settings['styles'], | ||
| array( | ||
| 'css' => $font_face_styles, | ||
| '__unstableType' => 'font-faces', | ||
| 'isGlobalStyles' => false, | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| return $settings; | ||
| } | ||
| // Run after gutenberg_get_block_editor_settings() which runs at priority 0. | ||
| add_filter( 'block_editor_settings_all', 'gutenberg_add_font_face_styles_to_editor', 5 ); | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This whole file is only here to override the Core behavior, but in reality there's no really change here from core behavior outside calling the overridden Gutenberg theme.json functions...