Description

Why Grinner Blocks

Performance-first: many blocks ship no JavaScript at all, and each block’s CSS and JavaScript load only on pages that use it.
Everything is included — no paid tier, no locked features.
Native blocks in the editor you already use. Deactivate the plugin and your posts keep their content; the controls added to core blocks simply switch off.
Landing-page features: animated marquees, before/after sliders, counters, scroll reveals, avatar stacks and more.
You edit everything directly: place a block, drag it, change its text.

Everything you need to build landing pages

Grinner Blocks is a set of native blocks and controls for building and launching modern landing pages in WordPress. It lives inside the block editor you already use — no page builder, no jQuery. Every block renders on the server where it can, and each block’s own CSS and JavaScript load only on pages that use it. On block themes, the shared styles also load only where a page uses them, leaving about half a kilobyte site-wide; classic themes still load an 82 KB shared stylesheet on every page.

Blocks

Before / After — two-image comparison slider with a draggable divider, driven by a real range input so it works with a keyboard and a screen reader. Zero layout shift.
Avatar Stack — overlapping avatars for social proof, with an optional “+N” chip, a trailing label, and four hover modes. No front-end JavaScript.
Logo Marquee — a continuous scrolling row of logos, pausing on hover and when scrolled off-screen.
Image Slider — the same continuous loop for photography, with fades, captions, hover effects and optional links.
Text Rotator — a line of text that cycles through a list, one item at a time, with fades, blurs, clip reveals or the Pixel Reveal and Decrypt effects. Visitors who prefer reduced motion see the first item, still.
Image Rotator — a stepped carousel showing up to six images at a time, advancing on its own, with arrows, or both. Seven transitions, pause on hover, and no autoplay for visitors who prefer reduced motion.
Scrolling Text — a marquee for words, with separators, tilt and per-item styling.
Countdown — counts down to a date in any timezone, ticking live in the browser while a permanent screen-reader line states the real deadline.
Video Embed — a click-to-load YouTube facade using youtube-nocookie.com. Nothing from YouTube runs until the visitor clicks; a poster and play badge stand in until then.
Lottie — a self-hosted Lottie player supporting .json and .dotlottie, with loop / once / hover playback, a poster fallback and a mobile kill switch.
Icon — one inline SVG icon from a bundled set of 1,512, rendered server-side in six weights.
Table — a responsive table built from real blocks, so each cell can hold anything.

Responsive layout controls (new in 1.4.0)

Set a maximum width per device — desktop, tablet and mobile — on headings, paragraphs, groups and columns.
Align a width-limited block left, centre or right with a box-alignment control.
Set how many columns a Grid block shows on desktop, tablet and mobile, with an optional gap for each.
Reorder the children of a Columns or Grid block on mobile without touching the desktop layout — per item, or with a one-switch reverse.

Block enhancements

Added as extra controls on the core blocks you already use:

Entrance animations and reveal-on-scroll for headings, paragraphs and groups, including the word-by-word Assemble effect, plus a number counter that counts up or shuffles its digits.
Script text effects for headings and paragraphs — Pixel Reveal, Line Reveal, Decrypt and Typewriter — that hold the text’s exact layout while they run.
Button hover effects, icons, decorative marks, full-width fixes, vertical stacking, and click-to-play video buttons.
Navigation hover styles and markers; a sticky header with an optional glass effect.
A sticky call-to-action bar, and clickable Group / Columns blocks where nested links still work independently.
Layout reveals, text gradients, inline text icons, and image hover effects.

Site settings

Header and footer code injection, gated on the unfiltered_html capability.
Smooth anchor scrolling with a scroll offset for sticky headers.
Simple exact-match redirects.
A site-wide switch for animated previews inside the editor.
A Data setting to keep or wipe your plugin data when you uninstall — off by default, so your data is kept.

Performance and accessibility

Every block’s CSS and JavaScript loads only on pages that actually use it. Many blocks ship no JavaScript at all, and one shared IntersectionObserver drives every scroll effect. Exactly one image per page is ever marked as the priority image, so nothing competes for the browser’s attention. Animated content is hidden from screen readers and paired with a static equivalent, and every animation stops for visitors who prefer reduced motion.

External services

Grinner Blocks connects to one external service, YouTube (operated by Google), and only on pages where you have added a YouTube video: an Grinner Video Embed block, or a click-to-play video on a button, an image or a Lottie animation. No other external service is contacted, and nothing is sent anywhere by the plugin’s own server code.

Video thumbnails. When an Grinner Video Embed block has no custom poster image, its poster is YouTube’s thumbnail for that video, loaded from i.ytimg.com when a visitor views the page, and in the editor while you edit the block. The request comes from the visitor’s browser, so YouTube receives the video ID, the visitor’s IP address and standard browser information. Choose a poster from your Media Library and no thumbnail request is made.
Video playback. The player loads from youtube-nocookie.com only after a visitor clicks play; before that click nothing from YouTube runs. On that click YouTube receives the video ID, the visitor’s IP address and standard browser information, and the player is then governed by YouTube’s own terms. If JavaScript is unavailable, the play button is a plain link to the video on youtube.com.

YouTube Terms of Service: https://www.youtube.com/t/terms
Google Privacy Policy: https://policies.google.com/privacy

Source

All first-party Grinner Blocks code ships in this plugin exactly as it was written: plain, un-minified, human-readable PHP, JavaScript and CSS. There is no build step and no compilation — the files you download are the source files. This covers everything under blocks/, enhancements/, admin/, inc/blocks-layer2.php, inc/settings.php, inc/redirects.php, grinner-blocks.php and uninstall.php.

Three sets of files are pre-built third-party code. Their readable source lives upstream:

lottie-web 5.12.2 — blocks/lottie/assets/lottie.min.js is the official lottie_light.min.js build from release 5.12.2, unmodified (the “light” build omits the expression evaluator). Source: https://github.com/airbnb/lottie-web — released under the MIT license.
fflate 0.8.2 — blocks/lottie/assets/fflate.min.js is the official umd/index.js build from release 0.8.2, unmodified. Used to unpack .lottie archives in the browser. Source: https://github.com/101arrowz/fflate — released under the MIT license.
Twentig 2.0.1 — everything under dist/ is the built asset output of the Twentig plugin, version 2.0.1, which Grinner Blocks forks. Source: https://wordpress.org/plugins/twentig/ — released under GPL-3.0-or-later. One file, dist/index.css, carries a first-party modification: the editor icon embedded in it was changed from Twentig’s mark to the plugin’s own mark. Every other file under dist/ is byte-identical to the upstream 2.0.1 release.

The icon artwork data under enhancements/_shared/phosphor/ is generated from Phosphor Icons 2.1.1 (https://github.com/phosphor-icons/core, MIT) and ships as plain, readable JSON — see manifest.json there for the exact source version and generation date.

Credits

Grinner Blocks includes code from Twentig by Twentig.com, used under the GPL.

Bundled third-party libraries and their licenses are listed under Source, above.

Screenshots

The Grinner Before / After block in the editor, with its before and after images in the settings panel. — The Grinner Blocks category in the block inserter, holding eleven of the twelve Grinner blocks (the Image Rotator is under Media).

Blocks

This plugin provides 13 blocks.

Grinner Lottie A self-hosted Lottie animation, lazy-initialised on scroll. Optional loop/once/hover playback and a click-to-play YouTube popup.
Grinner Image Rotator A stepped image carousel: up to six images visible, manual and/or automatic advance, with a transition vocabulary from flat fades to a shuffled card deck.
Grinner Before / After Two images compared with a draggable divider. Drag anywhere, click to jump, or use the arrow keys.
Grinner Scrolling Text A continuous auto-scrolling strip of text items. CSS-only animation, zero JavaScript on the front end.
Grinner Icon A single Phosphor icon in any of six weights. Decorative by default; add a label to make it meaningful, a link to make it clickable, or a background to make it a chip.
Grinner Video Embed Click-to-load YouTube embed. A static poster shows first; the player iframe is built only on click — zero third-party iframe at page load.
Grinner Avatar Stack Overlapping avatars for social proof, with an optional “+N more” chip and trailing label.
Grinner Text Rotator A line of text that cycles through a list, one at a time, forever.
Grinner Countdown A deadline countdown timer. Shows the real remaining time at first paint, then ticks live in the browser.
Grinner Table A table-style grid whose cells hold real blocks, so dynamic data (Block Bindings) can resolve inside cells — unlike the core Table block.
Grinner Logo Marquee A continuous auto-scrolling logo strip. CSS-only animation, zero JavaScript on the front end.
Grinner Image Slider A continuous auto-scrolling image strip. CSS-only animation; a tiny script loads on the front end only when the manual-scroll infinite loop is enabled.
Table Cell One cell of the Grinner Table. Holds any blocks — headings, paragraphs, images.

Installation

Upload the grinner-blocks folder to /wp-content/plugins/
Activate through the Plugins menu
Go to Grinner Blocks in your WordPress admin menu, then add any Grinner block in the editor

FAQ

Is Grinner Blocks really free? Is anything locked behind a paid tier?: Every block, control and setting is free and included. There is no pro version, no locked features, and no account to create. The plugin is complete on its own.
What happens to my content if I deactivate or delete the plugin?: Your posts and pages keep everything you wrote, and the controls Grinner Blocks adds to core blocks simply switch off — your core content is untouched. The plugin’s own blocks, like Before / After, need the plugin active to display: while it’s deactivated they show a placeholder, and they come straight back the moment you reactivate, with nothing lost. Deleting the plugin keeps your redirects and your header/footer code, so reinstalling restores them — unless you first turn on “Delete all plugin data” under Grinner Blocks Data.
Do I need a page builder?: No. Grinner Blocks works entirely inside the standard WordPress block editor. There’s nothing new to learn — the blocks and controls appear alongside the core ones.
Does it work with the block editor I already have?: Yes. It uses the standard WordPress block editor (Gutenberg) — no separate editor, no special mode, no shortcodes.
Will it work with my theme?: It’s tested with WordPress’s native block themes and should be compatible with any block-based theme. Grinner Blocks adds blocks and controls; it doesn’t replace your theme or take over your layout.
Will it slow my site down?: It’s built to avoid that. Many blocks ship no JavaScript at all, and each block’s CSS and JavaScript load only on pages that use it.
Does it work with caching and optimisation plugins?: Yes, with one setting to check. Grinner Blocks uses native image-loading attributes, so it works alongside caching and optimisation plugins. Optimisers that strip “unused” CSS or delay JavaScript can stop some entrance animations playing for logged-out visitors, though content stays visible. If you run a LiteSpeed-class optimiser with image lazy-loading turned on, add “ilm-eager” to its lazy-load class-name exclusions — Grinner Blocks marks every image meant to load immediately (a hero poster or an above-the-fold marquee) with that class, and the exclusion lets those images load straight away instead of being deferred. If your optimiser also picks priority (“LCP”) images on its own, the two can overlap. On LiteSpeed, that feature can stay active for logged-out visitors even with its own setting switched off, so check your page’s source rather than the settings screen. Grinner Blocks never changes your optimiser’s settings for you.
Where do I get help?: Ask on the plugin’s support forum on WordPress.org — post your question there and we’ll answer it directly.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“Grinner Blocks” is open source software. The following people have contributed to this plugin.

Haider Shah

Translate “Grinner Blocks” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.6.0

Renamed: the plugin is now Grinner Blocks. Block titles, the inserter category, the settings panels and the admin menu use the new name, and the admin menu icon and settings heading show a G. Your blocks, settings, redirects and header/footer code carry over unchanged.
Changed: Grinner Blocks now requires PHP 8.0 or later.
New: Snap transition for the Image Rotator — each image changes in one step, with no movement in between.
Improved: The Image Rotator’s Pixel Reveal transition now plays in the editor preview.
New: The editor warns you when two blocks on a page both ask to load first — a Priority image, or a Lottie, Video Embed or Before / After block with “Above the fold” on. Only one image can load first, and it should be the largest one visible before scrolling.
Improved: An image you set to Priority now keeps the page’s priority slot even when an “Above the fold” block appears earlier on the page, and images too small to be the main image never take it.
Improved: An image block with no loading setting now leaves the choice to WordPress, which loads the first large images on a page immediately and the rest lazily. Previously such images were always lazy-loaded, including hero images at the top of the page. Images further down the page still load lazily.
Improved: A Priority image on a block theme starts downloading as soon as the page begins to load.
Improved: Images WordPress loads immediately now carry the “ilm-eager” marker, so optimisers that honour it don’t delay them.
Fixed: Line Reveal and Pixel Reveal now cover the text with your section’s background colour instead of white, so no pale line shows on coloured sections.
Fixed: Pixel Reveal and Line Reveal no longer paint outside the heading onto neighbouring content, or widen the page on phones.
Under the hood: Per-block styles for the Logo Marquee, Scrolling Text, Image Slider, Site Logo width and Accordion now come from stylesheets instead of style tags printed inside the page.

1.5.1

New: The Countdown block now counts down live in the editor, to exactly the moment your site counts down to. Turn it off for one block with “Preview animation in editor”, or for every block with the Animate previews switch under Grinner Blocks Editor.
Improved: Faster hero images on block themes. When a Video Embed, Lottie or Before / After block has “Above the fold (hero)” turned on, its image starts downloading as soon as the page begins to load, instead of when the browser reaches it. Before / After fetches its “after” image, the one browsers measure as the page’s main image. Works alongside LiteSpeed Cache, including its WebP images, without downloading anything twice.
Improved: Lighter pages on block themes. The shared stylesheets inherited from Twentig, about 13.5 KB, now load only on pages that use them; every other page loads about half a kilobyte.
Improved: A more accurate plugin listing. A new External services section explains when YouTube is contacted, what it receives and how to avoid the thumbnail request. The loading and optimiser claims now match what the plugin actually does, and the website links to a site that no longer resolves are gone.
Fixed: Grinner Blocks and the Twentig plugin can now be active on the same site; previously, activating both caused a fatal error. Saved settings carry over automatically when you update.
Fixed: Sections using Stagger children with the Drop or Swing entrance no longer stay blank on pages that also use a text animation.
Fixed: Parallax inside a Group with rounded corners and an image now moves as you scroll instead of freezing.
Fixed: The Gradient sweep and Image zoom hover effects now show on Group and Columns blocks (including Row, Stack and Grid) that have a background colour or image. Applied to Children, Image zoom scales each card’s own background.
Fixed: The Countdown’s Left and Right alignment now takes effect inside a vertical Stack, where the timer previously stayed centred.
Developers: The iltk_breakpoints, iltk_fonts and iltk_block_classes filters replace twentig_breakpoints, twentig_fonts and twentig_block_classes. The old names still fire after the new ones and will be removed in a future release.

1.5.0

New: Grinner Text Rotator block — a line of text that cycles through a list, one item at a time. Pick a fade, blur, zoom or clip reveal, or the Pixel Reveal and Decrypt effects, and choose how long each item stays on screen.
New: Grinner Image Rotator block — a stepped image carousel showing up to six images at a time, advancing automatically, with arrows, or both. Seven transitions, from Slide and Fade to Centre Stage, Carousel Flow and a Card Drop deck. Its controls can stay visible, appear on hover or stay hidden, and hovering pauses the rotation unless you switch that off.
New: Script text effects for headings and paragraphs — Pixel Reveal, Line Reveal, Decrypt and Typewriter. They keep your inline text colours, hold the text’s exact layout so nothing around it moves, and stay still for visitors who prefer reduced motion. Decrypt’s pace and settle order are adjustable, and Typewriter’s blinking caret can be turned off.
New: Assemble entrance animation — words start scattered and blurred, then drift into place one after another.
New: Shuffle style for the number counter — each digit spins through random values before locking onto the final number.
New: “Above the fold” control on the Grinner Lottie block — turn it on for a hero animation so its poster image loads immediately as the page’s priority image, appearing at once while the animation initialises. Off by default; below-the-fold animations keep loading lazily.
Improved: Images from Grinner blocks now carry WordPress’s own responsive-image safety net, so they stay inside their space even before your page’s styles have finished loading.
Improved: New placeholder logos and images in the Logo Marquee, Image Slider and Image Rotator, so a freshly inserted block looks finished before you add your own.
Improved: Buttons with hover effects or decorations, clickable Group and Columns blocks, and the Before / After grip now respond visibly when pressed.
Improved: Every Grinner settings panel now uses one consistent spacing, so controls are easier to scan.
Improved: The caching FAQ now explains that on LiteSpeed-class optimisers with image lazy-loading, adding “ilm-eager” to the lazy-load exclusions lets the images Grinner Blocks marks to load immediately — hero posters and above-the-fold marquees — load right away instead of being deferred.
Fixed: The Video Embed poster no longer appears oversized for a moment before settling on sites that load stylesheets in the background.
Fixed: On sites that delay JavaScript until the visitor interacts, the first click on a video button now opens the lightbox instead of leaving for YouTube.

1.4.2

Fixed: logo and image marquees now animate and load correctly on sites running LiteSpeed or similar optimisation plugins.

1.4.1

Improved: The plugin’s block icons now show in its own purple throughout the editor, so its blocks stand out from core blocks in the inserter and list view.
Improved: Every block title now carries the plugin’s prefix, for example Logo Marquee, Scrolling Text, Image Slider and Table.
Improved: Rewrote the plugin listing (readme) ahead of the WordPress.org submission.

1.4.0

New: Responsive width — set a maximum width per device (desktop, tablet, mobile) on layout and content blocks, with an alignment control so a narrowed block sits left, centre or right.
New: Mobile order — reorder the children of a Columns or Grid block on small screens without changing the desktop layout, including per-item ordering and a one-switch reverse.
Improved: Customised blocks are now easier to spot in the editor — the “has custom settings” dot appears on eleven more panels.
Improved: Text effects now tell you, in the panel, that the effect paints the text and the block’s own colour setting won’t show — change the effect’s colours instead.
Improved: The plugin’s admin menu now shows its own mark instead of a generic icon, matched in size and colour to the icons around it on every admin colour scheme.
Fixed: Accordion panels no longer leave an empty band of padding around the closed content on the front end.
Fixed: Saving a redirect now clears the cache only for the URLs that actually changed, instead of the whole set — editing one rule among many no longer triggers a site-wide purge.
Fixed: Deleting and reinstalling the plugin no longer wipes your saved redirects or your header/footer code. That content now survives uninstall, so reinstalling restores it. A new “On uninstall” setting (Grinner Blocks Data, off by default) lets you choose a full data wipe if you want a clean removal.

1.3.0

New: Grinner Before / After block — two-image comparison slider with a draggable divider, keyboard and screen-reader support via a real range input, optional labels, and zero CLS.
New: Grinner Avatar Stack block — overlapping avatars for social proof, with an optional “+N more” chip, a trailing label, and no JavaScript at all.
New: Avatar Stack hover effects — None, Lift, Arc (neighbours follow, curving the row) and Fan (the row curves and spreads apart). Mouse and trackpad only; motionless for readers who prefer reduced motion.
New: Grinner Video Embed — optional radiating ripple on the play badge, off by default.
New: Editor previews now animate, with a site-wide off switch under Grinner Blocks Editor.
New: Per-block “Editor preview” toggle on Logo Marquee, Image Slider, Scrolling Text and Lottie — each in its own panel at the top of the block’s settings, so you can quieten one block while the rest keep previewing.
New: Text animations preview in the editor — the animation plays once when you change its type, duration or delay, with a “Replay preview” button to run it again. Readers who prefer reduced motion see no preview at all.
Improved: The site-wide “Animate previews” switch now governs every block it names, Lottie included — Lottie previously kept playing regardless.
Improved: Animations that only ever run on the front end now say so in one consistent sentence, on the control that turns them on.
Improved: The inspector “has custom settings” dot now appears on all 11 Grinner blocks, not just the three scrolling ones.
Improved: Above-the-fold loading control on the Avatar Stack — loads avatars eagerly without competing with your hero image for priority.
Fixed: A non-image attachment (a zip or audio file picked by mistake) is now skipped instead of rendering as a broken image.

1.2.1

Fixed: Line breaks in post-meta-bound paragraphs now survive HTML minification.

1.2.0

New: Clickable layout blocks — turn a Group or Columns block into one large link, with nested links and buttons still independently clickable.
New: Preserve line breaks — paragraphs bound to post meta now render their literal line breaks.
Improved: Block bindings — Grinner Video Embed’s video URL and core Video’s source and poster can now be bound to custom fields.

1.1.0

New: Grinner Lottie block — self-hosted lottie-web player with .json + .dotlottie support, loop/once/hover playback, poster fallback, live editor preview, corner radius, mobile killswitch, and a millisecond start delay.
Improved: Grinner Video Embed — width fix, fill mode, YouTube clean-mode toggles, poster panel, and thumbnail fix.

1.0.0

Initial release — based on Twentig v2.0.1 (GPLv3)

Description

External services

Source

Credits

Screenshots

Blocks

Installation

FAQ

Is Grinner Blocks really free? Is anything locked behind a paid tier?

What happens to my content if I deactivate or delete the plugin?

Do I need a page builder?

Does it work with the block editor I already have?

Will it work with my theme?

Will it slow my site down?

Does it work with caching and optimisation plugins?

Where do I get help?