About this plugin
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).
- onComplete callback: 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.yourFunctionName in 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:
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.js via the build step; source available at the link above.