Theme.json: Remove custom prefixes from properties that did not land in 5.8

docs/how-to-guides/themes/create-block-theme.md

@@ -85,7 +85,7 @@ Optionally, create a `functions.php` file.
 In this file, you can enqueue `style.css`, include additional files, enable an editor stylesheet and add theme support.
 
 <div class="callout callout-tip">
-You will add most of the theme support in the `theme.json` file. The title tag is already enabled for all block themes, and it is no longer necessarry to enqueue the comment reply script because it is included with the comments block.
+You will add most of the theme support in the `theme.json` file. The title tag is already enabled for all block themes, and it is no longer necessary to enqueue the comment reply script because it is included with the comments block.
 </div>
 
 ```php
@@ -439,10 +439,10 @@ To enable border styles, add a `border` object under `settings` with the followi
 	"version": 1,
 	"settings": {
 		"border": {
-			"customColor": true,
+			"color": true,
 			"customRadius": true,
-			"customStyle": true,
-			"customWidth": true
+			"style": true,
+			"width": true
 		}
 	}
 }
@@ -455,10 +455,10 @@ To enable link colors, add a `color` setting and set `link` to true:
 	"version": 1,
 	"settings": {
 		"border": {
-			"customColor": true,
+			"color": true,
 			"customRadius": true,
-			"customStyle": true,
-			"customWidth": true
+			"style": true,
+			"width": true
 		},
 		"color": {
 			"link": true,
@@ -474,10 +474,10 @@ To enable padding, margin and custom spacing units, include a setting for spacin
 	"version": 1,
 	"settings": {
 		"border": {
-			"customColor": true,
+			"color": true,
 			"customRadius": true,
-			"customStyle": true,
-			"customWidth": true
+			"style": true,
+			"width": true
 		},
 		"color": {
 			"link": true
@@ -500,10 +500,10 @@ If you want to disable gradients, which are enabled by default, set `gradient` t
 	"version": 1,
 	"settings": {
 		"border": {
-			"customColor": true,
+			"color": true,
 			"customRadius": true,
-			"customStyle": true,
-			"customWidth": true
+			"style": true,
+			"width": true
 		},
 		"color": {
 			"link": true,

docs/how-to-guides/themes/theme-json.md

@@ -216,10 +216,10 @@ The settings section has the following structure:
 	"version": 1,
 	"settings": {
 		"border": {
-			"customColor": false,
+			"color": false,
 			"customRadius": false,
-			"customStyle": false,
-			"customWidth": false
+			"style": false,
+			"width": false
 		},
 		"color": {
 			"background": true,
@@ -244,12 +244,12 @@ The settings section has the following structure:
 		},
 		"typography": {
 			"customFontSize": true,
-			"customFontStyle": true,
-			"customFontWeight": true,
 			"customLineHeight": false,
-			"customTextDecorations": true,
-			"customTextTransforms": true,
 			"dropCap": true,
+			"fontStyle": true,
+			"fontWeight": true,
+			"textDecoration": true,
+			"textTransform": true,
 			"fontFamilies": [],
 			"fontSizes": []
 		},
@@ -779,7 +779,7 @@ body {
 
 Styles found within a block will be enqueued using the block selector.
 
-By default, the block selector is generated based on its name such as `.wp-block-<blockname-without-namespace>`. For example, `.wp-block-group` for the `core/group` block. There are some blocks that want to opt-out from this default behavior. They can do so by explicitely telling the system which selector to use for them via the `__experimentalSelector` key within the `supports` section of its `block.json` file.
+By default, the block selector is generated based on its name such as `.wp-block-<blockname-without-namespace>`. For example, `.wp-block-group` for the `core/group` block. There are some blocks that want to opt-out from this default behavior. They can do so by explicitly telling the system which selector to use for them via the `__experimentalSelector` key within the `supports` section of its `block.json` file.
 
 {% codetabs %}
 {% Input %}
@@ -995,8 +995,8 @@ One thing you may have noticed is the naming schema used for the CSS Custom Prop
 
 The `--` as a separator has two functions:
 
-- Readibility, for human understanding. It can be thought as similar to the BEM naming schema, it separates "categories".
-- Parseability, for machine understanding. Using a defined structure allows machines to understand the meaning of the property `--wp--preset--color--black`: it's a value bounded to the color preset whose slug is "black", which then gives us room to do more things with them.
+- Readability, for human understanding. It can be thought as similar to the BEM naming schema, it separates "categories".
+- Parsability, for machine understanding. Using a defined structure allows machines to understand the meaning of the property `--wp--preset--color--black`: it's a value bounded to the color preset whose slug is "black", which then gives us room to do more things with them.
 
 ### Why using `--` as a separator?
 

lib/class-wp-theme-json-gutenberg.php

@@ -82,10 +82,10 @@ class WP_Theme_JSON_Gutenberg {
 
 	const VALID_SETTINGS = array(
 		'border'     => array(
-			'customColor'  => null,
+			'color'        => null,
 			'customRadius' => null,
-			'customStyle'  => null,
-			'customWidth'  => null,
+			'style'        => null,
+			'width'        => null,
 		),
 		'color'      => array(
 			'background'     => null,
@@ -110,16 +110,16 @@ class WP_Theme_JSON_Gutenberg {
 			'units'         => null,
 		),
 		'typography' => array(
-			'customFontSize'        => null,
-			'customFontStyle'       => null,
-			'customFontWeight'      => null,
-			'customLetterSpacing'   => null,
-			'customLineHeight'      => null,
-			'customTextDecorations' => null,
-			'customTextTransforms'  => null,
-			'dropCap'               => null,
-			'fontFamilies'          => null,
-			'fontSizes'             => null,
+			'customFontSize'   => null,
+			'customLineHeight' => null,
+			'dropCap'          => null,
+			'fontFamilies'     => null,
+			'fontSizes'        => null,
+			'fontStyle'        => null,
+			'fontWeight'       => null,
+			'letterSpacing'    => null,
+			'textDecoration'   => null,
+			'textTransform'    => null,
 		),
 	);
 
@@ -292,6 +292,12 @@ public function __construct( $theme_json = array(), $origin = 'theme' ) {
 			$theme_json = WP_Theme_JSON_Schema_V0::parse( $theme_json );
 		}
 
+		// Provide backwards compatibility for settings that did not land in 5.8
+		// and have had their `custom` prefixed removed since.
+		if ( 1 === $theme_json['version'] ) {
+			$theme_json = WP_Theme_JSON_Schema_V1::parse( $theme_json );
+		}
+
 		$valid_block_names   = array_keys( self::get_blocks_metadata() );
 		$valid_element_names = array_keys( self::ELEMENTS );
 		$this->theme_json    = self::sanitize( $theme_json, $valid_block_names, $valid_element_names );
@@ -1434,6 +1440,12 @@ public static function remove_insecure_properties( $theme_json ) {
 			$theme_json = WP_Theme_JSON_Schema_V0::parse( $theme_json );
 		}
 
+		// Provide backwards compatibility for settings that did not land in 5.8
+		// and have had their `custom` prefixed removed since.
+		if ( 1 === $theme_json['version'] ) {
+			$theme_json = WP_Theme_JSON_Schema_V1::parse( $theme_json );
+		}
+
 		$valid_block_names   = array_keys( self::get_blocks_metadata() );
 		$valid_element_names = array_keys( self::ELEMENTS );
 		$theme_json          = self::sanitize( $theme_json, $valid_block_names, $valid_element_names );

lib/class-wp-theme-json-schema-v0.php

@@ -184,6 +184,16 @@ private static function process_settings( $settings ) {
 			array( 'custom' ),
 		);
 
+		$renamed_paths = array(
+			'border.customColor'               => 'border.color',
+			'border.customStyle'               => 'border.style',
+			'border.customWidth'               => 'border.width',
+			'typography.customFontStyle'       => 'typography.fontStyle',
+			'typography.customFontWeight'      => 'typography.fontWeight',
+			'typography.customTextDecorations' => 'typography.textDecoration',
+			'typography.customTextTransforms'  => 'typography.textTransform',
+		);
+
 		// 'defaults' settings become top-level.
 		if ( isset( $settings[ self::ALL_BLOCKS_NAME ] ) ) {
 			$new = $settings[ self::ALL_BLOCKS_NAME ];
@@ -219,6 +229,18 @@ private static function process_settings( $settings ) {
 			return $new;
 		}
 
+		// Process any renamed/moved paths within settings.
+		foreach ( $renamed_paths as $original => $renamed ) {
+			$original_path = explode( '.', $original );
+			$renamed_path  = explode( '.', $renamed );
+			$current_value = _wp_array_get( $new, $original_path, null );
+
+			if ( null !== $current_value ) {
+				gutenberg_experimental_set( $new, $renamed_path, $current_value );
+				self::unset_setting_by_path( $new, $original_path );
+			}
+		}
+
 		/*
 		 * At this point, it only contains block's data.
 		 * However, some block data we need to consolidate
@@ -254,6 +276,24 @@ private static function process_settings( $settings ) {
 		return $new;
 	}
 
+	/**
+	 * Removes a property from within the provided settings by its path.
+	 *
+	 * @param array $settings Reference to the current settings array.
+	 * @param array $path Path to the property to be removed.
+	 *
+	 * @return void
+	 */
+	private static function unset_setting_by_path( &$settings, $path ) {
+		$tmp_settings = &$settings; // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+		$last_key     = array_pop( $path );
+		foreach ( $path as $key ) {
+			$tmp_settings = &$tmp_settings[ $key ];
+		}
+
+		unset( $tmp_settings[ $last_key ] );
+	}
+
 	/**
 	 * Processes the styles subtree.
 	 *