Allow disabling custom font sizes using theme.json config (#25038)

WordPress · Sep 3, 2020 · 459ab7f · 459ab7f
1 parent 3f557de
commit 459ab7f
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 27 deletions.
diff --git a/lib/edit-site-page.php b/lib/edit-site-page.php
@@ -126,11 +126,10 @@ function gutenberg_edit_site_init( $hook ) {
 	}
 
 	$settings = array(
-		'alignWide'              => get_theme_support( 'align-wide' ),
-		'disableCustomFontSizes' => get_theme_support( 'disable-custom-font-sizes' ),
-		'imageSizes'             => $available_image_sizes,
-		'isRTL'                  => is_rtl(),
-		'maxUploadFileSize'      => $max_upload_size,
+		'alignWide'         => get_theme_support( 'align-wide' ),
+		'imageSizes'        => $available_image_sizes,
+		'isRTL'             => is_rtl(),
+		'maxUploadFileSize' => $max_upload_size,
 	);
 
 	list( $color_palette, ) = (array) get_theme_support( 'editor-color-palette' );

diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json
@@ -133,6 +133,9 @@
 			},
 			"gradient": {
 				"custom": true
+			},
+			"fontSize": {
+				"custom": true
 			}
 		}
 	}

diff --git a/lib/global-styles.php b/lib/global-styles.php
@@ -621,6 +621,12 @@ function gutenberg_experimental_global_styles_get_editor_features( $config ) {
 		}
 		$features['global']['gradient']['custom'] = false;
 	}
+	if ( get_theme_support( 'disable-custom-font-sizes' ) ) {
+		if ( ! isset( $features['global']['fontSize'] ) ) {
+			$features['global']['fontSize'] = array();
+		}
+		$features['global']['fontSize']['custom'] = false;
+	}
 
 	return $features;
 }
@@ -656,6 +662,7 @@ function gutenberg_experimental_global_styles_settings( $settings ) {
 	// Unsetting deprecated settings defined by Core.
 	unset( $settings['disableCustomColors'] );
 	unset( $settings['disableCustomGradients'] );
+	unset( $settings['disableCustomFontSizes'] );
 
 	return $settings;
 }

diff --git a/lib/navigation-page.php b/lib/navigation-page.php
@@ -58,11 +58,10 @@ function gutenberg_navigation_init( $hook ) {
 	}
 
 	$settings = array(
-		'disableCustomFontSizes' => get_theme_support( 'disable-custom-font-sizes' ),
-		'imageSizes'             => $available_image_sizes,
-		'isRTL'                  => is_rtl(),
-		'maxUploadFileSize'      => $max_upload_size,
-		'blockNavMenus'          => get_theme_support( 'block-nav-menus' ),
+		'imageSizes'        => $available_image_sizes,
+		'isRTL'             => is_rtl(),
+		'maxUploadFileSize' => $max_upload_size,
+		'blockNavMenus'     => get_theme_support( 'block-nav-menus' ),
 	);
 
 	list( $color_palette, ) = (array) get_theme_support( 'editor-color-palette' );

diff --git a/lib/widgets-page.php b/lib/widgets-page.php
@@ -80,10 +80,9 @@ function gutenberg_widgets_init( $hook ) {
 
 	$settings = array_merge(
 		array(
-			'disableCustomFontSizes' => get_theme_support( 'disable-custom-font-sizes' ),
-			'imageSizes'             => $available_image_sizes,
-			'isRTL'                  => is_rtl(),
-			'maxUploadFileSize'      => $max_upload_size,
+			'imageSizes'        => $available_image_sizes,
+			'isRTL'             => is_rtl(),
+			'maxUploadFileSize' => $max_upload_size,
 		),
 		gutenberg_get_legacy_widget_settings()
 	);

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
@@ -479,7 +479,6 @@ _Properties_
 -   _availableLegacyWidgets_ `Array`: Array of objects representing the legacy widgets available.
 -   _colors_ `Array`: Palette colors
 -   _fontSizes_ `Array`: Available font sizes
--   _disableCustomFontSizes_ `boolean`: Whether or not the custom font sizes are disabled
 -   _imageEditing_ `boolean`: Image Editing settings set to false to disable.
 -   _imageSizes_ `Array`: Available image sizes
 -   _maxWidth_ `number`: Max width to constraint resizing

diff --git a/packages/block-editor/src/components/font-sizes/font-size-picker.js b/packages/block-editor/src/components/font-sizes/font-size-picker.js
@@ -1,16 +1,28 @@
 /**
  * WordPress dependencies
  */
-import { FontSizePicker } from '@wordpress/components';
-import { withSelect } from '@wordpress/data';
+import { FontSizePicker as BaseFontSizePicker } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 
-export default withSelect( ( select ) => {
-	const { disableCustomFontSizes, fontSizes } = select(
-		'core/block-editor'
-	).getSettings();
+/**
+ * Internal dependencies
+ */
+import useEditorFeature from '../use-editor-feature';
+
+function FontSizePicker( props ) {
+	const fontSizes = useSelect(
+		( select ) => select( 'core/block-editor' ).getSettings().fontSizes,
+		[]
+	);
+	const disableCustomFontSizes = ! useEditorFeature( 'fontSize.custom' );
+
+	return (
+		<BaseFontSizePicker
+			{ ...props }
+			fontSizes={ fontSizes }
+			disableCustomFontSizes={ disableCustomFontSizes }
+		/>
+	);
+}
 
-	return {
-		disableCustomFontSizes,
-		fontSizes,
-	};
-} )( FontSizePicker );
+export default FontSizePicker;
diff --git a/packages/block-editor/src/components/use-editor-feature/index.js b/packages/block-editor/src/components/use-editor-feature/index.js
@@ -22,6 +22,10 @@ const deprecatedFlags = {
 		settings.disableCustomGradients === undefined
 			? undefined
 			: ! settings.disableCustomGradients,
+	'fontSize.custom': ( settings ) =>
+		settings.disableCustomFontSizes === undefined
+			? undefined
+			: ! settings.disableCustomFontSizes,
 };
 
 /**

diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js
@@ -15,7 +15,6 @@ export const PREFERENCES_DEFAULTS = {
  * @property {Array} availableLegacyWidgets Array of objects representing the legacy widgets available.
  * @property {Array} colors Palette colors
  * @property {Array} fontSizes Available font sizes
- * @property {boolean} disableCustomFontSizes Whether or not the custom font sizes are disabled
  * @property {boolean} imageEditing Image Editing settings set to false to disable.
  * @property {Array} imageSizes Available image sizes
  * @property {number} maxWidth Max width to constraint resizing