Descripción
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.
Capturas
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.
Bloques
Este plugin proporciona 8 bloques.
- 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.
Instalación
- 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.
Reseñas
No hay valoraciones para este plugin.
Colaboradores y desarrolladores
«FrameBlocks» es un software de código abierto. Las siguientes personas han colaborado con este plugin.
Colaboradores
Traduce «FrameBlocks» a tu idioma.
¿Interesado en el desarrollo?
Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.
Registro de cambios
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.