Forms: Add file upload dropzone block #43114

edanzer · 2025-04-16T18:17:23Z

Proposed changes:

Refactors the file field block to contain label block + new dropzone block.
Based on 42980, with small fix to address block validation errors with the image block in the template.
- Considered merging/rebasing but base branch itself was rebased and conflicts were complex.

TODOs

Original PR suggested we need to apply classes for the frontend. But it's worth noting that this implementation works as is. File upload and dropzone render, look as expected (mostly), and functions as expected.
Known issue: frontend icon centering. The dropdown icon is not centered on the frontend, and no adjustments in block settings will make it so. This may be related to the the last point about correctly and fully passing classes and styles to the frontend.

Editor screenshot:

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

None.

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

No.

Testing instructions:

Add form with file upload field.
Confirm file upload and dropzone look right in editor.
Confirm file upload and dropzone look correct and work as expected on frontend.
Refresh the block editor page, and confirm the file upload and dropzone block still load as expected.

Introduces foundational form field blocks: - jetpack/input - jetpack/label - jetpack/option - jetpack/options These blocks will be reused across all field types using inner blocks.

- Prevents adding bulk changes when syncing blocks to the undo stack - Correctly determines the parent field block for option blocks to check if syncing is enabled - Correctly find all option blocks regardless of whether they are a field's direct child, e.g. consent, or nested within an options block e.g. single/multiple choice fields.

This is an enhancement over trunk however the is some work required to make this actually work, especially given the shortcode rendering on the frontend. For the time being this support will explicitly be opted out of. It can be revisited when the benefit justifies the additional complexity and work.

Updates legacy form field blocks to use shared inner blocks: - jetpack/input - jetpack/label - jetpack/option - jetpack/options This commit also updates the registration of form blocks so the new shared blocks are available in the editor.

…box field

Co-authored-by: Ramon <ramonjd@users.noreply.github.com>

* Refactor and update form field syncing. - Use a parent react context provider as the source of truth instead of an arbitrary sibling block. - Perform a deep equality check before syncing to prevent against spurious updates. * When updating the block own attributes, mark the change as not persistent so that the user can undo * Prime the previousOwnAttributes value so that we avoid updating syncedAttributes unnecessarily * Update inline docs * Prime the synced attributes when they are initially unset * Fix syncing of styles across checkbox and consent options --------- Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>

…43027) * Forms: Fix error thrown in previews for synced form fields * Clean up * Rename the context type stuff

…e quotes for the purposes of JSON decoding

…ne 'class' attribute on the extra_attrs array

…choice fields (#43055)

This commit also updates the dropdown field input's styles to make it easier to click when the placeholder has previously been cleared.

* Enhance unit tests for Contact_Form_Block by adding support checks This commit updates the `test_register_child_blocks` method to include an optional parameter for expected block supports and introduces a new test method, `test_child_blocks_block_supports`, to verify the configuration of block supports for various Jetpack blocks. The data provider for the new test method is also added, ensuring comprehensive testing of block support attributes. * Add unit test for gutenblock_render_field_radio method This commit introduces a new test method, `test_gutenblock_gutenblock_render_field_radio`, to validate the rendering of the radio field block in the Contact Form Plugin. The test checks that the generated shortcode matches the expected output, ensuring proper functionality of the radio field block with various attributes and inner blocks. * changelog * remove duplicate tests. silly me! * Apply suggestions from code review Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> * syncing server block supports with frontend * try again --------- Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>

* Ensure jetpack-field__input classname applies to date picker input instead of jetpack-field__date * Remove explicit date type in appointment form variation * Specify the field type for the date field in the block template * Iron out inconsistency of date type for date picker inputs * Tied up text fields array --------- Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>

This reverts commit 38791a8. Restoring these in case they were in place for coverage requirements.

@cover

* Hoist @cover annotations to class level. * changelog

* Fix field block examples being altered by useFormWrapper useFormWrapper adds a form wrapper around any field that doesn't have one. It wasn't preserving the field's own inner blocks, which became visible in the block examples, where single or multiple choice fields have inner blocks but no wrapper. This PR ensures the inner blocks are preserved by calling getBlocks to get the inner blocks of the field and passing that as the inner blocks in the replaceBlocks call within useFormWrapper. * Small improvement to variable name * Add missing useEffect deps * Fix select/dropdown example * Switch e2e test close welcome guide code to use preferences

github-actions · 2025-04-16T18:18:25Z

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 a "[Type]" label (Bug, Enhancement, Janitorial, Task).
✅ 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 🤖

🔴 Action required: Please add missing changelog entries for the following projects: projects/packages/forms

Use the Jetpack CLI tool to generate changelog entries by running the following command: jetpack changelog add.
Guidelines: /docs/writing-a-good-changelog-entry.md

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!

aaronrobertshaw and others added 30 commits April 16, 2025 10:43

Add base form field blocks

99456a6

Introduces foundational form field blocks: - jetpack/input - jetpack/label - jetpack/option - jetpack/options These blocks will be reused across all field types using inner blocks.

changelog

ac3d031

Prevent style syncing when blocks are reused in previews

5c64dce

Ensure label is editable after being emptied and placeholder shows

bd3d97e

changelog

c4cf917

Fix CSS linting issues

d27ed64

Make select dropdown field's edit component more robust

036a769

First pass at updating form variations

679b37b

Quick clean up of form variations

278cdcf

Pass required block toolbar control through to Option block for check…

b5672e6

…box field

Clean up form field and inner block attributes

d26787b

Remove lodash dependency from dropdown field edit component

352db0d

Remove remaining lodash uses in new or updated form blocks

692886c

Remove TODO as Dropdown fields didn't use option styles

c876d17

Fix default styling for Consent field option label

2b937a2

Clean up unrequired TODO item

ede1447

Clean some more TODOs

6edc230

Restore empty string defaults for input, option, and label blocks

aaf1178

Revert use sync style hook to previous version retaining undo stack fix

959c240

Fix typo

7a61233

Co-authored-by: Ramon <ramonjd@users.noreply.github.com>

Fix linting error in editor.scss

c8029b2

Attempt to fix warnings about PhanUndeclaredTypeParameter for WP_Block

349e044

Fix linting issue in class-contact-form.php

04545ad

Forms: Prevent errors when synced attribute context is not available (#…

a65e8c2

…43027) * Forms: Fix error thrown in previews for synced form fields * Clean up * Rename the context type stuff

For html_entity_decode, use ENT_COMPAT since we only care about doubl…

9d597bf

…e quotes for the purposes of JSON decoding

Remove is_array and empty check as we now will always have at least o…

efc2552

…ne 'class' attribute on the extra_attrs array

aaronrobertshaw and others added 15 commits April 16, 2025 10:54

Remove extraneous hook dependency

ee13dd7

Remove useFormWrapper audit TODO - all fields use it

24b2c88

Remove TODOs already captured by issues

21dbe79

Remove unused ids from consent, checkbox, single choice and multiple …

3c1ccd9

…choice fields (#43055)

Fix saving and display of dropdown field placeholder

d373c5b

Fix dropdown field placeholder default

d20aa1d

This commit also updates the dropdown field input's styles to make it easier to click when the placeholder has previously been cleared.

Fix style linting error

649998d

Allow default checked status for standalone option fields (#43077)

4f7e79c

Revert "Remove deprecated covers annotations in line with #42902"

9b57279

This reverts commit 38791a8. Restoring these in case they were in place for coverage requirements.

Forms: move @Covers to class level in PHP unit tests (#43081)

075be3a

* Hoist @cover annotations to class level. * changelog

Add dropzone block to refactor branch

ee86fa0

Fix image block validation error

1299b13

edanzer added [Status] In Progress [Type] Task [Pri] Normal [Block] Contact Form Form block (also see Contact Form label) [Package] Forms [Feature] Forms Blocks Blocks designed to streamline user input and engagement, such as contact, newsletter sign-ups, etc. labels Apr 16, 2025

edanzer self-assigned this Apr 16, 2025

edanzer changed the base branch from trunk to update/migrate-form-fields-to-inner-blocks April 16, 2025 18:17

github-actions bot added the [Feature] Contact Form label Apr 16, 2025

edanzer marked this pull request as ready for review April 16, 2025 18:29

edanzer requested review from aaronrobertshaw and a team April 16, 2025 18:29

edanzer mentioned this pull request Apr 16, 2025

[WIP] Forms: Try using inner blocks for file upload field #42980

Closed

3 tasks

aaronrobertshaw force-pushed the update/migrate-form-fields-to-inner-blocks branch from 2d6820b to 3d84a00 Compare April 22, 2025 04:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Forms: Add file upload dropzone block #43114

Forms: Add file upload dropzone block #43114

edanzer commented Apr 16, 2025 •

edited

Loading

github-actions bot commented Apr 16, 2025

Forms: Add file upload dropzone block #43114

Are you sure you want to change the base?

Forms: Add file upload dropzone block #43114

Conversation

edanzer commented Apr 16, 2025 • edited Loading

Proposed changes:

Other information:

Jetpack product discussion

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

Testing instructions:

github-actions bot commented Apr 16, 2025

edanzer commented Apr 16, 2025 •

edited

Loading