https://github.com/stephin-gasper/sg-typing-text-block

A Gutenberg block for showing typewriter animation for text
https://github.com/stephin-gasper/sg-typing-text-block

gutenberg-blocks reactjs repeater typing-animation wordpress-plugin

Last synced: 3 months ago
JSON representation

A Gutenberg block for showing typewriter animation for text

• Host: GitHub
• URL: https://github.com/stephin-gasper/sg-typing-text-block
• Owner: stephin-gasper
• License: mit
• Created: 2024-01-14T09:15:33.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-19T17:50:56.000Z (about 1 year ago)
• Last Synced: 2025-01-16T04:12:14.382Z (5 months ago)
• Topics: gutenberg-blocks, reactjs, repeater, typing-animation, wordpress-plugin
• Language: JavaScript
• Homepage:
• Size: 795 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://wordpress.org/documentation/article/manage-plugins/#manual-plugin-installation-1).

### 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](https://i.postimg.cc/ydBw26Ls/Default-view.png)

![Text editor](https://i.postimg.cc/pdLWBR4N/text-editor.png)

![Toolbar more](https://i.postimg.cc/x1RjHcsy/toolbar-more.png)

![Toolbar more option clicked](https://i.postimg.cc/wB46fnY1/toolbar-more-option-clicked.png)

## Contributors

Stephin Gasper - [stephingasper.com](https://stephin-gasper.vercel.app/)

## License

This plugin is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.