Add a Rich Text Terminal Window to WordPress Posts With Terminal Block
Terminal Block is a WordPress block plugin for displaying rich text in an animated terminal window. It’s compatible with WordPress 5.9 or higher and is available in the Block Directory.
npx @wordpress/create-block tutorial
Done: WordPress plugin “Tutorial” bootstrapped in the “tutorial” directory.
WordPress development site started at http://localhost:8888/
WordPress test site started at http://localhost:8889/
MySQL is listening on port 51533
MySQL for automated testing is listening on port 51536
✔ Done! (in 0s 787ms)
I scaffolded Terminal Block using the WordPress Create Block tool and adapted its style and animations from Termynal by Ines Montani. It’s an InnerBlocks component-based block that wraps custom RichText component-based Command, Output, and Progress Bar blocks and the core Spacer block.
The first iteration of Terminal Block was an HTML block. It loaded the Termynal script and stylesheet and enabled using the Termynal HTML API directly. On the one hand, this approach was straightforward to implement and allowed for using all features of Termynal immediately. But, on the other hand, it went against the what you see is what you get nature of the Gutenberg block editor.
One of the primary tenets of Gutenberg as a WYSIWYG editor is that what you see in the editor should be as close as possible to what you get when published.WordPress Create a Block Tutorial
Terminal Block’s current design makes it so that what you see in the editor looks similar to what you see when you hit publish.
For me, Terminal Block is, first and foremost, an active learning project. Therefore, its development progress follows my learning progress. Next, I plan to brush up on CSS fundamentals and make style improvements to Terminal Block.