Skip to content

#57893 Add 'Use empty alt text' option for Post Featured Image block#68569

Open
dhananjaykuber wants to merge 3 commits intoWordPress:trunkfrom
dhananjaykuber:feature/empty-alt-featured-image
Open

#57893 Add 'Use empty alt text' option for Post Featured Image block#68569
dhananjaykuber wants to merge 3 commits intoWordPress:trunkfrom
dhananjaykuber:feature/empty-alt-featured-image

Conversation

@dhananjaykuber
Copy link
Copy Markdown
Contributor

Fixes #57893

What?

Adds the ability to set empty alt text (alt="") for decorative images in the Post Featured Image block by introducing a new toggle control in the block settings.

Why?

Currently, there is no way to set empty alt text (alt="") for the Featured Image block when the image is purely decorative. While it's possible to remove alt text in the media library, this is a global solution that affects the image everywhere it's used. This enhancement allows setting empty alt text specifically for the Featured Image block context, improving accessibility by properly indicating decorative images to screen readers.

How?

  • Added a new useEmptyAlt attribute to the Featured Image block
  • Implemented a new toggle control in the block settings panel that only appears for non-linked images
  • Modified the block's render logic to output empty alt text (alt="") when the toggle is enabled
  • Ensured linked images cannot have empty alt text since they function as link text
  • Preserved existing alt text behavior when the decorative image option is not enabled

Testing Instructions

Testing Instructions for Keyboard

  1. Open a new post or page in the editor
  2. Upload or select an featured image for the post
  3. Add a Post Featured Image block
  4. Open the block settings sidebar (click the cog icon if not already open)
  5. Verify that the "Use empty alt text (decorative image)" toggle appears under Settings
  6. Enable the toggle and verify that the image's alt attribute is empty in the HTML output
  7. Enable "Link to post" and verify that the empty alt text option is hidden
  8. Disable "Link to post" and verify that the empty alt text option reappears
  9. Verify that the setting persists after saving and reloading the post

Screenshots or screencast

screen-capture.3.mp4

@github-actions
Copy link
Copy Markdown

github-actions bot commented Jan 9, 2025

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: dhananjaykuber <dhananjaykuber@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
Co-authored-by: huubl <huubl@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@carolinan carolinan added [Block] Post Featured Image Affects the Post Featured Image Block [Type] Enhancement A suggestion for improvement. labels Jan 10, 2025
<ToggleControl
__nextHasNoMarginBottom
label={ __(
'Use empty alt text (decorative image)'
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I think this text is too long and that the parentheses should be removed.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Done

Copy link
Copy Markdown
Contributor

@carolinan carolinan 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 for working on this.

I want to make the following change request:
The alt text should also be removed from the block in the editor when the option is enabled.

The failing test needs to be solved, the test fixtures need to be regenerated. Try npm run fixtures:regenerate

@dhananjaykuber
Copy link
Copy Markdown
Contributor Author

Hi @carolinan

I have updated the label and also tried to resolve the test using npm run fixtures:regenerate. Still 2 cases are failing and in E2E check its shows Timeout exceeded.

@fabiankaegy
Copy link
Copy Markdown
Member

To be honest, I struggle a bit with this feature here 🤔

The issue that worries me is that the featured image block is almost never used in isolation on a single post. Instead the block gets used on single templates and inside query loops. So in both of these scenarios we are not talking about a single featured image for a specific block but rather the generalized concept of a featured image inside a template.

Any setting you apply to the featured image block will be applied to all posts / all featured images.

Knowing that I'm a little worried that the feature will get enabled by folks who want to set it for a single image only. But in doing so they have now removed the alt text from all featured images everywhere.

@carolinan
Copy link
Copy Markdown
Contributor

carolinan commented Jan 18, 2025

I know why there is no alt text option for the block, but the lack of an option to enter a custom alt text also makes this option feel awkward.

Any setting you apply to the featured image block will be applied to all posts / all featured images.

Yes this is the case with styling options like borders. Users who are not aware of it may find it unexpected the first time they are using it, but will then learn.
But the difference is that

  • A styling option is immediately visually apparent for sighted users, and the alt text is not at all apparent.
  • A missing alt text has much greater impact than a style, so a mistake with the alt text is much more severe.

Would it help if the current alt text was visible in the sidebar but not editable?
Would it help to place it in the advanced section? If not, I would perhaps recommend keeping it as a separate plugin.

@huubl
Copy link
Copy Markdown
Contributor

huubl commented Jun 6, 2025

Would changing the help text depending on the context be a solution? For example:

Default / Post Editor:
"Use empty alt text (decorative image)."
→ Simple and clear guidance for individual image use cases.

When child of Query Loop:
"Use empty alt text (decorative image). Please note: this sets all featured images in this loop to decorative."
→ Warns users of the bulk effect.

Template Editor:
"Use empty alt text (decorative image). This will affect all uses of this template. Ensure that all featured images used here should be decorative."
→ Reinforces the importance of intent at the template level.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Post Featured Image Affects the Post Featured Image Block [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Empty alt="" for the Featured Image block

4 participants