From 7c604e8468d59f2aca2d3ab00e310dbc5f4d8e12 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Tue, 12 May 2020 12:21:08 +0200 Subject: [PATCH 1/2] Block Editor: Integrate theme config with useEditorFeature --- lib/compat.php | 14 ----- lib/editor-features.php | 49 +++++++++++++++++ .../experimental-default-theme.json | 5 ++ lib/global-styles.php | 2 +- lib/load.php | 1 + .../components/use-editor-feature/index.js | 36 +++++++++++-- .../block-library/src/paragraph/block.json | 7 ++- packages/block-library/src/paragraph/edit.js | 2 +- packages/blocks/src/store/selectors.js | 6 ++- packages/blocks/src/store/test/selectors.js | 54 ++++++++++++++++++- .../editor/src/components/provider/index.js | 2 +- 11 files changed, 154 insertions(+), 24 deletions(-) create mode 100644 lib/editor-features.php rename experimental-default-global-styles.json => lib/experimental-default-theme.json (97%) diff --git a/lib/compat.php b/lib/compat.php index 3c29ee9a58b6fd..9b8c33d3efee97 100644 --- a/lib/compat.php +++ b/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. * diff --git a/lib/editor-features.php b/lib/editor-features.php new file mode 100644 index 00000000000000..4f43424e29e1a7 --- /dev/null +++ b/lib/editor-features.php @@ -0,0 +1,49 @@ + { + 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; diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json index 61ba04a7bd549d..4454e09926a216 100644 --- a/packages/block-library/src/paragraph/block.json +++ b/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 + } + } } } diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index f04f0c30e8b566..0b00fa9bc37cc1 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/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(); diff --git a/packages/blocks/src/store/selectors.js b/packages/blocks/src/store/selectors.js index c896128834429d..a0a2d02bdd3838 100644 --- a/packages/blocks/src/store/selectors.js +++ b/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 + ); }; /** diff --git a/packages/blocks/src/store/test/selectors.js b/packages/blocks/src/store/test/selectors.js index 636228f7835acb..daea899178fdf0 100644 --- a/packages/blocks/src/store/test/selectors.js +++ b/packages/blocks/src/store/test/selectors.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { omit } from 'lodash'; +import { keyBy, omit } from 'lodash'; import deepFreeze from 'deep-freeze'; @@ -9,6 +9,7 @@ import deepFreeze from 'deep-freeze'; * Internal dependencies */ import { + getBlockSupport, getChildBlockNames, getDefaultBlockVariation, getGroupingBlockName, @@ -16,6 +17,57 @@ import { } 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 = {}; diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 142d6725a88e8e..074f93fe2ae1ff 100644 --- a/packages/editor/src/components/provider/index.js +++ b/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', From 00eac25eece31974010a94019c933b5f11dfe32a Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Wed, 27 May 2020 07:31:46 +0200 Subject: [PATCH 2/2] Remove the default value param from useEditorFeature --- .../src/components/use-editor-feature/index.js | 8 +++----- packages/block-library/src/paragraph/edit.js | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/use-editor-feature/index.js b/packages/block-editor/src/components/use-editor-feature/index.js index 86c71975e6ed64..d83c0e426ec020 100644 --- a/packages/block-editor/src/components/use-editor-feature/index.js +++ b/packages/block-editor/src/components/use-editor-feature/index.js @@ -18,17 +18,15 @@ import { useBlockEditContext } from '../block-edit'; * It works with nested objects using by finding the value at path. * * @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 ); + * const isEnabled = useEditorFeature( 'typography.dropCap' ); * ``` */ -export default function useEditorFeature( featurePath, defaultValue ) { +export default function useEditorFeature( featurePath ) { const { name: blockName } = useBlockEditContext(); const path = `__experimentalFeatures.${ featurePath }`; @@ -43,7 +41,7 @@ export default function useEditorFeature( featurePath, defaultValue ) { const { getSettings } = select( 'core/block-editor' ); - return get( getSettings(), path, defaultValue ); + return get( getSettings(), path ); }, [ blockName, path ] ); diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index 0b00fa9bc37cc1..2f9f60cd1390b5 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -57,7 +57,7 @@ function ParagraphRTLToolbar( { direction, setDirection } ) { } function useDropCap( isDropCap, fontSize, styleFontSize ) { - const isDisabled = ! useEditorFeature( 'typography.dropCap', false ); + const isDisabled = ! useEditorFeature( 'typography.dropCap' ); const [ minimumHeight, setMinimumHeight ] = useState();