From a47f7af69a4262bbfc35f4ee9650f20836401aa5 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 22 Jun 2020 13:26:04 +0100 Subject: [PATCH 1/2] hide the most used blocks by default and add an option to enable it --- .../src/components/inserter/block-list.js | 22 ++++++++++-------- .../src/components/inserter/library.js | 2 ++ .../src/components/inserter/menu.js | 2 ++ .../edit-post/src/components/layout/index.js | 7 ++++++ .../src/components/options-modal/index.js | 7 ++++++ .../options-modal/options/enable-feature.js | 23 +++++++++++++++++++ .../components/options-modal/options/index.js | 1 + 7 files changed, 55 insertions(+), 9 deletions(-) create mode 100644 packages/edit-post/src/components/options-modal/options/enable-feature.js diff --git a/packages/block-editor/src/components/inserter/block-list.js b/packages/block-editor/src/components/inserter/block-list.js index 5477c4a42d8e8f..d1512e11e6571d 100644 --- a/packages/block-editor/src/components/inserter/block-list.js +++ b/packages/block-editor/src/components/inserter/block-list.js @@ -35,6 +35,7 @@ export function InserterBlockList( { onHover, filterValue, debouncedSpeak, + showMostUsedBlocks, } ) { const [ items, categories, collections, onSelectItem ] = useBlockTypesState( rootClientId, @@ -130,15 +131,18 @@ export function InserterBlockList( { ) } - { ! hasChildItems && !! suggestedItems.length && ! filterValue && ( - - - - ) } + { showMostUsedBlocks && + ! hasChildItems && + !! suggestedItems.length && + ! filterValue && ( + + + + ) } { ! hasChildItems && map( categories, ( category ) => { diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js index a5e7094f54d4a7..e80c9c920c21e7 100644 --- a/packages/block-editor/src/components/inserter/library.js +++ b/packages/block-editor/src/components/inserter/library.js @@ -18,6 +18,7 @@ function InserterLibrary( { clientId, isAppender, showInserterHelpPanel, + showMostUsedBlocks = false, __experimentalSelectBlockOnInsert: selectBlockOnInsert, onSelect = noop, } ) { @@ -39,6 +40,7 @@ function InserterLibrary( { clientId={ clientId } isAppender={ isAppender } showInserterHelpPanel={ showInserterHelpPanel } + showMostUsedBlocks={ showMostUsedBlocks } __experimentalSelectBlockOnInsert={ selectBlockOnInsert } /> ); diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index bb7fb2e0257cf0..c8f55eaadaabef 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -31,6 +31,7 @@ function InserterMenu( { __experimentalSelectBlockOnInsert, onSelect, showInserterHelpPanel, + showMostUsedBlocks, } ) { const [ filterValue, setFilterValue ] = useState( '' ); const [ hoveredItem, setHoveredItem ] = useState( null ); @@ -86,6 +87,7 @@ function InserterMenu( { onInsert={ onInsert } onHover={ onHover } filterValue={ filterValue } + showMostUsedBlocks={ showMostUsedBlocks } /> { showInserterHelpPanel && ( diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index c355fb832c48be..13cd1009ae1676 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -72,6 +72,7 @@ function Layout() { previousShortcut, nextShortcut, hasBlockSelected, + showMostUsedBlocks, } = useSelect( ( select ) => { return { hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive( @@ -85,6 +86,9 @@ function Layout() { isFullscreenActive: select( 'core/edit-post' ).isFeatureActive( 'fullscreenMode' ), + showMostUsedBlocks: select( 'core/edit-post' ).isFeatureActive( + 'mostUsedBlocks' + ), mode: select( 'core/edit-post' ).getEditorMode(), isRichEditingEnabled: select( 'core/editor' ).getEditorSettings() .richEditingEnabled, @@ -176,6 +180,9 @@ function Layout() {
{ if ( isMobileViewport ) { diff --git a/packages/edit-post/src/components/options-modal/index.js b/packages/edit-post/src/components/options-modal/index.js index a4fa06cc512fca..8a3fe6815896ae 100644 --- a/packages/edit-post/src/components/options-modal/index.js +++ b/packages/edit-post/src/components/options-modal/index.js @@ -26,6 +26,7 @@ import { EnablePluginDocumentSettingPanelOption, EnablePublishSidebarOption, EnablePanelOption, + EnableFeature, } from './options'; import MetaBoxesSection from './meta-boxes-section'; @@ -47,6 +48,12 @@ export function OptionsModal( { isModalActive, isViewable, closeModal } ) { +
diff --git a/packages/edit-post/src/components/options-modal/options/enable-feature.js b/packages/edit-post/src/components/options-modal/options/enable-feature.js new file mode 100644 index 00000000000000..4868b2f09a7b72 --- /dev/null +++ b/packages/edit-post/src/components/options-modal/options/enable-feature.js @@ -0,0 +1,23 @@ +/** + * WordPress dependencies + */ +import { compose } from '@wordpress/compose'; +import { withSelect, withDispatch } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import BaseOption from './base'; + +export default compose( + withSelect( ( select, { featureName } ) => { + const { isFeatureActive } = select( 'core/edit-post' ); + return { + isChecked: isFeatureActive( featureName ), + }; + } ), + withDispatch( ( dispatch, { featureName } ) => ( { + onChange: () => + dispatch( 'core/edit-post' ).toggleFeature( featureName ), + } ) ) +)( BaseOption ); diff --git a/packages/edit-post/src/components/options-modal/options/index.js b/packages/edit-post/src/components/options-modal/options/index.js index 6ba7b4c54c7da9..b5cb1c6c4fe1b7 100644 --- a/packages/edit-post/src/components/options-modal/options/index.js +++ b/packages/edit-post/src/components/options-modal/options/index.js @@ -2,3 +2,4 @@ export { default as EnableCustomFieldsOption } from './enable-custom-fields'; export { default as EnablePanelOption } from './enable-panel'; export { default as EnablePluginDocumentSettingPanelOption } from './enable-plugin-document-setting-panel'; export { default as EnablePublishSidebarOption } from './enable-publish-sidebar'; +export { default as EnableFeature } from './enable-feature'; From 45a350b76d653bf6ec0642fe7d198ffe37bec0fd Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 22 Jun 2020 14:15:11 +0100 Subject: [PATCH 2/2] Fix unit tests --- .../src/components/inserter/test/block-list.js | 14 +++++++------- .../options-modal/test/__snapshots__/index.js.snap | 4 ++++ 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/inserter/test/block-list.js b/packages/block-editor/src/components/inserter/test/block-list.js index 2e69345d7b7f81..9d4f8134f6c6e1 100644 --- a/packages/block-editor/src/components/inserter/test/block-list.js +++ b/packages/block-editor/src/components/inserter/test/block-list.js @@ -102,10 +102,10 @@ describe( 'InserterMenu', () => { const { container } = initializeAllClosedMenuState(); const embedTabContent = container.querySelectorAll( '.block-editor-inserter__panel-content' - )[ 4 ]; + )[ 3 ]; const embedTabTitle = container.querySelectorAll( '.block-editor-inserter__panel-title' - )[ 4 ]; + )[ 3 ]; const blocks = embedTabContent.querySelectorAll( '.block-editor-block-types-list__item-title' ); @@ -122,10 +122,10 @@ describe( 'InserterMenu', () => { const { container } = initializeAllClosedMenuState(); const reusableTabContent = container.querySelectorAll( '.block-editor-inserter__panel-content' - )[ 6 ]; + )[ 5 ]; const reusableTabTitle = container.querySelectorAll( '.block-editor-inserter__panel-title' - )[ 6 ]; + )[ 5 ]; const blocks = reusableTabContent.querySelectorAll( '.block-editor-block-types-list__item-title' ); @@ -141,10 +141,10 @@ describe( 'InserterMenu', () => { const { container } = initializeAllClosedMenuState(); const commonTabContent = container.querySelectorAll( '.block-editor-inserter__panel-content' - )[ 1 ]; + )[ 0 ]; const commonTabTitle = container.querySelectorAll( '.block-editor-inserter__panel-title' - )[ 1 ]; + )[ 0 ]; const blocks = commonTabContent.querySelectorAll( '.block-editor-block-types-list__item-title' ); @@ -176,7 +176,7 @@ describe( 'InserterMenu', () => { const { container } = initializeAllClosedMenuState(); const layoutTabContent = container.querySelectorAll( '.block-editor-inserter__panel-content' - )[ 2 ]; + )[ 1 ]; const disabledBlocks = layoutTabContent.querySelectorAll( '.block-editor-block-types-list__item[disabled], .block-editor-block-types-list__item[aria-disabled="true"]' ); diff --git a/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap index 438c185faca3ef..3523d0e3e68bdf 100644 --- a/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap @@ -12,6 +12,10 @@ exports[`OptionsModal should match snapshot when the modal is active 1`] = ` +