Media Editor Route: Try adding undo/redo and save/cancel actions to the header

packages/media-editor/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Enhancements
 
 -   Add a `scope` prop to `MediaEditor` so each frame can keep its own persisted details-sidebar visibility ([#81559](https://github.com/WordPress/gutenberg/pull/81559)).
+-   Expose the header, history (reset/undo/redo), save (cancel/save) and image control clusters as `MediaEditor` sub-components, so each frame imports and arranges them to suit its own chrome. `renderFrame` now passes data only: `footerActions` is gone, `footerLayout` is now `layout`, and `isImage` is new. `showCloseButton` moves from `MediaEditor` to `MediaEditor.HeaderActions` ([#81563](https://github.com/WordPress/gutenberg/pull/81563)).
 
 ### Bug Fixes
 

packages/media-editor/src/components/media-editor-modal/index.tsx

@@ -26,6 +26,44 @@ interface MediaEditorModalProps {
 	aspectRatioPresets?: AspectRatioPreset[];
 }
 
+interface ModalFooterProps {
+	layout: 'wide' | 'narrow';
+}
+
+/**
+ * The modal's footer chrome. The fine-rotation ruler always lives under the
+ * canvas (in `media-editor__content`), never here, so it stays constrained to
+ * the canvas column at every viewport. One JSX tree per layout; DOM order
+ * matches visual order.
+ */
+function ModalFooter( { layout }: ModalFooterProps ) {
+	return (
+		<div
+			className={ `media-editor-modal__footer is-${ layout }` }
+			role="region"
+			aria-label={ __( 'Editor actions' ) }
+		>
+			{ layout === 'wide' ? (
+				// Sidebar is a column: the image controls live in the Crop
+				// panel, so the footer is just History + Cancel/Save.
+				<>
+					<MediaEditor.HistoryActions />
+					<MediaEditor.SaveActions />
+				</>
+			) : (
+				// Sidebar collapsed: the image controls drop into the footer.
+				<>
+					<MediaEditor.ImageControls />
+					<div className="media-editor-modal__footer-row">
+						<MediaEditor.HistoryActions />
+						<MediaEditor.SaveActions />
+					</div>
+				</>
+			) }
+		</div>
+	);
+}
+
 export function MediaEditorModal( {
 	fields = [],
 	aspectRatioPresets,
@@ -71,7 +109,6 @@ export function MediaEditorModal( {
 			id={ id }
 			fields={ fields }
 			aspectRatioPresets={ aspectRatioPresets }
-			showCloseButton
 			shouldCloseOnEsc
 			noticesClassName="media-editor-modal__snackbar"
 			noticesPortalElement={ portalElement }
@@ -107,9 +144,7 @@ export function MediaEditorModal( {
 			} }
 			renderFrame={ ( {
 				children,
-				headerActions,
-				footerActions,
-				footerLayout,
+				layout,
 				onRequestClose,
 				onKeyDown,
 				shouldCloseOnClickOutside,
@@ -126,16 +161,12 @@ export function MediaEditorModal( {
 						shouldCloseOnClickOutside={ shouldCloseOnClickOutside }
 						onKeyDown={ onKeyDown }
 						onRequestClose={ onRequestClose }
-						headerActions={ headerActions }
+						headerActions={
+							<MediaEditor.HeaderActions showCloseButton />
+						}
 					>
 						{ children }
-						<div
-							className={ `media-editor-modal__footer is-${ footerLayout }` }
-							role="region"
-							aria-label={ __( 'Editor actions' ) }
-						>
-							{ footerActions }
-						</div>
+						<ModalFooter layout={ layout } />
 					</Modal>
 				</ShortcutProvider>
 			) }

packages/media-editor/src/components/media-editor-modal/style.scss

@@ -46,8 +46,8 @@
 		// Panel mode: the footer holds only History (left) and
 		// Cancel/Save (right). `margin-left: auto` pins the actions to the
 		// right edge whether or not History renders (e.g. non-image
-		// attachments show only `FooterActions`).
-		.media-editor__footer-actions {
+		// attachments show only `SaveActions`).
+		.media-editor__save-actions {
 			margin-left: auto;
 		}
 	}
@@ -76,7 +76,7 @@
 	gap: $grid-unit-20;
 
 	.media-editor-image-controls,
-	.media-editor__footer-actions {
+	.media-editor__save-actions {
 		margin-left: auto;
 	}
 }
@@ -85,9 +85,13 @@
 // they read as live alongside the Reset/Cancel/Save actions. Disabled
 // buttons (rendered with `aria-disabled` via `accessibleWhenDisabled`)
 // keep the default muted icon colour.
+// Scoped to the modal: the package ships one stylesheet, so an unscoped
+// selector would also colour the history cluster in frames that place it in
+// their own chrome (the wp-admin route puts it in the page header, where the
+// neutral icon colour matches the header's other buttons).
 // NOTE: overrides @wordpress/components Button internals (`.components-button`,
 // `.has-icon`), scoped to our history-actions wrapper. Update if renamed.
-.media-editor__history-actions .components-button.has-icon:not([aria-disabled="true"]) {
+.media-editor-modal .media-editor__history-actions .components-button.has-icon:not([aria-disabled="true"]) {
 	color: var(--wp-admin-theme-color);
 }