Only show rich preview for image and description if data is available #33660
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
…able If we don't do this then we might see the placeholders for desc and image just because we have a icon.
getdave
added
[Type] Bug
|
Size Change: +1.86 kB (0%) Total Size: 1.08 MB
ℹ️ View Unchanged
|
|
This is very nice! I detected this problem in sites that only have a meta description (in this case the favicon also failed to appear):
This also happens in https://eldiario.es, for example. |
Nice catch. I've fixed this by removing the 100px min height (see video below).
@javierarce Not sure what you are seeing but I suspect it's actually the delayed loading of the icon from the remote site that is the issue. In the example you provided the rich data does in fact contain an {
"title": "elDiario.es - Noticias de actualidad - Periodismo a pesar de todo",
"icon": "https://eldiario.es/favicon.png",
"description": "Diario digital de noticias de actualidad sobre política y economía, análisis y blogs de opinión. Dirigido por Ignacio Escolar. Periodismo riguroso, independiente y honesto.",
"image": ""
}The link preview renders the img tag which links to the icon in rich data. The browser then initiates a HTTP request for the icon which takes unknown amount of time to resolve. Eventually the image data is returned to the browser and image is painted to the page. Here's a demo Screen.Capture.on.2021-07-29.at.12-39-01.mp4I think what you are seeing/experiencing is the delay in the image being requested from the remote site which is unfortunately outside of our control. I checked the logic again and the favicon will render regardless of whether description or image are available. |
Perfect, this works great now.
It was… my ad blocker, sorry 🤦♂️ The problem with the missing favicon only happened with the Verso site, that's why I thought it had to do with their meta tags. |
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.
Description
The Link UI's rich preview feature for remote URLs was showing placeholders for image and description even thought that data did not exist in the rich preview data.
This would allow you to arrive at states such as:
This PR corrects that by only showing the lower half of the rich preview if the necessary data is available. It will also only show the description or image if they are available.
@javierarce I think this was actually an intentional feature. I know that because we encoded the feature into the tests!
gutenberg/packages/block-editor/src/components/link-control/test/index.js
Lines 1960 to 1961 in 40a511e
Therefore I'm checking in with you to make sure you're aware that this change is being made. Essentially if the content doesn't exist then we won't see a placeholder.
How has this been tested?
Note we have quite a bit of test coverage here so it should 🤞 🤞 🤞 🤞 be safe.
Screenshots
Types of changes
Checklist:
*.native.jsfiles for terms that need renaming or removal).