diff --git a/packages/block-editor/src/components/off-canvas-editor/appender.js b/packages/block-editor/src/components/off-canvas-editor/appender.js index f4dccc0afee3ab..7079500e66149f 100644 --- a/packages/block-editor/src/components/off-canvas-editor/appender.js +++ b/packages/block-editor/src/components/off-canvas-editor/appender.js @@ -2,8 +2,9 @@ * WordPress dependencies */ import { useInstanceId } from '@wordpress/compose'; +import { speak } from '@wordpress/a11y'; import { useSelect } from '@wordpress/data'; -import { forwardRef } from '@wordpress/element'; +import { forwardRef, useState, useEffect } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; /** @@ -15,6 +16,8 @@ import Inserter from '../inserter'; export const Appender = forwardRef( ( { nestingLevel, blockCount, ...props }, ref ) => { + const [ insertedBlock, setInsertedBlock ] = useState( null ); + const instanceId = useInstanceId( Appender ); const { hideInserter, clientId } = useSelect( ( select ) => { const { @@ -38,6 +41,26 @@ export const Appender = forwardRef( context: 'list-view', } ); + const insertedBlockTitle = useBlockDisplayTitle( { + clientId: insertedBlock?.clientId, + context: 'list-view', + } ); + + useEffect( () => { + if ( ! insertedBlockTitle?.length ) { + return; + } + + speak( + sprintf( + // translators: %s: name of block being inserted (i.e. Paragraph, Image, Group etc) + __( '%s block inserted' ), + insertedBlockTitle + ), + 'assertive' + ); + }, [ insertedBlockTitle ] ); + if ( hideInserter ) { return null; } @@ -63,6 +86,11 @@ export const Appender = forwardRef( __experimentalIsQuick { ...props } toggleProps={ { 'aria-describedby': descriptionId } } + onSelectOrClose={ ( maybeInsertedBlock ) => { + if ( maybeInsertedBlock?.clientId ) { + setInsertedBlock( maybeInsertedBlock ); + } + } } />