Refactor theme image block and improve HTML processing#23
Merged
Conversation
…ption, alt text, popover anchor - Fix critical bug: `happyprimeData` references changed to correct `happyprime_themeimageblock_data` variable name (broke all editor previews) - Fix textdomain in block.json from `happyprime` to `theme-image-block` to match plugin Text Domain and enable proper i18n - Fix link processing in Block.php to only search for <a> tags when a link URL is set, preventing corruption of SVGs containing <a> elements - Fix editor alt text to respect altText and omitAltText attributes, matching the PHP render behavior - Fix Popover anchor using useRef instead of document.querySelector to target the correct block instance when multiple blocks exist - Remove forced width:100% on inline SVGs in editor that didn't match frontend rendering - Avoid passing empty class attribute to get_block_wrapper_attributes https://claude.ai/code/session_011559Dfm5rxu8GGfejrzy5c
The <figure> element had both dangerouslySetInnerHTML (for inline SVG without a link) and JSX children (content + caption RichText), which React forbids. Render the SVG inside a display:contents span instead, keeping it as a normal child of the figure. https://claude.ai/code/session_011559Dfm5rxu8GGfejrzy5c
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Summary
This PR refactors the theme image block to improve code quality, fix bugs, and enhance maintainability. Changes include optimizing HTML tag processing logic, fixing variable references, improving accessibility handling, and correcting the textdomain configuration.
Key Changes
HTML Processing Optimization: Moved
WP_HTML_Tag_Processorinstantiation inside theif ( $link_url )conditional to avoid unnecessary processing when no link URL is present. Simplified the logic by removing redundant processor instantiation and directly using the updated HTML content.Wrapper Attributes Handling: Changed wrapper attributes to only include the
classattribute when$wrapper_classesis not empty, preventing empty class attributes in the rendered output.Variable Reference Fixes: Corrected references from
happyprimeDatatohappyprime_themeimageblock_datato use the properly localized data object throughout the JavaScript component.Textdomain Correction: Updated
block.jsontextdomain from"happyprime"to"theme-image-block"for proper translation domain alignment.Block Reference Management: Introduced
useRefhook to track the block element, replacing direct DOM queries withdocument.querySelector()for more reliable anchor positioning in the link editor popover.Alt Text Handling: Refactored alt text logic to properly respect the
omitAltTextattribute, computing the alt text value once and using it consistently in the image element.Code Cleanup: Removed unnecessary conditional logic for default width styling in the editor preview, simplifying the styles computation.
Notable Implementation Details
useReffor DOM element tracking is more reliable than querying by class name, which could be fragile if class names change.omitAltTextis true, an empty string is used instead of falling back to default text.https://claude.ai/code/session_011559Dfm5rxu8GGfejrzy5c