f13dev

Each image within a post or page will become a clickable link with a popup lightbox. This does not use an off the shelf lightbox, instead a custom made 6KB jQuery lightbox helping to reduce overhead on your site without compormising features.
This lightbox is fully acessible via keyboard only input, meets and exceeds WCAG AA contrast requirements, includes keypress navigation (arrow keys to navigate between images and escape to close).
No configuration is required to enable the Lightbox once installed and activated on your WordPress site. Should you wish to exclude an image from the lightbox, simply add the class “no-lightbox” to the image.
<a href="https://f13.dev/wordpress-plugin-lightbox/" rel="nofollow ugc">Read more about F13 Lightbox</a>
[https://f13.dev/wp-content/uploads/2021/10/f13-lightbox-example.png Example of F13 Lightbox]

F13 Lightbox

Add a lightbox for any image within a post or page, includes accessibility features.

David Perez

Sacra Jáimez

Alex Brea

Matías Quero

manoloramos

Alejandro Castellón Martínez

A. Mulero

mit2sumit

Container Edge Alignment 
Add custom controls to GenerateBlocks Container blocks and native WordPress Group/Container blocks to remove padding from the left or right side, creating edge-to-edge layouts. This feature only appears for containers using GeneratePress global max-width settings, perfect for creating asymmetric layouts where content extends to one browser edge while maintaining proper spacing on the other side.
Carousel/Slider for GenerateBlocks Grid and Query Loop 
We have added options to Gutenberg blocks that enable you to create a carousel or slider using your preferred blocks. Supported blocks include GenerateBlocks Grid, GenerateBlocks Element, core/group, and the native WordPress Query Loop (core/query).
To start using the carousel, go to the grid block or Query Loop block and select the ‘Carousel’ or ‘Slider’ option in the ‘FrontBlocks Grid Options’ section.
Carousel/Slider attributes: 
– Autoplay: automatically changes the slides after a certain amount of time (in seconds). 
– Items to view: configure the number of items to display for different screen sizes: 
 * Desktop (>1200px): number of items to show on desktop screens. 
 * Laptop (992px-1199px): number of items to show on laptop screens. 
 * Tablet (768px-991px): number of items to show on tablet screens. 
 * Mobile (<768px): number of items to show on mobile devices. 
– Buttons: the type of buttons to display in the carousel/slider (bullets, arrows or none). 
– Button colour: colour of the buttons. 
– Button background colour: background colour of the buttons (can be transparent).
Carousel Pattern: 
We provide a ready-to-use Hero Carousel pattern using native WordPress Cover blocks. This pattern is automatically registered in the WordPress editor’s “Patterns” tab under the “FrontBlocks” category. Simply click the + button in the editor, go to Patterns, and search for “Hero Carousel” or browse the FrontBlocks category. The pattern creates full-width hero sliders with smooth transitions, perfect for landing pages and promotional content. It includes three customizable slides with gradients, colors, headings, text, and call-to-action buttons. See the documentation for complete implementation details and customization options.
Enhanced WordPress native gallery 
We have added options to the native WordPress gallery that allow you to create a different layout, such as grid or masonry, and also enable you to create a carousel with images that can be clicked on.
Animations for Blocks 
You can add animations to the blocks you want. To do this, go to the block settings and select the ‘FrontBlocks Animation Option’ section. There you will find a list of animations that you can apply to the block.
The animations are based on <a href="https://animate.style/" rel="nofollow ugc">Animate.css</a>: Attention seekers, Back entrances, Back exits, Bouncing entrances, Bouncing exits, Fading entrances, Fading exits, Flippers, Rotating entrances, Rotating exits, Specials, Zooming entrances, Zooming exits, and Sliding entrances.
Container Effects 
Apply glassmorphism effects to any block with customizable blur intensity. In the block settings, open the ‘Container Effects’ panel to enable the glass effect and adjust the blur level (0-50px) for a modern, frosted glass appearance. The effect includes a semi-transparent background, subtle border, and soft shadow, creating a beautiful layered design. Perfect for hero sections, cards, and overlays.
Hover Effects 
Add smooth zoom effects to background images when users hover over elements. Perfect for post grids, galleries, and cards. In the block settings, open the ‘FrontBlocks Hover Effects’ panel to enable background scaling. Features: 
– Compatible with GenerateBlocks Query Loop (–inline-bg-image) 
– Works with standard CSS background-image 
– Configurable scale amount from 1.0 to 2.0 (default: 1.1 for 110% zoom) 
– Smooth 0.4s transition with GPU acceleration 
– Content remains readable and properly positioned above the scaled image 
– Overflow protection ensures images don’t extend beyond container
Sticky Columns: 
The sticky option allows you to make a column stick to the top of the viewport when scrolling. Works with both GenerateBlocks Grid blocks and native WordPress blocks. Enable the “Sticky” option in the block settings and the column will remain fixed at the top of the viewport as the rest of the page scrolls.
Insert Post Block: 
Display content from other posts, pages or custom post types. Search and select any published content to display its title as an H2 heading and its full content. This is perfect for creating dynamic content sections without duplicating content.
Decoration for Headline block: 
Add a decorative line to the Headline Block. You can choose between a vertical or horizontal line on the right.
Headline Marquee Effect: 
Add an infinite scrolling marquee effect to Headline/Text blocks. Works with both GenerateBlocks Headline blocks and native WordPress Heading/Paragraph blocks. The text scrolls continuously from right to left, automatically adapting to the container width. Short text repeats more times, long text repeats less. Features: 
– Toggle to enable/disable the marquee effect 
– Speed control with three presets: Fast (10s), Medium (20s), Slow (40s) 
– Seamless infinite loop with no jumps or interruptions 
– Automatically fills container width with appropriate text repetitions 
– Smooth, fluid animation optimized for performance
Product Categories block: 
Display product categories from WooCommerce. Choose the number of categories to display, the order by and the order. You can also choose to hide empty categories. You can also select the number of columns in which to display the categories. You can also customise the background colour, border colour, border width, border radius, text colour, hover background colour, hover border colour and hover text colour.
Counter Block: 
Display a counter with a start value, end value and duration. The counter will increment from the start value to the end value within the specified time frame. Compatible with GenerateBlocks text and headline blocks, as well as native WordPress core/heading and core/paragraph blocks.
Testimonials: 
Display testimonials from other posts, pages or custom post types. Search and select any published content to display its title as an H2 heading and its full content. This is perfect for creating dynamic content sections without duplicating content.
Shortcode: [frontblocks_testimonials_carousel]
Reading Time block: 
Display the reading time of a post. You can choose the number of words per minute to use for the calculation. 
Shortcode: [frontblocks_reading_time]
Reading Progress Bar: 
Display a vertical progress bar on the right side of posts that fills up as users scroll through the content. The progress bar uses your website’s primary color and provides a visual indicator of reading progress. This feature can be enabled/disabled from the FrontBlocks settings page in the WordPress admin.
Back Button: 
Display a floating back button in the bottom left corner that allows users to navigate to the previous page. Enable it from the FrontBlocks settings page.
Fluid Typography: 
Automatically converts your theme’s static typography settings into modern fluid typography using CSS clamp(). Instead of abrupt font size changes at breakpoints, this creates smooth, gradual scaling from mobile (320px) to desktop (1440px). Compatible with all WordPress themes.
Supports all typography elements: 
– Body text and paragraphs (including GenerateBlocks headline elements) 
– All headings (H1-H6) 
– Each element maintains its own responsive values 
– Zero configuration – automatically reads from your theme’s dynamic CSS 
– Smooth transitions across all viewport sizes without jumps
Simply enable “Fluid Typography” in FrontBlocks settings, and all your responsive typography will scale smoothly between devices!
Custom SVG Animations: 
Add animated graphics to GenerateBlocks Shape blocks and native WordPress Icon blocks by importing JSON files. Supports two formats that are automatically detected: Lottie/Bodymovin (import JSON from After Effects or LottieFiles.com) and Custom CSS (SVG + @keyframes).
Text Animation Block: 
Add dynamic animated text effects to any page or post. Insert the block from the Gutenberg inserter under the FrontBlocks category and choose from 30+ animation types to make your headings and copy stand out.
Animation types available: 
– Entrance effects: fade-in, blur-in, scale-in, bounce-in, drop-in, roll-in, flip-in, rotate-in, glow-in, slide-up, slide-down, slide-left, slide-right 
– Text reveals: typewriter, block-reveal, tracking-expand, terminal-type, random-reveal, shuffle-text 
– Attention effects: pulse, flash, rubber-band, wave, swing, stretch, squeeze 
– Creative effects: glitch, glitch-rgb, flicker, water-drop, shadow-pop, solid-outline
Features: 
– Live animated preview directly in the Gutenberg editor. 
– Full typography controls: heading tag (H1–H6, p, span), font family, size, weight, style, and color. 
– Background color and padding/margin controls. 
– Max-width and text alignment options. 
– Speed control for each animation.
Before/After Comparison Block: 
Display an interactive image comparison slider that lets visitors drag a handle to reveal the difference between two images. Perfect for showcasing makeovers, retouching results, renovation work, or any visual transformation. Add the block from the Gutenberg inserter under the FrontBlocks category.
Features: 
– Upload separate “Before” and “After” images from the WordPress media library. 
– Draggable handle with left/right arrows — also controllable via keyboard for accessibility. 
– Customizable labels displayed over each image (default: “Before” / “After”). 
– Initial slider position control (0–100%) to choose how much of each image is revealed on load. 
– Fixed height mode with a configurable pixel value, keeping the block compact regardless of image proportions.
SVG Uploads: 
Upload SVG files directly to the WordPress media library. Only administrators can upload SVG files. All files are automatically sanitized on upload — dangerous elements (<code><script></code>, `
<
iframe><code>,</code><code>,</code><code>) and event-handler attributes (</code>on*`) are stripped before saving, protecting against XSS attacks.
Login Block: 
Add a native Gutenberg login form block to any page or post. Insert the block from the Gutenberg inserter under the FrontBlocks category. Features a toggle to switch between login form and registration form views, with fully customizable labels and styles. Ideal for membership sites or pages requiring a clean, integrated login experience without a shortcode.
Post Meta (Native) — FrontBlocks PRO: 
Display custom field values from post meta inside native WordPress blocks directly in the editor. Select any registered meta key and output its value inline within heading, paragraph, or other text blocks — no shortcodes or custom PHP required. Useful for displaying dynamic data such as prices, dates, or any custom field stored in post meta. Available in <a href="https://close.technology/en/wordpress-plugins/frontblocks-pro/?utm_source=WordPressORGReadme&utm_medium=link&utm_campaign=frontblocks" rel="nofollow ugc">FrontBlocks PRO</a>.
FAQ Schema (JSON-LD): 
Automatically generate FAQPage structured data for search engines. Enable the “FAQ Schema” toggle in any accordion block (core/details) to mark it as an FAQ item. FrontBlocks collects all enabled items on the page and outputs a valid FAQPage JSON-LD script in the footer, improving your chances of appearing as rich results in Google Search.
Gravity Forms Inline Layout: 
Display Gravity Forms with fields and buttons on the same line. Perfect for newsletter signup forms (email + subscribe button) or search forms (input + search button).
To use this feature: 
1. Select a form in the Gravity Forms block 
2. Find the “FrontBlocks Gravity Form Options” panel in the block settings where you can: 
 – Enable inline layout with a simple toggle 
 – Adjust the gap between elements (0-50px) 
 – Responsive design: automatically stacks on mobile devices
This feature eliminates the need for custom CSS to achieve inline form layouts.
WooCommerce Features: 
Included features for WooCommerce FrontBlocks PRO.
FrontBlocks PRO: 
FrontBlocks PRO is a premium plugin that extends the functionality of FrontBlocks. It includes additional features and improvements over the free version.
Features: 
– Enable Gutenberg in the product editor. 
– Enable simple prices for variable products. 
– Block added after button. 
– Product description behaviour. 
– Disable zoom on product image. 
– Share buttons. 
– Custom Post Types Builder: Create and manage custom post types with advanced configuration options: 
 * Create custom post types with a simple interface from the FrontBlocks settings page 
 * Configure post type behavior (Post or Page style – hierarchical or not) 
 * Enable/disable categories taxonomy for each custom post type 
 * Add custom meta fields with multiple field types (Text, Textarea, URL, Date, File, Number, Email) 
 * Individual settings page for each custom post type accessible from the post type menu 
 * Delete custom post types easily with a single click 
– Disable tabs on the product page. 
– Horizontal product form layout (price, quantity, and add to cart button in one row). 
– Full Page Scroll: Create fullpage scroll experiences with smooth section-by-section navigation and automatic side navigation dots. Perfect for landing pages, portfolios, and presentations.
More information in the <a href="https://close.technology/en/wordpress-plugins/frontblocks-pro/?utm_source=WordPressORGReadme&utm_medium=link&utm_campaign=frontblocks" rel="nofollow ugc">FrontBlocks PRO</a> page.
<h3>1.3.6</h3>
<ul>
<li>Added: SVG Uploads — allows administrators to upload SVG files to the WordPress media library with automatic server-side sanitization.</li>
<li>Added: Login Block — native Gutenberg block for login form with toggle options and customizable UI.</li>
<li>Added: Meta Native — display custom field meta values inside native WordPress blocks directly from the editor.</li>
<li>Added: Before/After Effect Editor — interactive image comparison block now fully editable inside the Gutenberg editor.</li>
<li>Added: Fluid Typography for all themes — fluid typography scaling now applies across all active WordPress themes, not just GeneratePress.</li>
<li>Added: Headline Marquee Native — scrolling marquee/ticker text support for native WordPress headline blocks.</li>
<li>Added: Container Edge Alignment Native — edge-to-edge alignment option for native WordPress container/group blocks.</li>
<li>Added: Shape Animations Native Icon — shape animation support extended to native WordPress icon blocks.</li>
<li>Added: Sticky Column Native — sticky column behavior for native WordPress blocks.</li>
<li>Fixed: Product category filter display on WooCommerce product pages.</li>
<li>Improved: Block and function names prefixed with <code>frontblocks-</code> for consistency and conflict prevention.</li>
<li>Dev: Added WordPress Playground PR preview — one-click preview button added to every pull request.</li>
</ul>
<h3>1.3.5</h3>
<ul>
<li>Added: FAQ Schema — automatically generates FAQPage JSON-LD structured data from accordion blocks (core/details) marked as FAQ items, improving SEO visibility in search engines.</li>
<li>Added: Carousel/Slider support for WordPress core Query Loop block (core/query) — use the FrontBlocks carousel options directly on native Query Loop blocks.</li>
<li>Improved: Counter block now works with native WordPress blocks (core/heading, core/paragraph) in addition to GenerateBlocks text and headline blocks.</li>
</ul>
<h3>1.3.4</h3>
<ul>
<li>Added: Text Animation block with 30+ animation types — fade-in, typewriter, shuffle-text, slide-up/down/left/right, drop-in, swing, pulse, flash, rubber-band, wave, stretch, squeeze, roll-in, glitch, glitch-rgb, random-reveal, flicker, block-reveal, tracking-expand, terminal-type, solid-outline, water-drop, shadow-pop, scale-in, blur-in, glow-in, bounce-in, flip-in, rotate-in.</li>
<li>Added: Text Animation block — full typography controls (tag, font family, size, weight, style, color, background, alignment, padding, margin, max-width).</li>
<li>Added: Text Animation block — live animated preview in the Gutenberg editor.</li>
<li>Added: Before/After Comparison block — interactive drag-to-reveal image comparison with customizable labels, initial position, and fixed height mode.</li>
<li>Added: Before/After block — keyboard-accessible draggable handle with left/right arrow indicators.</li>
<li>Improved: Conditional asset loading for Carousel, Animations, Text Animation, and Before/After — scripts/styles only enqueue on pages where the feature is used.</li>
</ul>
<h3>1.3.3</h3>
<ul>
<li>Fixed: Carousel bullets display and behavior.</li>
<li>Fixed: Carousel editor styling and functionality.</li>
<li>Fixed: Carousel in native (core) blocks.</li>
<li>Fixed: Carousel JavaScript and CSS issues.</li>
<li>Fixed: Stacked images block display.</li>
<li>Fixed: Accordion in Gravity Forms inline layout.</li>
<li>Improved: Carousel styles – updated classes and removed unnecessary declarations.</li>
<li>Improved: Settings page and carousel advanced options.</li>
<li>Improved: Shape animations option component.</li>
<li>Improved: PHPStan compliance and code quality.</li>
</ul>
<h3>1.3.2</h3>
<ul>
<li>Added: FrontBlocks Hover Effects – Smooth background image zoom on hover for Query Loops, grids, and cards.</li>
<li>Added: Configurable scale amount (1.0-2.0) for hover background zoom effect.</li>
<li>Added: Support for GenerateBlocks –inline-bg-image and standard CSS background-image.</li>
<li>Added: GPU-accelerated smooth transitions (0.4s) for optimal performance.</li>
<li>Added: Hero Carousel Pattern – Ready-to-use block pattern automatically registered …</li>
</ul>

FrontBlocks for Gutenberg/GeneratePress

Plugin extending Gutenberg and GeneratePress with carousel, slider, animations, sticky columns, edge alignment and post insertion capabilities.

F13 Lightbox vs FrontBlocks for Gutenberg/GeneratePress