Allow disabling custom font size; fixes #9168

docs/extensibility/theme-support.md

@@ -167,10 +167,22 @@ As an example for the regular font size, a theme may provide the following class
 }
 ```
 
+### Disabling custom font sizes
+
+Themes can disable the ability to set custom font sizes with the following code:
+
+```php
+add_theme_support('disable-custom-font-sizes');
+```
+
+When set, users will be restricted to the default sizes provided in Gutenberg or the sizes provided via the `editor-font-sizes` theme support setting.
+
 ### Disabling custom colors in block Color Palettes
 
-By default, the color palette offered to blocks, allows the user to select a custom color different from the editor or theme default colors.
+By default, the color palette offered to blocks allows the user to select a custom color different from the editor or theme default colors.
+
 Themes can disable this feature using:
+
 ```php
 add_theme_support( 'disable-custom-colors' );
 ```

lib/client-assets.php

@@ -1517,22 +1517,23 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 	}
 
 	$editor_settings = array(
-		'alignWide'           => $align_wide || ! empty( $gutenberg_theme_support[0]['wide-images'] ), // Backcompat. Use `align-wide` outside of `gutenberg` array.
-		'availableTemplates'  => $available_templates,
-		'allowedBlockTypes'   => $allowed_block_types,
-		'disableCustomColors' => get_theme_support( 'disable-custom-colors' ),
-		'disablePostFormats'  => ! current_theme_supports( 'post-formats' ),
-		'titlePlaceholder'    => apply_filters( 'enter_title_here', __( 'Add title', 'gutenberg' ), $post ),
-		'bodyPlaceholder'     => apply_filters( 'write_your_story', __( 'Write your story', 'gutenberg' ), $post ),
-		'isRTL'               => is_rtl(),
-		'autosaveInterval'    => 10,
-		'maxUploadFileSize'   => $max_upload_size,
-		'allowedMimeTypes'    => get_allowed_mime_types(),
-		'styles'              => $styles,
-		'postLock'            => $lock_details,
+		'alignWide'              => $align_wide || ! empty( $gutenberg_theme_support[0]['wide-images'] ), // Backcompat. Use `align-wide` outside of `gutenberg` array.
+		'availableTemplates'     => $available_templates,
+		'allowedBlockTypes'      => $allowed_block_types,
+		'disableCustomColors'    => get_theme_support( 'disable-custom-colors' ),
+		'disableCustomFontSizes' => get_theme_support( 'disable-custom-font-sizes' ),
+		'disablePostFormats'     => ! current_theme_supports( 'post-formats' ),
+		'titlePlaceholder'       => apply_filters( 'enter_title_here', __( 'Add title', 'gutenberg' ), $post ),
+		'bodyPlaceholder'        => apply_filters( 'write_your_story', __( 'Write your story', 'gutenberg' ), $post ),
+		'isRTL'                  => is_rtl(),
+		'autosaveInterval'       => 10,
+		'maxUploadFileSize'      => $max_upload_size,
+		'allowedMimeTypes'       => get_allowed_mime_types(),
+		'styles'                 => $styles,
+		'postLock'               => $lock_details,
 
 		// Ideally, we'd remove this and rely on a REST API endpoint.
-		'postLockUtils'       => array(
+		'postLockUtils'          => array(
 			'nonce'       => wp_create_nonce( 'lock-post_' . $post->ID ),
 			'unlockNonce' => wp_create_nonce( 'update-post_' . $post->ID ),
 			'ajaxUrl'     => admin_url( 'admin-ajax.php' ),

packages/components/src/font-size-picker/index.js

@@ -22,6 +22,7 @@ import { NavigableMenu } from '../navigable-container';
 function FontSizePicker( {
 	fallbackFontSize,
 	fontSizes = [],
+	disableCustomFontSizes = false,
 	onChange,
 	value,
 	withSlider,
@@ -73,7 +74,7 @@ function FontSizePicker( {
 						</NavigableMenu>
 					) }
 				/>
-				{ ! withSlider &&
+				{ ( ! withSlider && ! disableCustomFontSizes ) &&
 					<input
 						className="components-range-control__number"
 						type="number"

packages/editor/src/components/font-sizes/font-size-picker.js

@@ -6,8 +6,13 @@ import { withSelect } from '@wordpress/data';
 
 export default withSelect(
 	( select ) => {
-		const { fontSizes } = select( 'core/editor' ).getEditorSettings();
+		const {
+			disableCustomFontSizes,
+			fontSizes,
+		} = select( 'core/editor' ).getEditorSettings();
+
 		return {
+			disableCustomFontSizes,
 			fontSizes,
 		};
 	}