{"id":310751,"date":"2026-05-11T19:27:04","date_gmt":"2026-05-11T19:27:04","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/frameblocks\/"},"modified":"2026-05-11T19:45:50","modified_gmt":"2026-05-11T19:45:50","slug":"frame-blocks","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/frame-blocks\/","author":14121226,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"0.1.0","stable_tag":"0.1.0","tested":"6.9.4","requires":"6.8","requires_php":"7.4","requires_plugins":null,"header_name":"FrameBlocks","header_author":"Eduardo Sanchez Hidalgo","header_description":"Decorative UI frame blocks for the Gutenberg editor \u2014 browser windows, device mockups, VS Code shell, social posts, and more.","assets_banners_color":"520822","last_updated":"2026-05-11 19:45:50","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/github.com\/laloptk\/frame-blocks","header_author_uri":"https:\/\/eduardos-portfolio.netlify.app\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":58,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"0.1.0":{"tag":"0.1.0","author":"laloptk","date":"2026-05-11 19:45:50"}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-256x256.png":{"filename":"icon-256x256.png","revision":3529157,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-772x250.png":{"filename":"banner-772x250.png","revision":3529157,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":{"frameblocks\/browser-frame":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"frameblocks\/browser-frame","version":"0.1.0","title":"Browser Frame","category":"media","icon":"desktop","description":"Display content inside a browser window frame. Choose between Safari and Chrome styles.","keywords":["browser","frame","window","mockup","safari","chrome","screenshot"],"example":{},"supports":{"html":false,"align":["wide","full"]},"attributes":{"browserVariant":{"type":"string","default":"safari"},"url":{"type":"string","default":"example.com"},"tabTitle":{"type":"string","default":"My Page"},"spacing":{"type":"object","default":{"desktop":{"padding":"","margin":""},"tablet":{"padding":"","margin":""},"mobile":{"padding":"","margin":""}}},"border":{"type":"object","default":{"desktop":{"borderRadius":null,"borderColor":"","borderWidth":null},"tablet":{"borderRadius":null,"borderColor":"","borderWidth":null},"mobile":{"borderRadius":null,"borderColor":"","borderWidth":null}}},"typography":{"type":"object","default":{"desktop":{"fontSize":"","fontWeight":"","lineHeight":""},"tablet":{"fontSize":"","fontWeight":"","lineHeight":""},"mobile":{"fontSize":"","fontWeight":"","lineHeight":""}}}},"textdomain":"frame-blocks","editorScript":"file:.\/index.js","editorStyle":"file:.\/index.css","style":"file:.\/style-index.css"},"frameblocks\/code-syntax-highlighter":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"frameblocks\/code-syntax-highlighter","version":"0.1.0","title":"Code Syntax Highlighter","category":"text","icon":"editor-code","description":"Renders syntax-highlighted code with Shiki tokenization. Tokens are pre-computed in the editor and served as static HTML on the frontend.","keywords":["code","syntax","highlight","shiki","frame"],"example":{},"supports":{"html":false,"align":["wide","full"]},"attributes":{"theme":{"type":"string","default":"github-dark"},"tokens":{"type":"array","default":[]},"bg":{"type":"string","default":"#0F172A"},"isTerminal":{"type":"boolean","default":false},"terminalLang":{"type":"string","default":"bash"},"terminalPrompt":{"type":"string","default":"user@LAPTOP-SO57FW60 MINGW64 ~ # Edit this content in the sidebar panel."},"terminalCommand":{"type":"string","default":"echo \"Hello World\" >> file-002.txt"},"code":{"type":"string","default":"\/**\n * \u2728 Editable Code Area\n * --------------------------------------------------\n * You can edit this code from the Gutenberg editor sidebar panel.\n * Changes made there will appear here automatically.\n *\/\n\nfunction generateGreeting(name) {\n  const greetings = [\n    \"Hello\",\n    \"Welcome\",\n    \"Good to see you\",\n    \"Hi there\",\n    \"Greetings\"\n  ];\n\n  const randomGreeting =\n    greetings[Math.floor(Math.random() * greetings.length)];\n\n  return `${randomGreeting}, ${name}!`;\n}\n\nfunction simulateWork() {\n  const tasks = [\n    \"Loading modules\",\n    \"Initializing environment\",\n    \"Fetching data\",\n    \"Rendering components\",\n    \"Finalizing setup\"\n  ];\n\n  tasks.forEach((task, index) => {\n    setTimeout(() => {\n      console.log(`\u2699\ufe0f ${task}...`);\n    }, index * 400);\n  });\n}\n\nconst user = \"Developer\";\n\nconsole.log(generateGreeting(user));\nsimulateWork();"},"codeLang":{"type":"string","default":"javascript"},"spacing":{"type":"object","default":{"desktop":{"padding":"","margin":""},"tablet":{"padding":"","margin":""},"mobile":{"padding":"","margin":""}}},"border":{"type":"object","default":{"desktop":{"borderRadius":null,"borderColor":"","borderWidth":null},"tablet":{"borderRadius":null,"borderColor":"","borderWidth":null},"mobile":{"borderRadius":null,"borderColor":"","borderWidth":null}}}},"textdomain":"frame-blocks","editorScript":"file:.\/index.js","editorStyle":"file:.\/index.css","style":"file:.\/style-index.css"},"frameblocks\/social-comment":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"frameblocks\/social-comment","version":"0.1.0","title":"Social Comment","category":"media","icon":"admin-comments","description":"Display a single social media comment for Instagram or Facebook.","keywords":["social","comment","instagram","facebook"],"example":{},"usesContext":["frameblocks\/social-platform","frameblocks\/social-theme"],"supports":{"html":false},"attributes":{"platform":{"type":"string","default":"instagram"},"theme":{"type":"string","default":"light"},"syncWithContext":{"type":"boolean","default":true},"authorName":{"type":"string","default":"username"},"commentText":{"type":"string","default":"Write a comment..."},"timeText":{"type":"string","default":"5h"},"likesText":{"type":"string","default":"1 like"},"replyText":{"type":"string","default":"Reply"},"reactionCount":{"type":"string","default":"366"},"avatarUrl":{"type":"string","default":""},"avatarId":{"type":"integer","default":0}},"textdomain":"frame-blocks","editorScript":"file:.\/index.js","editorStyle":"file:.\/index.css","style":"file:.\/style-index.css"},"frameblocks\/code-editor-frame":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"frameblocks\/code-editor-frame","version":"0.1.0","title":"Code Editor Frame","category":"text","icon":"editor-code","description":"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.","keywords":["code","editor","vscode","vs code","frame","syntax","highlight"],"example":{},"supports":{"html":false,"align":["wide","full"]},"attributes":{"projectName":{"type":"string","default":"my-project"},"fileName":{"type":"string","default":"index.ts"},"filePath":{"type":"string","default":"src\/components"},"language":{"type":"string","default":"TypeScript JSX"},"branch":{"type":"string","default":"main"},"visibility":{"type":"object","default":{"desktop":{"showSidebar":true,"showTerminal":true},"tablet":{"showSidebar":null,"showTerminal":null},"mobile":{"showSidebar":null,"showTerminal":null}}},"spacing":{"type":"object","default":{"desktop":{"padding":"","margin":""},"tablet":{"padding":"","margin":""},"mobile":{"padding":"","margin":""}}},"border":{"type":"object","default":{"desktop":{"borderRadius":null,"borderColor":"","borderWidth":null},"tablet":{"borderRadius":null,"borderColor":"","borderWidth":null},"mobile":{"borderRadius":null,"borderColor":"","borderWidth":null}}}},"textdomain":"frame-blocks","editorScript":"file:.\/index.js","editorStyle":"file:.\/index.css","style":"file:.\/style-index.css"},"frameblocks\/file-tree":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"frameblocks\/file-tree","version":"0.1.0","title":"File Tree","category":"text","icon":"category","description":"A VS Code-style file explorer tree. Add File Tree Item child blocks to build a folder\/file structure up to four levels deep.","keywords":["file","tree","explorer","folder","vscode","sidebar"],"example":{},"supports":{"html":false},"attributes":{"textColor":{"type":"string","default":""},"backgroundColor":{"type":"string","default":""},"spacing":{"type":"object","default":{"desktop":{"padding":"","margin":""},"tablet":{"padding":"","margin":""},"mobile":{"padding":"","margin":""}}},"border":{"type":"object","default":{"desktop":{"borderRadius":null,"borderColor":"","borderWidth":null},"tablet":{"borderRadius":null,"borderColor":"","borderWidth":null},"mobile":{"borderRadius":null,"borderColor":"","borderWidth":null}}},"typography":{"type":"object","default":{"desktop":{"fontSize":"12.5px","fontWeight":"400","lineHeight":1.2},"tablet":{"fontSize":"","fontWeight":"","lineHeight":""},"mobile":{"fontSize":"","fontWeight":"","lineHeight":""}}}},"textdomain":"frame-blocks","editorScript":"file:.\/index.js","editorStyle":"file:.\/index.css","style":"file:.\/style-index.css"},"frameblocks\/device-frame":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"frameblocks\/device-frame","version":"0.1.0","title":"Device Frame","category":"media","icon":"smartphone","description":"Display content inside a scalable device frame (laptop, tablet, phone).","keywords":["device","frame","laptop","tablet","phone","mockup"],"example":{},"supports":{"html":false,"align":["wide","full"]},"attributes":{"deviceType":{"type":"string","default":"phone"}},"textdomain":"frame-blocks","editorScript":"file:.\/index.js","editorStyle":"file:.\/index.css","style":"file:.\/style-index.css"},"frameblocks\/social-post":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"frameblocks\/social-post","version":"0.1.0","title":"Social Post","category":"media","icon":"share","description":"Display a styled social post mockup for Instagram or Facebook.","keywords":["social","post","instagram","facebook","mockup"],"example":{},"supports":{"html":false,"align":["wide","full"]},"providesContext":{"frameblocks\/social-platform":"platform","frameblocks\/social-theme":"variant"},"attributes":{"platform":{"type":"string","default":"instagram"},"variant":{"type":"string","default":"dark"},"username":{"type":"string","default":"username"},"likesCount":{"type":"string","default":"1,234 likes"},"timestamp":{"type":"string","default":"2 days ago"},"pageSubtitle":{"type":"string","default":"2 hrs - Public"},"postText":{"type":"string","default":""},"reactionsCount":{"type":"string","default":"1,234"},"commentsCount":{"type":"string","default":"56 comments"},"isVerified":{"type":"boolean","default":false},"isLiked":{"type":"boolean","default":false},"imageUrl":{"type":"string","default":""},"imageAlt":{"type":"string","default":""},"imageId":{"type":"integer","default":0},"avatarUrl":{"type":"string","default":""},"avatarId":{"type":"integer","default":0},"maxWidth":{"type":"integer","default":500},"spacing":{"type":"object","default":{"desktop":{"padding":"","margin":""},"tablet":{"padding":"","margin":""},"mobile":{"padding":"","margin":""}}},"border":{"type":"object","default":{"desktop":{"borderRadius":null,"borderColor":"","borderWidth":null},"tablet":{"borderRadius":null,"borderColor":"","borderWidth":null},"mobile":{"borderRadius":null,"borderColor":"","borderWidth":null}}}},"textdomain":"frame-blocks","editorScript":"file:.\/index.js","editorStyle":"file:.\/index.css","style":"file:.\/style-index.css"},"frameblocks\/file-tree-item":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"frameblocks\/file-tree-item","version":"0.1.0","title":"File Tree Item","category":"text","icon":"media-document","description":"A single file or folder row inside a File Tree block.","keywords":["file","folder","tree","item","explorer"],"parent":["frameblocks\/file-tree"],"supports":{"html":false,"reusable":false},"attributes":{"typography":{"type":"object","default":{"desktop":{"fontSize":"","fontWeight":"","lineHeight":""},"tablet":{"fontSize":"","fontWeight":"","lineHeight":""},"mobile":{"fontSize":"","fontWeight":"","lineHeight":""}}},"label":{"type":"string","default":"untitled"},"itemType":{"type":"string","default":"folder","enum":["file","folder"]},"depth":{"type":"integer","default":1},"isActive":{"type":"boolean","default":false},"isOpen":{"type":"boolean","default":false},"fileExt":{"type":"string","default":""},"activeColor":{"type":"string","default":""},"activeTextColor":{"type":"string","default":""}},"textdomain":"frame-blocks","editorScript":"file:.\/index.js"}},"tagged_versions":["0.1.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3529357,"resolution":"1","location":"assets","locale":"","width":1200,"height":1111},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3529357,"resolution":"2","location":"assets","locale":"","width":1200,"height":905},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3529357,"resolution":"3","location":"assets","locale":"","width":1558,"height":998}},"screenshots":{"1":"Device Frame block \u2014 laptop, tablet, and phone variants with nested content.","2":"Code Editor Frame with File Tree sidebar and Syntax Highlighter, including a terminal panel.","3":"Social Post blocks \u2014 Instagram and Facebook mockups with editable content."},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[4121,799,148076,23344,7526],"plugin_category":[],"plugin_contributors":[262599],"plugin_business_model":[],"class_list":["post-310751","plugin","type-plugin","status-publish","hentry","plugin_tags-blocks","plugin_tags-frames","plugin_tags-gutenberg","plugin_tags-mockup","plugin_tags-syntax-highlighter","plugin_contributors-laloptk","plugin_committers-laloptk"],"banners":{"banner":"https:\/\/ps.w.org\/frame-blocks\/assets\/banner-772x250.png?rev=3529157","banner_2x":false,"banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/frame-blocks\/assets\/icon-256x256.png?rev=3529157","icon_2x":"https:\/\/ps.w.org\/frame-blocks\/assets\/icon-256x256.png?rev=3529157","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/frame-blocks\/assets\/screenshot-1.png?rev=3529357","caption":"Device Frame block \u2014 laptop, tablet, and phone variants with nested content."},{"src":"https:\/\/ps.w.org\/frame-blocks\/assets\/screenshot-2.png?rev=3529357","caption":"Code Editor Frame with File Tree sidebar and Syntax Highlighter, including a terminal panel."},{"src":"https:\/\/ps.w.org\/frame-blocks\/assets\/screenshot-3.png?rev=3529357","caption":"Social Post blocks \u2014 Instagram and Facebook mockups with editable content."}],"raw_content":"<!--section=description-->\n<p>FrameBlocks gives content creators and developers a set of Gutenberg blocks that wrap content inside realistic UI mockups \u2014 without leaving the WordPress editor.<\/p>\n\n<p><strong>Included blocks:<\/strong><\/p>\n\n<ul>\n<li><strong>Browser Frame<\/strong> \u2014 Safari or Chrome browser shell wrapping any inner content<\/li>\n<li><strong>Code Editor Frame<\/strong> \u2014 VS Code editor shell with sidebar, code zone, and terminal<\/li>\n<li><strong>Code Syntax Highlighter<\/strong> \u2014 Syntax-highlighted code powered by Shiki (50+ languages)<\/li>\n<li><strong>Device Frame<\/strong> \u2014 Phone, tablet, or laptop device shell<\/li>\n<li><strong>File Tree<\/strong> \u2014 VS Code-style file\/folder tree<\/li>\n<li><strong>File Tree Item<\/strong> \u2014 Individual file or folder row inside a file tree<\/li>\n<li><strong>Social Post<\/strong> \u2014 Instagram or Facebook post mockup<\/li>\n<li><strong>Social Comment<\/strong> \u2014 Comment row nested inside a social post<\/li>\n<\/ul>\n\n<p>All blocks are fully responsive using CSS container queries (<code>cqw<\/code> units), so they scale automatically with the column width \u2014 no manual resizing needed.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>In your WordPress admin go to <strong>Plugins \u2192 Add New \u2192 Upload Plugin<\/strong>.<\/li>\n<li>Upload the <code>frame-blocks.zip<\/code> file and click <strong>Install Now<\/strong>.<\/li>\n<li>Activate the plugin.<\/li>\n<li>Open any post or page in the Gutenberg editor and search for \"Frame\" in the block inserter.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20this%20plugin%20work%20with%20the%20classic%20editor%3F\"><h3>Does this plugin work with the classic editor?<\/h3><\/dt>\n<dd><p>No. FrameBlocks is built exclusively for the Gutenberg block editor (WordPress 6.8+).<\/p><\/dd>\n<dt id=\"are%20the%20frames%20responsive%3F\"><h3>Are the frames responsive?<\/h3><\/dt>\n<dd><p>Yes. All frames use CSS container queries and scale fluidly with the column they are placed in.<\/p><\/dd>\n<dt id=\"does%20the%20plugin%20load%20external%20resources%3F\"><h3>Does the plugin load external resources?<\/h3><\/dt>\n<dd><p>No. All assets \u2014 including icon fonts \u2014 are bundled locally with the plugin. No external requests are made.<\/p><\/dd>\n<dt id=\"which%20syntax%20languages%20does%20the%20code%20highlighter%20support%3F\"><h3>Which syntax languages does the code highlighter support?<\/h3><\/dt>\n<dd><p>The Code Syntax Highlighter block uses <a href=\"https:\/\/shiki.style\/\">Shiki<\/a> and supports over 50 languages including JavaScript, TypeScript, PHP, Python, HTML, CSS, Bash, and more.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>0.1.0<\/h4>\n\n<ul>\n<li>Initial release with 8 blocks: Browser Frame, Code Editor Frame, Code Syntax Highlighter, Device Frame, File Tree, File Tree Item, Social Post, Social Comment.<\/li>\n<\/ul>","raw_excerpt":"Decorative UI frame blocks for the Gutenberg editor \u2014 browser windows, device mockups, VS Code shell, social posts, and more.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/310751","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=310751"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/laloptk"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=310751"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=310751"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=310751"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=310751"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=310751"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=310751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}