FAIR

Federated and Independent Repositories

FrameBlocks

Plugin Banner

FrameBlocks

by Eduardo Sanchez Hidalgo

Download
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.

  1. In your WordPress admin go to Plugins Add New Upload Plugin.
  2. Upload the frame-blocks.zip file and click Install Now.
  3. Activate the plugin.
  4. Open any post or page in the Gutenberg editor and search for “Frame” in the block inserter.
  1. Device Frame block — laptop, tablet, and phone variants with nested content.

    Device Frame block — laptop, tablet, and phone variants with nested content.

  2. Code Editor Frame with File Tree sidebar and Syntax Highlighter, including a terminal panel.

    Code Editor Frame with File Tree sidebar and Syntax Highlighter, including a terminal panel.

  3. Social Post blocks — Instagram and Facebook mockups with editable content.

    Social Post blocks — Instagram and Facebook mockups with editable content.

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.1

  • Fix spacing in line number for code syntax highlighter to work properly with box-sizing resets.
  • Fix Instagram avatar ring misalignment in themes without a universal box-sizing reset.
  • Fix browser frame address bar icons not centering correctly in themes that do not reset flex alignment defaults.
  • Sanitize user-controlled URL attributes (avatarUrl, imageUrl, href) to block dangerous schemes (javascript:, data:, vbscript:) before rendering.

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.
Back to top