Social: Improve media picker UX — always-visible buttons, clearer menu options by gmjuhasz · Pull Request #47995 · Automattic/jetpack

gmjuhasz · 2026-04-08T14:04:26Z

Fixes SOCIAL-430

Proposed changes

Move action buttons below the image preview so they're always visible (no more hover-only overlay)
Remove the confusing "Remove" action — media removal is now handled via a "No media" menu option (only shown when there's no featured image)
Rename menu labels for clarity: "Use template" → "Social image template", "Use featured image" → "Featured image"
Simplify menu group labels: "For link preview" → "Link preview", "For attachment" → "Attachment"
Update icons: postFeaturedImage for featured image, mediaAndText for template, custom sparkle SVG for AI generation
Hide "Featured image" option entirely when no featured image exists (instead of just disabling it)
Show "Select" + "Edit" (primary) buttons side by side when SIG template is active
Simplify MediaPreview to image-only (buttons managed by parent)
Update BackgroundImagePicker in the edit template modal to match new patterns

Other information

Based on the latest iteration from the mockup discussion in the P2 comments.

Related product discussion/links

p1HpG7-xW0-p2

Does this pull request change what data or activity we track or use?

No

Testing instructions

Scenario 1: Featured image set, default state (featured image selected)

Create or edit a post with a featured image
Open the Social sidebar
Verify the image preview shows the featured image
Verify a "Select" button is visible below the image (always visible, no hover)
Verify there is NO "No media" option

Scenario 2: SIG template selected (Select + Edit buttons)

Select "Social image template" from the dropdown
Verify the template preview is shown
Verify "Select" (secondary) and "Edit" (primary/blue) buttons appear side by side below the image
Verify both buttons are the same width
Click "Edit" — verify the SIG edit template modal opens

Scenario 3: No featured image — dropdown menu

Remove the featured image from the post (or create a new post without one)
Click "Select" button
Verify "Featured image" option is NOT shown in the dropdown
Verify a "No media" option appears at the bottom of the dropdown
Click "Select" again and click "No media"
Verify the media is cleared and the description shows "Your post won't show an image."

Scenario 4: Edit template modal — background image picker

With SIG template active, click "Edit"
In the modal sidebar under "Background image", verify the "Select image" button works
Click "Select image" — verify the dropdown shows correct options (Default Image, Featured Image, Media Library)
Verify "No image" option appears at the bottom
Verify the Featured Image option uses the correct postFeaturedImage icon

…u options Fixes SOCIAL-430

github-actions · 2026-04-08T14:05:19Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the update/social-media-picker-ux-improvements branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/social-media-picker-ux-improvements

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2026-04-08T14:05:29Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

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:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

jp-launch-control · 2026-04-08T14:19:33Z

Code Coverage Summary

Cannot generate coverage summary while tests are failing. 🤐

Please fix the tests, or re-run the Code coverage job if it was something being flaky.

Full summary · PHP report · JS report

manzoorwanijk

This looks good, but I think the label "Select" when there is already something selected is confusing. Should we label it as "Select" only when nothing is selected, otherwise label it as "Change"? That also reads well with the options in the dropdown. What do you think?

Copilot

Pull request overview

This PR updates the Jetpack Social “Media” picker UI to make actions always visible, clarify menu wording, and align iconography across the sidebar and the SIG edit-template modal.

Changes:

Moves selection/edit actions into a persistent button row below the preview and removes hover-only controls.
Renames/re-groups media source menu options, hides “Featured image” when unavailable, and adds “No media” / “No image” clearing options.
Updates icons (including a new sparkle SVG) and adjusts tests + styling to match the new UX.

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
projects/packages/publicize/changelog/update-social-media-picker-ux-improvements	Adds changelog entry for the media picker UX update.
projects/packages/publicize/_inc/components/unified-modal/edit-template/background-image-picker.tsx	Updates edit-template modal background picker to use new dropdown + “No image” option and updated icons.
projects/packages/publicize/_inc/components/media-section-v2/utils/media-source-options.ts	Renames menu labels/groups and swaps icons (template/featured/AI sparkle).
projects/packages/publicize/_inc/components/media-section-v2/types.ts	Updates component prop types (adds `onRemove`, simplifies `MediaPreviewProps`).
projects/packages/publicize/_inc/components/media-section-v2/test/media-source-menu.test.tsx	Extends tests for new labels and “No media” / featured-image hiding behavior.
projects/packages/publicize/_inc/components/media-section-v2/test/media-preview.test.tsx	Updates tests to reflect MediaPreview no longer rendering action buttons.
projects/packages/publicize/_inc/components/media-section-v2/test/index.test.tsx	Updates integration tests to use “Select” and “No media” flows instead of “Replace/Remove”.
projects/packages/publicize/_inc/components/media-section-v2/styles.module.scss	Adds new layout styles for persistent action row and updated preview spacing.
projects/packages/publicize/_inc/components/media-section-v2/media-source-menu.tsx	Implements new group labels, hides featured option when absent, and adds “No media” item.
projects/packages/publicize/_inc/components/media-section-v2/media-preview.tsx	Simplifies preview to media-only rendering (spinner + image/video preview).
projects/packages/publicize/_inc/components/media-section-v2/index.tsx	Reworks layout to show preview + action row; wires `onRemove` through menu.
projects/packages/publicize/_inc/components/media-section-v2/icons/sparkle.tsx	Adds the custom sparkle SVG icon for the AI image option.

Copilot · 2026-04-09T08:39:31Z

projects/packages/publicize/changelog/update-social-media-picker-ux-improvements

+Significance: minor
+Type: changed
+
+Social: Move media section buttons below preiview to be more apparent.


Typo in changelog entry text: "preiview" should be "preview".

Suggested change

Social: Move media section buttons below preiview to be more apparent.

Social: Move media section buttons below preview to be more apparent.

Social: Improve media picker UX — always-visible buttons, clearer men…

660e424

…u options Fixes SOCIAL-430

github-actions bot added [Feature] Publicize Now Jetpack Social, auto-sharing [Package] Publicize [Status] In Progress [Tests] Includes Tests labels Apr 8, 2026

github-actions bot added the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label Apr 8, 2026

gmjuhasz added 2 commits April 9, 2026 10:22

Merge branch 'trunk' into update/social-media-picker-ux-improvements

2bb4238

changelog

e4a3ca1

gmjuhasz self-assigned this Apr 9, 2026

gmjuhasz requested a review from a team April 9, 2026 08:23

gmjuhasz marked this pull request as ready for review April 9, 2026 08:24

manzoorwanijk requested a review from Copilot April 9, 2026 08:34

Copilot started reviewing on behalf of manzoorwanijk April 9, 2026 08:35 View session

manzoorwanijk approved these changes Apr 9, 2026

View reviewed changes

Copilot AI reviewed Apr 9, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Social: Improve media picker UX — always-visible buttons, clearer menu options#47995

Social: Improve media picker UX — always-visible buttons, clearer menu options#47995
gmjuhasz wants to merge 3 commits intotrunkfrom
update/social-media-picker-ux-improvements

gmjuhasz commented Apr 8, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 8, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 8, 2026 •

edited

Loading

Uh oh!

jp-launch-control bot commented Apr 8, 2026 •

edited

Loading

Uh oh!

manzoorwanijk left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	Social: Move media section buttons below preiview to be more apparent.
	Social: Move media section buttons below preview to be more apparent.

Conversation

gmjuhasz commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Other information

Related product discussion/links

Does this pull request change what data or activity we track or use?

Testing instructions

Scenario 1: Featured image set, default state (featured image selected)

Scenario 2: SIG template selected (Select + Edit buttons)

Scenario 3: No featured image — dropdown menu

Scenario 4: Edit template modal — background image picker

Uh oh!

github-actions bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jp-launch-control bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage Summary

Uh oh!

manzoorwanijk left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

gmjuhasz commented Apr 8, 2026 •

edited

Loading

github-actions bot commented Apr 8, 2026 •

edited

Loading

github-actions bot commented Apr 8, 2026 •

edited

Loading

jp-launch-control bot commented Apr 8, 2026 •

edited

Loading