Title: Login-out block
Author: Sagar Gurnani
Published: December 16, 2023
Last modified: June 6, 2024

---

# Login-out block

## In this article

 * [How to add the Login-out block](https://wordpress.org/documentation/article/login-out-block/?output_format=md#how-to-add-the-login-out-block)
    - [From the sidebar](https://wordpress.org/documentation/article/login-out-block/?output_format=md#from-the-sidebar)
    - [By typing back slash (/)](https://wordpress.org/documentation/article/login-out-block/?output_format=md#by-typing-back-slash)
 * [Block toolbar](https://wordpress.org/documentation/article/login-out-block/?output_format=md#block-toolbar)
 * [Block settings](https://wordpress.org/documentation/article/login-out-block/?output_format=md#block-settings)
 * [Changelog](https://wordpress.org/documentation/article/login-out-block/?output_format=md#changelog)

[ Back to top](https://wordpress.org/documentation/article/login-out-block/?output_format=md#wp--skip-link--target)

[Go to the list of Blocks](https://wordpress.org/documentation/article/blocks/)

The **Login-out** block allows you to automatically add a link anywhere on your 
site which lets your site users login and/or logout if they are already logged in.

## 󠀁[How to add the Login-out block](https://wordpress.org/documentation/article/login-out-block/?output_format=md#how-to-add-the-login-out-block)󠁿

There are two ways you can use to add a **Login-out** block once you add a Navigation
block:

 * From the sidebar
 * By typing forward slash (**/**)

### 󠀁[From the sidebar](https://wordpress.org/documentation/article/login-out-block/?output_format=md#from-the-sidebar)󠁿

Click on the (**+**) icon in the sidebar, and either select the _Login-out link_
block from the list of your recently used blocks or click on _Browse all_ to show
all the available blocks and select it from there.

![login-out block by the sidebar](https://wordpress.org/documentation/files/2023/
12/browse-all-1.gif)

### 󠀁[By typing back slash (/)](https://wordpress.org/documentation/article/login-out-block/?output_format=md#by-typing-back-slash)󠁿

Type back slash (/) on your keyboard and then start typing _login_. You should notice
a small popup with suggestions. Select the _Login/out_ _block_ option from the popup
itself.

![login-out block by typing back slash](https://wordpress.org/documentation/files/
2023/12/login-out-block-1.gif)

Refer to this article for [detailed instructions on adding blocks](https://wordpress.org/documentation/article/adding-a-new-block/).

## 󠀁[Block toolbar](https://wordpress.org/documentation/article/login-out-block/?output_format=md#block-toolbar)󠁿

Each block has its own toolbar, which contains unique controls that let you customize
or configure the block. The _Login/out_ block has the following options on its toolbar:

![login-out block toolbar](https://wordpress.org/documentation/files/2023/12/image-
5.png)

**Block moving tools**

![login-out block toolbar highlighting the drag tool](https://wordpress.org/documentation/
files/2023/12/login-out-block-drag-n-drop-option.png)

You can reorder _Login/out block_ on the page. Use the toolbar to _move_ the items
_top and _bottom or _drag _them to the line above or to the line below.

**More options**

The **Options **section opens block settings to update it. You can also _copy, duplicate,
lock_, or _remove your Login/out_.

Details about **More options** can be found in this [support article](https://wordpress.org/documentation/article/more-options/).

## 󠀁[Block settings](https://wordpress.org/documentation/article/login-out-block/?output_format=md#block-settings)󠁿

Each link has its **Block settings** you can access by clicking the **settings **
button on the upper-right corner of the editor or via **Options **in the toolbar.

**Settings**

There are 2 options under settings for the _login/out_ block.

 1. Display login as form.
 2.  * This setting displays the login form instead of just showing the login link.
     * The logout link stays unchanged with this setting.
 3. Redirect to current URL.
 4.  * When this setting is enabled, the user after successful login lands to the previous
       URL he was trying to access before login.

**Typography**

The _Login/out _block provides typography settings to change the font family, appearance,
line height, letter spacing, decoration, letter case, and font size.

For details refer to this support article: [Typography settings overview](https://wordpress.org/documentation/article/typography-settings-overview/)

**Advanced**

The **Advanced** section has the **Additional CSS classes(es)** option. You can 
integrate your custom style into a _Login/out_ block by inserting your CSS Class
name into this field.

## 󠀁[Changelog](https://wordpress.org/documentation/article/login-out-block/?output_format=md#changelog)󠁿

 * Created 2023-12-16

## Was this article helpful? How could it be improved? 󠀁[Cancel reply](https://wordpress.org/documentation/article/login-out-block/?output_format=md#respond)󠁿

[Log in to submit feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fdocumentation%2Farticle%2Flogin-out-block%2F&locale=en_US).
If you need support with something that wasn't covered by this article, please post
your question in the [support forums](https://wordpress.org/support/forums/).

First published

December 16, 2023

Last updated

June 6, 2024