Title: FrameBlocks
Author: Eduardo Sanchez Hidalgo
Published: <strong>मे 11, 2026</strong>
Last modified: मे 11, 2026

---

प्लगइन शोधा

![](https://ps.w.org/frame-blocks/assets/banner-772x250.png?rev=3529157)

![](https://ps.w.org/frame-blocks/assets/icon-256x256.png?rev=3529157)

# FrameBlocks

 [Eduardo Sanchez Hidalgo](https://profiles.wordpress.org/laloptk/) कडून

[डाउनलोड करा](https://downloads.wordpress.org/plugin/frame-blocks.0.1.0.zip)

 * [तपशील](https://mr.wordpress.org/plugins/frame-blocks/#description)
 * [पुनरावलोकने](https://mr.wordpress.org/plugins/frame-blocks/#reviews)
 *  [इंस्टॉलेशन](https://mr.wordpress.org/plugins/frame-blocks/#installation)
 * [डेव्हलोपमेंट](https://mr.wordpress.org/plugins/frame-blocks/#developers)

 [समर्थन](https://wordpress.org/support/plugin/frame-blocks/)

## वर्णन

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.

## स्क्रीनशॉट

 * [[
 * 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.

## ब्लॉक्स

हे प्लगइन 8 ब्लॉक्स प्रदान करते

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

## स्थापना

 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.

## नेहमी विचारले जाणारे प्रश्न

### 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](https://shiki.style/) and supports
over 50 languages including JavaScript, TypeScript, PHP, Python, HTML, CSS, Bash,
and more.

## समीक्षा

ह्या प्लगइनसाठी कोणतेही समीक्षण नाही.

## योगदानकर्ते आणि विकसक

“FrameBlocks” हे मुक्त स्रोत सॉफ्टवेअर आहे. पुढील लोक या प्लगइनच्या निर्मितीत योगदान
केले आहे.

योगदानकर्ते

 *   [ Eduardo Sanchez Hidalgo ](https://profiles.wordpress.org/laloptk/)

[भाषांतर करा “FrameBlocks” तुमच्या भाषेत.](https://translate.wordpress.org/projects/wp-plugins/frame-blocks)

### विकासातील आग्रह?

[कोड ब्राउझ करा](https://plugins.trac.wordpress.org/browser/frame-blocks/), [SVN संग्रहालय](https://plugins.svn.wordpress.org/frame-blocks/)
तपासा, किंवा [विकास लॉग](https://plugins.trac.wordpress.org/log/frame-blocks/) च्या
[RSS](https://plugins.trac.wordpress.org/log/frame-blocks/?limit=100&mode=stop_on_copy&format=rss)
द्वारे सदस्यता घ्या.

## बदलांची यादी

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

## मेटा

 *  आवृत्ती **0.1.0**
 *  शेवटचा अद्यतन **1 आठवडा पूर्वी**
 *  सक्रिय स्थापना **10 पेक्षा कमी**
 *  वर्डप्रेस आवृत्ती ** 6.8 किंवा मोठा **
 *  परीक्षित केले आहे **6.9.4**
 *  PHP आवृत्ती ** 7.4 किंवा मोठा **
 *  भाषा
 * [English (US)](https://wordpress.org/plugins/frame-blocks/)
 * टॅग्ज:
 * [blocks](https://mr.wordpress.org/plugins/tags/blocks/)[frames](https://mr.wordpress.org/plugins/tags/frames/)
   [gutenberg](https://mr.wordpress.org/plugins/tags/gutenberg/)[mockup](https://mr.wordpress.org/plugins/tags/mockup/)
   [syntax highlighter](https://mr.wordpress.org/plugins/tags/syntax-highlighter/)
 *  [प्रगत दृश्य](https://mr.wordpress.org/plugins/frame-blocks/advanced/)

## मूल्यांकन

अजून कोणतीही पुनरावलोकने सबमिट केलेली नाहीत.

[Your review](https://wordpress.org/support/plugin/frame-blocks/reviews/#new-post)

[सर्व पुनरावलोकने पहा](https://wordpress.org/support/plugin/frame-blocks/reviews/)

## योगदानकर्ते

 *   [ Eduardo Sanchez Hidalgo ](https://profiles.wordpress.org/laloptk/)

## समर्थन

काहीतरी सांगायचं आहे का? मदतीची आवश्यकता आहे का?

 [समर्थन फोरम पहा](https://wordpress.org/support/plugin/frame-blocks/)