Skip to content

Fix inline image alt text not persisting in structured data blocks#23018

Open
param-chandarana wants to merge 1 commit intoYoast:trunkfrom
param-chandarana:fix/structured-data-blocks-inline-image-alt-text
Open

Fix inline image alt text not persisting in structured data blocks#23018
param-chandarana wants to merge 1 commit intoYoast:trunkfrom
param-chandarana:fix/structured-data-blocks-inline-image-alt-text

Conversation

@param-chandarana
Copy link

Context

Image alt text edited inline in the Gutenberg editor for How-to and FAQ blocks was being lost when the blocks were rendered on the frontend. This is an accessibility and SEO issue, as alt text is crucial for both screen readers and search engine optimization.

Summary

This PR can be summarized in the following changelog entry:

  • Fixes a bug where alt text changes made via the inline image editor in How-to and FAQ blocks were not being reflected on the frontend.

Relevant technical choices:

The issue was in the optimize_images() method in Structured_Data_Blocks class. When rendering blocks on the frontend, this method replaces images with optimized versions using wp_get_attachment_image(), which only used the attachment ID to pull alt text from the media library database, ignoring any inline edits saved in the block content.

The fix:

  1. Extracts the alt text from the original image HTML before replacement using regex
  2. Decodes HTML entities (since wp_get_attachment_image() will encode them again)
  3. Passes the extracted alt text to wp_get_attachment_image() via the $image_attrs parameter
  4. Ensures backward compatibility - if no alt text exists, an empty string is used

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

  1. Create a new post or page in the Block/Gutenberg editor
  2. Add a Yoast How-to block
  3. In one of the How-to step descriptions, add an image using the "Add image" button
  4. Click on the image to focus it
  5. In the inline image toolbar that appears, edit the alt text to something like "Custom Alt Text Test"
  6. Save the post/page
  7. View the post/page on the frontend
  8. Right-click the image and "Inspect" it (or view page source)
  9. Expected: The image's alt attribute should show "Custom Alt Text Test"
  10. Previously: The alt attribute would not show the custom alt text you set using the inline editor

Repeat the same steps for FAQ blocks:

  1. Add a Yoast FAQ block
  2. In an FAQ answer, add an image
  3. Edit the alt text inline
  4. Save and check frontend

Relevant test scenarios

  • Changes should be tested with the browser console open
  • Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies - Should work on any post type that supports Gutenberg blocks
  • Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other) - Specifically affects Block/Gutenberg editor with How-to and FAQ blocks
  • Changes should be tested on different browsers
  • Changes should be tested on multisite

Test instructions for QA when the code is in the RC

  • QA should use the same steps as above.

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

  • How-to blocks - All How-to blocks with images should be tested to ensure images still display correctly
  • FAQ blocks - All FAQ blocks with images should be tested to ensure images still display correctly
  • Image optimization - The optimize_images() method has been modified, so verify that images are still properly optimized on the frontend
  • Structured data rendering - Verify schema markup is still correct for How-to and FAQ blocks

Other environments

  • This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.
  • This PR also affects Yoast SEO for Google Docs. I have added a changelog entry starting with [yoast-doc-extension], added test instructions for Yoast SEO for Google Docs and attached the Google Docs Add-on label to this PR.

Documentation

  • I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.
    • Added inline code comments explaining the alt text extraction and HTML entity decoding

Quality assurance

  • I have tested this code to the best of my abilities.
  • During testing, I had activated all plugins that Yoast SEO provides integrations for.
  • I have added unit tests to verify the code works as intended.
  • If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
  • I have written this PR in accordance with my team's definition of done.
  • I have checked that the base branch is correctly set.
  • I have run grunt build:images and commited the results, if my PR introduces new images or SVGs. (No new images introduced)

Innovation

  • No innovation project is applicable for this PR.
  • This PR falls under an innovation project. I have attached the innovation label.
  • I have added my hours to the WBSO document.

Fixes #22905

Fixes a bug where alt text changes made via the inline image editor in How-to and FAQ blocks were not being reflected on the frontend.

The optimize_images() method was replacing images with wp_get_attachment_image() which only used alt text from the media library database, ignoring inline edits saved in the block content.

This fix extracts the alt text from the original image HTML before replacement and passes it to wp_get_attachment_image() to ensure it is preserved in the rendered output.

Fixes Yoast#22905
@param-chandarana param-chandarana force-pushed the fix/structured-data-blocks-inline-image-alt-text branch from d466316 to 347ca67 Compare February 24, 2026 07:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Alt texts set via inline image edit inside How-to and FAQ block are not reflected in the frontend

2 participants