How to Create Tabs in WordPress Using default Gutenberg Blocks | WordPress Tips and Tricks
HTML-код
- Опубликовано: 4 окт 2024
- Hey Everyone, in this tutorial, I will show you how to create Tabs in WordPress Gutenberg Editor. The purpose of this tutorial is to teach you how to create the creative content design in Gutenberg using default blocks without a 3rd party block plugin.
JQuery Code:
gist.github.co...
Useful Gutenberg Plugins:
Editor Plus | wordpress.org/...
Block Slider | wordpress.org/...
EditorsKit | wordpress.org/...
Join The Gutenberg Community on Facebook:
www.facebook.c...
Follow:
Facebook | / gutenberghub
Twitter | / gutenberghub
Website | gutenberghub.com/
#gutenberg #wordpress #block #tutorial #gutenberghub
![BabyChiefDoit - Too Slow (feat. STAR BANDZ) [Official Music Video]](http://i.ytimg.com/vi/zayaxws7RPg/mqdefault.jpg)
Thanks a lot!! I was searching for this for a lifetime... Finally I found it!! Great work!!
Can I just replace the text and article with a carousel that shows multiple articles?
This is great, thanks!
Is there a way to highlight the selected button/tab?
Yes, that's possible. One way would be to assign a class such as "selected" using JS on the button click event and then you can add your desired selected button styling for that class using CSS. Hope this helps.
@@GutenbergHub could you provide this piece of code in comment? it would help all of us a lot )
I want to have more than one option under each category, i.e. Headphones x3 types. How will I go about doing that? TIA
Enclose multiple media-text blocks or any other blocks inside a Group for each tab content. And assign the anchor id and class 'tab-content' on each group rather than the Media Text block.
What is the advantage of doing this your way versus using a Gutenberg Tab Block ?
It depends. The purpose of this video is to show and teach how you can do it without a block plugin. If you are a user who just needs a pre-built solution, using a plugin would be good for you. If you want to learn this stuff, this video is for you.
Doing it yourself would also open up a lot of creative design flexibility. With a block plugin, you would use the design they provide.
So it really depends on the user and what you want to achieve.
Gutenberg toolkit is so useful although I remember the problem with this plugin is the bloat assets load
EditorPlus doesn't load unnecessary assets on every page; it just loads what you use. It's being optimized for performance. I would suggest you give it a try again.
@@GutenbergHub I've tried again. I've just set a paragraph to bold and on the front end and it loads 131.29kb of assets.
It loads lottie player, countdown js, progress bar, tabs, toggles.... why?
@@PanchoMarconi Because those blocks are available in EP. You can, however disable the blocks extension by going to EP admin panel.
@@GutenbergHub I disable all five features in Editor Plus settings and still loads all the assets, even if I don't use the plugin at all.
Voice your videos please, great content, create a registration page and user profiles, with the ability to post
Yup, we will add voice soon. Noted your suggestion for the tutorial as well. 👍
in your title says Using default Gutenberg Blocks then why use plugins ? I thought its without plugin when I click this video 🤦♀
Well, this tutorial doesn't use any 3rd party blocks for creating these tabs. The plugins used help with adding custom code snippets and styling the blocks.
@@GutenbergHub Then change the title bro. Can you pls explain is it possible to create tab without help of plugins ?
@@MuhammadAnasA Why? The title doesn't say "without plugins" it's fine as it is.
WordPress doesn't have a Tab Block, so there are a few options for you.
1. Use a plugin that has a tab block
2. Do it using core blocks with some custom code (close to what this tutorial is)
3. Build a custom block yourself (needs coding knowledge).
Hope this clarifies it further.