mindspun

mattlaue

<p>Mindspun Responsive Blocks empowers users to create fully-responsive layouts using lightweight blocks.<br />
It consists of easy-to-use blocks like container, image, heading, paragraph, tab, and button block that allows users to specify distinct styling for desktop, tablet, and mobile views.</p>
<h4>Blocks Included</h4>
<ul>
<li>Heading – Create headings in a range of sizes with precise margins, padding and text appearance including font styles, colors, and alignment options.</li>
<li>Paragraph – Create body text match your design preferences with font sizes, various appearance options and one-click letter case styles.</li>
<li>Buttons – Create and style buttons for any screen size with primary, outline and link button types.   You can even customize the hover state.</li>
<li>Image – Show different images and/or sizes for different screens.</li>
<li>Grid – Easily create responsive layouts using a 12-point grid system.</li>
<li>Container – Advanced block allowing the user to crete any flex-based layout they choose.</li>
<li>Link Group – Turns any collection of blocks into a link.</li>
<li>Tabs – Structure and present information in a tabular format.   Highly customizable to create any desired tabbed layout.</li>
<li>Show/Hide – Conditionally show inner blocks based on event.   Select from a slide or flip transition styles.</li>
</ul>
<h4>Key Features</h4>
<ul>
<li>Easy-to-use configuration options that are separately applied to desktop, tablet and mobile.</li>
<li>Works like a responsive version of core blocks making them quick to learn.</li>
<li>Lightweight, modern design to creating any layout without the bloat of a page-builder.</li>
<li>All blocks are <a href="https://developer.wordpress.org/block-editor/getting-started/glossary/#static-block" rel="nofollow ugc">static blocks</a> to ensure optimal performance.</li>
<li>Allows optional per-block custom CSS with media queries automatically applied for advanced use cases.</li>
</ul>
<h4>Source files</h4>
<p><a href="https://github.com/getmindspun/wordpress-responsive-blocks" rel="nofollow ugc">GitHub</a></p>
<h4>Support</h4>
<p>For any assistance or inquiries, contact us at support@mindspun.com or visit our <a href="https://m.facebook.com/groups/mindspun/" rel="nofollow ugc">Facebook Community Group</a>.<br />
Issue may be submitted via <a href="https://github.com/getmindspun/wordpress-responsive-blocks/issues" rel="nofollow ugc">GitHub</a></p>


Mindspun Responsive Blocks

Ciprian Popescu

<p>Metro Tabs adds block-editor (Gutenberg) blocks for building tabbed content. You add a <strong>Metro Tabs: Tab Group</strong> block, then add one or more <strong>Metro Tabs: Tab Item</strong> blocks inside it. Each tab has a heading (the label visitors click) and a content area where you can add any blocks—paragraphs, images, lists, etc. On the front end, visitors see a simple tab bar and panes; clicking a tab switches the visible content without reloading the page.</p>
<h4>Features</h4>
<ul>
<li><strong>Tab Group block</strong> – Container for one set of tabs. You can use multiple Tab Group blocks on the same page for different tab sets.</li>
<li><strong>Tab Item block</strong> – A single tab: editable heading and a content area that supports any blocks (paragraphs, headings, images, etc.).</li>
<li><strong>No JavaScript libraries</strong> – Uses vanilla JavaScript only; no jQuery or jQuery UI.</li>
<li><strong>Block API version 3</strong> – Compatible with the current block editor (WordPress 6.3+ iframe editor).</li>
<li><strong>Lightweight styling</strong> – Discrete front-end styles (underline-style active tab); you can override with your theme or custom CSS.</li>
</ul>
<h4>How to use</h4>
<ol>
<li>In the block editor, add a <strong>Metro Tabs: Tab Group</strong> block (search for “Metro Tabs” or “Tab Group”).</li>
<li>Inside the group, you’ll see placeholder Tab Items (e.g. “Tab 1”, “Tab 2”). Click each <strong>Metro Tabs: Tab Item</strong> block and:
<ul>
<li>Edit the <strong>tab heading</strong> (the text shown on the tab).</li>
<li>Add any blocks in the <strong>tab content</strong> area (paragraphs, images, etc.).</li>
</ul>
</li>
<li>Add or remove Tab Item blocks as needed. You can add more Tab Groups elsewhere on the page for separate tab sets.</li>
<li>Publish or update. On the front end, the tab bar and panes are built automatically; clicking a tab switches the visible pane.</li>
</ol>
<p>No settings or configuration are required. The plugin enqueues its script and styles on the front end when the page contains tab blocks.</p>
<h4>Compatibility</h4>
<ul>
<li>Requires WordPress 6.0 or higher (block editor).</li>
<li>Requires PHP 8.0 or higher.</li>
</ul>


Metro Tabs – Responsive Tabs Block

Tab blocks: multiple groups per page, any blocks in each tab. No jQuery, no dependencies.

Mindspun Responsive Blocks vs Metro Tabs – Responsive Tabs Block