Skip to content

Form Block: Add styling for input fields #27837

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
jeherve merged 77 commits into from
Jan 27, 2023
Merged

Form Block: Add styling for input fields #27837

jeherve merged 77 commits into from
Jan 27, 2023

Conversation

@donnchawp
Copy link
Contributor

@donnchawp donnchawp commented Dec 8, 2022 •
edited
Loading

This adds various style settings to the sidebar of the contact form input fields.

Styles such as:

  • Corner Radius
  • Border Width
  • Line Height of input field
  • Color of label text, input text, border and input field.

The attributes defined in the sidebar are copied to the PHP shortcode that creates the input fields when the form is displayed.

It's still very much a work in progress.

Fixes #27525

Changes proposed in this Pull Request:

  • Adds more sidebar controls for the input fields of the contact form.
  • Reads those attributes and adds them to the shortcodes used to display the input fields.

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?

Jetpack product discussion

pcsBup-py-p2#comment-126

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

No

Testing instructions:

  • Apply the patch
  • Create a form block and click on the Name field.
  • In the sidebar change the colours and other settings.
  • Load/reload the page holding the form block to observe changes.

@donnchawp donnchawp self-assigned this Dec 8, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Dec 8, 2022 •
edited
Loading

Are you an Automattician? You can now test your Pull Request on WordPress.com. On your sandbox, run

bin/jetpack-downloader test jetpack add/styling_for_input_fields

to get started. More details: p9dueE-5Nn-p2

@github-actions github-actions bot added [Block] Contact Form Form block (also see Contact Form label) [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Status] In Progress [Feature] Contact Form labels Dec 8, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Dec 8, 2022 •
edited
Loading

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.
  • ⚠️ All commits were linted before commit.
  • ✅ Add a "[Status]" label (In Progress, Needs Team 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 🤖

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

Jetpack plugin:

  • Next scheduled release: February 7, 2023.
  • Scheduled code freeze: January 31, 2023.

@donnchawp
Copy link
Contributor Author

donnchawp commented Dec 21, 2022

Design ideas for the sidebar by @digitalwaveride:

sidebar input field styling

donnchawp and others added 9 commits December 21, 2022 13:04
@donnchawp
Pass the attributes so it displays without error
0b605a2
@donnchawp
Changes to sidebar settings:
b78e6eb 
* Move color settings
* Add blockBackgroundColor
* Rename backgroundColor to fieldBackgroundColor
@donnchawp
Rename panels, add Typography, move things
927c1c9
@donnchawp
Updates to styling:
98a14e5 
Replaced a single background color with separate field and block colors
Started styling multiple checkbox input and radio input
Removed code added to escape supports.
@donnchawp
Make field and label styles into class variables.
c7bc8ba
@donnchawp
Style the textarea block background
9089063
@donnchawp
Simplify how styles are represented.
d17782f
@ice9js
Add remaining typography and border controls
303e745
@ice9js
Fix JS condition
d7847e8
digitalwaveride
digitalwaveride approved these changes Jan 27, 2023
View reviewed changes
Copy link

@digitalwaveride digitalwaveride left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was an adventure!

😻😻😻
So cool to see this first version ready! First big step!

Thanks so much Donncha, Kuba and João!!! 🚀

@jcheringer jcheringer added [Status] Needs Review This PR is ready for review. and removed [Status] Needs Team Review Obsolete. Use Needs Review instead. labels Jan 27, 2023
@jcheringer jcheringer requested a review from jeherve January 27, 2023 15:11
jeherve
jeherve approved these changes Jan 27, 2023
View reviewed changes
Copy link
Member

@jeherve jeherve left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good to me. It will really bring the forms to a new level.
We'll need to remember to come back to this in future WordPress releases, once those unstable features become more stable.

@jeherve jeherve added [Status] Ready to Merge Go ahead, you can push that green button! [Status] Needs Testing We need to add this change to the testing call for this month's release and removed [Status] Needs Review This PR is ready for review. labels Jan 27, 2023
@jeherve jeherve dismissed stale reviews from ice9js and CGastrell January 27, 2023 17:11

Changes addressed

@jeherve jeherve enabled auto-merge (squash) January 27, 2023 17:12
@jeherve jeherve merged commit 4d2e83b into trunk Jan 27, 2023
@jeherve jeherve deleted the add/styling_for_input_fields branch January 27, 2023 17:23
@github-actions github-actions bot added this to the jetpack/11.8 milestone Jan 27, 2023
@github-actions github-actions bot removed the [Status] Ready to Merge Go ahead, you can push that green button! label Jan 27, 2023
@ai2n
Copy link

ai2n commented Jan 30, 2023

Not sure if related to recent changes, but dropping a note for visibility just in case, since I see related files may have been moved/touched:
#28635

@ice9js ice9js mentioned this pull request Jan 30, 2023
Merged
3 tasks
@jcheringer jcheringer mentioned this pull request Feb 3, 2023
Merged
3 tasks
@samiff samiff removed the [Status] Needs Testing We need to add this change to the testing call for this month's release label Feb 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jcheringer jcheringer jcheringer left review comments

@jeherve jeherve jeherve approved these changes

@digitalwaveride digitalwaveride digitalwaveride approved these changes

@CGastrell CGastrell CGastrell left review comments

+1 more reviewer

@ice9js ice9js ice9js left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

@donnchawp donnchawp

Labels

[Block] Contact Form Form block (also see Contact Form label) [Feature] Contact Form [Feature] Masterbar WordPress.com Toolbar and Dashboard customizations [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/

Projects

None yet

Milestone

jetpack/11.8

Development

Successfully merging this pull request may close these issues.

Form block: Add styling options for input form fields: border radius, border color, background color

9 participants

@donnchawp @ice9js @digitalwaveride @jcheringer @CGastrell @ai2n @jeherve @samiff