#31985307 Image Studio: Feature parity with Big Sky

Proposed Changes

• Delete permanently: Add ability to permanently delete images from the media library directly within Image Studio, with confirmation dialog, error handling, and draft cleanup (FORNO-171)
• URL hash-based routing: Switch from ?item= query param to #ai-image-editor= hash for opening Image Studio, avoiding conflicts with the WP media modal (FORNO-183)
• “Edit with AI” toolbar label: Rename the Image block toolbar button from “Edit” to “Edit with AI” for clarity (FORNO-197)
• “Edit with AI” row action: Add “Edit with AI” link to media library list view row actions (FORNO-197)
• Disable stop button during upload: Prevent clicking stop while an image is uploading to avoid orphan attachments (FORNO-131)
• Disable nav with unsaved drafts: Disable previous/next image navigation when drafts exist, with tooltip prompting save/discard (FORNO-182)
• Keyboard nav shortcut fix: Move Cmd/Ctrl+Left/Right keyboard shortcuts from useImageFileNavigation into the Header component using useKeyboardShortcut, respecting draft/processing state (FORNO-182)
• Image size transition fix: Fix image sizing bug during cross-fade transitions by switching canvas layout from absolute positioning to CSS grid (FORNO-181)
• Cross-fade placeholder fix: Fix placeholder image flashing during edit-layout transitions by tracking exit animation completion state
• Nav bar minor fixes: Address minor navigation bar UI issues
• Draft cleanup includes annotations: Extend draft cleanup to also delete annotated attachment images on exit
• Unsaved changes logic simplification: Simplify getHasUnsavedChanges selector to check against original and saved IDs directly instead of checkpoint-based logic
• Null close callback support: Allow onCloseCallback to receive null (for delete permanently), updating block editor extensions to clear image block attributes on null
• New tracking events: Add tracking for style selection, aspect ratio selection, and permanent deletion
• Destructive button a11y: Override destructive button colors in sidebar for WCAG AA contrast compliance on dark background
• Editor store error handling: Gracefully handle cases where the editor store is unavailable when loading suggestions
• Context-aware Save button labels: Show “Save & Apply” or “Save & Close” based on entry point, and auto-close Image Studio after saving when opened from the block editor (FORNO-194)
• Image Studio environment context: Send image-studio as the environment in client context when Image Studio is open, instead of wp-admin (FORNO-113)
• Image button spacing fix: Move image button spacing rule to SCSS for the media library action buttons (FORNO-201)

Why are these changes being made?

These changes bring Image Studio in wp-calypso to feature parity with the big-sky-plugin implementation. They address multiple UX issues (orphan images from stop during upload, navigation with unsaved changes, image sizing during transitions), add missing functionality (delete permanently, row actions), and improve the URL routing approach to avoid conflicts with WordPress’s built-in media modal.

Cherry-picked Commits

1. Delete permanently: Open Image Studio on an image → open Alt Text sidebar → click “Delete permanently” → confirm → verify image is removed from media library
2. URL hash routing: Navigate to /wp-admin/upload.php#ai-image-editor=<id> → verify Image Studio opens with the correct image
3. Edit with AI button: Add an Image block in the editor → select it → verify toolbar shows “Edit with AI”
4. Stop button disabled during upload: Trigger an AI edit → observe stop button is disabled during the upload phase
5. Navigation with drafts: Edit an image (create a draft) → verify prev/next nav buttons are disabled with “Save or discard your changes” tooltip
6. Keyboard navigation: Use Cmd+Left/Cmd+Right to navigate between images → verify it respects draft state
7. Image transitions: Navigate between images → verify no sizing glitches during cross-fade
8. Delete from block editor: Open Image Studio from an Image block → delete permanently → verify block clears its image
9. Context-aware Save button: Open Image Studio from the block editor → verify button shows “Save & Apply” and Image Studio closes after saving; open from media library → verify button shows “Save & Close” and stays open

Testing Instructions

Prerequisite: Sandbox widgets.wp.com

1. Apply Jetpack and Calypso PRs to your sandbox

bin/jetpack-downloader test jetpack forno-194/image-studio-feature-parity
install-plugin.sh am forno-194/image-studio-feature-parity

2. Enable Image Studio using filter

echo "<?php add_filter( 'jetpack_image_studio_enabled', '__return_true' );" > ~/public_html/wp-content/mu-plugins/enable-image-studio.php

2. Test feature parity with BigSky
   OR
3. Use Claude (or Codex) to run the whole test suite (takes around ~20mins)

Run the full suite  of Image Studio UI testing using site: `your-site`

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the “[Status] String Freeze” label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the “[Status] Needs Privacy Updates” label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?