Block Editor: Integrate theme config with useEditorFeature

Author: gziolo

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.jsonexperimental-default-global-styles.json renamed to 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

@@ -90,4 +90,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,51 @@
+/**
+ * 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.
+ * @param {*}      defaultValue Default value to return if not
+ *                              explicitly defined.
  *
  * @return {any} Returns the value defined for the setting.
+ *
+ * @example
+ * ```js
+ * const isEnabled = useEditorFeature( 'typography.dropCap', false );
+ * ```
  */
-export default function useEditorFeature( featureName ) {
+export default function useEditorFeature( featurePath, defaultValue ) {
+	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, defaultValue );
 		},
-		[ 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', false );
 
 	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 = {};