Added nested blocks support (inner_blocks). ACF Only.

helpers.js

@@ -248,7 +248,7 @@ export async function isFileEmpty(filePath, ignoreComments = false) {
 
 export function replaceNames(content, images, uploadedImages) {
   images.forEach((image, index) => {
-    content = content.replace(image, uploadedImages[index].fileName);
+    content = content.replaceAll(image, uploadedImages[index].fileName);
   });
 
   return content;

layouts/scripts/dist/frame-index.min.js

@@ -1 +1 @@
-let e;window.initBlock=function(e="",n="",r){t=function(){document.querySelectorAll(n).forEach((e=>r(e)))},t()};let t,n={};function r(r={}){r.template&&(e=r.template),r.data&&(n=r.data),e&&function(e,n,r){const a=Handlebars.compile(e);let o;Handlebars.registerHelper("esc_attr",(function(e){return e})),Handlebars.registerHelper("esc_url",(function(e){return e})),Handlebars.registerHelper("esc_html",(function(e){return e})),Handlebars.registerHelper("base_url",(function(){return"/"}));try{o=a(n)}catch(e){o=`<div style="max-width: 1280px; margin: 1rem auto;">\n      <h1 style="all: unset; font-size: 1.5rem; font-weight: bold; display: block;">Syntax Error:</h1>\n      <pre style="all: unset; padding: 10px 15px; background-color: #ffe6e6; border: 1px solid red; border-radius: 0.25rem; overflow: auto; display: block; white-space: pre;">${e.toString()}</pre>\n    </div>`}r.innerHTML=o,t&&t()}(e,n||{},document.getElementById("hbs-container"))}!function(){function e(){const e=new URLSearchParams(window.location.search),t={};for(const[n,r]of e)t[n]=r;return t}!function(){const t=new URLSearchParams({name:e().data||"default"});fetch(`/data?${t}`).then((e=>e.json())).then((e=>{n=e.data,r({data:n})}))}(),window.addEventListener("message",(function(e){const t=e.data,a="dataUpdate:";if("string"==typeof t&&t.startsWith(a))try{n=JSON.parse(t.substring(a.length)),r({data:n})}catch(e){console.log("Error parsing incoming data.",e)}}))}(),function(){const e=window.io.connect();e.on("error",(function(e){console.log(e)})),e.on("templateUpdate",(function(e){r({template:e.template})}))}();
+let e;window.initBlock=function(e="",n="",r){t=function(){document.querySelectorAll(n).forEach((e=>r(e)))},t()};let t,n={};function r(r={}){r.template&&(e=r.template),r.data&&(n=r.data),e&&function(e,n,r){const a=Handlebars.compile(e);let o;Handlebars.registerHelper("esc_attr",(function(e){return e})),Handlebars.registerHelper("esc_url",(function(e){return e})),Handlebars.registerHelper("esc_html",(function(e){return e})),Handlebars.registerHelper("base_url",(function(){return"/"})),Handlebars.registerHelper("inner_blocks",(function(e){const t=e.data.root.inner_blocks;return t?new Handlebars.SafeString(t):""}));try{o=a(n)}catch(e){o=`<div style="max-width: 1280px; margin: 1rem auto;">\n      <h1 style="all: unset; font-size: 1.5rem; font-weight: bold; display: block;">Syntax Error:</h1>\n      <pre style="all: unset; padding: 10px 15px; background-color: #ffe6e6; border: 1px solid red; border-radius: 0.25rem; overflow: auto; display: block; white-space: pre;">${e.toString()}</pre>\n    </div>`}r.innerHTML=o,t&&t()}(e,n||{},document.getElementById("hbs-container"))}!function(){function e(){const e=new URLSearchParams(window.location.search),t={};for(const[n,r]of e)t[n]=r;return t}!function(){const t=new URLSearchParams({name:e().data||"default"});fetch(`/data?${t}`).then((e=>e.json())).then((e=>{n=e.data,r({data:n})}))}(),window.addEventListener("message",(function(e){const t=e.data,a="dataUpdate:";if("string"==typeof t&&t.startsWith(a))try{n=JSON.parse(t.substring(a.length)),r({data:n})}catch(e){console.log("Error parsing incoming data.",e)}}))}(),function(){const e=window.io.connect();e.on("error",(function(e){console.log(e)})),e.on("templateUpdate",(function(e){r({template:e.template})}))}();

layouts/scripts/frame/frame.js

@@ -119,6 +119,15 @@ function renderBlock(templateHbs, jsonData, target) {
     return '/';
   });
 
+  Handlebars.registerHelper('inner_blocks', function (options) {
+    const content = options.data.root['inner_blocks'];
+    if (!content) {
+      return '';
+    }
+
+    return new Handlebars.SafeString(content);
+  });
+
   let html;
 
   try {

layouts/scripts/toolbar/data-options/DesignPreview.jsx

@@ -130,7 +130,8 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
       return 0;
     }
 
-    const scrollbarOffset = 7;
+    // const scrollbarOffset = 7; // Looks like browser scrollbar is not included in the width calculation anymore.
+    const scrollbarOffset = 0;
     return window.innerWidth / 2 - previewOption.widthDimension / 2 - scrollbarOffset;
   }
 

layouts/scripts/toolbar/responsive.jsx

@@ -65,7 +65,8 @@ function Responsive(props = {}) {
   function updateController() {
     let frameBreakpoint = breakpoint;
     if (typeof frameBreakpoint !== 'string') {
-      const scrollbarWidth = 15;
+      // const scrollbarWidth = 15; // Looks like browser's logic was changed and now scrollbar is not included in the width.
+      const scrollbarWidth = 0;
       frameBreakpoint = (scrollbarWidth + frameBreakpoint) + 'px';
     }
 

platforms/php/build.php

@@ -35,14 +35,6 @@ trait Custom_Handlebars {
 
 			return $context;
 		} );
-
-		$this->add_handlebar( 'safe_html', function ( $context ) {
-			if ( function_exists( 'wp_kses_post' ) ) {
-				return wp_kses_post( $context );
-			}
-
-			return $context;
-		} );
 	}
 
 	public function add_handlebar( $key, $func ): void {
@@ -91,6 +83,8 @@ class Component_Builder {
 
 	private function get_handlebars_template( $path = '' ): string {
 		$template = file_get_contents( $path );
+		$template = preg_replace( '/{{inner_blocks}}/', '<InnerBlocks/>', $template );
+
 		$phpStr   = LightnCandy::compile( $template,
 			[
 				'flags'   => Flags::FLAG_NOESCAPE | Flags::FLAG_PARENT | Flags::FLAG_SPVARS | Flags::FLAG_ELSE | Flags::FLAG_JSLENGTH | Flags::FLAG_JSTRUE | Flags::FLAG_THIS,

server.js

@@ -89,8 +89,6 @@ const hbs = create({
     }, esc_html(html) {
       // TODO: Check if we can remove this helper.
       return html;
-    }, safe_html(html) {
-      return sanitizeHtml(html);
     }
   }
 });