Enter editing mode via Enter or Spacebar

There was a regression in being able to enter editing mode via keydown on the site editor due to the onKeydown event being blocked. This allows an onKeydown prop to be fired if passed to the iframe. I'm not positive this is the best way.

I also added a test to check for this as well as general keyboard navigation of the site editor in view mode.

packages/block-editor/src/components/iframe/index.js

@@ -273,13 +273,16 @@ function Iframe( {
 				src={ src }
 				title={ __( 'Editor canvas' ) }
 				onKeyDown={ ( event ) => {
+					if ( props.onKeyDown ) {
+						props.onKeyDown( event );
+					}
 					// If the event originates from inside the iframe, it means
 					// it bubbled through the portal, but only with React
 					// events. We need to to bubble native events as well,
 					// though by doing so we also trigger another React event,
 					// so we need to stop the propagation of this event to avoid
 					// duplication.
-					if (
+					else if (
 						event.currentTarget.ownerDocument !==
 						event.target.ownerDocument
 					) {

test/e2e/specs/site-editor/navigation.spec.js

@@ -0,0 +1,80 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Site editor navigation', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test( 'Can use keyboard to navigate the site editor', async ( {
+		admin,
+		page,
+		pageUtils,
+	} ) => {
+		await admin.visitSiteEditor();
+
+		// Navigate to the iframe
+		await pageUtils.pressKeys( 'Tab', { times: 3 } );
+		// Open the command palette via button press
+		await expect( page.getByLabel( 'Open command palette' ) ).toBeFocused();
+		await pageUtils.pressKeys( 'Enter' );
+		await expect(
+			page.getByPlaceholder( 'Search for commands' )
+		).toBeFocused();
+		// Return focus to the button
+		await pageUtils.pressKeys( 'Escape' );
+		await expect( page.getByLabel( 'Open command palette' ) ).toBeFocused();
+		// Open it again with Command + K
+		await pageUtils.pressKeys( 'primary+k' );
+		await expect(
+			page.getByPlaceholder( 'Search for commands' )
+		).toBeFocused();
+		await pageUtils.pressKeys( 'Escape' );
+		await expect( page.getByLabel( 'Open command palette' ) ).toBeFocused();
+		// Go to the Pages button
+		await pageUtils.pressKeys( 'Tab', { times: 4 } );
+		await expect(
+			page.getByRole( 'button', { name: 'Pages' } )
+		).toBeFocused();
+		await pageUtils.pressKeys( 'Enter' );
+		// We should be in the Pages sidebar
+		await expect(
+			page.getByRole( 'button', { name: 'Back', exact: true } )
+		).toBeFocused();
+		await pageUtils.pressKeys( 'Enter' );
+		// Go back to the main navigation
+		await expect(
+			page.getByRole( 'button', { name: 'Pages' } )
+		).toBeFocused();
+		await pageUtils.pressKeys( 'Tab', { times: 6 } );
+		// Getting the actual iframe as a cleaner locator was suprisingly tricky,
+		// so we're using a css selector with .is-focused which should be present when the iframe has focus.
+		await expect(
+			page.locator( 'iframe[name="editor-canvas"].is-focused' )
+		).toBeFocused();
+
+		// Enter into editing mode
+		await pageUtils.pressKeys( 'Enter' );
+
+		// We should now be in editing mode
+		await pageUtils.pressKeys( 'Shift+Tab', { times: 9 } );
+
+		// Open the sidebar again
+		await expect(
+			page.getByRole( 'button', {
+				name: 'Open Navigation',
+				exact: true,
+			} )
+		).toBeFocused();
+		await pageUtils.pressKeys( 'Enter' );
+		await expect(
+			page.getByLabel( 'Go to the Dashboard' ).first()
+		).toBeFocused();
+	} );
+} );