bisheng/blablablocks-tabs-block
1
0
Fork 0
mirror of https://github.com/lubusIN/blablablocks-tabs-block.git synced 2025-11-24 02:27:09 +08:00
Code Issues Projects Packages Wiki Activity Actions
Page: Your First Tabs
Pages
Getting Started Home Video Guides Your First Tabs
2 Your First Tabs
Ajit Bohra edited this page 2025-08-13 09:47:44 +05:30
Unescape Escape
Table of Contents
This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

Step 1: Insert Block

https://github.com/user-attachments/assets/bd272bbb-8a22-475d-8b77-5caec45c1245

  1. Open the page or post in the Block Editor.
  2. Click the “+” Add Block button.
  3. Search for “Tabs” and click it.

Step 2: Starting Point

  1. Use a Design Pattern:

Pre-designed tabs ready to customise.

https://github.com/user-attachments/assets/436f1975-51d5-4926-bd1c-b1a155b62cf1

  1. Use a Variation:

Blank tabs with a preset structure.

https://github.com/user-attachments/assets/6cde2722-3adb-413b-af3a-1aaaf1361b41

  1. Build from Scratch:

Start empty and add blocks yourself.

https://github.com/user-attachments/assets/884aba23-b271-43b8-a0ec-70bc7e31b9e5

Tip

For Beginners

  • Start with a pattern if you’re new; it’s faster and gives you a visual base.
  • Use the List View to manage tabs more easily.
  • Experiment with different core blocks inside tabs for creative layouts.

Step 3: Adding Tab

https://github.com/user-attachments/assets/78745697-bb44-45a4-80ad-f3428a8cff56

  • Select tabs: click on the tab title to select and make the toolbar visible
  • To add a tab: click “+” in the block toolbar or use the list view.
  • Add content: can contain any block images, headings, buttons, videos, testimonials, etc.

Step 4: Managing Tabs

https://github.com/user-attachments/assets/bc92b3b5-1392-48d2-825f-62a819efbffe

  • Select tabs: click on the tab title to select and make the toolbar visible
  • Reorder: click “<” or “>” arrow icons in the block toolbar or use the list view to re-order tabs.
  • Deleting: on the select tab, click the three dots to access the delete option to remove the tab and its content

Step 5: Customisation

https://github.com/user-attachments/assets/ddca5538-59f9-452b-bc66-26e36cd1aeb9

In the Block Settings Panel (right sidebar), you can:

  • Select the Tabs block.
  • Explore settings in the sidebar
  • Adjust direction
  • Adjust spacing.
  • Styling

Customise tabs as needed.

Step 6: Responsive Behaviour

https://github.com/user-attachments/assets/87da18f7-18ad-42cc-8875-64c693a69122

Currently, there are no out-of-the-box settings as tabs adapt to screen size. We may have responsive controls in the future.

The Blablablocks Tabs Block combines flexibility and familiarity. You can build anything from simple to rich content, all within the WordPress block editor.