Skip to content
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.

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

Login/out Block: Enhance Customization Options for "Display as Form" #68896

Open
1 task done
Mayank-Tripathi32 opened this issue Jan 27, 2025 · 2 comments
Open
1 task done
Labels
[Block] Login/out Affects the Login/out Block [Type] Enhancement A suggestion for improvement.

Comments

@Mayank-Tripathi32
Copy link
Contributor

Problem

The current Login/out block lacks customization options when users select the "Display as form" style. There is no way to:

  1. Modify default form labels (e.g., "Username", "Password", "Remember Me", "Log In").
  2. Customize the visual style of the login form (e.g., colors, spacing, input fields) to match site themes.
  3. Show/hide specific fields (e.g., "Remember Me" checkbox, "Lost your password?" link).

This limits theme designers and site owners from creating cohesive login experiences from site editor

Proposed Solution

Add the following customization options to the block settings when "Display as form" is selected:

1. Label Customization

  • Text controls for:
    • Username/Email label
    • Password label
    • "Remember Me" label
    • Submit button text
    • "Lost password?" link text (option is completely missing currently)

2. Style Controls (via block supports or dedicated options)

  • Color settings for form background, input fields, buttons, and text.
  • Typography controls for labels/buttons.
  • Spacing adjustments for form padding/margins.

3. Toggle Visibility

  • Checkbox options to show/hide:
    • "Remember Me" checkbox
    • "Lost your password?" link

4. Advanced Customization

  • Allow custom CSS classes for the form container/inputs.

Examples

  • A site using email-based logins could rename the "Username" label to "Email Address".
  • A dark-themed website could style the login form with dark background/input colors.
  • A minimalistic design could hide the "Remember Me" checkbox.
  • What if you wanted to preview the form? There is no way currently in editor.

Additional Context

This would add flexibility to the Login/out block’s and make it more usable.

Related Issues

  • I’ve searched for existing requests in the Gutenberg repository and confirmed this is not a duplicate.

Please Note

  • I would like to work on this issue if the enhancement mentioned are something we can consider.
@Mayank-Tripathi32 Mayank-Tripathi32 added the [Type] Enhancement A suggestion for improvement. label Jan 27, 2025
@carolinan carolinan added the [Block] Login/out Affects the Login/out Block label Jan 27, 2025
@himanshupathak95
Copy link
Contributor

Related #68226

@Mayank-Tripathi32
Copy link
Contributor Author

Related #68226

Its more of an enhancement geared towards the login form.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Login/out Affects the Login/out Block [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

3 participants