diff --git a/docs/how-to-guides/themes/create-block-theme.md b/docs/how-to-guides/themes/create-block-theme.md
index 45df340c1e19df..104c52fa9bce25 100644
--- a/docs/how-to-guides/themes/create-block-theme.md
+++ b/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.
-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.
```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,
diff --git a/docs/how-to-guides/themes/theme-json.md b/docs/how-to-guides/themes/theme-json.md
index 0eb28f9a29e0e4..0fe56af3d3c9bc 100644
--- a/docs/how-to-guides/themes/theme-json.md
+++ b/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-`. 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-`. 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?
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index f84696e019d23a..4ae644e25b15bd 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/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 );
diff --git a/lib/class-wp-theme-json-schema-v0.php b/lib/class-wp-theme-json-schema-v0.php
index 30a0578178c7f5..7d2f7f45628dea 100644
--- a/lib/class-wp-theme-json-schema-v0.php
+++ b/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.
*
diff --git a/lib/class-wp-theme-json-schema-v1.php b/lib/class-wp-theme-json-schema-v1.php
new file mode 100644
index 00000000000000..87ef54847a98a8
--- /dev/null
+++ b/lib/class-wp-theme-json-schema-v1.php
@@ -0,0 +1,183 @@
+ 1,
+ 'settings' => array(
+ 'border' => array(
+ 'radius' => null,
+ 'color' => null,
+ 'style' => null,
+ 'width' => null,
+ ),
+ 'color' => array(
+ 'custom' => null,
+ 'customGradient' => null,
+ 'gradients' => null,
+ 'link' => null,
+ 'palette' => null,
+ ),
+ 'spacing' => array(
+ 'customPadding' => null,
+ 'units' => null,
+ ),
+ 'typography' => array(
+ 'customFontSize' => null,
+ 'customLineHeight' => null,
+ 'dropCap' => null,
+ 'fontFamilies' => null,
+ 'fontSizes' => null,
+ 'fontStyle' => null,
+ 'fontWeight' => null,
+ 'letterSpacing' => null,
+ 'textDecorations' => null,
+ 'textTransforms' => null,
+ ),
+ 'custom' => null,
+ 'layout' => null,
+ ),
+ 'styles' => array(
+ 'border' => array(
+ 'radius' => null,
+ 'color' => null,
+ 'style' => null,
+ 'width' => null,
+ ),
+ 'color' => array(
+ 'background' => null,
+ 'gradient' => null,
+ 'link' => null,
+ 'text' => null,
+ ),
+ 'spacing' => array(
+ 'padding' => array(
+ 'top' => null,
+ 'right' => null,
+ 'bottom' => null,
+ 'left' => null,
+ ),
+ ),
+ 'typography' => array(
+ 'fontFamily' => null,
+ 'fontSize' => null,
+ 'fontStyle' => null,
+ 'fontWeight' => null,
+ 'lineHeight' => null,
+ 'textDecoration' => null,
+ 'textTransform' => null,
+ ),
+ ),
+ 'customTemplates' => null,
+ 'templateParts' => null,
+ );
+
+ /**
+ * Maps old properties to their new location within the schema's settings.
+ * This will be applied at both the defaults and individual block levels.
+ */
+ const RENAMED_PATHS = array(
+ 'border.customColor' => 'border.color',
+ 'border.customStyle' => 'border.style',
+ 'border.customWidth' => 'border.width',
+ 'typography.customFontStyle' => 'typography.fontStyle',
+ 'typography.customFontWeight' => 'typography.fontWeight',
+ 'typography.customLetterSpacing' => 'typography.letterSpacing',
+ 'typography.customTextDecorations' => 'typography.textDecoration',
+ 'typography.customTextTransforms' => 'typography.textTransform',
+ );
+
+ /**
+ * Converts a v1 schema into the latest.
+ *
+ * @param array $old Data in v1 schema.
+ *
+ * @return array Data in the latest schema.
+ */
+ public static function parse( $old ) {
+ // Copy everything.
+ $new = $old;
+
+ // Overwrite the things that change.
+ if ( isset( $old['settings'] ) ) {
+ $new['settings'] = self::process_settings( $old['settings'] );
+ }
+
+ $new['version'] = WP_Theme_JSON_Gutenberg::LATEST_SCHEMA;
+
+ return $new;
+ }
+
+ /**
+ * Processes the settings subtree.
+ *
+ * @param array $settings Array to process.
+ *
+ * @return array The settings in the new format.
+ */
+ private static function process_settings( $settings ) {
+ $new_settings = $settings;
+
+ // Process any renamed/moved paths within default settings.
+ self::rename_settings( $new_settings );
+
+ // Process individual block settings.
+ if ( isset( $new_settings['blocks'] ) && is_array( $new_settings['blocks'] ) ) {
+ foreach ( $new_settings['blocks'] as &$block_settings ) {
+ self::rename_settings( $block_settings );
+ }
+ }
+
+ return $new_settings;
+ }
+
+ /**
+ * Processes a settings array, renaming or moving properties according to
+ * `self::RENAMED_PATHS`.
+ *
+ * @param array $settings Reference to settings either defaults or an individual block's.
+ * @return void
+ */
+ private static function rename_settings( &$settings ) {
+ foreach ( self::RENAMED_PATHS as $original => $renamed ) {
+ $original_path = explode( '.', $original );
+ $renamed_path = explode( '.', $renamed );
+ $current_value = _wp_array_get( $settings, $original_path, null );
+
+ if ( null !== $current_value ) {
+ gutenberg_experimental_set( $settings, $renamed_path, $current_value );
+ self::unset_setting_by_path( $settings, $original_path );
+ }
+ }
+ }
+
+ /**
+ * 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 ] );
+ }
+}
diff --git a/lib/load.php b/lib/load.php
index 55ce6a575b1aac..59c7da519f56b3 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -96,6 +96,7 @@ function gutenberg_is_experiment_enabled( $name ) {
// as well as global styles.
require __DIR__ . '/interface-wp-theme-json-schema.php';
require __DIR__ . '/class-wp-theme-json-schema-v0.php';
+require __DIR__ . '/class-wp-theme-json-schema-v1.php';
require __DIR__ . '/class-wp-theme-json-gutenberg.php';
require __DIR__ . '/class-wp-theme-json-resolver-gutenberg.php';
diff --git a/lib/theme.json b/lib/theme.json
index f32734b6efe0f4..514af202649c7b 100644
--- a/lib/theme.json
+++ b/lib/theme.json
@@ -179,11 +179,11 @@
"dropCap": true,
"customFontSize": true,
"customLineHeight": false,
- "customFontStyle": true,
- "customFontWeight": true,
- "customTextTransforms": true,
- "customTextDecorations": true,
- "customLetterSpacing": true,
+ "fontStyle": true,
+ "fontWeight": true,
+ "textTransform": true,
+ "textDecoration": true,
+ "letterSpacing": true,
"fontSizes": [
{
"name": "Small",
@@ -219,10 +219,10 @@
"units": [ "px", "em", "rem", "vh", "vw", "%" ]
},
"border": {
- "customColor": false,
+ "color": false,
"customRadius": false,
- "customStyle": false,
- "customWidth": false
+ "style": false,
+ "width": false
},
"blocks": {
"core/button": {
@@ -232,10 +232,10 @@
},
"core/pullquote": {
"border": {
- "customColor": true,
+ "color": true,
"customRadius": true,
- "customStyle": true,
- "customWidth": true
+ "style": true,
+ "width": true
}
}
}
diff --git a/packages/block-editor/src/components/use-setting/index.js b/packages/block-editor/src/components/use-setting/index.js
index 74f03a3545cdd6..b517c903508706 100644
--- a/packages/block-editor/src/components/use-setting/index.js
+++ b/packages/block-editor/src/components/use-setting/index.js
@@ -50,14 +50,39 @@ const deprecatedFlags = {
'spacing.customPadding': ( settings ) => settings.enableCustomSpacing,
};
+const prefixedFlags = {
+ 'border.customColor': 'border.color',
+ 'border.customStyle': 'border.style',
+ 'border.customWidth': 'border.width',
+ 'typography.customFontStyle': 'typography.fontStyle',
+ 'typography.customFontWeight': 'typography.fontWeight',
+ 'typography.customLetterSpacing': 'typography.letterSpacing',
+ 'typography.customTextDecorations': 'typography.textDecoration',
+ 'typography.customTextTransforms': 'typography.textTransform',
+};
+
+/**
+ * Remove `custom` prefixes for flags that did not land in 5.8.
+ *
+ * This provides continued support for `custom` prefixed properties. It will
+ * be removed once third party devs have had sufficient time to update themes,
+ * plugins, etc.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/34485
+ *
+ * @param {string} path Path to desired value in settings.
+ * @return {string} The value for defined setting.
+ */
+const removeCustomPrefixes = ( path ) => {
+ return prefixedFlags[ path ] || path;
+};
+
/**
* Hook that retrieves the editor setting.
* It works with nested objects using by finding the value at path.
*
* @param {string} path The path to the setting.
- *
* @return {any} Returns the value defined for the setting.
- *
* @example
* ```js
* const isEnabled = useSetting( 'typography.dropCap' );
@@ -72,12 +97,14 @@ export default function useSetting( path ) {
// 1 - Use __experimental features, if available.
// We cascade to the all value if the block one is not available.
- const defaultsPath = `__experimentalFeatures.${ path }`;
- const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ path }`;
+ const normalizedPath = removeCustomPrefixes( path );
+ const defaultsPath = `__experimentalFeatures.${ normalizedPath }`;
+ const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ normalizedPath }`;
const experimentalFeaturesResult =
get( settings, blockPath ) ?? get( settings, defaultsPath );
+
if ( experimentalFeaturesResult !== undefined ) {
- if ( PATHS_WITH_MERGE[ path ] ) {
+ if ( PATHS_WITH_MERGE[ normalizedPath ] ) {
return (
experimentalFeaturesResult.user ??
experimentalFeaturesResult.theme ??
@@ -88,8 +115,8 @@ export default function useSetting( path ) {
}
// 2 - Use deprecated settings, otherwise.
- const deprecatedSettingsValue = deprecatedFlags[ path ]
- ? deprecatedFlags[ path ]( settings )
+ const deprecatedSettingsValue = deprecatedFlags[ normalizedPath ]
+ ? deprecatedFlags[ normalizedPath ]( settings )
: undefined;
if ( deprecatedSettingsValue !== undefined ) {
return deprecatedSettingsValue;
@@ -99,7 +126,7 @@ export default function useSetting( path ) {
// This is only necessary to support typography.dropCap.
// when __experimentalFeatures are not present (core without plugin).
// To remove when __experimentalFeatures are ported to core.
- return path === 'typography.dropCap' ? true : undefined;
+ return normalizedPath === 'typography.dropCap' ? true : undefined;
},
[ blockName, path ]
);
diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js
index 64872c5c470f01..674059b569e22b 100644
--- a/packages/block-editor/src/hooks/border.js
+++ b/packages/block-editor/src/hooks/border.js
@@ -23,20 +23,17 @@ export function BorderPanel( props ) {
const isSupported = hasBorderSupport( props.name );
const isColorSupported =
- useSetting( 'border.customColor' ) &&
- hasBorderSupport( props.name, 'color' );
+ useSetting( 'border.color' ) && hasBorderSupport( props.name, 'color' );
const isRadiusSupported =
useSetting( 'border.customRadius' ) &&
hasBorderSupport( props.name, 'radius' );
const isStyleSupported =
- useSetting( 'border.customStyle' ) &&
- hasBorderSupport( props.name, 'style' );
+ useSetting( 'border.style' ) && hasBorderSupport( props.name, 'style' );
const isWidthSupported =
- useSetting( 'border.customWidth' ) &&
- hasBorderSupport( props.name, 'width' );
+ useSetting( 'border.width' ) && hasBorderSupport( props.name, 'width' );
if ( isDisabled || ! isSupported ) {
return null;
@@ -113,10 +110,10 @@ export function shouldSkipSerialization( blockType ) {
*/
const useIsBorderDisabled = () => {
const configs = [
- ! useSetting( 'border.customColor' ),
+ ! useSetting( 'border.color' ),
! useSetting( 'border.customRadius' ),
- ! useSetting( 'border.customStyle' ),
- ! useSetting( 'border.customWidth' ),
+ ! useSetting( 'border.style' ),
+ ! useSetting( 'border.width' ),
];
return configs.every( Boolean );
diff --git a/packages/block-editor/src/hooks/font-appearance.js b/packages/block-editor/src/hooks/font-appearance.js
index 44c26d432bddfd..b398ef58dc28c4 100644
--- a/packages/block-editor/src/hooks/font-appearance.js
+++ b/packages/block-editor/src/hooks/font-appearance.js
@@ -73,7 +73,7 @@ export function FontAppearanceEdit( props ) {
*/
export function useIsFontStyleDisabled( { name: blockName } = {} ) {
const styleSupport = hasBlockSupport( blockName, FONT_STYLE_SUPPORT_KEY );
- const hasFontStyles = useSetting( 'typography.customFontStyle' );
+ const hasFontStyles = useSetting( 'typography.fontStyle' );
return ! styleSupport || ! hasFontStyles;
}
@@ -89,7 +89,7 @@ export function useIsFontStyleDisabled( { name: blockName } = {} ) {
*/
export function useIsFontWeightDisabled( { name: blockName } = {} ) {
const weightSupport = hasBlockSupport( blockName, FONT_WEIGHT_SUPPORT_KEY );
- const hasFontWeights = useSetting( 'typography.customFontWeight' );
+ const hasFontWeights = useSetting( 'typography.fontWeight' );
return ! weightSupport || ! hasFontWeights;
}
diff --git a/packages/block-editor/src/hooks/letter-spacing.js b/packages/block-editor/src/hooks/letter-spacing.js
index 01446ef4024324..51dbe207f52ccb 100644
--- a/packages/block-editor/src/hooks/letter-spacing.js
+++ b/packages/block-editor/src/hooks/letter-spacing.js
@@ -60,7 +60,7 @@ export function useIsLetterSpacingDisabled( { name: blockName } = {} ) {
blockName,
LETTER_SPACING_SUPPORT_KEY
);
- const hasLetterSpacing = useSetting( 'typography.customLetterSpacing' );
+ const hasLetterSpacing = useSetting( 'typography.letterSpacing' );
return notSupported || ! hasLetterSpacing;
}
diff --git a/packages/block-editor/src/hooks/text-decoration.js b/packages/block-editor/src/hooks/text-decoration.js
index 942f0924eea555..65f0aadf77d1e1 100644
--- a/packages/block-editor/src/hooks/text-decoration.js
+++ b/packages/block-editor/src/hooks/text-decoration.js
@@ -62,7 +62,7 @@ export function useIsTextDecorationDisabled( { name: blockName } = {} ) {
blockName,
TEXT_DECORATION_SUPPORT_KEY
);
- const hasTextDecoration = useSetting( 'typography.customTextDecorations' );
+ const hasTextDecoration = useSetting( 'typography.textDecoration' );
return notSupported || ! hasTextDecoration;
}
diff --git a/packages/block-editor/src/hooks/text-transform.js b/packages/block-editor/src/hooks/text-transform.js
index fabbebc1c00020..b2710b5f654b59 100644
--- a/packages/block-editor/src/hooks/text-transform.js
+++ b/packages/block-editor/src/hooks/text-transform.js
@@ -62,7 +62,7 @@ export function useIsTextTransformDisabled( { name: blockName } = {} ) {
blockName,
TEXT_TRANSFORM_SUPPORT_KEY
);
- const hasTextTransforms = useSetting( 'typography.customTextTransforms' );
+ const hasTextTransforms = useSetting( 'typography.textTransform' );
return notSupported || ! hasTextTransforms;
}
diff --git a/packages/edit-site/src/components/global-styles/border-panel.js b/packages/edit-site/src/components/global-styles/border-panel.js
index 2dd6675debe239..13cd69733f07fd 100644
--- a/packages/edit-site/src/components/global-styles/border-panel.js
+++ b/packages/edit-site/src/components/global-styles/border-panel.js
@@ -38,7 +38,7 @@ export function useHasBorderPanel( name ) {
function useHasBorderColorControl( name ) {
const supports = getSupportedGlobalStylesPanels( name );
return (
- useSetting( 'border.customColor', name )[ 0 ] &&
+ useSetting( 'border.color', name )[ 0 ] &&
supports.includes( 'borderColor' )
);
}
@@ -54,7 +54,7 @@ function useHasBorderRadiusControl( name ) {
function useHasBorderStyleControl( name ) {
const supports = getSupportedGlobalStylesPanels( name );
return (
- useSetting( 'border.customStyle', name )[ 0 ] &&
+ useSetting( 'border.style', name )[ 0 ] &&
supports.includes( 'borderStyle' )
);
}
@@ -62,7 +62,7 @@ function useHasBorderStyleControl( name ) {
function useHasBorderWidthControl( name ) {
const supports = getSupportedGlobalStylesPanels( name );
return (
- useSetting( 'border.customWidth', name )[ 0 ] &&
+ useSetting( 'border.width', name )[ 0 ] &&
supports.includes( 'borderWidth' )
);
}
diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js
index 723d2fee1c2298..9480748a902b1e 100644
--- a/packages/edit-site/src/components/global-styles/typography-panel.js
+++ b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -38,10 +38,10 @@ function useHasLineHeightControl( name ) {
function useHasAppearanceControl( name ) {
const supports = getSupportedGlobalStylesPanels( name );
const hasFontStyles =
- useSetting( 'typography.customFontStyle', name )[ 0 ] &&
+ useSetting( 'typography.fontStyle', name )[ 0 ] &&
supports.includes( 'fontStyle' );
const hasFontWeights =
- useSetting( 'typography.customFontWeight', name )[ 0 ] &&
+ useSetting( 'typography.fontWeight', name )[ 0 ] &&
supports.includes( 'fontWeight' );
return hasFontStyles || hasFontWeights;
}
@@ -49,7 +49,7 @@ function useHasAppearanceControl( name ) {
function useHasLetterSpacingControl( name ) {
const supports = getSupportedGlobalStylesPanels( name );
return (
- useSetting( 'typography.customLetterSpacing', name )[ 0 ] &&
+ useSetting( 'typography.letterSpacing', name )[ 0 ] &&
supports.includes( 'letterSpacing' )
);
}
@@ -63,10 +63,10 @@ export default function TypographyPanel( { name } ) {
)[ 0 ];
const [ fontFamilies ] = useSetting( 'typography.fontFamilies', name );
const hasFontStyles =
- useSetting( 'typography.customFontStyle', name )[ 0 ] &&
+ useSetting( 'typography.fontStyle', name )[ 0 ] &&
supports.includes( 'fontStyle' );
const hasFontWeights =
- useSetting( 'typography.customFontWeight', name )[ 0 ] &&
+ useSetting( 'typography.fontWeight', name )[ 0 ] &&
supports.includes( 'fontWeight' );
const hasLineHeightEnabled = useHasLineHeightControl( name );
const hasAppearanceControl = useHasAppearanceControl( name );
diff --git a/phpunit/class-wp-theme-json-schema-v0-test.php b/phpunit/class-wp-theme-json-schema-v0-test.php
index 02e35eaf4fce33..dbc2dd112cd2fc 100644
--- a/phpunit/class-wp-theme-json-schema-v0-test.php
+++ b/phpunit/class-wp-theme-json-schema-v0-test.php
@@ -12,7 +12,7 @@ function test_parse() {
$theme_json_v0 = array(
'settings' => array(
'defaults' => array(
- 'color' => array(
+ 'color' => array(
'palette' => array(
array(
'name' => 'Black',
@@ -38,6 +38,12 @@ function test_parse() {
'custom' => false,
'link' => false,
),
+ 'typography' => array(
+ 'customFontStyle' => false,
+ 'customFontWeight' => false,
+ 'customTextDecorations' => false,
+ 'customTextTransforms' => false,
+ ),
),
'root' => array(
'color' => array(
@@ -56,7 +62,10 @@ function test_parse() {
'link' => true,
),
'border' => array(
+ 'customColor' => false,
'customRadius' => false,
+ 'customStyle' => false,
+ 'customWidth' => false,
),
),
'core/paragraph' => array(
@@ -91,7 +100,7 @@ function test_parse() {
$expected = array(
'version' => 1,
'settings' => array(
- 'color' => array(
+ 'color' => array(
'palette' => array(
array(
'name' => 'Pale Pink',
@@ -107,10 +116,19 @@ function test_parse() {
'custom' => false,
'link' => true,
),
- 'border' => array(
+ 'border' => array(
+ 'color' => false,
'customRadius' => false,
+ 'style' => false,
+ 'width' => false,
+ ),
+ 'typography' => array(
+ 'fontStyle' => false,
+ 'fontWeight' => false,
+ 'textDecoration' => false,
+ 'textTransform' => false,
),
- 'blocks' => array(
+ 'blocks' => array(
'core/paragraph' => array(
'typography' => array(
'dropCap' => false,
diff --git a/phpunit/class-wp-theme-json-schema-v1-test.php b/phpunit/class-wp-theme-json-schema-v1-test.php
new file mode 100644
index 00000000000000..498a7b03becea0
--- /dev/null
+++ b/phpunit/class-wp-theme-json-schema-v1-test.php
@@ -0,0 +1,182 @@
+ 1,
+ 'settings' => array(
+ 'color' => array(
+ 'palette' => array(
+ array(
+ 'name' => 'Pale Pink',
+ 'slug' => 'pale-pink',
+ 'color' => '#f78da7',
+ ),
+ array(
+ 'name' => 'Vivid Red',
+ 'slug' => 'vivid-red',
+ 'color' => '#cf2e2e',
+ ),
+ ),
+ 'custom' => false,
+ 'link' => true,
+ ),
+ 'border' => array(
+ 'customColor' => false,
+ 'customRadius' => false,
+ 'customStyle' => false,
+ 'customWidth' => false,
+ ),
+ 'typography' => array(
+ 'customFontStyle' => false,
+ 'customFontWeight' => false,
+ 'customLetterSpacing' => false,
+ 'customTextDecorations' => false,
+ 'customTextTransforms' => false,
+ ),
+ 'blocks' => array(
+ 'core/group' => array(
+ 'border' => array(
+ 'customColor' => true,
+ 'customRadius' => true,
+ 'customStyle' => true,
+ 'customWidth' => true,
+ ),
+ 'typography' => array(
+ 'customFontStyle' => true,
+ 'customFontWeight' => true,
+ 'customLetterSpacing' => true,
+ 'customTextDecorations' => true,
+ 'customTextTransforms' => true,
+ ),
+ ),
+ ),
+ ),
+ 'styles' => array(
+ 'color' => array(
+ 'background' => 'purple',
+ ),
+ 'blocks' => array(
+ 'core/group' => array(
+ 'color' => array(
+ 'background' => 'red',
+ ),
+ 'spacing' => array(
+ 'padding' => array(
+ 'top' => '10px',
+ ),
+ ),
+ 'elements' => array(
+ 'link' => array(
+ 'color' => array(
+ 'text' => 'yellow',
+ ),
+ ),
+ ),
+ ),
+ ),
+ 'elements' => array(
+ 'link' => array(
+ 'color' => array(
+ 'text' => 'red',
+ ),
+ ),
+ ),
+ ),
+ );
+
+ $actual = WP_Theme_JSON_Schema_V1::parse( $theme_json_v1 );
+
+ $expected = array(
+ 'version' => 1,
+ 'settings' => array(
+ 'color' => array(
+ 'palette' => array(
+ array(
+ 'name' => 'Pale Pink',
+ 'slug' => 'pale-pink',
+ 'color' => '#f78da7',
+ ),
+ array(
+ 'name' => 'Vivid Red',
+ 'slug' => 'vivid-red',
+ 'color' => '#cf2e2e',
+ ),
+ ),
+ 'custom' => false,
+ 'link' => true,
+ ),
+ 'border' => array(
+ 'color' => false,
+ 'customRadius' => false,
+ 'style' => false,
+ 'width' => false,
+ ),
+ 'typography' => array(
+ 'fontStyle' => false,
+ 'fontWeight' => false,
+ 'letterSpacing' => false,
+ 'textDecoration' => false,
+ 'textTransform' => false,
+ ),
+ 'blocks' => array(
+ 'core/group' => array(
+ 'border' => array(
+ 'color' => true,
+ 'customRadius' => true,
+ 'style' => true,
+ 'width' => true,
+ ),
+ 'typography' => array(
+ 'fontStyle' => true,
+ 'fontWeight' => true,
+ 'letterSpacing' => true,
+ 'textDecoration' => true,
+ 'textTransform' => true,
+ ),
+ ),
+ ),
+ ),
+ 'styles' => array(
+ 'color' => array(
+ 'background' => 'purple',
+ ),
+ 'blocks' => array(
+ 'core/group' => array(
+ 'color' => array(
+ 'background' => 'red',
+ ),
+ 'spacing' => array(
+ 'padding' => array(
+ 'top' => '10px',
+ ),
+ ),
+ 'elements' => array(
+ 'link' => array(
+ 'color' => array(
+ 'text' => 'yellow',
+ ),
+ ),
+ ),
+ ),
+ ),
+ 'elements' => array(
+ 'link' => array(
+ 'color' => array(
+ 'text' => 'red',
+ ),
+ ),
+ ),
+ ),
+ );
+
+ $this->assertEqualSetsWithIndex( $expected, $actual );
+ }
+}