Add loginout block (#29766)

* Add loginout block * Update packages/block-library/src/loginout/index.php Co-authored-by: Timothy Jacobs <[email protected]> * Add wrapper with the right classes * Add extra class if login form * rename edit function * fix redirects * Remove empty example * no need for the block to be dynamic * change icon * camelCase SVG props * remove unused props * Update packages/block-library/src/loginout/index.js Co-authored-by: Timothy Jacobs <[email protected]> Co-authored-by: Nik Tsekouras <[email protected]>
WordPress · Mar 18, 2021 · 8312663 · 8312663
1 parent 50cdfbe
commit 8312663
Show file tree

Hide file tree

Showing 12 changed files with 185 additions and 0 deletions.
diff --git a/lib/blocks.php b/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',

diff --git a/packages/block-library/src/index.js b/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,

diff --git a/packages/block-library/src/loginout/block.json b/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
+	}
+}
diff --git a/packages/block-library/src/loginout/edit.js b/packages/block-library/src/loginout/edit.js
@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+
+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( {
+					className: 'logged-in',
+				} ) }
+			>
+				<a href="#login-pseudo-link">{ __( 'Log out' ) }</a>
+			</div>
+		</>
+	);
+}
diff --git a/packages/block-library/src/loginout/index.js b/packages/block-library/src/loginout/index.js
@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import { login 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' ) ],
+	edit,
+};
diff --git a/packages/block-library/src/loginout/index.php b/packages/block-library/src/loginout/index.php
@@ -0,0 +1,51 @@
+<?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.
+	$current_url  = ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
+
+	$classes  = is_user_logged_in() ? 'logged-in' : 'logged-out';
+	$contents = wp_loginout(
+		isset( $attributes['redirectToCurrent'] ) && $attributes['redirectToCurrent'] ? $current_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 ) );
+	}
+
+	$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' );
diff --git a/packages/e2e-tests/fixtures/blocks/core__loginout.html b/packages/e2e-tests/fixtures/blocks/core__loginout.html
@@ -0,0 +1 @@
+<!-- wp:loginout /-->
diff --git a/packages/e2e-tests/fixtures/blocks/core__loginout.json b/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": ""
+    }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__loginout.parsed.json b/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"
+        ]
+    }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__loginout.serialized.html b/packages/e2e-tests/fixtures/blocks/core__loginout.serialized.html
@@ -0,0 +1 @@
+<!-- wp:loginout /-->
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
@@ -108,6 +108,7 @@ export { default as linkOff } from './library/link-off';
 export { default as list } from './library/list';
 export { default as listView } from './library/list-view';
 export { default as lock } from './library/lock';
+export { default as login } from './library/login';
 export { default as loop } from './library/loop';
 export { default as mapMarker } from './library/map-marker';
 export { default as media } from './library/media';

diff --git a/packages/icons/src/library/login.js b/packages/icons/src/library/login.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const login = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M11 14.5l1.1 1.1 3-3 .5-.5-.6-.6-3-3-1 1 1.7 1.7H5v1.5h7.7L11 14.5zM16.8 5h-7c-1.1 0-2 .9-2 2v1.5h1.5V7c0-.3.2-.5.5-.5h7c.3 0 .5.2.5.5v10c0 .3-.2.5-.5.5h-7c-.3 0-.5-.2-.5-.5v-1.5H7.8V17c0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2z" />
+	</SVG>
+);
+
+export default login;