Description
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.
Screenshots
Device Frame block — laptop, tablet, and phone variants with nested content. 
Code Editor Frame with File Tree sidebar and Syntax Highlighter, including a terminal panel. 
Social Post blocks — Instagram and Facebook mockups with editable content.
Blocks
This plugin provides 8 blocks.
- Browser Frame Display content inside a browser window frame. Choose between Safari and Chrome styles.
- Code Syntax Highlighter Renders syntax-highlighted code with Shiki tokenization. Tokens are pre-computed in the editor and served as static HTML on the frontend.
- Social Comment Display a single social media comment for Instagram or Facebook.
- Code Editor Frame A pixel-perfect VS Code editor shell (Dark+ theme) with a fluid-scaling CSS-grid layout. Wraps a file-tree list (right sidebar), a code syntax-highlighter (main editor), and a terminal strip. Tree icons rely on text/emoji in list items; no split-pane resize; terminal height is content-driven.
- File Tree A VS Code-style file explorer tree. Add File Tree Item child blocks to build a folder/file structure up to four levels deep.
- Device Frame Display content inside a scalable device frame (laptop, tablet, phone).
- Social Post Display a styled social post mockup for Instagram or Facebook.
- File Tree Item A single file or folder row inside a File Tree block.
Installation
- In your WordPress admin go to Plugins Add New Upload Plugin.
- Upload the
frame-blocks.zipfile and click Install Now. - Activate the plugin.
- Open any post or page in the Gutenberg editor and search for “Frame” in the block inserter.
FAQ
-
Does this plugin work with the classic editor?
-
No. FrameBlocks is built exclusively for the Gutenberg block editor (WordPress 6.8+).
-
Are the frames responsive?
-
Yes. All frames use CSS container queries and scale fluidly with the column they are placed in.
-
Does the plugin load external resources?
-
No. All assets — including icon fonts — are bundled locally with the plugin. No external requests are made.
-
Which syntax languages does the code highlighter support?
-
The Code Syntax Highlighter block uses Shiki and supports over 50 languages including JavaScript, TypeScript, PHP, Python, HTML, CSS, Bash, and more.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“FrameBlocks” is open source software. The following people have contributed to this plugin.
Contributors
Translate “FrameBlocks” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
0.1.0
- Initial release with 8 blocks: Browser Frame, Code Editor Frame, Code Syntax Highlighter, Device Frame, File Tree, File Tree Item, Social Post, Social Comment.