December 26, 2022

Terminal Block Plugin

Display rich text in a terminal window.

Add a rich text terminal window to WordPress posts with Terminal Block.

Terminal Block supports the following display and animation styles:
* Command: displays a prompt with user input and a cursor, uses typing animations
* Output: displays output text, does not use typing animations
* Progress: displays an animated progress bar

This block’s style and animation are adapted from termynal.js version 0.0.1 by Ines Montani, licensed under MIT license.

The plugin icon is terminal icons created by Bharat Icons – Flaticon.

Installation

Upload the plugin files to the /wp-content/plugins/terminal-block directory, or install the plugin directly through the WordPress plugins page.
Activate the plugin through the ‘Plugins’ page in WordPress.
Search for the block within the Gutenberg block editor.

Screenshots

By default, each command line is prefixed with "$".
Terminal Block also supports custom prompts, such as ">>>".
You can change the terminal's title and colors in the block setting sidebar.
You can change the prompt used for a command in the block settings sidebar.

FAQ

How do I use custom prompts?

Select the commmand block you would like to have a custom prompt.
Select “Block” in the settings sidebar.
Change the prompt from “$” to your custom prompt in the “Prompt Settings” section.

Does this block use similar typing animations to termynal.js?

Yes, typing animations are supported as of version 0.1.1.

Changelog

0.1.3

Test up to WordPress 6.1
Set up linting and CI workflows

0.1.2

Fix theme style bleeding into editor view
Add support for user defined accent color for prompt and title

0.1.1

Use inner blocks for terminal inputs, outputs, and progress bars
Add animation
Add Fira Mono font

0.1.0

Initial release