Jupa - Typed Text
| 开发者 | jupa8 |
|---|---|
| 更新时间 | 2026年9月19日 23:21 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
- Types through multiple lines in sequence, each one a normal paragraph block inside the editor.
- Configurable typing speed, backspacing speed, start delay, and delay before repeating.
- Toggle the blinking cursor, looping, smart backspace, and shuffle (random line order).
onCompletecallback: run a custom JavaScript function (window.typed.onComplete.yourFunctionName) once the animation finishes.- Full color support (text, background, links) and typography controls (font size, line height) from the block sidebar, no custom CSS required.
- Each block instance gets a unique ID automatically, so duplicating or pasting the block never causes ID collisions.
- Insert the "Typed Text" block from the inserter.
- Write one or more lines of text; each paragraph inside the block becomes a line in the animation.
- Open the block sidebar to adjust typing speed, delays, cursor, loop, smart backspace, and shuffle.
- Optionally, set a function name under "Callbacks > On complete" and define
window.typed.onComplete.yourFunctionNamein your theme or plugin JavaScript to run code when the animation finishes.
安装:
- Upload the plugin files to the
/wp-content/plugins/jupa-typed-textdirectory, or install the plugin through the WordPress plugins screen directly. - Activate the plugin through the "Plugins" screen in WordPress.
- Insert the "Typed Text" block from the block inserter.
屏幕截图:
常见问题:
Can each line have different formatting?
Yes. Each line is a standard paragraph block, so bold, italic, links, and other inline formatting work normally.
How do I use the "On complete" callback?
In the block sidebar, under "Callbacks > On complete", type a function name (for example myCallback). Then, in your theme or plugin JavaScript, define that function on window.typed.onComplete before the block's script runs:
window.typed = window.typed || {}; window.typed.onComplete = window.typed.onComplete || {}; window.typed.onComplete.myCallback = function () { // Runs once the typing animation finishes. };
If loop is enabled, the callback runs every time the animation completes a cycle, not just once.
What happens if I don't set an "On complete" function?
Nothing extra happens; the animation just finishes and, if looping is enabled, starts again.
Does this work in the Site Editor / FSE templates?
Yes, it's a standard block with apiVersion: 3 and works anywhere blocks are supported.
更新日志:
- Fix: per-paragraph text color (set from the block sidebar) was not being applied on the frontend, because the typing animation only used the inner text and dropped the paragraph's own style/class.
- Fix: the blinking cursor could appear on its own line after the fix above; it now stays inline right after the typed text.
- Initial standalone release, packaged from the Jupa Gutenberg Blocks collection.