Add label to MediaEdit component

packages/edit-site/src/components/post-edit/index.js

@@ -14,13 +14,13 @@ import { store as coreDataStore } from '@wordpress/core-data';
 import { __experimentalVStack as VStack } from '@wordpress/components';
 import { useState, useMemo, useEffect } from '@wordpress/element';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 import usePatternSettings from '../page-patterns/use-pattern-settings';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 const { usePostFields, PostCardPanel } = unlock( editorPrivateApis );
 
@@ -83,6 +83,7 @@ function PostEditForm( { postType, postId } ) {
 					id: 'featured_media',
 					layout: {
 						type: 'regular',
+						labelPosition: 'none',
 					},
 				},
 				{

packages/fields/README.md

@@ -101,6 +101,7 @@ _Parameters_
 -   _props.onChange_ `Function`: - Callback function when the media selection changes.
 -   _props.allowedTypes_ `[string[]]`: - Array of allowed media types. Default `['image']`.
 -   _props.multiple_ `[boolean]`: - Whether to allow multiple media selections. Default `false`.
+-   _props.hideLabelFromVision_ `[boolean]`: - Whether the label should be hidden from vision.
 
 _Returns_
 

packages/fields/src/components/media-edit/index.tsx

@@ -7,6 +7,7 @@ import {
 	__experimentalText as Text,
 	__experimentalTruncate as Truncate,
 	__experimentalVStack as VStack,
+	BaseControl,
 	Tooltip,
 	VisuallyHidden,
 } from '@wordpress/components';
@@ -162,12 +163,13 @@ function MediaPreview( {
  *
  * @template Item - The type of the item being edited.
  *
- * @param {MediaEditProps<Item>} props                - The component props.
- * @param {Item}                 props.data           - The item being edited.
- * @param {Object}               props.field          - The field configuration with getValue and setValue methods.
- * @param {Function}             props.onChange       - Callback function when the media selection changes.
- * @param {string[]}             [props.allowedTypes] - Array of allowed media types. Default `['image']`.
- * @param {boolean}              [props.multiple]     - Whether to allow multiple media selections. Default `false`.
+ * @param {MediaEditProps<Item>} props                       - The component props.
+ * @param {Item}                 props.data                  - The item being edited.
+ * @param {Object}               props.field                 - The field configuration with getValue and setValue methods.
+ * @param {Function}             props.onChange              - Callback function when the media selection changes.
+ * @param {string[]}             [props.allowedTypes]        - Array of allowed media types. Default `['image']`.
+ * @param {boolean}              [props.multiple]            - Whether to allow multiple media selections. Default `false`.
+ * @param {boolean}              [props.hideLabelFromVision] - Whether the label should be hidden from vision.
  *
  * @return {JSX.Element} The media edit control component.
  *
@@ -193,6 +195,7 @@ export default function MediaEdit< Item >( {
 	data,
 	field,
 	onChange,
+	hideLabelFromVision,
 	allowedTypes = [ 'image' ],
 	multiple,
 }: MediaEditProps< Item > ) {
@@ -243,9 +246,16 @@ export default function MediaEdit< Item >( {
 						: field.placeholder || __( 'Choose file' );
 					return (
 						<VStack spacing={ 2 }>
-							<VisuallyHidden as="label">
-								{ field.label }
-							</VisuallyHidden>
+							{ field.label &&
+								( hideLabelFromVision ? (
+									<VisuallyHidden as="legend">
+										{ field.label }
+									</VisuallyHidden>
+								) : (
+									<BaseControl.VisualLabel as="legend">
+										{ field.label }
+									</BaseControl.VisualLabel>
+								) ) }
 							{ !! attachments?.length && (
 								<VStack spacing={ 2 }>
 									{ attachments.map( ( attachment ) => (

packages/fields/src/components/media-edit/style.scss

@@ -7,6 +7,8 @@ fieldset.fields__media-edit {
 	padding: 0;
 	margin: 0;
 
+	width: 100%;
+
 	.fields__media-edit-row {
 		display: grid;
 		grid-template-columns: 1fr auto;

packages/fields/src/types.ts

@@ -142,7 +142,7 @@ export type CoreDataError = { message?: string; code?: string };
 export interface MediaEditProps< Item >
 	extends Pick<
 		DataFormControlProps< Item >,
-		'data' | 'field' | 'onChange'
+		'data' | 'field' | 'onChange' | 'hideLabelFromVision'
 	> {
 	/**
 	 * Array of allowed media types (e.g., ['image', 'video']).