- Rebuilt the entire project - now we can pass blockName in URL.

- Added "ViewMode"

layouts/index.hbs

@@ -7,12 +7,13 @@
   <title>Block Development Tool</title>
 </head>
 
-<body>
+<body class="{{#if viewMode }}view-mode{{/if}}">
 
 {{> (include_partial "layouts/partials/toolbar") }}
 
 <script>
   window.devTool = {
+    blockName: '{{ blockName }}',
     previewFrameUrl: '{{ previewFrameUrl }}',
     {{#if publicUrl}}
       publicUrl: true,
@@ -21,7 +22,7 @@
 </script>
 
 <div class="preview">
-  <iframe id="preview_frame" src="{{ previewFrameUrl }}?iframe=true" class="breakpoint"></iframe>
+  <iframe id="preview_frame" src="{{ previewFrameUrl }}?iframe=true&block={{blockName}}" class="breakpoint"></iframe>
 </div>
 
 <script src="/scripts/dist/index.min.js"></script>

layouts/partials/head.hbs

@@ -10,5 +10,5 @@
   <link rel="stylesheet" href="{{ this }}">
   {{/each}}
   {{/if}}<link rel="stylesheet" href="/styles/page--view.css">{{# if config.blockName}}
-  <link rel="stylesheet" href="/styles/{{ config.blockName }}.min.css">{{/if}}
+  <link rel="stylesheet" id="block-stylesheet" href="{{staticFilesPath}}/styles/{{ config.blockName }}.min.css?v=1">{{/if}}
 </head>

layouts/partials/scripts.hbs

@@ -10,5 +10,5 @@
 {{/each}}
 {{/if}}
 {{#if config.blockName }}
-<script src="/scripts/{{ config.blockName }}.min.js"></script>
+<script id="block-script" src="{{staticFilesPath}}/scripts/{{ config.blockName }}.min.js?v=1"></script>
 {{/if}}

layouts/partials/toolbar.hbs

@@ -15,6 +15,6 @@
     {{#if styleGuideUrl}}
       <a href="{{ styleGuideUrl }}" target="_blank" class="palette" title="Open Style Guide"></a>
     {{/if}}
-    <a href="{{ previewFrameUrl }}" target="_blank" class="open_in_new_tab" title="Open in New Window"></a>
+    <a href="{{ previewFrameUrl }}?block={{blockName}}" target="_blank" class="open_in_new_tab" title="Open in New Window"></a>
   </div>
 </header>

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="",o){t=function(){document.querySelectorAll(n).forEach((e=>o(e)))},t()};let t,n={};!function(){const o=r().block;function r(){const e=new URLSearchParams(window.location.search),t={};for(const[n,o]of e)t[n]=o;return t}function a(e){const t=document.getElementById(e),n=t.parentNode;let o,r;return"SCRIPT"===t.tagName?(o=document.createElement("script"),o.type="text/javascript",r="src"):"LINK"===t.tagName&&(o=document.createElement("link"),o.rel="stylesheet",r="href"),o.id=e,o[r]=t[r].replace(/(\?v=)[^&]+/,`$1${Date.now()}`),t.remove(),n.append(o),o}function c(r={}){r.template&&(e=r.template),r.data&&(n=r.data),e&&function(e,n,r){const a=Handlebars.compile(e);let c;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(){const e=["block"];return o&&e.push(o.substr(1)),["",...e,""].join("/")}));try{c=a(n)}catch(e){c=`<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=c,t&&t()}(e,n||{},document.getElementById("hbs-container"))}!function(){const e=new URLSearchParams({block:o,name:r().data||"default"});fetch(`/data?${e}`).then((e=>e.json())).then((e=>{n=e.data,c({data:n})}))}(),window.addEventListener("message",(function(e){const t=e.data,o="dataUpdate:";if("string"==typeof t&&t.startsWith(o))try{n=JSON.parse(t.substring(o.length)),c({data:n})}catch(e){console.log("Error parsing incoming data.",e)}})),function(){const e=window.io.connect("",{query:`block=${o}`});e.on("error",(function(e){console.log(e)})),e.on("templateUpdate",(function(e){c({template:e.template})})),e.on("scriptUpdate",(function(e){a("block-script").onload=()=>{c({template:e.template})}})),e.on("styleUpdate",(function(e){a("block-stylesheet")}))}()}();

layouts/scripts/dist/index.min.js

@@ -261,4 +261,4 @@ var U=t.exports,B=$.exports;function V(e){for(var t="https://reactjs.org/docs/er
   background-repeat: no-repeat;
   background-position: top;
   cursor: move;
-`;let zp={x:0,y:0};function Np({previewOption:e={widthDimension:0}}){const n=t.exports.createRef(),[r,a]=t.exports.useState(!1),[l,o]=t.exports.useState({x:m(e),y:0}),[i,u]=t.exports.useState(85),s=t.exports.useCallback((function(e){if(!r)return;const t=e.shiftKey?10:1;"ArrowUp"===e.key?p({y:-1*t},!0):"ArrowDown"===e.key?p({y:t},!0):"ArrowLeft"===e.key?p({x:-1*t},!0):"ArrowRight"===e.key&&p({x:t},!0)}),[l,r]);if(t.exports.useEffect((()=>(document.addEventListener("keydown",s),()=>{document.removeEventListener("keydown",s)})),[s]),t.exports.useEffect((()=>(p({x:m(e),y:0}),window.addEventListener("message",h),()=>window.removeEventListener("message",h))),[e.widthDimension]),!e)return;const c=!e.url,f=[];!c&&r&&f.push("active"),c&&f.push("disabled");return M.createElement(M.Fragment,null,M.createElement(_p,{onClick:()=>{a(!r)},className:f.join(" "),disabled:c}),r&&!c&&M.createElement(M.Fragment,null,M.createElement("input",{type:"range",value:i,min:"0",max:"100",onChange:e=>{u(e.target.value)}}),M.createElement(Pp,{onMouseUp:e=>function(e){const t=n.current;p({x:t.offsetLeft,y:t.offsetTop}),document.body.removeEventListener("mousemove",d)}(),style:{opacity:i/100}},M.createElement("img",{src:e.url,alt:"",ref:n,onMouseDown:e=>function(e){zp.x=e.clientX,zp.y=e.clientY,document.body.addEventListener("mousemove",d)}(e),draggable:!1,style:{top:l.y+"px",left:l.x+"px"}}))));function d(e){const t=n.current;if(t){const n={x:t.offsetLeft-(zp.x-e.clientX),y:t.offsetTop-(zp.y-e.clientY)};t.style.left=n.x+"px",t.style.top=n.y+"px",zp.x=e.clientX,zp.y=e.clientY}}function p({x:e,y:t},n=!1){e=void 0===e?l.x:n?l.x+e:e,t=void 0===t?l.y:n?l.y+t:t,o({x:e,y:t})}function m(e){if(!e)return 0;return window.innerWidth/2-e.widthDimension/2-7}function h(t){"responsiveUpdate"===t.data&&"100%"===window.responsiveState.breakpoint&&p({x:m(e),y:0})}}function Tp(e={}){e.rootAttributes=e.rootAttributes??{};const[n,r]=t.exports.useState({dataName:"default",data:{},dataText:"{}",dataOptions:[],designPreview:[],errorMessage:null,loading:!1}),[a,l]=t.exports.useState(f(n.dataName,n.designPreview)),o=e=>r(Object.assign({},n,e)),[i,u]=t.exports.useState(!1);t.exports.useEffect((async()=>{await p(n.dataName)}),[]);const s=t.exports.useCallback((e=>{vp(e)&&c()}),[]);t.exports.useEffect((()=>(document.addEventListener("keydown",s),()=>{document.removeEventListener("keydown",s)})),[s]),t.exports.useEffect((()=>(window.addEventListener("message",d),()=>window.removeEventListener("message",d))),[n]),t.exports.useEffect((()=>{l(f(n.dataName,n.designPreview))}),[n.designPreview]);return M.createElement("div",{style:{display:"flex",gap:"1rem",alignItems:"center"}},M.createElement(xp,{onClick:()=>(u(!0),void setTimeout((()=>document.querySelector(".sidebar-active").focus()))),title:"Open a Sidebar with Data Options"}),M.createElement(Np,{previewOption:a}),M.createElement(wp,{className:i?"active sidebar-active":"",tabIndex:"0",onBlur:async e=>await gp(e)?c():null},M.createElement(Sp,null,M.createElement(Cp,{onClick:()=>c()})),n.dataOptions&&!!n.dataOptions.length&&M.createElement(Ep,null,M.createElement("label",{htmlFor:"data-options"},"Data Options"),M.createElement("select",{name:"data",id:"data-options",onChange:e=>async function(e){const t=e.target.value;await p(t)}(e),value:n.dataName,disabled:n.loading},n.dataOptions.map((e=>{const t=n.dataName===e;return M.createElement("option",{value:e,selected:t},e)})))),n.data&&M.createElement("textarea",{value:n.dataText,onChange:function(e){let t;try{t=JSON.parse(e.target.value)}catch(t){return void o({dataText:e.target.value,errorMessage:"Invalid JSON, please review and try again."})}o({dataText:e.target.value,data:t,errorMessage:null}),m(t)},disabled:n.loading}),n.errorMessage&&M.createElement("p",{className:"alert alert--error"},n.errorMessage),n.loading&&M.createElement("p",{className:"alert"},"Loading, please wait..."),M.createElement("div",{className:"actions"},M.createElement("button",{className:"btn btn--secondary",disabled:n.loading,onClick:e=>function(e,t){e.stopPropagation(),"string"!=typeof t&&(t=JSON.stringify(t,null,2));if(navigator.clipboard&&window.isSecureContext)return navigator.clipboard.writeText(t);{let n=document.createElement("textarea");return n.value=t,n.style.position="fixed",n.style.left="-999999px",n.style.top="-999999px",document.body.appendChild(n),n.select(),new Promise(((t,r)=>{document.execCommand("copy")?t():r(),n.remove(),e.target.focus()}))}}(e,n.data)},"Copy to Clipboard"),M.createElement("button",{className:"btn btn--secondary",disabled:n.loading,onClick:e=>function(){const e="https://blocks-registery.axe-web.com/content-generator/",t=new Headers;t.append("Content-Type","application/json");const r={method:"POST",headers:t,body:JSON.stringify({json:n.data})};return o({loading:!0,errorMessage:null}),fetch(e,r).then((e=>e.json())).then((e=>{if(console.log(e),200!==e.statusCode)throw new Error(e.message);const t=e.variation;o({dataText:JSON.stringify(t,null,2),data:t,errorMessage:
Line truncated
+`;let zp={x:0,y:0};function Np({previewOption:e={widthDimension:0}}){const n=t.exports.createRef(),[r,a]=t.exports.useState(!1),[l,o]=t.exports.useState({x:m(e),y:0}),[i,u]=t.exports.useState(85),s=t.exports.useCallback((function(e){if(!r)return;const t=e.shiftKey?10:1;"ArrowUp"===e.key?p({y:-1*t},!0):"ArrowDown"===e.key?p({y:t},!0):"ArrowLeft"===e.key?p({x:-1*t},!0):"ArrowRight"===e.key&&p({x:t},!0)}),[l,r]);if(t.exports.useEffect((()=>(document.addEventListener("keydown",s),()=>{document.removeEventListener("keydown",s)})),[s]),t.exports.useEffect((()=>(p({x:m(e),y:0}),window.addEventListener("message",h),()=>window.removeEventListener("message",h))),[e.widthDimension]),!e)return;const c=!e.url,f=[];!c&&r&&f.push("active"),c&&f.push("disabled");return M.createElement(M.Fragment,null,M.createElement(_p,{onClick:()=>{a(!r)},className:f.join(" "),disabled:c}),r&&!c&&M.createElement(M.Fragment,null,M.createElement("input",{type:"range",value:i,min:"0",max:"100",onChange:e=>{u(e.target.value)}}),M.createElement(Pp,{onMouseUp:e=>function(e){const t=n.current;p({x:t.offsetLeft,y:t.offsetTop}),document.body.removeEventListener("mousemove",d)}(),style:{opacity:i/100}},M.createElement("img",{src:e.url,alt:"",ref:n,onMouseDown:e=>function(e){zp.x=e.clientX,zp.y=e.clientY,document.body.addEventListener("mousemove",d)}(e),draggable:!1,style:{top:l.y+"px",left:l.x+"px"}}))));function d(e){const t=n.current;if(t){const n={x:t.offsetLeft-(zp.x-e.clientX),y:t.offsetTop-(zp.y-e.clientY)};t.style.left=n.x+"px",t.style.top=n.y+"px",zp.x=e.clientX,zp.y=e.clientY}}function p({x:e,y:t},n=!1){e=void 0===e?l.x:n?l.x+e:e,t=void 0===t?l.y:n?l.y+t:t,o({x:e,y:t})}function m(e){if(!e)return 0;return window.innerWidth/2-e.widthDimension/2-7}function h(t){"responsiveUpdate"===t.data&&"100%"===window.responsiveState.breakpoint&&p({x:m(e),y:0})}}function Tp(e={}){e.rootAttributes=e.rootAttributes??{};const[n,r]=t.exports.useState({dataName:"default",data:{},dataText:"{}",dataOptions:[],designPreview:[],errorMessage:null,loading:!1}),[a,l]=t.exports.useState(f(n.dataName,n.designPreview)),o=e=>r(Object.assign({},n,e)),[i,u]=t.exports.useState(!1);t.exports.useEffect((async()=>{await p(n.dataName)}),[]);const s=t.exports.useCallback((e=>{vp(e)&&c()}),[]);t.exports.useEffect((()=>(document.addEventListener("keydown",s),()=>{document.removeEventListener("keydown",s)})),[s]),t.exports.useEffect((()=>(window.addEventListener("message",d),()=>window.removeEventListener("message",d))),[n]),t.exports.useEffect((()=>{l(f(n.dataName,n.designPreview))}),[n.designPreview]);return M.createElement("div",{style:{display:"flex",gap:"1rem",alignItems:"center"}},M.createElement(xp,{onClick:()=>(u(!0),void setTimeout((()=>document.querySelector(".sidebar-active").focus()))),title:"Open a Sidebar with Data Options"}),M.createElement(Np,{previewOption:a}),M.createElement(wp,{className:i?"active sidebar-active":"",tabIndex:"0",onBlur:async e=>await gp(e)?c():null},M.createElement(Sp,null,M.createElement(Cp,{onClick:()=>c()})),n.dataOptions&&!!n.dataOptions.length&&M.createElement(Ep,null,M.createElement("label",{htmlFor:"data-options"},"Data Options"),M.createElement("select",{name:"data",id:"data-options",onChange:e=>async function(e){const t=e.target.value;await p(t)}(e),value:n.dataName,disabled:n.loading},n.dataOptions.map((e=>{const t=n.dataName===e;return M.createElement("option",{value:e,selected:t},e)})))),n.data&&M.createElement("textarea",{value:n.dataText,onChange:function(e){let t;try{t=JSON.parse(e.target.value)}catch(t){return void o({dataText:e.target.value,errorMessage:"Invalid JSON, please review and try again."})}o({dataText:e.target.value,data:t,errorMessage:null}),m(t)},disabled:n.loading}),n.errorMessage&&M.createElement("p",{className:"alert alert--error"},n.errorMessage),n.loading&&M.createElement("p",{className:"alert"},"Loading, please wait..."),M.createElement("div",{className:"actions"},M.createElement("button",{className:"btn btn--secondary",disabled:n.loading,onClick:e=>function(e,t){e.stopPropagation(),"string"!=typeof t&&(t=JSON.stringify(t,null,2));if(navigator.clipboard&&window.isSecureContext)return navigator.clipboard.writeText(t);{let n=document.createElement("textarea");return n.value=t,n.style.position="fixed",n.style.left="-999999px",n.style.top="-999999px",document.body.appendChild(n),n.select(),new Promise(((t,r)=>{document.execCommand("copy")?t():r(),n.remove(),e.target.focus()}))}}(e,n.data)},"Copy to Clipboard"),M.createElement("button",{className:"btn btn--secondary",disabled:n.loading,onClick:e=>function(){const e="https://blocks-registery.axe-web.com/content-generator/",t=new Headers;t.append("Content-Type","application/json");const r={method:"POST",headers:t,body:JSON.stringify({json:n.data})};return o({loading:!0,errorMessage:null}),fetch(e,r).then((e=>e.json())).then((e=>{if(console.log(e),200!==e.statusCode)throw new Error(e.message);const t=e.variation;o({dataText:JSON.stringify(t,null,2),data:t,errorMessage:
Line truncated

layouts/scripts/dist/sync.min.js

@@ -18,4 +18,4 @@ function e(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"de
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var $=n.exports,j=V.exports;function B(e){for(var n="https://reactjs.org/docs/error-decoder.html?invariant="+e,t=1;t<arguments.length;t++)n+="&args[]="+encodeURIComponent(arguments[t]);return"Minified React error #"+e+"; visit "+n+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var H=new Set,W={};function Q(e,n){q(e,n),q(e+"Capture",n)}function q(e,n){for(W[e]=n,e=0;e<n.length;e++)H.add(n[e])}var K=!("undefined"==typeof window||void 0===window.document||void 0===window.document.createElement),Y=Object.prototype.hasOwnProperty,X=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,G={},Z={};function J(e,n,t,r,l,a,o){this.acceptsBooleans=2===n||3===n||4===n,this.attributeName=r,this.attributeNamespace=l,this.mustUseProperty=t,this.propertyName=e,this.type=n,this.sanitizeURL=a,this.removeEmptyString=o}var ee={};"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach((function(e){ee[e]=new J(e,0,!1,e,null,!1,!1)})),[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach((function(e){var n=e[0];ee[n]=new J(n,1,!1,e[1],null,!1,!1)})),["contentEditable","draggable","spellCheck","value"].forEach((function(e){ee[e]=new J(e,2,!1,e.toLowerCase(),null,!1,!1)})),["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach((function(e){ee[e]=new J(e,2,!1,e,null,!1,!1)})),"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach((function(e){ee[e]=new J(e,3,!1,e.toLowerCase(),null,!1,!1)})),["checked","multiple","muted","selected"].forEach((function(e){ee[e]=new J(e,3,!0,e,null,!1,!1)})),["capture","download"].forEach((function(e){ee[e]=new J(e,4,!1,e,null,!1,!1)})),["cols","rows","size","span"].forEach((function(e){ee[e]=new J(e,6,!1,e,null,!1,!1)})),["rowSpan","start"].forEach((function(e){ee[e]=new J(e,5,!1,e.toLowerCase(),null,!1,!1)}));var ne=/[\-:]([a-z])/g;function te(e){return e[1].toUpperCase()}function re(e,n,t,r){var l=ee.hasOwnProperty(n)?ee[n]:null;(null!==l?0!==l.type:r||!(2<n.length)||"o"!==n[0]&&"O"!==n[0]||"n"!==n[1]&&"N"!==n[1])&&(function(e,n,t,r){if(null==n||function(e,n,t,r){if(null!==t&&0===t.type)return!1;switch(typeof n){case"function":case"symbol":return!0;case"boolean":return!r&&(null!==t?!t.acceptsBooleans:"data-"!==(e=e.toLowerCase().slice(0,5))&&"aria-"!==e);default:return!1}}(e,n,t,r))return!0;if(r)return!1;if(null!==t)switch(t.type){case 3:return!n;case 4:return!1===n;case 5:return isNaN(n);case 6:return isNaN(n)||1>n}return!1}(n,t,l,r)&&(t=null),r||null===l?function(e){return!!Y.call(Z,e)||!Y.call(G,e)&&(X.test(e)?Z[e]=!0:(G[e]=!0,!1))}(n)&&(null===t?e.removeAttribute(n):e.setAttribute(n,""+t)):l.mustUseProperty?e[l.propertyName]=null===t?3!==l.type&&"":t:(n=l.attributeName,r=l.attributeNamespace,null===t?e.removeAttribute(n):(t=3===(l=l.type)||4===l&&!0===t?"":""+t,r?e.setAttributeNS(r,n,t):e.setAttribute(n,t))))}"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach((function(e){var n=e.replace(ne,te);ee[n]=new J(n,1,!1,e,null,!1,!1)})),"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach((function(e){var n=e.replace(ne,te);ee[n]=new J(n,1,!1,e,"http://www.w3.org/1999/xlink",!1,!1)})),["xml:base","xml:lang","xml:space"].forEach((function(e){var n=e.replace(ne,te);ee[n]=new J(n,1,!1,e,"http://www.w3.org
Line truncated
+var $=n.exports,j=V.exports;function B(e){for(var n="https://reactjs.org/docs/error-decoder.html?invariant="+e,t=1;t<arguments.length;t++)n+="&args[]="+encodeURIComponent(arguments[t]);return"Minified React error #"+e+"; visit "+n+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var H=new Set,W={};function Q(e,n){q(e,n),q(e+"Capture",n)}function q(e,n){for(W[e]=n,e=0;e<n.length;e++)H.add(n[e])}var K=!("undefined"==typeof window||void 0===window.document||void 0===window.document.createElement),Y=Object.prototype.hasOwnProperty,X=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,G={},Z={};function J(e,n,t,r,l,a,o){this.acceptsBooleans=2===n||3===n||4===n,this.attributeName=r,this.attributeNamespace=l,this.mustUseProperty=t,this.propertyName=e,this.type=n,this.sanitizeURL=a,this.removeEmptyString=o}var ee={};"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach((function(e){ee[e]=new J(e,0,!1,e,null,!1,!1)})),[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach((function(e){var n=e[0];ee[n]=new J(n,1,!1,e[1],null,!1,!1)})),["contentEditable","draggable","spellCheck","value"].forEach((function(e){ee[e]=new J(e,2,!1,e.toLowerCase(),null,!1,!1)})),["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach((function(e){ee[e]=new J(e,2,!1,e,null,!1,!1)})),"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach((function(e){ee[e]=new J(e,3,!1,e.toLowerCase(),null,!1,!1)})),["checked","multiple","muted","selected"].forEach((function(e){ee[e]=new J(e,3,!0,e,null,!1,!1)})),["capture","download"].forEach((function(e){ee[e]=new J(e,4,!1,e,null,!1,!1)})),["cols","rows","size","span"].forEach((function(e){ee[e]=new J(e,6,!1,e,null,!1,!1)})),["rowSpan","start"].forEach((function(e){ee[e]=new J(e,5,!1,e.toLowerCase(),null,!1,!1)}));var ne=/[\-:]([a-z])/g;function te(e){return e[1].toUpperCase()}function re(e,n,t,r){var l=ee.hasOwnProperty(n)?ee[n]:null;(null!==l?0!==l.type:r||!(2<n.length)||"o"!==n[0]&&"O"!==n[0]||"n"!==n[1]&&"N"!==n[1])&&(function(e,n,t,r){if(null==n||function(e,n,t,r){if(null!==t&&0===t.type)return!1;switch(typeof n){case"function":case"symbol":return!0;case"boolean":return!r&&(null!==t?!t.acceptsBooleans:"data-"!==(e=e.toLowerCase().slice(0,5))&&"aria-"!==e);default:return!1}}(e,n,t,r))return!0;if(r)return!1;if(null!==t)switch(t.type){case 3:return!n;case 4:return!1===n;case 5:return isNaN(n);case 6:return isNaN(n)||1>n}return!1}(n,t,l,r)&&(t=null),r||null===l?function(e){return!!Y.call(Z,e)||!Y.call(G,e)&&(X.test(e)?Z[e]=!0:(G[e]=!0,!1))}(n)&&(null===t?e.removeAttribute(n):e.setAttribute(n,""+t)):l.mustUseProperty?e[l.propertyName]=null===t?3!==l.type&&"":t:(n=l.attributeName,r=l.attributeNamespace,null===t?e.removeAttribute(n):(t=3===(l=l.type)||4===l&&!0===t?"":""+t,r?e.setAttributeNS(r,n,t):e.setAttribute(n,t))))}"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach((function(e){var n=e.replace(ne,te);ee[n]=new J(n,1,!1,e,null,!1,!1)})),"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach((function(e){var n=e.replace(ne,te);ee[n]=new J(n,1,!1,e,"http://www.w3.org/1999/xlink",!1,!1)})),["xml:base","xml:lang","xml:space"].forEach((function(e){var n=e.replace(ne,te);ee[n]=new J(n,1,!1,e,"http://www.w3.org
Line truncated

layouts/scripts/frame/frame.js

@@ -17,6 +17,8 @@ function initBlock(blockName = '', selector = '', cb) {
 
 // Data Updates Listeners.
 (function () {
+  const block = getQueryParams().block;
+
   loadDataOptions();
   listenToDataOptionsUpdates();
 
@@ -50,7 +52,10 @@ function initBlock(blockName = '', selector = '', cb) {
   }
 
   function loadDataOptions() {
-    const queryParameters = new URLSearchParams({name: getQueryParams().data || 'default'});
+    const queryParameters = new URLSearchParams({
+      block,
+      name: getQueryParams().data || 'default'
+    });
     fetch(`/data?${queryParameters}`)
       .then((response) => response.json())
       .then((response) => {
@@ -58,14 +63,12 @@ function initBlock(blockName = '', selector = '', cb) {
         updateBlock({data});
       })
   }
-})();
 
-// Listen to Template updates.
-(function () {
+  // Listen to Template updates.
   initSocket();
 
   function initSocket() {
-    const socket = window.io.connect();
+    const socket = window.io.connect('', {query: `block=${block}`});
 
     socket.on('error', function (err) {
       console.log(err);
@@ -78,60 +81,104 @@ function initBlock(blockName = '', selector = '', cb) {
     socket.on('templateUpdate', function (args) {
       updateBlock({template: args.template});
     });
-  }
-})();
 
-function updateBlock(args = {}) {
-  if (args.template) {
-    template = args.template; // Update state.
+    socket.on('scriptUpdate', function (args) {
+      const tag = updateTag('block-script');
+      tag.onload = () => {
+        updateBlock({template: args.template});
+      }
+    });
+
+    socket.on('styleUpdate', function (args) {
+      updateTag('block-stylesheet');
+    });
   }
 
-  if (args.data) {
-    data = args.data; // Update state.
+  function updateTag(id) {
+    const tag = document.getElementById(id);
+    const wrapper = tag.parentNode;
+
+    let clone;
+    let attr;
+    if (tag.tagName === 'SCRIPT') {
+      clone = document.createElement('script');
+      clone.type = 'text/javascript';
+      attr = 'src';
+    } else if (tag.tagName === 'LINK') {
+      clone = document.createElement('link');
+      clone.rel = 'stylesheet';
+      attr = 'href';
+    }
+
+    clone.id = id;
+
+    // Add version to the stylesheet URL, make sure we override the cache and already existing version there.
+    clone[attr] = tag[attr].replace(/(\?v=)[^&]+/, `$1${Date.now()}`);
+
+    tag.remove();
+    wrapper.append(clone);
+
+    return clone;
   }
 
-  if (!template) {
-    return;
+  function updateBlock(args = {}) {
+    if (args.template) {
+      template = args.template; // Update state.
+    }
+
+    if (args.data) {
+      data = args.data; // Update state.
+    }
+
+    if (!template) {
+      return;
+    }
+
+    renderBlock(template, data || {}, document.getElementById("hbs-container"));
   }
 
-  renderBlock(template, data || {}, document.getElementById("hbs-container"));
-}
+  function renderBlock(templateHbs, jsonData, target) {
+    const template = Handlebars.compile(templateHbs);
 
-function renderBlock(templateHbs, jsonData, target) {
-  const template = Handlebars.compile(templateHbs);
+    /**
+     * Handlebars Helpers
+     */
+    Handlebars.registerHelper('esc_attr', function (attr) {
+      return attr;
+    });
 
-  /**
-   * Handlebars Helpers
-   */
-  Handlebars.registerHelper('esc_attr', function (attr) {
-    return attr;
-  });
+    Handlebars.registerHelper('esc_url', function (attr) {
+      return attr;
+    });
 
-  Handlebars.registerHelper('esc_url', function (attr) {
-    return attr;
-  });
+    Handlebars.registerHelper('esc_html', function (attr) {
+      return attr;
+    });
 
-  Handlebars.registerHelper('esc_html', function (attr) {
-    return attr;
-  });
+    Handlebars.registerHelper('base_url', function () {
+      const list = ['block'];
 
-  Handlebars.registerHelper('base_url', function () {
-    return '/';
-  });
+      if (block) {
+        list.push(block.substr(1));
+      }
 
-  let html;
+      return ['', ...list, ''].join('/');
+    });
 
-  try {
-    html = template(jsonData);
-  } catch (e) {
-    html = `<div style="max-width: 1280px; margin: 1rem auto;">
+    let html;
+
+    try {
+      html = template(jsonData);
+    } catch (e) {
+      html = `<div style="max-width: 1280px; margin: 1rem auto;">
       <h1 style="all: unset; font-size: 1.5rem; font-weight: bold; display: block;">Syntax Error:</h1>
       <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>
     </div>`;
-  }
+    }
 
-  target.innerHTML = html;
-  if (reload) {
-    reload();
+    target.innerHTML = html;
+    if (reload) {
+      reload();
+    }
   }
-}
+})();

layouts/scripts/sync.jsx

@@ -46,31 +46,10 @@ function SyncScreen() {
   </>
 
   async function ignoreVersionSync() {
-    setLoading(true);
-
-    let data = {};
-    try {
-      const response = await fetch('/sync', {
-        method: 'POST',
-        body: JSON.stringify({ignore: true}),
-        headers: {
-          'Content-Type': 'application/json'
-        }
-      });
-      data = await response.json();
-    } catch (err) {
-      setError('Error: ' + err.message);
-      setLoading(false);
-      return;
-    }
-
-    if (data.status !== 200) {
-      setError(data.message);
-      setLoading(false);
-      return;
-    }
-
-    setTimeout(() => window.location.reload(), 1000);
+    // Add "ignore" query parameter to current URl and redirect.
+    const url = new URL(window.location.href);
+    url.searchParams.set('ignoreVersionSync', 'true');
+    window.location = url.href;
   }
 
   async function runSyncLogic() {
@@ -78,7 +57,14 @@ function SyncScreen() {
 
     let data = {};
     try {
-      const response = await fetch('/sync', {method: 'POST'});
+      const response = await fetch('/sync', {
+        method: 'POST',
+        body: JSON.stringify({block: getQueryParams().block}),
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      });
+
       data = await response.json();
     } catch (err) {
       setError('Error: ' + err.message);
@@ -95,6 +81,21 @@ function SyncScreen() {
     setTimeout(() => window.location.reload(), 1000);
   }
 
+  // TODO: This function is used in multiple places (repeated code).
+  //  Move to a common place.
+  function getQueryParams() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const params = {};
+
+    for (const [key, value] of urlParams) {
+      params[key] = value;
+    }
+
+    return params;
+  }
+
+
 }
 
 init();
+

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

@@ -169,7 +169,7 @@ function DataOptions(props = {}) {
   }
 
   async function fetchDataOptions(name = 'default') {
-    const queryParameters = new URLSearchParams({name});
+    const queryParameters = new URLSearchParams({name, block: window.devTool.blockName});
     const response = await fetch(`/data?${queryParameters}`);
     return await response.json();
   }

layouts/scripts/toolbar/publish.jsx

@@ -43,6 +43,7 @@ function Publish(props = {}) {
 export function setupPublish(rootAttributes) {
   // INIT
   const wrapper = document.createElement('div');
+  wrapper.setAttribute('id', 'publish-btn');
   document.querySelector('.page_toolbar__right').append(wrapper)
 
   const root = ReactDOM.createRoot(wrapper);

layouts/styles/page--main.css

@@ -8,6 +8,9 @@ body {
   font-size: 1rem;
   background-color: #F7FAFC;
 }
+body.view-mode #publish-btn {
+  display: none;
+}
 
 .btn {
   --btn-color: #333;

layouts/styles/page--main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--preview.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EAEA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;;AC5BJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;AAKN;EAEE;EACA;EACA;EACA;;AAGF;EACE;;;AGlFJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACE;EAEA;EACA;;;AHiEJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EAEE;EACA","file":"page--main.css"}
+{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--preview.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EAEA;;AAGE;EACE;;;ACbN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;;AC5BJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFUF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;AAKN;EAEE;EACA;EACA;EACA;;AAGF;EACE;;;AGxFJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACE;EAEA;EACA;;;AHuEJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EAEE;EACA","file":"page--main.css"}

layouts/styles/page--main.scss

@@ -8,6 +8,12 @@ body {
   font-size: 1rem;
   //overflow: none;
   background-color: #F7FAFC;
+
+  &.view-mode {
+    #publish-btn {
+      display: none;
+    }
+  }
 }
 
 @import "buttons";