Lorem ipsum dolor sit amet, Mi est malesuada quam senectus et nec lectus pellentesque. Inceptos rutrum scelerisque occaecat quam auctor platea id. Eu erat urna maecenas quam lacinia dis. Porttitor phasellus posuere massa pulvinar porttitor himenaeos dolore. Nulla fames morbi natoque habitasse velit mauris. Interdum voluptate luctus habitasse urna semper quis imperdiet. 

Dapibus vivamus massa ornare dui praesent. Arcu arcu facilisis scelerisque dis sem ut. At anim nulla natoque risus lacinia. Porta mattis nullam tellus accumsan hac. 

Eget nullam netus dictum fames vivamus. Placerat habitant gravida congue ullamcorper occaecat. Fermentum leo qui orci faucibus fringilla dolore quam etiam.

This is another wall of text

Lorem ipsum dolor sit amet, Tempus libero eiusmod rhoncus per duis imperdiet purus tincidunt est mollit. Ut tristique habitant cras ligula viverra culpa enim massa proin. Volutpat quam tellus eu non ultricies proin vulputate duis consectetur. Ridiculus sed mollis neque at ornare tristique cras eget. Mi adipiscing turpis litora dui nam faucibus primis per condimentum nostra. Arcu venenatis malesuada hendrerit luctus volutpat eu mauris quisque mattis iaculis odio. Tellus potenti per amet lobortis cras quis magna sollicitudin. Fermentum volutpat nullam fames auctor penatibus euismod officia facilisi tellus. 

Suscipit vulputate primis sem pulvinar est labore et pharetra molestie mollis dictum. Dolor suscipit dignissim lacinia nullam arcu senectus pretium. Sed iaculis ad do tempus massa est imperdiet habitant ea. Odio torquent magna himenaeos consequat litora pulvinar himenaeos donec gravida non duis. Eros risus facilisis himenaeos habitant vulputate ipsum dui nascetur non. Ultricies arcu at quam dis excepteur pharetra aliquet id. Porttitor congue et litora commodo facilisis dictum pretium. Aptent aenean praesent facilisi massa sit risus risus. 

Curabitur arcu vehicula nisi justo justo sagittis faucibus urna nunc nostra ultricies. Laoreet odio hac rutrum quis eu odio vestibulum orci penatibus deserunt voluptate. Suscipit habitasse in eu fames penatibus felis ultrices potenti magna. Senectus eu viverra per facilisi ligula hac turpis sagittis leo platea laboris. Fermentum non quam vel sed pellentesque platea class. Nulla vehicula mollis primis tellus interdum posuere nec mollis scelerisque at natoque. In eget eiusmod penatibus fusce pharetra fringilla hendrerit id aliqua dui nisi. Congue interdum hac veniam orci pharetra dolor parturient lacus consequat vivamus quisque. 

Quisque class nullam enim commodo dui culpa proident ante consectetur. Pariatur suscipit sociis nunc magna magna neque tortor egestas tincidunt. Eu do posuere sed morbi mus donec semper pretium. Aliquam est varius odio dignissim eget et excepteur magna. Sociosqu mi mollis hendrerit commodo odio ut donec lacus. Sociis voluptate dolor rhoncus nulla nibh phasellus potenti leo. 

Ullamcorper posuere eleifend lectus class ornare eleifend non ullamcorper interdum. Adipiscing exercitation magna nam morbi anim in leo. Mauris ut porttitor non pellentesque cum felis etiam hac nostra. Leo officia per tincidunt parturient dapibus dolor lorem. Massa sociis dapibus vivamus habitasse fringilla sem est nam qui lacus. Ea purus egestas ab vestibulum ut donec penatibus. Neque molestie nam hac lobortis egestas et phasellus sed quisque aliquam ex. Natoque semper nulla tristique aliquet lectus neque dapibus. Cubilia primis vivamus nullam scelerisque elementum turpis curabitur egestas sagittis venenatis. 

Fermentum habitant quisque vitae venenatis cillum accumsan maecenas sociosqu tellus scelerisque volutpat. Habitant ultricies cubilia integer mattis placerat himenaeos vestibulum dolor efficitur magna. Tortor penatibus aliquip iaculis vestibulum aliquam gravida orci metus. Integer exercitation dictumst vulputate quis pulvinar nisi sollicitudin massa pharetra arcu. Aliquet pharetra porttitor cillum tempus nec lectus vel senectus sociis himenaeos proin. 

Dis ad quisque posuere voluptate iaculis blandit egestas cillum. Ultricies mus nascetur maecenas tincidunt mollit bibendum placerat. Ligula potenti venenatis nisi tempor tempus vulputate cras excepteur felis. Metus pretium sapien vel nisi purus eu pretium lacinia eu condimentum. Amet malesuada proin pulvinar primis interdum platea mus vestibulum. Gravida class dis quis platea do class ornare. Adipiscing purus dapibus molestie dignissim elementum hendrerit sed. 

Integer integer irure quam sodales vehicula id senectus dictumst ut lobortis mauris. Lacinia montes primis vestibulum aliquet fringilla mollis est nunc ornare et. Commodo porta orci fames exercitation amet ab tincidunt. Class vel est amet tempus urna augue netus. Et vestibulum diam cubilia pharetra duis nascetur tempor aliquet mollis. Inceptos nec nec duis proin fermentum aliquam erat suspendisse in. Nullam venenatis leo sem sollicitudin ad congue convallis consequat magna. Adipiscing dictumst vivamus nunc ullamcorper massa id pellentesque primis. At luctus fringilla laborum urna mollis porttitor phasellus.

This is a wall of text.

[Terminal Block](https://wordpress.org/plugins/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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVa1LaQF4MLgSNebBnMiTSJQiQrR2%2FJFTGGtcSHa3TDSsmlzzq%2F1a564e84-1b60-4c64-a2a3-e98059c411d5.png?alt=media&token=46cfedf5-404d-4e93-a0c4-8646535f6747","id":"1a564e84-1b60-4c64-a2a3-e98059c411d5","width":1374,"height":554,"filename":"terminal_block_preview.png","type":"image/png","caption":"Still of Terminal Block","border":true}]}
```

### Inspiration

I primarily built Terminal Block as an active learning project to practice what I learned in the [Beginner Javascript](https://beginnerjavascript.com/) and [React for Beginners](https://reactforbeginners.com/) courses I completed earlier this year. I decided to make a WordPress block because I happily hosted 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](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/) tool and adapted its style and animations from [Termynal](https://github.com/ines/termynal) by [Ines Montani](http://ines.io/). The terminal window is an [InnerBlocks component](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components/inner-blocks). It wraps custom [RichText](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components/rich-text) Command, Output, and Progress Bar blocks and the core [Spacer block](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/spacer).

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVa1LaQF4MLgSNebBnMiTSJQiQrR2%2FJFTGGtcSHa3TDSsmlzzq%2F3e8247ab-3e8a-4d6b-b3e0-5629356ce297.png?alt=media&token=dd632b42-3a22-489b-bf34-31bdfafe72b7","id":"3e8247ab-3e8a-4d6b-b3e0-5629356ce297","width":1369,"height":890,"filename":"terminal_block_editor.png","type":"image/png","caption":"Terminal Block Editor View","border":true}]}
```

You can customize the style of the terminal window, prompts, and progress bars in the [Block Settings sidebar](https://wordpress.org/documentation/article/work-with-blocks/#block-settings). Additionally, you can format the text in Command and Output blocks using controls in the [Block Toolbar](https://wordpress.org/documentation/article/paragraph-block/#block-toolbar), similar to changing the style of text in a regular paragraph.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVa1LaQF4MLgSNebBnMiTSJQiQrR2%2FJFTGGtcSHa3TDSsmlzzq%2F0d5b8ff8-26f5-47e8-8073-1dfa38622252.png?alt=media&token=ad57e90e-7faa-4a10-9b6e-37cdcacbbfac","id":"0d5b8ff8-26f5-47e8-8073-1dfa38622252","width":1374,"height":984,"filename":"terminal_block_customized.png","type":"image/png","caption":"Terminal Block with Custom Styles","border":true}]}
```

The first iteration of Terminal Block was an [HTML block](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/html). 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](https://developer.wordpress.org/block-editor/getting-started/create-block/author-experience/)*

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.

### Demo

This video demonstrates how to use Terminal Block to add animated terminal windows to WordPress posts.

```cv
vimeo
{"url":"https://vimeo.com/800166076","width":426,"height":236,"thumbnail":"https://i.vimeocdn.com/video/1613806366-3a306f28b7a2be3e5ee082fb8377636f791328cb0dff0a1d662cb0445db823dc-d_295x166"}
```

If you’d like to try Terminal Block but don’t have a WordPress site, consider setting up a local WordPress environment using [wp-env](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/).

### 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

* [View Terminal Block in the WordPress Plugin Directory](https://wordpress.org/plugins/terminal-block/)

* [Terminal Block’s source code](https://github.com/codesue/terminal-block)

* [WordPress Create a Block Tutorial](https://developer.wordpress.org/block-editor/getting-started/create-block/)

* [Building Custom Gutenberg Blocks: The Definitive Block Development Tutorial](https://kinsta.com/blog/gutenberg-blocks/)

* [How to enable Inner Blocks in your Gutenberg Block](https://www.ibenic.com/enable-inner-blocks-gutenberg/)

* [How to Build & Publish Gutenberg Block Plugins to the Block Directory](https://richtabor.com/publish-blocks/)

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

##  Heading 1

Ut aliquet sagittis blandit. Fusce eros tortor, convallis vel ultrices sitamet, pulvinar vulputate risus. Mauris posuere ut orci facilisisscelerisque. Pellentesque quis urna orci. Vivamus placerat ante arcu, vitaevenenatis tortor convallis vel. Cras tempor felis purus, vitae tempustellus cursus sit amet. Sed lacinia diam id purus dignissim, et venenatisnibh luctus.

### Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel tortorvel mi rutrum elementum vitae vitae erat. Sed sollicitudin consectetur dui,ut congue metus. Maecenas eu feugiat sem. Aliquam erat volutpat. Utconsequat auctor lorem. Pellentesque hendrerit tortor nec aliquet molestie.Donec dignissim accumsan blandit. Sed enim diam, pellentesque nec ex a,mattis posuere nibh. Pellentesque habitant morbi tristique senectus etnetus et malesuada fames ac turpis egestas. Mauris fermentum egestasaliquam.

Morbi vel imperdiet dui. Vivamus eu gravida leo, at placerat sapien. Nullammollis dui sit amet accumsan luctus. Nullam eget odio non metus lacinialacinia. Nunc vehicula felis a dolor fringilla, nec congue dui tristique.Aenean finibus fringilla risus, vitae imperdiet dui auctor vitae. Nunctincidunt justo lectus, at varius nunc interdum at. Aliquam a molestiesapien, id hendrerit nunc.

---

In et venenatis nulla. Etiam vestibulum, magna et euismod sollicitudin,elit lectus vestibulum augue, sed finibus mauris sem in tellus. Nuncullamcorper lorem orci, sit amet euismod nibh sagittis sed. Sed orci nisl,mattis in lacus a, rutrum mattis nunc. Quisque interdum facilisis rhoncus.Sed ac viverra nunc. Aenean sed malesuada lacus. Donec condimentum ligulalibero, non rutrum nibh consequat nec. Aliquam elementum facilisis arcu necpretium. Sed hendrerit eros vel arcu dignissim, id luctus mi finibus.Aenean tellus sapien, tempor sit amet condimentum eget, mattis at tortor.Nulla eleifend interdum varius. Duis luctus metus at varius commodo. Fusceex lacus, maximus sed elit sit amet, accumsan facilisis justo.

### Lists

Unordered list:

* List Item 1

* List Item 2 

* List Item 3

Ordered list:

1. List Item 1

2. List Item 2 

3. List Item 3

> Mauris ultrices sagittis pulvinar. Nullam ultrices neque et tristiquepharetra. Cras sodales tellus ac eros euismod, eu tincidunt elit varius.Proin nec faucibus magna. Phasellus rhoncus ligula nec diam posuere sempervitae eget nunc. Donec elementum ultricies dolor, vel mollis nulla dapibusac. Sed pellentesque commodo condimentum. Integer vel urna sem.

Pre-formatted

```
&lt;meta charset="utf-8"&gt;&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;&lt;link rel="stylesheet" href="writ.min.css"&gt;
```

\
Inline

\
This is a link. Here is *italicized text*, **bold text**, `pre-formatted text`, ~~strikethrough text~~.

Fusce consectetur augue lacus, ac dapibus neque maximus a. Maecenassollicitudin metus sodales, venenatis sapien at, fringilla enim.Suspendisse dapibus pulvinar nunc, in pretium neque condimentum eu. Donecnec sollicitudin justo, lobortis fermentum magna. Maecenas tempus laciniaaugue at posuere. Vestibulum auctor, dui in blandit malesuada, dui felisconsequat orci, eu auctor nunc leo eget ex. Suspendisse consequat auctorrisus in venenatis. Duis vel sapien eu enim facilisis auctor. Mauris acfeugiat mauris, eu tristique sapien. Aenean mattis in magna sed ultricies.Suspendisse convallis risus lectus, eget molestie mauris aliquam quis.Integer eget cursus nulla. Cras sodales viverra metus in laoreet. Maurisaccumsan gravida quam sed interdum.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVa1LaQF4MLgSNebBnMiTSJQiQrR2%2FfpdnWgbJ8YTfESxWrSrK%2Feb2ae322-bb46-4388-826b-74baa482a897.jpg?alt=media&token=f058baba-ff81-492e-ab3d-f332c25a70c7","id":"eb2ae322-bb46-4388-826b-74baa482a897","width":4288,"height":2848,"filename":"marita-kavelashvili-ugnrXk1129g-unsplash-2.jpg","type":"image/jpeg","caption":"A beautiful photo by Marita Kavelashvili","border":false}]}
```

Fusce consectetur augue lacus, ac dapibus neque maximus a. Maecenassollicitudin metus sodales, venenatis sapien at, fringilla enim.Suspendisse dapibus pulvinar nunc, in pretium neque condimentum eu. Donecnec sollicitudin justo, lobortis fermentum magna. Maecenas tempus laciniaaugue at posuere. Vestibulum auctor, dui in blandit malesuada, dui felisconsequat orci, eu auctor nunc leo eget ex. Suspendisse consequat auctorrisus in venenatis. Duis vel sapien eu enim facilisis auctor. Mauris acfeugiat mauris, eu tristique sapien. Aenean mattis in magna sed ultricies.Suspendisse convallis risus lectus, eget molestie mauris aliquam quis.Integer eget cursus nulla. Cras sodales viverra metus in laoreet. Maurisaccumsan gravida quam sed interdum.

```cv
youtube
{"url":"https://www.youtube.com/watch?v=tohxlQeAR-8","width":200,"height":113,"thumbnail":"https://i.ytimg.com/vi/tohxlQeAR-8/hqdefault.jpg"}
```

Pellentesque purus quam, facilisis quis mi non, porttitor malesuada mi. Seda hendrerit neque. Sed malesuada ex lorem, eget sagittis est semper sed.Praesent convallis est in auctor lacinia. Praesent eu tortor sed massavenenatis volutpat nec id erat. Mauris blandit mollis est a aliquet. Namconvallis leo at blandit vehicula. Vestibulum a tellus in orci viverraconsectetur et suscipit justo. Integer finibus placerat ligula at cursus.Morbi laoreet nibh euismod porttitor hendrerit. Suspendisse volutpat etneque placerat molestie. Vivamus justo ligula, accumsan rhoncus tristiquevitae, efficitur a justo. Donec vel accumsan mi. Nam bibendum malesuadaefficitur.