Block Editor: Allow control over drop cap feature with `useEditorFeat…

…ure` helper (#22291)

* Block Editor: Integrate theme config with useEditorFeature

* Remove the default value param from useEditorFeature

lib/compat.php

@@ -44,20 +44,6 @@ function register_block_type_from_metadata( $path, $args = array() ) {
  }
 }
 
-/**
- * Extends block editor settings to determine whether to use drop cap feature.
- *
- * @param array $settings Default editor settings.
- *
- * @return array Filtered editor settings.
- */
-function gutenberg_extend_settings_drop_cap( $settings ) {
- $settings['__experimentalDisableDropCap'] = false;
- return $settings;
-}
-add_filter( 'block_editor_settings', 'gutenberg_extend_settings_drop_cap' );
-
-
 /**
  * Extends block editor settings to include a list of image dimensions per size.
  *

lib/editor-features.php

@@ -0,0 +1,49 @@
+<?php
+/**
+ * Experimental editor features config functionality.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Returns the default config for editor features,
+ * or an empty array if none found.
+ *
+ * @return array Default features config for the editor.
+ */
+function gutenberg_experimental_get_editor_features_config() {
+ $empty_config = array();
+ $config_path = __DIR__ . '/experimental-default-theme.json';
+ if ( ! file_exists( $config_path ) ) {
+ return $empty_config;
+ }
+
+ $theme_config = json_decode(
+ @file_get_contents( $config_path ),
+ true
+ );
+ if (
+ empty( $theme_config['global']['features'] ) ||
+ ! is_array( $theme_config['global']['features'] )
+ ) {
+ return $empty_config;
+ }
+
+ return $theme_config['global']['features'];
+}
+
+
+/**
+ * Extends editor settings with the features loaded from default config.
+ *
+ * @param array $settings Default editor settings.
+ *
+ * @return array Filtered editor settings.
+ */
+function gutenberg_extend_settings_editor_features( $settings ) {
+ $editor_features = gutenberg_experimental_get_editor_features_config();
+ $settings['__experimentalFeatures'] = $editor_features;
+
+ return $settings;
+}
+add_filter( 'block_editor_settings', 'gutenberg_extend_settings_editor_features' );

experimental-default-global-styles.json → lib/experimental-default-theme.json

@@ -123,6 +123,11 @@
  "value": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)"
  }
  ]
+ },
+ "features": {
+ "typography": {
+ "dropCap": false
+ }
  }
  }
 }

lib/global-styles.php

@@ -171,7 +171,7 @@ function gutenberg_experimental_global_styles_get_user_cpt_id() {
  */
 function gutenberg_experimental_global_styles_get_core() {
  $config = gutenberg_experimental_global_styles_get_from_file(
- dirname( dirname( __FILE__ ) ) . '/experimental-default-global-styles.json'
+ __DIR__ . '/experimental-default-theme.json'
  );
 
  return $config;

lib/load.php

@@ -93,4 +93,5 @@ function gutenberg_is_experiment_enabled( $name ) {
 require dirname( __FILE__ ) . '/experiments-page.php';
 require dirname( __FILE__ ) . '/customizer.php';
 require dirname( __FILE__ ) . '/edit-site-page.php';
+require dirname( __FILE__ ) . '/editor-features.php';
 require dirname( __FILE__ ) . '/global-styles.php';

packages/block-editor/src/components/use-editor-feature/index.js

@@ -1,23 +1,49 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { useBlockEditContext } from '../block-edit';
+
 /**
  * Hook that retrieves the setting for the given editor feature.
+ * It works with nested objects using by finding the value at path.
  *
- * @param {string} featureName The name of the feature.
+ * @param {string} featurePath The path to the feature.
  *
  * @return {any} Returns the value defined for the setting.
+ *
+ * @example
+ * ```js
+ * const isEnabled = useEditorFeature( 'typography.dropCap' );
+ * ```
  */
-export default function useEditorFeature( featureName ) {
+export default function useEditorFeature( featurePath ) {
+ const { name: blockName } = useBlockEditContext();
+ const path = `__experimentalFeatures.${ featurePath }`;
+
  const setting = useSelect(
  ( select ) => {
+ const { getBlockSupport } = select( 'core/blocks' );
+
+ const blockSupportValue = getBlockSupport( blockName, path );
+ if ( blockSupportValue !== undefined ) {
+ return blockSupportValue;
+ }
+
  const { getSettings } = select( 'core/block-editor' );
 
- return getSettings()[ featureName ];
+ return get( getSettings(), path );
  },
- [ featureName ]
+ [ blockName, path ]
  );
 
  return setting;

packages/block-library/src/paragraph/block.json

@@ -32,6 +32,11 @@
  "lightBlockWrapper": true,
  "__experimentalColor": true,
  "__experimentalLineHeight": true,
- "__experimentalFontSize": true
+ "__experimentalFontSize": true,
+ "__experimentalFeatures": {
+ "typography": {
+ "dropCap": true
+ }
+ }
  }
 }

packages/block-library/src/paragraph/edit.js

@@ -57,7 +57,7 @@ function ParagraphRTLToolbar( { direction, setDirection } ) {
 }
 
 function useDropCap( isDropCap, fontSize, styleFontSize ) {
- const isDisabled = useEditorFeature( '__experimentalDisableDropCap' );
+ const isDisabled = ! useEditorFeature( 'typography.dropCap' );
 
  const [ minimumHeight, setMinimumHeight ] = useState();
 

packages/blocks/src/store/selectors.js

@@ -217,7 +217,11 @@ export const getBlockSupport = (
 ) => {
  const blockType = getNormalizedBlockType( state, nameOrType );
 
- return get( blockType, [ 'supports', feature ], defaultSupports );
+ return get(
+ blockType,
+ [ 'supports', ...feature.split( '.' ) ],
+ defaultSupports
+ );
 };
 
 /**

packages/blocks/src/store/test/selectors.js

@@ -1,21 +1,73 @@
 /**
  * External dependencies
  */
-import { omit } from 'lodash';
+import { keyBy, omit } from 'lodash';
 
 import deepFreeze from 'deep-freeze';
 
 /**
  * Internal dependencies
  */
 import {
+ getBlockSupport,
  getChildBlockNames,
  getDefaultBlockVariation,
  getGroupingBlockName,
  isMatchingSearchTerm,
 } from '../selectors';
 
 describe( 'selectors', () => {
+ describe( 'getBlockSupport', () => {
+ const blockName = 'block/name';
+ const getState = ( blocks ) => {
+ return deepFreeze( {
+ blockTypes: keyBy( blocks, 'name' ),
+ } );
+ };
+
+ it( 'returns default value when config entry not found', () => {
+ const state = getState( [] );
+
+ expect(
+ getBlockSupport( state, blockName, 'unknown', 'default' )
+ ).toBe( 'default' );
+ } );
+
+ it( 'returns value when config found but falsy', () => {
+ const state = getState( [
+ {
+ name: blockName,
+ supports: {
+ falsy: '',
+ },
+ },
+ ] );
+
+ expect(
+ getBlockSupport( state, blockName, 'falsy', 'default' )
+ ).toBe( '' );
+ } );
+
+ it( 'works with configs stored as nested objects', () => {
+ const state = getState( [
+ {
+ name: blockName,
+ supports: {
+ features: {
+ foo: {
+ bar: 'value',
+ },
+ },
+ },
+ },
+ ] );
+
+ expect(
+ getBlockSupport( state, blockName, 'features.foo.bar' )
+ ).toBe( 'value' );
+ } );
+ } );
+
  describe( 'getChildBlockNames', () => {
  it( 'should return an empty array if state is empty', () => {
  const state = {};

packages/editor/src/components/provider/index.js

@@ -116,10 +116,10 @@ class EditorProvider extends Component {
  '__experimentalBlockPatternCategories',
  '__experimentalDisableCustomUnits',
  '__experimentalDisableCustomLineHeight',
- '__experimentalDisableDropCap',
  '__experimentalEnableLegacyWidgetBlock',
  '__experimentalEnableFullSiteEditing',
  '__experimentalEnableFullSiteEditingDemo',
+ '__experimentalFeatures',
  '__experimentalGlobalStylesUserEntityId',
  '__experimentalGlobalStylesBase',
  '__experimentalPreferredStyleVariations',