-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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.
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
Add featured image to Media & Text block #51491
Conversation
Size Change: +503 B (0%) Total Size: 1.71 MB
ℹ️ View Unchanged
|
Flaky tests detected in 96c3a18. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7898039463
|
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
👋🏻 @carolinan 👀 looking at this |
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
How can I make this block into a dynamic block and still keep the existing anchor block support? |
This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress. If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged. If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack. Thank you! ❤️ View changed files❔ lib/blocks.php |
@carolinan the anchor support is not available for dynamic blocks. Unfortunately in the rendered the value of the anchor support is unavailable - as far as I've seen - therefore we need to change how the rendered builds the markup: instead of building all the markup, leave what comes from the save function and only replace the image with the featured image (see the cover block for example). |
@draganescu Thank you, I think I understand. I have got it mostly working now; |
c518c80
to
efe0241
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good work here 🙇🏻 This tests well, found this styling issue for featured image placeholder state.
Possibly a more generous min height may work?
Left a couple of comments:
- why do we need a deprecation/migration or anything?
- a code nit, that doesn't seem to produce a bug but is susceptible to do so in the future.
This comment was marked as outdated.
This comment was marked as outdated.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@carolinan @t-hamano instead of setting the mediaType to undefined
which would need the MediaContainer
to be updated, and also seems wrong because media type for featured image is image
, we could avoid saving the image in the save function if useFeaturedImage is true:
- so keep
mediaType: 'image'
in edit - update save to:
let image = ! useFeaturedImage ? (
<img
src={ mediaUrl }
alt={ mediaAlt }
className={ imageClasses || null }
/>
) : null;
what do you think?
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. |
I tried it with the save function update. It is an improvement because the empty img tag is not present if the featured image option is set when there is no featured image on the post. But in this scenario, the
|
This approach seems better. If
This would be an unexpected scenario. We may need to adjust the conditional statement in the save.js function. |
Based on a recent Editor Triage async session - I'm moving this off the WordPress 6.5 Editor Tasks board. |
…t/media-container.js
Only output the img tag if there is a mediaURL. The mediaURL is required because img tags without a src attribute is invalid HTML.
I changed the condition in save.js from checking if a featured image is used, to checking if there is a |
I think this is a good state, any improvement can come in from of a follow up. Congratulations everyone for the tweaking and effort to see this through. Also I forgot to paste the list of contributors
|
Thank you. |
These PHP changes need to be backported right? A Trac ticket and core PR would be great! |
Hmm I think all these PHP changes are part of package updates? I am looking at the description in https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/blocks/require-dynamic-blocks.php |
What?
Add an option to use the featured image in a Media & Text block.
Closes #35221
Why?
The Media & Text block has a unique feature called "stack on mobile" which is useful when you want to display the post title and featured image together but with different layouts on desktop and mobile.
This was a feature requested for the "Blue Note" community theme.
How?
The featured image can be selected in the initial block placeholder and from the block toolbar.
A placeholder image is used if the featured image option is chosen, but the post has no featured image.
Testing Instructions
Test the following:
Replacing an existing image or video with a featured image
Adding a featured image when there is no featured image on the post or page
Adding a featured image when there is a featured image on the post or page
Removing the featured image from the post/page sidebar
Replacing the featured image from the post/page sidebar
Replacing the featured image from the block toolbar: by uploading a new media and by selecting from the media library
Next, please confirm that:
Testing Instructions for Keyboard
Screenshots or screencast
In this video, I start with a post that has a featured image. I add a new media & text block, enable the featured image option, and try some block toolbar settings. Then I replace the featured image with an image from the media library and then replace that image with the featured image again.
add-replace.mp4
In this video, I am enabling the featured image option even though the post has no featured image, showing the placeholder:
placeholder.mp4
In this video, I have added the featured image and an anchor to the block, and I am checking that the anchor is added on the front.
media-text-anchor.mp4
Twenty Twenty Three blog / Home template with featured image and post title in the media & text block inside the query:
query.mp4