Hello again!

I noticed a lot of plugin developers offer tabs as part of their gutenberg extension libraries. I needed gutenberg powered tabs for a website I am working on but I didn't want the overhead of installing an entire block library for what I thought should be pretty simple. It turns out that due to the limitation of only a single instance InnerBlocks per block, the implementation for tabs was slightly more complex than I would have hoped for. After being unable to find a good explanation of how one might achieve this, I dug into some of the existing block libraries code and came up with my own version based on those.

At this time I have only completed the ESNext version of the example. If you think this work is suitable to merge, pending any other changes, we can create the other version. I just didn't want the overhead of having to make changes in two places if there will be change requests or if this work is not approved at all.

Closes #117

Gutenberg Tabs High Level Implementation Detail

1. There will be two custom block types created: Tabs and Tab

2. The Tabs block allows InnerBlocks but only of type Tab, it stores an array of tab objects as attributes which contain the title and unique ID of Tab children.

3. The Tab block allows for any type of InnerBlock and contains the core content of each tab.

4. In the Tabs block, hide the appender UI so users cannot add Tab children using the default UI. Then programmatically control the insertion of Tab child blocks when a new Tab is added by the user, using a tab creation function. The tab creation function does a few things:

   1. Create a new child Tab block using createBlock and insertBlock functions.
   2. Create a new tab object and add it to the tabs array, storing the newly created Tab clientId as a unique ID on both the tabs array and Tab block attributes.

5. The visibility of each child block is controlled at the parent which stores an activeTab attribute, which is set to the UID of one of the tabs. This attribute is passed down to all child Tabs any time a new active tab is set.

   Note: Client IDs change between each mount of the component, so you must store the UIDs on both chidlren and parent as custom attributes and you cannot rely on the Client ID persisting between the editor loading.