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

docs/reference-guides/core-blocks.md

@@ -436,7 +436,7 @@ Show login & logout links. ([Source](https://github.com/WordPress/gutenberg/tree
 -	**Name:** core/loginout
 -	**Category:** theme
 -	**Supports:** className, color (background, gradients, link, ~~text~~), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
--	**Attributes:** displayLoginAsForm, redirectToCurrent
+-	**Attributes:** displayLoginAsForm, formData, redirectToCurrent, showLostLink, showRememberMe
 
 ## Media & Text
 

packages/block-library/src/loginout/block.json

@@ -15,6 +15,18 @@
 		"redirectToCurrent": {
 			"type": "boolean",
 			"default": true
+		},
+		"formData": {
+			"type": "object",
+			"default": {}
+		},
+		"showRememberMe": {
+			"type": "boolean",
+			"default": true
+		},
+		"showLostLink": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"example": {

packages/block-library/src/loginout/edit.js

@@ -1,20 +1,27 @@
 /**
  * WordPress dependencies
  */
-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	RichText,
+	useBlockProps,
+} from '@wordpress/block-editor';
 import {
 	ToggleControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 export default function LoginOutEdit( { attributes, setAttributes } ) {
-	const { displayLoginAsForm, redirectToCurrent } = attributes;
+	const { displayLoginAsForm, redirectToCurrent, formData, showRememberMe } =
+		attributes;
+	const [ isEditingForm, setIsEditingForm ] = useState( displayLoginAsForm );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	return (
@@ -49,6 +56,46 @@ export default function LoginOutEdit( { attributes, setAttributes } ) {
 							}
 						/>
 					</ToolsPanelItem>
+					{ displayLoginAsForm && (
+						<>
+							<ToolsPanelItem
+								label={ __( 'View Login Form' ) }
+								isShownByDefault
+								hasValue={ () => ! isEditingForm }
+								onDeselect={ () => setIsEditingForm( true ) }
+							>
+								<ToggleControl
+									__nextHasNoMarginBottom
+									label={ __( 'View Login Form' ) }
+									checked={ isEditingForm }
+									onChange={ () =>
+										setIsEditingForm( ! isEditingForm )
+									}
+								/>
+							</ToolsPanelItem>
+							<ToolsPanelItem
+								label={ __( 'Show Remember Field' ) }
+								isShownByDefault
+								hasValue={ () => ! showRememberMe }
+								onDeselect={ () => {
+									setAttributes( {
+										showRememberMe: true,
+									} );
+								} }
+							>
+								<ToggleControl
+									__nextHasNoMarginBottom
+									label={ __( 'Show Remember Form' ) }
+									checked={ showRememberMe }
+									onChange={ () =>
+										setAttributes( {
+											showRememberMe: ! showRememberMe,
+										} )
+									}
+								/>
+							</ToolsPanelItem>
+						</>
+					) }
 					<ToolsPanelItem
 						label={ __( 'Redirect to current URL' ) }
 						isShownByDefault
@@ -75,7 +122,84 @@ export default function LoginOutEdit( { attributes, setAttributes } ) {
 					className: 'logged-in',
 				} ) }
 			>
-				<a href="#login-pseudo-link">{ __( 'Log out' ) }</a>
+				{ isEditingForm ? (
+					<div className="wp-block-loginout-form">
+						<div className="wp-block-loginout-form__fields">
+							<RichText
+								tagName="label"
+								value={ formData.usernameLabel ?? 'Username' }
+								onChange={ ( usernameLabel ) =>
+									setAttributes( {
+										formData: {
+											...formData,
+											usernameLabel,
+										},
+									} )
+								}
+							/>
+
+							<input
+								type="text"
+								placeholder="Username"
+								disabled
+							/>
+						</div>
+						<div className="wp-block-loginout-form__fields">
+							<RichText
+								tagName="label"
+								value={ formData.passwordLabel ?? 'Password' }
+								onChange={ ( passwordLabel ) =>
+									setAttributes( {
+										formData: {
+											...formData,
+											passwordLabel,
+										},
+									} )
+								}
+							/>
+							<input
+								type="password"
+								placeholder="Password"
+								disabled
+							/>
+						</div>
+						{ /* Remember me checkbox */ }
+						{ !! showRememberMe && (
+							<div className="wp-block-loginout-form__fields">
+								<input type="checkbox" disabled />
+
+								<RichText
+									tagName="label"
+									value={
+										formData.rememberLabel ?? 'Remember me'
+									}
+									onChange={ ( rememberLabel ) =>
+										setAttributes( {
+											formData: {
+												...formData,
+												rememberLabel,
+											},
+										} )
+									}
+								/>
+							</div>
+						) }
+
+						<div className="wp-block-loginout-form__fields">
+							<RichText
+								tagName="button"
+								value={ formData.submitLabel ?? 'Log in' }
+								onChange={ ( submitLabel ) =>
+									setAttributes( {
+										formData: { ...formData, submitLabel },
+									} )
+								}
+							/>
+						</div>
+					</div>
+				) : (
+					<a href="#login-pseudo-link">{ __( 'Log out' ) }</a>
+				) }
 			</div>
 		</>
 	);

packages/block-library/src/loginout/index.php

@@ -30,8 +30,28 @@ function render_block_core_loginout( $attributes ) {
 		// Add a class.
 		$classes .= ' has-login-form';
 
+		$args = array(
+			'echo'     => false,
+			'remember' => $attributes['showRememberMe'],
+		);
+
+		if ( ! empty( $attributes['formData'] ) ) {
+			if ( ! empty( $attributes['formData']['rememberLabel'] ) ) {
+				$args['label_remember'] = $attributes['formData']['rememberLabel'];
+			}
+			if ( ! empty( $attributes['formData']['passwordLabel'] ) ) {
+				$args['label_password'] = $attributes['formData']['passwordLabel'];
+			}
+			if ( ! empty( $attributes['formData']['usernameLabel'] ) ) {
+				$args['label_username'] = $attributes['formData']['usernameLabel'];
+			}
+			if ( ! empty( $attributes['formData']['submitLabel'] ) ) {
+				$args['label_log_in'] = $attributes['formData']['submitLabel'];
+			}
+		}
+
 		// Get the form.
-		$contents = wp_login_form( array( 'echo' => false ) );
+		$contents = wp_login_form( $args );
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );

packages/block-library/src/loginout/style.scss

@@ -2,3 +2,18 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 }
+
+.wp-block-loginout .wp-block-loginout-form {
+	// This block has customizable padding, border-box makes that more predictable.
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	gap: 20px;
+}
+
+.wp-block-loginout-form__fields {
+	// This block has customizable padding, border-box makes that more predictable.
+	display: flex;
+	flex-direction: row;
+	gap: 5px;
+}