Àpèjúwe
Basalio is a focused set of interaction blocks for people who build portfolio and case-study sites in the WordPress block editor. It is not a page builder or a general animation engine. It adds the motion that makes creative work feel considered, and nothing else.
Every block is a native Gutenberg block. There is no separate canvas, no shortcode, and no page-builder lock-in. Add a Basalio block the same way you add a paragraph, set its options in the block sidebar, and the effect renders on the front end.
What is in the box
- Grid Reveal, a portfolio tile that reveals its caption on hover, focus, or tap.
- Case Study Transition, a cross-page shared-element transition from a grid tile to its case-study page.
- Text Reveal, a choreographed entrance for a headline, subhead, and optional button.
- Magnetic Button, a call-to-action that gently pulls toward the visitorÌtumọ̀ Yorùbá: ’s cursor.
- Before / After, a draggable, keyboard-operable image comparison slider.
- Filterable Grid, a portfolio grid visitors can filter by discipline, with a Grid Item child block.
- Custom Cursor, a soft cursor accent for a bounded region of the page.
- Scroll Sequence, a frame-by-frame image sequence driven by scroll position.
- Pinned Scroll, an image that stays pinned while its story scrolls beside it.
Built for restraint and access
- Motion respects the visitorÌtumọ̀ Yorùbá: ’s “reduce motion” system setting.
- Pointer effects are disabled on touch, where they would only get in the way.
- The shared front-end script loads only on pages that actually contain a Basalio block, never site-wide.
Àwọn àwòrán ìbòjú







Àwọn ìdí
Plugin yìí pèsè 10 àwọn ìdí.
- Basalio: Pinned Scroll Pin an image beside a story that scrolls. As the reader moves through the text, the image stays in view. Under reduced motion it becomes a normal, stacked layout.
- Basalio: Custom Cursor Adds a branded cursor accent that follows the pointer inside this area. Pointer only, off on touch and under reduced motion. It never covers what you click.
- Basalio: Scroll Sequence Play a sequence of frames tied to scroll position, like a flipbook. Always includes Previous and Next buttons, so it works without scrolling too.
- Basalio: Case Study Transition Shared-element view transition from a portfolio grid tile to its case-study hero. Uses the cross-document View Transitions API with a silent fallback to plain navigation.
- Basalio: Filterable Grid A portfolio grid visitors can filter by discipline. Filter buttons are generated from each item's category. Real, keyboard-operable buttons, with results announced to screen readers.
- Basalio: Text Reveal Staged entrance for a headline, subhead, and optional CTA, with optional word-by-word reveal. CSS-only, so the real text is in the DOM and screen-reader-readable immediately.
- Basalio: Magnetic Button A call-to-action button that subtly pulls toward the pointer. Pointer-only and off on touch; fully keyboard-operable with a clear focus state; static under reduced motion.
- Basalio: Before / After An interactive before/after comparison slider. Drag the divider or use the arrow keys. A real ARIA slider, keyboard-operable and touch-friendly.
- Basalio: Grid Reveal Hover- and focus-triggered caption reveal for portfolio grid items. Keyboard-accessible, reduced-motion aware, and tap-to-reveal on touch.
- Basalio: Grid Item A single portfolio item inside a Basalio Filterable Grid. Its Category feeds the grid's filter buttons.
Ìgbéwọlẹ̀
- Upload the
basaliofolder to/wp-content/plugins/, or install the plugin zip through Plugins, Add New, Upload Plugin. - Activate Basalio through the Plugins screen in WordPress.
- In the block editor, add any block whose name starts with “Basalio” and fill in its fields.
There is nothing to configure globally. Each block carries its own settings.
FAQ
-
Is this a page builder?
-
No. Basalio is a focused set of interaction blocks. It works inside the standard WordPress block editor and leaves the rest of your layout to your theme.
-
Will the effects slow down my site?
-
The shared script is small and loads only on pages that contain a Basalio block. Pages without one load nothing extra.
-
Are the blocks accessible?
-
Yes. Every interactive element is keyboard operable and screen-reader labeled. Pointer effects like Custom Cursor have no keyboard equivalent by design — they are decorative and never carry information or function.
-
Does it work with my theme?
-
Basalio targets standard block themes and classic themes that support the block editor. The blocks inherit your themeÌtumọ̀ Yorùbá: ’s spacing and alignment controls where it makes sense.
Àwọn àgbéyẹ̀wò
Kò sí àwọn àgbéyẹ̀wò fún plugin yìí.
Àwọn Olùkópa & Olùgbéejáde
“Basalio” jẹ́ ètò ìṣàmúlò orísun ṣíṣí sílẹ̀. Àwọn ènìyàn wọ̀nyí ti ṣe ìkópa sí plugin yìí.
Àwọn OlùkópaṢe o nífẹ̀ẹ́ sí ìdàgbàsókè?
Ṣàwárí koodu, ṣàyẹ̀wò ibi ìpamọ́ SVN, tàbí ṣe àgbékalẹ̀ sí àkọsílẹ̀ ìdàgbàsókè nípasẹ̀ RSS.
Àkọsílẹ̀ àwọn àyípadà
0.6.6
- Validate filtered CSS token names, values, and the final stylesheet before inline output.
- Apply the same CSS validation to motion parameters and token fallbacks.
- Escape composed block HTML at output while preserving supported interactive controls.
0.6.5
- Image blocks that render outside a named link or button now fall back to the attachmentÌtumọ̀ Yorùbá: ’s media-library alt text when the author leaves the alt field empty.
- Pinned Scroll link path no longer produces an unnamed anchor: it adds an aria-label only when the linked image has no alt text.
0.6.4
- Move per-instance transition CSS to the stylesheet instead of an inline element.
- Harden output escaping and validate the view-transition name as a CSS custom-ident.
- Remove an unimplemented Character split option from Text Reveal.
0.6.0
- Accessibility audit debt release. Resolves the findings from the 0.5.1 audit.
- Scroll Sequence: Previous/Next buttons now advance frames authoritatively by scrolling to the matching position; they work under reduced motion even when controls are hidden.
- Lightbox: rebuilt as a native
<dialog>element opened with.showModal(), giving the browser-native focus trap, Escape-to-close, and inert background. - Pinned Scroll: fixed reading/focus order when the media is positioned on the right.
- Image alt handling is now robust across every image block via a shared helper; author-entered alt always wins, including an intentional empty value.
- Filterable Grid: uncategorised items now get their own “Uncategorized” filter button.
- Before / After: improved mobile touch handling and more informative screen-reader value text.
- Magnetic Button, Custom Cursor, and Scroll Sequence now respond live to a mid-session
prefers-reduced-motionchange. - Custom Cursor default color unified to the Basalio brand chartreuse (#DFFF00).
- Editor asset versions and release tags aligned to 0.6.0.
0.5.1
- Accessibility fixes found in a full audit of every block. Details below.
- Pinned Scroll: the “expand image” lightbox button did nothing when a Pinned Scroll block was the only Basalio block on a page, because the shared script was never loaded. Fixed, and fixed at the root so no future block can repeat it.
- Scroll Sequence: alt text typed in the editor is no longer discarded in favour of the media libraryÌtumọ̀ Yorùbá: ’s own alt.
- Scroll Sequence: scrolling no longer interrupts screen readers on every frame. The frame count is now announced only when the Previous or Next buttons are used.
- Scroll Sequence: frames that are not on screen are properly hidden from screen readers, so a six-frame sequence is announced as one image, not six.
- Filterable Grid: a portfolio item that is linked but has no alt text now takes its accessible name from the visible title, instead of being an unlabelled link.
- Filterable Grid and Scroll Sequence: the result count, the “All” filter label, and the frame counter are now translatable. Previously they reverted to English on non-English sites.
- Lightbox: the dialogÌtumọ̀ Yorùbá: ’s own labels are now translatable.
- Case Study Transition: the morph now defaults to 300ms and is limited to 150-600ms, with a warning in the editor above 400ms. It previously defaulted to 500ms and allowed up to 3 seconds, which is uncomfortably long for a large moving image. If you set a custom speed above 600ms it will now render at 600ms. Blocks left at the default get a faster morph than before.
- Added an automated accessibility test suite (33 checks) that runs against real rendered output.
0.5.0
- Big configurability pass across every block:
- Image blocks (Grid Reveal, Case Study Transition, Filterable Grid items, Pinned Scroll) gain a corner-radius field, an optional Link URL, and an optional built-in lightbox (accessible, Escape to close).
- Grid Reveal: choose a tile aspect ratio.
- Before / After: choose an aspect ratio (16:9, 1:1, portrait, and more).
- Text Reveal and Case Study Transition: adjustable animation speed.
- Magnetic Button: now sits exactly where placed, with a left/center/right alignment option.
- Filterable Grid: arrow-key navigation across the filter buttons, plus a button-radius control.
- Custom Cursor: upload your own cursor image or SVG.
- Scroll Sequence: no more letterbox padding, an optional counter, and custom counter text.
- Pinned Scroll: adjustable image width.
0.4.4
- Extended theme hardening to text color: on some light themes the Filterable Grid filter labels and Magnetic Button text picked up the themeÌtumọ̀ Yorùbá: ’s button text color and became unreadable. Their colors are now locked to the block palette.
0.4.3
- Theme compatibility: hardened every block control (the Grid Reveal overlay, Filterable Grid pills, Before / After handle, Scroll Sequence steps) so a themeÌtumọ̀ Yorùbá: ’s generic button styling can no longer repaint them. Fixes Grid Reveal tiles showing as solid blocks in some classic themes, for example Twenty Twenty-One.
0.4.2
- Removed the last stray accent colors (a couple of focus outlines and the Custom Cursor default), so every block now uses the black, white, and chartreuse palette consistently.
0.4.1
- Fixed the Before / After slider not taking keyboard focus when grabbed by mouse or touch, so the arrow keys now move the divider after a click, as they already did after tabbing to it.
0.4.0
- Beta hardening pass ahead of launch.
- Wired plugin translation loading and per-block editor-script translations, and added a translation template.
- Verified every block renders cleanly in WordPress with both full and empty content, with no PHP notices or warnings.
- Confirmed output escaping and input sanitization across all blocks.
0.3.0
- Completed the full block set, nine insertable blocks plus one child block.
- Redesigned the block editor chrome to match native Gutenberg styling.
