WordPress.org

فارسی

دریافت وردپرس
WordPress.org

Plugin Directory

FrameBlocks

FrameBlocks

توسط Eduardo Sanchez Hidalgo
دانلود

توضیحات

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 and supports over 50 languages including JavaScript, TypeScript, PHP, Python, HTML, CSS, Bash, and more.

نقد و بررسی‌ها

نقد و بررسی‌ای برای این افزونه یافت نشد.

توسعه دهندگان و همکاران

“FrameBlocks” نرم افزار متن باز است. افراد زیر در این افزونه مشارکت کرده‌اند.

مشارکت کنندگان

ترجمه “FrameBlocks” به زبان شما.

علاقه‌ مند به توسعه هستید؟

Browse the code, check out the SVN repository, or subscribe to the development log by 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.

اطلاعات

امتیازها

هنوز هیچ نقدی ارسال نشده است.

Your review

مشاهده همه بررسی‌ها

مشارکت کنندگان

پشتیبانی

چیزی برای گفتن دارید؟ نیاز به کمک دارید؟

مشاهده انجمن پشتیبانی