Descrizione
Jupa Typed Text adds a block that types out one or more lines of text with a realistic typewriter animation, powered by Typed.js. Each line is a regular paragraph block, so you can format text, add links, or use any inline formatting the editor already supports.
Simple and easy to use straight from the block inserter, with no configuration required to get started, yet fully customizable when you need it: typing speed, delays, cursor, looping, colors, typography, and even a callback for when the animation finishes.
Video Tutorial
Features
- 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.
Usage
- 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.
Source Code
This plugin’s build/ directory contains a minified/compiled JavaScript bundle generated with @wordpress/scripts (webpack). The human-readable source is included in the src/ directory of this plugin, and is also publicly available at:
https://github.com/jupa8712/jupa-typed-text
To regenerate the build/ files from source: npm install && npm run build.
Third-party libraries
- Typed.js v3.0.0 — MIT License, Copyright (c) Matt Boldt. Bundled into
build/view.jsvia the build step; source available at the link above.
Screenshot
Blocchi
Questo plugin fornisce 1 blocco.
- Typed Text Is a block that types.
Installazione
- 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.
FAQ
-
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 onwindow.typed.onCompletebefore 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: 3and works anywhere blocks are supported.
Recensioni
Non ci sono recensioni per questo plugin.
Contributi e sviluppo
“Jupa – Typed Text” è un software open source. Le persone che hanno contribuito allo sviluppo di questo plugin sono indicate di seguito.
Collaboratori
Traduci “Jupa – Typed Text” nella tua lingua.
Ti interessa lo sviluppo?
Esplora il codice segui il repository SVN, segui il log delle modifiche tramite RSS.
Changelog
1.0.1
- 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.
1.0.0
- Initial standalone release, packaged from the Jupa Gutenberg Blocks collection.