@wordpress/e2e-tests 2.5.12 → 3.0.1-next.33ec3857e2.0

package/specs/editor/plugins/custom-post-types.test.js

@@ -7,6 +7,7 @@ import {
 	deactivatePlugin,
 	publishPost,
 	findSidebarPanelWithTitle,
+	clickBlockAppender,
 } from '@wordpress/e2e-test-utils';
 
 const openPageAttributesPanel = async () => {
@@ -40,7 +41,7 @@ describe( 'Test Custom Post Types', () => {
 
 		// Create a parent post.
 		await createNewPost( { postType: 'hierar-no-title' } );
-		await page.click( '.block-editor-writing-flow' );
+		await clickBlockAppender();
 		await page.keyboard.type( 'Parent Post' );
 		await publishPost();
 		// Create a post that is a child of the previously created post.
@@ -55,7 +56,7 @@ describe( 'Test Custom Post Types', () => {
 			( element ) => element.textContent
 		);
 		await optionToSelect.click();
-		await page.click( '.block-editor-writing-flow' );
+		await clickBlockAppender();
 		await page.keyboard.type( 'Child Post' );
 		await publishPost();
 		// Reload the child post and verify it is still correctly selected as a child post.
@@ -72,7 +73,7 @@ describe( 'Test Custom Post Types', () => {
 	} );
 	it( 'should create a cpt with a legacy block in its template without WSOD', async () => {
 		await createNewPost( { postType: 'leg_block_in_tpl' } );
-		await page.click( '.block-editor-writing-flow' );
+		await clickBlockAppender();
 		await page.keyboard.type( 'Hello there' );
 		await page.waitForSelector( '[data-type="core/embed"]' );
 		await publishPost();

package/specs/editor/various/adding-patterns.test.js

@@ -7,7 +7,7 @@ import {
 	getEditedPostContent,
 } from '@wordpress/e2e-test-utils';
 
-/** @typedef {import('puppeteer').ElementHandle} ElementHandle */
+/** @typedef {import('puppeteer-core').ElementHandle} ElementHandle */
 
 describe( 'adding patterns', () => {
 	beforeEach( async () => {

package/specs/editor/various/block-grouping.test.js

@@ -13,6 +13,7 @@ import {
 	getAvailableBlockTransforms,
 	activatePlugin,
 	deactivatePlugin,
+	createReusableBlock,
 } from '@wordpress/e2e-test-utils';
 
 async function insertBlocksOfSameType() {
@@ -122,24 +123,7 @@ describe( 'Block Grouping', () => {
 			};
 
 			const paragraphText = 'hi';
-			const reusableBlockNameInputSelector =
-				'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
-			await insertBlock( 'Paragraph' );
-			await page.keyboard.type( paragraphText );
-
-			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Add to Reusable blocks' );
-			const nameInput = await page.waitForSelector(
-				reusableBlockNameInputSelector
-			);
-			await nameInput.click();
-			await page.keyboard.type( 'Block' );
-			await page.keyboard.press( 'Enter' );
-
-			// Wait for creation to finish
-			await page.waitForXPath(
-				'//*[contains(@class, "components-snackbar")]/*[text()="Reusable block created."]'
-			);
+			await createReusableBlock( paragraphText, 'Block' );
 			// Group
 			await clickBlockToolbarButton( 'Options' );
 			await clickMenuItem( 'Group' );

package/specs/editor/various/block-hierarchy-navigation.test.js

@@ -51,7 +51,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
 		const columnsBlockMenuItem = (
 			await page.$x(
-				"//button[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Columns')]"
+				"//a[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Columns')]"
 			)
 		 )[ 0 ];
 		await columnsBlockMenuItem.click();
@@ -75,7 +75,7 @@ describe( 'Navigating the block hierarchy', () => {
 		// Navigate to the last column block.
 		const lastColumnsBlockMenuItem = (
 			await page.$x(
-				"//button[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Column')]"
+				"//a[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Column')]"
 			)
 		 )[ 3 ];
 		await lastColumnsBlockMenuItem.click();
@@ -188,7 +188,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
 		const groupMenuItem = (
 			await page.$x(
-				"//button[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Group')]"
+				"//a[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Group')]"
 			)
 		 )[ 0 ];
 		await groupMenuItem.click();

package/specs/editor/various/change-detection.test.js

@@ -10,6 +10,7 @@ import {
 	saveDraft,
 	openDocumentSettingsSidebar,
 	isCurrentURL,
+	openTypographyToolsPanelMenu,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Change detection', () => {
@@ -381,6 +382,10 @@ describe( 'Change detection', () => {
 
 		// Change the paragraph's `drop cap`.
 		await page.click( '[data-type="core/paragraph"]' );
+
+		await openTypographyToolsPanelMenu();
+		await page.click( 'button[aria-label="Show Drop cap"]' );
+
 		const [ dropCapToggle ] = await page.$x(
 			"//label[contains(text(), 'Drop cap')]"
 		);

package/specs/editor/various/editor-modes.test.js

@@ -10,6 +10,7 @@ import {
 	switchEditorModeTo,
 	pressKeyTimes,
 	pressKeyWithModifier,
+	openTypographyToolsPanelMenu,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Editing modes (visual/HTML)', () => {
@@ -54,6 +55,9 @@ describe( 'Editing modes (visual/HTML)', () => {
 
 		// The `drop cap` toggle for the paragraph block should appear, even in
 		// HTML editing mode.
+		await openTypographyToolsPanelMenu();
+		await page.click( 'button[aria-label="Show Drop cap"]' );
+
 		const dropCapToggle = await page.$x(
 			"//label[contains(text(), 'Drop cap')]"
 		);
@@ -74,6 +78,9 @@ describe( 'Editing modes (visual/HTML)', () => {
 		expect( htmlBlockContent ).toEqual( '<p>Hello world!</p>' );
 
 		// Change the `drop cap` using the sidebar.
+		await openTypographyToolsPanelMenu();
+		await page.click( 'button[aria-label="Show Drop cap"]' );
+
 		const [ dropCapToggle ] = await page.$x(
 			"//label[contains(text(), 'Drop cap')]"
 		);

package/specs/editor/various/font-size-picker.test.js

@@ -8,6 +8,7 @@ import {
 	pressKeyWithModifier,
 	pressKeyTimes,
 	activateTheme,
+	openTypographyToolsPanelMenu,
 } from '@wordpress/e2e-test-utils';
 
 const openFontSizeSelectControl = async () => {
@@ -17,13 +18,6 @@ const openFontSizeSelectControl = async () => {
 	return selectControl.click();
 };
 
-const openTypographyToolsPanelMenu = async () => {
-	const toggleSelector =
-		"//div[contains(@class, 'typography-block-support-panel')]//button[contains(@class, 'components-dropdown-menu__toggle')]";
-	const toggle = await page.waitForXPath( toggleSelector );
-	return toggle.click();
-};
-
 const FONT_SIZE_TOGGLE_GROUP_SELECTOR =
 	"//div[contains(@class, 'components-font-size-picker__controls')]//div[contains(@class, 'components-toggle-group-control')]";
 

package/specs/editor/various/inserting-blocks.test.js

@@ -14,7 +14,7 @@ import {
 	pressKeyWithModifier,
 } from '@wordpress/e2e-test-utils';
 
-/** @typedef {import('puppeteer').ElementHandle} ElementHandle */
+/** @typedef {import('puppeteer-core').ElementHandle} ElementHandle */
 
 /**
  * Waits for all patterns in the inserter to have a height, which should
@@ -173,7 +173,7 @@ describe( 'Inserting blocks', () => {
 	// Check for regression of https://github.com/WordPress/gutenberg/issues/9583
 	it( 'should not allow transfer of focus outside of the block-insertion menu once open', async () => {
 		// Enter the default block and click the inserter toggle button to the left of it.
-		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'Enter' );
 		await showBlockToolbar();
 		await page.click(
 			'.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle'
@@ -243,6 +243,10 @@ describe( 'Inserting blocks', () => {
 		);
 		expect( selectedButtonBlocks.length ).toBe( 1 );
 
+		// The block appender is only visible when there's no selection.
+		await page.evaluate( () =>
+			window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock()
+		);
 		// Specifically click the root container appender.
 		await page.click(
 			'.block-editor-block-list__layout.is-root-container > .block-list-appender .block-editor-inserter__toggle'

package/specs/editor/various/keyboard-navigable-blocks.test.js

@@ -155,6 +155,12 @@ describe( 'Order of block keyboard navigation', () => {
 				.focus();
 		} );
 
+		await pressKeyWithModifier( 'shift', 'Tab' );
+		await expect( await getActiveLabel() ).toBe( 'Add block' );
+
+		await pressKeyWithModifier( 'shift', 'Tab' );
+		await expect( await getActiveLabel() ).toBe( 'Add default block' );
+
 		await pressKeyWithModifier( 'shift', 'Tab' );
 		await expect( await getActiveLabel() ).toBe(
 			'Paragraph Block. Row 2. 1'

package/specs/editor/various/list-view.test.js

@@ -42,12 +42,12 @@ describe( 'List view', () => {
 		await pressKeyWithModifier( 'access', 'o' );
 
 		const paragraphBlock = await page.waitForXPath(
-			'//button[contains(., "Paragraph")][@draggable="true"]'
+			'//a[contains(., "Paragraph")][@draggable="true"]'
 		);
 
 		// Drag above the heading block
 		const headingBlock = await page.waitForXPath(
-			'//button[contains(., "Heading")][@draggable="true"]'
+			'//a[contains(., "Heading")][@draggable="true"]'
 		);
 
 		await dragAndDrop( paragraphBlock, headingBlock, -5 );

package/specs/editor/various/navigable-toolbar.test.js

@@ -31,8 +31,8 @@ describe.each( [
 
 	it( 'navigates in and out of toolbar by keyboard (Alt+F10, Escape)', async () => {
 		// Assumes new post focus starts in title. Create first new
-		// block by ArrowDown.
-		await page.keyboard.press( 'ArrowDown' );
+		// block by Enter.
+		await page.keyboard.press( 'Enter' );
 
 		// [TEMPORARY]: A new paragraph is not technically a block yet
 		// until starting to type within it.

package/specs/editor/various/preview.test.js

@@ -14,7 +14,7 @@ import {
 	pressKeyWithModifier,
 } from '@wordpress/e2e-test-utils';
 
-/** @typedef {import('puppeteer').Page} Page */
+/** @typedef {import('puppeteer-core').Page} Page */
 
 /**
  * Given the Page instance for the editor, opens preview drodpdown, and

package/specs/editor/various/reusable-blocks.test.js

@@ -14,6 +14,7 @@ import {
 	toggleGlobalBlockInserter,
 	openDocumentSettingsSidebar,
 	saveDraft,
+	createReusableBlock,
 } from '@wordpress/e2e-test-utils';
 
 const reusableBlockNameInputSelector =
@@ -44,32 +45,6 @@ const clearAllBlocks = async () => {
 	} );
 };
 
-const createReusableBlock = async ( content, title ) => {
-	// Insert a paragraph block
-	await insertBlock( 'Paragraph' );
-	await page.keyboard.type( content );
-
-	await clickBlockToolbarButton( 'Options' );
-	await clickMenuItem( 'Add to Reusable blocks' );
-	const nameInput = await page.waitForSelector(
-		reusableBlockNameInputSelector
-	);
-	await nameInput.click();
-	await page.keyboard.type( title );
-	await page.keyboard.press( 'Enter' );
-
-	// Wait for creation to finish
-	await page.waitForXPath(
-		'//*[contains(@class, "components-snackbar")]/*[text()="Reusable block created."]'
-	);
-
-	// Check that we have a reusable block on the page
-	const block = await page.waitForSelector(
-		'.block-editor-block-list__block[data-type="core/block"]'
-	);
-	expect( block ).not.toBeNull();
-};
-
 describe( 'Reusable blocks', () => {
 	afterAll( async () => {
 		await trashAllPosts( 'wp_block' );

package/specs/editor/various/writing-flow.test.js

@@ -45,9 +45,11 @@ const addParagraphsAndColumnsDemo = async () => {
 	await page.keyboard.press( 'Enter' ); // Insert paragraph.
 	await page.keyboard.type( '2nd col' ); // If this text is too long, it may wrap to a new line and cause test failure. That's why we're using "2nd" instead of "Second" here.
 
-	// Arrow down from last of layouts exits nested context to default
-	// appender of root level.
-	await page.keyboard.press( 'ArrowDown' );
+	await page.keyboard.press( 'Escape' ); // Enter navigation mode
+	await page.keyboard.press( 'ArrowLeft' ); // move to the column block
+	await page.keyboard.press( 'ArrowLeft' ); // move to the columns block
+	await page.keyboard.press( 'Enter' ); // Enter edit mode with the columns block selected
+	await page.keyboard.press( 'Enter' ); // Creates a paragraph after the columns block.
 	await page.keyboard.type( 'Second paragraph' );
 };
 
@@ -289,6 +291,8 @@ describe( 'Writing Flow', () => {
 		// See: https://github.com/WordPress/gutenberg/issues/9626
 
 		await insertBlock( 'Shortcode' );
+		await insertBlock( 'Paragraph' );
+		await await page.click( '.wp-block-shortcode' );
 
 		// Should remain in title upon ArrowRight:
 		await page.keyboard.press( 'ArrowRight' );
@@ -304,7 +308,7 @@ describe( 'Writing Flow', () => {
 		);
 		expect( isInShortcodeBlock ).toBe( true );
 
-		// Should navigate into blocks list upon ArrowDown:
+		// Should navigate to the next block.
 		await page.keyboard.press( 'ArrowDown' );
 		const isInParagraphBlock = await page.evaluate(
 			() => !! document.activeElement.closest( '.wp-block-paragraph' )

package/specs/site-editor/document-settings.test.js

@@ -60,7 +60,7 @@ describe( 'Document Settings', () => {
 					'.edit-post-header-toolbar__list-view-toggle'
 				);
 				const headerTemplatePartListViewButton = await page.waitForXPath(
-					'//button[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
+					'//a[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
 				);
 				headerTemplatePartListViewButton.click();
 				await page.click(

package/specs/site-editor/multi-entity-saving.test.js

@@ -4,11 +4,14 @@
 import {
 	createNewPost,
 	disablePrePublishChecks,
+	getOption,
 	insertBlock,
 	publishPost,
+	setOption,
 	trashAllPosts,
 	activateTheme,
 	clickButton,
+	createReusableBlock,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -21,13 +24,9 @@ describe( 'Multi-entity save flow', () => {
 	const checkedBoxSelector = '.components-checkbox-control__checked';
 	const checkboxInputSelector = '.components-checkbox-control__input';
 	const entitiesSaveSelector = '.editor-entities-saved-states__save-button';
-	const templatePartSelector = '*[data-type="core/template-part"]';
-	const activatedTemplatePartSelector = `${ templatePartSelector }.block-editor-block-list__layout`;
 	const savePanelSelector = '.entities-saved-states__panel';
 	const closePanelButtonSelector =
-		'.editor-post-publish-panel__header-cancel-button button';
-	const createNewButtonSelector =
-		'//button[contains(text(), "New template part")]';
+		'.editor-post-publish-panel__header-cancel-button button:not(:disabled)';
 
 	// Reusable assertions across Post/Site editors.
 	const assertAllBoxesChecked = async () => {
@@ -44,14 +43,26 @@ describe( 'Multi-entity save flow', () => {
 		}
 	};
 
+	let originalSiteTitle, originalBlogDescription;
+
 	beforeAll( async () => {
 		await activateTheme( 'tt1-blocks' );
 		await trashAllPosts( 'wp_template' );
 		await trashAllPosts( 'wp_template_part' );
+		await trashAllPosts( 'wp_block' );
+
+		// Get the current Site Title and Site Tagline, so that we can reset
+		// them back to the original values once the test suite has finished.
+		originalSiteTitle = await getOption( 'blogname' );
+		originalBlogDescription = await getOption( 'blogdescription' );
 	} );
 
 	afterAll( async () => {
 		await activateTheme( 'twentytwentyone' );
+
+		// Reset the Site Title and Site Tagline back to their original values.
+		await setOption( 'blogname', originalSiteTitle );
+		await setOption( 'blogdescription', originalBlogDescription );
 	} );
 
 	describe( 'Post Editor', () => {
@@ -66,8 +77,6 @@ describe( 'Multi-entity save flow', () => {
 		const saveA11ySelector =
 			'.edit-post-layout__toggle-entities-saved-states-panel-button';
 		const publishPanelSelector = '.editor-post-publish-panel';
-		const confirmTitleButtonSelector =
-			'.wp-block-template-part__placeholder-create-new__title-form .components-button.is-primary';
 
 		// Reusable assertions inside Post editor.
 		const assertMultiSaveEnabled = async () => {
@@ -87,6 +96,7 @@ describe( 'Multi-entity save flow', () => {
 		it( 'Save flow should work as expected.', async () => {
 			await createNewPost();
 			// Edit the page some.
+			await page.waitForSelector( '.editor-post-title' );
 			await page.click( '.editor-post-title' );
 			await page.keyboard.type( 'Test Post...' );
 			await page.keyboard.press( 'Enter' );
@@ -100,21 +110,11 @@ describe( 'Multi-entity save flow', () => {
 			await assertExistance( publishPanelSelector, false );
 			await assertExistance( savePanelSelector, false );
 
-			// Add a template part and edit it.
-			await insertBlock( 'Template Part' );
-			const createNewButton = await page.waitForXPath(
-				createNewButtonSelector
-			);
-			await createNewButton.click();
-			const confirmTitleButton = await page.waitForSelector(
-				confirmTitleButtonSelector
-			);
-			await confirmTitleButton.click();
-
-			await page.waitForSelector( activatedTemplatePartSelector );
-			await page.click( '.block-editor-button-block-appender' );
-			await page.click( '.editor-block-list-item-paragraph' );
-			await page.keyboard.type( 'some words...' );
+			// Add a reusable block and edit it.
+			await createReusableBlock( 'Hi!', 'Test' );
+			await page.waitForSelector( 'p[data-type="core/paragraph"]' );
+			await page.click( 'p[data-type="core/paragraph"]' );
+			await page.keyboard.type( 'Oh!' );
 
 			// Should trigger multi-entity save button once template part edited.
 			await assertMultiSaveEnabled();
@@ -145,7 +145,10 @@ describe( 'Multi-entity save flow', () => {
 			await assertExistance( savePanelSelector, false );
 
 			// Close publish panel.
-			await page.click( closePanelButtonSelector );
+			const closePanelButton = await page.waitForSelector(
+				closePanelButtonSelector
+			);
+			await closePanelButton.click();
 
 			// Verify saving is disabled.
 			const draftSaved = await page.waitForSelector( draftSavedSelector );
@@ -154,25 +157,32 @@ describe( 'Multi-entity save flow', () => {
 			await assertExistance( saveA11ySelector, false );
 
 			await publishPost();
+			// Wait for the success notice specifically for the published post.
+			// `publishPost()` has a similar check but it only checks for the
+			// existence of any snackbars. In this case, there's another "Site updated"
+			// notice which will be sufficient for that and thus creating a false-positive.
+			await page.waitForXPath(
+				'//*[@id="a11y-speak-polite"][contains(text(), "Post published")]'
+			);
 
 			// Update the post.
 			await page.click( '.editor-post-title' );
 			await page.keyboard.type( '...more title!' );
 
 			// Verify update button is enabled.
-			const enabledSaveButton = await page.$( enabledSavePostSelector );
+			const enabledSaveButton = await page.waitForSelector(
+				enabledSavePostSelector
+			);
 			expect( enabledSaveButton ).not.toBeNull();
 			// Verify multi-entity saving not enabled.
 			await assertMultiSaveDisabled();
 			await assertExistance( saveA11ySelector, false );
 
-			// Update template part.
-			await page.click( templatePartSelector );
-			await page.click(
-				`${ templatePartSelector } .wp-block[data-type="core/paragraph"]`
-			);
-			await page.keyboard.type( '...some more words...' );
-			await page.keyboard.press( 'Enter' );
+			// Update reusable block again.
+			await page.click( 'p[data-type="core/paragraph"]' );
+			// We need to click again due to the clickthrough overlays in reusable blocks.
+			await page.click( 'p[data-type="core/paragraph"]' );
+			await page.keyboard.type( 'R!' );
 
 			// Multi-entity saving should be enabled.
 			await assertMultiSaveEnabled();
@@ -185,7 +195,9 @@ describe( 'Multi-entity save flow', () => {
 
 			await insertBlock( 'Site Title' );
 			// Ensure title is retrieved before typing.
-			await page.waitForXPath( '//a[contains(text(), "gutenberg")]' );
+			await page.waitForXPath(
+				`//a[contains(text(), "${ originalSiteTitle }")]`
+			);
 			const editableSiteTitleSelector =
 				'.wp-block-site-title a[contenteditable="true"]';
 			await page.waitForSelector( editableSiteTitleSelector );
@@ -211,23 +223,16 @@ describe( 'Multi-entity save flow', () => {
 			await checkboxInputs[ 1 ].click();
 			await page.click( entitiesSaveSelector );
 
+			// Wait for the snackbar notice that the post has been published.
+			await page.waitForSelector( '.components-snackbar' );
+
 			await clickButton( 'Update…' );
 			await page.waitForSelector( savePanelSelector );
+
+			await page.waitForSelector( checkboxInputSelector );
 			checkboxInputs = await page.$$( checkboxInputSelector );
-			expect( checkboxInputs ).toHaveLength( 1 );
 
-			// Reset site entity to default value to not affect other tests.
-			await page.evaluate( () => {
-				wp.data
-					.dispatch( 'core' )
-					.editEntityRecord( 'root', 'site', undefined, {
-						title: 'gutenberg',
-						description: 'Just another WordPress site',
-					} );
-				wp.data
-					.dispatch( 'core' )
-					.saveEditedEntityRecord( 'root', 'site', undefined );
-			} );
+			expect( checkboxInputs ).toHaveLength( 1 );
 		} );
 	} );
 
@@ -238,6 +243,19 @@ describe( 'Multi-entity save flow', () => {
 		const disabledSaveSiteSelector = `${ saveSiteSelector }[aria-disabled=true]`;
 		const saveA11ySelector = '.edit-site-editor__toggle-save-panel-button';
 
+		const saveAllChanges = async () => {
+			// Clicking button should open panel with boxes checked.
+			await page.click( activeSaveSiteSelector );
+			await page.waitForSelector( savePanelSelector );
+			await assertAllBoxesChecked();
+
+			// Save a11y button should not be present with save panel open.
+			await assertExistance( saveA11ySelector, false );
+
+			// Saving should result in items being saved.
+			await page.click( entitiesSaveSelector );
+		};
+
 		it( 'Save flow should work as expected', async () => {
 			// Navigate to site editor.
 			await siteEditor.visit( {
@@ -249,7 +267,7 @@ describe( 'Multi-entity save flow', () => {
 			// Select the header template part via list view.
 			await page.click( '.edit-site-header-toolbar__list-view-toggle' );
 			const headerTemplatePartListViewButton = await page.waitForXPath(
-				'//button[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
+				'//a[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
 			);
 			headerTemplatePartListViewButton.click();
 			await page.click( 'button[aria-label="Close list view sidebar"]' );
@@ -267,20 +285,55 @@ describe( 'Multi-entity save flow', () => {
 			// Save a11y button should be present.
 			await assertExistance( saveA11ySelector, true );
 
-			// Clicking button should open panel with boxes checked.
-			await page.click( activeSaveSiteSelector );
-			await page.waitForSelector( savePanelSelector );
-			await assertAllBoxesChecked();
+			// Save all changes.
+			await saveAllChanges();
 
-			// Save a11y button should not be present with save panel open.
-			await assertExistance( saveA11ySelector, false );
-
-			// Saving should result in items being saved.
-			await page.click( entitiesSaveSelector );
 			const disabledButton = await page.waitForSelector(
 				disabledSaveSiteSelector
 			);
 			expect( disabledButton ).not.toBeNull();
 		} );
+
+		it( 'Save flow should allow re-saving after changing the same block attribute', async () => {
+			// Navigate to site editor.
+			await siteEditor.visit( {
+				postId: 'tt1-blocks//index',
+				postType: 'wp_template',
+			} );
+			await siteEditor.disableWelcomeGuide();
+
+			// Insert a paragraph at the bottom.
+			await insertBlock( 'Paragraph' );
+
+			// Open the block settings.
+			await page.click( 'button[aria-label="Settings"]' );
+
+			// Click on font size selector.
+			await page.click( 'button[aria-label="Font size"]' );
+
+			// Click on a different font size.
+			const extraSmallFontSize = await page.waitForXPath(
+				'//li[contains(text(), "Extra small")]'
+			);
+			await extraSmallFontSize.click();
+
+			// Save all changes.
+			await saveAllChanges();
+
+			// Click on font size selector again.
+			await page.click( 'button[aria-label="Font size"]' );
+
+			// Select another font size.
+			const normalFontSize = await page.waitForXPath(
+				'//li[contains(text(), "Normal")]'
+			);
+			await normalFontSize.click();
+
+			// Assert that the save button has been re-enabled.
+			const saveButton = await page.waitForSelector(
+				activeSaveSiteSelector
+			);
+			expect( saveButton ).not.toBeNull();
+		} );
 	} );
 } );