內容簡介
Grinner Blocks 是一套為 WordPress 設計的原生區塊與控制項，專注於建立現代化的著陸頁。此外掛無需額外付費，並且在使用時不會影響網站效能，適合希望簡化頁面建置的使用者。
【主要功能】
• 無需 JavaScript 的高效能區塊
• 所有功能免費，無鎖定特性
• 直接在編輯器中編輯與調整內容
• 提供多種著陸頁功能，如動畫標題與計數器
• 支援觸控螢幕的互動設計
• 簡易的圖像比較滑桿與文字輪播功能
外掛標籤
開發者團隊
原文外掛簡介
See every block and effect in action at 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: 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 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 and when scrolled off-screen.
Image Slider — the same continuous loop for photography, with fades, captions, hover effects and optional links. It can also 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. 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), 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. The player library loads only when an animation starts, and you choose whether it starts once the page has loaded or on the visitor’s first touch or scroll.
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
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.
A sticky call-to-action bar, whose buttons can stretch across the bar on phones, and clickable Group / Columns blocks where nested links still work independently.
Layout reveals, text gradients and inline text icons.
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.
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.
Performance and accessibility
Every block’s CSS and JavaScript loads only on pages that actually use it, and the stylesheets and scripts visitors download carry no developer comments. 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. 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. 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: a 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 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
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, 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.
