Handlebars template adapted from collections, but markup more like WP because it has more a11y.

Icons included here from sprite-sheet, but they could be inlined.

TODO:

  • change WP markup
  • get ellipsis rules from collections
<div class="c-pagination">
    <nav class="c-pagination__links" aria-label="Pagination">
        <a class="c-pagination__page c-pagination__page--prev" href=""><span class="u-icon"><svg>
                    <use xlink:href="../../assets/icons/sprite.symbol.svg#arrow-left" />
                </svg></span>Previous</a>
        <a class="c-pagination__page" href="#1">1</a>
        <span aria-current="page" class="c-pagination__page"><span class="u-visually-hidden">You're on page</span>
            2</span>
        <a class="c-pagination__page" href="#3">3</a>
        <a class="c-pagination__page" href="#4">4</a>
        <a class="c-pagination__page--next c-pagination__page" href="">Next<span class="u-icon"><svg>
                    <use xlink:href="../../assets/icons/sprite.symbol.svg#arrow-right" />
                </svg></span></a>
    </nav>
</div>
<div class="c-pagination">
  <nav class="c-pagination__links" aria-label="Pagination">
    {{#if pagination.isFirst}}
    {{else}}
    <a class="c-pagination__page c-pagination__page--prev" href="{{pagination.links.prev}}"><span class="u-icon"><svg>
          <use xlink:href="{{path '/assets/icons/sprite.symbol.svg#arrow-left'}}" /></svg></span>Previous</a>
    {{/if}}
    {{#each pagination.links.pages}}
    {{#if this}}
    {{#if this.isCurrent}}
    <span aria-current="page" class="c-pagination__page"><span class="u-visually-hidden">You're on page</span>
      {{this.pageNumber}}</span>
    {{else}}
    <a class="c-pagination__page" href="#{{this.pageNumber}}">{{this.pageNumber}}</a>
    {{/if}}
    {{else}}
    <span class="c-pagination__page c-pagination__ellipsis"></span>
    {{/if}}
    {{/each}}
    {{#if pagination.isLast}}
    {{else}}
    <a class="c-pagination__page--next c-pagination__page" href="{{pagination.links.next}}">Next<span
        class="u-icon"><svg>
          <use xlink:href="{{path '/assets/icons/sprite.symbol.svg#arrow-right'}}" /></svg></span></a>
    {{/if}}
  </nav>
</div>