This repository was archived by the owner on Jun 19, 2025. It is now read-only.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
InnerBlocksper 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
There will be two custom block types created:
TabsandTabThe
Tabsblock allowsInnerBlocksbut only of typeTab, it stores an array of tab objects as attributes which contain the title and unique ID ofTabchildren.The
Tabblock allows for any type ofInnerBlockand contains the core content of each tab.In the
Tabsblock, hide the appender UI so users cannot addTabchildren using the default UI. Then programmatically control the insertion ofTabchild blocks when a newTabis added by the user, using a tab creation function. The tab creation function does a few things:Tabblock usingcreateBlockandinsertBlockfunctions.TabclientId as a unique ID on both the tabs array andTabblock attributes.The visibility of each child block is controlled at the parent which stores an
activeTabattribute, which is set to the UID of one of the tabs. This attribute is passed down to all childTabs any time a new active tab is set.