Login/out Block: Add button display option

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:** displayAsButton, displayLoginAsForm, redirectToCurrent
 
 ## Media & Text
 

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

@@ -12,6 +12,10 @@
 			"type": "boolean",
 			"default": false
 		},
+		"displayAsButton": {
+			"type": "boolean",
+			"default": false
+		},
 		"redirectToCurrent": {
 			"type": "boolean",
 			"default": true

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

@@ -14,7 +14,8 @@ import { __ } from '@wordpress/i18n';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 export default function LoginOutEdit( { attributes, setAttributes } ) {
-	const { displayLoginAsForm, redirectToCurrent } = attributes;
+	const { displayLoginAsForm, displayAsButton, redirectToCurrent } =
+		attributes;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	return (
@@ -49,6 +50,25 @@ export default function LoginOutEdit( { attributes, setAttributes } ) {
 							}
 						/>
 					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Display as button' ) }
+						isShownByDefault
+						hasValue={ () => displayAsButton }
+						onDeselect={ () =>
+							setAttributes( { displayAsButton: false } )
+						}
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Display as button' ) }
+							checked={ displayAsButton }
+							onChange={ () =>
+								setAttributes( {
+									displayAsButton: ! displayAsButton,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
 					<ToolsPanelItem
 						label={ __( 'Redirect to current URL' ) }
 						isShownByDefault
@@ -72,10 +92,18 @@ export default function LoginOutEdit( { attributes, setAttributes } ) {
 			</InspectorControls>
 			<div
 				{ ...useBlockProps( {
-					className: 'logged-in',
+					className: `logged-in${
+						displayAsButton ? ' wp-block-button' : ''
+					}`,
 				} ) }
 			>
-				<a href="#login-pseudo-link">{ __( 'Log out' ) }</a>
+				{ displayAsButton ? (
+					<div className="wp-block-button__link wp-element-button">
+						<a href="#login-pseudo-link">{ __( 'Log out' ) }</a>
+					</div>
+				) : (
+					<a href="#login-pseudo-link">{ __( 'Log out' ) }</a>
+				) }
 			</div>
 		</>
 	);

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

@@ -25,6 +25,15 @@ function render_block_core_loginout( $attributes ) {
 		false
 	);
 
+	// If display as button is enabled, wrap the link in button classes
+	if ( ! empty( $attributes['displayAsButton'] ) ) {
+		$classes .= ' wp-block-button';
+		$contents = sprintf(
+			'<div class="wp-block-button__link wp-element-button">%s</div>',
+			$contents
+		);
+	}
+
 	// If logged-out and displayLoginAsForm is true, show the login form.
 	if ( ! is_user_logged_in() && ! empty( $attributes['displayLoginAsForm'] ) ) {
 		// Add a class.