diff --git a/lib/compat.php b/lib/compat.php index 96c07375dda41e..b9ca5927d5b9c5 100644 --- 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'] = get_theme_support( 'disable-drop-cap' ); + 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 index 158bdb77295b03..a97104b5b438bd 100644 --- 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 index cb0f8ebed1f876..545b73e3e596b4 100644 --- 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 index 351a35a66a6a0a..a232394540d2f6 100644 --- 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 index e5a1fb3e902473..eb1bf24eb44fee 100644 --- 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 new file mode 100644 index 00000000000000..6270498b0ebde4 --- /dev/null +++ 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 index bcae630f0e5ac9..7a942e7301110c 100644 --- 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( { /> - - - setAttributes( { dropCap: ! dropCap } ) - } - help={ - dropCap - ? __( 'Showing large initial letter.' ) - : __( 'Toggle to show a large initial letter.' ) - } - /> - + { isDropCapEnabled && ( + + + setAttributes( { dropCap: ! dropCap } ) + } + help={ + dropCap + ? __( 'Showing large initial letter.' ) + : __( + 'Toggle to show a large initial letter.' + ) + } + /> + + ) }