Title: Grinner Blocks
Author: Haider Shah
Published: <strong>26 septembra, 2026</strong>
Last modified: 24 oktobra, 2026

---

Search plugins

![](https://ps.w.org/grinner-blocks/assets/banner-772x250.png?rev=3751150)

![](https://ps.w.org/grinner-blocks/assets/icon-256x256.png?rev=3714222)

# Grinner Blocks

 By [Haider Shah](https://profiles.wordpress.org/shahofsheffield/)

[Download](https://downloads.wordpress.org/plugin/grinner-blocks.1.8.1.zip)

 * [Details](https://sl.wordpress.org/plugins/grinner-blocks/#description)
 * [Reviews](https://sl.wordpress.org/plugins/grinner-blocks/#reviews)
 *  [Installation](https://sl.wordpress.org/plugins/grinner-blocks/#installation)
 * [Development](https://sl.wordpress.org/plugins/grinner-blocks/#developers)

 [Support](https://wordpress.org/support/plugin/grinner-blocks/)

## Description

See every block and effect in action at [grinner.io](https://grinner.io).

**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: content sliders, hover lists, card piles, progress bars,
   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.
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 82 KB of shared styles
on every page.

**Blocks**

 * **Before / After** — two-image comparison slider, side by side or top and bottom,
   with a draggable divider driven by a real range input so it works with a keyboard
   and a screen reader. On touch screens the page still scrolls freely across it.
   Zero layout shift.
 * **Avatar Stack** — overlapping avatars for social proof, in a straight row or
   a gentle arc, with an optional “+N” chip, a trailing label and hover effects.
   It shrinks to fit narrow screens. No front-end JavaScript.
 * **Logo Marquee** — a continuous scrolling row of logos, pausing on hover, on 
   keyboard focus and when scrolled off-screen — or moving with the page’s scroll
   instead, forwards on the way down and back on the way up.
 * **Image Slider** — the same continuous loop for photography, with fades, captions,
   hover effects and optional links. It can run along a curve (Arc, Smile, Drum 
   or Wave), move with the page’s scroll, or stand still and let visitors swipe 
   through it, looping endlessly.
 * **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 — on 
   a clock, or as the page scrolls. It can play an entrance animation first, its
   lines can carry formatting and accents, and it follows the alignment of the layout
   it sits in. 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. Eight transitions (Carousel Flow can rest in
   an arc), plus layouts that arrange the images as a deck, a polaroid scatter, 
   a mosaic, stepped columns, a spotlight with thumbnails or an orbit. 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, moving on its own or with the page’s scroll.
 * **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. The
   player library loads only when an animation starts: on the first screen by default
   at the visitor’s first touch, scroll, click, key or mouse move (or, if you choose,
   once the page has loaded), and a playing animation pauses off screen.
 * **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, with an outer border and column widths.
 * **Hover List** — big link rows that show each row’s image on hover or keyboard
   focus. Five presets: a work index whose image follows the cursor, a split layout
   with one image area, a background swap, inline thumbnails, and expanding panels—
   an accordion that opens on hover, by click, tap or keyboard.
 * **Content Slider** — slides that hold any blocks (testimonials, features, case
   studies), moved by swipe, arrows, dots or autoplay. Four layouts: full width,
   several with a peek, a centred slide, or cards with a progress bar. It rewinds
   at the end instead of cloning slides, and its script loads only when arrows, 
   dots or autoplay are on.
 * **Card Pile** — cards that stick and pile up as the page scrolls, for process
   steps or chapters, in four presets; or a fanned pile of smaller cards that spreads
   on hover and brings the card under the pointer to the front. CSS only, no JavaScript.
 * **Progress Bar** — labelled bars, thick bars, segments and steps, or rings, drawn
   in as the page scrolls or once in view. Values as a percentage, “42 of 60”, money
   or a rating, printed as real text.

**Responsive layout controls**

 * 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.
 * Choose when Columns stack: on phones only, on tablets as well, or two columns
   on tablets.

**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.
 * Accent text: select words and give them an accent from the toolbar — six ready-
   made styles built from your theme’s fonts and colours, or accents saved on your
   site — with highlights, underlines, circles, gradient or outline text and a draw-
   in animation. Each decoration has its own size and position controls, and changing
   an accent changes only the words you selected.
 * Grey to Colour: words go from muted to full colour as a heading or paragraph 
   scrolls up the screen. No JavaScript, and the text is always readable.
 * 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 with their own fill and text colours, icons with their own
   colours, decorative corner marks, full-width fixes, vertical stacking, and click-
   to-play video buttons. On phones, a tapped button shows its hover colours while
   pressed and then returns to normal.
 * Navigation hover styles and markers, and item pills such as “New” or “Hot” beside
   a menu link; a sticky header with an optional glass effect, which can also sit
   transparent over a page’s first section, so a hero’s background runs up behind
   it, and turn to glass as you scroll.
 * A sticky call-to-action bar, whose buttons can stretch across the bar on phones,
   and clickable Group / Columns blocks: in a Query Loop each card can link to its
   own post, and a clickable card is one link and one Tab stop, while buttons to
   other pages still work on their own.
 * Layout reveals, text gradients and inline text icons.
 * Animated backgrounds for Group, Cover, Columns, Column and Media & Text blocks:
   ten ready-made backgrounds, or one imported from Motionkit, the Grinner background
   tool — soft blobs, auroras, halos, grain, shapes, stripes, dot grids, halftones,
   conic sweeps, washes, spotlights, prism light bars, shaded 3D forms and soft 
   silhouettes in your palette’s colours. Moving, still or off for each screen size;
   on phones the first section is off by default and the rest still. CSS only, paused
   off screen and still for reduced motion.
 * Section styles for Group, Columns and Column — Light, Surface, Dark, Primary 
   and Accent section — in your palette’s colours, with links, buttons and headings
   that stay readable in each. Each page loads only the styles it uses.
 * Link hover cards: internal links in paragraphs and lists can show a small preview
   card on hover or keyboard focus.
 * An aspect ratio and a rotation for the Group block, opacity for palette text 
   colours, a paragraph pinned over its section, and Keep still for one child of
   a Parallax group.
 * Image effects on the core Image block: hover tilt, zoom, lift, greyscale and 
   glare; parallax; entrances such as Rise, Wipe and Roll; and scroll effects such
   as zoom, tilt in and grey to colour. Images can also take a maximum width with
   limits, a resting angle, and stickers pinned over a section, still or animated.
 * A Loading setting on the Image, Cover and Post Featured Image blocks — Auto, 
   Lazy, Eager or Priority — so you decide which image loads first. In a Query Loop,
   Priority applies to the first card only.

**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.
 * Preload the heading font (Performance): one preload for the font your main heading
   uses. Off by default.
 * An optional Excerpt field for pages, so Query Loop cards can show a summary you
   write.
 * A Data setting to keep or wipe your plugin data when you uninstall — off by default,
   so your data is kept.

### External services

Grinner Blocks connects to two external services, both operated by Google: YouTube,
only on pages where you have added a YouTube video (a Grinner Video Embed block,
or a click-to-play video on a button, an image or a Lottie animation); and Google
Fonts, only when a site administrator imports a Moodkit style that uses Google fonts
and agrees to download them. No other external service is contacted.

 * **Video thumbnails.** When a 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

 * **Google Fonts (Moodkit import).** When an administrator applies a Moodkit style
   under Grinner Blocks  Moodkit (or with `wp grinner moodkit import --apply --google-
   fonts`, or the `grinner/moodkit-import` ability with `apply` and `googleFonts`),
   your site’s server downloads the style’s Google fonts once, so they can be served
   from your own site. Nothing is downloaded until an administrator ticks the box
   agreeing to it; that agreement is stored, and later imports download without 
   asking again. The server requests the font’s stylesheet from fonts.googleapis.
   com and the font files from fonts.gstatic.com. Google receives the font names,
   weights and styles asked for, your server’s IP address and a standard browser
   user-agent string. No visitor data and no content from your site is sent. The
   files are saved in your site’s fonts folder and added to the Font Library; visitors’
   browsers load them from your site and never contact Google for them. Fonts already
   in your Font Library are not downloaded again.
 * **WordPress’s Google Fonts list.** To see which weights and styles a Google font
   has, the Moodkit import’s preview reads WordPress’s own Google Fonts collection,
   which WordPress itself loads from WordPress.org (s.w.org) and caches for a day,
   as it does for Styles  Typography  Manage fonts.

Google Fonts API Terms of Service: https://developers.google.com/fonts/terms
 WordPress.
org Privacy Policy: https://wordpress.org/about/privacy/

### Source

All first-party Grinner Blocks code ships in this plugin as it was written: plain,
human-readable PHP, JavaScript and CSS, with no compilation. This covers everything
under `blocks/`, `enhancements/`, `admin/`, `inc/blocks-layer2.php`, `inc/settings.
php`, `inc/redirects.php`, `inc/font-preload.php`, `inc/script-min.php`, `inc/litespeed-
update-purge.php`, `inc/moodkit/`, `grinner-blocks.php` and `uninstall.php`.

Since 1.7.0, visitors are served comment-free copies of the front-end stylesheets
and scripts. Each copy (`*.min.css`, `*.min.js`) sits next to its readable source
file in the same folder, and is made from it by removing only comments and extra
whitespace: names, strings and code are unchanged. The copies are made by the plugin’s
own build scripts, `bin/build-css.js` and `bin/build-js.js` (Node.js; the script
build reads the code with the acorn parser to find what is a comment), which are
development tools and are not included in the plugin. The readable file beside each
copy is the source.

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. Three files carry first-
   party modifications: in `dist/index.css` the editor icon embedded in it was changed
   from Twentig’s mark to the plugin’s own mark; in `dist/style-index.css` and `
   dist/blocks/common.css` the block entrance animation’s hidden starting state 
   applies only once the plugin’s script has marked the page, so content is never
   left hidden when scripts are delayed or off. Upstream files the plugin does not
   use (starter-site templates and their preview images) are left out; every other
   file under `dist/` is unchanged from 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 Blocks category in the block inserter.⌉⌊The Grinner Blocks category
in the block inserter.⌉[

The Grinner Blocks category in the block inserter.

[⌊The Grinner Before / After block in the editor, with its before and after images
in the settings panel.⌉⌊The Grinner Before / After block in the editor, with its
before and after images in the settings panel.⌉[

The Grinner Before / After block in the editor, with its before and after images
in the settings panel.

[⌊The Grinner Countdown block in the editor — live preview, deadline date and time,
and timezone.⌉⌊The Grinner Countdown block in the editor — live preview, deadline
date and time, and timezone.⌉[

The Grinner Countdown block in the editor — live preview, deadline date and time,
and timezone.

[⌊The Grinner Lottie block in the editor — editor preview, playback, delay and width
controls.⌉⌊The Grinner Lottie block in the editor — editor preview, playback, delay
and width controls.⌉[

The Grinner Lottie block in the editor — editor preview, playback, delay and width
controls.

[⌊Responsive layout on a Grid block: columns per breakpoint for desktop, tablet 
and mobile, with an optional gap for each.⌉⌊Responsive layout on a Grid block: columns
per breakpoint for desktop, tablet and mobile, with an optional gap for each.⌉[

Responsive layout on a Grid block: columns per breakpoint for desktop, tablet and
mobile, with an optional gap for each.

[⌊Mobile order and per-device width on an item inside a Grid block, set in the inspector.⌉⌊
Mobile order and per-device width on an item inside a Grid block, set in the inspector
.⌉[

Mobile order and per-device width on an item inside a Grid block, set in the inspector.

[⌊A script text effect on a core heading — Decrypt, with its settle order, settle
duration and a Replay preview.⌉⌊A script text effect on a core heading — Decrypt,
with its settle order, settle duration and a Replay preview.⌉[

A script text effect on a core heading — Decrypt, with its settle order, settle 
duration and a Replay preview.

[⌊The Grinner Blocks settings screen — code injection, smooth scroll, editor, redirects
and data.⌉⌊The Grinner Blocks settings screen — code injection, smooth scroll, editor,
redirects and data.⌉[

The Grinner Blocks settings screen — code injection, smooth scroll, editor, redirects
and data.

## Blocks

This plugin provides 19 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 Content Slider Slides that hold any blocks, in a native swipeable strip:
   full width, several with a peek, a centred slide or cards with a progress bar.
   Arrows, dots and autoplay load a small script only when switched on.
 *   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 Hover List A list of links that shows each row's image on hover or 
   keyboard focus: a work index, a split image area, a background swap, inline thumbnails
   or expanding panels.
 *   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 Card Pile Cards that stack up as you scroll, each new card sliding 
   over the last: a straight stack, a receding deck, dealt cards or split chapters.
   Or a fanned pile that spreads on hover. CSS only.
 *   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.
 *   Grinner Progress Bar A group of progress bars: thin labelled bars, thick bars
   with the value inside, segmented bars and steps, or rings. Values as a percentage,“
   42 of 60”, money or a rating.
 *   Grinner Slide One slide of a Grinner Content Slider. Holds any blocks.
 *   Grinner Pile Card One card in a Card Pile: an image, then an eyebrow, a heading,
   a line of text and a button.
 *   Table Cell One cell of the Grinner Table. Holds any blocks — headings, paragraphs,
   images.

## Installation

 1. Upload the `grinner-blocks` folder to `/wp-content/plugins/`
 2. Activate through the Plugins menu
 3. 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. The stylesheets and scripts visitors
download carry no developer comments, the blocks use only font weights your site
already loads, 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. Content is never hidden waiting for a script, even when
a caching plugin delays JavaScript, and nothing Grinner Blocks animates can make
a page scroll sideways on a phone.

### Is it accessible?

Animated content is hidden from screen readers and paired with a static equivalent,
anything that moves on its own can be paused from the keyboard, and every animation
stops for visitors who prefer reduced motion.

### 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. When an optimiser delays
JavaScript, your content still shows straight away, the animations play once the
scripts run, and a Video Embed still plays on the first click. After you update 
Grinner Blocks, it clears LiteSpeed Cache’s page and CSS/JS caches once, so visitors
get the new styles. 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.

### How do I keep a font size from shrinking on phones?

WordPress makes most font sizes fluid, so they shrink on small screens. For a size
that never shrinks on phones, add a Font size preset in Styles with Fluid typography
off, and pick it in Grinner’s font size controls like any other size.

### Is there an accordion that opens on hover?

Yes: the Hover List block’s Expanding panels preset. Panels open when the mouse 
rests on them, and also by click, tap and keyboard. WordPress’s own Accordion block
opens on click.

### 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.

Contributors

 *   [ Haider Shah ](https://profiles.wordpress.org/shahofsheffield/)

[Translate “Grinner Blocks” into your language.](https://translate.wordpress.org/projects/wp-plugins/grinner-blocks)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/grinner-blocks/), check
out the [SVN repository](https://plugins.svn.wordpress.org/grinner-blocks/), or 
subscribe to the [development log](https://plugins.trac.wordpress.org/log/grinner-blocks/)
by [RSS](https://plugins.trac.wordpress.org/log/grinner-blocks/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 1.8.1

 * New: Animated background engine. Pick one of ten ready-made backgrounds or paste
   one from Motionkit, the Grinner background tool (Edit in Motionkit opens it there
   again). Up to five layers from nineteen shapes, in your palette’s colours; Moving,
   Still or Off per device (tablets Still, phones Off on the first section). CSS
   only, loaded only where used.
 * New: Import from Moodkit (Grinner Blocks page, Moodkit tab): colours, font sizes,
   section spacing, radius, widths, headings, links, buttons and Google fonts (only
   the weights used, once you agree) into your block theme’s styles. One revision,
   with Undo.
 * New: Section styles Light, Surface, Dark, Primary and Accent for Group, Columns
   and Column, with readable links, buttons and headings; a page loads only the 
   styles it uses.
 * New: Scrolling Text, Logo Marquee and Image Slider can move with the page’s scroll(
   Move the strip: As the page scrolls). CSS only; reduced motion keeps them still.
 * New: Sticky header: Over the first section. Transparent over a page’s hero, then
   glass or its solid colour as you scroll; heights per screen size, so nothing 
   shifts. Per page: on or off, Light or Dark header text, and a logo for dark or
   light heroes.
 * New: Card Pile: Fanned pile preset, spreading on hover, with Spread and Hover
   spread. CSS only.
 * New: Lottie warns in the editor when a file is over about 300 KB or has pictures
   inside it.
 * Changed: Lottie on the first screen starts on the visitor’s first touch, scroll,
   click, key or mouse move; the poster shows until then (Start immediately is still
   an option). With no poster, phones and reduced motion load nothing.
 * Changed: Colour names follow Moodkit’s theme.json export (accent-1 to accent-
   4; accent-a to accent-d are no longer read); the Progress Bar’s value on a dark
   fill uses on-secondary. Hover List numbers use the system monospace font.
 * Changed: The six 1.8.0 animated background styles are not offered for new sections;
   existing ones keep working and can be converted.
 * Changed: The section spacing classes scale from a Moodkit style’s section size.
   The theme’s own section styles show again.
 * Changed: Glass on scroll draws on ::before (colour) and ::after (glass) of the
   header group; custom CSS there may clash.
 * Changed: In an animated background, a flame with no anchor rises from the bottom
   left.
 * Improved: Faster without a cache plugin’s script delay: Lottie, Countdown and
   a video playing in view or in place pause off screen; Lottie no longer loads 
   the reveal stylesheet; Content Slider autoplay waits for page load; Image Rotator
   layouts wait without a timer.
 * Improved: Text no longer jumps when web fonts load: until they arrive, accent,
   heading and body text use local fonts matched to their width. Nothing extra downloads.
 * Improved: Count-up numbers keep their width and line, and show no final number
   before counting.
 * Improved: Jump links stop below a header that sits over the first section.
 * Improved: On phones, where a hero’s animated background is off, the header checks
   its text against the plain section and switches its colours or logo if needed.
 * Improved: docs/settings-map.json covers every new setting.
 * Fixed: A Video Embed’s Play works on the first click with LiteSpeed’s delayed
   scripts and JS Combine.
 * Fixed: Strips no longer jump by one gap each loop; the Wave no longer drifts.
 * Fixed: Glass on scroll returns to the header colour at the top and stays see-
   through.
 * Fixed: A header never measured uses 80 / 80 / 68px; a hero’s picture runs behind
   it with no strip above it.
 * Fixed: Slider arrows stay readable on their button, and phone controls keep 12px
   from the edges.
 * Fixed: Menu underline marks no longer double the theme’s underline. Countdown
   boxes and icon chips use the site’s Medium radius.
 * Fixed: A template Featured Image set to Priority keeps its priority and preload.
 * Fixed: Moodkit-imported fonts show as active in Manage fonts, and a heading font
   added later is preloaded.
 * Fixed: The Conic animated gradient turns again.
 * Fixed: Inherited stylesheets change version when their files change, so browsers
   fetch the new ones.
 * Fixed: Uninstall also removes each page’s header settings when Delete all plugin
   data is ticked.

#### Earlier versions

The changes in Grinner Blocks 1.8.0 and earlier are in changelog.txt, in the plugin’s
folder.

## Meta

 *  Version **1.8.1**
 *  Last updated **4 dnevi ago**
 *  Active installations **Fewer than 10**
 *  WordPress version ** 6.5 or higher **
 *  Tested up to **7.1.3**
 *  PHP version ** 8.0 or higher **
 *  Language
 * [English (US)](https://wordpress.org/plugins/grinner-blocks/)
 * Tags
 * [animation](https://sl.wordpress.org/plugins/tags/animation/)[blocks](https://sl.wordpress.org/plugins/tags/blocks/)
   [countdown](https://sl.wordpress.org/plugins/tags/countdown/)[gutenberg](https://sl.wordpress.org/plugins/tags/gutenberg/)
   [landing page](https://sl.wordpress.org/plugins/tags/landing-page/)
 *  [Advanced View](https://sl.wordpress.org/plugins/grinner-blocks/advanced/)

## Ratings

No reviews have been submitted yet.

[Your review](https://wordpress.org/support/plugin/grinner-blocks/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/grinner-blocks/reviews/)

## Contributors

 *   [ Haider Shah ](https://profiles.wordpress.org/shahofsheffield/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/grinner-blocks/)