Media Editor: Try a media editor mode in the editor

docs/manifest.json

@@ -1853,6 +1853,12 @@
 		"markdown_source": "../packages/list-reusable-blocks/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/media-editor",
+		"slug": "packages-media-editor",
+		"markdown_source": "../packages/media-editor/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/media-fields",
 		"slug": "packages-media-fields",

lib/experimental/editor-settings.php

@@ -47,6 +47,9 @@ function gutenberg_enable_experiments() {
 	if ( gutenberg_is_experiment_enabled( 'active_templates' ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalTemplateActivate = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-media-editor', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalMediaEditor = true', 'before' );
+	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );

lib/experiments-page.php

@@ -247,6 +247,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-media-editor',
+		__( 'Media Editor', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enables editing media items (attachments) directly in the block editor with a dedicated media preview and metadata panel.', 'gutenberg' ),
+			'id'    => 'gutenberg-media-editor',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'

packages/block-library/src/image/image.js

@@ -335,6 +335,7 @@ export default function Image( {
 		[ clientId ]
 	);
 	const { getBlock, getSettings } = useSelect( blockEditorStore );
+	const onNavigateToEntityRecord = getSettings().onNavigateToEntityRecord;
 
 	const { replaceBlocks, toggleSelection } = useDispatch( blockEditorStore );
 	const { createErrorNotice, createSuccessNotice } =
@@ -725,6 +726,25 @@ export default function Image( {
 			</BlockControls>
 		);
 
+	const editMediaButton = id &&
+		isSingleSelected &&
+		! isEditingImage &&
+		onNavigateToEntityRecord &&
+		window?.__experimentalMediaEditor && (
+			<BlockControls group="other">
+				<ToolbarButton
+					onClick={ () => {
+						onNavigateToEntityRecord( {
+							postId: id,
+							postType: 'attachment',
+						} );
+					} }
+				>
+					{ __( 'Edit media' ) }
+				</ToolbarButton>
+			</BlockControls>
+		);
+
 	const controls = (
 		<>
 			{ showBlockControls && (
@@ -1086,6 +1106,7 @@ export default function Image( {
 		return (
 			<>
 				{ mediaReplaceFlow }
+				{ editMediaButton }
 				{ /* Add all controls if the image attributes are connected. */ }
 				{ metadata?.bindings ? controls : sizeControls }
 			</>
@@ -1123,6 +1144,7 @@ export default function Image( {
 	return (
 		<>
 			{ mediaReplaceFlow }
+			{ editMediaButton }
 			{ controls }
 			{ featuredImageControl }
 			{ img }

packages/edit-site/src/components/editor/use-resolve-edited-entity.js

@@ -25,6 +25,7 @@ const postTypesWithoutParentTemplate = [
 	TEMPLATE_PART_POST_TYPE,
 	NAVIGATION_POST_TYPE,
 	PATTERN_TYPES.user,
+	...( window?.__experimentalMediaEditor ? [ 'attachment' ] : [] ),
 ];
 
 const authorizedPostTypes = [ 'page', 'post' ];
@@ -45,6 +46,11 @@ function getPostType( name ) {
 		postType = 'page';
 	} else if ( name === 'post-item' || name === 'posts' ) {
 		postType = 'post';
+	} else if (
+		name === 'attachment-item' &&
+		window?.__experimentalMediaEditor
+	) {
+		postType = 'attachment';
 	}
 
 	return postType;

packages/edit-site/src/components/site-editor-routes/attachment-item.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+
+export const attachmentItemRoute = {
+	name: 'attachment-item',
+	path: '/attachment/:postId',
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Media' ) }
+				backPath="/"
+				// Empty content - no sidebar list needed for attachments
+				content={ null }
+			/>
+		),
+		mobile: <Editor />,
+		preview: <Editor />,
+	},
+};

packages/edit-site/src/components/site-editor-routes/index.js

@@ -20,10 +20,12 @@ import { templatesRoute } from './templates';
 import { templateItemRoute } from './template-item';
 import { pagesRoute } from './pages';
 import { pageItemRoute } from './page-item';
+import { attachmentItemRoute } from './attachment-item';
 import { stylebookRoute } from './stylebook';
 import { notFoundRoute } from './notfound';
 
 const routes = [
+	...( window?.__experimentalMediaEditor ? [ attachmentItemRoute ] : [] ),
 	pageItemRoute,
 	pagesRoute,
 	templateItemRoute,

packages/editor/package.json

@@ -79,6 +79,8 @@
 		"@wordpress/interface": "file:../interface",
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",
+		"@wordpress/media-editor": "file:../media-editor",
+		"@wordpress/media-fields": "file:../media-fields",
 		"@wordpress/media-utils": "file:../media-utils",
 		"@wordpress/notices": "file:../notices",
 		"@wordpress/patterns": "file:../patterns",

packages/editor/src/components/document-tools/index.js

@@ -35,13 +35,15 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 		inserterSidebarToggleRef,
 		listViewToggleRef,
 		showIconLabels,
+		postType,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const {
 			isListViewOpened,
 			getEditorMode,
 			getInserterSidebarToggleRef,
 			getListViewToggleRef,
+			getCurrentPostType,
 		} = unlock( select( editorStore ) );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
 
@@ -56,6 +58,7 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 			showIconLabels: get( 'core', 'showIconLabels' ),
 			isDistractionFree: get( 'core', 'distractionFree' ),
 			isVisualMode: getEditorMode() === 'visual',
+			postType: getCurrentPostType(),
 		};
 	}, [] );
 
@@ -74,6 +77,12 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 
 	const isWideViewport = useViewportMatch( 'wide' );
 
+	// Determine if we should show block-related tools.
+	// For attachments, we hide these tools since there are no blocks.
+	// This condition can be easily modified if we want to show these tools for attachments in the future.
+	const shouldShowBlockTools =
+		postType !== 'attachment' || ! window?.__experimentalMediaEditor;
+
 	/* translators: accessibility text for the editor toolbar */
 	const toolbarAriaLabel = __( 'Document tools' );
 
@@ -109,7 +118,7 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 			variant="unstyled"
 		>
 			<div className="editor-document-tools__left">
-				{ ! isDistractionFree && (
+				{ shouldShowBlockTools && ! isDistractionFree && (
 					<ToolbarButton
 						ref={ inserterSidebarToggleRef }
 						className="editor-document-tools__inserter-toggle"
@@ -124,40 +133,45 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 						aria-expanded={ isInserterOpened }
 					/>
 				) }
-				{ ( isWideViewport || ! showIconLabels ) && (
-					<>
-						<ToolbarItem
-							as={ EditorHistoryUndo }
-							showTooltip={ ! showIconLabels }
-							variant={ showIconLabels ? 'tertiary' : undefined }
-							size="compact"
-						/>
-						<ToolbarItem
-							as={ EditorHistoryRedo }
-							showTooltip={ ! showIconLabels }
-							variant={ showIconLabels ? 'tertiary' : undefined }
-							size="compact"
-						/>
-						{ ! isDistractionFree && (
-							<ToolbarButton
-								className="editor-document-tools__document-overview-toggle"
-								icon={ listView }
-								disabled={ disableBlockTools }
-								isPressed={ isListViewOpen }
-								/* translators: button label text should, if possible, be under 16 characters. */
-								label={ __( 'Document Overview' ) }
-								onClick={ toggleListView }
-								shortcut={ listViewShortcut }
+				{ shouldShowBlockTools &&
+					( isWideViewport || ! showIconLabels ) && (
+						<>
+							<ToolbarItem
+								as={ EditorHistoryUndo }
 								showTooltip={ ! showIconLabels }
 								variant={
 									showIconLabels ? 'tertiary' : undefined
 								}
-								aria-expanded={ isListViewOpen }
-								ref={ listViewToggleRef }
+								size="compact"
 							/>
-						) }
-					</>
-				) }
+							<ToolbarItem
+								as={ EditorHistoryRedo }
+								showTooltip={ ! showIconLabels }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
+								size="compact"
+							/>
+							{ ! isDistractionFree && (
+								<ToolbarButton
+									className="editor-document-tools__document-overview-toggle"
+									icon={ listView }
+									disabled={ disableBlockTools }
+									isPressed={ isListViewOpen }
+									/* translators: button label text should, if possible, be under 16 characters. */
+									label={ __( 'Document Overview' ) }
+									onClick={ toggleListView }
+									shortcut={ listViewShortcut }
+									showTooltip={ ! showIconLabels }
+									variant={
+										showIconLabels ? 'tertiary' : undefined
+									}
+									aria-expanded={ isListViewOpen }
+									ref={ listViewToggleRef }
+								/>
+							) }
+						</>
+					) }
 			</div>
 		</NavigableToolbar>
 	);