Skip to content
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

Jump to bottom

Image Block: Don't render if there is no URL set #45220

Merged
merged 1 commit into from
Mar 22, 2023
Merged

Image Block: Don't render if there is no URL set #45220

merged 1 commit into from
Mar 22, 2023

Conversation

t-hamano
Copy link
Contributor

Fix #44639

Note
This PR probably depends on #43178

What?

This PR disables rendering on the front end when no URL is set in the image block.

Why?

When the image block doesn't have a URL, the front end outputs HTML like this:

<figure class="wp-block-image"><img decoding="async" alt=""></figure>

According to MDN, the img element must have src attribute, so I believe this is incorrect markup.

The src attribute is required, and contains the path to the image you want to embed.

How?

This PR uses the new HTML Tag Processor API introduced in #42485 and changed to output nothing if the src attribute is empty. This rule is similar to the one that outputs nothing if the image is empty in the following block:

Also, a refactoring using this API in the core block in general is proposed by #43178. So this PR may need to be updated after #43178 is merged to prevent conflicts.

Testing Instructions

  1. After inserting the image block, save the article without specifying an image.
  2. Confirm that nothing is output to the front end.

@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. [Block] Image Affects the Image Block labels Oct 22, 2022
@t-hamano t-hamano self-assigned this Oct 22, 2022
@t-hamano t-hamano force-pushed the fix/image-dont-render-empty branch from cf52578 to a7ea505 Compare March 22, 2023 05:41
@t-hamano
Copy link
Contributor Author

Thank you for the review, @Mamaduka! I rebased with the latest trunk and adjusted the code.

@github-actions
Copy link

Flaky tests detected in a7ea505.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4486800784
📝 Reported issues:

Mamaduka
Mamaduka approved these changes Mar 22, 2023
View reviewed changes
Copy link
Member

@Mamaduka Mamaduka left a comment

Choose a reason for hiding this comment

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

Thank you, @t-hamano! The changes work as expected.

@t-hamano t-hamano merged commit f2eed4e into trunk Mar 22, 2023
@t-hamano t-hamano deleted the fix/image-dont-render-empty branch March 22, 2023 10:00
@github-actions github-actions bot added this to the Gutenberg 15.5 milestone Mar 22, 2023
@t-hamano
Copy link
Contributor Author

@Mamaduka
Sorry, I thought I merged as usual, but the latest commit message "Rebase with trunk" was recorded in trunk 🙏

@Mamaduka
Copy link
Member

No worries 😉

@t-hamano t-hamano mentioned this pull request Dec 8, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Mamaduka Mamaduka Mamaduka approved these changes

@adamziel adamziel Awaiting requested review from adamziel

@ajitbohra ajitbohra Awaiting requested review from ajitbohra

Assignees

@t-hamano t-hamano

Labels
[Block] Image Affects the Image Block [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
Gutenberg 15.5
Development

Successfully merging this pull request may close these issues.

Empty image block prints figure and empty img elements on the front
2 participants
@t-hamano @Mamaduka