{"id":328428,"date":"2026-06-23T13:33:48","date_gmt":"2026-06-23T13:33:48","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/vibe-code\/"},"modified":"2026-06-23T15:36:26","modified_gmt":"2026-06-23T15:36:26","slug":"jamies-visual-html-editor","status":"publish","type":"plugin","link":"https:\/\/pcd.wordpress.org\/plugins\/jamies-visual-html-editor\/","author":23355210,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"0.3","stable_tag":"0.3","tested":"7.0","requires":"6.4","requires_php":"7.4","requires_plugins":null,"header_name":"Jamie's Visual HTML Editor","header_author":"Jamie Marsland","header_description":"Enhances the core Custom HTML block: paste any HTML, then let editors click directly on text, images, links, and backgrounds to edit them \u2014 without touching the markup. Switch between \"Edit content\" and \"Edit code\" from the block toolbar, and add Wide\/Full width alignment.","assets_banners_color":"","last_updated":"2026-06-23 15:36:26","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"https:\/\/profiles.wordpress.org\/jamiemarsland\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":120,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"0.1":{"tag":"0.1","author":"jamiemarsland","date":"2026-06-23 13:33:21"},"0.2":{"tag":"0.2","author":"jamiemarsland","date":"2026-06-23 15:24:47"},"0.3":{"tag":"0.3","author":"jamiemarsland","date":"2026-06-23 15:36:26"}},"upgrade_notice":{"0.3":"<p>Fixes the missing Wide\/Full alignment control in the block toolbar, and adds a plugin icon.<\/p>","0.2":"<p>Clarifies the Wide\/Full width description.<\/p>","0.1":"<p>Initial release.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3583456,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3583456,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":[],"assets_blueprints":{},"all_blocks":[],"tagged_versions":["0.1","0.2","0.3"],"block_files":[],"assets_screenshots":{"screenshot-1.jpg":{"filename":"screenshot-1.jpg","revision":3583336,"resolution":"1","location":"assets","locale":"","width":1040,"height":900},"screenshot-2.jpg":{"filename":"screenshot-2.jpg","revision":3583336,"resolution":"2","location":"assets","locale":"","width":1040,"height":900},"screenshot-3.jpg":{"filename":"screenshot-3.jpg","revision":3583336,"resolution":"3","location":"assets","locale":"","width":1040,"height":900}},"screenshots":{"1":"The block toolbar in \"Edit content\" mode \u2014 click any text or image to edit it in place.","2":"Clicking an image opens the replace modal: choose from the Media Library, paste a URL, or update alt text.","3":"Wide and Full width alignment options in the block toolbar for full-bleed sections."}},"plugin_section":[],"plugin_tags":[148857,5554,16644,163,31174],"plugin_category":[50],"plugin_contributors":[268548],"plugin_business_model":[],"class_list":["post-328428","plugin","type-plugin","status-publish","hentry","plugin_tags-block-editor","plugin_tags-custom-html","plugin_tags-full-width","plugin_tags-images","plugin_tags-inline-editing","plugin_category-media","plugin_contributors-jamiemarsland","plugin_committers-jamiemarsland"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/jamies-visual-html-editor\/assets\/icon-128x128.png?rev=3583456","icon_2x":"https:\/\/ps.w.org\/jamies-visual-html-editor\/assets\/icon-256x256.png?rev=3583456","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/jamies-visual-html-editor\/assets\/screenshot-1.jpg?rev=3583336","caption":"The block toolbar in \"Edit content\" mode \u2014 click any text or image to edit it in place."},{"src":"https:\/\/ps.w.org\/jamies-visual-html-editor\/assets\/screenshot-2.jpg?rev=3583336","caption":"Clicking an image opens the replace modal: choose from the Media Library, paste a URL, or update alt text."},{"src":"https:\/\/ps.w.org\/jamies-visual-html-editor\/assets\/screenshot-3.jpg?rev=3583336","caption":"Wide and Full width alignment options in the block toolbar for full-bleed sections."}],"raw_content":"<!--section=description-->\n<p>Jamie's Visual HTML Editor enhances the core Custom HTML block so you can paste in any HTML and let editors change the copy and images without touching the markup.<\/p>\n\n<ul>\n<li><strong>Edit content<\/strong> \u2014 render the HTML live and click any heading, paragraph, list item, link, or button to edit its text in place. Click any <code>&lt;img&gt;<\/code> to replace it from the Media Library, change its URL, or edit its alt text. Add <code>data-vc-bg<\/code> and an inline <code>background-image<\/code> on hero sections to make backgrounds editable too.<\/li>\n<li><strong>Edit code<\/strong> \u2014 the normal raw-HTML view for pasting or writing markup.<\/li>\n<li><strong>Wide and Full width<\/strong> \u2014 adds Wide and Full alignment options to the Custom HTML block. It does not change the block's content width; it only lets you choose Wide or Full alignment so full-bleed sections can break out of the theme's content area.<\/li>\n<\/ul>\n\n<p>Content is stored as a native Custom HTML block, so revisions and saving work exactly as they do in core. The plugin only changes how the block is edited and aligned.<\/p>\n\n<p>This plugin is open source. See the Development section below for the full human-readable source code and build instructions.<\/p>\n\n<h3>Development<\/h3>\n\n<p>This plugin is open source (GPL-2.0-or-later). The complete, human-readable source code \u2014 including the un-minified JavaScript in <code>src\/<\/code> and the build configuration \u2014 is publicly available at:<\/p>\n\n<p>https:\/\/github.com\/jamiemarsland\/jamies-visual-html-editor<\/p>\n\n<p>The compiled files in <code>build\/<\/code> are generated with <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/scripts\">@wordpress\/scripts<\/a>:<\/p>\n\n<pre><code>npm install\nnpm run build\n<\/code><\/pre>\n\n<p>No third-party libraries are bundled; the plugin relies only on the WordPress-provided editor packages (<code>@wordpress\/*<\/code>).<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the <code>jamies-visual-html-editor<\/code> folder to the <code>\/wp-content\/plugins\/<\/code> directory, or install the plugin through the Plugins screen in WordPress.<\/li>\n<li>Activate the plugin through the Plugins screen.<\/li>\n<li>Add or select a Custom HTML block in the block editor and use the \"Edit content\" \/ \"Edit code\" toolbar buttons. Use the alignment control for Wide or Full width.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"which%20blocks%20does%20this%20affect%3F\"><h3>Which blocks does this affect?<\/h3><\/dt>\n<dd><p>It enhances the core Custom HTML block (<code>core\/html<\/code>). Other blocks are unchanged.<\/p><\/dd>\n<dt id=\"will%20it%20change%20my%20saved%20html%3F\"><h3>Will it change my saved HTML?<\/h3><\/dt>\n<dd><p>The block is still stored as a standard Custom HTML block. Editing text updates the words; editing an image updates its <code>src<\/code> and <code>alt<\/code> attributes. Structure, classes, and styles stay unchanged. Switch to \"Edit code\" to see the raw markup.<\/p><\/dd>\n<dt id=\"can%20i%20replace%20images%3F\"><h3>Can I replace images?<\/h3><\/dt>\n<dd><p>Yes. In \"Edit content\" mode, click an image to open a modal where you can choose a replacement from the Media Library, paste an external URL, or edit the alt text.<\/p><\/dd>\n<dt id=\"can%20i%20replace%20hero%20background%20images%3F\"><h3>Can I replace hero background images?<\/h3><\/dt>\n<dd><p>Yes. In \"Edit content\" mode, hover a hero section whose background is set inline or in a <code>&lt;style&gt;<\/code> block inside the HTML, then click <strong>Edit background<\/strong>. You can also tag any element with <code>data-vc-bg<\/code> and an inline <code>background-image<\/code>. Gradients layered with a photo are supported \u2014 only the photo URL is swapped.<\/p><\/dd>\n<dt id=\"why%20isn%27t%20my%20section%20full%20width%3F\"><h3>Why isn't my section full width?<\/h3><\/dt>\n<dd><p>Set the block's alignment to Full width using the block toolbar. The block must be a direct child of the content area for the theme's layout to break it out.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>0.3<\/h4>\n\n<ul>\n<li>Fixed: the Wide\/Full alignment control now appears in the Custom HTML block toolbar (it was previously hidden because the custom editor replaced the block's default controls).<\/li>\n<li>Wide\/Full alignment selection is now stored reliably via a registered <code>align<\/code> attribute.<\/li>\n<li>Added a plugin icon.<\/li>\n<\/ul>\n\n<h4>0.2<\/h4>\n\n<ul>\n<li>Clarified in the description that the plugin adds Wide and Full alignment options and does not change the block's content width.<\/li>\n<\/ul>\n\n<h4>0.1<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<li>Custom HTML block: click-to-edit text, plus image, link, and background editing with an \"Edit content\" \/ \"Edit code\" toggle.<\/li>\n<li>Custom HTML block: Wide and Full width alignment support, applied on the front end.<\/li>\n<\/ul>","raw_excerpt":"Edit text, images, links and backgrounds directly in the WordPress Custom HTML block, and give it Wide and Full width alignment.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/328428","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=328428"}],"author":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/jamiemarsland"}],"wp:attachment":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=328428"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=328428"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=328428"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=328428"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=328428"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=328428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}