{"id":16359310,"date":"2023-12-16T16:55:30","date_gmt":"2023-12-16T16:55:30","guid":{"rendered":"https:\/\/wordpress.org\/documentation\/?post_type=helphub_article&#038;p=16359310"},"modified":"2024-06-06T18:20:53","modified_gmt":"2024-06-06T18:20:53","slug":"login-out-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/login-out-block\/","title":{"rendered":"Login-out block"},"content":{"rendered":"\n<p class=\"has-text-align-right has-small-font-size\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/\">Go to the list of Blocks<\/a><\/p>\n\n\n\n<p>The&nbsp;<strong>Login-out<\/strong>&nbsp;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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to add the Login-out block<\/h2>\n\n\n\n<p>There are two ways you can use to add a&nbsp;<strong><strong><strong>Login-out<\/strong><\/strong><\/strong>&nbsp;block once you add a Navigation block:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>From the sidebar<\/li>\n\n\n\n<li>By typing forward slash (<strong>\/<\/strong>) <\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">From the sidebar<\/h3>\n\n\n\n<p>Click on the (<strong>+<\/strong>) icon in the sidebar, and either select the&nbsp;<em>Login-out link<\/em>&nbsp;block from the list of your recently used blocks or click on&nbsp;<em>Browse all<\/em>&nbsp;to show all the available blocks and select it from there.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"742\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/12\/browse-all-1.gif\" alt=\"login-out block by the sidebar\" class=\"wp-image-16359323\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading has-heading-3-font-size\">By typing back slash (\/)<\/h3>\n\n\n\n<p>Type back slash (\/) on your keyboard and then start typing <em>login<\/em>. You should notice a small popup with suggestions. Select the <em>Login\/out<\/em> <em>block<\/em> option from the popup itself.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"725\" height=\"257\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/12\/login-out-block-1.gif\" alt=\"login-out block by typing back slash\" class=\"wp-image-16359317\" \/><\/figure>\n\n\n\n<p class=\"has-background\" style=\"background-color:#e5f5fa\">Refer to this article for&nbsp;<a href=\"https:\/\/wordpress.org\/documentation\/article\/adding-a-new-block\/\">detailed instructions on adding blocks<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Block toolbar<\/h2>\n\n\n\n<p>Each block has its own toolbar, which contains unique controls that let you customize or configure the block. The&nbsp;<em>Login\/out<\/em>&nbsp;block has the following options on its toolbar:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"167\" height=\"58\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/12\/image-5.png\" alt=\"login-out block toolbar\" class=\"wp-image-16359328\" \/><\/figure>\n\n\n\n<p><strong>Block moving tools<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"167\" height=\"58\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/12\/login-out-block-drag-n-drop-option.png\" alt=\"login-out block toolbar highlighting the drag tool\" class=\"wp-image-16359329\" \/><\/figure>\n\n\n\n<p>You can reorder&nbsp;<em>Login\/out block<\/em>&nbsp;on the page. Use the toolbar to&nbsp;<em>move<\/em>&nbsp;the items&nbsp;<em>top and <\/em>bottom or&nbsp;<em>drag&nbsp;<\/em>them to the line above or to the line below.<\/p>\n\n\n\n<p><strong>More options<\/strong><\/p>\n\n\n\n<p>The&nbsp;<strong>Options&nbsp;<\/strong>section opens block settings to update it. You can also&nbsp;<em>copy, duplicate, lock<\/em>, or&nbsp;<em>remove your Login\/out<\/em>. <\/p>\n\n\n\n<p>Details about&nbsp;<strong>More options<\/strong>&nbsp;can be found in this&nbsp;<a href=\"https:\/\/wordpress.org\/documentation\/article\/more-options\/\">support article<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Block settings<\/h2>\n\n\n\n<p>Each link has its&nbsp;<strong>Block settings<\/strong>&nbsp;you can access by clicking the&nbsp;<strong>settings&nbsp;<\/strong>button on the upper-right corner of the editor or via&nbsp;<strong>Options&nbsp;<\/strong>in the toolbar.<\/p>\n\n\n\n<p><strong>Settings<\/strong><\/p>\n\n\n\n<p>There are 2 options under settings for the <em>login\/out<\/em> block.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Display login as form.\n<ul class=\"wp-block-list\">\n<li>This setting displays the login form instead of just showing the login link.<\/li>\n\n\n\n<li>The logout link stays unchanged with this setting.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Redirect to current URL.\n<ul class=\"wp-block-list\">\n<li>When this setting is enabled, the user after successful login lands to the previous URL he was trying to access before login.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><strong>Typography<\/strong><\/p>\n\n\n\n<p>The&nbsp;<em>Login\/out&nbsp;<\/em>block provides typography settings to change the font family, appearance, line height, letter spacing, decoration, letter case, and font size.<\/p>\n\n\n\n<p>For details refer to this support article:&nbsp;<a href=\"https:\/\/wordpress.org\/documentation\/article\/typography-settings-overview\/\">Typography settings overview<\/a><\/p>\n\n\n\n<p><strong>Advanced<\/strong><\/p>\n\n\n\n<p>The&nbsp;<strong>Advanced<\/strong>&nbsp;section has the&nbsp;<strong>Additional CSS classes(es)<\/strong>&nbsp;option. You can integrate your custom style into a&nbsp;<em><em>Login\/out<\/em><\/em>&nbsp;block by inserting your CSS Class name into this field.<\/p>\n\n\n\n<div id=\"changelog\" class=\"wp-block-group changelog has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"background-color:#dce5ec\">\n<h2 class=\"wp-block-heading has-medium-font-size\">Changelog<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Created 2023-12-16<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Go to the list of Blocks The&nbsp;Login-out&nbsp;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 There are two ways you can use to add a&nbsp;Login-out&nbsp;block once you add a Navigation block: From [&hellip;]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[80,91],"class_list":["post-16359310","helphub_article","type-helphub_article","status-publish","hentry","category-customization","category-theme-blocks"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16359310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16359310"}],"version-history":[{"count":20,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16359310\/revisions"}],"predecessor-version":[{"id":16360337,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16359310\/revisions\/16360337"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16359310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16359310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}