Behavior for Block Element Tokens (e.g. [current-user:picture]) under Admin Role [#2731579]

I've tried both the Dev and Beta7 with the same behavior. The examples below are using Beta7.

On a fresh install, the token [current-user:picture] renders:

<div class="user-picture">
<a href="https://drf4l.ply.st/user/1" title=""> </a>
<a href="/user/1" title="View user profile."><img typeof="foaf:Image" src="https://drf4l.ply.st/sites/default/files/styles/thumbnail/public/pictures/picture-1-1464025640.jpg?itok=8tYJ8XAv" alt="admin's picture" title="admin's picture"></a>
</div>

Because a single menu item must have a URL (anchor), this module leads to some unexpected behavior when attempting to put a block element (in this case, a div) inside the anchor:

Fresh install, only [current-user:picture] on menu item:

<ul id="main-menu-links" class="links clearfix">
  <li class="menu-219 first active"><a href="/" class="active">Home</a></li>
  <li class="menu-279 last"><a href="https://drf4l.ply.st/user/1" title=""> </a>
    <div class="user-picture"><a href="https://drf4l.ply.st/user/1" title=""> </a><a href="/user/1" title="View user profile."><img typeof="foaf:Image" src="https://drf4l.ply.st/sites/default/files/styles/thumbnail/public/pictures/picture-1-1464025640.jpg?itok=8tYJ8XAv" alt="admin's picture" title="admin's picture"></a> </div>
  </li>
</ul>

Expected: It starts the list item
Unexpected: It creates a blank anchor tag on the menu link. (Side note: if using Menu Attributes module, the Menu Link is this blank anchor).

-----------------

To take it a step further, here's what happens if I wrap this token in my own div; in this example, div.picwrapper:

Fresh install, menu item: <div class="picwrapper">[current-user:picture]</div>

<ul id="main-menu-links" class="links clearfix">
  <li class="menu-219 first active"><a href="/" class="active">Home</a></li>
  <li class="menu-279 last"><a href="https://drf4l.ply.st/user/1" title=""></a>
    <div class="picwrapper"><a href="https://drf4l.ply.st/user/1" title=""> </a>
      <div class="user-picture"><a href="https://drf4l.ply.st/user/1" title=""> </a><a href="/user/1" title="View user profile."><img typeof="foaf:Image" src="https://drf4l.ply.st/sites/default/files/styles/thumbnail/public/pictures/picture-1-1464025640.jpg?itok=8tYJ8XAv" alt="admin's picture" title="admin's picture"></a> </div>
    </div>
  </li>
</ul>

Expected: It starts the list item
Unexpected: It creates a blank anchor tag on the menu link.
Expected: It creates div.picwrapper
Unexpected: It creates a blank anchor tag on the menu link.

Minor issue: I believe blank anchors of the menu link are being created after every instance of a block-level element.

-----------------

Larger issue: the system-generated anchor in [current-user:picture] ends the list link.

Example: let's go even further and put some text after that token (this can be inside or outside of div.wrapper):

Fresh install, menu item: <div class="picwrapper">[current-user:picture]</div>Test Text Outside Wrapper

<ul id="main-menu-links" class="links clearfix">
  <li class="menu-219 first active"><a href="/" class="active">Home</a></li>
  <li class="menu-279 last"><a href="https://drf4l.ply.st/user/1" title=""></a>
    <div class="picwrapper"><a href="https://drf4l.ply.st/user/1" title=""> </a>
      <div class="user-picture"><a href="https://drf4l.ply.st/user/1" title=""> </a><a href="/user/1" title="View user profile."><img typeof="foaf:Image" src="https://drf4l.ply.st/sites/default/files/styles/thumbnail/public/pictures/picture-1-1464025640.jpg?itok=8tYJ8XAv" alt="admin's picture" title="admin's picture"></a> </div>
    </div>
    Test Text Outside Wrapper</li>
</ul>

You'll see that text doesn't receive a clickable anchor, even though it's in the Menu Link Title.

However, if we put this text "before" the [current-user:picture] token, it renders it as clickable:

Menu item: Test Text Before Picture Token<div class="picwrapper">[current-user:picture]</div>

<ul id="main-menu-links" class="links clearfix">
  <li class="menu-219 first active"><a href="/" class="active">Home</a></li>
  <li class="menu-279 last"><a href="https://drf4l.ply.st/user/1" title="">Test Text Before Picture Token</a>
    <div class="picwrapper"><a href="https://drf4l.ply.st/user/1" title=""> </a>
      <div class="user-picture"><a href="https://drf4l.ply.st/user/1" title=""> </a><a href="/user/1" title="View user profile."><img typeof="foaf:Image" src="https://drf4l.ply.st/sites/default/files/styles/thumbnail/public/pictures/picture-1-1464025640.jpg?itok=8tYJ8XAv" alt="admin's picture" title="admin's picture"></a> </div>
    </div>
  </li>
</ul>

This isn't good behavior, especially when HTML5 supports anchor (inline element) wrapping of most block-elements. Something is still safeguarding anchors from wrapping block-level elements.

So what needs to be fixed?

First off, eliminate the blank anchors rendered after every block-level element-- that's simply a minor bug. Next and most importantly, we probably don't want a single anchor to wrap block-level tokens (like [current-user:picture]) the way they are rendered. If that were the case, anchors would be nested inside anchors. If, however, there were a way to trim out existing anchors inside of the token, they could then be used by Menu Token in menus.

Side note: a token exists for [current-user:picture:url], but for me that led to an error-- not sure if this warrants a separate issue report:

Notice: Undefined index: user in uc_addresses_tokens() (line 137 of /sites/all/modules/uc_addresses/uc_addresses.tokens.inc).

Comments

Comment #1

23 May 2016 at 19:49

ownage created an issue. See original summary.

Comment #2

DevElCuy CreditAttribution: DevElCuy at Dilygent commented 24 May 2016 at 22:49

Excellent report! I owe you a beer!

Comment #3

ownage CreditAttribution: ownage commented 24 May 2016 at 23:05

Thanks. Beer is good. I'll try to get you a production demo of my use of this token within a couple weeks. For now, I've put my other link text "before" the token to keep it clickable as stated above (floating the inline span accordingly):

<span class="usertext tworow">Hey, [current-user:name]!<br /><i>Click to View / Edit Profile</i></span><div class="picwrapper">[current-user:picture]</div>

Comment #4

ownage CreditAttribution: ownage commented 25 May 2016 at 06:04

Update: turns out this issue is only occurring for the admin user!

Here are the outputs of the menu link stated in #3 for both an admin user & authenticated user (cleaned and nested for easy readability):

As rendered for admin user (WTF):

<ul class="menu">
  <li>
    <a href="link-to-profile">
      <span class="usertext tworow">Hey, Admin User!<br><i>Click to View / Edit Profile</i></span>
    </a>
    <div class="picwrapper">
      <a href="link-to-profile"> </a>
      <div class="user-picture">
        <a href="link-to-profile"> </a>
        <a href="link-to-profile" title="View user profile.">
          <img src="link-to-profile-image">
        </a>
      </div>
    </div>
  </li>
</ul>

As rendered for authenticated user (PERFECT):

<ul class="menu">
  <li>
    <a href="link-to-profile">
      <span class="usertext tworow">Hey, Authenticated User!<br><i>Click to View / Edit Profile</i></span>
      <div class="picwrapper">
        <div class="user-picture">
          <img src="link-to-profile-image">
        </div>
      </div>
    </a>
  </li>
</ul>

Hope that helps shed some more light on what the issue is.