Style reference

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:

List Item 1
List Item 2
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.

A beautiful photo by Marita Kavelashvili

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.

Send Suzen Fylke a reply about this page

Inspiration

I primarily built Terminal Block as an active learning project to practice what I learned in the and 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 tool and adapted its style and animations from by . The terminal window is an . It wraps custom Command, Output, and Progress Bar blocks and the core .

You can customize the style of the terminal window, prompts, and progress bars in the . Additionally, you can format the text in Command and Output blocks using controls in the , similar to changing the style of text in a regular paragraph.

The first iteration of Terminal Block was an . 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.”

—

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.

If you’d like to try Terminal Block but don’t have a WordPress site, consider setting up a local WordPress environment using .

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

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

2 min read

Back to profile