Allow disabling custom font size; fixes #9168 (#10620)

* Allow disabling custom font size settings; fixes #9168

* Update documentation

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

@@ -1519,22 +1519,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,
  };
  }