WordPress.org
Get WordPress

Plugin Directory

Changeset 3384982


Ignore:
Timestamp:
10/27/2025 06:25:55 AM (4 months ago)
Author:
punitv342
Message:

update readme

File:
1 edited

Legend:

Unmodified
Added
Removed

  • blablablocks-tabs-block/tags/1.0.0/readme.txt

    r3349528 r3384982  
    1 === BlaBlaBlocks Tabs Block ===
    2 Contributors:      lubus, ajitbohra , punitv342
    3 Tags:              tabs, tabs block, BlaBlaBlocks, block
     1=== Tabs Block – Responsive Gutenberg Tabs for Block Editor ===
     2Contributors:      lubus, ajitbohra, punitv342
     3Tags:              tabs, tabs block, block editor, responsive tabs
    44Requires at least: 6.6
    55Tested up to:      6.8
    … …  
    77Stable tag:        1.0.0
    88License:           MIT
    9 License URI:       https://www.gnu.org/licenses/MIT
    10 
    11 Create responsive, accessible tabs with ready-to-use templates in the Block Editor.
     9License URI:       https://opensource.org/licenses/MIT
     10
     11Tabs Block for Gutenberg – create responsive, accessible tabs using the WordPress Interactivity API.
    1212
    1313== Description ==
    1414
    15 Tabs Block is a WordPress plugin built specifically for the Block Editor, allowing you to create responsive tabs effortlessly.
    16 
    17 === What makes BlaBlaBlocks Tabs Block special? ===
    18 * **Accessible** –  WCAG-compliant with ARIA roles, keyboard nav & screen-reader support.
    19 * **Zero Dependency** – powered WordPress Interactivity API.
    20 * **Responsive** – auto-adjusts tabs and layout for any screen size.
    21 * **Horizontal & Vertical Support** – switch between horizontal or vertical tab layouts easily.
    22 * **Ready-to-use Templates** – ship with multiple prebuilt layouts you can insert and customize. 
    23 * **Editor Compatibility** – fully integrated with the Block Editor’s UI and server-side rendering pipeline.
    24 
    25 === Open Source and Free ===
    26 The BlaBlaBlocks Tabs Block is open source. Not only is it free to use, but you are also welcome to collaborate and contribute to its development.
     15### Build Accessible, Responsive Tabs in the Gutenberg Block Editor
     16
     17**Tabs Block for Gutenberg** lets you add beautiful, responsive, and accessible tabbed content directly in the WordPress Block Editor no coding or external libraries required. 
     18
     19Whether you’re building a documentation page, a product features section, or a clean tabbed layout for content organization, this plugin helps you do it quickly and natively.
     20
     21### Why Choose BlaBlaBlocks Tabs Block?
     22
     23The **Tabs Block** plugin combines **modern WordPress standards** with **ease of use**. Built using the **WordPress Interactivity API**, it ensures lightweight performance, accessibility, and full compatibility with the latest versions of WordPress.
     24
     25#### Key Highlights
     26- **Accessible Tabs:** WCAG-compliant markup, ARIA roles, and keyboard navigation support.
     27- **Zero Dependencies:** No jQuery or heavy JS frameworks powered by the **Interactivity API**.
     28- **Responsive by Default:** Tabs automatically stack or scroll on smaller screens.
     29-  **Horizontal & Vertical Layouts:** Switch between tab orientations with one click.
     30- **Ready-to-Use Templates:** Choose from prebuilt designs to jump-start your layout.
     31- **Seamless Block Editor Integration:** Looks, feels, and behaves like a native WordPress block.
     32
     33## #Key Features
     34
     35#### 1. Fully Accessible
     36Accessibility isn’t optional — it’s built in. Tabs Block follows **WCAG 2.1** guidelines and adds:
     37
     38* ARIA attributes for screen readers.
     39* Tab focus management for keyboard users.
     40* Semantic markup that works with assistive technologies.
     41
     42#### 2. Responsive by Design
     43No need for custom CSS or media queries. Tabs automatically adapt their layout across screen sizes:
     44
     45* On desktop: clean horizontal tab navigation. 
     46* On mobile: collapsible stacked layout or swipe-enabled scrolling.
     47
     48#### 3. Horizontal & Vertical Tabs
     49Want sidebar-style navigation? Just toggle layout mode. You can switch between horizontal and vertical tabs at any time, perfect for documentation pages or feature lists.
     50
     51#### 4. Powered by the Interactivity API
     52Unlike most tab plugins that rely on JavaScript frameworks, BlaBlaBlocks Tabs Block uses **WordPress’s native Interactivity API**. 
     53That means:
     54
     55* Faster loading and rendering.
     56* Better Core Web Vitals scores.
     57* Seamless state management between editor and frontend.
     58
     59#### 5. Ready-to-Use Templates
     60Save time with built-in templates. Choose from multiple tab styles (minimal, boxed, underlined, colored) and insert them with one click.
     61
     62#### 6. Works Everywhere
     63Tabs Block is fully compatible with:
     64
     65* Block Themes (Full Site Editing)
     66* Classic Themes using the Block Editor
     67* Reusable Blocks and Block Patterns
     68* Core blocks like Columns, Groups, and Cover
     69
     70### How to Use the Tabs Block
     71
     72#### Step 1: Add the Tabs Block
     731. In the Block Editor, click the “+” icon to add a new block. 
     742. Search for **“Tabs Block”**. 
     753. Select it to insert into your post or page.
     76
     77#### Step 2: Choose a Layout
     78Open the right-hand sidebar and pick from **horizontal** or **vertical** layouts. You can switch anytime.
     79
     80#### Step 3: Add Tabs and Content
     81Add, rename, or delete tabs using the block toolbar. Each tab panel supports any block — text, images, videos, forms, etc.
     82
     83#### Step 4: Customize the Look
     84Use the sidebar controls to adjust:
     85
     86* Colors
     87* Typography
     88* Borders
     89* Padding and spacing
     90
     91### Step 5: Preview Responsiveness
     92Use the Editor’s device preview to test how your tabs behave on mobile, tablet, and desktop.
     93
     94Checkout out [documentation](https://github.com/lubusIN/blablablocks-tabs-block/wiki) for more details
     95
     96## Customization Options
     97
     98Tabs Block integrates seamlessly with WordPress’s design tools, so you can:
     99
     100* Change background and text colors using global styles. 
     101* Adjust spacing, borders, and radii. 
     102* Apply block style variations for a unified site look.
     103
     104For developers, advanced customization can be done via CSS custom properties or theme JSON overrides.
     105
     106### Common Use Cases
     107
     108- **Product Features Tabs:** Highlight product details, specifications, and reviews.
     109- **Documentation Pages:** Organize setup instructions and API references.
     110- **FAQs:** Group related questions under topic-based tabs.
     111- **Pricing Comparisons:** Present plan details side by side.
     112- **Portfolio Showcases:** Display projects or case studies by category.
     113
     114
     115###  Integration and Compatibility
     116
     117Tabs Block integrates smoothly with:
     118
     119- **Core WordPress Blocks:** Columns, Groups, Cover, Image, Paragraph, Buttons, etc.
     120- **Full Site Editing (FSE):** Works in templates and template parts.
     121- **Reusable Blocks:** Create once, reuse anywhere.
     122- **Translation Plugins:** WPML, Polylang, Loco Translate.
     123- **Caching & Optimization Plugins:** No conflicts with WP Rocket, LiteSpeed Cache, or Autoptimize.
     124
     125### Troubleshooting
     126
     127#### Tabs Not Switching?
     128
     129- Check for JavaScript errors in your browser console.
     130- Ensure WordPress 6.5 or higher is installed (Interactivity API required).
     131
     132#### Styles Not Applying?
     133Your theme’s CSS may override tab styles. Try adding a higher specificity rule or using the block’s built-in design controls.
     134
     135### Open Source and Free
     136
     137**BlaBlaBlocks Tabs Block** is open source under the **MIT License**. 
     138You can freely use, modify, and contribute to its development.
    27139
    28140- **Source Code:** 
    … …  
    32144  [https://github.com/lubusIN/blablablocks-tabs-block/issues](https://github.com/lubusIN/blablablocks-tabs-block/issues)
    33145
    34 - **Documentation:**
     146- **Documentation:** 
    35147  [https://github.com/lubusIN/blablablocks-tabs-block/wiki](https://github.com/lubusIN/blablablocks-tabs-block/wiki)
    36148
     149== Frequently Asked Questions ==
     150
     151### 1. Does this plugin work with Full Site Editing?
     152Yes. Tabs Block works perfectly with block themes and the Site Editor.
     153
     154### 2. Can I add blocks inside tabs?
     155Absolutely. Each tab panel is a container for any core or third-party block.
     156
     157### 3. Is this plugin mobile-friendly?
     158Yes. Tabs automatically become scrollable or stacked on small screens.
     159
     160### 4. Can I use the Tabs Block inside Columns or Groups?
     161Yes. It supports full nesting and alignment control.
     162
     163### 5. Does it require JavaScript libraries?
     164No. Tabs Block uses **WordPress’s Interactivity API**, eliminating dependency on jQuery.
     165
     166### 6. How do I change colors and typography?
     167Use the built-in WordPress color, typography, and border tools under the block sidebar.
     168
     169### 7. Can I create my own tab templates?
     170Yes. You can save a Tabs Block setup as a Reusable Block or pattern and reuse it across posts.
     171
     172### 8. How do I make vertical tabs?
     173Select the Tabs Block → under Layout settings → choose “Vertical”.
     174
     175### 9. Why aren’t my tabs switching?
     176Ensure you’re on WordPress 6.5+ and your theme doesn’t override Interactivity API features.
     177
     178### 10. Can I style tabs using CSS?
     179Yes. Each tab and panel has a unique class name for custom styling.
     180
     181### 11. Is it compatible with caching plugins?
     182Yes. Tabs Block doesn’t rely on AJAX or dynamic requests, so caching won’t affect functionality.
     183
    37184== Screenshots ==
    38 1. **Editor & Settings** – tweak your tabs’s layout and behavior right in the sidebar.
    39 2. **Responsive** – previews showing the tabs auto‑adjusting across viewports.
    40 3. **Template Library** – modal showcasing multiple ready‑to‑use tabs designs.
    41 4. **Frontend** – See exactly how your tabs looks on your site.
     1851. **Editor Settings** – Customize tab layouts in the Block Editor sidebar. 
     1862. **Responsive Preview** – Tabs adapt automatically for mobile, tablet, and desktop. 
     1873. **Template Library** – Choose from multiple ready-to-use tab designs. 
     1884. **Frontend Example** – See how responsive tabs render beautifully on your site.
    42189
    43190== Installation ==
    44 You can install this plugin either automatically through the WordPress admin or manually via FTP.
    45 
    46 = Automatic Installation =
    47 
     191
     192= Automatic =
    481931. Log in to your WordPress dashboard.
    491942. Navigate to Plugins > Add New.
    50 3. In the search field, type “BlaBlaBlocks Tabs Block”, then hit Enter or click Search Plugins.
     1953. In the search field, type “Tabs Block for Gutenberg”, then click Search Plugins.
    511964. Click Install Now, then Activate.
    52197
    53 = Manual Installation =
    54 
    55 Manual installation method requires downloading the BlaBlaBlocks Tabs Block plugin and uploading it to your web server via your favorite FTP application. The WordPress codex contains [instructions on how to do this here](https://wordpress.org/support/article/managing-plugins/#manual-plugin-installation).
     198= Manual =
     1991. Download the BlaBlaBlocks Tabs Block plugin.
     2002. Upload it to your server via FTP under `/wp-content/plugins/`.
     2013. Activate it through the Plugins screen in WordPress.
    56202
    57203== Changelog ==
    58204
    59205= 1.0.0 =
    60 Initial release 🎉
     206* Initial release of Tabs Block for Gutenberg.
     207* Added responsive horizontal and vertical tab layouts.
     208* Built using WordPress Interactivity API for zero-dependency performance.
     209* Includes ready-to-use templates and accessible WCAG-compliant markup.
Note: See TracChangeset for help on using the changeset viewer.