• Blog
  • Changelog
  • codesue

  • About
  • Contact

codesue

Add a Rich Text Terminal Window to WordPress Posts With Terminal Block

August 8, 2022

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.

cd tutorial

wp-env start

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)

Inspiration

I primarily built Terminal Block as an active learning project to practice what I learned in the Beginner Javascript and React for Beginners courses I completed earlier this year. I decided to make a WordPress block because I happily host my blog on WordPress. Also, I wished this feature existed and wanted to contribute to the community.

Design

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.

Terminal Block Editor View

Terminal Block Editor View

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.

Terminal Block Editor View With Placeholders

Terminal Block Editor View With Placeholders

What’s next?

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.

Resources

  • Terminal Block’s Source Code
  • WordPress Create a Block Tutorial
  • Building Custom Gutenberg Blocks: The Definitive Block Development Tutorial
  • How to enable Inner Blocks in your Gutenberg Block
  • How to Build & Publish Gutenberg Block Plugins to the Block Directory
TAGS:active learningJavaScriptWordPress
4 Comments
Share

Leave a Comment Cancel Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

The Comments

  • Micah
    August 11, 2022

    Very cool project!

    Reply
    • suzenfylke
      Micah
      August 12, 2022

      Thanks, Micah!

      Reply
  • MSG
    December 25, 2022

    Hello

    Thank you for Terminal Block plugin.
    How to use custom prompt?
    default is $
    I would like to use # sometimes.

    Reply
    • Suzen Fylke
      MSG
      December 26, 2022

      Hi, MSG. Thank you for trying out Terminal Block! Here’s how to use a custom prompt:

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

      command block settings sidebar

      I’ve updated the plugin’s homepage to include these instructions.

      Reply

You May Also Like

August 22, 2022

Making Any Wikipedia Topic Dystopian

September 26, 2022

Exploring the Swedish Kelly List Dataset

Hi, I’m Sue 👋
Hi, I’m Sue 👋

Hi, I’m Sue 👋

I’m a software engineer who builds tools that empower people to do their best work. I enjoy studying linguistics and hacking on tech that makes learning languages fun and approachable.

  • Blog
  • Changelog
  • About
  • Contact

COPYRIGHT © 2022 SUZEN FYLKE. Site Designed by Pix & Hue.