WordPress Gutenberg Tabs Block

WordPress Gutenberg made some good progress over the years. I have just started using blocks, and it's nice to have many free and premium blocks available to create an excellent experience.

InnerBlock Problem

Creating block components is still a bit of a challenge, as the core API is not very flexible., for example, you cannot have more than one InnerBlock in a component. And cannot dynamically update the template of an InnnerBlock.

There are many premium plugins available for tabs block with nested block support but there as far as I know there is no straightforward way to do it. I am working on a project where I wanted to have some tabs like functionality but since I could not find any free solution, I thought why not I should learn and try to create it myself this time. But believe me, it was not fun, but I am happy with end results.

Tabs Block

Editor

Frontend

There might be an easier way to do this but I tried to implement what I needed for my use case. So I created a separate package for tabs so that anyone looking for can use it and save time, meanwhile, if you have any better ideas please do share.

Material Design

This tabs component is using material web component from google.

https://material.io/components/tabs

Todo’s

Please create a pull request if you can help with anything….

Nested tabs [DONE]

Themeing

Icons

Git Repo

GitHub - naumanahmed19/wp-mdc-tabs-block: WordPress Gutenberg Material Design Tabs Block

WordPress.org Plugin?

Once I will have some more testing and features I will upload them to wordpress.org (Inshallah)