Skip to content

[MOOSE-373] FE: Add MediaImageControl Component#340

Open
GeoffDusome wants to merge 2 commits intomainfrom
feature/MOOSE-373/media-image-control-component
Open

[MOOSE-373] FE: Add MediaImageControl Component#340
GeoffDusome wants to merge 2 commits intomainfrom
feature/MOOSE-373/media-image-control-component

Conversation

@GeoffDusome
Copy link
Copy Markdown
Contributor

@GeoffDusome GeoffDusome commented Mar 31, 2026

What does this do/fix?

Introduces a reusable MediaImageControl for the block editor sidebar and refactors the image card and image overlay card blocks to use it, so image pick/preview/replace/remove behavior lives in one place.

What changed

  • MediaImageControl (assets/js/components/MediaImageControl.js) — Featured-image–style UI: choose image, preview (with ResponsiveWrapper when dimensions exist), replace/remove actions, loading spinner + VisuallyHidden text, missing-attachment messaging, and inline layout styles so editor polish stays in the component file (no new stylesheet).
  • useBlockMedia (assets/js/hooks/useBlockMedia.js) — Subscribes to attachment data via getEntityRecord( 'postType', 'attachment', … ) and hasFinishedResolution, matching core’s direction instead of the legacy getMedia shortcut; exposes media, isLoading, isMissing, and hasResolved.
  • image-card and image-overlay-card — Removed duplicated MediaUpload / withSelect boilerplate; each block keeps onSelect / onRemove + mediaId and delegates UI to MediaImageControl.
  • Webpack — Adds a hooks resolve alias pointing at assets/js/hooks (same idea as the existing components alias).

Why

  • Less duplication when adding similar blocks.
  • Clear loading and missing states in the inspector.
  • Data loading aligned with current core-data attachment APIs.

QA

Links to relevant issues

Screenshots/video:

Dev Environment URL:

Pull request checklist

  • I've added a changelog entry for these changes.
  • I've linked to a relevant Jira issue.
  • I've captured a screenshot or screencast of the changes and linked it above.

Copy link
Copy Markdown
Collaborator

@dpellenwood dpellenwood left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🍏 Lovely improvement!

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.

2 participants