Tabs Block – Responsive Gutenberg Tabs for Block Editor
Build Accessible, Responsive Tabs in the Gutenberg Block Editor 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. 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. Why Choose BlaBlaBlocks Tabs Block? The 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. Key Highlights Accessible Tabs: WCAG-compliant markup, ARIA roles, and keyboard navigation support. Zero Dependencies: No jQuery or heavy JS frameworks powered by the Interactivity API. Responsive by Default: Tabs automatically stack or scroll on smaller screens. Horizontal & Vertical Layouts: Switch between tab orientations with one click. Ready-to-Use Templates: Choose from prebuilt designs to jump-start your layout. Seamless Block Editor Integration: Looks, feels, and behaves like a native WordPress block. Key Features 1. Fully Accessible Accessibility isn’t optional — it’s built in. Tabs Block follows WCAG 2.1 guidelines and adds: ARIA attributes for screen readers. Tab focus management for keyboard users. Semantic markup that works with assistive technologies. 2. Responsive by Design No need for custom CSS or media queries. Tabs automatically adapt their layout across screen sizes: On desktop: clean horizontal tab navigation. On mobile: collapsible stacked layout or swipe-enabled scrolling. 3. Horizontal & Vertical Tabs 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. 4. Powered by the Interactivity API Unlike most tab plugins that rely on JavaScript frameworks, BlaBlaBlocks Tabs Block uses WordPress’s native Interactivity API. That means: Faster loading and rendering. Better Core Web Vitals scores. Seamless state management between editor and frontend. 5. Ready-to-Use Templates Save time with built-in templates. Choose from multiple tab styles (minimal, boxed, underlined, colored) and insert them with one click. 6. Works Everywhere Tabs Block is fully compatible with: Block Themes (Full Site Editing) Classic Themes using the Block Editor Reusable Blocks and Block Patterns Core blocks like Columns, Groups, and Cover How to Use the Tabs Block Step 1: Add the Tabs Block In the Block Editor, click the “+” icon to add a new block. Search for “Tabs Block”. Select it to insert into your post or page. Step 2: Choose a Layout Open the right-hand sidebar and pick from horizontal or vertical layouts. You can switch anytime. Step 3: Add Tabs and Content Add, rename, or delete tabs using the block toolbar. Each tab panel supports any block — text, images, videos, forms, etc. Step 4: Customize the Look Use the sidebar controls to adjust: Colors Typography Borders Padding and spacing Step 5: Preview Responsiveness Use the Editor’s device preview to test how your tabs behave on mobile, tablet, and desktop. Checkout out documentation for more details Customization Options Tabs Block integrates seamlessly with WordPress’s design tools, so you can: Change background and text colors using global styles. Adjust spacing, borders, and radii. Apply block style variations for a unified site look. For developers, advanced customization can be done via CSS custom properties or theme JSON overrides. Common Use Cases Product Features Tabs: Highlight product details, specifications, and reviews. Documentation Pages: Organize setup instructions and API references. FAQs: Group related questions under topic-based tabs. Pricing Comparisons: Present plan details side by side. Portfolio Showcases: Display projects or case studies by category. Integration and Compatibility Tabs Block integrates smoothly with: Core WordPress Blocks: Columns, Groups, Cover, Image, Paragraph, Buttons, etc. Full Site Editing (FSE): Works in templates and template parts. Reusable Blocks: Create once, reuse anywhere. Translation Plugins: WPML, Polylang, Loco Translate. Caching & Optimization Plugins: No conflicts with WP Rocket, LiteSpeed Cache, or Autoptimize. Troubleshooting Tabs Not Switching? Check for JavaScript errors in your browser console. Ensure WordPress 6.5 or higher is installed (Interactivity API required). Styles Not Applying? Your theme’s CSS may override tab styles. Try adding a higher specificity rule or using the block’s built-in design controls. Open Source and Free BlaBlaBlocks Tabs Block is open source under the MIT License. You can freely use, modify, and contribute to its development. Source Code: https://github.com/lubusIN/blablablocks-tabs-block Report Issues: https://github.com/lubusIN/blablablocks-tabs-block/issues Documentation: https://github.com/lubusIN/blablablocks-tabs-block/wiki
Top keywords
- block25×3.40%
- tabs24×3.26%
- tabs block12×1.63%
- wordpress9×1.22%
- editor7×0.95%
- tab7×0.95%
- api6×0.82%
- layout6×0.82%
- add5×0.68%
- block editor5×0.68%
- documentation5×0.68%
- horizontal5×0.68%
OpenStation
wp-admin forgets. OpenStation doesn’t. You know the moment. You’re deep in a post and you need one image from the Media Library. You click over, find it, click back, and everything you had going is gone. Your scroll position, your half-typed thought, the three other things you had queued up in your head. That’s not a bug you hit. That’s the design. wp-admin shows you one screen at a time, and every navigation throws the last one away. It has worked this way since 2003, like a fridge that empties itself every time you close the door. WordPress has rebuilt almost everything else. The editor, the site editor, the patterns, the styles. The admin’s one-screen-at-a-time model is the layer nobody touched. OpenStation touches it. Install it and admin screens become draggable, resizable windows. Edit a post while the Media Library sits open next to it. Drag an image from one window straight into the other. Keep comments open in the corner. Reload the browser and your window layout — open pages, positions, sizes, and window states — comes back where you left it. OpenStation itself is free, GPL, and opt-in per user. One click in the admin bar turns it on for you. One click turns it off. Nobody else on your site sees anything change, and deactivating the plugin restores the classic admin exactly. No Core patches and no lock-in. Optional AI providers may charge for their service. Built and maintained by Automattic, the company behind WordPress.com, Jetpack, WooCommerce, and Tumblr. Work on more than one thing at once Admin pages open as windows, including pages added by most other plugins. Drag them, resize them, snap them, tile them, minimize them to a taskbar. The admin menu becomes a dock of icons. Two editors open at once is one click away. Never lose your place Moving between open windows leaves each page in place. Across reloads, OpenStation remembers your open pages, window positions, sizes and states, virtual desktops, and focus. Closing a window with unsaved changes warns you first. A desk you can actually put things on Drop posts, media, and links right onto the wallpaper. Sort them into folders. Trash them to a Trash that actually holds things. The stuff you’re working on this week can just sit out where you can see it. One desktop per job Virtual desktops, the way your operating system does them. One for writing. One for the store. One for comment triage. One for that redesign you keep poking at. Switch between them without closing anything. Find anything with Cmd+K The full WordPress command palette, plus slash commands from your plugins, all under one keystroke. Turn on the optional AI assistant and you can ask it things like “which post had the comment asking for the recipe?” and it searches your own content to answer. (Requires an AI provider configured in Settings → Connectors on WordPress 7.0+. Details under “External services” below.) See how your site fits together The Corkboard is an interactive, zoomable map of how your posts, pages, and products link to each other. Pan around it. Find the orphans. Find the hubs. Running a store? Orders, Products, Coupons, and Customers become browsable folders with stock and sale ribbons. Open a customer to see their lifetime spend and what they buy most. Follow a product to its buyers, or a coupon to who redeemed it. Make it yours Wallpapers, from color presets to animated scenes to your own photo. Live widgets pinned to the desktop: drafts, stats, recent comments, a focus timer. Uploadable desktop themes, including a built-in Legacy theme that brings the old WordPress blue back in one click. And Mio, a soft-body desk companion that drifts across your wallpaper and gets bumped around by your windows. Off by default. You’ll turn it on. For developers Extend OpenStation through documented PHP and JavaScript APIs. Register windows, icons, wallpapers, widgets, commands, and settings tabs through stable openstation_register_* PHP APIs and a typed JavaScript API; customize dock items through documented hooks; add AI tools with the WordPress Abilities API. Copy-paste examples live in the developer docs on GitHub. External services No external service is required for OpenStation’s desktop interface. The optional AI Assistant and two user-initiated enrichment features make the external requests described below. AI Assistant The optional AI Assistant sends data to the AI provider you configure in WordPress’s Settings → Connectors (for example OpenAI, Anthropic, or Google). Generation is routed through WordPress 7.0’s built-in AI Client, which supplies the credentials stored in Connectors. The plugin never handles an API key itself. With no provider configured in Connectors, no external AI requests are made. When the AI Assistant is enabled and a user invokes it (via Cmd+K or the slash-command palette): What is sent: the user’s prompt, the conversation history for the active session, and tool-call metadata. The plugin’s built-in tools (search_posts, search_pages, search_comments) run WordPress’s native keyword search and may include excerpts of the matching posts/pages/comments in tool results, which are then sent back to the provider as part of the agentic loop. When it is sent: on user-initiated AI requests, and (if an administrator enables “Score new comments with AI”) on comment-save hooks for spam analysis. Posts, pages, and taxonomy terms are not sent automatically. Why it is sent: to obtain model completions and tool-call decisions that drive the AI Assistant. Who provides the service: whichever provider you configured in Settings → Connectors. Which provider (and endpoint) receives the data depends entirely on that configuration. Review the chosen provider’s own terms and privacy policy (e.g. OpenAI, Anthropic, or Google). URL shortcut favicons When an authorized user creates a desktop shortcut to an external URL, OpenStation asks that URL for its page HTML and favicon so the shortcut can display the site’s icon. The request is made from your WordPress server and sends the requested URL, the server’s IP address, an OpenStation user-agent string, and normal HTTP request metadata to the operator of that site. This happens only when a user creates the shortcut. The destination site’s terms and privacy policy apply. WordPress.org plugin information When an authorized user opens or refreshes parts of OpenStation’s Plugins window, OpenStation may request public plugin details, update metadata, and review excerpts from WordPress.org. These requests send plugin slugs, the site’s locale, and normal HTTP request metadata to WordPress.org. This information is used only to display and manage plugins. Review the WordPress.org Privacy Policy. OpenStation’s OAuth relay does not contact a service by itself. Third-party plugins that configure the relay may contact their own providers and are responsible for disclosing those services. Credits OpenStation is brought to you by Automattic. The plugin is open source under GPLv2-or-later; contributions are welcome on GitHub. Third-party libraries The plugin bundles the following third-party JavaScript library, loaded on demand only when a feature that needs it is in use: PixiJS (MIT License) — used by the Corkboard window, built-in canvas wallpapers (e.g. the animated WordPress logo), the Mio desk companion, and the Inkfall typing game. PixiJS is loaded from the plugin’s own assets/vendor/ directory; no CDN requests are made. Data files The Inkfall game’s word list (assets/games/inkfall/words.txt) is generated from the following sources (attribution also ships in the file’s header): FrequencyWords by Hermit Dave (CC-BY-SA 4.0) — English word-frequency ranking derived from the OpenSubtitles corpus. english-words by dwyl (Unlicense) — used as a validity filter. LDNOOBW English list (CC-BY 4.0) — used as an exclusion filter.