custom-fonts.php 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <?php
  2. // Font settings deprecation message
  3. require get_template_directory() . '/inc/customizer/wp-customize-fonts.php';
  4. // Font Migration
  5. require get_template_directory() . '/inc/fonts/custom-font-migration.php';
  6. add_action( 'init', 'enqueue_global_styles_fonts', 100 );
  7. add_action( 'admin_init', 'enqueue_fse_font_styles' );
  8. add_filter( 'pre_render_block', 'enqueue_block_fonts', 10, 2 );
  9. add_filter( 'jetpack_google_fonts_list', 'blockbase_filter_jetpack_google_fonts_list' );
  10. $blockbase_enqueued_font_slugs = array();
  11. /**
  12. * Get the CSS containing font_face values for a given slug
  13. *
  14. * @return string String of CSS
  15. */
  16. function get_style_css( $slug ) {
  17. $font_face_file = get_template_directory() . '/assets/fonts/' . $slug . '/font-face.css';
  18. if ( ! file_exists( $font_face_file ) ) {
  19. return '';
  20. }
  21. $contents = file_get_contents( $font_face_file );
  22. return str_replace( 'src: url(./', 'src: url(' . get_template_directory_uri() . '/assets/fonts/' . $slug . '/', $contents );
  23. }
  24. /**
  25. * Collect fonts set in Global Styles settings.
  26. *
  27. * @return array Font faces from Global Styles settings.
  28. */
  29. function collect_fonts_from_global_styles() {
  30. // NOTE: We have to use gutenberg_get_global_styles() here due to the potential changes to Global Styles on page load happening in font migration.
  31. // Since core users don't have anything to migrate we can use core get_styles
  32. if ( function_exists( 'gutenberg_get_global_styles' ) ) {
  33. $global_styles = gutenberg_get_global_styles();
  34. } else {
  35. $global_styles = wp_get_global_styles();
  36. }
  37. $found_webfonts = array();
  38. // Look for fonts in block presets...
  39. if ( isset( $global_styles['blocks'] ) ) {
  40. foreach ( $global_styles['blocks'] as $setting ) {
  41. $font_slug = extract_font_slug_from_setting( $setting );
  42. if ( $font_slug ) {
  43. $found_webfonts[] = $font_slug;
  44. }
  45. }
  46. }
  47. // Look for fonts in HTML element presets...
  48. if ( isset( $global_styles['elements'] ) ) {
  49. foreach ( $global_styles['elements'] as $setting ) {
  50. // die(json_encode($global_styles));
  51. // NOTE: It seems that the Global Styles assignment of fonts writes the font family string rather than the
  52. // global styles shorthand that is assigned to the body. This should be confirmed and reported if it isn't already.
  53. $font_slug = extract_font_slug_from_setting( $setting );
  54. if ( $font_slug ) {
  55. $found_webfonts[] = $font_slug;
  56. }
  57. }
  58. }
  59. // Check if a global typography setting was defined.
  60. $font_slug = extract_font_slug_from_setting( $global_styles );
  61. if ( $font_slug ) {
  62. $found_webfonts[] = $font_slug;
  63. }
  64. return array_unique( $found_webfonts );
  65. }
  66. /**
  67. * Extract the font family slug from a settings array.
  68. *
  69. * @param array $setting The settings object.
  70. *
  71. * @return string|null
  72. */
  73. function extract_font_slug_from_setting( $setting ) {
  74. if ( ! isset( $setting['typography']['fontFamily'] ) ) {
  75. return null;
  76. }
  77. $font_family = $setting['typography']['fontFamily'];
  78. // Full string: var(--wp--preset--font-family--slug).
  79. // We do not care about the origin of the font, only its slug.
  80. preg_match( '/font-family--(?P<slug>.+)\)$/', $font_family, $matches );
  81. if ( isset( $matches['slug'] ) ) {
  82. return $matches['slug'];
  83. }
  84. // Full string: var:preset|font-family|slug
  85. // We do not care about the origin of the font, only its slug.
  86. preg_match( '/font-family\|(?P<slug>.+)$/', $font_family, $matches );
  87. if ( isset( $matches['slug'] ) ) {
  88. return $matches['slug'];
  89. }
  90. return $font_family;
  91. }
  92. /**
  93. * Build a list of all font slugs provided by Blockbase from theme.json
  94. *
  95. * @return array Collection of all font slugs defined in the theme.json file
  96. */
  97. function collect_fonts_from_blockbase() {
  98. $fonts = array();
  99. $parent_theme_json_data = json_decode( file_get_contents( get_template_directory() . '/theme.json' ), true );
  100. $font_families = $parent_theme_json_data['settings']['typography']['fontFamilies'];
  101. foreach ( $font_families as $font ) {
  102. // Only pick it up if we're claiming it as ours to manage
  103. if ( array_key_exists( 'provider', $font ) && 'blockbase-fonts' === $font['provider'] ) {
  104. $fonts[] = $font;
  105. }
  106. }
  107. return $fonts;
  108. }
  109. /**
  110. * Enqeue all of the fonts used in global styles settings.
  111. *
  112. * @return void
  113. */
  114. function enqueue_global_styles_fonts() {
  115. global $blockbase_enqueued_font_slugs;
  116. $font_slugs = array();
  117. $font_css = '';
  118. if ( is_admin() ) {
  119. $font_families = collect_fonts_from_blockbase();
  120. foreach ( $font_families as $font_family ) {
  121. $font_slugs[] = $font_family['slug'];
  122. }
  123. } else {
  124. $font_slugs = collect_fonts_from_global_styles();
  125. }
  126. $blockbase_enqueued_font_slugs = $font_slugs;
  127. foreach ( $font_slugs as $font_slug ) {
  128. $font_css .= get_style_css( $font_slug );
  129. }
  130. // Bail out if there are no styles to enqueue.
  131. if ( '' === $font_css ) {
  132. return;
  133. }
  134. // Enqueue the stylesheet.
  135. wp_register_style( 'blockbase_font_faces', '' );
  136. wp_enqueue_style( 'blockbase_font_faces' );
  137. // Add the styles to the stylesheet.
  138. wp_add_inline_style( 'blockbase_font_faces', $font_css );
  139. }
  140. /**
  141. * Enqueue all of the fonts provided by Blockbase for FSE use
  142. */
  143. function enqueue_fse_font_styles( $fonts ) {
  144. $fonts = collect_fonts_from_blockbase();
  145. $font_css = '';
  146. foreach ( $fonts as $font ) {
  147. $font_css .= get_style_css( $font['slug'] );
  148. }
  149. wp_enqueue_style( 'wp-block-library' );
  150. wp_add_inline_style( 'wp-block-library', $font_css );
  151. }
  152. /**
  153. * Add fonts that have been assigned via CSS
  154. */
  155. function enqueue_block_fonts( $content, $parsed_block ) {
  156. global $blockbase_enqueued_font_slugs;
  157. if ( ! is_admin() && isset( $parsed_block['attrs']['fontFamily'] ) ) {
  158. $font_slug = $parsed_block['attrs']['fontFamily'];
  159. if ( ! in_array( $font_slug, $blockbase_enqueued_font_slugs, true ) ) {
  160. $font_css = get_style_css( $font_slug );
  161. if ( $font_css ) {
  162. $blockbase_enqueued_font_slugs[] = $font_slug;
  163. wp_add_inline_style( 'blockbase_font_faces', $font_css );
  164. }
  165. }
  166. }
  167. return $content;
  168. }
  169. /**
  170. * Jetpack may attempt to register fonts for the Google Font Provider.
  171. * This filters out all of the fonts Blockbase has already registered.
  172. */
  173. function blockbase_filter_jetpack_google_fonts_list( $jetpack_fonts ) {
  174. $theme_fonts = collect_fonts_from_blockbase();
  175. $theme_font_families = array_column( $theme_fonts, 'name' );
  176. $filtered_list = array();
  177. // If the Jetpack font isn't in theme already, let Jetpack register it
  178. foreach ( $jetpack_fonts as $jetpack_font_family ) {
  179. if ( ! in_array( $jetpack_font_family, $theme_font_families, true ) ) {
  180. $filtered_list[] = $jetpack_font_family;
  181. }
  182. }
  183. return $filtered_list;
  184. }