Media & Text Block: Add a Media section to the block inspector panel

packages/block-editor/src/components/media-replace-flow/index.jsx

@@ -227,7 +227,10 @@ const MediaReplaceFlow = ( {
 						{ onToggleFeaturedImage && (
 							<MenuItem
 								icon={ postFeaturedImage }
-								onClick={ onToggleFeaturedImage }
+								onClick={ () => {
+									onToggleFeaturedImage();
+									onClose();
+								} }
 								isPressed={ useFeaturedImage }
 							>
 								{ __( 'Use featured image' ) }

packages/block-library/src/media-text/constants.js

@@ -1,5 +1,6 @@
 import { _x } from '@wordpress/i18n';
 
+export const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
 export const DEFAULT_MEDIA_SIZE_SLUG = 'full';
 export const WIDTH_CONSTRAINT_PERCENTAGE = 15;
 export const LINK_DESTINATION_NONE = 'none';

packages/block-library/src/media-text/edit.jsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useState, useRef } from '@wordpress/element';
 import {
 	BlockControls,
@@ -26,8 +26,11 @@ import {
 import { isBlobURL, getBlobTypeByURL } from '@wordpress/blob';
 import { pullLeft, pullRight } from '@wordpress/icons';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+import { getFilename } from '@wordpress/url';
 import MediaContainer from './media-container';
 import {
+	ALLOWED_MEDIA_TYPES,
 	DEFAULT_MEDIA_SIZE_SLUG,
 	WIDTH_CONSTRAINT_PERCENTAGE,
 	LINK_DESTINATION_NONE,
@@ -36,6 +39,7 @@ import {
 } from './constants';
 import { unlock } from '../lock-unlock';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import { MediaControl } from '../utils/media-control';
 
 const { ResolutionTool } = unlock( blockEditorPrivateApis );
 
@@ -332,6 +336,46 @@ function MediaTextEdit( {
 	};
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	const onUploadError = ( message ) => {
+		createErrorNotice( message, { type: 'snackbar' } );
+	};
+
+	const mediaInspectorPanel = isSelected ? (
+		<InspectorControls group="content">
+			<ToolsPanel
+				label={ __( 'Media' ) }
+				resetAll={ () => onSelectMedia( undefined ) }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
+					label={ __( 'Media' ) }
+					hasValue={ () => !! mediaUrl || !! useFeaturedImage }
+					onDeselect={ () => onSelectMedia( undefined ) }
+					isShownByDefault
+				>
+					<MediaControl
+						mediaId={ mediaId }
+						mediaUrl={ mediaUrl || featuredImageURL }
+						filename={
+							image?.media_details?.sizes?.full?.file ||
+							image?.slug ||
+							getFilename( mediaUrl )
+						}
+						allowedTypes={ ALLOWED_MEDIA_TYPES }
+						onSelect={ onSelectMedia }
+						onError={ onUploadError }
+						onReset={ () => onSelectMedia( undefined ) }
+						useFeaturedImage={ useFeaturedImage }
+						onToggleFeaturedImage={ toggleUseFeaturedImage }
+						emptyLabel={ __( 'Add media' ) }
+					/>
+				</ToolsPanelItem>
+			</ToolsPanel>
+		</InspectorControls>
+	) : null;
+
 	const mediaTextGeneralSettings = (
 		<ToolsPanel
 			label={ __( 'Settings' ) }
@@ -480,6 +524,7 @@ function MediaTextEdit( {
 
 	return (
 		<>
+			{ mediaInspectorPanel }
 			<InspectorControls>{ mediaTextGeneralSettings }</InspectorControls>
 			<BlockControls group="block">
 				{ blockEditingMode === 'default' && (

packages/block-library/src/media-text/media-container.jsx

@@ -15,11 +15,11 @@ import { createBlobURL, isBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
 import { media as icon } from '@wordpress/icons';
 import { imageFillStyles } from './image-fill';
+import { ALLOWED_MEDIA_TYPES } from './constants';
 
 /**
  * Constants
  */
-const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
 const noop = () => {};
 
 const ResizableBoxContainer = forwardRef(

packages/block-library/src/utils/media-control.jsx

@@ -76,16 +76,18 @@ export function MediaControlPreview( {
  * MediaControl - Complete media selection control for inspector panels
  *
  * @param {Object}   props
- * @param {number}   props.mediaId      Media attachment ID
- * @param {string}   props.mediaUrl     Media URL
- * @param {string}   props.filename     Filename to display
- * @param {Array}    props.allowedTypes Allowed media types
- * @param {Function} props.onSelect     Callback when media selected
- * @param {Function} props.onSelectURL  Callback when URL entered
- * @param {Function} props.onError      Error callback
- * @param {Function} props.onReset      Reset/remove callback
- * @param {boolean}  props.isUploading  Whether upload in progress
- * @param {string}   props.emptyLabel   Label when no media (default: 'Add media')
+ * @param {number}   props.mediaId               Media attachment ID
+ * @param {string}   props.mediaUrl              Media URL
+ * @param {string}   props.filename              Filename to display
+ * @param {Array}    props.allowedTypes          Allowed media types
+ * @param {Function} props.onSelect              Callback when media selected
+ * @param {Function} props.onSelectURL           Callback when URL entered
+ * @param {Function} props.onError               Error callback
+ * @param {Function} props.onReset               Reset/remove callback
+ * @param {boolean}  props.isUploading           Whether upload in progress
+ * @param {string}   props.emptyLabel            Label when no media (default: 'Add media')
+ * @param {boolean}  props.useFeaturedImage      Whether the featured image is in use
+ * @param {Function} props.onToggleFeaturedImage Callback toggling the featured image
  * @return {Element} Media control component
  */
 export function MediaControl( {
@@ -99,6 +101,8 @@ export function MediaControl( {
 	onReset,
 	isUploading = false,
 	emptyLabel = __( 'Media' ),
+	useFeaturedImage,
+	onToggleFeaturedImage,
 } ) {
 	const { getSettings } = useSelect( blockEditorStore );
 	const onFilesDrop = ( filesList ) => {
@@ -131,6 +135,8 @@ export function MediaControl( {
 				onSelect={ onSelect }
 				onSelectURL={ onSelectURL }
 				onError={ onError }
+				useFeaturedImage={ useFeaturedImage }
+				onToggleFeaturedImage={ onToggleFeaturedImage }
 				name={
 					<MediaControlPreview
 						url={ mediaUrl }