Skip to content

Commit

Permalink
Open the last inspector tab used when selecting a block
Browse files Browse the repository at this point in the history
  • Loading branch information
yscik committed Oct 28, 2023
1 parent ae7df52 commit 6bf5fbd
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -11,26 +11,33 @@ import SettingsTab from './settings-tab';
import StylesTab from './styles-tab';
import InspectorControls from '../inspector-controls';
import useIsListViewTabDisabled from './use-is-list-view-tab-disabled';
import useLastSelectedInspectorControlTab from './use-last-selected-inspector-control-tab';

export default function InspectorControlsTabs( {
blockName,
clientId,
hasBlockStyles,
tabs,
} ) {
const [ lastSelectedTab, setLastSelectedTab ] =
useLastSelectedInspectorControlTab( tabs );

// The tabs panel will mount before fills are rendered to the list view
// slot. This means the list view tab isn't initially included in the
// available tabs so the panel defaults selection to the settings tab
// which at the time is the first tab. This check allows blocks known to
// include the list view tab to set it as the tab selected by default.
const initialTabName = ! useIsListViewTabDisabled( blockName )
? TAB_LIST_VIEW.name
: undefined;
const hasListTab = ! useIsListViewTabDisabled( blockName );

const initialTabName =
lastSelectedTab ?? ( hasListTab ? TAB_LIST_VIEW.name : undefined );

return (
<TabPanel
className="block-editor-block-inspector__tabs"
tabs={ tabs }
initialTabName={ initialTabName }
onSelect={ setLastSelectedTab }
key={ clientId }
>
{ ( tab ) => {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/**
* WordPress dependencies
*/
import { useDispatch, useSelect } from '@wordpress/data';
import { useCallback } from '@wordpress/element';

/**
* Internal dependencies
*/
import { store as blockEditorStore } from '../../store';
import { TAB_LIST_VIEW } from './utils';

const SETTINGS_KEY = 'lastSelectedInspectorControlTab';

export default function useLastSelectedInspectorControlTab( tabs ) {
const lastTab = useSelect( ( select ) => {
const settings = select( blockEditorStore ).getSettings();
return settings[ SETTINGS_KEY ];
} );

const { updateSettings } = useDispatch( blockEditorStore );

const setLastSelectedTab = useCallback(
( tabName ) => {
if ( TAB_LIST_VIEW.name === tabName ) {
return;
}
updateSettings( {
[ SETTINGS_KEY ]: tabName,
} );
},
[ updateSettings ]
);

const selectedBlockHasTab = !! tabs?.find(
( { name } ) => lastTab === name
);

return [ selectedBlockHasTab ? lastTab : undefined, setLastSelectedTab ];
}

0 comments on commit 6bf5fbd

Please sign in to comment.