diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 10ceb797e28c0f..4bc62caf65551e 100644 --- a/docs/reference-guides/core-blocks.md +++ b/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 diff --git a/packages/block-library/src/loginout/block.json b/packages/block-library/src/loginout/block.json index f2aaafd60fde05..5911344fc26ae0 100644 --- a/packages/block-library/src/loginout/block.json +++ b/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": { diff --git a/packages/block-library/src/loginout/edit.js b/packages/block-library/src/loginout/edit.js index 9af634c87371cf..fefee327e95fbc 100644 --- a/packages/block-library/src/loginout/edit.js +++ b/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 } ) { } /> + { displayLoginAsForm && ( + <> + ! isEditingForm } + onDeselect={ () => setIsEditingForm( true ) } + > + + setIsEditingForm( ! isEditingForm ) + } + /> + + ! showRememberMe } + onDeselect={ () => { + setAttributes( { + showRememberMe: true, + } ); + } } + > + + setAttributes( { + showRememberMe: ! showRememberMe, + } ) + } + /> + + + ) } - { __( 'Log out' ) } + { isEditingForm ? ( +
+
+ + setAttributes( { + formData: { + ...formData, + usernameLabel, + }, + } ) + } + /> + + +
+
+ + setAttributes( { + formData: { + ...formData, + passwordLabel, + }, + } ) + } + /> + +
+ { /* Remember me checkbox */ } + { !! showRememberMe && ( +
+ + + + setAttributes( { + formData: { + ...formData, + rememberLabel, + }, + } ) + } + /> +
+ ) } + +
+ + setAttributes( { + formData: { ...formData, submitLabel }, + } ) + } + /> +
+
+ ) : ( + { __( 'Log out' ) } + ) } ); diff --git a/packages/block-library/src/loginout/index.php b/packages/block-library/src/loginout/index.php index de90ebc12e379a..fca62ff7b0d01b 100644 --- a/packages/block-library/src/loginout/index.php +++ b/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 ) ); diff --git a/packages/block-library/src/loginout/style.scss b/packages/block-library/src/loginout/style.scss index f13bb5ded552dd..6762fb5332420d 100644 --- a/packages/block-library/src/loginout/style.scss +++ b/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; +}