=== Bloqra - Gutenberg Blocks & Page Builder for Block Editor === Contributors: beautifulplugins, kawsarahmedr Tags: blocks, gutenberg blocks, block editor, page builder, wordpress blocks Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 7.4 Stable tag: 1.5.0 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Advanced Gutenberg blocks for creating beautiful, modern and eye-catching WordPress pages in the block editor. == Description == [**Bloqra - Gutenberg Blocks & Page Builder for Block Editor**](https://beautifulplugins.com/plugins/bloqra-pro/) is a lightweight, performance-focused WordPress blocks plugin for creators, site owners, bloggers, agencies, and developers who want to build polished pages directly inside the Gutenberg block editor. It adds **38 free blocks** — practical, responsive, and easy to customize — that improve content structure, navigation, and the overall reading experience without adding unnecessary bloat. The Gutenberg block plugin is designed for modern WordPress websites that need clean design controls, reliable performance, and a smooth editing workflow. Whether you are creating landing pages, blog posts, documentation, product content, or business pages, Bloqra gives you flexible Gutenberg blocks that fit naturally into your existing theme. [Bloqra Pro](https://beautifulplugins.com/plugins/bloqra-pro/) adds 21 more blocks for dynamic content, social feeds, and conversion — post grids, custom fields, Instagram and YouTube feeds, Google Reviews, popups, charts, maps, and more. [**🚀 Upgrade to Pro**](https://beautifulplugins.com/plugins/bloqra-pro/) | [**📄 Plugin Documentation**](https://beautifulplugins.com/docs/bloqra/) | [**💻 Support**](https://beautifulplugins.com/support/) === ✨ Free Blocks (38) === - **Accordion** — Organize FAQs, feature details, service information, and long-form content into clean collapsible sections. - **Advanced Container** — Build full sections with everything the core Group block can't do: an image or video background with focal point, fixed and repeated modes, duotone filters, a color or gradient overlay with adjustable opacity, nine-position content placement, and top/bottom shape dividers — plus all the native Group controls like layout, min-height, and sticky position. - **Advanced Table** — A data table visitors can sort and search, and that stacks into labeled cards on small screens — everything the core Table block leaves out, edited exactly like the core Table. Sorting understands numbers ("$4.90", "50,000"), the search field filters rows live, and there are Default, Stripes, Bordered, and Minimal styles. - **Alert** — An info, success, warning, or error notice with a matching accent color and icon, optional title, and a dismiss button that can remember its state so returning visitors don't see the alert again. - **Comparison Table** — Compare plans, products, or services feature by feature. Edit it exactly like the core Table block, add check, cross, and dash marks per cell, highlight a recommended column with a badge, and keep the header row visible while scrolling long tables with the sticky header — plus a sticky first column for phones and Default, Stripes, Bordered, and Minimal styles. - **Content Switcher** — Let visitors toggle between two or more content sets — perfect for monthly / yearly / lifetime pricing with "Save 20%" badges, feature comparisons, or before/after content. - **Countdown Timer** — Count down to any date and time in your site's timezone — sales, launches, events, deadlines. Choose which units to show with custom labels, pick what happens when time runs out (keep zeros, hide, or show a message), and choose from five looks: Default, Colons, Boxed, Outlined, or Circle. - **Coupon Code** — A promo code with one-click copy and an optional click-to-reveal cover — revealing also copies the code. Add a description and expiry text, and pick from Dashed, Solid, Ticket, and Gradient styles. Pairs perfectly with the Countdown Timer for limited offers. - **Device Mockup** — Show a screenshot — or any content — inside a phone, tablet, laptop, or browser frame. The frames are pure CSS with no images to load, support portrait and landscape, and can be tinted any color. - **FAQ** — Questions and answers with FAQPage structured data for rich search results. Built on the native details element so it works with JavaScript disabled, with one-open-at-a-time and open-by-default options, chevron or plus toggle icons, and Default, Boxed, Separated, and Minimal styles. - **Filterable Gallery** — A portfolio-style gallery with category filter buttons. Assign categories per image, choose grid or masonry layout, show counts, style the filters as pills, underline, or solid buttons, paginate with a load-more button or infinite scroll, and open images in the lightbox with prev/next navigation. - **Flip Box** — Create a card that flips on hover to reveal more content on the back. Add an image, title, content, and button to both sides, and choose from three flip directions: horizontal, vertical, or diagonal. - **Icon** — Drop a single icon from a library of 1,900+ Lucide icons anywhere on the page, with controls for size, color, background, border, shadow, animation, link, and accessibility label. - **Icon Box** — A compact icon + heading + text card for feature lists, service grids, and USP rows. Icon badge shapes, top/left/right/inline positions, an optional whole-card link, and lift, grow, glow, and border hover effects. - **Icon List** — Build feature lists, checklists, and benefit bullets with an icon next to every item. Choose vertical, horizontal, or grid layouts, set a default icon for the list, override per item, add links, and style icons and text independently. - **Image Box** — An image-led card with heading, text, and a call-to-action — services, features, portfolio teasers. Aspect-ratio control, optional hover zoom, CTA as an arrow link or button, a whole-card click option, and an Overlay style that stacks content over the image. - **Image Hotspots** — Pin interactive points onto an image — product features, maps, anatomy charts. Drag markers into position in the editor; each point shows a tooltip on hover, tap, or keyboard focus with no JavaScript required, with dot or auto-numbered markers, optional icons, and a pulse animation. - **Info Box** — Highlight important information, tips, or notes with a visually distinct box that can include an icon/image, title, content, and button. Also, ideal for feature lists or service highlights. - **Interactive Card** — An image card that reveals extra content on hover or tap — portfolios, services, category tiles. Slide-up, fade, or zoom effects, a color or gradient overlay, and keyboard- and touch-friendly reveals. - **Lottie Animation** — Play a Lottie JSON animation with a bundled lightweight renderer — no CDN. Trigger on autoplay, when visible, on hover, on click, or scrub it with scroll position; nothing loads until the block nears the viewport. - **Masonry Gallery** — Display images in a Pinterest-style masonry layout that keeps every photo at its natural aspect ratio — no cropping, no JavaScript. Manage images exactly like the core Gallery block, with columns, resolution, link destination, lightbox, and gap controls. - **Number Counter** — Animate a number counting up as it scrolls into view — stats, milestones, achievements. Set start and end values, decimals, thousands separator, prefix and suffix, an editable label, and animation speed, with Default, Boxed, and Outlined styles. - **Pricing Table** — Present a pricing plan as a polished card with a badge, plan name, price with sale price and billing note, an icon feature list, and a call-to-action button. Combine cards in Columns to build any pricing layout. - **Progress Bar** — A horizontal bar with a label and value that fills when it scrolls into view — skills, goals, funding progress. Show the value outside, inside the bar, or in a floating bubble that rides the fill tip, use a color or gradient fill, and pick from Default, Stripes, Outlined, and Slim styles. - **QR Code** — Generate a QR code right in the editor — no external service, no front-end JavaScript. Encode a URL, text, email, phone, SMS, Wi-Fi network, or vCard contact; the code is baked in as SVG so it works in RSS, print, and with JavaScript off. - **Scroll Indicator** — Add a visual reading progress indicator that helps visitors understand where they are on long pages or posts. - **Shape Divider** — Create smooth visual transitions between sections with decorative SVG shapes — wave, layered waves, curve, tilt, triangle, arrow, split, book, zigzag, and mountains — with height, stretch, and flip controls. - **Slider** — Slide anything. Every slide is a blank canvas for any blocks — images, headings, buttons, columns, whole hero sections — with arrows, dots, optional autoplay, and native touch swiping that keeps working even without JavaScript. Show one to four slides per view, scroll by page or single slide, loop endlessly and seamlessly — the first slides follow the last one, never scrolling back — peek the edge of the next slide, place the arrows over the slides or below them, pick dot or bar pagination, choose whether autoplay pauses on hover, and size and color every control. You can even select existing blocks and transform them straight into a slider. - **Social Share** — Share-this-page buttons — X, Facebook, LinkedIn, Pinterest, WhatsApp, Telegram, Reddit, Email, copy link, and the device's native share sheet. Links are built from the page being viewed, so they are always correct — even in query loops. Official brand colors or your own, three sizes, and circle, rounded, square, or bare shapes. - **Star Rating** — Show a rating as stars for reviews, testimonials, and product highlights. Any fraction displays exactly (4.7 of 5), the star can be any icon from the library — hearts, thumbs, circles — and you can add the value as text, an editable label, custom colors, size, and spacing. - **Steps** — Walk visitors through any process — tutorials, recipes, onboarding, how-tos. Steps number themselves automatically (or show an icon instead), connect with a solid, dashed, or dotted line, flow vertically or horizontally, and can output HowTo structured data for search engines. Pick from Default, Outlined, Boxed, and Minimal styles. - **Table of Contents** — Automatically generate a table of contents for your page or post based on headings. Choose from Default, Boxed, Outlined, and Minimal styles, and customize the title, colors, spacing, and typography. - **Tabs** — Organize content into switchable tabbed sections with horizontal or vertical tab lists, optional icons per tab, Line and Boxed styles, and an automatic accordion layout on mobile. - **Team Member** — A person card with photo, name, role, short bio, and social links — team pages, about sections, speaker lists. Circle, rounded, or square photo shapes, and the social links are the native WordPress Social Icons block nested inside. - **Testimonial** — Share customer quotes with an optional star rating, avatar, name, and role. Choose the Default, Centered, or Bubble style, tune the quote-mark and star colors, and use it anywhere on its own — or as a slide inside the Testimonial Carousel. - **Testimonial Carousel** — Put your testimonials in a swipeable slider with arrows, dots, and optional autoplay that politely pauses on hover and respects reduced-motion preferences. Show one to four slides at a time with responsive collapsing — and it keeps working even without JavaScript. - **Timeline** — Tell a story in chronological steps — company history, project milestones, roadmaps, résumés. Place the line left, right, or center with alternating entries, add a date label and an optional marker icon per entry, fill entries with any blocks, and pick from Default, Outlined, Boxed, and Minimal styles. - **Video Popup** — A thumbnail with a play button that opens the video in a lightbox — YouTube, Vimeo, or self-hosted. The video only loads when played, YouTube uses the privacy-enhanced domain, and without JavaScript the thumbnail is a plain link to the video — never a dead button. === 💎 Pro Blocks === [Bloqra Pro](https://beautifulplugins.com/plugins/bloqra-pro/) adds 21 blocks for dynamic content, social feeds, and conversion: - **Post Grid** — Responsive post grid with a taxonomy filter bar, numbered pagination or AJAX load-more, and full control over what each post card shows. — **Pro** - **Post Carousel** — Posts in a swipeable carousel — slides per view, autoplay, infinite loop, arrows and dots. — **Pro** - **Post Masonry** — Pinterest-style masonry post listing with natural image heights in pure CSS columns. — **Pro** - **Post Slider** — Full-width featured-post hero slider — featured-image backgrounds, overlay, title, and CTA, with autoplay and loop. — **Pro** - **Post Timeline** — Posts on a vertical timeline — line left, right, or center-alternating, with date markers. — **Pro** - **Related Posts** — Automatically related posts by shared categories and tags, with a recent-posts fallback — grid or list layout. — **Pro** - **Dynamic Content** — Output a custom field — post meta, ACF, Meta Box, or Pods — as text, image, or link, with formatting and a fallback. — **Pro** - **Repeater Field** — Loop the rows of an ACF or Meta Box repeater into a list or grid, mapping sub-fields to image, heading, text, and link roles. — **Pro** - **Instagram Feed** — Latest Instagram posts in a grid or carousel, cached server-side so your pages stay fast. — **Pro** - **Facebook Feed** — Latest posts from a Facebook Page in a grid or list, cached server-side. — **Pro** - **YouTube Feed** — Latest videos from a YouTube channel or playlist in a grid — played in a lightbox, inline, or on YouTube. — **Pro** - **X / Twitter Feed** — Embed an X (Twitter) profile or list timeline with theme, height, and chrome styling — loads lazily near the viewport, no API key needed. — **Pro** - **Google Reviews** — Google Business reviews with stars and an overall-rating header — grid, list, or carousel, cached server-side. — **Pro** - **Popup / Modal** — Build a popup from any blocks and open it on click, on a timer, at a scroll depth, or on exit intent. — **Pro** - **Announcement Bar** — Site-wide announcement bar with optional countdown and CTA, start/end scheduling, and a dismiss button visitors are remembered for. — **Pro** - **Sticky CTA Button** — Floating action button that stays visible while scrolling — WhatsApp, call, email, scroll-to-top, or any link. — **Pro** - **Cookie Notice** — GDPR-style consent banner with accept/decline, a remembered choice, and a consent event other scripts can listen for. — **Pro** - **Chart** — One block, six chart types — bar, line, area, pie, donut, and radar — with a dataset editor, legend, and axis options, rendered with bundled Chart.js. — **Pro** - **Advanced Map** — OpenStreetMap (no API key) or Google Maps with multiple markers, popups, map styles, and an in-editor address search. — **Pro** - **Video Playlist** — Multi-video player with a playlist — YouTube, Vimeo, and video files, auto-advance, loop, speed control, and an optional sticky mini-player. — **Pro** - **Image Comparison** — Show a before-and-after image comparison with a draggable slider. Add any two images, choose a vertical or horizontal slider, and customize the handle and labels. — **Pro** Bloqra Pro also includes licensing with automatic updates, a settings page for social feed and map API credentials, and server-side feed caching with an adjustable duration. — **Pro** === 🚀 Why Choose Bloqra? === - **Built for the Gutenberg block editor** — Create and customize layouts directly inside the native WordPress editing experience, with the same color, typography, spacing, and border panels core blocks use. - **Lightweight and performance-focused** — No jQuery anywhere; each block's CSS and JavaScript load only on pages that use it, and many blocks ship zero front-end JavaScript at all. - **Works without JavaScript** — Sliders scroll natively on touch, FAQs open on the native details element, galleries and tables render complete. JavaScript enhances; it never gate-keeps. - **SEO structured data built in** — The FAQ block outputs FAQPage JSON-LD and the Steps block outputs HowTo JSON-LD, generated server-side so they always match your content. - **Mirrors core blocks** — The Comparison Table edits like the core Table, the Masonry Gallery like the core Gallery, with two-way transforms between them — and you can transform any multi-selection straight into a Slider. - **Responsive by default** — Blocks are designed to work across desktop, tablet, and mobile screens, with sensible automatic behavior like tabs collapsing into an accordion. - **Accessible by default** — ARIA patterns, keyboard navigation, focus-reveal for hover effects, and reduced-motion fallbacks on every block. - **Easy customization** — Block styles for one-click looks, plus native controls for colors, spacing, and typography that pick up your theme's presets automatically. - **Theme friendly** — Bloqra works with modern WordPress themes and follows WordPress coding standards. - **Translation ready** — Prepared for multilingual WordPress websites, with RTL support. - **Developer friendly** — Standard block APIs, schema filters, and clean markup that keeps rendering even if the plugin is deactivated. Choosing Bloqra is a good decision you can make for your website. Download Bloqra today and start enhancing your website design and look with powerful Gutenberg blocks that are built for performance and ease of use. == Get Started Today: == Install Bloqra from the WordPress plugin repository and activate it on your website. Once activated, you can directly use the blocks in the WordPress block editor to create stunning layouts and designs. Customize the blocks to match your website's style and start building your dream website today! See the [plugin documentation](https://beautifulplugins.com/docs/bloqra/) for a guided tour of every block. = SEO and User Experience = Bloqra helps you create cleaner content layouts that are easier for visitors to read and navigate. The FAQ and Steps blocks output FAQPage and HowTo structured data that make your pages eligible for rich results, the Table of Contents and Scroll Indicator improve navigation and engagement on long-form content, and blocks such as Accordion improve content structure for FAQ sections, service pages, documentation, and resource pages. A better reading experience can support stronger user signals and more useful WordPress content. == Installation == 1. Upload the plugin files to the `/wp-content/plugins/bloqra` directory, or install the plugin through the WordPress plugins screen. 2. Activate Bloqra from the Plugins screen in WordPress. 3. Open any post or page in the WordPress block editor. 4. Click the block inserter and search for Bloqra blocks. 5. Add a block, customize the settings, and publish your content. == Frequently Asked Questions == = What is Bloqra? = Bloqra is a WordPress Gutenberg blocks plugin that adds 38 free lightweight, responsive, and customizable blocks to the block editor — 59 blocks with Bloqra Pro. = Do I need coding knowledge to use Bloqra? = No. Bloqra is built for the WordPress block editor, so you can add and customize blocks visually without writing code. = Will Bloqra slow down my website? = No. Bloqra has no jQuery, loads each block's assets only on pages that use the block, and many blocks ship no front-end JavaScript at all — so your website stays fast. = Does Bloqra work with my WordPress theme? = Bloqra is designed to work with modern WordPress themes and follows WordPress development standards for better compatibility. Blocks use the native block-editor controls, so your theme's colors, font sizes, and spacing presets appear automatically. = Is Bloqra responsive? = Yes. Bloqra blocks are responsive and work across desktop, tablet, and mobile devices — with smart behavior like tabs becoming an accordion and tables stacking into cards on small screens. = Can I use Bloqra for FAQ sections? = Yes. The FAQ block outputs FAQPage structured data for rich search results and works without JavaScript, and the Accordion block covers general collapsible content like service details, product information, and documentation. = Does Bloqra add structured data for SEO? = Yes. The FAQ block outputs FAQPage JSON-LD and the Steps block can output HowTo JSON-LD — generated server-side so the schema always matches the visible content. = What is the difference between Bloqra and Bloqra Pro? = The free plugin includes all 38 design and content blocks. [Bloqra Pro](https://beautifulplugins.com/plugins/bloqra-pro/) adds 21 blocks for dynamic content and conversion — post grids and sliders, custom-field blocks, Instagram/Facebook/YouTube/X feeds, Google Reviews, popups, announcement bars, sticky CTAs, cookie notice, charts, maps, video playlists, and image comparison — plus licensing with automatic updates. = Do my pages break if I deactivate Bloqra? = No. Bloqra blocks save clean HTML into your posts, which continues to render as plain content if the plugin is deactivated. = Is Bloqra translation ready? = Yes. Bloqra is translation ready and can be used on multilingual WordPress websites, with RTL support. = Is Bloqra open source? = Yes. Bloqra is released under the GPLv2 or later license. == Screenshots == 1. Scroll Indicator block showing reading progress on a webpage. 2. Accordion block with expandable and collapsible content sections. == Changelog == = 1.5.0 (01 August 2026) = * New: Added new block "Advanced Table" for sortable, searchable data tables that stack into cards on small screens. * New: Added new block "Alert" for info, success, warning, and error notices with an optional remembered dismiss button. * New: Added new block "Coupon Code" for promo codes with one-click copy and an optional click-to-reveal cover. * New: Added new block "Device Mockup" for showing screenshots or any content inside pure-CSS phone, tablet, laptop, and browser frames. * New: Added new block "FAQ" for questions and answers with FAQPage structured data, built on the native details element. * New: Added new block "Icon Box" for compact icon + heading + text cards with badge shapes, positions, and hover effects. * New: Added new block "Image Box" for image-led cards with heading, text, and a call-to-action, including an Overlay style. * New: Added new block "Image Hotspots" for pinning interactive tooltip points onto an image with zero front-end JavaScript. * New: Added new block "Interactive Card" for image cards that reveal extra content on hover or tap. * New: Added new block "Lottie Animation" for playing Lottie JSON animations with autoplay, visibility, hover, click, and scroll-scrub triggers. * New: Added new block "Progress Bar" for animated skill/goal bars with outside, inside, or floating-bubble value display. * New: Added new block "QR Code" for generating QR codes in the editor — URL, text, email, phone, SMS, Wi-Fi, and vCard. * New: Added new block "Social Share" for share buttons across X, Facebook, LinkedIn, Pinterest, WhatsApp, Telegram, Reddit, Email, copy link, and the native share sheet. * New: Added new block "Team Member" for person cards with photo, name, role, bio, and native Social Icons. * New: Added new block "Video Popup" for thumbnails that open YouTube, Vimeo, or self-hosted video in a lightbox, loading the video only when played. * Fix: Resolved minor bugs and improved overall performance. = 1.4.0 (17 July 2026) = * New: Added new block "Comparison Table" for comparing plans, products, or services feature by feature with sticky header and first column options. * New: Added new block "Slider" for creating responsive sliders with any blocks as slides, touch swiping, and autoplay options. * New: Added new block "Star Rating" for displaying ratings with customizable icons, colors, and labels. * New: Added new block "Steps" for creating step-by-step guides, tutorials, or processes with automatic numbering and structured data support. * New: Added new block "Testimonial" for showcasing customer quotes with optional star ratings, avatars, and roles. * New: Added new block "Testimonial Carousel" for displaying testimonials in a swipeable slider with arrows, dots, and autoplay options. * Fix: Resolved minor bugs and improved overall performance. = 1.3.0 (11 July 2026) = * New: Added new block "Advanced Container" for building full sections with image/video backgrounds, overlays, shape dividers, and advanced layout options. * New: Added new block "Content Switcher" for toggling between multiple content sets, ideal for pricing plans, feature comparisons, or before/after content. * New: Added new block "Countdown Timer" for counting down to any date and time with customizable units, labels, and styles. * New: Added new block "Filterable Gallery" for creating portfolio-style galleries with category filters, grid/masonry layouts, and lightbox navigation. * New: Added new block "Flip Box" for creating interactive cards that flip on hover to reveal additional content with customizable directions and styles. * New: Added new block "Masonry Gallery" for displaying images in a Pinterest-style masonry layout with natural aspect ratios and lightbox support. * New: Added new block "Number Counter" for animating numbers counting up as they scroll into view, with customizable start/end values, labels, and styles. * New: Added new block "Pricing Table" for presenting pricing plans with badges, feature lists, and call-to-action buttons in a polished card layout. * New: Added new block "Shape Divider" for creating smooth visual transitions between sections with decorative SVG shapes and customizable height/stretch/flip options. * New: Added new block "Table of Contents" for automatically generating a table of contents based on headings with customizable styles and colors. * New: Added new block "Tabs" for organizing content into switchable tabbed sections with horizontal/vertical layouts, icons, and responsive accordion behavior. * New: Added new block "Timeline" for telling stories in chronological steps with customizable line positions, markers, and styles. * Fix: Resolved minor bugs and improved overall performance. = 1.2.1 (28 June 2026) = * New: Added new block "Info Box" for highlighting important information, tips, or notes with an icon/image, title, content, and button. * New: Added new block "Masonry Gallery" for Pinterest-style image galleries with natural aspect ratios. * New: Added new block "Filterable Gallery" with category filter buttons, grid/masonry layouts, lightbox navigation, and load-more or infinite-scroll pagination. * Fix: Resolved minor bugs and improved overall performance. = 1.2.0 (12 June 2026) = * New: Added new block "Icon List" for creating feature lists, checklists, and benefit bullets with icons. * New: Added new inner block "Icon List Item" for use inside the Icon List block. * Fix: Resolved minor bugs. * Compatibility: Updated compatibility with WordPress 7.0. = 1.1.0 (18 May 2026) = * New: Added new block "Icon" with supporting 1.9K+ svg icons. * Fix: Resolved minor bugs and improved overall performance. = 1.0.2 (6 May 2026) = * Enhance: Improved block settings and customization options. * Fix: Resolved minor bugs. = 1.0.1 (3 May 2026) = * Enhance: Enhanced Scroll Indicator block with tons of new customization options for colors, sizes, and styles. = 1.0.0 (10 April 2026) = * Initial release of the plugin. == License == Bloqra is distributed under the terms of the GNU General Public License v2 or later. You may use, modify, and distribute this software under the terms of the GPL license. See https://www.gnu.org/licenses/gpl-2.0.html for more details. == Upgrade Notice == = 1.5.0 = Added new blocks: Advanced Table, Alert, Coupon Code, Device Mockup, FAQ, Icon Box, Image Box, Image Hotspots, Interactive Card, Lottie Animation, Progress Bar, QR, Social Share, Team Member, Video Popup. Resolved minor bugs and improved overall performance.