Skip to content

fix(block-editor): correct image wrap icons and add missing i18n keys#35424

Merged
fmontes merged 1 commit intomainfrom
fix-35420-block-editor-image-wrap
Apr 22, 2026
Merged

fix(block-editor): correct image wrap icons and add missing i18n keys#35424
fmontes merged 1 commit intomainfrom
fix-35420-block-editor-image-wrap

Conversation

@fmontes
Copy link
Copy Markdown
Member

@fmontes fmontes commented Apr 22, 2026

Summary

Fixes two bugs in the Block Editor image text-wrap toolbar buttons introduced in #35211 (reported via FD #36727).

  • Icon/action mismatch: The wrap-left button showed pi-align-left + pi-image (visually: text-left, image-right) but setImageTextWrap('left') produces float: left — image on the left, text on the right. The icons were swapped between the two buttons. Fixed by using pi-image + pi-align-right for wrap-left and pi-align-left + pi-image for wrap-right so each icon pair visually matches the layout it produces.
  • Missing i18n keys: Language.properties only defined block-editor.bubble-menu.image.properties. The wrap-left and wrap-right keys were absent, causing the dm pipe to render the raw key string as the tooltip. Added block-editor.bubble-menu.image.wrap-left=Wrap Left and block-editor.bubble-menu.image.wrap-right=Wrap Right.

Files changed

  • core-web/libs/block-editor/src/lib/elements/dot-bubble-menu/dot-bubble-menu.component.html — swapped icon pairs on wrap-left/wrap-right buttons
  • dotCMS/src/main/webapp/WEB-INF/messages/Language.properties — added missing i18n keys

Test plan

  • Open Block Editor and insert an image
  • Select the image to open the bubble menu
  • Hover wrap-left button — tooltip shows "Wrap Left" (not raw key)
  • Hover wrap-right button — tooltip shows "Wrap Right" (not raw key)
  • Click wrap-left — image floats left; icon shows image on left, text lines on right
  • Click wrap-right — image floats right; icon shows text lines on left, image on right

Closes #35420

🤖 Generated with Claude Code

…#35420)

Swaps the icon pairs on wrap-left/wrap-right buttons so they visually match the float direction they produce, and adds the missing wrap-left/wrap-right keys to Language.properties so tooltips render translated text instead of raw key strings.

Refs: #35420

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@claude
Copy link
Copy Markdown
Contributor

claude Bot commented Apr 22, 2026

Claude finished @fmontes's task in 1m 7s —— View job


Rollback Safety Analysis

  • Read rollback-unsafe categories reference
  • Get full PR diff
  • Analyze diff against all unsafe categories
  • Apply appropriate label

Result: ✅ Safe To Rollback

The changes in this PR touch only two files and fall into no unsafe rollback category:

dot-bubble-menu.component.html — Pure UI change swapping PrimeNG icon classes (pi-align-left, pi-image, pi-align-right) between two buttons. No database, Elasticsearch, API contract, or storage changes involved.

Language.properties — Additive-only: two new i18n keys added (block-editor.bubble-menu.image.wrap-left, block-editor.bubble-menu.image.wrap-right). Rolling back to N-1 simply means those keys are absent again — the dm pipe reverts to displaying the raw key string, which was the pre-existing behavior before this fix.

Neither change matches any of the unsafe categories (C-1 through M-4). No database migrations, no Elasticsearch mapping changes, no API contract modifications, no structural data model changes.

Label applied: AI: Safe To Rollback

@claude
Copy link
Copy Markdown
Contributor

claude Bot commented Apr 22, 2026

Claude finished @fmontes's task in 59s —— View job


PR Review

  • Read changed files
  • Verify icon swap logic
  • Check i18n keys

Clean fix. Two small things worth checking:

Icon ordering / margin direction

The swap itself is correct: float: left puts the image on the left with text flowing right, so pi-imagepi-align-right is the right visual order for the wrap-left button, and the reverse for wrap-right. The margin direction was also updated correctly (margin-right → now on the leading icon for wrap-left, margin-left → now on the trailing icon for wrap-right).

i18n: other locale files not updated

Only Language.properties (the English base) has any block-editor.bubble-menu.* keys — the localized files (Language_es.properties, Language_fr.properties, etc.) have none of them. So the new wrap-left/wrap-right keys are consistent with the existing pattern: they'll fall back to English in all locales. No action needed, but worth noting if locale coverage is ever revisited.

No unit/spec changes

The affected component (dot-bubble-menu.component.html) has an associated spec. The HTML change is purely cosmetic (icon classes + inline style), so a spec update isn't strictly required, but if there are snapshot or querySelector assertions against the icon classes, they'll fail silently until someone re-runs the suite. Worth a quick check.

@fmontes fmontes added this pull request to the merge queue Apr 22, 2026
Merged via the queue into main with commit 56097df Apr 22, 2026
51 checks passed
@fmontes fmontes deleted the fix-35420-block-editor-image-wrap branch April 22, 2026 22:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

AI: Safe To Rollback Area : Backend PR changes Java/Maven backend code Area : Frontend PR changes Angular/TypeScript frontend code

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

Block Editor: image text-wrap toolbar icons and i18n keys are mismatched (26.04.11-01)

2 participants