Details
View on WordPress

FrameBlocks gives content creators and developers a set of Gutenberg blocks that wrap content inside realistic UI mockups — without leaving the WordPress editor.

Included blocks:

  • Browser Frame — Safari or Chrome browser shell wrapping any inner content
  • Code Editor Frame — VS Code editor shell with sidebar, code zone, and terminal
  • Code Syntax Highlighter — Syntax-highlighted code powered by Shiki (50+ languages)
  • Device Frame — Phone, tablet, or laptop device shell
  • File Tree — VS Code-style file/folder tree
  • File Tree Item — Individual file or folder row inside a file tree
  • Social Post — Instagram or Facebook post mockup
  • Social Comment — Comment row nested inside a social post

All blocks are fully responsive using CSS container queries (cqw units), so they scale automatically with the column width — no manual resizing needed.

Details

Plugin code:
frame-blocks
Plugin version:
0.1.0
Outdated:
No
WP version:
6.8 or higher
PHP version:
7.4 or higher
Test up to WP version:
6.9.4
Total installations:
0
Last updated:
2026-05-11
Rating:
Times rated:
0
blocks
frames
gutenberg
mockup
syntax-highlighter