Typewriter block

Description

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.

Screenshots

  • Examples, showing how Typewriter block looks on the frontend.

Blocks

This plugin provides 1 block.

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

Installation

Upload the plugin zip file using wp uploader from the plugin page or install it through the plugin library.

FAQ

  • Can I have multiple typewriter elements on the single page?

    Yes you can!

  • Can I adjust the typing speed?

    Of course, in the block settings you can adjust it, bear in mind that 0 means natural speed, while the greater number means slower typing.

  • Can I set the text to bold or italic?

    Yes you can, by using the options when you click on the text element.

  • Can I change the color of the text?

    Absolutely, and you can do that using block settings.

  • Can I change the background color of the element?

    Absolutely, and you can do that using block settings.

  • Can I change the cursor?

    Yes, there is a field in the block settings that is doing exactly that. Where you can specify the cursor you want!

  • Can I change the cursor color?

    Yes, but you will need to add custom class to the cursor using block settings, and then you can style the cursor anyway you want!

  • Can I Use multiple lines?

    Yes, please check the example below!

  • Can I use smileys? 🙂

    Certainly, check the example below.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“Typewriter block” is open source software. The following people have contributed to this plugin.

Contributors

“Typewriter block” has been translated into 1 locale. Thank you to the translators for their contributions.

Translate “Typewriter block” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.0.0

  • Release