FrameBlocks

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.