[WIP] Forms: Fix Outlined form style for inner block based fields JETPACK-273 #43202

aaronrobertshaw · 2025-04-23T03:02:21Z

JETPACK-273

Proposed changes:

Updates the Input block's selector to target the notched label wrappers for the outlined block style borders

Note: This PR only looks at the Global Styles side of borders for inner block based fields. It is incomplete.

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

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

Testing instructions:

Go to '..'

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 <[email protected]>

* 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 <[email protected]>

…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

* 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 <[email protected]> * syncing server block supports with frontend * try again --------- Co-authored-by: Aaron Robertshaw <[email protected]>

* 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 <[email protected]>

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

…reviews JETPACK-278 (#43100)

#43101)

- Ensure block class is added to legend element - Add custom block classes and styles to legend - Tweak default style specificity so global styles can apply

github-actions · 2025-04-23T03:03:20Z

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 fix/outlined-form-global-styles-for-inner-blocks branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack fix/outlined-form-global-styles-for-inner-blocks

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 · 2025-04-23T03:03:24Z

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!

jp-launch-control · 2025-04-23T03:11:10Z

Code Coverage Summary

No summary data is available for parent commit c5ee076, 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 c5ee076 is available.

Full summary · PHP report · JS report

ramonjd · 2025-05-01T07:55:56Z

Carrying on over in:

[WIP] Forms: migrate Outlined form style for inner block based fields #43327

aaronrobertshaw and others added 30 commits April 22, 2025 14:19

Add base form field blocks

b634244

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

fe9a1c0

Prevent style syncing when blocks are reused in previews

9bd1208

Ensure label is editable after being emptied and placeholder shows

a409497

changelog

216fbd1

Fix CSS linting issues

eb8190b

Make select dropdown field's edit component more robust

427d93d

First pass at updating form variations

a21cbbc

Quick clean up of form variations

404e1c7

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

91efcb5

…box field

Clean up form field and inner block attributes

6993257

Remove lodash dependency from dropdown field edit component

714d2e4

Remove remaining lodash uses in new or updated form blocks

623f549

Remove TODO as Dropdown fields didn't use option styles

cec7aa1

Fix default styling for Consent field option label

89f661f

Clean up unrequired TODO item

db17c1c

Clean some more TODOs

efdeb6a

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

bd56a62

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

8e8bed6

Fix typo

a123a15

Co-authored-by: Ramon <[email protected]>

Fix linting error in editor.scss

1fff7dc

Attempt to fix warnings about PhanUndeclaredTypeParameter for WP_Block

5e43c22

Fix linting issue in class-contact-form.php

0996295

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

e38631b

…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…

0cb8536

…e quotes for the purposes of JSON decoding

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

5092f96

…ne 'class' attribute on the extra_attrs array

aaronrobertshaw and others added 13 commits April 22, 2025 14:29

Fix style linting error

6ead1bb

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

7fc6ad2

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

a5ba2b1

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)

1f166d0

* Hoist @cover annotations to class level. * changelog

Forms: Fix display of label and option fallback values in transform p…

f0217c7

…reviews JETPACK-278 (#43100)

Add fallback styles for dropdown block when css vars are not populated (

8757a21

#43101)

Add missed cleaned up label fallback handling

ec9fe41

Fix rendering of legend as a label

3d84a00

- Ensure block class is added to legend element - Add custom block classes and styles to legend - Tweak default style specificity so global styles can apply

Remove redundant array check to make linter happy.

c5ee076

Allow global style borders for Outlined form style

ca59d6c

aaronrobertshaw added [Feature] Contact Form [Block] Contact Form Form block (also see Contact Form label) [Package] Forms Bug labels Apr 23, 2025

github-actions bot added the [Status] In Progress label Apr 23, 2025

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 23, 2025

andrewserong force-pushed the update/migrate-form-fields-to-inner-blocks branch from c543a51 to 793a2a9 Compare April 28, 2025 00:02

ramonjd mentioned this pull request Apr 30, 2025

Testing adding CSS vars to field for block level styles #43304

Closed

3 tasks

ramonjd closed this May 1, 2025

ramonjd deleted the fix/outlined-form-global-styles-for-inner-blocks branch May 1, 2025 07:56

github-actions bot removed [Status] In Progress [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. labels May 1, 2025

ramonjd mentioned this pull request May 1, 2025

[WIP] Forms: migrate Outlined form style for inner block based fields #43327

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[WIP] Forms: Fix Outlined form style for inner block based fields JETPACK-273 #43202

[WIP] Forms: Fix Outlined form style for inner block based fields JETPACK-273 #43202

Uh oh!

aaronrobertshaw commented Apr 23, 2025

Uh oh!

github-actions bot commented Apr 23, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Apr 23, 2025 •

edited

Loading

Uh oh!

jp-launch-control bot commented Apr 23, 2025

Uh oh!

ramonjd commented May 1, 2025

Uh oh!

Uh oh!

[WIP] Forms: Fix Outlined form style for inner block based fields JETPACK-273 #43202

[WIP] Forms: Fix Outlined form style for inner block based fields JETPACK-273 #43202

Uh oh!

Conversation

aaronrobertshaw commented Apr 23, 2025

Proposed changes:

Other information:

Jetpack product discussion

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

Testing instructions:

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

jp-launch-control bot commented Apr 23, 2025

Code Coverage Summary

Uh oh!

ramonjd commented May 1, 2025

Uh oh!

Uh oh!

github-actions bot commented Apr 23, 2025 •

edited

Loading

github-actions bot commented Apr 23, 2025 •

edited

Loading