Gutenberg

Gutenberg Elements Showcase — Every Block Styled

>_ On this page

Welcome to the Gutenberg element showcase — every block on this page is styled by the theme’s own CSS (zero WordPress block-library bloat). Scroll through: text, lists, quotes, tables, code, images, galleries, local video, local audio, YouTube, Vimeo, Spotify, cover, columns, media+text, buttons, file downloads, details and more.


1. Headings

H3 — subheading level

Body paragraph with a link, inline code, bold and emphasis — all matching the terminal aesthetic.

  • Bullet list item one
  • Bullet list item two with code inside
  • Bullet list item three
  1. Ordered item one
  2. Ordered item two
  3. Ordered item three

2. Quotes

Standard blockquote — green terminal bar on the left, muted italic text.

— G-Will

Pullquote block — a surface card with a green edge, made for emphasis.

Gutenberg Pullquote

3. Tables

FeatureStatus
Self-hosted fontsv1.5.0
Custom block CSSv1.6.0
WP block-library CSSZero bytes

4. Code blocks

<?php
// Copy button + Prism highlighting, self-hosted
$theme = gwill_get_theme();
echo $theme->version; // 1.6.0
preformatted block — raw whitespace preserved, terminal-dark surface.
Redis on a VPS
Image block with a terminal-style caption — click to zoom (lightbox)

6. Local video & audio

Video block — file uploaded to the media library, dark native controls
Audio block — local file, full-width player

7. Embeds — YouTube, Vimeo, Spotify

8. Cover block

Cover block — image background with dark dim, rounded, content centered

9. Columns & media+text

Left column. Columns flex side-by-side on desktop, stack on mobile.

Right column. Equal flex widths, gap handled by the theme.

Media + text block — image left, content right, vertically centered. Stacks to one column on small screens.

10. Buttons, file, details

Click to expand — details block

Hidden content revealed. Summary is a green mono terminal prompt, body sits on the surface card.


That’s the whole tour — every Gutenberg block styled custom, no WordPress CSS shipped. 🚀

11. Widget & utility blocks

Everything below is styled by the theme too — drop any of these into any post.

Android DevOps Docker Kotlin Linux Performance Redis Security Tutorial Web-Dev

$ npm run deploy
Deploying site…
  ✔ assets optimized
  ✔ fonts self-hosted
  ✔ zero WP CSS shipped
Done in 2.4s

Accordion panels collapse and expand — styled as surface cards with green mono toggles.

Click the toggle to expand this panel.

This sentence has a footnote.[1]

12. X (Twitter) embed

Written by

G-will Chijioke

More posts by G-will Chijioke
← Previous Image Showcase: Testing Images, Galleries and Lightbox 📸 Android Tutorials

3 Comments