WP admin bar issue

[saimonkat]

When pages are changing with smoothState, the WordPress admin bar does not update. So links to e.g. "Edit Page" don't updates/creates/removes as expected.

There always were only 2 solutions: 1) Disable wpadminbar 2) Inform WP users to refresh pages every time but no one of them looks good.

[saimonkat]

My colleague and I found a way to solve this so you can update at least Readme file according this. Just created a intuituve solution by updating this link according data sent from backend.

Here we send our link data from php:

if (current_user_can('edit_posts')) {
  $js_params = [
    'edit_link' => [
      'is_exist' => false,
    ]
  ];
  if (!is_archive()) {
    $postTypeLabel = get_post_type_object(get_post_type(get_the_ID()))->labels->singular_name;
    $js_params['edit_link']['is_exist'] = true;
    $js_params['edit_link']['href'] = get_edit_post_link(get_the_ID(), '');
    $js_params['edit_link']['title'] = 'Edit ' . $postTypeLabel;
  }

  echo '<script type="text/javascript">window.post_data = ', json_encode($js_params), ';</script>';
}

And here we update/create/remove link according window.post_data on JS:

function wpEditLinkRebuild() {
    let $wpEditLink = $('#wp-admin-bar-edit a');
    let postData = window.post_data;
    console.log(postData);

    if (postData) {
        let linkExist = postData.edit_link['is_exist'];
        if (linkExist) {
            // Button exists
            if (!$wpEditLink.length) {
                let $wpAdminBarMenu = $('#wp-admin-bar-root-default');
                $wpAdminBarMenu.append(
                '<li id="wp-admin-bar-edit">' +
                    '<a class="ab-item wp-link" href=""></a>' +
                '</li>'
                );
            }
            $wpEditLink = $('#wp-admin-bar-edit a');
            let newLinkName = postData.edit_link['title'];
            let newLinkHref = postData.edit_link['href']; 
            newLinkName && $wpEditLink.attr('href', newLinkHref);
            newLinkHref && $wpEditLink.text(newLinkName);
        } else if ($wpEditLink.length){
            // Button does not exist
            $wpEditLink.remove();
        }
    }
}

Just call this function from your smoothState onAfter function:

let $page = $('#main'),
        options = {
            anchors: 'a',
            blacklist: ".wp-link, .post-edit-link,  a[href*='.jpg'], a[href*='.png'], a[href*='.jpeg'], a[href*='.pdf']",
            onStart: {
                duration: 500,
                render: function ($container) {
                    $body.addClass('page-changing');
                    smoothState.restartCSSAnimations();
                    closeMenu();
                }
            },
            onReady: {
                duration: 0,
                render: function ($container, $newContent) {
                    $container.html($newContent);
                }
            },
            onAfter: function() {
                wpEditLinkRebuild();
            }
        },
        smoothState = $page.smoothState(options).data('smoothState');