FrameBlocks
| 开发者 | laloptk |
|---|---|
| 更新时间 | 2026年5月12日 11:06 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 6.9 |
| 版权: | GPL-2.0-or-later |
| 版权网址: | 版权信息 |
详情介绍:
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
cqw units), so they scale automatically with the column width — no manual resizing needed.
安装:
- 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.
屏幕截图:
常见问题:
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.
更新日志:
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.