@wordpress/block-library 7.14.2 → 7.15.0

package/src/columns/test/__snapshots__/edit.native.js.snap

@@ -0,0 +1,219 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Columns block adds a column block using the appender 1`] = `
+"<!-- wp:columns -->
+<div class=\\"wp-block-columns\\"><!-- wp:column -->
+<div class=\\"wp-block-column\\"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class=\\"wp-block-column\\"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class=\\"wp-block-column\\"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Columns block changes the vertical alignment on individual Column 1`] = `
+"<!-- wp:columns {\\"verticalAlignment\\":\\"top\\"} -->
+<div class=\\"wp-block-columns are-vertically-aligned-top\\"><!-- wp:column {\\"verticalAlignment\\":\\"bottom\\"} -->
+<div class=\\"wp-block-column is-vertically-aligned-bottom\\"></div>
+<!-- /wp:column -->
+
+<!-- wp:column {\\"verticalAlignment\\":\\"top\\"} -->
+<div class=\\"wp-block-column is-vertically-aligned-top\\"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Columns block changes vertical alignment on Columns 1`] = `
+"<!-- wp:columns {\\"verticalAlignment\\":\\"top\\"} -->
+<div class=\\"wp-block-columns are-vertically-aligned-top\\"><!-- wp:column {\\"verticalAlignment\\":\\"top\\"} -->
+<div class=\\"wp-block-column is-vertically-aligned-top\\"></div>
+<!-- /wp:column -->
+
+<!-- wp:column {\\"verticalAlignment\\":\\"top\\"} -->
+<div class=\\"wp-block-column is-vertically-aligned-top\\"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Columns block inserts block 1`] = `
+"<!-- wp:columns -->
+<div class=\\"wp-block-columns\\"><!-- wp:column {\\"width\\":\\"50%\\"} -->
+<div class=\\"wp-block-column\\" style=\\"flex-basis:50%\\"></div>
+<!-- /wp:column -->
+
+<!-- wp:column {\\"width\\":\\"50%\\"} -->
+<div class=\\"wp-block-column\\" style=\\"flex-basis:50%\\"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Columns block removes column with the remove button 1`] = `
+"<!-- wp:columns -->
+<div class=\\"wp-block-columns\\"><!-- wp:column -->
+<div class=\\"wp-block-column\\"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Columns block removes the only one left Column with the remove button 1`] = `
+"<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Columns block sets current vertical alignment on new Columns 1`] = `
+"<!-- wp:columns {\\"verticalAlignment\\":\\"top\\"} -->
+<div class=\\"wp-block-columns are-vertically-aligned-top\\"><!-- wp:column {\\"verticalAlignment\\":\\"top\\"} -->
+<div class=\\"wp-block-column is-vertically-aligned-top\\"></div>
+<!-- /wp:column -->
+
+<!-- wp:column {\\"verticalAlignment\\":\\"top\\"} -->
+<div class=\\"wp-block-column is-vertically-aligned-top\\"></div>
+<!-- /wp:column -->
+
+<!-- wp:column {\\"verticalAlignment\\":\\"top\\"} -->
+<div class=\\"wp-block-column is-vertically-aligned-top\\"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Columns block when using columns percentage mechanism sets custom values correctly 1`] = `
+"<!-- wp:columns -->
+<div class=\\"wp-block-columns\\"><!-- wp:column {\\"width\\":\\"90%\\"} -->
+<div class=\\"wp-block-column\\" style=\\"flex-basis:90%\\"></div>
+<!-- /wp:column -->
+
+<!-- wp:column {\\"width\\":\\"55.5%\\"} -->
+<div class=\\"wp-block-column\\" style=\\"flex-basis:55.5%\\"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Columns block when using columns percentage mechanism updates the slider's input value 1`] = `
+"<!-- wp:columns -->
+<div class=\\"wp-block-columns\\"><!-- wp:column {\\"width\\":\\"55.6%\\"} -->
+<div class=\\"wp-block-column\\" style=\\"flex-basis:55.6%\\"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class=\\"wp-block-column\\"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class=\\"wp-block-column\\"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Columns block when using the columns layout picker sets the predefined percentages for 25 / 50 / 25 block 1`] = `
+"<!-- wp:columns -->
+<div class=\\"wp-block-columns\\"><!-- wp:column {\\"width\\":\\"25%\\"} -->
+<div class=\\"wp-block-column\\" style=\\"flex-basis:25%\\"></div>
+<!-- /wp:column -->
+
+<!-- wp:column {\\"width\\":\\"50%\\"} -->
+<div class=\\"wp-block-column\\" style=\\"flex-basis:50%\\"></div>
+<!-- /wp:column -->
+
+<!-- wp:column {\\"width\\":\\"25%\\"} -->
+<div class=\\"wp-block-column\\" style=\\"flex-basis:25%\\"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Columns block when using the columns layout picker sets the predefined percentages for 33 / 33 / 33 block 1`] = `
+"<!-- wp:columns -->
+<div class=\\"wp-block-columns\\"><!-- wp:column -->
+<div class=\\"wp-block-column\\"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class=\\"wp-block-column\\"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class=\\"wp-block-column\\"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Columns block when using the columns layout picker sets the predefined percentages for 33 / 66 block 1`] = `
+"<!-- wp:columns -->
+<div class=\\"wp-block-columns\\"><!-- wp:column {\\"width\\":\\"33.33%\\"} -->
+<div class=\\"wp-block-column\\" style=\\"flex-basis:33.33%\\"></div>
+<!-- /wp:column -->
+
+<!-- wp:column {\\"width\\":\\"66.66%\\"} -->
+<div class=\\"wp-block-column\\" style=\\"flex-basis:66.66%\\"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Columns block when using the columns layout picker sets the predefined percentages for 50 / 50 block 1`] = `
+"<!-- wp:columns -->
+<div class=\\"wp-block-columns\\"><!-- wp:column -->
+<div class=\\"wp-block-column\\"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class=\\"wp-block-column\\"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Columns block when using the columns layout picker sets the predefined percentages for 66 / 33 block 1`] = `
+"<!-- wp:columns -->
+<div class=\\"wp-block-columns\\"><!-- wp:column {\\"width\\":\\"66.66%\\"} -->
+<div class=\\"wp-block-column\\" style=\\"flex-basis:66.66%\\"></div>
+<!-- /wp:column -->
+
+<!-- wp:column {\\"width\\":\\"33.33%\\"} -->
+<div class=\\"wp-block-column\\" style=\\"flex-basis:33.33%\\"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Columns block when using the columns layout picker sets the predefined percentages for 100 block 1`] = `
+"<!-- wp:columns -->
+<div class=\\"wp-block-columns\\"><!-- wp:column -->
+<div class=\\"wp-block-column\\"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Columns block when using the number of columns setting adds a column block when incrementing the value 1`] = `
+"<!-- wp:columns -->
+<div class=\\"wp-block-columns\\"><!-- wp:column -->
+<div class=\\"wp-block-column\\"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class=\\"wp-block-column\\"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class=\\"wp-block-column\\"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Columns block when using the number of columns setting reaches the minimum limit of number of column blocks 1`] = `
+"<!-- wp:columns -->
+<div class=\\"wp-block-columns\\"><!-- wp:column -->
+<div class=\\"wp-block-column\\"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Columns block when using the number of columns setting removes a column block when decrementing the value 1`] = `
+"<!-- wp:columns -->
+<div class=\\"wp-block-columns\\"><!-- wp:column -->
+<div class=\\"wp-block-column\\"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;

package/src/columns/test/edit.native.js

@@ -0,0 +1,432 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	fireEvent,
+	getEditorHtml,
+	initializeEditor,
+	openBlockSettings,
+	within,
+	getBlock,
+	waitFor,
+	dismissModal,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+const TWO_COLUMNS_BLOCK_HTML = `<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->`;
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Columns block', () => {
+	it( 'inserts block', async () => {
+		const screen = await initializeEditor();
+
+		// Add block
+		await addBlock( screen, 'Columns' );
+
+		// Get block
+		const columnsBlock = await getBlock( screen, 'Columns' );
+		expect( columnsBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'adds a column block using the appender', async () => {
+		const screen = await initializeEditor( {
+			initialHtml: TWO_COLUMNS_BLOCK_HTML,
+		} );
+
+		// Get block
+		const columnsBlock = await getBlock( screen, 'Columns' );
+		fireEvent.press( columnsBlock );
+
+		// Add a new column
+		const appenderButton =
+			within( columnsBlock ).getByTestId( 'appender-button' );
+		fireEvent.press( appenderButton );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	describe( 'when using the number of columns setting', () => {
+		it( 'adds a column block when incrementing the value', async () => {
+			const screen = await initializeEditor( {
+				initialHtml: TWO_COLUMNS_BLOCK_HTML,
+			} );
+			const { getByA11yLabel } = screen;
+
+			// Get block
+			const columnsBlock = await getBlock( screen, 'Columns' );
+			fireEvent.press( columnsBlock );
+
+			// Open block settings
+			await openBlockSettings( screen );
+
+			// Update the number of columns by adding one
+			const columnsControl = getByA11yLabel( /Number of columns/ );
+			fireEvent( columnsControl, 'accessibilityAction', {
+				nativeEvent: { actionName: 'increment' },
+			} );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'removes a column block when decrementing the value', async () => {
+			const screen = await initializeEditor( {
+				initialHtml: TWO_COLUMNS_BLOCK_HTML,
+			} );
+			const { getByA11yLabel } = screen;
+
+			// Wait for the block to be created.
+			const columnsBlock = await getBlock( screen, 'Columns' );
+			fireEvent.press( columnsBlock );
+
+			// Open block settings
+			await openBlockSettings( screen );
+
+			// Update the number of columns by removing one
+			const columnsControl = getByA11yLabel( /Number of columns/ );
+			fireEvent( columnsControl, 'accessibilityAction', {
+				nativeEvent: { actionName: 'decrement' },
+			} );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'reaches the minimum limit of number of column blocks', async () => {
+			const screen = await initializeEditor();
+			const { getByA11yLabel, getByTestId } = screen;
+
+			// Add block
+			await addBlock( screen, 'Columns' );
+
+			// Wait for the variations modal to be visible
+			await waitFor(
+				() => getByTestId( 'block-variation-modal' ).props.isVisible
+			);
+
+			// Select a column variation
+			const blockVariationModal = getByTestId( 'block-variation-modal' );
+			await waitFor( () => blockVariationModal.props.isVisible );
+			const threeColumnLayout =
+				within( blockVariationModal ).getByA11yLabel(
+					/33 \/ 33 \/ 33 block/
+				);
+			fireEvent.press( threeColumnLayout );
+
+			// Get block
+			const columnsBlock = await getBlock( screen, 'Columns' );
+			fireEvent.press( columnsBlock );
+
+			// Open block settings
+			await openBlockSettings( screen );
+
+			// Update the number of columns by adding one
+			const columnsControl = getByA11yLabel( /Number of columns/ );
+			fireEvent( columnsControl, 'accessibilityAction', {
+				nativeEvent: { actionName: 'increment' },
+			} );
+
+			// Press the decrement button 5 times to remove all columns but one
+			for ( let index = 0; index < 5; index++ ) {
+				fireEvent( columnsControl, 'accessibilityAction', {
+					nativeEvent: { actionName: 'decrement' },
+				} );
+			}
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+	} );
+
+	it( 'removes column with the remove button', async () => {
+		const screen = await initializeEditor( {
+			initialHtml: TWO_COLUMNS_BLOCK_HTML,
+		} );
+		const { getByA11yLabel } = screen;
+
+		// Get block
+		const columnsBlock = await getBlock( screen, 'Columns' );
+		fireEvent.press( columnsBlock );
+
+		// Get the first column
+		const firstColumnBlock = await getBlock( screen, 'Column' );
+		fireEvent.press( firstColumnBlock );
+
+		// Open block actions menu
+		const blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ );
+		fireEvent.press( blockActionsButton );
+
+		// Delete block
+		const deleteButton = getByA11yLabel( /Remove block/ );
+		fireEvent.press( deleteButton );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'removes the only one left Column with the remove button', async () => {
+		const screen = await initializeEditor( {
+			initialHtml: TWO_COLUMNS_BLOCK_HTML,
+		} );
+		const { getByA11yLabel } = screen;
+
+		// Get block
+		const columnsBlock = await getBlock( screen, 'Columns' );
+		fireEvent.press( columnsBlock );
+
+		// Get the first column
+		const firstColumnBlock = await getBlock( screen, 'Column' );
+		fireEvent.press( firstColumnBlock );
+
+		// Open block actions menu
+		let blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ );
+		fireEvent.press( blockActionsButton );
+
+		// Delete block
+		let deleteButton = getByA11yLabel( /Remove block/ );
+		fireEvent.press( deleteButton );
+
+		// Get the only left column
+		const lastColumnBlock = await getBlock( screen, 'Column' );
+		fireEvent.press( lastColumnBlock );
+
+		// Open block actions menu
+		blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ );
+		fireEvent.press( blockActionsButton );
+
+		// Delete block
+		deleteButton = getByA11yLabel( /Remove block/ );
+		fireEvent.press( deleteButton );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'changes vertical alignment on Columns', async () => {
+		const screen = await initializeEditor( {
+			initialHtml: TWO_COLUMNS_BLOCK_HTML,
+		} );
+		const { getByA11yLabel } = screen;
+
+		// Get block
+		const columnsBlock = await getBlock( screen, 'Columns' );
+		fireEvent.press( columnsBlock );
+
+		// Open vertical alignment menu
+		const verticalAlignmentButton = getByA11yLabel(
+			/Change vertical alignment/
+		);
+		fireEvent.press( verticalAlignmentButton );
+
+		// Get Align top button
+		const verticalTopAlignmentButton = getByA11yLabel( /Align top/ );
+		fireEvent.press( verticalTopAlignmentButton );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'changes the vertical alignment on individual Column', async () => {
+		const screen = await initializeEditor( {
+			initialHtml: TWO_COLUMNS_BLOCK_HTML,
+		} );
+		const { getByA11yLabel } = screen;
+
+		// Get block
+		const columnsBlock = await getBlock( screen, 'Columns' );
+		fireEvent.press( columnsBlock );
+
+		// Open vertical alignment menu
+		const verticalAlignmentButton = getByA11yLabel(
+			/Change vertical alignment/
+		);
+		fireEvent.press( verticalAlignmentButton );
+
+		// Get Align top button
+		const verticalTopAlignmentButton = getByA11yLabel( /Align top/ );
+		fireEvent.press( verticalTopAlignmentButton );
+
+		// Get the first column
+		const firstColumnBlock = await getBlock( screen, 'Column' );
+		fireEvent.press( firstColumnBlock );
+
+		// Open vertical alignment menu
+		fireEvent.press( verticalAlignmentButton );
+
+		// Get Align bottom button
+		const verticalBottomAlignmentButton = getByA11yLabel( /Align bottom/ );
+		fireEvent.press( verticalBottomAlignmentButton );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'sets current vertical alignment on new Columns', async () => {
+		const screen = await initializeEditor( {
+			initialHtml: TWO_COLUMNS_BLOCK_HTML,
+		} );
+		const { getByA11yLabel } = screen;
+
+		// Get block
+		const columnsBlock = await getBlock( screen, 'Columns' );
+		fireEvent.press( columnsBlock );
+
+		// Open vertical alignment menu
+		const verticalAlignmentButton = getByA11yLabel(
+			/Change vertical alignment/
+		);
+		fireEvent.press( verticalAlignmentButton );
+
+		// Get Align top button
+		const verticalTopAlignmentButton = getByA11yLabel( /Align top/ );
+		fireEvent.press( verticalTopAlignmentButton );
+
+		// Add a new column
+		const appenderButton =
+			within( columnsBlock ).getByTestId( 'appender-button' );
+		fireEvent.press( appenderButton );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	describe( 'when using columns percentage mechanism', () => {
+		it( "updates the slider's input value", async () => {
+			const screen = await initializeEditor();
+			const { getByA11yLabel, getByTestId } = screen;
+
+			// Add block
+			await addBlock( screen, 'Columns' );
+
+			// Wait for the variations modal to be visible
+			await waitFor(
+				() => getByTestId( 'block-variation-modal' ).props.isVisible
+			);
+
+			// Select a column variation
+			const blockVariationModal = getByTestId( 'block-variation-modal' );
+			await waitFor( () => blockVariationModal.props.isVisible );
+			const threeColumnLayout =
+				within( blockVariationModal ).getByA11yLabel(
+					/33 \/ 33 \/ 33 block/
+				);
+			fireEvent.press( threeColumnLayout );
+
+			// Get the first column
+			const firstColumnBlock = await getBlock( screen, 'Column' );
+			fireEvent.press( firstColumnBlock );
+
+			// Open block settings
+			await openBlockSettings( screen );
+
+			// Get width control
+			const widthControl = getByA11yLabel( /Width. Value is/ );
+			fireEvent.press( within( widthControl ).getByText( '33.3' ) );
+			const widthTextInput =
+				within( widthControl ).getByDisplayValue( '33.3' );
+			fireEvent.changeText( widthTextInput, '55.55555' );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'sets custom values correctly', async () => {
+			const screen = await initializeEditor( {
+				initialHtml: TWO_COLUMNS_BLOCK_HTML,
+			} );
+			const { getByA11yLabel, getByTestId } = screen;
+
+			// Get block
+			const columnsBlock = await getBlock( screen, 'Columns' );
+			fireEvent.press( columnsBlock );
+
+			// Get the first column
+			const firstColumnBlock = await getBlock( screen, 'Column' );
+			fireEvent.press( firstColumnBlock );
+
+			// Open block settings
+			await openBlockSettings( screen );
+
+			// Set custom width value for the first column
+			let widthControl = getByA11yLabel( /Width. Value is/ );
+			fireEvent.press( within( widthControl ).getByText( '50' ) );
+			let widthTextInput =
+				within( widthControl ).getByDisplayValue( '50' );
+			fireEvent.changeText( widthTextInput, '90' );
+
+			// Dismiss settings
+			await dismissModal( getByTestId( 'block-settings-modal' ) );
+
+			// Get the Second column
+			const secondColumnBlock = await getBlock( screen, 'Column', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( secondColumnBlock );
+
+			// Open block settings
+			await openBlockSettings( screen );
+
+			// Set custom width value for the second column
+			widthControl = getByA11yLabel( /Width. Value is/ );
+			fireEvent.press( within( widthControl ).getByText( '50' ) );
+			widthTextInput = within( widthControl ).getByDisplayValue( '50' );
+			fireEvent.changeText( widthTextInput, '55.5' );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+	} );
+
+	describe( 'when using the columns layout picker', () => {
+		const testData = [
+			[ '100 block' ],
+			[ '50 / 50 block' ],
+			[ '33 / 66 block' ],
+			[ '66 / 33 block' ],
+			[ '33 / 33 / 33 block' ],
+			[ '25 / 50 / 25 block' ],
+		];
+
+		test.each( testData )(
+			'sets the predefined percentages for %s',
+			async ( layout ) => {
+				const screen = await initializeEditor();
+				const { getByTestId } = screen;
+
+				// Add block
+				await addBlock( screen, 'Columns' );
+
+				// Wait for the variations modal to be visible
+				await waitFor(
+					() => getByTestId( 'block-variation-modal' ).props.isVisible
+				);
+
+				// Select a column variation
+				const blockVariationModal = getByTestId(
+					'block-variation-modal'
+				);
+				await waitFor( () => blockVariationModal.props.isVisible );
+				const columnLayout =
+					within( blockVariationModal ).getByA11yLabel( layout );
+				fireEvent.press( columnLayout );
+
+				expect( getEditorHtml() ).toMatchSnapshot();
+			}
+		);
+	} );
+} );

package/src/comments/edit/comments-legacy.js

@@ -57,7 +57,7 @@ export default function CommentsLegacy( {
 			<div { ...blockProps }>
 				<Warning actions={ actions }>
 					{ __(
-						"Comments block: You're currently using the legacy version of the block. " +
+						'Comments block: You’re currently using the legacy version of the block. ' +
 							'The following is just a placeholder - the final styling will likely look different. ' +
 							'For a better representation and more customization options, ' +
 							'switch the block to its editable mode.'

package/src/comments-pagination-next/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comments-pagination-next",
-	"title": "Next Page",
+	"title": "Comments Next Page",
 	"category": "theme",
 	"parent": [ "core/comments-pagination" ],
 	"description": "Displays the next comment's page link.",

package/src/comments-pagination-numbers/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comments-pagination-numbers",
-	"title": "Page Numbers",
+	"title": "Comments Page Numbers",
 	"category": "theme",
 	"parent": [ "core/comments-pagination" ],
 	"description": "Displays a list of page numbers for comments pagination.",

package/src/comments-pagination-previous/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comments-pagination-previous",
-	"title": "Previous Page",
+	"title": "Comments Previous Page",
 	"category": "theme",
 	"parent": [ "core/comments-pagination" ],
 	"description": "Displays the previous comment's page link.",