Block Editor: Add useEditorFeature hook to simplify access to editor …

…features (#21646) * Block Editor: Add useEditorFeature hook to work with typography, colors and other features * Avoid using get_theme_support for drop cap
WordPress · Apr 24, 2020 · f46c7fc · f46c7fc
1 parent c87c9b0
commit f46c7fc
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 72 deletions.
diff --git a/lib/compat.php b/lib/compat.php
@@ -44,6 +44,20 @@ 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.
  *

diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -91,3 +91,4 @@ export { default as WritingFlow } from './writing-flow';
 
 export { default as BlockEditorProvider } from './provider';
 export { default as useSimulatedMediaQuery } from './use-simulated-media-query';
+export { default as __experimentalUseEditorFeature } from './use-editor-feature';
diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js
@@ -8,17 +8,19 @@ import { ZERO } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
+import useEditorFeature from '../use-editor-feature';
 import {
 	BASE_DEFAULT_VALUE,
 	RESET_VALUE,
 	STEP,
-	useIsLineHeightControlsDisabled,
 	isLineHeightDefined,
 } from './utils';
 
 export default function LineHeightControl( { value: lineHeight, onChange } ) {
 	// Don't render the controls if disabled by editor settings
-	const isDisabled = useIsLineHeightControlsDisabled();
+	const isDisabled = useEditorFeature(
+		'__experimentalDisableCustomLineHeight'
+	);
 	if ( isDisabled ) {
 		return null;
 	}

diff --git a/packages/block-editor/src/components/line-height-control/utils.js b/packages/block-editor/src/components/line-height-control/utils.js
@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-
 export const BASE_DEFAULT_VALUE = 1.5;
 export const STEP = 0.1;
 /**
@@ -17,21 +12,6 @@ export const STEP = 0.1;
  */
 export const RESET_VALUE = '';
 
-/**
- * Retrieves whether custom lineHeight controls should be disabled from editor settings.
- *
- * @return {boolean} Whether lineHeight controls should be disabled.
- */
-export function useIsLineHeightControlsDisabled() {
-	const isDisabled = useSelect( ( select ) => {
-		const { getSettings } = select( 'core/block-editor' );
-
-		return !! getSettings().__experimentalDisableCustomLineHeight;
-	}, [] );
-
-	return isDisabled;
-}
-
 /**
  * Determines if the lineHeight attribute has been properly defined.
  *

diff --git a/packages/block-editor/src/components/unit-control/index.js b/packages/block-editor/src/components/unit-control/index.js
@@ -2,12 +2,16 @@
  * WordPress dependencies
  */
 import { __experimentalUnitControl as BaseUnitControl } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import useEditorFeature from '../use-editor-feature';
 
 const { __defaultUnits } = BaseUnitControl;
 
 export default function UnitControl( { units: unitsProp, ...props } ) {
-	const settings = useCustomUnitsSettings();
+	const settings = useEditorFeature( '__experimentalDisableCustomUnits' );
 	const isDisabled = !! settings;
 
 	// Adjust units based on add_theme_support( 'experimental-custom-units' );
@@ -34,18 +38,6 @@ export default function UnitControl( { units: unitsProp, ...props } ) {
 // Hoisting statics from the BaseUnitControl
 UnitControl.__defaultUnits = __defaultUnits;
 
-/**
- * Hook that retrieves the 'experimental-custom-units' setting from add_theme_support()
- */
-function useCustomUnitsSettings() {
-	const settings = useSelect( ( select ) => {
-		const { getSettings } = select( 'core/block-editor' );
-		return getSettings().__experimentalDisableCustomUnits;
-	}, [] );
-
-	return settings;
-}
-
 /**
  * Filters available units based on values defined by settings.
  *

diff --git a/packages/block-editor/src/components/use-editor-feature/index.js b/packages/block-editor/src/components/use-editor-feature/index.js
@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Hook that retrieves the setting for the given editor feature.
+ *
+ * @param {string} featureName The name of the feature.
+ *
+ * @return {any} Returns the value defined for the setting.
+ */
+export default function useEditorFeature( featureName ) {
+	const setting = useSelect(
+		( select ) => {
+			const { getSettings } = select( 'core/block-editor' );
+
+			return getSettings()[ featureName ];
+		},
+		[ featureName ]
+	);
+
+	return setting;
+}
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
@@ -15,6 +15,7 @@ import {
 	RichText,
 	__experimentalBlock as Block,
 	getFontSize,
+	__experimentalUseEditorFeature as useEditorFeature,
 } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
@@ -55,9 +56,21 @@ function ParagraphRTLToolbar( { direction, setDirection } ) {
 	);
 }
 
-function useDropCapMinimumHeight( isDropCap, deps ) {
+function useDropCap( isDropCap, fontSize, styleFontSize ) {
+	const isDisabled = useEditorFeature( '__experimentalDisableDropCap' );
+
 	const [ minimumHeight, setMinimumHeight ] = useState();
+
+	const { fontSizes } = useSelect( ( select ) =>
+		select( 'core/block-editor' ).getSettings()
+	);
+
+	const fontSizeObject = getFontSize( fontSizes, fontSize, styleFontSize );
 	useEffect( () => {
+		if ( isDisabled ) {
+			return;
+		}
+
 		const element = querySelector( PARAGRAPH_DROP_CAP_SELECTOR );
 		if ( isDropCap && element ) {
 			setMinimumHeight(
@@ -66,8 +79,15 @@ function useDropCapMinimumHeight( isDropCap, deps ) {
 		} else if ( minimumHeight ) {
 			setMinimumHeight( undefined );
 		}
-	}, [ isDropCap, minimumHeight, setMinimumHeight, ...deps ] );
-	return minimumHeight;
+	}, [
+		isDisabled,
+		isDropCap,
+		minimumHeight,
+		setMinimumHeight,
+		fontSizeObject.size,
+	] );
+
+	return [ ! isDisabled, minimumHeight ];
 }
 
 function ParagraphBlock( {
@@ -85,14 +105,12 @@ function ParagraphBlock( {
 		fontSize,
 		style,
 	} = attributes;
-	const { fontSizes } = useSelect( ( select ) =>
-		select( 'core/block-editor' ).getSettings()
-	);
 	const ref = useRef();
-	const fontSizeObject = getFontSize( fontSizes, fontSize, style?.fontSize );
-	const dropCapMinimumHeight = useDropCapMinimumHeight( dropCap, [
-		fontSizeObject.size,
-	] );
+	const [ isDropCapEnabled, dropCapMinimumHeight ] = useDropCap(
+		dropCap,
+		fontSize,
+		style?.fontSize
+	);
 
 	const styles = {
 		direction,
@@ -116,20 +134,24 @@ function ParagraphBlock( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Text settings' ) }>
-					<ToggleControl
-						label={ __( 'Drop cap' ) }
-						checked={ !! dropCap }
-						onChange={ () =>
-							setAttributes( { dropCap: ! dropCap } )
-						}
-						help={
-							dropCap
-								? __( 'Showing large initial letter.' )
-								: __( 'Toggle to show a large initial letter.' )
-						}
-					/>
-				</PanelBody>
+				{ isDropCapEnabled && (
+					<PanelBody title={ __( 'Text settings' ) }>
+						<ToggleControl
+							label={ __( 'Drop cap' ) }
+							checked={ !! dropCap }
+							onChange={ () =>
+								setAttributes( { dropCap: ! dropCap } )
+							}
+							help={
+								dropCap
+									? __( 'Showing large initial letter.' )
+									: __(
+											'Toggle to show a large initial letter.'
+									  )
+							}
+						/>
+					</PanelBody>
+				) }
 			</InspectorControls>
 			<RichText
 				ref={ ref }

diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
@@ -99,9 +99,19 @@ class EditorProvider extends Component {
 	) {
 		return {
 			...pick( settings, [
+				'__experimentalBlockDirectory',
+				'__experimentalBlockPatterns',
+				'__experimentalDisableCustomUnits',
+				'__experimentalDisableCustomLineHeight',
+				'__experimentalDisableDropCap',
+				'__experimentalEnableLegacyWidgetBlock',
+				'__experimentalEnableFullSiteEditing',
+				'__experimentalEnableFullSiteEditingDemo',
+				'__experimentalGlobalStylesUserEntityId',
+				'__experimentalGlobalStylesBase',
+				'__experimentalPreferredStyleVariations',
 				'alignWide',
 				'allowedBlockTypes',
-				'__experimentalPreferredStyleVariations',
 				'availableLegacyWidgets',
 				'bodyPlaceholder',
 				'codeEditingEnabled',
@@ -111,27 +121,18 @@ class EditorProvider extends Component {
 				'disableCustomGradients',
 				'focusMode',
 				'fontSizes',
+				'gradients',
 				'hasFixedToolbar',
 				'hasPermissionsToManageWidgets',
 				'imageSizes',
 				'imageDimensions',
 				'isRTL',
 				'maxWidth',
+				'onUpdateDefaultBlockStyles',
 				'styles',
 				'template',
 				'templateLock',
 				'titlePlaceholder',
-				'onUpdateDefaultBlockStyles',
-				'__experimentalDisableCustomUnits',
-				'__experimentalEnableLegacyWidgetBlock',
-				'__experimentalBlockDirectory',
-				'__experimentalEnableFullSiteEditing',
-				'__experimentalEnableFullSiteEditingDemo',
-				'__experimentalGlobalStylesUserEntityId',
-				'__experimentalGlobalStylesBase',
-				'__experimentalDisableCustomLineHeight',
-				'__experimentalBlockPatterns',
-				'gradients',
 			] ),
 			mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
 			__experimentalReusableBlocks: reusableBlocks,
Original file line number	Diff line number	Diff line change
Expand Up		@@ -91,3 +91,4 @@ export { default as WritingFlow } from './writing-flow';

		export { default as BlockEditorProvider } from './provider';
		export { default as useSimulatedMediaQuery } from './use-simulated-media-query';
		export { default as __experimentalUseEditorFeature } from './use-editor-feature';