Pewarta Proxy

📋 Server Request & Proxy Logs

Loading active proxy settings...
Developed by Khairul Adha (adhexa.id)
Mengambil log server...

⚙️ Pengaturan Proxy Target

Skip to content

Feat: Block Library: Improve the design of MediaControlPreview and MediaControl #76430

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
t-hamano merged 5 commits into from
Mar 16, 2026
Merged

Feat: Block Library: Improve the design of MediaControlPreview and MediaControl #76430

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ee09d98
Add the same style for MediaControlPreview as of BackgroundImageContr…
hbhalodia Mar 12, 2026
ecc6ed8
Add reset icon for image block and update style to match backgroundIm…
hbhalodia Mar 12, 2026
0e084f9
Add focus on reset and general feedbacks on PR
hbhalodia Mar 13, 2026
fe4e9e5
Address feedbacks and nit picks
hbhalodia Mar 13, 2026
909e358
Address feedbacks and nitpicks
hbhalodia Mar 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
242 changes: 143 additions & 99 deletions packages/block-editor/src/hooks/block-fields/media/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,15 @@ import {
__experimentalGrid as Grid,
} from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { focus } from '@wordpress/dom';
import { useRef } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
audio as audioIcon,
image as imageIcon,
media as mediaIcon,
video as videoIcon,
reset as resetIcon,
} from '@wordpress/icons';

/**
Expand All @@ -24,6 +27,23 @@ import { useInspectorPopoverPlacement } from '../use-inspector-popover-placement
import { getMediaSelectKey } from '../../../store/private-keys';
import { store as blockEditorStore } from '../../../store';

/**
* Focuses the toggle button.
*
* @param {Object} containerRef - ref object containing current element
*/
const focusToggleButton = ( containerRef ) => {
// Use requestAnimationFrame to ensure DOM updates are complete.
window.requestAnimationFrame( () => {
const [ toggleButton ] = focus.tabbable.find( containerRef?.current );
if ( ! toggleButton ) {
return;
}

toggleButton.focus();
} );
};

function MediaThumbnail( { data, field, attachment, config } ) {
const { allowedTypes = [], multiple = false } = config || {};

Expand All @@ -36,8 +56,8 @@ function MediaThumbnail( { data, field, attachment, config } ) {
<div className="block-editor-content-only-controls__media-thumbnail">
<img
alt=""
width={ 24 }
height={ 24 }
width={ 20 }
height={ 20 }
Comment thread
hbhalodia marked this conversation as resolved.
src={
attachment.media_type === 'image'
? attachment.source_url
Expand All @@ -55,7 +75,7 @@ function MediaThumbnail( { data, field, attachment, config } ) {
if ( allowedTypes[ 0 ] === 'image' && url ) {
return (
<div className="block-editor-content-only-controls__media-thumbnail">
<img alt="" width={ 24 } height={ 24 } src={ url } />
<img alt="" width={ 20 } height={ 20 } src={ url } />
</div>
);
}
Expand All @@ -72,11 +92,11 @@ function MediaThumbnail( { data, field, attachment, config } ) {
}

if ( icon ) {
return <Icon icon={ icon } size={ 24 } />;
return <Icon icon={ icon } size={ 20 } />;
}
}

return <Icon icon={ mediaIcon } size={ 24 } />;
return <Icon icon={ mediaIcon } size={ 20 } />;
}

export default function Media( { data, field, onChange, config = {} } ) {
Expand Down Expand Up @@ -116,117 +136,141 @@ export default function Media( { data, field, onChange, config = {} } ) {
if ( allowedTypes.length === 1 ) {
const allowedType = allowedTypes[ 0 ];
if ( allowedType === 'image' ) {
chooseItemLabel = __( 'Choose an image…' );
chooseItemLabel = __( 'Image' );
} else if ( allowedType === 'video' ) {
chooseItemLabel = __( 'Choose a video…' );
chooseItemLabel = __( 'Video' );
} else if ( allowedType === 'application' ) {
chooseItemLabel = __( 'Choose a file…' );
chooseItemLabel = __( 'File' );
} else {
chooseItemLabel = __( 'Choose a media item…' );
chooseItemLabel = __( 'Media' );
}
} else {
chooseItemLabel = __( 'Choose a media item…' );
chooseItemLabel = __( 'Media' );
}
const containerRef = useRef();

return (
<MediaUploadCheck>
<MediaReplaceFlow
className="block-editor-content-only-controls__media-replace-flow"
allowedTypes={ allowedTypes }
mediaId={ id }
mediaURL={ url }
multiple={ multiple }
popoverProps={ popoverProps }
onReset={ () => {
onChange(
field.setValue( {
item: data,
value: {},
} )
);
} }
{ ...( useFeaturedImage && {
useFeaturedImage: !! value?.featuredImage,
onToggleFeaturedImage: () => {
<div
ref={ containerRef }
className="block-editor-content-only-controls"
>
<MediaReplaceFlow
className="block-editor-content-only-controls__media-replace-flow"
allowedTypes={ allowedTypes }
mediaId={ id }
mediaURL={ url }
multiple={ multiple }
popoverProps={ popoverProps }
onReset={ () => {
onChange(
field.setValue( {
item: data,
value: {
featuredImage: ! value?.featuredImage,
},
value: {},
} )
);
},
} ) }
onSelect={ ( selectedMedia ) => {
if ( selectedMedia.id && selectedMedia.url ) {
const newValue = {
...selectedMedia,
mediaType: selectedMedia.media_type,
};

// Turn off featured image when manually selecting media
if ( useFeaturedImage ) {
newValue.featuredImage = false;
}
} }
{ ...( useFeaturedImage && {
useFeaturedImage: !! value?.featuredImage,
onToggleFeaturedImage: () => {
onChange(
field.setValue( {
item: data,
value: {
featuredImage: ! value?.featuredImage,
},
} )
);
},
} ) }
onSelect={ ( selectedMedia ) => {
if ( selectedMedia.id && selectedMedia.url ) {
const newValue = {
...selectedMedia,
mediaType: selectedMedia.media_type,
};

onChange(
field.setValue( {
item: data,
value: newValue,
} )
);
}
} }
renderToggle={ ( buttonProps ) => (
<Button
__next40pxDefaultSize
className="block-editor-content-only-controls__media"
{ ...buttonProps }
>
<Grid
rowGap={ 0 }
columnGap={ 8 }
templateColumns="24px 1fr"
className="block-editor-content-only-controls__media-row"
// Turn off featured image when manually selecting media
if ( useFeaturedImage ) {
newValue.featuredImage = false;
}

onChange(
field.setValue( {
item: data,
value: newValue,
} )
);
}
} }
renderToggle={ ( buttonProps ) => (
<Button
__next40pxDefaultSize
className="block-editor-content-only-controls__media"
{ ...buttonProps }
>
{ url && (
<>
<MediaThumbnail
attachment={ attachment }
field={ field }
data={ data }
config={ config }
/>
<span className="block-editor-content-only-controls__media-title">
{
// TODO - truncate long titles or url smartly (e.g. show filename).
attachment?.title?.raw &&
attachment?.title?.raw !== ''
? attachment?.title?.raw
: url
}
</span>
</>
) }
{ ! url && (
<>
<span
className="block-editor-content-only-controls__media-placeholder"
style={ {
width: '24px',
height: '24px',
} }
/>
<span className="block-editor-content-only-controls__media-title">
{ chooseItemLabel }
</span>
</>
) }
</Grid>
</Button>
<Grid
rowGap={ 0 }
columnGap={ 8 }
templateColumns="20px 1fr"
className="block-editor-content-only-controls__media-row"
>
{ url && (
<>
<MediaThumbnail
attachment={ attachment }
field={ field }
data={ data }
config={ config }
/>
<span className="block-editor-content-only-controls__media-title">
{
// TODO - truncate long titles or url smartly (e.g. show filename).
attachment?.title?.raw &&
attachment?.title?.raw !== ''
? attachment?.title?.raw
: url
}
</span>
</>
) }
{ ! url && (
<>
<span
className="block-editor-content-only-controls__media-placeholder"
style={ {
width: '20px',
height: '20px',
} }
/>
<span className="block-editor-content-only-controls__media-title">
{ chooseItemLabel }
</span>
</>
) }
</Grid>
</Button>
) }
/>
{ url && (
<Button
label={ __( 'Reset' ) }
className="block-editor-content-only-controls__media-reset"
size="small"
icon={ resetIcon }
onClick={ () => {
onChange(
field.setValue( {
item: data,
value: {},
} )
);

focusToggleButton( containerRef );
} }
/>
) }
/>
</div>
</MediaUploadCheck>
);
}
34 changes: 31 additions & 3 deletions packages/block-editor/src/hooks/block-fields/media/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
.block-editor-content-only-controls__media {
width: 100%;
box-shadow: inset 0 0 0 $border-width $gray-400;
padding: $grid-unit-10;
padding-right: $grid-unit-40;

&:focus:not(:disabled) {
// Allow smooth transition between focused and unfocused box-shadow states.
Expand Down Expand Up @@ -41,14 +41,42 @@
}

.block-editor-content-only-controls__media-thumbnail {
width: 24px;
height: 24px;
width: 20px;
height: 20px;
border-radius: $radius-small;
align-self: center;
overflow: hidden;

img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
}

.block-editor-content-only-controls {
position: relative;
}

.block-editor-content-only-controls__media-reset {
position: absolute;
right: 0;
top: $grid-unit;
margin: auto $grid-unit auto;
opacity: 0;
border-radius: $radius-small;
@media not ( prefers-reduced-motion ) {
transition: opacity 0.1s ease-in-out;
}

.block-editor-content-only-controls:hover &,
&:focus,
&:hover {
opacity: 1;
}

@media (hover: none) {
// Show reset button on devices that do not support hover.
opacity: 1;
}
}
4 changes: 1 addition & 3 deletions packages/block-library/src/site-logo/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -620,7 +620,6 @@ export default function LogoEdit( {
>
<MediaControlPreview
url={ mediaItemData?.source_url }
alt={ mediaItemData?.alt_text }
filename={
mediaItemData?.media_details?.sizes?.full
?.file || mediaItemData?.slug
Expand All @@ -642,7 +641,6 @@ export default function LogoEdit( {
<MediaControl
mediaId={ siteLogoId }
mediaUrl={ logoUrl }
alt={ mediaItemData?.alt_text }
filename={
mediaItemData?.media_details?.sizes?.full
?.file || mediaItemData?.slug
Expand All @@ -652,7 +650,7 @@ export default function LogoEdit( {
onError={ onUploadError }
onReset={ onRemoveLogo }
isUploading={ !! temporaryURL }
emptyLabel={ __( 'Choose logo' ) }
emptyLabel={ __( 'Logo' ) }
/>
</ToolsPanelItem>
) }
Expand Down
Loading
Loading