lubus

Ajit Bohra

Punit Verma

<p><strong>Slider Block</strong> (part of the <strong>BlaBlaBlocks</strong> suite) is a WordPress plugin that lets you build <strong>responsive sliders</strong>, <strong>carousels</strong>, and <strong>Gutenberg sliders</strong> directly inside the Block Editor no shortcodes, no page builders, and no coding required.</p>
<p>This block gives you an intuitive, visual way to add sliders to your pages, posts, or full site editing templates. Choose from ready-to-use templates or start from scratch, fully customize slide layout, autoplay, and navigation all within the native WordPress interface.</p>
<h3>Why Choose BlaBlaBlocks Slider Block?</h3>
<ul>
<li><strong>Accessible by Design</strong> – WCAG-compliant with ARIA roles, keyboard navigation, and screen-reader support.  </li>
<li><strong>Responsive and Fluid</strong> – Automatically adapts to mobile, tablet, and desktop breakpoints.  </li>
<li><strong>Gutenberg-Native Experience</strong> – Seamlessly integrated into the Block Editor.  </li>
<li><strong>Template Library</strong> – Insert pre-built slider layouts: hero sections, testimonials, image carousels, and more.  </li>
<li><strong>Server-Side Rendering</strong> – Ensures your editor preview always matches the frontend output.  </li>
<li><strong>Lightweight and Fast</strong> – Minimal scripts, optimized rendering, and no frontend bloat.  </li>
</ul>
<p>Whether you’re creating a full-width hero slider, a small testimonial carousel, or a product showcase, the <strong>Slider Block</strong> makes it simple, accessible, and fast.</p>
<h3>Key Features</h3>
<h4><strong>Accessible Sliders</strong></h4>
<p>Every slider is fully accessible out of the box:</p>
<ul>
<li>Keyboard navigation for next/previous slides.</li>
<li>ARIA labels and roles for assistive technologies.</li>
<li>Screen reader-friendly transitions.</li>
<li>Optional focus management for improved UX.</li>
</ul>
<h4><strong>Responsive by Default</strong></h4>
<p>Your slider automatically scales to different viewports.<br />
Adjust slides per view, spacing, and breakpoints — perfect for mobile-first sites.</p>
<h4><strong>Gutenberg Integration</strong></h4>
<p>Built entirely for the <strong>WordPress Block Editor</strong>, this plugin uses the latest React-based block architecture. You can:</p>
<ul>
<li>Drag and drop slides directly in the editor.</li>
<li>Use nested blocks for advanced layouts.</li>
<li>Adjust all options in the right sidebar no shortcodes or widgets.</li>
</ul>
<h4><strong>Pre-Made Templates</strong></h4>
<p>Skip the setup with built-in templates for:</p>
<ul>
<li>Hero sliders</li>
<li>Image carousels</li>
<li>Testimonials</li>
<li>Content showcases</li>
</ul>
<p>Each template is fully customizable just insert, edit, and publish.</p>
<h4><strong>Advanced Configuration</strong></h4>
<p>Fine-tune every detail:</p>
<ul>
<li>Slides per view  </li>
<li>Pagination and navigation controls  </li>
<li>Autoplay and speed settings  </li>
<li>Transition effects  </li>
<li>Direction (horizontal/vertical)  </li>
</ul>
<h4><strong>Lightweight and Optimized</strong></h4>
<p>Slider Block uses minimal JavaScript and CSS only loading assets when the block appears on the page. This ensures fast load times and top performance scores.</p>
<h3>How to Create a Slider in Gutenberg</h3>
<ol>
<li>Open the Block Editor (Gutenberg).  </li>
<li>Search for “Slider” to add the block.  </li>
<li>Insert the <strong>BlaBlaBlocks Slider Block</strong>.  </li>
<li>Add slides you can use images, headings, buttons, or any block inside each slide.  </li>
<li>Customize slider options in the sidebar panel (autoplay, speed, arrows, pagination).  </li>
<li>Save and preview your responsive slider is ready!</li>
</ol>
<p>Check <a href="https://github.com/lubusIN/blablablocks-slider-block/wiki" rel="nofollow ugc">documentation</a> more details.</p>
<h3>How to Use Templates Library</h3>
<ol>
<li>Click the <strong>“Template Library”</strong> button inside the slider block toolbar.  </li>
<li>Choose from multiple designs Hero, Testimonial, Carousel, Gallery.  </li>
<li>Customize slide content, layout, and animations instantly.</li>
</ol>
<p>Check <a href="https://github.com/lubusIN/blablablocks-slider-block/wiki" rel="nofollow ugc">documentation</a> more details.</p>
<h3>Common Use Cases</h3>
<ul>
<li>Homepage hero sliders with call-to-action buttons.  </li>
<li>Testimonial carousels on service pages.  </li>
<li>Logo sliders for brand showcases.  </li>
<li>Product image carousels in WooCommerce product pages.  </li>
<li>Featured content sliders on blogs or portfolios.</li>
</ul>
<h3>Technical Features</h3>
<ul>
<li>Built with React + WordPress Block API.  </li>
<li>Uses Swiper.js.  </li>
<li>Supports dynamic slide content.  </li>
<li>Server-side rendering ensures perfect frontend/editor consistency.  </li>
<li>Fully compatible with WordPress 6.6+ and PHP 7.4+.</li>
</ul>
<h3>SEO and Performance</h3>
<p>Slider Block follows best practices for:</p>
<ul>
<li><strong>Semantic HTML</strong> output.  </li>
<li><strong>Accessible ARIA structure</strong> for screen readers.  </li>
<li><strong>Optimized DOM footprint</strong> for Core Web Vitals compliance.</li>
</ul>
<h3>Troubleshooting</h3>
<p><strong>The slider doesn’t autoplay:</strong><br />
Check the block settings and ensure “Autoplay” is toggled on. Autoplay is disabled by default for accessibility reasons.</p>
<p><strong>Keyboard navigation not working:</strong><br />
If multiple sliders are on a single page, ensure you’re using version 1.1.0 or later (this fixes navigation conflicts).</p>
<p><strong>Layout issues on mobile:</strong><br />
Try adjusting the “Slides per view” setting or resetting custom CSS if applied by your theme.</p>
<h3>Integrations</h3>
<ul>
<li>Works with <strong>WordPress Core Blocks</strong> (Image, Heading, Button, Group).  </li>
<li>Compatible with <strong>WooCommerce</strong> product blocks.  </li>
<li>Can be combined with <strong>block patterns</strong> and <strong>reusable blocks</strong> for advanced layouts.</li>
</ul>
<h3>Open Source and Contributions</h3>
<p>The BlaBlaBlocks Slider Block is 100% open source.<br />
You’re welcome to use, modify, or contribute improvements.</p>
<ul>
<li>
<p><strong>Source Code:</strong><br />
<a href="https://github.com/lubusIN/blablablocks-slider-block" rel="nofollow ugc">https://github.com/lubusIN/blablablocks-slider-block</a></p>
</li>
<li>
<p><strong>Report Issues:</strong><br />
<a href="https://github.com/lubusIN/blablablocks-slider-block/issues" rel="nofollow ugc">https://github.com/lubusIN/blablablocks-slider-block/issues</a></p>
</li>
</ul>


Slider and Carousel Block – Responsive, Accessible

Build responsive, accessible sliders or carousel in the Block Editor fast templates, no code needed.

<h3>Build Accessible, Responsive Tabs in the Gutenberg Block Editor</h3>
<p><strong>Tabs Block for Gutenberg</strong> lets you add beautiful, responsive, and accessible tabbed content directly in the WordPress Block Editor no coding or external libraries required.</p>
<p>Whether 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.</p>
<h3>Why Choose BlaBlaBlocks Tabs Block?</h3>
<p>The <strong>Tabs Block</strong> plugin combines <strong>modern WordPress standards</strong> with <strong>ease of use</strong>. Built using the <strong>WordPress Interactivity API</strong>, it ensures lightweight performance, accessibility, and full compatibility with the latest versions of WordPress.</p>
<h4>Key Highlights</h4>
<ul>
<li><strong>Accessible Tabs:</strong> WCAG-compliant markup, ARIA roles, and keyboard navigation support.</li>
<li><strong>Zero Dependencies:</strong> No jQuery or heavy JS frameworks powered by the <strong>Interactivity API</strong>.</li>
<li><strong>Responsive by Default:</strong> Tabs automatically stack or scroll on smaller screens.</li>
<li><strong>Horizontal & Vertical Layouts:</strong> Switch between tab orientations with one click.</li>
<li><strong>Ready-to-Use Templates:</strong> Choose from prebuilt designs to jump-start your layout.</li>
<li><strong>Seamless Block Editor Integration:</strong> Looks, feels, and behaves like a native WordPress block.</li>
</ul>
<h3>Key Features</h3>
<h4>1. Fully Accessible</h4>
<p>Accessibility isn’t optional — it’s built in. Tabs Block follows <strong>WCAG 2.1</strong> guidelines and adds:</p>
<ul>
<li>ARIA attributes for screen readers.</li>
<li>Tab focus management for keyboard users.</li>
<li>Semantic markup that works with assistive technologies.</li>
</ul>
<h4>2. Responsive by Design</h4>
<p>No need for custom CSS or media queries. Tabs automatically adapt their layout across screen sizes:</p>
<ul>
<li>On desktop: clean horizontal tab navigation.  </li>
<li>On mobile: collapsible stacked layout or swipe-enabled scrolling.</li>
</ul>
<h4>3. Horizontal & Vertical Tabs</h4>
<p>Want 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.</p>
<h4>4. Powered by the Interactivity API</h4>
<p>Unlike most tab plugins that rely on JavaScript frameworks, BlaBlaBlocks Tabs Block uses <strong>WordPress’s native Interactivity API</strong>.<br />
That means:</p>
<ul>
<li>Faster loading and rendering.</li>
<li>Better Core Web Vitals scores.</li>
<li>Seamless state management between editor and frontend.</li>
</ul>
<h4>5. Ready-to-Use Templates</h4>
<p>Save time with built-in templates. Choose from multiple tab styles (minimal, boxed, underlined, colored) and insert them with one click.</p>
<h4>6. Works Everywhere</h4>
<p>Tabs Block is fully compatible with:</p>
<ul>
<li>Block Themes (Full Site Editing)</li>
<li>Classic Themes using the Block Editor</li>
<li>Reusable Blocks and Block Patterns</li>
<li>Core blocks like Columns, Groups, and Cover</li>
</ul>
<h3>How to Use the Tabs Block</h3>
<h4>Step 1: Add the Tabs Block</h4>
<ol>
<li>In the Block Editor, click the “+” icon to add a new block.  </li>
<li>Search for <strong>“Tabs Block”</strong>.  </li>
<li>Select it to insert into your post or page.</li>
</ol>
<h4>Step 2: Choose a Layout</h4>
<p>Open the right-hand sidebar and pick from <strong>horizontal</strong> or <strong>vertical</strong> layouts. You can switch anytime.</p>
<h4>Step 3: Add Tabs and Content</h4>
<p>Add, rename, or delete tabs using the block toolbar. Each tab panel supports any block — text, images, videos, forms, etc.</p>
<h4>Step 4: Customize the Look</h4>
<p>Use the sidebar controls to adjust:</p>
<ul>
<li>Colors</li>
<li>Typography</li>
<li>Borders</li>
<li>Padding and spacing</li>
</ul>
<h3>Step 5: Preview Responsiveness</h3>
<p>Use the Editor’s device preview to test how your tabs behave on mobile, tablet, and desktop.</p>
<p>Checkout out <a href="https://github.com/lubusIN/blablablocks-tabs-block/wiki" rel="nofollow ugc">documentation</a> for more details</p>
<h3>Customization Options</h3>
<p>Tabs Block integrates seamlessly with WordPress’s design tools, so you can:</p>
<ul>
<li>Change background and text colors using global styles.  </li>
<li>Adjust spacing, borders, and radii.  </li>
<li>Apply block style variations for a unified site look.</li>
</ul>
<p>For developers, advanced customization can be done via CSS custom properties or theme JSON overrides.</p>
<h3>Common Use Cases</h3>
<ul>
<li><strong>Product Features Tabs:</strong> Highlight product details, specifications, and reviews.</li>
<li><strong>Documentation Pages:</strong> Organize setup instructions and API references.</li>
<li><strong>FAQs:</strong> Group related questions under topic-based tabs.</li>
<li><strong>Pricing Comparisons:</strong> Present plan details side by side.</li>
<li><strong>Portfolio Showcases:</strong> Display projects or case studies by category.</li>
</ul>
<h3>Integration and Compatibility</h3>
<p>Tabs Block integrates smoothly with:</p>
<ul>
<li><strong>Core WordPress Blocks:</strong> Columns, Groups, Cover, Image, Paragraph, Buttons, etc.</li>
<li><strong>Full Site Editing (FSE):</strong> Works in templates and template parts.</li>
<li><strong>Reusable Blocks:</strong> Create once, reuse anywhere.</li>
<li><strong>Translation Plugins:</strong> WPML, Polylang, Loco Translate.</li>
<li><strong>Caching & Optimization Plugins:</strong> No conflicts with WP Rocket, LiteSpeed Cache, or Autoptimize.</li>
</ul>
<h3>Troubleshooting</h3>
<h4>Tabs Not Switching?</h4>
<ul>
<li>Check for JavaScript errors in your browser console.</li>
<li>Ensure WordPress 6.5 or higher is installed (Interactivity API required).</li>
</ul>
<h4>Styles Not Applying?</h4>
<p>Your theme’s CSS may override tab styles. Try adding a higher specificity rule or using the block’s built-in design controls.</p>
<h3>Open Source and Free</h3>
<p><strong>BlaBlaBlocks Tabs Block</strong> is open source under the <strong>MIT License</strong>.<br />
You can freely use, modify, and contribute to its development.</p>
<ul>
<li>
<p><strong>Source Code:</strong><br />
<a href="https://github.com/lubusIN/blablablocks-tabs-block" rel="nofollow ugc">https://github.com/lubusIN/blablablocks-tabs-block</a></p>
</li>
<li>
<p><strong>Report Issues:</strong><br />
<a href="https://github.com/lubusIN/blablablocks-tabs-block/issues" rel="nofollow ugc">https://github.com/lubusIN/blablablocks-tabs-block/issues</a></p>
</li>
<li>
<p><strong>Documentation:</strong><br />
<a href="https://github.com/lubusIN/blablablocks-tabs-block/wiki" rel="nofollow ugc">https://github.com/lubusIN/blablablocks-tabs-block/wiki</a></p>
</li>
</ul>


Tabs Block – Responsive Gutenberg Tabs for Block Editor

Tabs Block for Gutenberg – create responsive, accessible tabs using the WordPress Interactivity API.

Slider and Carousel Block – Responsive, Accessible vs Tabs Block – Responsive Gutenberg Tabs for Block Editor