Block: Tabs

[brettsmason]

An accessible tabs block would be a good block to include.
We should use Alpine for this. The example markup should be:

<!-- Tabs -->
<div
    x-data="{
        selectedId: null,
        init() {
            // Set the first available tab on the page on page load.
            this.$nextTick(() => this.select(this.$id('tab', 1)))
        },
        select(id) {
            this.selectedId = id
        },
        isSelected(id) {
            return this.selectedId === id
        },
        whichChild(el, parent) {
            return Array.from(parent.children).indexOf(el) + 1
        }
    }"
    x-id="['tab']"
    class="wp-block-pulsar-tabs"
>
    <!-- Tab List -->
    <ul
        x-ref="tablist"
        @keydown.right.prevent.stop="$focus.wrap().next()"
        @keydown.home.prevent.stop="$focus.first()"
        @keydown.page-up.prevent.stop="$focus.first()"
        @keydown.left.prevent.stop="$focus.wrap().prev()"
        @keydown.end.prevent.stop="$focus.last()"
        @keydown.page-down.prevent.stop="$focus.last()"
        role="tablist"
        class="wp-block-pulsar-tabs__tablist"
    >
        <!-- Tab -->
        <li>
            <button
                :id="$id('tab', whichChild($el.parentElement, $refs.tablist))"
                @click="select($el.id)"
                @mousedown.prevent
                @focus="select($el.id)"
                type="button"
                :tabindex="isSelected($el.id) ? 0 : -1"
                :aria-selected="isSelected($el.id)"
                :class="isSelected($el.id) ? 'is-active' : ''"
                class="wp-block-pulsar-tabs__button"
                role="tab"
            >Tab 1</button>
        </li>
    </ul>

    <!-- Panels -->
    <div role="tabpanels" class="wp-block-pulsar-tabs__panels">
        <!-- Panel -->
        <section
            x-show="isSelected($id('tab', whichChild($el, $el.parentElement)))"
            :aria-labelledby="$id('tab', whichChild($el, $el.parentElement))"
            role="tabpanel"
            class="wp-block-pulsar-tabs__tabpanel"
        >
            Inner blocks here
        </section>
    </div>
</div>

[brettsmason]

After discussing internally, we have decided to go for a vanilla JS implementation for this.

We should follow this example.

Required block attributes:

vertical - false by default, should toggle if the tabs should be vertical, or the default horizontal. Alternatively we could use an orientation attribute with horizontal or vertical options. Whichever we think would be clearer to the user.

I cant think of any other commonly needed features for tabs, other than the tabs content should use inner blocks for their content.

[brettsmason]

Note to myself to review Vikki's work on tabs.