Grinner Blocks

Changelog

1.7.0

• New: Accent text. Select words and apply an accent from the toolbar: six ready-made styles (serif italic, marker, underline, squiggle, circle and gradient) that use your theme’s fonts and colours, or accents saved on your site, with highlights, lines and circles, gradient or outline text, a size and a draw-in animation. Each highlight, line, circle and border has size and position controls, with a live preview. Changes in the Accent panel apply to the selected words only; anyone who can edit a page can save a look as a new accent, and administrators change or delete accents site-wide in the Site accents screen. Accented words can be kept on one line, and accents work with every text effect.
• New: Grey to Colour text effect. Words go from muted to full colour, word by word in reading order, as a heading or paragraph of up to 150 words scrolls up the screen. No JavaScript, and the text is always readable.
• New: More hover options on the core Image block. Tilt has eight directions, a strength and a depth, and can follow the mouse; Zoom has an amount and a starting point, and can follow the cursor; a glare sheen and a hover speed are new. Linked images show their hover effect on keyboard focus too.
• New: Image entrances: Fade, Rise, Settle, Wipe, Soft blur, Slide and Roll. An image the page shows straight away uses a movement-only version, so it is never hidden while the page loads.
• New: Image scroll effects: Zoom on scroll, Tilt in, Grey to colour, Expand to full, Wipe in and Roll. CSS only; they follow the image as it travels up the screen.
• New: Image parallax, previously on or off, has a direction (down, up, left or right), a speed and a crop choice. „Break out of frame“ moves the whole image past its neighbours instead of inside its frame.
• New: Rotation for images: a resting angle, with its own angle on phones if you like. It is not an animation, so it stays when motion is reduced.
• New: Never smaller than / Never larger than for an image’s Max width, so a size in % or vw stops where you want it.
• New: Pinned stickers can hang over a rounded section’s edge, sit up to 400px out, or be inset by a percentage of the section or of the sticker itself; in Custom placement they can be positioned by their top-left corner.
• New: A Loading setting on the Cover and Post Featured Image blocks, as on the Image block: Auto, Lazy, Eager or Priority. In a Query Loop, Priority and Eager apply to the first card and the other cards load as they scroll into view.
• New: Entrance animations on the Text Rotator, the same set as headings. The rotation starts once the entrance has played, rotating lines can hold formatting and accents, and the block has a Text alignment control and follows the alignment of the Stack or Row it sits in.
• New: Vertical Before / After. The divider moves up and down, with keyboard and touch support; the page still scrolls when you swipe across it.
• New: Navigation item pills: „New“, „Hot“, „Beta“ or your own text beside a menu link, inline or pinned to a corner, with full styling and an optional pulse. Screen readers hear the label naturally.
• New: Arc layout for the Avatar Stack, with a Curve control, and an Arc resting tilt for the Image Rotator’s Carousel Flow transition.
• New: A Start setting for Lottie: start automatically once the page has loaded, or on the visitor’s first touch or scroll.
• New: A Text colour for button hover animations, next to the Fill colour, so a light fill never leaves white text unreadable. Hover Colour also works on a button with no hover animation, for a simple colour change.
• New: An Icon colour and a Hover icon colour for button icons. Left unset, the icon follows the button’s text colour, as before.
• New: „Stretch buttons on mobile“ for the Sticky CTA: on phones the bar’s buttons share its full width, or each run full width when stacked. Off by default.
• New: A „Stack at“ choice for Columns in Grinner Responsive: stack on tablets as well as phones, or show two columns on tablets.
• New: Scrolling Text uses WordPress’s own Size and Font controls (Styles tab, Typography), so it gets every size and font from Styles, fluid sizes included. Sizes chosen before keep their meaning.
• New: Palette colours stay linked. A colour picked from your palette in any Grinner setting is saved as that palette colour, so it changes when you change the palette in Styles. Custom colours, and colours saved before, work as they did.
• New: Before / After takes a corner radius; Countdown takes a font, weight, letter spacing and letter case from Typography; Table cells take their own colours and vertical alignment; a Table’s padding can differ on tablets and phones, and its staggered entrance has a step and can go row by row. Lift hover has a Shadow switch, and the Accordion has a Focus ring setting.
• New: Page excerpts. A switch under Grinner Blocks → Editor adds WordPress’s own Excerpt field to pages, so Query Loop cards and the Post Excerpt block can show a summary you write. Off by default; turning it off keeps any excerpts you wrote. SEO plugins may use a written excerpt as the page’s description.
• New: docs/settings-map.json lists every Grinner setting, its panel, its label and exactly what it stores, for developers and AI tools that build pages. Nothing loads it on your site.
• Improved: Visitors get comment-free copies of Grinner’s stylesheets and scripts. The front-end stylesheets go from about 473 KB to 195 KB and the front-end scripts from about 180 KB to 74 KB. The readable source files are still in the plugin.
• Improved: The Lottie player library loads only when an animation starts, and an animation on the first screen waits until the page has loaded, so pages with Lottie appear much sooner.
• Improved: Preload, preconnect and dns-prefetch links in your Header code are placed at the very top of the page, before any styles, so preloaded files start downloading sooner. The rest of your Header code stays where it was.
• Improved: Images placed by Grinner Blocks count towards WordPress’s „load the first few images straight away“ rule, so images further down a page load lazily, and only one image per page is ever given priority, even when the same picture appears in several blocks.
• Improved: The Image Rotator downloads the next image at the size it will show, not the full original.
• Improved: After Grinner Blocks is updated, LiteSpeed Cache’s page and CSS/JS caches are cleared once, so visitors get the new styles. Nothing happens on sites without LiteSpeed Cache, and its settings are never changed.
• Improved: Content is never hidden from first-time visitors when a caching plugin delays JavaScript: headings, sections and images show at once and animate once the scripts run.
• Improved: On phones, Hero Mode keeps first-screen text still for the Pixel Reveal, Line Reveal, Decrypt and Typewriter effects. A Text Rotator’s Pixel Reveal or Decrypt transition changes lines plainly until the visitor’s first scroll or tap, then plays.
• Improved: On phones and tablets, a button shows its hover colours while it is pressed and then returns to its own colours, instead of turning black and staying black after a tap.
• Improved: Slide Fill and Circle Expand with no Fill colour use your theme’s button hover colour from Styles, and button colours set in Styles with transparency or color-mix() are followed.
• Changed: Slide Fill and Circle Expand with a light Fill colour and no Text colour show dark text on hover (your theme’s contrast colour) instead of white, when that reads better.
• Changed: A Sticky column’s „Disable on mobile“ is now „Pin on“: desktop only, desktop and tablet, or all screen sizes. Columns saved before keep what they did.
• Changed: A Row that stacks on smaller screens lines its children up along its horizontal alignment, as WordPress does; vertical Stretch keeps them full width. Its gaps accept spacing presets and clamp().
• Fixed: Grinner effects and blocks no longer make a page scroll sideways on phones, including pinned stickers, corner marks, rotating text, sideways animations, full-width bands and Image Sliders with side padding.
• Fixed: The Logo Marquee, Image Slider and Scrolling Text no longer stretch a card or column they sit in to thousands of pixels wide.
• Fixed: An Image Slider set to manual scroll loops endlessly on block themes such as Twenty Twenty-Five (it used to stop at the end), and crosses its loop point without a jump.
• Fixed: An image sized with Max width keeps its size in a Row beside long text, up to half the Row and never beyond the photo’s own size; it used to shrink.
• Fixed: An SVG in an Image block that WordPress has no size for is no longer invisible as a pinned sticker, centred or in a row: it takes the size set in its file, and elsewhere fills its column as before. An SVG’s Max width is now its size; for photos it stays a cap.
• Fixed: A group in Hero Mode with Stagger children plays its children’s entrance on desktop; they used to stay still.
• Fixed: Hover on each card no longer cancels a staggered entrance on the same group.
• Fixed: Buttons using Slide Fill, Text Flip, Grow or Circle Expand show your site’s button colour from Styles.
• Fixed: Hover effects on buttons styled in Styles: Grow keeps the button’s own shape and hover colours; Text Flip shows the label in your button’s text colour and no longer crops it with a tight line height; Ghost Fill fills with your button’s own colours and shows its outline on phones and in the editor too; a gradient button’s fill slides in over the gradient.
• Fixed: Text Flip on a button with formatted text flips the label as one unit, formatting included, and pressing a Text Flip button with a mouse no longer drops it back to its resting colour.
• Fixed: Buttons with Slide Fill, Text Flip or Circle Expand are no taller than the button, so their bottom corner marks sit on its corners and a row of mixed buttons lines up.
• Fixed: Only the image you mark Priority gets high priority. A featured image shown above the content no longer takes a second high-priority slot, and on sites using LiteSpeed Cache the priority image keeps its head preload when the same picture also appears earlier on the page.
• Fixed: The Video Embed, Lottie and Before / After blocks no longer disappear inside a Row or Stack, or inside a Group that sits in one; the Image Rotator and an Icon left at its default alignment follow the Row, Stack or Group they sit in; and a YouTube Shorts video is centred on your site as it is in the editor.
• Fixed: A pinned sticker set to „Behind the content“ sits behind the section’s text and in front of its background, on the page and in the editor; it used to paint over the text.
• Fixed: Parallax on a group’s children keeps pinned stickers where they were placed, and parallax on an image narrower than its column no longer shows the zoomed picture past the image’s own edge.
• Fixed: The Grinner Table is read as a table by screen readers (rows, column headers, row headers and cells), with an optional Table name. It looks the same.
• Fixed: The Avatar Stack shrinks to fit a narrow screen instead of running off the side.
• Fixed: Scrolling Text’s Full Width Breakout spans the whole screen even when the block has side margins or sits inside a constrained group.
• Fixed: A Text Rotator set to a large size sits like a heading of the same size instead of leaving extra space above and below.
• Fixed: Count up animates numbers written with their unit, such as 0.8s, 180KB or 3x.
• Fixed: With the Accordion’s Open animation on, answers are spaced as without it.
• Fixed: Line breaks inside headings and paragraphs using the Word by Word, Stagger Fade or Assemble effect are kept.
• Fixed: On touch screens, scrolling the page across a Before / After slider no longer moves the divider.
• Fixed: The Image Rotator no longer causes a layout shift each time its loop wraps, and images added without a web address (by a pattern or an import) show in the editor.
• Fixed: Colour settings in the Before / After, Avatar Stack and Image Slider blocks accept colours only.
• Fixed: Font size pickers in Grinner panels list the same sizes as WordPress’s own, including sizes added in Styles, and keep the size you pick when several share one base size.

1.6.1

• New: Stickers on the core Image block: Spin, Rock, Float or Turn on scroll, pinned anywhere over a section by one of nine anchors and a nudge, in front of or behind the content, and optionally hidden on phones. A sticker never takes the page’s priority image slot.
• New: Play button settings for the Video Embed: size, fill colour, ring colour and pulse spread.
• Changed: Grinner Blocks now works with WordPress 6.5 and later.
• Improved: Accordion answers slide shut as well as open.
• Fixed: The Lottie block’s width now shows in the editor as it does on the page.
• Fixed: Word by Word animates each word of formatted text separately instead of treating the formatted words as one.
• Fixed: The Word by Word, Stagger Fade and Assemble effects show correctly on sites that remove unused CSS.
• Fixed: A Lottie animation on the first screen no longer stays on its poster when scripts arrive late.
• Under the hood: Output escaping tightened throughout, following the WordPress.org review.

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.

Earlier versions (1.4.2 and before) are listed in changelog.txt, included in the plugin.