Directive to do client-side navigation of the inner contents of a single block

[luisherranz]

We need to start thinking about a directive that can be added to a single block and somehow limits the client-side navigation to its inner content. One example could be the pagination of the Query block.

The directive would probably need to contain some sort of persistent unique id to match the element across pages.

It could work in conjunction with other navigation directives, like data-wp-navigation-link.

<div class="wp-block-query" data-wp-navigation-id="some unique id...">
  <!-- Query block content... -->
  <ul class="wp-block-query-pagination">
    <li>
      <a data-wp-navigation-link='{ "scroll" false, "prefetch": "on-hover" }'>Next page</a>
    </li>
  </ul>
</div>

<div class="wp-block-query" data-wp-navigation-id="other unique id...">
  <!-- Query block content... -->
  <ul class="wp-block-query-pagination">
    <li>
      <a data-wp-navigation-link='{ "scroll" false, "prefetch": "on-hover" }'>Next page</a>
    </li>
  </ul>
</div>

[luisherranz]

Released as data-wp-router-region in WP 6.5.

Closing this as completed 🙂