Cover Block: Add a Media section to the block inspector panel

packages/block-library/src/cover/edit/index.jsx

@@ -703,10 +703,13 @@ function CoverEdit( {
 			setOverlayColor={ onSetOverlayColor }
 			coverRef={ ref }
 			currentSettings={ currentSettings }
+			onSelectMedia={ onSelectMedia }
+			onUploadError={ onUploadError }
 			toggleUseFeaturedImage={ toggleUseFeaturedImage }
 			updateDimRatio={ onUpdateDimRatio }
 			onClearMedia={ onClearMedia }
 			featuredImage={ media }
+			isSelected={ isSelected }
 		/>
 	);
 

packages/block-library/src/cover/edit/inspector-controls.jsx

@@ -23,8 +23,13 @@
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { getFilename } from '@wordpress/url';
 import { Link } from '@wordpress/ui';
-import { COVER_MIN_HEIGHT, mediaPosition } from '../shared';
+import {
+	ALLOWED_MEDIA_TYPES,
+	COVER_MIN_HEIGHT,
+	mediaPosition,
+} from '../shared';
 import { unlock } from '../../lock-unlock';
 import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
 import {
@@ -35,6 +40,7 @@
 } from '../../utils/style-state';
 import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants';
 import PosterImage from '../../utils/poster-image';
+import { MediaControl } from '../../utils/media-control';
 
 const {
 	cleanEmptyObject,
@@ -98,8 +104,13 @@
 	setOverlayColor,
 	coverRef,
 	currentSettings,
+	onSelectMedia,
+	onUploadError,
+	toggleUseFeaturedImage,
 	updateDimRatio,
+	onClearMedia,
 	featuredImage,
+	isSelected,
 } ) {
 	const {
 		useFeaturedImage,
@@ -138,6 +149,24 @@
 		},
 		[ clientId ]
 	);
+	/*
+	 * The block only resolves the featured image record, so the record of a
+	 * media selection of its own is resolved here to name it in the panel.
+	 */
+	const selectedMedia = useSelect(
+		( select ) =>
+			id && ! useFeaturedImage
+				? select( coreStore ).getEntityRecord(
+						'postType',
+						'attachment',
+						id,
+						{ context: 'view' }
+				  )
+				: undefined,
+		[ id, useFeaturedImage ]
+	);
+	const mediaRecord = useFeaturedImage ? featuredImage : selectedMedia;
+
 	const hasSelectedStyleState =
 		! isDefaultBlockStyleState( selectedStyleState );
 	const selectedStyleStateKey = getStyleStateKey( selectedStyleState );
@@ -277,8 +306,49 @@
 
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
+	/*
+	 * Rendered whether or not media has been set, so that a cover in its setup
+	 * state can be given media from the inspector as well as from the toolbar.
+	 * The settings below stay behind their own condition, having nothing to
+	 * configure until there is media to configure.
+	 */
+	const mediaInspectorPanel = (
+		<InspectorControls group="content">
+			<ToolsPanel
+				label={ __( 'Media' ) }
+				resetAll={ onClearMedia }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
+					label={ __( 'Media' ) }
+					hasValue={ () => !! url || !! useFeaturedImage }
+					onDeselect={ onClearMedia }
+					isShownByDefault
+				>
+					<MediaControl
+						mediaId={ id }
+						mediaUrl={ url }
+						filename={
+							mediaRecord?.media_details?.sizes?.full?.file ||
+							mediaRecord?.slug ||
+							getFilename( url )
+						}
+						allowedTypes={ ALLOWED_MEDIA_TYPES }
+						onSelect={ onSelectMedia }
+						onError={ onUploadError }
+						onReset={ onClearMedia }
+						useFeaturedImage={ useFeaturedImage }
+						onToggleFeaturedImage={ toggleUseFeaturedImage }
+						emptyLabel={ __( 'Add media' ) }
+					/>
+				</ToolsPanelItem>
+			</ToolsPanel>
+		</InspectorControls>
+	);
+
 	return (
 		<>
+			{ isSelected && mediaInspectorPanel }
 			{ ( !! url || useFeaturedImage ) && (
 				<InspectorControls>
 					<ToolsPanel

packages/block-library/src/cover/test/edit.browser.test.js

@@ -66,6 +66,16 @@ async function openStylesTabIfAvailable() {
 	}
 }
 
+async function openSettingsTabIfAvailable() {
+	const settingsTab = screen.queryByRole( 'tab', {
+		name: 'Settings',
+	} );
+
+	if ( settingsTab ) {
+		await userEvent.click( settingsTab );
+	}
+}
+
 describe( 'Cover block', () => {
 	beforeEach( () => registerCoreBlocks() );
 
@@ -207,11 +217,12 @@ describe( 'Cover block', () => {
 					} )
 				).not.toBeInTheDocument();
 			} );
-			test( 'does not display settings tab when media settings are empty', async () => {
+			test( 'does not display media settings panel when media settings are empty', async () => {
 				await createAndSelectBlock();
 
+				await openSettingsTabIfAvailable();
 				expect(
-					screen.queryByRole( 'tab', {
+					screen.queryByRole( 'heading', {
 						name: 'Settings',
 					} )
 				).not.toBeInTheDocument();
@@ -227,6 +238,7 @@ describe( 'Cover block', () => {
 				} );
 
 				await selectBlock( 'Block: Cover' );
+				await openSettingsTabIfAvailable();
 				expect(
 					await screen.findByRole( 'heading', { name: 'Settings' } )
 				).toBeInTheDocument();
@@ -241,6 +253,7 @@ describe( 'Cover block', () => {
 				'has-parallax'
 			);
 			await selectBlock( 'Block: Cover' );
+			await openSettingsTabIfAvailable();
 			await userEvent.click(
 				await screen.findByLabelText( 'Fixed background' )
 			);
@@ -257,6 +270,7 @@ describe( 'Cover block', () => {
 				'is-repeated'
 			);
 			await selectBlock( 'Block: Cover' );
+			await openSettingsTabIfAvailable();
 			await userEvent.click(
 				await screen.findByLabelText( 'Repeated background' )
 			);
@@ -271,6 +285,7 @@ describe( 'Cover block', () => {
 			} );
 
 			await selectBlock( 'Block: Cover' );
+			await openSettingsTabIfAvailable();
 			await userEvent.clear( await screen.findByLabelText( 'Left' ) );
 			await userEvent.type( screen.getByLabelText( 'Left' ), '100' );
 
@@ -288,6 +303,7 @@ describe( 'Cover block', () => {
 			} );
 
 			await selectBlock( 'Block: Cover' );
+			await openSettingsTabIfAvailable();
 			await userEvent.type(
 				await screen.findByLabelText( 'Alternative text' ),
 				'Me'

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

@@ -403,6 +403,9 @@ test.describe( 'Cover', () => {
 
 		await editor.selectBlocks( coverBlock );
 
+		// The focal point picker is in the Settings tab of the block inspector.
+		await page.getByRole( 'tab', { name: 'Settings' } ).click();
+
 		// The focal point picker renders as a `legend`-labelled group, so both
 		// spinbuttons are resolved through it.
 		const focalPointGroup = page.getByRole( 'group', {