Add loginout block

lib/blocks.php

@@ -56,6 +56,7 @@ function gutenberg_reregister_core_block_types() {
 					'cover.php'                     => 'core/cover',
 					'latest-comments.php'           => 'core/latest-comments',
 					'latest-posts.php'              => 'core/latest-posts',
+					'loginout.php'                  => 'core/loginout',
 					'navigation.php'                => 'core/navigation',
 					'navigation-link.php'           => 'core/navigation-link',
 					'rss.php'                       => 'core/rss',

packages/block-library/src/index.js

@@ -38,6 +38,7 @@ import * as navigation from './navigation';
 import * as navigationLink from './navigation-link';
 import * as latestComments from './latest-comments';
 import * as latestPosts from './latest-posts';
+import * as loginOut from './loginout';
 import * as list from './list';
 import * as missing from './missing';
 import * as more from './more';
@@ -227,6 +228,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 								queryPaginationNext,
 								queryPaginationNumbers,
 								queryPaginationPrevious,
+								loginOut,
 								postTitle,
 								postContent,
 								postAuthor,

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

@@ -0,0 +1,19 @@
+{
+	"apiVersion": 2,
+	"name": "core/loginout",
+	"category": "design",
+	"attributes": {
+		"displayLoginAsForm": {
+			"type": "boolean",
+			"default": false
+		},
+		"redirectToCurrent": {
+			"type": "boolean",
+			"default": true
+		}
+	},
+	"supports": {
+		"className": true,
+		"fontSize": false
+	}
+}

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

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody, ToggleControl, Disabled } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import ServerSideRender from '@wordpress/server-side-render';
+
+export default function LoginOutEdit( { attributes, setAttributes } ) {
+	const { displayLoginAsForm, redirectToCurrent } = attributes;
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Login/out settings' ) }>
+					<ToggleControl
+						label={ __( 'Display login as form' ) }
+						checked={ displayLoginAsForm }
+						onChange={ () =>
+							setAttributes( {
+								displayLoginAsForm: ! displayLoginAsForm,
+							} )
+						}
+					/>
+					<ToggleControl
+						label={ __( 'Redirect to current URL' ) }
+						checked={ redirectToCurrent }
+						onChange={ () =>
+							setAttributes( {
+								redirectToCurrent: ! redirectToCurrent,
+							} )
+						}
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<div { ...useBlockProps() }>
+				<Disabled>
+					<ServerSideRender
+						block="core/loginout"
+						attributes={ attributes }
+					/>
+				</Disabled>
+			</div>
+		</>
+	);
+}

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

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import { postList as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import metadata from './block.json';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	title: _x( 'Login/out', 'block title' ),
+	description: __( 'Show login & logout links.' ),
+	icon,
+	keywords: [ __( 'login logout form' ) ],
+	example: {},
+	edit,
+};

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

@@ -0,0 +1,55 @@
+<?php
+/**
+ * Server-side rendering of the `core/loginout` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/loginout` block on server.
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string Returns the login-out link or form.
+ */
+function render_block_core_loginout( $attributes ) {
+
+	// Build the redirect URL.
+	$redirect_url = isset( $attributes['redirectToCurrent'] ) && $attributes['redirectToCurrent']
+		? get_permalink( get_the_ID() )
+		: '';
+
+	$classes  = is_user_logged_in() ? 'logged-in' : 'logged-out';
+	$contents = wp_loginout( $redirect_url, false );
+
+	// If logged-out and displayLoginAsForm is true, show the login form.
+	if ( ! is_user_logged_in() && ! empty( $attributes['displayLoginAsForm'] ) ) {
+		// Add a class.
+		$classes .= ' has-login-form';
+
+		// Get the form.
+		$contents = wp_login_form(
+			array(
+				'echo'     => false,
+				'redirect' => $redirect_url,
+			)
+		);
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+
+	return '<div ' . $wrapper_attributes . '>' . $contents . '</div>';
+}
+
+/**
+ * Registers the `core/latest-posts` block on server.
+ */
+function register_block_core_loginout() {
+	register_block_type_from_metadata(
+		__DIR__ . '/loginout',
+		array(
+			'render_callback' => 'render_block_core_loginout',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_loginout' );

packages/e2e-tests/fixtures/blocks/core__loginout.html

@@ -0,0 +1 @@
+<!-- wp:loginout /-->

packages/e2e-tests/fixtures/blocks/core__loginout.json

@@ -0,0 +1,13 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/loginout",
+        "isValid": true,
+        "attributes": {
+            "displayLoginAsForm": false,
+            "redirectToCurrent": true
+        },
+        "innerBlocks": [],
+        "originalContent": ""
+    }
+]

packages/e2e-tests/fixtures/blocks/core__loginout.parsed.json

@@ -0,0 +1,18 @@
+[
+    {
+        "blockName": "core/loginout",
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "",
+        "innerContent": []
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]

packages/e2e-tests/fixtures/blocks/core__loginout.serialized.html

@@ -0,0 +1 @@
+<!-- wp:loginout /-->