Package blocks: Introduce a utility for getting the block image #68910
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add a utility function to the Blocks API that gets an image URL. Blocks can register a __experimentalImage setting to pass any chosen image URL depending on context. A context may be for example the list-view.
carolinan
added
[Feature] List View
|
Size Change: +141 B (+0.01%) Total Size: 1.84 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 7882523. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/13004800325
|
carolinan
commented
Mar 3, 2025
| block.attributes?.mediaAlt || | ||
| '', | ||
| clientId: block.clientId, | ||
| }, |
There was a problem hiding this comment.
The alt is not currently used. I included it to match getImage. Perhaps it can be useful in the future.
carolinan
requested review from
ellatrix,
ajitbohra and
fabiankaegy
as code owners
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Do I need to add a manual changelog entry for an experimental feature? |
carolinan
removed
the
[Priority] Low
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Add a basic utility function to the Blocks API that gets a custom image URL from a block.
Blocks can register a
__experimentalImagesetting to pass any chosen image URL depending on context. A context may be for example thelist-view.For #53684
What the PR does not do:
It does not update the code that displays the preview image from the image or gallery blocks in the List View,
Why?
The List View shows a small preview of the image used in image block and gallery.
But it is hardcoded to the
urlattribute of the image block.Instead of hardcoding it, an API can be used. Such an API can be used to present the image in other parts of the interface if the need and want should occur, and not be limited to the list view.
See #53381 (comment)
The implementation is similar to that of
__experimentalLabelThe reason why this utility is helpful is because the block can use any
urlas the image source. Different blocks may name the source url for their images differently. For example, in the Media & Text block, the attribute is called "mediaUrl"Or, the block may want to use a specific custom image that is not a block attribute.
How?
The pull request updates the Media & Text block and the Cover block to include a new setting called
__experimentalImage.This setting uses the block attributes and the context, and conditionally returns the url of the image.
The pull request adds a function named
getBlockImageto the utility file of the blocks API.It collects
__experimentalImagefrom the block type and conditionally returns the url.The API exports the function as
__experimentalGetBlockImage.Finally,
__experimentalGetBlockImageis imported in the List View, inuseListViewImages,and is used to determine the url of the miniature image to show in the List View.
Testing Instructions
Insert and add images to:
An image block
A cover block
A media & text block
Open the List View. Confirm if the mentioned blocks have image previews.
Screen readers
The image is a background in a span that has
aria-hidden="true", this is unchanged and it does not need testing with a screen reader.Screenshots or screencast