From 682f2cba505946a3c6d7630ad7c5d8b4fd94dc6e Mon Sep 17 00:00:00 2001
From: Jiwoon-Kim <71701140+Jiwoon-Kim@users.noreply.github.com>
Date: Mon, 14 Sep 2026 21:29:24 +0900
Subject: [PATCH] Fonts: Quote axis tags and comma-separate axes when compiling
 an array font-variation-settings.

WP_Font_Face::compile_variations() joined each axis as "$key $value" with no separator and no quotes, so an array such as array( 'wght' => 400, 'GRAD' => 0 ) produced the invalid declaration font-variation-settings:wght 400GRAD 0;. It now produces "wght" 400, "GRAD" 0.

Adds data provider cases for the string and array forms.

See #66103.
---
 src/wp-includes/fonts/class-wp-font-face.php  | 11 ++---
 .../font-face/wp-font-face-tests-dataset.php  | 45 +++++++++++++++++++
 2 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/src/wp-includes/fonts/class-wp-font-face.php b/src/wp-includes/fonts/class-wp-font-face.php
index 193a5d0951ddb..c8d081b9557b5 100644
--- a/src/wp-includes/fonts/class-wp-font-face.php
+++ b/src/wp-includes/fonts/class-wp-font-face.php
@@ -363,17 +363,18 @@ private function compile_src( array $value ) {
 	 * Compiles the font variation settings.
 	 *
 	 * @since 6.4.0
+	 * @since 7.2.0 Quotes each axis tag and separates the axes with commas.
 	 *
-	 * @param array $font_variation_settings Array of font variation settings.
+	 * @param array $font_variation_settings Array of font variation settings, keyed by axis tag.
 	 * @return string The CSS.
 	 */
 	private function compile_variations( array $font_variation_settings ) {
-		$variations = '';
+		$variations = array();
 
-		foreach ( $font_variation_settings as $key => $value ) {
-			$variations .= "$key $value";
+		foreach ( $font_variation_settings as $tag => $value ) {
+			$variations[] = sprintf( '"%s" %s', $tag, $value );
 		}
 
-		return $variations;
+		return implode( ', ', $variations );
 	}
 }
diff --git a/tests/phpunit/tests/fonts/font-face/wp-font-face-tests-dataset.php b/tests/phpunit/tests/fonts/font-face/wp-font-face-tests-dataset.php
index c0d7f9e328016..b9e723a06f442 100644
--- a/tests/phpunit/tests/fonts/font-face/wp-font-face-tests-dataset.php
+++ b/tests/phpunit/tests/fonts/font-face/wp-font-face-tests-dataset.php
@@ -239,6 +239,51 @@ public function data_should_print_given_fonts() {
 					,
 				),
 			),
+			'variation settings string'      => array(
+				'fonts'    => array(
+					'Inter' =>
+						array(
+							array(
+								'src'                     =>
+									array(
+										'https://example.org/assets/fonts/inter/Inter-VariableFont_slnt,wght.ttf',
+									),
+								'font-family'             => 'Inter',
+								'font-style'              => 'normal',
+								'font-weight'             => '400',
+								'font-variation-settings' => '"slnt" 0, "wght" 400',
+							),
+						),
+				),
+				'expected' => <<<CSS
+@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:fallback;src:url('https://example.org/assets/fonts/inter/Inter-VariableFont_slnt,wght.ttf') format('truetype');font-variation-settings:"slnt" 0, "wght" 400;}
+CSS
+				,
+			),
+			'variation settings array'       => array(
+				'fonts'    => array(
+					'Inter' =>
+						array(
+							array(
+								'src'                     =>
+									array(
+										'https://example.org/assets/fonts/inter/Inter-VariableFont_slnt,wght.ttf',
+									),
+								'font-family'             => 'Inter',
+								'font-style'              => 'normal',
+								'font-weight'             => '400',
+								'font-variation-settings' => array(
+									'slnt' => 0,
+									'wght' => 400,
+								),
+							),
+						),
+				),
+				'expected' => <<<CSS
+@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:fallback;src:url('https://example.org/assets/fonts/inter/Inter-VariableFont_slnt,wght.ttf') format('truetype');font-variation-settings:"slnt" 0, "wght" 400;}
+CSS
+				,
+			),
 		);
 	}