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
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
There will be two custom block types created:
Tabs
andTab
The
Tabs
block allowsInnerBlocks
but only of typeTab
, it stores an array of tab objects as attributes which contain the title and unique ID ofTab
children.The
Tab
block allows for any type ofInnerBlock
and contains the core content of each tab.In the
Tabs
block, hide the appender UI so users cannot addTab
children using the default UI. Then programmatically control the insertion ofTab
child blocks when a newTab
is added by the user, using a tab creation function. The tab creation function does a few things:Tab
block usingcreateBlock
andinsertBlock
functions.Tab
clientId as a unique ID on both the tabs array andTab
block attributes.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 childTab
s any time a new active tab is set.