Merge branch 'trunk' into button-focusable-disabled

packages/block-editor/src/components/block-quick-navigation/index.js

@@ -10,25 +10,24 @@ import {
 	FlexBlock,
 	FlexItem,
 } from '@wordpress/components';
-import {
-	__experimentalGetBlockLabel,
-	store as blocksStore,
-} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 import BlockIcon from '../block-icon';
+import useBlockDisplayInformation from '../use-block-display-information';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
 
-export default function BlockQuickNavigation( { clientIds } ) {
+export default function BlockQuickNavigation( { clientIds, onSelect } ) {
 	if ( ! clientIds.length ) {
 		return null;
 	}
 	return (
 		<VStack spacing={ 1 }>
 			{ clientIds.map( ( clientId ) => (
 				<BlockQuickNavigationItem
+					onSelect={ onSelect }
 					key={ clientId }
 					clientId={ clientId }
 				/>
@@ -37,29 +36,18 @@ export default function BlockQuickNavigation( { clientIds } ) {
 	);
 }
 
-function BlockQuickNavigationItem( { clientId } ) {
-	const { name, icon, isSelected } = useSelect(
+function BlockQuickNavigationItem( { clientId, onSelect } ) {
+	const blockInformation = useBlockDisplayInformation( clientId );
+	const blockTitle = useBlockDisplayTitle( {
+		clientId,
+		context: 'list-view',
+	} );
+	const { isSelected } = useSelect(
 		( select ) => {
-			const {
-				getBlockName,
-				getBlockAttributes,
-				isBlockSelected,
-				hasSelectedInnerBlock,
-			} = select( blockEditorStore );
-			const { getBlockType } = select( blocksStore );
-
-			const blockType = getBlockType( getBlockName( clientId ) );
-			const attributes = getBlockAttributes( clientId );
+			const { isBlockSelected, hasSelectedInnerBlock } =
+				select( blockEditorStore );
 
 			return {
-				name:
-					blockType &&
-					__experimentalGetBlockLabel(
-						blockType,
-						attributes,
-						'list-view'
-					),
-				icon: blockType?.icon,
 				isSelected:
 					isBlockSelected( clientId ) ||
 					hasSelectedInnerBlock( clientId, /* deep: */ true ),
@@ -72,14 +60,19 @@ function BlockQuickNavigationItem( { clientId } ) {
 	return (
 		<Button
 			isPressed={ isSelected }
-			onClick={ () => selectBlock( clientId ) }
+			onClick={ async () => {
+				await selectBlock( clientId );
+				if ( onSelect ) {
+					onSelect( clientId );
+				}
+			} }
 		>
 			<Flex>
 				<FlexItem>
-					<BlockIcon icon={ icon } />
+					<BlockIcon icon={ blockInformation?.icon } />
 				</FlexItem>
 				<FlexBlock style={ { textAlign: 'left' } }>
-					<Truncate>{ name }</Truncate>
+					<Truncate>{ blockTitle }</Truncate>
 				</FlexBlock>
 			</Flex>
 		</Button>

packages/block-library/src/table/edit.js

@@ -16,7 +16,6 @@ import {
 	useBlockProps,
 	__experimentalUseColorProps as useColorProps,
 	__experimentalUseBorderProps as useBorderProps,
-	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import {
@@ -41,7 +40,6 @@ import {
 	tableRowDelete,
 	table,
 } from '@wordpress/icons';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -57,6 +55,7 @@ import {
 	toggleSection,
 	isEmptyTableSection,
 } from './state';
+import { Caption } from '../utils/caption';
 
 const ALIGNMENT_CONTROLS = [
 	{
@@ -98,7 +97,7 @@ function TableEdit( {
 	insertBlocksAfter,
 	isSelected,
 } ) {
-	const { hasFixedLayout, caption, head, foot } = attributes;
+	const { hasFixedLayout, head, foot } = attributes;
 	const [ initialRowCount, setInitialRowCount ] = useState( 2 );
 	const [ initialColumnCount, setInitialColumnCount ] = useState( 2 );
 	const [ selectedCell, setSelectedCell ] = useState();
@@ -523,27 +522,7 @@ function TableEdit( {
 					{ renderedSections }
 				</table>
 			) }
-			{ ! isEmpty && (
-				<RichText
-					identifier="caption"
-					tagName="figcaption"
-					className={ __experimentalGetElementClassName( 'caption' ) }
-					aria-label={ __( 'Table caption text' ) }
-					placeholder={ __( 'Add caption' ) }
-					value={ caption }
-					onChange={ ( value ) =>
-						setAttributes( { caption: value } )
-					}
-					// Deselect the selected table cell when the caption is focused.
-					onFocus={ () => setSelectedCell() }
-					__unstableOnSplitAtEnd={ () =>
-						insertBlocksAfter(
-							createBlock( getDefaultBlockName() )
-						)
-					}
-				/>
-			) }
-			{ isEmpty && (
+			{ isEmpty ? (
 				<Placeholder
 					label={ __( 'Table' ) }
 					icon={ <BlockIcon icon={ icon } showColors /> }
@@ -582,6 +561,14 @@ function TableEdit( {
 						</Button>
 					</form>
 				</Placeholder>
+			) : (
+				<Caption
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSelected={ isSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					label={ __( 'Table caption text' ) }
+				/>
 			) }
 		</figure>
 	);

packages/components/CHANGELOG.md

@@ -13,6 +13,7 @@
 
 -   `ToolbarButton`: Deprecate `isDisabled` prop and merge with `disabled` ([#63101](https://github.com/WordPress/gutenberg/pull/63101)).
 -   `Button`: Stabilize `__experimentalIsFocusable` prop as `accessibleWhenDisabled` ([#62282](https://github.com/WordPress/gutenberg/pull/62282)).
+-   `ToolbarButton`: Always keep focusable when disabled ([#63102](https://github.com/WordPress/gutenberg/pull/63102)).
 
 ### Internal
 

packages/components/src/toolbar/toolbar-button/index.tsx

@@ -16,7 +16,7 @@ import Button from '../../button';
 import ToolbarItem from '../toolbar-item';
 import ToolbarContext from '../toolbar-context';
 import ToolbarButtonContainer from './toolbar-button-container';
-import type { ToolbarButtonProps } from './types';
+import type { ToolbarButtonDeprecatedProps, ToolbarButtonProps } from './types';
 import type { WordPressComponentProps } from '../../context';
 
 function useDeprecatedProps( {
@@ -30,7 +30,11 @@ function useDeprecatedProps( {
 }
 
 function UnforwardedToolbarButton(
-	props: WordPressComponentProps< ToolbarButtonProps, typeof Button, false >,
+	props: Omit<
+		WordPressComponentProps< ToolbarButtonProps, typeof Button, false >,
+		'__experimentalIsFocusable' // ToolbarButton will always be focusable even when disabled.
+	> &
+		ToolbarButtonDeprecatedProps,
 	ref: ForwardedRef< any >
 ) {
 	const {

packages/components/src/toolbar/toolbar-button/types.ts

@@ -37,6 +37,16 @@ export type ToolbarButtonProps = {
 	title?: string;
 };
 
+export type ToolbarButtonDeprecatedProps = {
+	/**
+	 * Whether to keep the button focusable when disabled.
+	 *
+	 * @deprecated ToolbarButton will always be focusable even when disabled.
+	 * @ignore
+	 */
+	__experimentalIsFocusable?: boolean;
+};
+
 export type ToolbarButtonContainerProps = {
 	/**
 	 * Children to be rendered inside the button container.

packages/components/src/toolbar/toolbar-item/index.tsx

@@ -50,6 +50,7 @@ function ToolbarItem(
 
 	return (
 		<Ariakit.ToolbarItem
+			accessibleWhenDisabled
 			{ ...allProps }
 			store={ accessibleToolbarStore }
 			render={ render }

packages/editor/src/components/post-actions/actions.js

@@ -276,7 +276,7 @@ const permanentlyDeletePostAction = {
 	isEligible( { status } ) {
 		return status === 'trash';
 	},
-	async callback( posts, { registry } ) {
+	async callback( posts, { registry, onActionPerformed } ) {
 		const { createSuccessNotice, createErrorNotice } =
 			registry.dispatch( noticesStore );
 		const { deleteEntityRecord } = registry.dispatch( coreStore );
@@ -307,6 +307,7 @@ const permanentlyDeletePostAction = {
 				type: 'snackbar',
 				id: 'permanently-delete-post-action',
 			} );
+			onActionPerformed?.( posts );
 		} else {
 			// If there was at lease one failure.
 			let errorMessage;

packages/editor/src/components/sidebar/index.js

@@ -112,9 +112,7 @@ const SidebarContent = ( {
 				<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
 					<PostSummary onActionPerformed={ onActionPerformed } />
 					<PluginDocumentSettingPanel.Slot />
-					{ renderingMode !== 'post-only' && (
-						<TemplateContentPanel />
-					) }
+					<TemplateContentPanel renderingMode={ renderingMode } />
 					<TemplatePartContentPanel />
 					<PostTransformPanel />
 					<PostTaxonomiesPanel />

packages/editor/src/components/sidebar/post-summary.js

@@ -28,7 +28,6 @@ import BlogTitle from '../blog-title';
 import PostsPerPage from '../posts-per-page';
 import SiteDiscussion from '../site-discussion';
 import { store as editorStore } from '../../store';
-import TemplateAreas from '../template-areas';
 import { PrivatePostLastRevision } from '../post-last-revision';
 
 /**
@@ -84,7 +83,6 @@ export default function PostSummary( { onActionPerformed } ) {
 										<SiteDiscussion />
 										<PostFormatPanel />
 									</VStack>
-									<TemplateAreas />
 									{ fills }
 								</VStack>
 							) }