From 21a27e8b1d8c0f0b5ce9071e6a7f1069c936edcd Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Wed, 15 Nov 2023 11:21:45 -0500 Subject: [PATCH 01/16] Add kebab casing and font family wrapping in sanitization function. Remove commented code. --- .../font-library/class-wp-font-family.php | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/lib/experimental/fonts/font-library/class-wp-font-family.php b/lib/experimental/fonts/font-library/class-wp-font-family.php index 2897811f3b70b5..ffd80ff3a1305b 100644 --- a/lib/experimental/fonts/font-library/class-wp-font-family.php +++ b/lib/experimental/fonts/font-library/class-wp-font-family.php @@ -304,6 +304,33 @@ private function sanitize() { ), ), ); + + foreach ( $fonts_json['settings']['typography']['fontFamilies'] as $key => $font ) { + if ( isset( $font['slug'] ) ) { + $fonts_json['settings']['typography']['fontFamilies'][ $key ]['slug'] = _wp_to_kebab_case( $font['slug'] ); + } + + if ( isset( $font['fontFamily'] ) ) { + $font_families = explode( ',', $font['fontFamily'] ); + $wrapped_font_families = array_map( + function ( $font_family ) { + $trimmed = trim( $font_family ); + if ( ! empty( $trimmed ) && strpos( $trimmed, ' ' ) !== false && strpos( $trimmed, "'" ) === false && strpos( $trimmed, '"' ) === false ) { + return "'" . $trimmed . "'"; + } + return $trimmed; + }, + $font_families + ); + + if ( count( $wrapped_font_families ) === 1 ) { + $fonts_json['settings']['typography']['fontFamilies'][ $key ]['fontFamily'] = $wrapped_font_families[0]; + } else { + $fonts_json['settings']['typography']['fontFamilies'][ $key ]['fontFamily'] = implode( ', ', $wrapped_font_families ); + } + } + } + // Creates a new WP_Theme_JSON object with the new fonts to // leverage sanitization and validation. $theme_json = new WP_Theme_JSON_Gutenberg( $fonts_json ); From 5d8b9d9903f548f94f5f8d1957771a5691bb1330 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Wed, 15 Nov 2023 13:18:31 -0500 Subject: [PATCH 02/16] Simplify how kebab casing and quote wrapping is done. --- .../font-library/class-wp-font-family.php | 58 +++++++++---------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/lib/experimental/fonts/font-library/class-wp-font-family.php b/lib/experimental/fonts/font-library/class-wp-font-family.php index ffd80ff3a1305b..d41fff83b763be 100644 --- a/lib/experimental/fonts/font-library/class-wp-font-family.php +++ b/lib/experimental/fonts/font-library/class-wp-font-family.php @@ -305,40 +305,40 @@ private function sanitize() { ), ); - foreach ( $fonts_json['settings']['typography']['fontFamilies'] as $key => $font ) { - if ( isset( $font['slug'] ) ) { - $fonts_json['settings']['typography']['fontFamilies'][ $key ]['slug'] = _wp_to_kebab_case( $font['slug'] ); - } - - if ( isset( $font['fontFamily'] ) ) { - $font_families = explode( ',', $font['fontFamily'] ); - $wrapped_font_families = array_map( - function ( $font_family ) { - $trimmed = trim( $font_family ); - if ( ! empty( $trimmed ) && strpos( $trimmed, ' ' ) !== false && strpos( $trimmed, "'" ) === false && strpos( $trimmed, '"' ) === false ) { - return "'" . $trimmed . "'"; - } - return $trimmed; - }, - $font_families - ); - - if ( count( $wrapped_font_families ) === 1 ) { - $fonts_json['settings']['typography']['fontFamilies'][ $key ]['fontFamily'] = $wrapped_font_families[0]; - } else { - $fonts_json['settings']['typography']['fontFamilies'][ $key ]['fontFamily'] = implode( ', ', $wrapped_font_families ); - } - } - } - // Creates a new WP_Theme_JSON object with the new fonts to // leverage sanitization and validation. - $theme_json = new WP_Theme_JSON_Gutenberg( $fonts_json ); - $theme_data = $theme_json->get_data(); + $theme_json = new WP_Theme_JSON_Gutenberg( $fonts_json ); + $theme_data = $theme_json->get_data(); + $sanitized_font = ! empty( $theme_data['settings']['typography']['fontFamilies'] ) ? $theme_data['settings']['typography']['fontFamilies'][0] : array(); - $this->data = $sanitized_font; + + // Ensure slugs are kebab-cased and font families are wrapped in quotes. + if ( isset( $sanitized_font['slug'] ) ) { + $sanitized_font['slug'] = _wp_to_kebab_case( $sanitized_font['slug'] ); + } + + if ( isset( $sanitized_font['fontFamily'] ) ) { + $font_families = explode( ',', $sanitized_font['fontFamily'] ); + $wrapped_font_families = array_map( + function ( $font_family ) { + $trimmed = trim( $font_family ); + if ( ! empty( $trimmed ) && strpos( $trimmed, ' ' ) !== false && strpos( $trimmed, "'" ) === false && strpos( $trimmed, '"' ) === false ) { + return "'" . $trimmed . "'"; + } + return $trimmed; + }, + $font_families + ); + + if ( count( $wrapped_font_families ) === 1 ) { + $sanitized_font['fontFamily'] = $wrapped_font_families[0]; + } else { + $sanitized_font['fontFamily'] = implode( ', ', $wrapped_font_families ); + } + } + $this->data = $sanitized_font; return $this->data; } From c10231567ac6e5efd71a341ffb847023d609e5c3 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Wed, 15 Nov 2023 13:19:39 -0500 Subject: [PATCH 03/16] Ensure incoming font is returned. --- .../utils/get-intersecting-font-faces.js | 2 +- .../test/getIntersectingFontFaces.spec.js | 61 ++++++++++++++----- 2 files changed, 47 insertions(+), 16 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/get-intersecting-font-faces.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/get-intersecting-font-faces.js index a3ffd31db2288d..e21e72c58ed533 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/get-intersecting-font-faces.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/get-intersecting-font-faces.js @@ -47,7 +47,7 @@ export default function getIntersectingFontFaces( incoming, existing ) { } ); } ); - matches.push( { ...existingFont, fontFace: matchingFaces } ); + matches.push( { ...incomingFont, fontFace: matchingFaces } ); } else { matches.push( incomingFont ); } diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/getIntersectingFontFaces.spec.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/getIntersectingFontFaces.spec.js index 91ae5f45d66da6..9899005ad65b89 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/getIntersectingFontFaces.spec.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/getIntersectingFontFaces.spec.js @@ -5,7 +5,7 @@ import getIntersectingFontFaces from '../get-intersecting-font-faces'; describe( 'getIntersectingFontFaces', () => { it( 'returns matching font faces for matching font family', () => { - const intendedFontsFamilies = [ + const incomingFontFamilies = [ { slug: 'lobster', fontFace: [ @@ -30,15 +30,15 @@ describe( 'getIntersectingFontFaces', () => { ]; const result = getIntersectingFontFaces( - intendedFontsFamilies, + incomingFontFamilies, existingFontFamilies ); - expect( result ).toEqual( intendedFontsFamilies ); + expect( result ).toEqual( incomingFontFamilies ); } ); it( 'returns empty array when there is no match', () => { - const intendedFontsFamilies = [ + const incomingFontFamilies = [ { slug: 'lobster', fontFace: [ @@ -63,7 +63,7 @@ describe( 'getIntersectingFontFaces', () => { ]; const result = getIntersectingFontFaces( - intendedFontsFamilies, + incomingFontFamilies, existingFontFamilies ); @@ -71,7 +71,7 @@ describe( 'getIntersectingFontFaces', () => { } ); it( 'returns matching font faces', () => { - const intendedFontsFamilies = [ + const incomingFontFamilies = [ { slug: 'lobster', fontFace: [ @@ -129,7 +129,7 @@ describe( 'getIntersectingFontFaces', () => { ]; const result = getIntersectingFontFaces( - intendedFontsFamilies, + incomingFontFamilies, existingFontFamilies ); @@ -137,7 +137,7 @@ describe( 'getIntersectingFontFaces', () => { } ); it( 'returns empty array when the first list is empty', () => { - const intendedFontsFamilies = []; + const incomingFontFamilies = []; const existingFontFamilies = [ { @@ -152,7 +152,7 @@ describe( 'getIntersectingFontFaces', () => { ]; const result = getIntersectingFontFaces( - intendedFontsFamilies, + incomingFontFamilies, existingFontFamilies ); @@ -160,7 +160,7 @@ describe( 'getIntersectingFontFaces', () => { } ); it( 'returns empty array when the second list is empty', () => { - const intendedFontsFamilies = [ + const incomingFontFamilies = [ { slug: 'lobster', fontFace: [ @@ -175,7 +175,7 @@ describe( 'getIntersectingFontFaces', () => { const existingFontFamilies = []; const result = getIntersectingFontFaces( - intendedFontsFamilies, + incomingFontFamilies, existingFontFamilies ); @@ -183,7 +183,7 @@ describe( 'getIntersectingFontFaces', () => { } ); it( 'returns intersecting font family when there are no fonfaces', () => { - const intendedFontsFamilies = [ + const incomingFontFamilies = [ { slug: 'piazzolla', fontFace: [ { fontStyle: 'normal', fontWeight: '400' } ], @@ -200,7 +200,7 @@ describe( 'getIntersectingFontFaces', () => { ]; const result = getIntersectingFontFaces( - intendedFontsFamilies, + incomingFontFamilies, existingFontFamilies ); @@ -208,7 +208,7 @@ describe( 'getIntersectingFontFaces', () => { } ); it( 'returns intersecting if there is an intended font face and is not present in the returning it should not be returned', () => { - const intendedFontsFamilies = [ + const incomingFontFamilies = [ { slug: 'piazzolla', fontFace: [ { fontStyle: 'normal', fontWeight: '400' } ], @@ -226,7 +226,7 @@ describe( 'getIntersectingFontFaces', () => { ]; const result = getIntersectingFontFaces( - intendedFontsFamilies, + incomingFontFamilies, existingFontFamilies ); const expected = [ @@ -237,4 +237,35 @@ describe( 'getIntersectingFontFaces', () => { ]; expect( result ).toEqual( expected ); } ); + + it( 'updates font family definition using the incoming data', () => { + const incomingFontFamilies = [ + { + slug: 'gothic-a1', + fontFace: [ { fontStyle: 'normal', fontWeight: '400' } ], + fontFamily: "'Gothic A1', serif", + }, + ]; + + const existingFontFamilies = [ + { + slug: 'gothic-a1', + fontFace: [ { fontStyle: 'normal', fontWeight: '400' } ], + fontFamily: 'Gothic A1, serif', + }, + ]; + + const result = getIntersectingFontFaces( + incomingFontFamilies, + existingFontFamilies + ); + const expected = [ + { + slug: 'gothic-a1', + fontFace: [ { fontStyle: 'normal', fontWeight: '400' } ], + fontFamily: "'Gothic A1', serif", + }, + ]; + expect( result ).toEqual( expected ); + } ); } ); From bc7a7ab9f5e3b3fb69e7f096bb1414da73d68a03 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Wed, 15 Nov 2023 16:55:01 -0500 Subject: [PATCH 04/16] Add kebab casing to slug in form data. --- .../font-library-modal/utils/index.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js index d0a57978bcce94..246311c3c0222b 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import { paramCase as kebabCase } from 'change-case'; + /** * Internal dependencies */ @@ -129,9 +134,20 @@ export function getDisplaySrcFromFontFace( input, urlPrefix ) { return src; } +// This function replicates one behavior of _wp_to_kebab_case(). +// Additional context: https://github.com/WordPress/gutenberg/issues/53695 +export function wpKebabCase( str ) { + // If a string contains a digit followed by a number, insert a dash between them. + return kebabCase( str ).replace( + /([a-zA-Z])(\d)|(\d)([a-zA-Z])/g, + '$1$3-$2$4' + ); +} + export function makeFormDataFromFontFamilies( fontFamilies ) { const formData = new FormData(); const newFontFamilies = fontFamilies.map( ( family, familyIndex ) => { + family.slug = wpKebabCase( family.slug ); if ( family?.fontFace ) { family.fontFace = family.fontFace.map( ( face, faceIndex ) => { if ( face.file ) { From a35475d53c9e9ef86e533cb2edd6be9702e422fc Mon Sep 17 00:00:00 2001 From: Vicente Canales Date: Thu, 16 Nov 2023 13:23:36 -0300 Subject: [PATCH 05/16] Add tests for wpKebabCase --- .../utils/test/wpKebabCase.spec.js | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 packages/edit-site/src/components/global-styles/font-library-modal/utils/test/wpKebabCase.spec.js diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/wpKebabCase.spec.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/wpKebabCase.spec.js new file mode 100644 index 00000000000000..c70afa72dea4e1 --- /dev/null +++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/wpKebabCase.spec.js @@ -0,0 +1,30 @@ +/** + * Internal dependencies + */ +import { wpKebabCase } from '../index'; + +describe( 'wpKebabCase', () => { + it( 'should insert a dash between a letter and a digit', () => { + const input = 'abc1def'; + const expectedOutput = 'abc-1def'; + expect( wpKebabCase( input ) ).toEqual( expectedOutput ); + } ); + + it( 'should insert a dash between a digit and a letter', () => { + const input = 'abc1def2ghi'; + const expectedOutput = 'abc-1def-2ghi'; + expect( wpKebabCase( input ) ).toEqual( expectedOutput ); + } ); + + it( 'should not insert a dash between two letters', () => { + const input = 'abcdef'; + const expectedOutput = 'abcdef'; + expect( wpKebabCase( input ) ).toEqual( expectedOutput ); + } ); + + it( 'should not insert a dash between a digit and a hyphen', () => { + const input = 'abc1-def'; + const expectedOutput = 'abc-1-def'; + expect( wpKebabCase( input ) ).toEqual( expectedOutput ); + } ); +} ); From e02f6371348a67eeb60102a841efb0169db6e095 Mon Sep 17 00:00:00 2001 From: Vicente Canales Date: Thu, 16 Nov 2023 13:25:25 -0300 Subject: [PATCH 06/16] remove redundant test --- .../font-library-modal/utils/test/wpKebabCase.spec.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/wpKebabCase.spec.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/wpKebabCase.spec.js index c70afa72dea4e1..fc7159f2368d14 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/wpKebabCase.spec.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/wpKebabCase.spec.js @@ -10,12 +10,6 @@ describe( 'wpKebabCase', () => { expect( wpKebabCase( input ) ).toEqual( expectedOutput ); } ); - it( 'should insert a dash between a digit and a letter', () => { - const input = 'abc1def2ghi'; - const expectedOutput = 'abc-1def-2ghi'; - expect( wpKebabCase( input ) ).toEqual( expectedOutput ); - } ); - it( 'should not insert a dash between two letters', () => { const input = 'abcdef'; const expectedOutput = 'abcdef'; From 52d3e7f78678164ff7f02544895a05dcf116c6ca Mon Sep 17 00:00:00 2001 From: Vicente Canales Date: Thu, 16 Nov 2023 13:26:57 -0300 Subject: [PATCH 07/16] test 2 different inputs on first wpKebabCase case --- .../font-library-modal/utils/test/wpKebabCase.spec.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/wpKebabCase.spec.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/wpKebabCase.spec.js index fc7159f2368d14..d296117ff3a49b 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/wpKebabCase.spec.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/wpKebabCase.spec.js @@ -8,6 +8,10 @@ describe( 'wpKebabCase', () => { const input = 'abc1def'; const expectedOutput = 'abc-1def'; expect( wpKebabCase( input ) ).toEqual( expectedOutput ); + + const input2 = 'abc1def2ghi'; + const expectedOutput2 = 'abc-1def-2ghi'; + expect( wpKebabCase( input2 ) ).toEqual( expectedOutput2 ); } ); it( 'should not insert a dash between two letters', () => { From efa76025c2c7d8a42134032923b24713702bbde5 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Mon, 20 Nov 2023 14:59:41 -0500 Subject: [PATCH 08/16] Move formatting functions to utils. --- .../class-wp-font-family-utils.php | 37 +++++++++++++++++++ .../font-library/class-wp-font-family.php | 27 +------------- 2 files changed, 39 insertions(+), 25 deletions(-) diff --git a/lib/experimental/fonts/font-library/class-wp-font-family-utils.php b/lib/experimental/fonts/font-library/class-wp-font-family-utils.php index 8a8ee1d4ddb5f1..218aa0accc7cb6 100644 --- a/lib/experimental/fonts/font-library/class-wp-font-family-utils.php +++ b/lib/experimental/fonts/font-library/class-wp-font-family-utils.php @@ -90,4 +90,41 @@ public static function has_font_mime_type( $filepath ) { return in_array( $filetype['type'], $allowed_mime_types, true ); } + + /** + * Format font slug and family. + * + * @since 6.5.0 + * + * @param array $font The font to format. + * @return array The formatted font. + */ + public static function format_slug_and_family( $font ) { + // Ensure slugs are kebab-cased and font families are wrapped in quotes. + if ( isset( $font['slug'] ) ) { + $font['slug'] = _wp_to_kebab_case( $font['slug'] ); + } + + if ( isset( $font['fontFamily'] ) ) { + $font_families = explode( ',', $font['fontFamily'] ); + $wrapped_font_families = array_map( + function ( $font_family ) { + $trimmed = trim( $font_family ); + if ( ! empty( $trimmed ) && strpos( $trimmed, ' ' ) !== false && strpos( $trimmed, "'" ) === false && strpos( $trimmed, '"' ) === false ) { + return "'" . $trimmed . "'"; + } + return $trimmed; + }, + $font_families + ); + + if ( count( $wrapped_font_families ) === 1 ) { + $font['fontFamily'] = $wrapped_font_families[0]; + } else { + $font['fontFamily'] = implode( ', ', $wrapped_font_families ); + } + } + + return $font; + } } diff --git a/lib/experimental/fonts/font-library/class-wp-font-family.php b/lib/experimental/fonts/font-library/class-wp-font-family.php index d41fff83b763be..11cf1fcdbdc64c 100644 --- a/lib/experimental/fonts/font-library/class-wp-font-family.php +++ b/lib/experimental/fonts/font-library/class-wp-font-family.php @@ -314,31 +314,8 @@ private function sanitize() { ? $theme_data['settings']['typography']['fontFamilies'][0] : array(); - // Ensure slugs are kebab-cased and font families are wrapped in quotes. - if ( isset( $sanitized_font['slug'] ) ) { - $sanitized_font['slug'] = _wp_to_kebab_case( $sanitized_font['slug'] ); - } - - if ( isset( $sanitized_font['fontFamily'] ) ) { - $font_families = explode( ',', $sanitized_font['fontFamily'] ); - $wrapped_font_families = array_map( - function ( $font_family ) { - $trimmed = trim( $font_family ); - if ( ! empty( $trimmed ) && strpos( $trimmed, ' ' ) !== false && strpos( $trimmed, "'" ) === false && strpos( $trimmed, '"' ) === false ) { - return "'" . $trimmed . "'"; - } - return $trimmed; - }, - $font_families - ); - - if ( count( $wrapped_font_families ) === 1 ) { - $sanitized_font['fontFamily'] = $wrapped_font_families[0]; - } else { - $sanitized_font['fontFamily'] = implode( ', ', $wrapped_font_families ); - } - } - $this->data = $sanitized_font; + $sanitized_font = WP_Font_Family_Utils::format_slug_and_family( $sanitized_font ); + $this->data = $sanitized_font; return $this->data; } From a414e3f40391793fb1372a769109875e561bf926 Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Fri, 24 Nov 2023 16:20:16 -0500 Subject: [PATCH 09/16] reduce the scope of the function --- .../class-wp-font-family-utils.php | 27 ++++++++----------- .../font-library/class-wp-font-family.php | 3 ++- 2 files changed, 13 insertions(+), 17 deletions(-) diff --git a/lib/experimental/fonts/font-library/class-wp-font-family-utils.php b/lib/experimental/fonts/font-library/class-wp-font-family-utils.php index 218aa0accc7cb6..05e4ef357774ad 100644 --- a/lib/experimental/fonts/font-library/class-wp-font-family-utils.php +++ b/lib/experimental/fonts/font-library/class-wp-font-family-utils.php @@ -92,24 +92,19 @@ public static function has_font_mime_type( $filepath ) { } /** - * Format font slug and family. + * Format font family to make it CSS ready. * * @since 6.5.0 * - * @param array $font The font to format. - * @return array The formatted font. + * @param string $font_family Font family attribute. + * @return string The formatted font family attribute. */ - public static function format_slug_and_family( $font ) { - // Ensure slugs are kebab-cased and font families are wrapped in quotes. - if ( isset( $font['slug'] ) ) { - $font['slug'] = _wp_to_kebab_case( $font['slug'] ); - } - - if ( isset( $font['fontFamily'] ) ) { - $font_families = explode( ',', $font['fontFamily'] ); + public static function format_font_family( $font_family ) { + if ( $font_family ) { + $font_families = explode( ',', $font_family ); $wrapped_font_families = array_map( - function ( $font_family ) { - $trimmed = trim( $font_family ); + function ( $family ) { + $trimmed = trim( $family ); if ( ! empty( $trimmed ) && strpos( $trimmed, ' ' ) !== false && strpos( $trimmed, "'" ) === false && strpos( $trimmed, '"' ) === false ) { return "'" . $trimmed . "'"; } @@ -119,12 +114,12 @@ function ( $font_family ) { ); if ( count( $wrapped_font_families ) === 1 ) { - $font['fontFamily'] = $wrapped_font_families[0]; + $font_family = $wrapped_font_families[0]; } else { - $font['fontFamily'] = implode( ', ', $wrapped_font_families ); + $font_family = implode( ', ', $wrapped_font_families ); } } - return $font; + return $font_family; } } diff --git a/lib/experimental/fonts/font-library/class-wp-font-family.php b/lib/experimental/fonts/font-library/class-wp-font-family.php index d1203562220ce3..5cb46b4bec2148 100644 --- a/lib/experimental/fonts/font-library/class-wp-font-family.php +++ b/lib/experimental/fonts/font-library/class-wp-font-family.php @@ -318,7 +318,8 @@ private function sanitize() { ? $theme_data['settings']['typography']['fontFamilies'][0] : array(); - $sanitized_font = WP_Font_Family_Utils::format_slug_and_family( $sanitized_font ); + $sanitized_font['slug'] = _wp_to_kebab_case( $sanitized_font['slug'] ); + $sanitized_font['fontFamily'] = WP_Font_Family_Utils::format_font_family( $sanitized_font['fontFamily'] ); $this->data = $sanitized_font; return $this->data; } From 0d8330cd61ea159b9c78427599a2b8f1482a5261 Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Fri, 24 Nov 2023 16:22:11 -0500 Subject: [PATCH 10/16] fix the live preview (without reloading the page) of the just installed fonts in the editor --- .../global-styles/font-library-modal/utils/index.js | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js index 246311c3c0222b..f5723f5814e983 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js @@ -7,7 +7,6 @@ import { paramCase as kebabCase } from 'change-case'; * Internal dependencies */ import { FONT_WEIGHTS, FONT_STYLES } from './constants'; -import { formatFontFamily } from './preview-styles'; export function setUIValuesNeeded( font, extraValues = {} ) { if ( ! font.name && ( font.fontFamily || font.slug ) ) { @@ -90,14 +89,10 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) { } // eslint-disable-next-line no-undef - const newFont = new FontFace( - formatFontFamily( fontFace.fontFamily ), - dataSource, - { - style: fontFace.fontStyle, - weight: fontFace.fontWeight, - } - ); + const newFont = new FontFace( fontFace.fontFamily, dataSource, { + style: fontFace.fontStyle, + weight: fontFace.fontWeight, + } ); const loadedFace = await newFont.load(); From 76b0efff6a56a78840c53362440a5e1332047227 Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Fri, 24 Nov 2023 16:31:16 -0500 Subject: [PATCH 11/16] format php --- lib/experimental/fonts/font-library/class-wp-font-family.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/experimental/fonts/font-library/class-wp-font-family.php b/lib/experimental/fonts/font-library/class-wp-font-family.php index 5cb46b4bec2148..58d4f476e834d1 100644 --- a/lib/experimental/fonts/font-library/class-wp-font-family.php +++ b/lib/experimental/fonts/font-library/class-wp-font-family.php @@ -318,9 +318,9 @@ private function sanitize() { ? $theme_data['settings']['typography']['fontFamilies'][0] : array(); - $sanitized_font['slug'] = _wp_to_kebab_case( $sanitized_font['slug'] ); + $sanitized_font['slug'] = _wp_to_kebab_case( $sanitized_font['slug'] ); $sanitized_font['fontFamily'] = WP_Font_Family_Utils::format_font_family( $sanitized_font['fontFamily'] ); - $this->data = $sanitized_font; + $this->data = $sanitized_font; return $this->data; } From 9f65a167c6eb43c01ca3c68d811fe669bcc89230 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Mon, 27 Nov 2023 11:10:03 -0500 Subject: [PATCH 12/16] Add test for format_font_family. --- .../wpFontFamilyUtils/formatFontFamily.php | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 phpunit/tests/fonts/font-library/wpFontFamilyUtils/formatFontFamily.php diff --git a/phpunit/tests/fonts/font-library/wpFontFamilyUtils/formatFontFamily.php b/phpunit/tests/fonts/font-library/wpFontFamilyUtils/formatFontFamily.php new file mode 100644 index 00000000000000..d0e7f97295dc45 --- /dev/null +++ b/phpunit/tests/fonts/font-library/wpFontFamilyUtils/formatFontFamily.php @@ -0,0 +1,43 @@ +assertSame( + $expected, + WP_Font_Family_Utils::format_font_family( + $font_family + ) + ); + } + + /** + * Data provider. + * + * @return array[] + */ + public function data_should_format_font_family() { + return array( + 'data' => array( + 'font_family' => "Rock 3D , Open Sans, ,serif", + 'expected' => "'Rock 3D', 'Open Sans', , serif", + ), + ); + } +} From 84ba302295982fc8a65389b037edfdcd67c5eb70 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Mon, 27 Nov 2023 11:15:19 -0500 Subject: [PATCH 13/16] Format php. --- .../font-library/wpFontFamilyUtils/formatFontFamily.php | 6 +++--- .../wpRestFontLibraryController/installFonts.php | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/phpunit/tests/fonts/font-library/wpFontFamilyUtils/formatFontFamily.php b/phpunit/tests/fonts/font-library/wpFontFamilyUtils/formatFontFamily.php index d0e7f97295dc45..408de76f43805b 100644 --- a/phpunit/tests/fonts/font-library/wpFontFamilyUtils/formatFontFamily.php +++ b/phpunit/tests/fonts/font-library/wpFontFamilyUtils/formatFontFamily.php @@ -16,7 +16,7 @@ class Tests_Fonts_WpFontsFamilyUtils_FormatFontFamily extends WP_UnitTestCase { * @dataProvider data_should_format_font_family * * @param string $font_family Font family. - * @param string $expected Expected family. + * @param string $expected Expected family. */ public function test_should_format_font_family( $font_family, $expected ) { $this->assertSame( @@ -35,8 +35,8 @@ public function test_should_format_font_family( $font_family, $expected ) { public function data_should_format_font_family() { return array( 'data' => array( - 'font_family' => "Rock 3D , Open Sans, ,serif", - 'expected' => "'Rock 3D', 'Open Sans', , serif", + 'font_family' => 'Rock 3D , Open Sans, ,serif', + 'expected' => "'Rock 3D', 'Open Sans', , serif", ), ); } diff --git a/phpunit/tests/fonts/font-library/wpRestFontLibraryController/installFonts.php b/phpunit/tests/fonts/font-library/wpRestFontLibraryController/installFonts.php index 01ac1ff8436ed7..f0513ca7befdf3 100644 --- a/phpunit/tests/fonts/font-library/wpRestFontLibraryController/installFonts.php +++ b/phpunit/tests/fonts/font-library/wpRestFontLibraryController/installFonts.php @@ -236,6 +236,7 @@ public function data_install_fonts() { 'fontFamily' => 'Montserrat', 'slug' => 'montserrat', 'name' => 'Montserrat', + 'badKey' => 'badValue', 'fontFace' => array( array( 'fontFamily' => 'Montserrat', From 729a8d8d3ae590844811f65835a4fdac7617718e Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Mon, 27 Nov 2023 11:34:46 -0500 Subject: [PATCH 14/16] Add more test cases and format. --- .../class-wp-font-family-utils.php | 2 +- .../wpFontFamilyUtils/formatFontFamily.php | 22 ++++++++++++++++--- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/lib/experimental/fonts/font-library/class-wp-font-family-utils.php b/lib/experimental/fonts/font-library/class-wp-font-family-utils.php index 05e4ef357774ad..7d954e79e96a3c 100644 --- a/lib/experimental/fonts/font-library/class-wp-font-family-utils.php +++ b/lib/experimental/fonts/font-library/class-wp-font-family-utils.php @@ -92,7 +92,7 @@ public static function has_font_mime_type( $filepath ) { } /** - * Format font family to make it CSS ready. + * Format font family to make it valid CSS. * * @since 6.5.0 * diff --git a/phpunit/tests/fonts/font-library/wpFontFamilyUtils/formatFontFamily.php b/phpunit/tests/fonts/font-library/wpFontFamilyUtils/formatFontFamily.php index 408de76f43805b..745f9541f230c1 100644 --- a/phpunit/tests/fonts/font-library/wpFontFamilyUtils/formatFontFamily.php +++ b/phpunit/tests/fonts/font-library/wpFontFamilyUtils/formatFontFamily.php @@ -34,9 +34,25 @@ public function test_should_format_font_family( $font_family, $expected ) { */ public function data_should_format_font_family() { return array( - 'data' => array( - 'font_family' => 'Rock 3D , Open Sans, ,serif', - 'expected' => "'Rock 3D', 'Open Sans', , serif", + 'data_families_with_spaces_and_numbers' => array( + 'font_family' => 'Rock 3D , Open Sans,serif', + 'expected' => "'Rock 3D', 'Open Sans', serif", + ), + 'data_single_font_family' => array( + 'font_family' => 'Rock 3D', + 'expected' => "'Rock 3D'", + ), + 'data_no_spaces' => array( + 'font_family' => 'Rock3D', + 'expected' => 'Rock3D', + ), + 'data_many_spaces_and_existing_quotes' => array( + 'font_family' => 'Rock 3D serif, serif,sans-serif, "Open Sans"', + 'expected' => "'Rock 3D serif', serif, sans-serif, \"Open Sans\"", + ), + 'data_empty_family' => array( + 'font_family' => ' ', + 'expected' => "", ), ); } From c96b7ccd0a6d65b304d22efa9cdf48373483ff76 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Mon, 27 Nov 2023 11:54:30 -0500 Subject: [PATCH 15/16] Remove accidental badKey. --- .../font-library/wpRestFontLibraryController/installFonts.php | 1 - 1 file changed, 1 deletion(-) diff --git a/phpunit/tests/fonts/font-library/wpRestFontLibraryController/installFonts.php b/phpunit/tests/fonts/font-library/wpRestFontLibraryController/installFonts.php index f0513ca7befdf3..01ac1ff8436ed7 100644 --- a/phpunit/tests/fonts/font-library/wpRestFontLibraryController/installFonts.php +++ b/phpunit/tests/fonts/font-library/wpRestFontLibraryController/installFonts.php @@ -236,7 +236,6 @@ public function data_install_fonts() { 'fontFamily' => 'Montserrat', 'slug' => 'montserrat', 'name' => 'Montserrat', - 'badKey' => 'badValue', 'fontFace' => array( array( 'fontFamily' => 'Montserrat', From 8cdb015bfc829caa237f22a583a8e57855b86968 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Mon, 27 Nov 2023 11:55:12 -0500 Subject: [PATCH 16/16] Format. --- .../wpFontFamilyUtils/formatFontFamily.php | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/phpunit/tests/fonts/font-library/wpFontFamilyUtils/formatFontFamily.php b/phpunit/tests/fonts/font-library/wpFontFamilyUtils/formatFontFamily.php index 745f9541f230c1..4f247c5219febb 100644 --- a/phpunit/tests/fonts/font-library/wpFontFamilyUtils/formatFontFamily.php +++ b/phpunit/tests/fonts/font-library/wpFontFamilyUtils/formatFontFamily.php @@ -38,21 +38,21 @@ public function data_should_format_font_family() { 'font_family' => 'Rock 3D , Open Sans,serif', 'expected' => "'Rock 3D', 'Open Sans', serif", ), - 'data_single_font_family' => array( + 'data_single_font_family' => array( 'font_family' => 'Rock 3D', 'expected' => "'Rock 3D'", ), - 'data_no_spaces' => array( + 'data_no_spaces' => array( 'font_family' => 'Rock3D', 'expected' => 'Rock3D', ), - 'data_many_spaces_and_existing_quotes' => array( + 'data_many_spaces_and_existing_quotes' => array( 'font_family' => 'Rock 3D serif, serif,sans-serif, "Open Sans"', 'expected' => "'Rock 3D serif', serif, sans-serif, \"Open Sans\"", ), - 'data_empty_family' => array( + 'data_empty_family' => array( 'font_family' => ' ', - 'expected' => "", + 'expected' => '', ), ); }