diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js index 4a0fe64ae952b5..d4eed74a459812 100644 --- a/packages/edit-site/src/components/post-edit/index.js +++ b/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', }, }, { diff --git a/packages/fields/README.md b/packages/fields/README.md index 7747c8bbaa324c..35931e47f58ade 100644 --- a/packages/fields/README.md +++ b/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_ diff --git a/packages/fields/src/components/media-edit/index.tsx b/packages/fields/src/components/media-edit/index.tsx index 0b16fc38ae70ed..4d73c5de49fdd3 100644 --- a/packages/fields/src/components/media-edit/index.tsx +++ b/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} 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} 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 ( - - { field.label } - + { field.label && + ( hideLabelFromVision ? ( + + { field.label } + + ) : ( + + { field.label } + + ) ) } { !! attachments?.length && ( { attachments.map( ( attachment ) => ( diff --git a/packages/fields/src/components/media-edit/style.scss b/packages/fields/src/components/media-edit/style.scss index 8a26816a723ec4..9e5e50eab98708 100644 --- a/packages/fields/src/components/media-edit/style.scss +++ b/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; diff --git a/packages/fields/src/types.ts b/packages/fields/src/types.ts index 4109c31b4c826b..25baf30a7ae5b6 100644 --- a/packages/fields/src/types.ts +++ b/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']).