diff --git a/packages/block-editor/src/components/inserter/category-tabs/index.js b/packages/block-editor/src/components/inserter/category-tabs/index.js index 6d8f5fcbca1334..bb35e716aae36f 100644 --- a/packages/block-editor/src/components/inserter/category-tabs/index.js +++ b/packages/block-editor/src/components/inserter/category-tabs/index.js @@ -6,6 +6,7 @@ import { privateApis as componentsPrivateApis, __unstableMotion as motion, } from '@wordpress/components'; +import { useState, useEffect } from '@wordpress/element'; /** * Internal dependencies @@ -31,11 +32,23 @@ function CategoryTabs( { const previousSelectedCategory = usePrevious( selectedCategory ); + const selectedTabId = selectedCategory ? selectedCategory.name : null; + const [ activeTabId, setActiveId ] = useState(); + const firstTabId = categories?.[ 0 ]?.name; + useEffect( () => { + // If there is no active tab, make the first tab the active tab, so that + // when focus is moved to the tablist, the first tab will be focused + // despite not being selected + if ( selectedTabId === null && ! activeTabId && firstTabId ) { + setActiveId( firstTabId ); + } + }, [ selectedTabId, activeTabId, firstTabId, setActiveId ] ); + return ( { // Pass the full category object @@ -45,6 +58,8 @@ function CategoryTabs( { ) ); } } + activeTabId={ activeTabId } + onActiveTab={ setActiveId } > { categories.map( ( category ) => (