• Resolved chadreilly

    (@chadreilly)


    Hi,

    I’m using 2024 theme and I’m wondering if there a way to create a tabs block or pattern in core without a plugin?

    I ask, because A) I need it, and B) in the wordpress dashboard, if I click “Learn more about wordpress 6.61” it brings me to some fairly fantastic responsive horizontal tabs explaining wordpress features. I’m wondering if there is a way to copy said pattern, modify it, and use it on the front end of my site?

    FYI, I’m a non-advanced DIY user.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi @chadreilly 👋

    I’m not aware of a core Tabs block and I couldn’t find any patterns that offer something similar.

    It might be worth noting that the tabs you mention on the “Learn more” page are a simple navigation element containing links. When clicking on each link or tab as they are styled, the page reloads as you navigate to a new URL.

    You could achieve something similar to this by creating separate pages for each tab and adding a navigation block to each page. I don’t think this is really the behaviour you’re looking for though.

    My recommendation would be to leverage a plugin specifically designed for the purpose. You can find Tabs related plugins here.

    A plugin should provide an easier and more manageable approach. It should also allow for the tabs to be navigated without requiring a page reload.

    Thread Starter chadreilly

    (@chadreilly)

    Ok, interesting. Thank you!

    So those “tabs” I see are just a menu that kinda looks tabby?

    I can see that maybe working for me if I can’t find a suitable tab plugin. I’ve tried some tab plugins, but I’ve been trying to place a carousel block within the tabs, and so far with the plugins I have tried it stops the carousel from working properly.

    So far the only one that has worked is the tab block from Kadance, and even that seems a little dodgy. Plus I hate to have all of Kadance just for their tabs.

    Looking at the patterns library on ww.wp.xz.cn, is it the same with the sort buttons at the top “all, featured, post…”? The sort buttons are just a navigation block?

    Thread Starter chadreilly

    (@chadreilly)

    Additional question:

    What would be the difference, pros and cons, of using the navigation block to create pseudo-tabs vs just a row with text, heading, or buttons, each linking to the URLs. I ask in part because, I recall my footer originally being full of navigation elements, but when I recreated a footer from scratch, I just linked text. I’m not sure if I’m missing any functionality in doing so. Thank you!

    So those “tabs” I see are just a menu that kinda looks tabby?

    That’s correct. They are styled in that fashion but redirect you to the appropriate page on click rather than hide/show tab content without leaving the page as proper tabs would do.

    I’ve tried some tab plugins, but I’ve been trying to place a carousel block within the tabs, and so far with the plugins I have tried it stops the carousel from working properly.

    Unfortunately, the best I can suggest here would be to reach out to the individual plugins’ support.

    Looking at the patterns library on ww.wp.xz.cn, is it the same with the sort buttons at the top “all, featured, post…”? The sort buttons are just a navigation block?

    Yes, it appears so. When I inspect the page I can see those buttons are a navigation block using a custom block style called “Button List”, created by the theme. You can also see by clicking each button that the entire page refreshes as you navigate to a new URL.

    What would be the difference, pros and cons, of using the navigation block to create pseudo-tabs vs just a row with text, heading, or buttons, each linking to the URLs.

    In general, it’s best practice to create semantic HTML. In this case, if your collection of links and buttons are navigating a user to a new page, it would make sense for these links to belong under a <nav> element. Using the navigation block for such a scenario would provide benefits from accessibility to SEO.

    Just note this is in relation to a designated collection of navigation links rather than individual links that might be sprinkled throughout your content.

    Thread Starter chadreilly

    (@chadreilly)

    Thank you! That was very helpful, and gave me perhaps two avenues forward.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Tab block with core/gutenberg?’ is closed to new replies.