Home Plugins typewriter block
Typewriter block logo

Typewriter block

by Djordje Arsenovic on WordPress.org

Block that uses css animation to make the text appears like it was written on the old-fashioned typewriter machine

(0)
Examples, showing how Typewriter block looks on the frontend.

Examples, showing how Typewriter block looks on the frontend.

The plugin creates custom block called Typewriter. To that block you can add some text, which will appear on the fronted as it was typed out on the
old fashioned typewriter machine.

You can have multiple Typed out elements on the single page or post, or custom post.

Basic Usage

Go to the page where you want to add the Typewriter block, after that add new block and find the Typewriter block in the list. When you add it, add some text to the block, save the page and that’s it. You will see the typewrite effect.

Settings

1) Curosr – What would you like to appear as cursor for example you can use the pipe character (|) or underscore (_) or something else.
2) Element type – Which tag you should see on the front-end available options: H1 – H6, paragraph, span
3) Loop – Check this checkbox if you want the typing effect to repeat
4) Typing Delay – The delay between each key when typing. By default it’s natural. The higher the delay value the slower the typing speed will be. (0 means natural typing speed).

Custom developer settings

This plugin was built by developers for developers in mind that would like to extend the plugin functionality. So both cursor and the wrapper element can have their custom class which you can use in the theme css or where you want.
1) Cursor CSS class
2) Wrapper CSS class

Words Settings

Words panel in the block options is a special feature of the plugin where you can add some words which will be deleted and typed one by one. Checkout screenshots for easier understanding.

This can be done by it’s own or in combination with the text from the post.

For example:
In the post and typewriter block add some spaces and then in the words section add: Pancakes, PopCorn, Chocolate
Only those words will replace each other.

Or another example you could add a text in the Typewriter element:
“I like ” and same words in the words section of the block settings then those words will replace each other but with the prefix of I like.

Active installations0+
Weekly downloads
17-22.73%
Version1.0.0
Last updated3/15/2025
WordPress version6.7
Tested up to6.7.2
PHP version7.4
Tags
block