Skip to content

Add sizeSlug to the image inserted from Inserter. #60138

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

Open
wants to merge 8 commits into
base: trunk
Choose a base branch
from
Open

Add sizeSlug to the image inserted from Inserter. #60138

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
79efc8d
add sizeSlug
torounit Mar 22, 2024
6ff6bf0
update unit test
torounit Mar 22, 2024
6ed6c44
use imageDefaultSize
torounit Apr 10, 2024
4aacb3b
fix internal import
torounit Apr 10, 2024
29b6484
fallback to full, if the image of the specified size is not found.
torounit Apr 10, 2024
d1a99fc
set sizeSlug on Media insert.
torounit Apr 10, 2024
5259e2a
rebase trunk
torounit Aug 11, 2024
312160a
remove imageDefaultSize form getBlockAndPreviewFromMedia
torounit Aug 11, 2024
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
Prev Previous commit
Next Next commit
fallback to full, if the image of the specified size is not found.
  • Loading branch information
@torounit
torounit committed Aug 11, 2024
commit 29b64845c03b8837c2b911e546cee6f2973d150a
15 changes: 10 additions & 5 deletions packages/block-editor/src/components/inserter/media-tab/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ const mediaTypeTag = { image: 'img', video: 'video', audio: 'audio' };
/**
* Creates a block and a preview element from a media object.
*
* @param {InserterMediaItem} media The media object to create the block from.
* @param {('image'|'audio'|'video')} mediaType The media type to create the block for.
* @param {string} defaultSizeSlug The default size slug to use for the image block.
* @param {InserterMediaItem} media The media object to create the block from.
* @param {('image'|'audio'|'video')} mediaType The media type to create the block for.
* @param {string} sizeSlug The size slug to use for the images.
* @return {[WPBlock, JSX.Element]} An array containing the block and the preview element.
*/
export function getBlockAndPreviewFromMedia(
media,
mediaType,
defaultSizeSlug = 'full'
sizeSlug = 'full'
Copy link
Contributor

@ntsekouras ntsekouras Apr 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we shouldn't check the sizeSlug in the preview as its better to have the smaller one for performance. It also keeps things simpler without an extra param that's specific to a single media type.

Copy link
Member

@Mamaduka Mamaduka Apr 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. The sizeSlug attribute value isn't important for previews.

) {
// Add the common attributes between the different media types.
const attributes = {
Expand All @@ -30,7 +30,12 @@ export function getBlockAndPreviewFromMedia(
if ( mediaType === 'image' ) {
attributes.url = mediaSrc;
attributes.alt = alt;
attributes.sizeSlug = defaultSizeSlug;
attributes.sizeSlug =
// Try `sizeSlug` and fall back to 'full'.
media.sizes?.[ sizeSlug ] ||
media.media_details?.sizes?.[ sizeSlug ]
? sizeSlug
: 'full';
} else if ( [ 'video', 'audio' ].includes( mediaType ) ) {
attributes.src = mediaSrc;
}
Expand Down