Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add tabs example #118

Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

Add tabs example #118

wants to merge 1 commit into from

Conversation

jsakas
Copy link

@jsakas jsakas commented May 27, 2020

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.

@ryanwelcher
Copy link
Contributor

Thanks for taking the time to create this PR! We've made a lot of updates to the repo. Would you be able to update it?

@pbrocks
Copy link

pbrocks commented May 11, 2022

Superseded by #218

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add example of nested content with columns / tabs
3 participants