Social: Settings tab on the modernization chassis (#48824 PR 3)#48860
Merged
Conversation
Contributor
|
Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.
Interested in more tips and information?
|
keoshi
added
[Status] Needs Review
github-actions
Bot
added
[Feature] Publicize
Contributor
|
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! Jetpack plugin: The Jetpack plugin has different release cadences depending on the platform:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Social plugin: No scheduled milestone found for this plugin. If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. |
6 tasks
Code Coverage Summary11 files are newly checked for coverage. Only the first 5 are listed here.
Full summary · PHP report · JS report If appropriate, add one of these labels to override the failing coverage check:
Covered by non-unit tests
|
keoshi
force-pushed
the
update/social-modernization-modal-wpds
branch
from
3e6290e to
fe74066
Compare
keoshi
force-pushed
the
update/social-modernization-settings
branch
2 times, most recently
from
98d47c5 to
1e0ca69
Compare
dhasilva
force-pushed
the
update/social-modernization-modal-wpds
branch
from
1101761 to
5ecbf8a
Compare
…48824) Fills the empty `Tabs.Panel value="settings"` placeholder PR 1 left behind with four WPDS `Card.Root` groups that mirror the umbrella's Settings design: - **Default share message** — wraps the shared `MessageTemplateEditor` with the same debounced autosave the legacy `MessageTemplateSection` uses. Self-gates on the `social-message-templates` blog sticker and `manage_options`, so stickerless sites simply don't see the card. - **Content creation** — Social Notes toggle, a compact "Create a note" action, the "Append post link" sub-toggle, and the "Link format" select. Mounted only when the Social plugin is active (the CPT registration still lives in `projects/plugins/social/`). - **Customize media** — Social Image Generator toggle and a compact "Change defaults" action that opens the existing `TemplatePickerModal`. Gated by the paid `social-image-generator` feature. - **Customize links** — UTM parameters toggle. When Publicize is inactive on a self-hosted site (and the current user can toggle modules), the cards collapse to a thin WPDS `EmptyState` that points back at the wp-admin module-toggles surface. The legacy master `SocialModuleToggle` is intentionally not ported (umbrella decision: product visibility lives outside the product itself). The column caps at 660px via `.jetpack-social-settings` so the form rows stay scannable; the chassis page chrome and the Overview tab keep their existing widths. Inline action rows (`__card-actions`) and nested form controls (`__card-nested`) share the `--wpds-dimension-gap-3xl` token (40px in the default theme, 32px in the compact one) so the indent under each toggle's label column tracks the toggle's size scale. Side-fix the chassis bundler couldn't compile the SIG template picker before: the picker's `templates.js` shipped `.jpg` imports that the wp-build esbuild pipeline can't parse, and the picker tree was `.js` JSX that esbuild rejects by default. The four template thumbnails move to `_inc/assets/sig-templates-*.jpg` (the same runtime-`assets_url` pattern `services/utils.tsx` uses), and the picker / modal / media-picker / video-preview entries rename to `.tsx` / `.ts` so esbuild parses the JSX. The legacy webpack bundle keeps working unchanged. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- WPDS Button doesn't accept `href`; use Base UI's `render` slot
(`render={ <a href={...} /> }`) so the "Create a note" and "Manage
modules" buttons actually navigate.
- Drop `variant="secondary"` on the "Change defaults" trigger — WPDS
Button variants are `solid | outline | minimal | unstyled`, so
`secondary` silently fell back to the default solid/brand fill.
Switch both action triggers to `variant="outline"` so they read as
the secondary affordances they're meant to be.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
dhasilva
force-pushed
the
update/social-modernization-settings
branch
from
1e0ca69 to
b39e150
Compare
The PR-3 rename of media-picker/index.js → .tsx exposed type errors the
.js file masked: mediaDetails inferred as {} (so the mediaData/metaData/
previewData destructure failed) and every prop became required (so the
template-picker modal's MediaPicker call errored on the omitted
wrapperClassName). Add an explicit MediaPickerProps type, and complete
the MediaDetails type with the previewData field the hook already
returns.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Covers SettingsTab's visibility logic — the admin empty state vs. cards, and the per-card gating (message-templates feature + manage_options, Social-plugin presence, image-generator feature). Stubs the card children so the test isolates the gating decisions rather than each card's store wiring. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replace the hand-rolled flex/gap SCSS with the @wordpress/ui Stack component (matching the WPDS audit feedback on PR 48833). Stack owns the flex direction + gap tokens; the stylesheet keeps only what Stack doesn't — the 660px column cap and the toggle-aligned indents (now a single shared rule for the action rows and nested controls). Verified in-browser: desktop column stays capped/centred at 660px and mobile goes full-width, both with the same 16px gaps and 40px indents as before. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
github-actions
Bot
added
[Status] UI Changes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Phase 3 of the Social modernization umbrella. Fills the empty
Tabs.Panel value="settings"placeholder PR 1 left behind with four WPDSCard.Rootgroups, behind the samersm_jetpack_ui_modernization_socialfilter. Stacks on PR 2.5 — depends on it merging first.Highlights
MessageTemplateEditorwith the same debounced autosave the legacyMessageTemplateSectionuses. Self-gates on thesocial-message-templatesblog sticker +manage_options; stickerless sites simply don't see the card.<a>via Base UI'srenderslot since WPDS Button ignoreshref), the "Append post link" sub-toggle, and the "Link format" select. Mounted only when the Social plugin is active — the CPT registration still lives inprojects/plugins/social/(pedxs5-r7-p2 is Notes-as-Social-plugin-driver; keeping the placement is intentional).TemplatePickerModal. Gated by the paidsocial-image-generatorfeature.EmptyStatepointing back at the wp-admin module-toggles surface. The legacy masterSocialModuleToggleis intentionally not ported (umbrella decision: product visibility lives outside the product itself)..jetpack-social-settingsso the form rows stay scannable; the page chrome and the Overview tab keep their existing widths. Inline action rows (__card-actions) and nested form controls (__card-nested) share the--wpds-dimension-gap-3xltoken (40px in the default theme, 32px in the compact one) so the indent under each toggle's label column tracks the toggle's size scale.Side-fix — the chassis bundler couldn't compile the SIG template picker before: the picker's
templates.jsshipped.jpgimports the wp-build esbuild pipeline can't parse, and the picker tree was.jsJSX that esbuild rejected by default. The four template thumbnails move to_inc/assets/sig-templates-*.jpg(the same runtime-assets_urlpatternservices/utils.tsxuses), and the picker / modal / media-picker / video-preview entries rename to.tsx/.tsso esbuild parses the JSX. The legacy webpack bundle keeps working unchanged.Screenshots
Settings tab — all four Card groups on a paid-plan + Social-plugin site
Testing instructions:
jetpack build packages/publicize --deps(or rsync the Jetpack plugin to a Jurassic Ninja site).wp jetpack module activate publicize.wp option update jetpack-social_show_pricing_page 0(otherwiseshould_preempt_to_legacy()routes the request back to the legacySocialAdminPage).add_filter( 'rsm_jetpack_ui_modernization_social', '__return_true' );.wp-admin → Jetpack → Social→ Settings tab (or?p=/?tab=settings).updateUtmSettings(network roundtrip via/wpcom/v2/publicize/jetpack-social-settings).social-image-generatorplan feature. Expected: toggle + helper text, plus a compact outlined "Change defaults" trigger that opens the existingTemplatePickerModal(template grid, default image picker, font select).JetpackScriptData.social.plugin_info.social.versionis truthy). Expected: "Enable Social Notes" toggle + compact outlined "Create a note" action that navigates to the Social Notes CPT new-post screen. When the toggle is on, the "Append post link" sub-toggle and a 40px-indented "Link format" select appear.social-message-templatesblog sticker AND the current user hasmanage_options. Expected: the sharedMessageTemplateEditortextarea + the "Available placeholders" dropdown; edits autosave via/wp/v2/settings(1s debounce). To enable on a site, ask a sandboxed Automattician to runwpsh > add_blog_sticker( 'jetpack-social-message-templates', null, null, $blog_id );.wp option update jetpack_active_modules 'a:0:{}'or via the Jetpack module manager). Reload the Settings tab. Expected: the four cards collapse to a single WPDSEmptyState("Auto-sharing is turned off" + "Manage modules" link back to Jetpack settings). The empty state shows only for admins on self-hosted sites; WPCOM Simple sites never hit it (Publicize is always on there).SocialAdminPagerenders unchanged — same header, sameAdminSectionlayout, same three toggles.Does this pull request change what data or activity we track or use?
No. PR 3 wires existing store actions and existing REST endpoints (
updateSocialNotes,updateSocialNotesConfig,updateUtmSettings,updateSocialImageGeneratorConfig,setMessageTemplate) into a new chassis surface, gated by the same modernization filter as PR 1–2.5. No new Tracks events, no new REST endpoints, no new options. The bundler-compatibility renames + asset moves preserve every existing import path through the consumer-facing barrel files.🤖 Generated with Claude Code