Skip to content

stephin-gasper/sg-typing-text-block

Repository files navigation

SG Typing Text Block

A Gutenberg block for showing typewriter animation for text

Description

Create eye-catching animated typing text for your website when the block is used within the Wordpress Gutenberg editor. Useful for showing multiple texts, each text replacing old one with typewriter effect.

Features

  • Content: Interactive interface for adding texts which can be deleted and dragged to change position
  • Prefix and Suffix: Add prefix and suffix text around the typing.
  • Options: Configure the typing such as Type Speed, Delete Speed, Pause time, enable/disable Loop.

Installation

Upload

  1. Download the latest tagged archive (choose the "zip" option).
  2. Go to the Plugins -> Add New screen and click the Upload tab.
  3. Upload the zipped archive directly.
  4. Go to the Plugins screen and click Activate.

Manual

  1. Download the latest tagged archive (choose the "zip" option).
  2. Unzip the archive.
  3. Copy the folder to your /wp-content/plugins/ directory.
  4. Go to the Plugins screen and click Activate.

Check out the Codex for more information about installing plugins manually.

Git

  1. Using command line, browse to your /wp-content/plugins/ directory and clone this repository.
  2. Then go to your Plugins screen and click Activate.

Local development

  1. Clone or download this repository inside /wp-content/plugins/ directory.
  2. Navigate to the block folder using the command line: cd sg-typing-text-block.
  3. Install the required dependencies using: npm install.
  4. Go to the Plugins screen and click Activate.

Starting development server

Run following command: npm run start

Creating local build

Build the block using: npm run build.

For publishing plugin

Zip the necessary files for plugin using: npm run plugin-zip.

Usage

  1. First, install the Typing Text Block plugin.
  2. Add the Typing Text Block block from the block category called “Widgets” in the Gutenberg editor.
  3. You can change block settings from the right-side settings sidebar and from the toolbar above the block.
  4. Enjoy!

Screenshots

Default Text editor Toolbar more Toolbar more option clicked

Contributors

Stephin Gasper - stephingasper.com

License

This plugin is licensed under the MIT License - see the LICENSE file for details.