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>Query Loop Support</strong> – Turn WordPress posts into a dynamic carousel using the native Query Loop block.</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>Posts Carousel with Query Loop</strong></h4>
<p>Build dynamic carousels from your latest or filtered posts using the native <strong>Query Loop</strong> block. You can:</p>
<ul>
<li>Insert the <strong>Posts Carousel</strong> variation directly from the Slider block.</li>
<li>Use WordPress query controls to choose post type, order, and posts per page.</li>
<li>Customize the post template with core blocks like featured image, title, excerpt, date, and read more.</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.

Nagesh Pai

<p>BlaBlaBlocks Formats lets you enhance your Gutenberg editor with <strong>interactive rich text formats</strong> like tooltips, animated highlights/markers directly inside WordPress.<br />
No coding needed. Just select your text, choose a format, and instantly make your content more engaging.</p>
<p>With BlaBlaBlocks Formats, you can add animated markers, interactive tooltips that improve readability, emphasize key information, and bring motion to your writing.</p>
<h3>Key Features</h3>
<ul>
<li><strong>Interactive text formats</strong> – Add <strong>InfoTips</strong>, <strong>markers</strong>, and <strong>highlights</strong> directly from the block toolbar.</li>
<li><strong>Live customization</strong> – Change color, animation, and behavior in real time.</li>
<li><strong>Lightweight & optimized</strong> – Assets load only when formats are used.</li>
<li><strong>Native Gutenberg integration</strong> – Seamlessly fits the WordPress Block Editor.</li>
</ul>
<h3>Why Choose BlaBlaBlocks Formats?</h3>
<p>Because plain text doesn’t always tell the full story!<br />
Highlight key phrases, provide helpful InfoTips, or animate your words all within the familiar block editor UI.</p>
<ul>
<li>No shortcodes or custom HTML needed.  </li>
<li>100% visual control inside the editor.  </li>
<li>Works with all themes and blocks.</li>
</ul>
<h3>How It Works</h3>
<ol>
<li>Select any text in the Gutenberg editor.</li>
<li>Choose a format: Highlight, or InfoTip.</li>
<li>Adjust style and behavior using the sidebar options.</li>
<li>See the preview instantly.</li>
</ol>
<p>Formats are rendered on both editor and frontend views with minimal code overhead.</p>
<h3>Use Cases</h3>
<ul>
<li>Add <strong>InfoTips</strong> to glossary terms or product details.  </li>
<li>Highlight <strong>important phrases</strong> in tutorials or documentation.  </li>
<li>Create <strong>animated text markers</strong> for blog emphasis.  </li>
<li>Design <strong>interactive learning content</strong> in WordPress.</li>
</ul>
<h3>Available Formats</h3>
<h4>1. Marker</h4>
<p>Underline or highlight text segments with customizable color and animation.</p>
<h4>2. InfoTip</h4>
<p>Attach informative tooltips to any text selection perfect for definitions, links, or extra context.</p>
<h3>Customization Options</h3>
<ul>
<li>Marker color & animation style  </li>
<li>Tooltip position, size, and behavior  </li>
<li>Animation speed & easing type  </li>
<li>Backend-only or frontend-visible options  </li>
<li>Per-format settings saved automatically</li>
</ul>
<h3>Performance & Optimization</h3>
<ul>
<li>BlaBlaBlocks Formats loads assets only when necessary, reducing frontend bloat.  </li>
<li>No React, Redux, or large JS libraries </li>
<li>Powered by the web component, not loaded on the public site unless formats are active.</li>
</ul>
<h3>Open Source and Free</h3>
<p>The BlaBlaBlocks Formats is open source. Not only is it free to use, but you are also welcome to collaborate and contribute to its development.</p>
<ul>
<li>
<p><strong>Source Code:</strong><br />
<a href="https://github.com/lubusIN/blablablocks-formats" rel="nofollow ugc">https://github.com/lubusIN/blablablocks-formats</a></p>
</li>
<li>
<p><strong>Report Issues:</strong><br />
<a href="https://github.com/lubusIN/blablablocks-formats/issues" rel="nofollow ugc">https://github.com/lubusIN/blablablocks-formats/issues</a></p>
</li>
<li>
<p><strong>Documentation:</strong><br />
<a href="https://github.com/lubusIN/blablablocks-formats/wiki" rel="nofollow ugc">https://github.com/lubusIN/blablablocks-formats/wiki</a></p>
</li>
</ul>


Rich Text Formats – Animated Highlight, Marker, Tooltip


BlaBlaBlocks Formats is like a party for your text! This nifty plugin lets you jazz up your WordPress content with interactive tooltips and eye-catching animated highlights—no coding skills required. Just highlight, click, and boom—instant personality for your words.



What's really cool is how effortlessly it adds that extra zing to your content. Want to make readers hover for a surprise? Add a tooltip. Need to draw attention to something important? Throw in an animated highlight. It's as easy as making text bold, but way more fun.


Add Some Pizzazz to Your WordPress Content

Add tooltips, highlights & interactivity to text in the Gutenberg editor. Enhance readability with rich text formats.

Slider and Carousel Block – Responsive, Accessible vs Rich Text Formats – Animated Highlight, Marker, Tooltip