From d0efa668fdf1272c1fa6a03b208b63e9238853ad Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 15 Jul 2021 17:16:53 +0100
Subject: [PATCH 1/3] Add the percent unit to the default units in Core

---
 lib/class-wp-theme-json-gutenberg.php | 2 +-
 lib/experimental-default-theme.json   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 335d461b695f26..b3ee6d1f8b9d3e 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -1308,7 +1308,7 @@ public static function get_from_editor_settings( $settings ) {
 				$theme_settings['settings']['spacing'] = array();
 			}
 			$theme_settings['settings']['spacing']['units'] = ( true === $settings['enableCustomUnits'] ) ?
-				array( 'px', 'em', 'rem', 'vh', 'vw' ) :
+				array( 'px', 'em', 'rem', 'vh', 'vw', '%' ) :
 				$settings['enableCustomUnits'];
 		}
 
diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json
index bf7ef9ef5147ba..0a24118a6a3e34 100644
--- a/lib/experimental-default-theme.json
+++ b/lib/experimental-default-theme.json
@@ -213,7 +213,7 @@
 		"spacing": {
 			"customMargin": false,
 			"customPadding": false,
-			"units": [ "px", "em", "rem", "vh", "vw" ]
+			"units": [ "px", "em", "rem", "vh", "vw", "%" ]
 		},
 		"border": {
 			"customColor": false,

From 4c0c055a6bd8f6d4981daeb913f281bee035feea Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 15 Jul 2021 17:35:22 +0100
Subject: [PATCH 2/3] Fix php unit tests

---
 phpunit/class-wp-theme-json-test.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index 6d44ca15362111..87dc387c4444f9 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -1476,7 +1476,7 @@ function test_get_from_editor_settings() {
 					),
 				),
 				'spacing'    => array(
-					'units' => array( 'px', 'em', 'rem', 'vh', 'vw' ),
+					'units' => array( 'px', 'em', 'rem', 'vh', 'vw', '%' ),
 				),
 				'typography' => array(
 					'customFontSize'   => false,
@@ -1578,7 +1578,7 @@ function test_get_editor_settings_custom_units_can_be_enabled() {
 		$input = gutenberg_get_default_block_editor_settings();
 
 		$expected = array(
-			'units'         => array( 'px', 'em', 'rem', 'vh', 'vw' ),
+			'units'         => array( 'px', 'em', 'rem', 'vh', 'vw', '%' ),
 			'customPadding' => false,
 		);
 

From 9e22b7edaeff8400dfe295f051712151592cb2f8 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 15 Jul 2021 18:03:00 +0100
Subject: [PATCH 3/3] Add the percent unit to the useSetting fallback code

---
 packages/block-editor/src/components/use-setting/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/use-setting/index.js b/packages/block-editor/src/components/use-setting/index.js
index d302ceb277425f..f82b7e38f0d2ec 100644
--- a/packages/block-editor/src/components/use-setting/index.js
+++ b/packages/block-editor/src/components/use-setting/index.js
@@ -41,7 +41,7 @@ const deprecatedFlags = {
 		}
 
 		if ( settings.enableCustomUnits === true ) {
-			return [ 'px', 'em', 'rem', 'vh', 'vw' ];
+			return [ 'px', 'em', 'rem', 'vh', 'vw', '%' ];
 		}
 
 		return settings.enableCustomUnits;