Grinner Blocks

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.

Technical details