Donations Block: modal display mode with trigger button and icon picker by angelablake · Pull Request #48539 · Automattic/jetpack

angelablake · 2026-05-05T21:32:59Z

Stacked on top of #48492. Reviews can wait until that lands; this PR can be tested on Jetpack Beta in parallel.

Proposed changes

Adds a Pop-up display mode to the Donations Form block, alongside the existing In-page mode.

Display mode toggle

New In-page / Pop-up toggle in the block's Display inspector panel. In-page is the existing behavior (form renders inline on the page). Pop-up replaces the form with a trigger button; clicking it opens the full form in a centered modal overlay.
Editor preview in Pop-up mode shows only the trigger button — matching what actually renders on the page before interaction, consistent with core block conventions.

Trigger button

Configurable label (default: "Donate") and an optional icon — 4 choices: Heart, Gift, Smiley, Coffee (default: Heart). Icon can be toggled off entirely.
Sticky toggle: when enabled, the trigger button is fixed to the bottom-right corner of the viewport (position: fixed) so it stays visible as visitors scroll — useful for footers or sidebars.
Alignment toolbar (left / center / right) controls the trigger button's position within its container.

Modal overlay

Full-viewport overlay with blurred backdrop. Modal dialog is centered, scrollable, max-width 640px.
Fully accessible: focus trap (Tab / Shift-Tab cycle stays inside), ESC closes, backdrop click closes, X button closes, body scroll locked while open, focus returns to trigger on close.

Border controls

Removed native __experimentalBorder block support (which applied borders to the full block wrapper in both modes). Replaced with manually-rendered Border and Radius controls under the Styles tab, shown only in In-page mode — so Pop-up mode never shows a confusing block-level border panel.
In-page mode retains the default gray border and full user-customizable border/radius. Pop-up mode suppresses the default border entirely (is-display-modal class).

Related product discussion/links

Part of the same internal RSM project as #48415.

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

No tracking or data changes. The display mode, trigger button settings, and sticky flag are stored as block attributes only.

Testing instructions

In-page mode (regression)

Add a Donations Form block. Confirm it defaults to In-page mode and behaves exactly as before. [screenshot]

Switching to Pop-up mode
2. In the Display inspector panel, toggle from In-page to Pop-up. The editor should show only the trigger button preview — no inline form below it. [screenshot]
3. Change the button label in the "Button text" field — the preview updates immediately.
4. Toggle Show icon off — the button renders text only. Toggle back on and cycle through the 4 icon options — each should update the preview. [screenshot]

Frontend behavior
5. Save and view on the frontend — only the trigger button should be visible; the form should not be on the page until the button is clicked. [screenshot]
6. Click the trigger button — the modal opens with the full donations form, backdrop is blurred. [demo]
7. Close via ESC key — modal dismisses, focus returns to the trigger button.
8. Close via backdrop click (outside the dialog) — same result.
9. Close via the X button — same result.
10. While the modal is open, Tab and Shift-Tab should cycle focus only within the modal (focus trap). Body scroll should be locked.

Sticky
11. Enable the Sticky toggle in the Display panel. Save and scroll the frontend page — the trigger button should remain fixed in the bottom-right corner of the viewport. [demo]

Border controls
12. In Pop-up mode, confirm the Styles tab does not show a Border panel — borders don't apply to the full block wrapper in this mode.
13. Switch to In-page mode — the Border panel should reappear under Styles and work normally. [screenshot]

Alignment
14. Use the alignment toolbar to set the trigger button left, center, and right. [screenshot]

…picker Adds `displayMode` (inline/modal), `triggerButtonText`, and `triggerIcon` attributes. In modal mode the block renders as a styled trigger button that opens the full donations form in an accessible overlay modal (focus trap, ESC to close, backdrop click to close, scroll lock, return focus on close). Includes a 3×3 curated icon picker (9 icons + None) in the editor sidebar and a trigger button preview in the editor canvas. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

github-actions · 2026-05-05T21:33:48Z

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 add/donations-modal-display branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack add/donations-modal-display

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-05-05T21:34:11Z

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!

Jetpack 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.

jp-launch-control · 2026-05-05T21:42:41Z

Code Coverage Summary

No summary data is available for parent commit 02c8f8a, so cannot calculate coverage changes. 😴

If that commit is a feature branch rather than a trunk commit, this is expected. Otherwise, this should be updated once coverage for 02c8f8a is available.

Full summary · PHP report · JS report

- Fix block border: reset border/radius on wrapper (!important to override inline block-support styles) and forward them to the modal dialog instead; overflow:hidden on dialog enables border-radius clipping - Add trigger button alignment: contentAlignment now also applies text-align to the block wrapper in modal mode, aligning the trigger button left/center/right - Simplify icon picker to 4 icons (heart, gift, smiley, cup) in a single row; replace the "None" grid button with a Show icon ToggleControl consistent with other settings panels Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Rename display mode labels: Inline → In-page, Button & Modal → Pop-up - Pop-up mode editor now shows just the trigger button (matching the frontend) instead of the full form preview - Remove dead editor styles for the modal form preview and hint text Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

… hack - Import and render Controls in edit.js for pop-up mode so all inspector panels (Display, Settings, Security) are available regardless of mode - Remove border:none!important and border forwarding to modal dialog; block-support border now applies to the wrapper (trigger button) as expected — users can style it normally - Remove dead is-modal-display class that existed only to support the reset Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…for In-page mode Remove __experimentalBorder from block.json supports (which auto-serialized border onto the full block wrapper in both modes). Add blockBorder/blockBorderRadius attributes manually via custom BorderBoxControl + BorderRadiusControl in controls.js, rendered only when displayMode !== 'modal'. Border rules emit via the per-instance <style> tag using a compound selector (.wp-block-jetpack-donations.jp-donations-N) for specificity. Pop-up mode suppresses the default gray border via is-display-modal class + common.scss rule. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…y toggle - triggerIcon default: coffee → heart (block.json + PHP fallback) - Trigger button placeholder / PHP fallback text: "Support me" → "Donate" - New triggerSticky boolean attribute; Sticky toggle in Display panel (Pop-up only) - Sticky mode: position:fixed bottom-right (inset-inline-end for RTL), z-index 9999, is-sticky class on wrapper in both editor and PHP render Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Use WP's isPressed prop (adds is-pressed class) instead of a custom is-selected class. Core's is-pressed style is dark background (#1e1e1e) + white icon, which is high contrast and consistent with WP idioms. Our CSS was overriding the background to 8% opacity blue while the icon was already white — invisible. Now we only set a matching dark border; WP handles background and icon color. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

The 16px top margin was pushing the label away from the input, making the gap look excessive compared to standard WP stacked controls. WP's natural spacing between stacked controls in a PanelBody is sufficient. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

github-actions Bot added [Block] Donations [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ labels May 5, 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 May 5, 2026

Angela Blake and others added 10 commits May 5, 2026 17:22

Add changelog entry for modal display mode feature

9001813

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Fix Phan type errors: cast float to string for format_price calls

08a9e4f

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Donations: move Sticky toggle above Button text, update help text

9a0fece

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

angelablake mentioned this pull request May 6, 2026

add: Tips variation of the Donations block #48584

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Donations Block: modal display mode with trigger button and icon picker#48539

Donations Block: modal display mode with trigger button and icon picker#48539
angelablake wants to merge 11 commits intoupdate/donations-security-settingsfrom
add/donations-modal-display

angelablake commented May 5, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 5, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 5, 2026 •

edited

Loading

Uh oh!

jp-launch-control Bot commented May 5, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

angelablake commented May 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Related product discussion/links

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

Testing instructions

Uh oh!

github-actions Bot commented May 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Code Coverage Summary

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

angelablake commented May 5, 2026 •

edited

Loading

github-actions Bot commented May 5, 2026 •

edited

Loading

github-actions Bot commented May 5, 2026 •

edited

Loading

jp-launch-control Bot commented May 5, 2026 •

edited

Loading