Forms: Add CSS class names to multi-step form buttons

[enejb]

Fixes missing multi-step variation updates.

Follow up on - #46166

Proposed changes:

• Add specific CSS class names (form-button-previous, is-previous, form-button-next, is-next, form-button-submit, is-submit) to multi-step form navigation buttons
• Enables more granular styling control for previous, next, and submit buttons in multi-step forms

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?

No

Testing instructions:

• Create a new post or page in the block editor
• Add a Jetpack Form block and select the "Multi-step" variation
• Inspect the Previous (Back), Next, and Submit buttons in the rendered HTML
• Verify the buttons have the new CSS classes:
  • Previous button: form-button-previous is-previous
  • Next button: form-button-next is-next
  • Submit button: form-button-submit is-submit
• Make sure that the form still submits as expected.

Changelog

• Generate changelog entries for this PR (using AI).

🤖 Generated with Claude Code

[github-actions]

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/button-multi-step-variation branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack fix/button-multi-step-variation

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]

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:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. 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!

[Copilot]

Pull request overview

This PR adds specific CSS class names to multi-step form navigation buttons and migrates from the deprecated metaName property to the current WordPress block API standard metadata: { name: ... } property. The changes align the button definitions in the multistep-form variation with the button templates already established in the form-step-navigation edit.js file.

Changes:

• Added CSS class names (form-button-previous is-previous, form-button-next is-next, form-button-submit is-submit) to Previous, Next, and Submit buttons in the multi-step form variation
• Migrated from deprecated metaName property to metadata: { name: ... } following WordPress block API standards
• Added type: 'submit' attribute to the submit button for proper form submission behavior

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
projects/packages/forms/src/blocks/contact-form/variations.js	Updated multi-step form button definitions to include CSS classes and proper metadata structure, matching the templates in form-step-navigation/edit.js
projects/packages/forms/changelog/fix-button-multi-step-variation	Added changelog entry documenting the CSS class additions

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[jp-launch-control]

Code Coverage Summary

Coverage changed in 1 file.

File	Coverage	Δ%	Δ Uncovered
projects/packages/forms/src/contact-form/class-contact-form-plugin.php	584/1502 (38.88%)	0.01%	1 ❤️‍🩹

Full summary · PHP report · JS report

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[enejb]

@claude review this PR.

[claude]

Claude finished @enejb's task in 1m 38s —— View job

---

PR Review

• Read repository guidelines and changed files
• Analyze changes in variations.js
• Analyze changes in class-contact-form-plugin.php
• Check related files for context (form-step-navigation/edit.js)
• Post review feedback

---

Summary

This PR adds CSS class names to multi-step form navigation buttons in variations.js and fixes a resulting duplicate-class bug in the PHP rendering layer. Overall the changes are clean and well-scoped. A few items worth noting:

---

variations.js — ✅ Looks Good

The button definitions in the multistep variation now correctly match the templates defined in form-step-navigation/edit.js:

Button	Class in edit.js template	Class in variations.js (this PR)
Previous	is-style-outline form-button-previous is-previous	is-style-outline form-button-previous is-previous ✅
Next	form-button-next is-next	form-button-next is-next ✅
Submit	form-button-submit is-submit	form-button-submit is-submit ✅

The migration from the deprecated metaName to metadata: { name: ... } aligns with the WordPress block API standard, and adding type: 'submit' to the submit button is the correct approach for proper form submission.

---

class-contact-form-plugin.php — ✅ Looks Good

The PHP fix at the $is_submit_btn block is clean and backward-compatible:

if ( $processor->has_class( 'is-submit' ) ) {
    $processor->add_class( 'is-hidden' );
} else {
    $processor->add_class( 'is-submit is-hidden' );
}

• New forms (with is-submit already in className from variations.js): only is-hidden is added. ✅
• Existing/legacy forms (without is-submit): both is-submit is-hidden are still added. ✅

This is a good defensive fix to prevent duplicate classes.

---

changelog/fix-button-multi-step-variation — ⚠️ Minor Issues

The AI-generated changelog entry has a couple of issues per the repository's guidelines (AGENTS.md):

1. Type should be fixed, not changed: This is fixing missing CSS classes that were supposed to be there, not introducing a new user-visible change.
2. Entry describes implementation details rather than the user perspective. "Add CSS class names to multi-step form buttons" describes the implementation. A user-facing description would be something like: "Multi-step Form: Fix navigation button styling to support granular CSS customization."

Current entry:

Significance: patch
Type: changed

Add CSS class names to multi-step form buttons for improved styling control

Suggested improvement: Fix this →

---

Overall Assessment

This is a well-targeted fix. The core logic changes in both files are correct and the approach is solid. The only actionable feedback is adjusting the changelog entry type and description. The changes are safe to merge once the changelog is updated.
|