Login/out Block: Enhance Customization Options for "Display as Form" #68896
Description
Problem
The current Login/out block lacks customization options when users select the "Display as form" style. There is no way to:
- Modify default form labels (e.g., "Username", "Password", "Remember Me", "Log In").
- Customize the visual style of the login form (e.g., colors, spacing, input fields) to match site themes.
- 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.
