Added nested blocks support (inner_blocks). ACF Only.

Reviewed-on: AXE-WEB/block-dev-tool#13

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';
     }
 

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "@axe-web/block-dev-tool",
-	"version": "1.0.32",
+	"version": "1.0.36",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@axe-web/block-dev-tool",
-			"version": "1.0.32",
+			"version": "1.0.36",
 			"license": "ISC",
 			"dependencies": {
 				"@axe-web/create-block": "^1.1.30",

package.json

@@ -1,15 +1,15 @@
 {
 	"name": "@axe-web/block-dev-tool",
-	"version": "1.0.32",
+	"version": "1.0.36",
 	"author": {
 		"name": "AXE-WEB",
 		"email": "office@axe-web.com",
 		"url": "https://axe-web.com/"
 	},
 	"scripts": {
-		"info": "BLOCK_NAME=icon-text-columns MODULE_PATH= node debug.js",
+		"info": "BLOCK_NAME=ebooks-resources MODULE_PATH= node debug.js",
-		"dev": "BLOCK_NAME=icon-text-columns MODULE_PATH= node server.js",
+		"dev": "BLOCK_NAME=ebooks-resources MODULE_PATH= node server.js",
-		"build-platform": "BLOCK_NAME=icon-text-columns MODULE_PATH= node ./build.js",
+		"build-platform": "BLOCK_NAME=ebooks-resources MODULE_PATH= node ./build.js",
 		"dev-dev-tool": "rollup --config rollup.config.js --watch",
 		"build-dev-tool": "rollup --config rollup.config.js"
 	},

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,

platforms/wordpress/templates/Template_Basic_Component.php

@@ -33,7 +33,7 @@ class <%= blockClassModel %>_Component extends \Core\Component {
 
 		$output = ( include( __DIR__ . '/templates/<%= blockFilename %>.template.php' ) )( $args, self::class );
 
-		return apply_filters( 'axeweb_blocks/<%= ownerFilename %>/<%= blockFilename %>::content', $output );
+		return apply_filters( 'axeweb_blocks/<%= ownerFilename %>/<%= blockFilename %>::content', $output, $args );
 	}
 
 	function register_custom_logic(): void {

platforms/wordpress/templates/helpers/Template_Elementor_Widget.php

@@ -3,6 +3,8 @@
 namespace AXEWEB_Blocks\Blocks\<%= ownerClass %>\<%= blockClassModel %>\Helpers;
 
 class <%= blockClassModel %>_Elementor_Widget extends \Elementor\Widget_Base {
+	use \Core\Traits\Elementor_Widget;
+
 	const PLUGIN_NAME = '<%= blockFilename %>';
 
 	public function get_name() {
@@ -35,12 +37,8 @@ class <%= blockClassModel %>_Elementor_Widget extends \Elementor\Widget_Base {
 
 		$component = new \AXEWEB_Blocks\Blocks\<%= ownerClass %>\<%= blockClassModel %>\<%= blockClassModel %>_Component();
 
-		$args = self::prepare( $settings );
+		$args = $this->prepare( $settings );
 		$component->render( $args );
 	}
 
-	public static function prepare( $args ): array {
-	    // Prepare $args for render function.
-		return $args;
-	}
 }

server.js

@@ -38,7 +38,7 @@ import {
 import PluginError from 'plugin-error';
 import {Server} from "socket.io";
 import {createServer} from 'http';
-import {authtoken, connect} from "ngrok";
+// import {authtoken, connect} from "ngrok";
 import bodyParser from "body-parser";
 
 /**
@@ -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);
     }
   }
 });
@@ -569,8 +567,8 @@ async function getShareableUrl() {
 
   let url;
   try {
-    await authtoken(data.ngrokApiToken);
+    // await authtoken(data.ngrokApiToken);
-    url = await connect(port);
+    // url = await connect(port);
   } catch (e) {
     console.log('Error:', `Can't connect to ngrok, probably wrong token.`);
   }