FrontBlocks for Gutenberg/GeneratePress

FrontBlocks is a lightweight toolkit that extends the WordPress Block Editor (aka Gutenberg) with layout controls, interactive blocks, and content enhancements. Build richer pages with the blocks you already use, without relying on a page builder or custom code.

Turn Query Loops and grids into carousels, add animations and visual effects, improve layouts, and enable practical site utilities. FrontBlocks works with native WordPress blocks as well as supported GenerateBlocks elements, with optional integrations for WooCommerce, GenerateBlocks/GeneratePress and Gravity Forms.

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 Animate.css: 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

Read the full description on the official page →