v3.2 anchor menu

[jkcox]

• firstElementId undefined

• modified component in asu-unity-stack - removed sticky functions

• Update save.js to output the exact UDS Bootstrap HTML structure per docs: #uds-anchor-menu, Bootstrap collapse <h2> with chevron <span>, <a class="nav-link"> items with all GA attributes, icon as <span class="fas fa-X">

• Clear frontend.js — Unity Bootstrap Theme JS (already loaded via unityblocks-anchor-menu-view-script) handles all behavior automatically when #uds-anchor-menu is in the DOM

[jkcox]

conflict with theme bootstrap.js, need to refactor

• refactor in render() to use bootstrap html
• setup anchormenu init

[jkcox]

@copilot There is a conflict in our wordpress theme with the anchor menu react component, we need to refactor to use the UDS bootstrap anchor menu.

example code of UDS bootstrap menu:

<div
  id="uds-anchor-menu"
  class="sc-aXZVg jflRVg uds-anchor-menu uds-anchor-menu-expanded-lg mb-4"
>
  <div class="container-xl uds-anchor-menu-wrapper">
    <h2>On This Page:</h2>
    <div
      data-testid="anchor-menu-container"
      id="collapseAnchorMenu"
      class="card card-body collapse"
    >
      <nav data-testid="anchor-menu" class="nav" aria-label="On This Page">
        <button
          type="button"
          data-testid="anchor-item-first-container"
          class="nav-link"
          aria-label="Title Case is Required"
          data-ga="Title Case is Required"
          data-ga-name="onclick"
          data-ga-event="link"
          data-ga-action="click"
          data-ga-type="internal link"
          data-ga-region="main content"
          data-ga-section=""
        >
          <i class="fas fa-link me-1"></i>Title Case is Required</button
        ><button
          type="button"
          data-testid="anchor-item-second-container"
          class="nav-link"
          aria-label="Second Container"
          data-ga="Second Container"
          data-ga-name="onclick"
          data-ga-event="link"
          data-ga-action="click"
          data-ga-type="internal link"
          data-ga-region="main content"
          data-ga-section=""
        >
          Second Container</button
        ><button
          type="button"
          data-testid="anchor-item-third-container"
          class="nav-link"
          aria-label="Third Container"
          data-ga="Third Container"
          data-ga-name="onclick"
          data-ga-event="link"
          data-ga-action="click"
          data-ga-type="internal link"
          data-ga-region="main content"
          data-ga-section=""
        >
          Third Container</button
        ><button
          type="button"
          data-testid="anchor-item-fourth-container"
          class="nav-link"
          aria-label="This is the Last"
          data-ga="This is the Last"
          data-ga-name="onclick"
          data-ga-event="link"
          data-ga-action="click"
          data-ga-type="internal link"
          data-ga-region="main content"
          data-ga-section=""
        >
          <i class="fas fa-link me-1"></i>This is the Last
        </button>
      </nav>
    </div>
  </div>
</div>

Task list:

1. inside render() refactor to use html anchor menu from example above. Youll need to loop over menu items and build them dynamically.
2. do not run the build process, I will do that locally

[Copilot]

@jkcox I've opened a new pull request, #279, to work on those changes. Once the pull request is ready, I'll request review from you.

[jkcox]

this is related to news grid - looks like it was missed when the block manifest feature was added in v3.1.

[wmcconnell]

@jkcox

I saw this and decided to put a News Grid on the page I was using to test the Anchor Menu, since I'm paranoid about them all suddenly failing to work. It worked in the editor, but failed to show up on the front-end. This error was in the console: TypeError: undefined is not an object (evaluating 'globalThis.process.env.NODE_ENV').

However, building a new page with similar elements (anchor menu, news grid, and tablets) worked just fine. So I decided to copy the content verbatim from my bad page to the new one. The News Grid did not work there either.

You know what fixed it? Renaming the anchor I had called 'process' to something else. Only seems to affect the News Grid front-end display. Weird. Likely not related to Anchor Menu updates, as it existed before. Which is to say, don't close the 'process' issue just yet.

[jkcox]

This was updated while I was trying to continue to use the react components. Since the editor functionality isn't critical I think it's ok to keep this since it works as a visual for site editors.

[wmcconnell]

@jkcox Just for clarification, this would mean that it's Bootstrap on the front end, and using the React component in the editor? But...the actual package now and not from any sub-module or fork?

[jkcox]

React in the editor, bootstrap on the front end.

This was built before the KE fork was deleted.

We'll need to update this moving forward in a separate task, no one else will be able to npm run build

I can still "see" the submodule and all the files, so I think locally I would be able to build... but anyone else pulling this down and then doing an init on the submodule, it will fail.

[jkcox]

tested locally on main theme branch, working as expected

[zainabD]

The code updates look good, I tested locally on the main theme branch and I have a couple of things to note:

• The anchor menu does not appear to be sticky. It looks like the sticky class may be missing, and there are no errors in the console to indicate what is causing it. This needs to be addressed before we move forward with merging.
• If the block was already added before this update, it will need to be manually fixed, by clicking attempt fix.
• Once this is merged into main, we will need to manually update all websites that have an anchor menu block.

There is a separate issue with pulling updates through Git Updater that I will look into, but it is unrelated to this PR.

[jkcox]

@wmcconnell I see nothing in the data-ga guide about anchor menus, but it looks like data-section on main ASU websites is "on this page" so I will update that. I think everything else is ok?

[jkcox]

@zainabD Yes all the custom sticky functions are removed, the UDS JS file handles all of that functionality now.

I tested on theme main v2.3.0 and dev v2.3.1 and it works as expected without a sticky class.

Do you mean it's not working as expected, or you were expecting a sticky class but it is working?

[zainabD]

@jkcox it's not working as expected. I will run another test again and update my review.

[wmcconnell]

@jkcox Regarding the data-ga-section value: there should only ever be one anchor menu on a page, so I would think that "On This Page" would be the correct value for all of the links in an anchor menu.

[zainabD]

I tested this again locally on a CORES copy site pulled from https://cores.research.qa.rtd.asu.edu/. I ensured that no HFCM was active that could affect the anchor menu, and the UDS theme was set to the main branch at v2.3.0.

I had to click "Attempt Recovery" to fix the block. After doing so, the anchor menu is not remaining sticky while scrolling.
No error in the console.

[jkcox]

I switched it to develop v2.3.1 and it is working on https://cores.research.qa.rtd.asu.edu/our-impact/

I think it needs the global bootstrap file. It might have been cached on my local.

[zainabD]

Were you able to pull your branch through git updater on https://cores.research.qa.rtd.asu.edu/ ?
The download is failing for me through the git updater:

[wmcconnell]

@zainabD In my local testing, I had to set my theme to the develop branch. Once I did that, with Unity Blocks on John's branch, the anchor menu worked as expected. The updated anchor menu may depend on the Bootstrap file that is globally enqueued on develop but has not been merged into main

[zainabD]

Retested locally on a CORES copy site pulled from https://cores.research.qa.rtd.asu.edu/. Ensured no HFCM was active that could affect the anchor menu, and the UDS theme was set to the develop branch at v2.3.1. The anchor menu is working as expected.

Before merging this update to main, please make sure of the following:

• Update the UDS theme main branch to v2.3.1.
• Make a list of all web pages that contain the anchor menu prior to merging, so that immediately after the update is applied, we can go through each page and click "Attempt Recovery" to ensure the menu renders correctly with no issues.

Approved.

[wmcconnell]

Just wanted to add this before finishing my review, for archival purposes. I stumbled on a weird edge case that, as I mentioned this morning, I don't think has anything to do with our implementation. Long story short:

• Have an anchor menu with multiple items (in my test case it was four items)
• From the top of the page, click on the last item in the anchor menu
• If your last item (in this case a standard heading with some lorem ipsum paragraphs) is close enough to your next-to-last item, you will scroll to the last item in the content area, but the next-to-last item will be highlighted on the menu
• After clicking the link, scrolling up or down any amount of space will highlight the correct item
• I have even seen this in reverse: after jumping to the last item, clicking on the very first item of the anchor menu scrolls back up, but the last item maintains its highlight.

I think it's down to whatever the official Javascript is doing as it determines how far you've scrolled, and maybe differences in how WebSpark handles spacing, etc (thing just seem farther apart on most WebSpark sites I've seen)

Screenshot:

[wmcconnell]

Testing: Local WordPress
Theme: 2.3.1 (tested on Develop for compatibility)

Functional testing showed no issues. In fact, the updated anchor menu improves our current situation with updated scrolling behavior (maybe due to Bootstrap changes) that does not overshoot the anchors; although it's not always consistent.

Multiple anchor menus created during testing; no issues with adding, removing, and editing of items, etc. We are aware of issues with backwards compatibility, so we know we will need to handle that.

I mentioned in the discussion what is hopefully an edge case regarding highlighting of anchor menu items when jumping all the way to the last one from the top of the page. As I mentioned in that discussion, I'm not sure this is even something we can fix, as it probably comes from the Unity Bootstrap JS file. There is a work-around involving increased space between the items, and this issue does not affect the functionality of the links - just the highlighting of the current item.