Write editor: image properties panel with alignment#49536
Conversation
github-actions
Bot
added
[mu wpcom Feature] Write
[Package] Jetpack mu wpcom
|
Thank you for your PR! When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖 Follow this PR Review Process:
If you have questions about anything, reach out in #jetpack-developers for guidance! |
github-actions
Bot
added
the
[Status] Needs Author Reply
|
Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.
Interested in more tips and information?
|
Code Coverage SummaryCoverage changed in 2 files.
Full summary · PHP report · JS report Coverage check overridden by
I don't care about code coverage for this PR
|
|
I ran into an edge case where I couldn't get the hover to work properly:
I haven't had a chance to dig into the cause yet. |
|
A few other things I noticed:
For the full selection, I suspect that the block and write editors set different classes. We probably want Write to set the same classes as the block editor. |
@kbrown9 Thanks! This should be fixed in 6dfae15 and images should no longer overlap like that.
You're right, it looks like the block editor sets image size in different ways. I've added more checks to make sure we get it in both directions. |
Adds left / center / right image alignment plus an image properties panel
(alt text, size, alignment, featured image) opened by a single Edit pencil
on each image. Replaces the inline ALT and Size buttons.
The panel is non-modal: it docks to the bottom-right of the viewport on
desktop and slides up as a full-width bottom sheet on mobile, so changes
apply live to the figure while the rest of the editor remains visible
and editable. Multi-image switching is signaled with an outline on the
active figure.
Also fixes the indicator-state bug where the top-toolbar Left button
showed as active whenever text-block alignment was the empty default —
now it only highlights when alignment is explicitly set.
Round-trip with the block editor: images are serialized with explicit
align attribute + align{left,center,right} class, matching what the
block editor emits.
Fixes RSM-3979 and RSM-3982.
Two follow-ups from review: - A floated figure (alignleft/alignright) bled into the next figure's bounding box because the next figure didn't clear the float. Hover detection picked the wrong figure (whichever was later in the DOM won the z-order even when visually it was the earlier image being pointed at). Fixed with `clear: both` on `.bw-content figure`: floated figures now stack vertically in the editor while text paragraphs still wrap around the float. The published view is unaffected. - Block-editor inserts often omit the `sizeSlug` attribute even when the img src already matches a registered size (e.g. Large is the default media URL). In that case the figure had no `size-X` class, so the Edit panel's size radio group showed nothing selected even though the image was rendering at a recognisable preset size. Open now resolves the slug from the img URL via the media library's registered sizes and stamps the matching class onto the figure, so the panel reflects what the user sees and saves are explicit.
allilevine
force-pushed
the
fix/write-image-align-modal
branch
from
6dfae15 to
13b1812
Compare
The Size and Alignment radiogroups in the image edit panel used role="radio" without the keyboard pattern that role implies — every option was an individual tab stop and arrow keys did nothing. Add roving tabindex (only the active option has tabindex=0; others -1) and arrow / Home / End key handling on each radiogroup. Arrow keys move focus AND activate the new option, matching the WAI-ARIA radio authoring pattern; Tab exits the group cleanly to the next focusable control instead of stepping through every option. State sync happens via the existing syncEditImageModalRadios callback so aria-checked and tabindex stay in lockstep with state.editingImageAlign and state.editingImageSize on every change.
allilevine
added
the
I don't care about code coverage for this PR
|
The Code Coverage Requirement bot is flagging the 174 new lines in Filing as a follow-up rather than carving off a handful of helpers in this PR — the coverage gap is a property of the whole module, not these specific changes, and cleaning it up is its own focused effort. Tracked as RSM-4353. |
The image block serializer was stripping the width and height attrs
from the <img> element, so the saved markup looked like:
<img src="..." alt="" class="wp-image-X"/>
Without intrinsic dimensions, themes that only ship the default
`img { max-width: 100%; height: auto }` rule let the image stretch
to fill its container — even when the URL points at a resized 150x150
file, the published post would render it at full content width.
This was visible at Thumbnail and Medium sizes on themes that don't
explicitly style `figure.size-thumbnail`.
applyMediaSizeToFigure already sets `width` / `height` attrs on the
DOM img every time the user picks a size; the bug was the serializer
not propagating them. Now emits:
<img src="..." alt="" class="wp-image-X" width="150" height="150"/>
Matching the block editor's output.
There was a problem hiding this comment.
Pull request overview
This PR enhances the Write editor’s image UX by replacing inline per-image ALT/Size controls with a consolidated, non-modal image properties panel (alt text, size, alignment, featured image), and by ensuring image alignment (including explicit centering) round-trips reliably through block markup.
Changes:
- Add a per-image Edit (pencil) control that opens a docked/bottom-sheet image properties panel; apply edits live and coalesce undo on close.
- Add left/center/right image alignment support and serialize explicit
align+align*classes for consistent theme rendering. - Fix the toolbar alignment indicator so it only highlights when alignment is explicitly set (not on default alignment).
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| projects/packages/jetpack-mu-wpcom/tests/php/features/write/Write_Test.php | Updates PHPUnit coverage to assert image align is supported and included in the allowlist sync checks. |
| projects/packages/jetpack-mu-wpcom/src/features/write/write.php | Adds align to the allowed image attrs and introduces new interactivity state for edit-mode/panel behavior. |
| projects/packages/jetpack-mu-wpcom/src/features/write/view.js | Implements edit-panel state management, alignment + size handling, updated serialization, and fixes default toolbar alignment highlighting. |
| projects/packages/jetpack-mu-wpcom/src/features/write/style.css | Adds alignment styling, updates figure controls positioning, and styles the new non-modal edit panel + active-figure outline. |
| projects/packages/jetpack-mu-wpcom/changelog/fix-write-image-align-modal | Changelog entry for the new image properties panel and alignment support. |
Three stale comments referred to the original "center alignment emits no class / no attribute" behavior from an earlier iteration of this PR. Center is now always made explicit on save (aligncenter class + align:"center" in block JSON) so themes center reliably, and the allowlist accepts the attribute but the value check rejects wide/full. Comments updated to match — no behavior change.
Fixes RSM-3979 and RSM-3982.
Proposed changes
align:"center"+aligncenterclass) so the published view centers reliably across themes.×, Caption, Edit) and anchoring the new wrapper to the image bounds, the Thumbnail and Medium overflow from RSM-3980 is also addressed.Related product discussion/links
Does this pull request change what data or activity we track or use?
No. The image block's
alignattribute is added to the round-trip allowlist; no new tracking events.Testing instructions
Setup: Open any post (new or existing) in the Write editor with at least one image inserted from the media library.
Edit panel:
Multi-image:
Insert-while-editing:
/image. The panel should close and the insert modal should open. The previous edit's changes are committed as a single undo entry.Round-trip with block editor:
align:"left"etc in the block markup).Indicator bug (RSM-3982):
Mobile:
Accessibility:
role="dialog"andaria-modal="false"are set on the panel;aria-labelledbypoints to the panel title.Known mobile caveat: when the Alt text input is focused on iOS, the software keyboard may cover the lower portion of the bottom sheet. Tracked as polish for follow-up.
🤖 Generated with Claude Code