Login/out block in Navigation menu

Hi @kahless – Because a login/logout button has specific functionality, it has its own block, called Login/Out. Here’s what the settings look like:

It’s not something you’d add to the menu block itself, but a separate block that you can add where you want it. For example, you can put it after or before your Navigation block, depending where you’d like it to appear.

The “transform” option is just a list of common blocks that someone might want to turn another block into. Since the Login/out block is fairly new that may be why it’s not part of the transform list, or there may be another reason I’m not aware of. In any case, it’s OK, because you don’t need to transform another element into the Login/out block in order to use it, you can just add the Login/out block fresh by clicking “Insert after” or “Insert before” on another element, or click the + icon and move it to your desired location.

Let me know how it goes!

@zoonini Thanks.

I think I get it now. Just a paradigm shift. However, it does present a challenge of creating what looks like a consistent menu in the header. My attempt doesn’t seem to have worked as you can see on the demo site I linked. The Login/out block is at the end of the navigation but seems to be hidden. The header is built with a Cover block (the top bit) and a Row block. The row has Site Title block and a Columns block (two columns). The first column has a Navigation block and the second has the Login/out block. All text has been set to black in all the setting spots I can find and the Login/out text still seems not to be displayed. It also is challenging to try and get the spacing to work so the navigation and login don’t wrap. Here is the code

<!-- wp:group {"style":{"color":{"background":"#f2f2f2"}},"textColor":"black","className":"header-bar","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group header-bar has-black-color has-text-color has-background" style="background-color:#f2f2f2"><!-- wp:site-title {"style":{"elements":{"link":{"color":{"text":"var:preset|color|black"}}},"typography":{"fontStyle":"normal","fontWeight":"700","fontSize":"26px"}},"textColor":"black"} /-->

<!-- wp:columns {"style":{"spacing":{"blockGap":"10px"}},"textColor":"foreground"} -->
<div class="wp-block-columns has-foreground-color has-text-color"><!-- wp:column {"width":"80%","textColor":"foreground","layout":{"inherit":true}} -->
<div class="wp-block-column has-foreground-color has-text-color" style="flex-basis:80%"><!-- wp:navigation {"ref":7636,"textColor":"foreground","className":"main-nav\u002d\u002ddesktop","layout":{"type":"flex","justifyContent":"left"},"style":{"typography":{"fontSize":"16px"},"spacing":{"blockGap":"10px"}}} /--></div>
<!-- /wp:column -->

<!-- wp:column {"width":"20%","style":{"spacing":{"blockGap":"0px"}},"textColor":"foreground","layout":{"inherit":true}} -->
<div class="wp-block-column has-foreground-color has-text-color" style="flex-basis:20%"><!-- wp:loginout /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Switched from Columns block to a Row block and that solves the layout issue but the Login/out text still does not display. *scratches head*

<!-- wp:group {"style":{"color":{"background":"#f2f2f2"}},"textColor":"black","className":"header-bar","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group header-bar has-black-color has-text-color has-background" style="background-color:#f2f2f2"><!-- wp:site-title {"style":{"elements":{"link":{"color":{"text":"var:preset|color|black"}}},"typography":{"fontStyle":"normal","fontWeight":"700","fontSize":"26px"}},"textColor":"black"} /-->

<!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"textColor":"foreground","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group has-foreground-color has-text-color"><!-- wp:navigation {"ref":7636,"textColor":"foreground","className":"main-nav\u002d\u002ddesktop","layout":{"type":"flex","justifyContent":"left"},"style":{"typography":{"fontSize":"16px"},"spacing":{"blockGap":"10px"}}} /-->

<!-- wp:loginout /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Heya – it’s actually there but the link colour is set to use the site’s background colour at the moment, making it invisible. ??

When I undo that in the browser inspector, this is what it looks like:

I’m not immediately sure why it’s picking up the wrong colour, and I haven’t been able to replicate this my test site, but what I can do is provide you with some custom CSS to make the Login/out links match your menu better.

/* Login/out block */
.wp-block-loginout a {
  color: inherit;
  font-size: 16px;
  text-decoration: none;
}
.wp-block-loginout a:hover {
  text-decoration: underline;
}

Let me know what you think!

Thanks. Yep, I noticed the same thing. It shouldn’t be doing that with all the text settings for all the blocks set to black.

Alternatively, could you just add a link to the navigation menu with the title ‘Login’ and the link pointing to the login page?

That template part was inside the Header (Small, Dark) template part which had the link color set to the same as background. Sheesh.

@tracyrosen Thought about that but it wouldn’t display Log out if you were logged in. Not that anyone logs out of any website on purpose.

• This reply was modified 2 years, 1 month ago by Jon Breitenbucher.