Overview

The Navigation Top Bar doesn't integrate nicely with XB yet:

  1. There's a database icon in front of the page title. See #3511951: [upstream] [PP-1] Document icon should show when viewing Experience Builder pages in 11.2's experimental Navigation Top Bar postponed on #3511948: Icon in navigation top bar cannot be customized.
  2. Edit link is displayed in the more actions dropdown. Solved here.

Proposed resolution

  1. Use the page icon in front of the page title when viewing a XB page. To be solved in #3511951: [upstream] [PP-1] Document icon should show when viewing Experience Builder pages in 11.2's experimental Navigation Top Bar
  2. Edit link is displayed as the primary task outside of the more actions dropdown. Solved here.

User interface changes

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

lauriii created an issue. See original summary.

lauriii’s picture

gábor hojtsy’s picture

StatusFileSize
new1.97 MB

1. So the icon seems to be hardwired to the database icon in core? The Home node on xb-demo also has a db icon:

The code is in Drupal\navigation\Plugin\TopBarItem\PageContext:

    $build += [
      [
        '#type' => 'component',
        '#component' => 'navigation:title',
        '#props' => [
          'icon' => 'database',
          'html_tag' => 'span',
          'modifiers' => ['ellipsis', 'xs'],
          'extra_classes' => ['top-bar__title'],
        ],
        '#slots' => [
          'content' => $entity->label(),
        ],
      ],
    ];

2. For the edit button, the Drupal\navigation\Plugin\TopBarItem\PageActions plugin has this code:

  protected function getFeaturedPageActions(array $page_actions): ?array {
    $featured_page_actions = [];
    $current_route_name = $this->routeMatch->getRouteName();
    $canonical_pattern = '/^entity\.(.+?)\.(canonical|latest_version)$/';
    if (preg_match($canonical_pattern, $current_route_name, $matches)) {
      $entity_type = $matches[1];
      $edit_route = "entity.$entity_type.edit_form";
      // For core entities, the local task name matches the route name. If
      // needed, we could iterate over the items and check the actual route.
      if (isset($page_actions['page_actions'][$edit_route]) && $page_actions['page_actions'][$edit_route]['#access']?->isAllowed()) {
        $featured_page_actions[$edit_route] = [
          'page_action' => $page_actions['page_actions'][$edit_route],
          'icon' => 'pencil',
        ];
      }
    }
    return $featured_page_actions;
  }

I was not sure why this does not end up being featured, because the route IS entity.xb_page.edit_form which matches the core pattern and the pattern expected here. The entity.xb_page.canonical is the canonical view route, so it should get to the pattern match. Then I found that the local action name is not the same as the route name, so that is it. Once again a one line fix :D Will submit a MR to XB here for that.

The icon is harder I think since core just hardcoded the db icon.

gábor hojtsy’s picture

Status: Active » Needs review
StatusFileSize
new457.69 KB

This one line fix MR makes the edit button show as expected :)

gábor hojtsy’s picture

For the DB icon, I'm trying to figure out how to alter the SDC component specified in the top bar context plugin code. Cited in #3 above. I did not find generic alter/preprocess hooks for plugins like this, neither components. Eg. https://www.drupal.org/docs/develop/theming-drupal/using-single-director... documents this use of SDCs but provides no guidance on altering.

I tried some tips from chatgpt which turned out to be hallucinations :) Also searched the API docs and general google but did not turn up much. That said, I expect this is something simple but I can't see it :D

wim leers’s picture

Title: Integrate with the Navigation Top Bar » Integrate with Drupal core's 11.2's experimental Navigation Top Bar
Priority: Major » Minor
Status: Needs review » Needs work
Issue tags: +Needs upstream bugfix

I don't understand why #5's one-line fix was not done as part of #3511412: Add a local task to edit XB Page content entities. Or at minimum, if that had been tagged as a blocker for this, this would've been caught before that landed. 😅

Then I found that the local action name is not the same as the route name, so that is it.

🤪 — this seems like a straight up bug in PageActions::getFeaturedPageActions(), then. Local task (plugin) IDs have to be unique, but have no other naming requirements. That's why \Drupal\Core\Menu\LocalTaskManager::getLocalTasksForRoute() only look at the route name, not the (local task plugin) ID.

🐛 IOW: this is a bug in ::getFeaturedPageActions. It doesn't exist in 11.1.x which we're developing XB against; it only exists in the 11.x branch. It was added in #3484575: Move the Edit button outside the more actions drop down.
XB could fix it here, but … then the same problem will occur for other contrib/custom (content) entity types!

Tagging Needs upstream bugfix, not to block this MR on it being fixed, but to ensure a follow-up in the navigation.module issue queue component is created before this lands. 🙏

wim leers’s picture

lauriii’s picture

Where should we fix the bug that the button is rendered with black text? It seems to be caused by Gin.

gábor hojtsy’s picture

Status: Needs work » Needs review
Issue tags: -Needs upstream bugfix
StatusFileSize
new228.7 KB
new231.97 KB

1. Re black edit button @lauriii:

It is perfectly fine if we don't install the gin toolbar module, which is a sensible choice if we use the core top bar :)

Gin toolbar enabled (but not used):

Gin toolbar not even enabled (note not only button white text but button placement is nicer):

Opened https://github.com/phenaproxima/xb-demo/issues/24 to fix that in the demo.

2. Re navigation followup issue @wimleers:

Opened #3511612: Local task name expectation in getFeaturedPageActions is fragile for determining Top Bar featured actions.

3. Re the icon:

After various Slack discussions, navigation module does not have a way to customize that and SDC's don't have altering or preprocess functionality to change it. I'm not sure we should hold up the Edit button fix (which is pretty fundamental, it exposes the first visible way to enter XB ever). So should we rescope this issue or open yet another one under this? :)

wim leers’s picture

The icon is harder I think since core just hardcoded the db icon.

That's hardcoded somewhere in core's experimental navigation.module, then? If so, AFAICT that's another thing that can only happen upstream? 😅

That'd mean two follow-ups:

  1. first one in core to add the missing feature
  2. second one in XB, blocked on the first, to then customize it when it becomes possible
gábor hojtsy’s picture

I think the one line MR here can happen without waiting on upstream and its a quite crucial piece of UI to expose ASAP :) Should I open a separate issue and postpone this on that or should we repurpose this issue?

The icon problem is indeed larger and will take more time.

wim leers’s picture

I think the one line MR here can happen without waiting on upstream and its a quite crucial piece of UI to expose ASAP :)

+1!

Should I open a separate issue and postpone this on that or should we repurpose this issue?

Neither: two new issues, as described in XB, and as soon as those exist, I'll land this MR. I'm insisting on those issues to be created first, just to make sure we don't forget to follow through 😊

gábor hojtsy’s picture

gábor hojtsy’s picture

Title: Integrate with Drupal core's 11.2's experimental Navigation Top Bar » Featured Edit task is not shown for Experience Builder pages in core navigation top bar
Issue summary: View changes
Issue tags: -Needs upstream feature, -Needs followup

Opened #3511951: [upstream] [PP-1] Document icon should show when viewing Experience Builder pages in 11.2's experimental Navigation Top Bar for lack of customization of the icon in XB.

Retitled and updated IS for the narrower scope here, so this can be merged then.

wim leers’s picture

Title: Featured Edit task is not shown for Experience Builder pages in core navigation top bar » Featured Edit task is not shown for Experience Builder pages in core11.2's experimental Navigation Top Bar
Status: Needs review » Reviewed & tested by the community

Thanks!

I want the commit message to stress that this is XB supporting an experimental core feature.

wim leers’s picture

Status: Reviewed & tested by the community » Fixed
wim leers’s picture

Title: Featured Edit task is not shown for Experience Builder pages in core11.2's experimental Navigation Top Bar » Featured Edit task is not shown for Experience Builder pages in 11.2's experimental Navigation Top Bar

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.