Paragraph: Make 'aria-label' consistent with other blocks (#54687)

* Paragraph: Make 'aria-label' consistent with other blocks

* Update tests

* Try using BC labels in performance tests

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

@@ -155,7 +155,7 @@ function ParagraphBlock( {
 				onRemove={ onRemove }
 				aria-label={
 					content
-						? __( 'Paragraph block' )
+						? __( 'Block: Paragraph' )
 						: __(
 								'Empty block; start writing or type forward slash to choose a block'
 						  )

packages/e2e-tests/specs/editor/various/inserting-blocks.test.js

@@ -249,7 +249,7 @@ describe( 'Inserting blocks', () => {
 		await page.keyboard.type( 'First paragraph' );
 		await insertBlock( 'Image' );
 		const paragraphBlock = await canvas().$(
-			'p[aria-label="Paragraph block"]'
+			'p[aria-label="Block: Paragraph"]'
 		);
 		paragraphBlock.click();
 		await page.evaluate( () => new Promise( window.requestIdleCallback ) );

packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js

@@ -35,7 +35,7 @@ const tabThroughParagraphBlock = async ( paragraphText ) => {
 	await tabThroughBlockToolbar();
 
 	await page.keyboard.press( 'Tab' );
-	await expect( await getActiveLabel() ).toBe( 'Paragraph block' );
+	await expect( await getActiveLabel() ).toBe( 'Block: Paragraph' );
 	await expect(
 		await page.evaluate( () => {
 			const { activeElement } =
@@ -49,7 +49,7 @@ const tabThroughParagraphBlock = async ( paragraphText ) => {
 
 	// Need to shift+tab here to end back in the block. If not, we'll be in the next region and it will only require 4 region jumps instead of 5.
 	await pressKeyWithModifier( 'shift', 'Tab' );
-	await expect( await getActiveLabel() ).toBe( 'Paragraph block' );
+	await expect( await getActiveLabel() ).toBe( 'Block: Paragraph' );
 };
 
 const tabThroughBlockToolbar = async () => {

packages/e2e-tests/specs/editor/various/pattern-blocks.test.js

@@ -136,7 +136,7 @@ describe( 'Pattern blocks', () => {
 		);
 
 		// Make sure the reusable block has loaded properly before attempting to publish the post.
-		await canvas().waitForSelector( 'p[aria-label="Paragraph block"]' );
+		await canvas().waitForSelector( 'p[aria-label="Block: Paragraph"]' );
 
 		await publishPost();
 
@@ -146,8 +146,8 @@ describe( 'Pattern blocks', () => {
 		await page.waitForSelector( closePublishPanelSelector );
 		await page.click( closePublishPanelSelector );
 
-		await canvas().waitForSelector( 'p[aria-label="Paragraph block"]' );
-		await canvas().focus( 'p[aria-label="Paragraph block"]' );
+		await canvas().waitForSelector( 'p[aria-label="Block: Paragraph"]' );
+		await canvas().focus( 'p[aria-label="Block: Paragraph"]' );
 
 		// Change the block's content.
 		await page.keyboard.type( 'Einen ' );
@@ -157,7 +157,7 @@ describe( 'Pattern blocks', () => {
 
 		// Check that its content is up to date.
 		const paragraphContent = await canvas().$eval(
-			'p[aria-label="Paragraph block"]',
+			'p[aria-label="Block: Paragraph"]',
 			( element ) => element.innerText
 		);
 		expect( paragraphContent ).toMatch( 'Einen Guten Berg!' );
@@ -341,11 +341,11 @@ describe( 'Pattern blocks', () => {
 
 		// Make an edit to the reusable block and assert that there's only a
 		// paragraph in a reusable block.
-		await canvas().waitForSelector( 'p[aria-label="Paragraph block"]' );
-		await canvas().click( 'p[aria-label="Paragraph block"]' );
+		await canvas().waitForSelector( 'p[aria-label="Block: Paragraph"]' );
+		await canvas().click( 'p[aria-label="Block: Paragraph"]' );
 		await page.keyboard.type( '2' );
 		const selector =
-			'//div[@aria-label="Block: Pattern"]//p[@aria-label="Paragraph block"][.="12"]';
+			'//div[@aria-label="Block: Pattern"]//p[@aria-label="Block: Paragraph"][.="12"]';
 		const reusableBlockWithParagraph = await page.$x( selector );
 		expect( reusableBlockWithParagraph ).toBeTruthy();
 

packages/e2e-tests/specs/widgets/editing-widgets.test.js

@@ -738,7 +738,7 @@ describe( 'Widgets screen', () => {
 		await find(
 			{
 				role: 'document',
-				name: 'Paragraph block',
+				name: 'Block: Paragraph',
 				value: 'First Paragraph',
 			},
 			{
@@ -759,7 +759,7 @@ describe( 'Widgets screen', () => {
 		await find(
 			{
 				role: 'document',
-				name: 'Paragraph block',
+				name: 'Block: Paragraph',
 				value: 'First Paragraph',
 			},
 			{
@@ -875,7 +875,7 @@ describe( 'Widgets screen', () => {
 		await page.keyboard.type( 'First Paragraph' );
 		const updatedParagraphBlockInFirstWidgetArea = await find(
 			{
-				name: 'Paragraph block',
+				name: 'Block: Paragraph',
 				value: 'First Paragraph',
 			},
 			{

test/e2e/specs/editor/blocks/columns.spec.js

@@ -143,7 +143,7 @@ test.describe( 'Columns', () => {
 		} );
 
 		await editor.selectBlocks(
-			editor.canvas.locator( 'role=document[name="Paragraph block"i]' )
+			editor.canvas.locator( 'role=document[name="Block: Paragraph"i]' )
 		);
 		await page.keyboard.press( 'ArrowRight' );
 		await page.keyboard.press( 'Enter' );
@@ -200,7 +200,7 @@ test.describe( 'Columns', () => {
 
 		await editor.selectBlocks(
 			editor.canvas.locator(
-				'role=document[name="Paragraph block"i] >> text="1"'
+				'role=document[name="Block: Paragraph"i] >> text="1"'
 			)
 		);
 		await page.keyboard.press( 'ArrowRight' );

test/e2e/specs/editor/blocks/cover.spec.js

@@ -119,7 +119,7 @@ test.describe( 'Cover', () => {
 		// Activate the paragraph block inside the Cover block.
 		// The name of the block differs depending on whether text has been entered or not.
 		const coverBlockParagraph = coverBlock.getByRole( 'document', {
-			name: /Paragraph block|Empty block; start writing or type forward slash to choose a block/,
+			name: /Block: Paragraph|Empty block; start writing or type forward slash to choose a block/,
 		} );
 		await expect( coverBlockParagraph ).toBeEditable();
 

test/e2e/specs/editor/blocks/quote.spec.js

@@ -110,7 +110,7 @@ test.describe( 'Quote', () => {
 		await page.keyboard.type( 'two' );
 		await page.keyboard.down( 'Shift' );
 		await editor.canvas.click(
-			'role=document[name="Paragraph block"i] >> text=one'
+			'role=document[name="Block: Paragraph"i] >> text=one'
 		);
 		await page.keyboard.up( 'Shift' );
 		await editor.transformBlockTo( 'core/quote' );

test/e2e/specs/editor/plugins/block-variations.spec.js

@@ -89,7 +89,7 @@ test.describe( 'Block variations', () => {
 		await page.keyboard.press( 'Enter' );
 
 		await expect(
-			editor.canvas.getByRole( 'document', { name: 'Paragraph block' } )
+			editor.canvas.getByRole( 'document', { name: 'Block: Paragraph' } )
 		).toHaveText( 'This is a success message!' );
 	} );
 

test/e2e/specs/editor/plugins/hooks-api.spec.js

@@ -41,7 +41,7 @@ test.describe( 'Using Hooks API', () => {
 		await page.keyboard.type( 'First paragraph' );
 
 		const paragraphBlock = editor.canvas.locator(
-			'role=document[name="Paragraph block"i]'
+			'role=document[name="Block: Paragraph"i]'
 		);
 		await expect( paragraphBlock ).toHaveText( 'First paragraph' );
 		await page.click(

test/e2e/specs/editor/various/block-deletion.spec.js

@@ -30,7 +30,7 @@ test.describe( 'Block deletion', () => {
 		await expect(
 			editor.canvas
 				.getByRole( 'document', {
-					name: 'Paragraph block',
+					name: 'Block: Paragraph',
 				} )
 				.last()
 		).toBeFocused();
@@ -78,7 +78,7 @@ test.describe( 'Block deletion', () => {
 
 		// Select the paragraph.
 		const paragraph = editor.canvas.getByRole( 'document', {
-			name: 'Paragraph block',
+			name: 'Block: Paragraph',
 		} );
 		await editor.selectBlocks( paragraph );
 
@@ -128,7 +128,7 @@ test.describe( 'Block deletion', () => {
 		await expect(
 			editor.canvas
 				.getByRole( 'document', {
-					name: 'Paragraph block',
+					name: 'Block: Paragraph',
 				} )
 				.last()
 		).toBeFocused();
@@ -307,7 +307,7 @@ test.describe( 'Block deletion', () => {
 		} );
 		await expect(
 			editor.canvas.getByRole( 'document', {
-				name: 'Paragraph block',
+				name: 'Block: Paragraph',
 			} )
 		).toBeFocused();
 

test/e2e/specs/editor/various/block-locking.spec.js

@@ -104,7 +104,7 @@ test.describe( 'Block Locking', () => {
 		} );
 
 		const paragraph = editor.canvas.getByRole( 'document', {
-			name: 'Paragraph block',
+			name: 'Block: Paragraph',
 		} );
 		await paragraph.click();
 

test/e2e/specs/editor/various/content-only-lock.spec.js

@@ -25,7 +25,7 @@ test.describe( 'Content-only lock', () => {
 
 		await pageUtils.pressKeys( 'secondary+M' );
 		await page.waitForSelector( 'iframe[name="editor-canvas"]' );
-		await editor.canvas.click( 'role=document[name="Paragraph block"i]' );
+		await editor.canvas.click( 'role=document[name="Block: Paragraph"i]' );
 		await page.keyboard.type( ' World' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
@@ -50,7 +50,7 @@ test.describe( 'Content-only lock', () => {
 
 		await pageUtils.pressKeys( 'secondary+M' );
 		await page.waitForSelector( 'iframe[name="editor-canvas"]' );
-		await editor.canvas.click( 'role=document[name="Paragraph block"i]' );
+		await editor.canvas.click( 'role=document[name="Block: Paragraph"i]' );
 		await page.keyboard.type( ' WP' );
 		await expect.poll( editor.getBlocks ).toMatchObject( [
 			{

test/e2e/specs/editor/various/draggable-blocks.spec.js

@@ -43,7 +43,7 @@ test.describe( 'Draggable block', () => {
 <!-- /wp:paragraph -->` );
 
 		await editor.canvas.focus(
-			'role=document[name="Paragraph block"i] >> text=2'
+			'role=document[name="Block: Paragraph"i] >> text=2'
 		);
 		await editor.showBlockToolbar();
 
@@ -57,7 +57,7 @@ test.describe( 'Draggable block', () => {
 
 		// Move to and hover on the upper half of the paragraph block to trigger the indicator.
 		const firstParagraph = editor.canvas.locator(
-			'role=document[name="Paragraph block"i] >> text=1'
+			'role=document[name="Block: Paragraph"i] >> text=1'
 		);
 		const firstParagraphBound = await firstParagraph.boundingBox();
 		// Call the move function twice to make sure the `dragOver` event is sent.
@@ -115,7 +115,7 @@ test.describe( 'Draggable block', () => {
 <!-- /wp:paragraph -->` );
 
 		await editor.canvas.focus(
-			'role=document[name="Paragraph block"i] >> text=1'
+			'role=document[name="Block: Paragraph"i] >> text=1'
 		);
 		await editor.showBlockToolbar();
 
@@ -129,7 +129,7 @@ test.describe( 'Draggable block', () => {
 
 		// Move to and hover on the bottom half of the paragraph block to trigger the indicator.
 		const secondParagraph = editor.canvas.locator(
-			'role=document[name="Paragraph block"i] >> text=2'
+			'role=document[name="Block: Paragraph"i] >> text=2'
 		);
 		const secondParagraphBound = await secondParagraph.boundingBox();
 		// Call the move function twice to make sure the `dragOver` event is sent.
@@ -198,7 +198,7 @@ test.describe( 'Draggable block', () => {
 		} );
 
 		await editor.canvas.focus(
-			'role=document[name="Paragraph block"i] >> text=2'
+			'role=document[name="Block: Paragraph"i] >> text=2'
 		);
 		await editor.showBlockToolbar();
 
@@ -212,7 +212,7 @@ test.describe( 'Draggable block', () => {
 
 		// Move to and hover on the left half of the paragraph block to trigger the indicator.
 		const firstParagraph = editor.canvas.locator(
-			'role=document[name="Paragraph block"i] >> text=1'
+			'role=document[name="Block: Paragraph"i] >> text=1'
 		);
 		const firstParagraphBound = await firstParagraph.boundingBox();
 		// Call the move function twice to make sure the `dragOver` event is sent.
@@ -279,7 +279,7 @@ test.describe( 'Draggable block', () => {
 		} );
 
 		await editor.canvas.focus(
-			'role=document[name="Paragraph block"i] >> text=1'
+			'role=document[name="Block: Paragraph"i] >> text=1'
 		);
 		await editor.showBlockToolbar();
 
@@ -293,7 +293,7 @@ test.describe( 'Draggable block', () => {
 
 		// Move to and hover on the right half of the paragraph block to trigger the indicator.
 		const secondParagraph = editor.canvas.locator(
-			'role=document[name="Paragraph block"i] >> text=2'
+			'role=document[name="Block: Paragraph"i] >> text=2'
 		);
 		const secondParagraphBound = await secondParagraph.boundingBox();
 		// Call the move function twice to make sure the `dragOver` event is sent.

test/e2e/specs/editor/various/list-view.spec.js

@@ -275,7 +275,7 @@ test.describe( 'List View', () => {
 		} );
 		await expect(
 			editor.canvas.getByRole( 'document', {
-				name: 'Paragraph block',
+				name: 'Block: Paragraph',
 			} )
 		).toBeFocused();