From 109ddbca75adacb215f9991d306d57176c9517f5 Mon Sep 17 00:00:00 2001 From: Kallyan Singha Date: Wed, 29 Jan 2025 03:22:00 +0530 Subject: [PATCH] Improvement: added a improved and clean approach for closing inserter panel functionality on mobile aditionally added check for large screen to keep the inserter panel open --- .../src/components/block-types-list/index.js | 2 -- .../components/inserter-list-item/index.js | 20 +++++++++++-- .../components/inserter/block-types-tab.js | 8 +---- .../src/components/inserter/menu.js | 29 ++++++++++++------- 4 files changed, 37 insertions(+), 22 deletions(-) diff --git a/packages/block-editor/src/components/block-types-list/index.js b/packages/block-editor/src/components/block-types-list/index.js index 01a845abcb7188..0be6f82a653d18 100644 --- a/packages/block-editor/src/components/block-types-list/index.js +++ b/packages/block-editor/src/components/block-types-list/index.js @@ -22,7 +22,6 @@ function BlockTypesList( { items = [], onSelect, onHover = () => {}, - onClose, children, label, isDraggable = true, @@ -42,7 +41,6 @@ function BlockTypesList( { ) } onSelect={ onSelect } onHover={ onHover } - onClose={ onClose } isDraggable={ isDraggable && ! item.isDisabled } isFirst={ i === 0 && j === 0 } rowId={ `${ listId }-${ i }` } diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js index 57a78f0239e989..f3fc2540cf1c07 100644 --- a/packages/block-editor/src/components/inserter-list-item/index.js +++ b/packages/block-editor/src/components/inserter-list-item/index.js @@ -15,6 +15,8 @@ import { } from '@wordpress/blocks'; import { __experimentalTruncate as Truncate } from '@wordpress/components'; import { ENTER, isAppleOS } from '@wordpress/keycodes'; +import { useSelect } from '@wordpress/data'; +import { useViewportMatch } from '@wordpress/compose'; /** * Internal dependencies @@ -22,6 +24,8 @@ import { ENTER, isAppleOS } from '@wordpress/keycodes'; import BlockIcon from '../block-icon'; import { InserterListboxItem } from '../inserter-listbox'; import InserterDraggableBlocks from '../inserter-draggable-blocks'; +import { store as blockEditorStore } from '../../store'; +import { unlock } from '../../lock-unlock'; function InserterListItem( { className, @@ -29,7 +33,6 @@ function InserterListItem( { item, onSelect, onHover, - onClose, isDraggable, ...props } ) { @@ -55,6 +58,17 @@ function InserterListItem( { ( isReusableBlock( item ) && item.syncStatus !== 'unsynced' ) || isTemplatePart( item ); + const { setInserterIsOpened } = useSelect( ( select ) => { + const { getSettings } = unlock( select( blockEditorStore ) ); + + return { + setInserterIsOpened: + getSettings().__experimentalSetIsInserterOpened, + }; + }, [] ); + + const isMobileViewport = useViewportMatch( 'medium', '<' ); + return ( { isDraggingRef.current = false; diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js index 0a637f82aca2d1..d37a6ca5694b09 100644 --- a/packages/block-editor/src/components/inserter/block-types-tab.js +++ b/packages/block-editor/src/components/inserter/block-types-tab.js @@ -33,7 +33,6 @@ export function BlockTypesTabPanel( { categories, onSelectItem, onHover, - onClose, showMostUsedBlocks, className, } ) { @@ -96,7 +95,6 @@ export function BlockTypesTabPanel( { items={ suggestedItems } onSelect={ onSelectItem } onHover={ onHover } - onClose={ onClose } label={ _x( 'Most used', 'blocks' ) } /> @@ -119,7 +117,6 @@ export function BlockTypesTabPanel( { items={ categoryItems } onSelect={ onSelectItem } onHover={ onHover } - onClose={ onClose } label={ category.title } /> @@ -135,7 +132,6 @@ export function BlockTypesTabPanel( { items={ uncategorizedItems } onSelect={ onSelectItem } onHover={ onHover } - onClose={ onClose } label={ __( 'Uncategorized' ) } /> @@ -158,7 +154,6 @@ export function BlockTypesTabPanel( { items={ collectionItems } onSelect={ onSelectItem } onHover={ onHover } - onClose={ onClose } label={ collection.title } /> @@ -170,7 +165,7 @@ export function BlockTypesTabPanel( { } export function BlockTypesTab( - { rootClientId, onInsert, onHover, onClose, showMostUsedBlocks }, + { rootClientId, onInsert, onHover, showMostUsedBlocks }, ref ) { const [ items, categories, collections, onSelectItem ] = useBlockTypesState( @@ -209,7 +204,6 @@ export function BlockTypesTab( collections={ collections } onSelectItem={ onSelectItem } onHover={ onHover } - onClose={ onClose } showMostUsedBlocks={ showMostUsedBlocks } className="block-editor-inserter__insertable-blocks-at-selection" /> diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index f092481fafe291..c21d81aa5006b1 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -54,16 +54,19 @@ function InserterMenu( }, ref ) { - const { isZoomOutMode, hasSectionRootClientId } = useSelect( ( select ) => { - const { isZoomOut, getSectionRootClientId } = unlock( - select( blockEditorStore ) - ); + const { isZoomOutMode, hasSectionRootClientId, setInserterIsOpened } = + useSelect( ( select ) => { + const { isZoomOut, getSectionRootClientId, getSettings } = unlock( + select( blockEditorStore ) + ); - return { - isZoomOutMode: isZoomOut(), - hasSectionRootClientId: !! getSectionRootClientId(), - }; - }, [] ); + return { + isZoomOutMode: isZoomOut(), + hasSectionRootClientId: !! getSectionRootClientId(), + setInserterIsOpened: + getSettings().__experimentalSetIsInserterOpened, + }; + }, [] ); const [ filterValue, setFilterValue, delayedFilterValue ] = useDebouncedInput( __experimentalFilterValue ); @@ -75,6 +78,7 @@ function InserterMenu( const [ selectedMediaCategory, setSelectedMediaCategory ] = useState( null ); const isLargeViewport = useViewportMatch( 'large' ); + const isMobileViewport = useViewportMatch( 'medium', '<' ); function getInitialTab() { if ( __experimentalInitialTab ) { @@ -114,7 +118,11 @@ function InserterMenu( _rootClientId ); onSelect( blocks ); - onClose(); + + // Checks the mobile viewport and closes the inserter panel + if ( isMobileViewport ) { + setInserterIsOpened( false ); + } // Check for focus loss due to filtering blocks by selected block type window.requestAnimationFrame( () => { @@ -227,7 +235,6 @@ function InserterMenu( ref={ blockTypesTabRef } rootClientId={ destinationRootClientId } onInsert={ onInsert } - onClose={ onClose } onHover={ onHover } showMostUsedBlocks={ showMostUsedBlocks } />