Bind featured image to cover and image blocks #39410
Closed
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
|
Looking for a way to respect featured image updates on render for these blocks. In the editor it works quite OK with this approach, maintaining the block library WordPress agnostic. |
|
Size Change: +502 B (0%) Total Size: 1.16 MB
ℹ️ View Unchanged
|
draganescu
added
[Type] Enhancement
|
Hey @draganescu, incredible work here 🚀 One of the things I liked about this older mockup was that it kept the UI inside the Replace dropdown, keeping the block toolbar simple. The downside is you can also set the featured image there, a big task, and it'd be nice to find an even simpler solution we could implement even today. So I took another stab at a mockup and landed on this one:
This shows Media & Text, but it'd be the same for Cover or any other media block. The "Use Featured Image" toggle will only show up if a featured image has already been set in the document inspector. I'm not yet sure on the help-text at the bottom, nor changing the "Replace" text to "Featured Image" when toggled, but I have a sense that it might be simpler to implement. What do you think? |
|
I remember the complex a11y problems when I added the URL edit in the dropdown of the media replace flow. Adding a toggle will probably be another can of worms. I will try to see, separately if we can filter the MediaReplaceFlow component so that we add the WP specific data without modifying the component, |
|
One challenge I see with the current proposal is that the updated image URL is detached from the post's featured image changes after you visit the same post again. What I mean here, is that while it sets the image and syncs it in the first editing session, it stops doing that when you visit the page again. It's probably also not possible to enforce that the changes applied to the post's featured image are reflected in the enhanced blocks without changing their implementation to be dynamic. At the moment the image URL is stored in the post content so it would be extremely hard to update it on the fly. |
|
@gziolo yes, that is it, how to keep the blocks that are bound to some WP -centric data up to date with that data. @jasmussen so far (with or without the toggle) I've looked at setting the property via the MediaReplaceFlow and there are some missing things in the block implementation. It is possible I think, but we need to add some kind of context from the block to the MediaReplaceFlow component, and then filter the BlockEdit component to add the function that binds the featured image to this context. To make the URL of images in cover/image dynamic without making the blocks themselves dynamic, we could add some sort of token to the URL and replace the whole thing on render. I think though that the binding should be some kind of context which when set has invoked functions that use tokens for values and replaces them both in edit mode and in saved mode. |
Another idea
|
|
@scruffian I think we can already do that with the render_block filter, so if we have a token we can replace it on the front end. The problem is how to have a viable URL in edit and a token in save, in a good way :)
@gziolo to allow for this we'd need a sort of Contextual Attributes API at the level of the editor. This API offers a context to the BlockEdit component, as these are always mounted. When The BlockEdit then sets attributes to match context and replaces them (maybe via blocks.getSaveContent.extraProps ) on save with tokens. This API also provides handlers for these contextual attributes to be passed to components such as toolbar or media replace, as inside those components we don't have access to block attributes and other internals, so we'd need handlers directly. |
draganescu
force-pushed
the
try/use-featured-image
branch
from
8209a5d
to
4b2e74a
Compare
This was referenced Mar 17, 2022
|
Close in favor of #39658 |
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?
Closes #13795 and advances #37753.
Why?
We need ways to use featured image when doing page building, as well as site building, via core blocks.
How?
I implemented an extension via a block edit filter in the edit post package for the cover and image blocks. Doing it this way preserves the agnostic behavior of blocks in the block library (not WordPress specific) and gives us easy access to the entity data of the current post.
It is yet unclear:
Testing Instructions
Screenshots or screencast
initial-featured-image.mp4