Title: FrameBlocks Author: Eduardo Sanchez Hidalgo Published: মে’ 11, 2026 Last modified: মে’ 24, 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.1.zip) * [বিশদ বিৱৰণ](https://as.wordpress.org/plugins/frame-blocks/#description) * [পৰ্য্যালোচনা](https://as.wordpress.org/plugins/frame-blocks/#reviews) * [ইনষ্টলেশ্যন](https://as.wordpress.org/plugins/frame-blocks/#installation) * [বিকাশ](https://as.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টা ব্লক প্ৰদান কৰে। * 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. * Browser Frame Display content inside a browser window frame. Choose between Safari and Chrome styles. * Social Comment Display a single social media comment for Instagram or Facebook. * Social Post Display a styled social post mockup for Instagram or Facebook. * 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. * 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. * Device Frame Display content inside a scalable device frame (laptop, tablet, phone). * 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/) চাওক নাইবা [RSS](https://plugins.trac.wordpress.org/log/frame-blocks/?limit=100&mode=stop_on_copy&format=rss)- দ্বাৰা [বিকাশৰ পঞ্জী](https://plugins.trac.wordpress.org/log/frame-blocks/) ছাবস্ক্ৰাইব কৰক। ## সলনি-পঞ্জী #### 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. ## মেটা * **0.1.1** সংস্কৰণ * **2 সপ্তাহ আগত** শেষবাৰ আপডে’ট হৈছিল * সক্ৰিয় ইনষ্টলেশ্যন **10টাতকৈ কম** * WordPress-ৰ সংস্কৰণ ** 6.8 বা তাতকৈ ওপৰৰ ** * ইমানলৈকে পৰীক্ষা কৰা হৈছে **6.9.4** * PHP-ৰ সংস্কৰণ ** 7.4 বা তাতকৈ ওপৰৰ ** * ভাষা * [English (US)](https://wordpress.org/plugins/frame-blocks/) * [blocks](https://as.wordpress.org/plugins/tags/blocks/)[frames](https://as.wordpress.org/plugins/tags/frames/) [gutenberg](https://as.wordpress.org/plugins/tags/gutenberg/)[mockup](https://as.wordpress.org/plugins/tags/mockup/) [syntax highlighter](https://as.wordpress.org/plugins/tags/syntax-highlighter/) * টেগবোৰ * [উচ্চখাপৰ ভিউ](https://as.wordpress.org/plugins/frame-blocks/advanced/) ## ৰে’টিংবোৰ এতিয়ালৈ কোনো পৰ্য্যালোচনা দাখিল কৰা হোৱা নাই। [Your review](https://wordpress.org/support/plugin/frame-blocks/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/frame-blocks/reviews/) ## অৱদানকাৰীসকল * [ Eduardo Sanchez Hidalgo ](https://profiles.wordpress.org/laloptk/) ## সাহায্য কিবা ক’বলগীয়া আছে? সহায় লাগে? [সাহায্যৰ ফ’ৰাম চাওক](https://wordpress.org/support/plugin/frame-blocks/)