Layout Grid Block - Version 1.0.2

Version Description

  • 28th November 2019 =
  • Fix a bug with duplicate column spans
Download this release

Release Info

Developer johnny5
Plugin Icon 128x128 Layout Grid Block
Version 1.0.2
Comparing to
See all releases

Code changes from version 1.0.1 to 1.0.2

Files changed (4) hide show
  1. index.asset.php +1 -1
  2. index.js +1 -1
  3. index.php +1 -2
  4. readme.txt +4 -1
index.asset.php CHANGED
@@ -1 +1 @@
1
- <?php return array('dependencies' => array('lodash', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-i18n', 'wp-keycodes', 'wp-polyfill'), 'version' => 'ba996c84bdb680b74865f9ae25ff428b');
1
+ <?php return array('dependencies' => array('lodash', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-i18n', 'wp-keycodes', 'wp-polyfill'), 'version' => '55abc2add67222e5006784a7f29e1122');
index.js CHANGED
@@ -3,4 +3,4 @@
3
  Copyright (c) 2017 Jed Watson.
4
  Licensed under the MIT License (MIT), see
5
  http://jedwatson.github.io/classnames
6
- */!function(){"use strict";var n={}.hasOwnProperty;function o(){for(var e=[],t=0;t<arguments.length;t++){var r=arguments[t];if(r){var c=typeof r;if("string"===c||"number"===c)e.push(r);else if(Array.isArray(r)&&r.length){var i=o.apply(null,r);i&&e.push(i)}else if("object"===c)for(var a in r)n.call(r,a)&&r[a]&&e.push(a)}}return e.join(" ")}e.exports?(o.default=o,e.exports=o):void 0===(r=function(){return o}.apply(t,[]))||(e.exports=r)}()},function(e,t){e.exports=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}},function(e,t){function n(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}e.exports=function(e,t,r){return t&&n(e.prototype,t),r&&n(e,r),e}},function(e,t,n){var r=n(21),o=n(4);e.exports=function(e,t){return!t||"object"!==r(t)&&"function"!=typeof t?o(e):t}},function(e,t){function n(t){return e.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},n(t)}e.exports=n},function(e,t,n){var r=n(22);e.exports=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&r(e,t)}},function(e,t){!function(){e.exports=this.wp.blocks}()},function(e,t){!function(){e.exports=this.wp.data}()},function(e,t){!function(){e.exports=this.wp.compose}()},function(e,t,n){var r=n(18),o=n(19),c=n(20);e.exports=function(e){return r(e)||o(e)||c()}},function(e,t){!function(){e.exports=this.lodash}()},function(e,t){!function(){e.exports=this.wp.keycodes}()},function(e,t){e.exports=function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}},function(e,t){e.exports=function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}},function(e,t){e.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}},function(e,t){function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function r(t){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?e.exports=r=function(e){return n(e)}:e.exports=r=function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":n(e)},r(t)}e.exports=r},function(e,t){function n(t,r){return e.exports=n=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},n(t,r)}e.exports=n},function(e,t,n){"use strict";n.r(t);var r=n(2),o=n.n(r),c=n(12),i=n(1),a=n(15),s=n.n(a),u=n(7),l=n.n(u),f=n(8),p=n.n(f),b=n(9),d=n.n(b),h=n(10),m=n.n(h),v=n(4),g=n.n(v),O=n(11),j=n.n(O),y=n(0),k=n(16),_=n(6),w=n.n(_),E=n(5),S=n(3),C=n(17),x=n(13),P=n(14),M=function(){return[{label:Object(i.__)("1 column"),value:1},{label:Object(i.__)("2 columns"),value:2},{label:Object(i.__)("3 columns"),value:3},{label:Object(i.__)("4 columns"),value:4}]},z="Tablet",B="Mobile",A=function(){return[{value:"Desktop",label:Object(i.__)("Desktop")},{value:z,label:Object(i.__)("Tablet")},{value:B,label:Object(i.__)("Mobile")}]},D=4,L=["Desktop",z,B];function R(e,t){return"column".concat(e+1).concat(t,"Span")}function N(e,t){return"column".concat(e+1).concat(t,"Offset")}var V=function(e){return e===z?8:e===B?4:12};function T(e,t,n){return e===z?3===t&&2===n?V(e):t>1?V(e)/2:V(e):e===B?V(e):V(e)/t}function I(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function G(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?I(Object(n),!0).forEach((function(t){o()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):I(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var H=function(e,t){return"column".concat(e+1,"-grid__span-").concat(t)},U=function(e,t){return"column".concat(e+1,"-grid__start-").concat(t)},X=function(e,t){return"column".concat(e+1,"-grid__row-").concat(t)},F=function(e,t,n){return"column".concat(e+1,"-").concat(n.toLowerCase(),"-grid__span-").concat(t)},K=function(e,t,n){return"column".concat(e+1,"-").concat(n.toLowerCase(),"-grid__start-").concat(t)},W=function(e,t,n){return"column".concat(e+1,"-").concat(n.toLowerCase(),"-grid__row-").concat(t)};function q(e,t){return Math.floor(e/t)}function J(e,t){return e%t}function Q(e,t,n,r){return{name:e,column:t,value:n,device:r,enabled:!(arguments.length>4&&void 0!==arguments[4])||arguments[4]}}function Y(e,t,n){for(var r=[],o=V(e),c=function(e,t,n){for(var r=[],o=0,c=0;c<e;c++){var i=R(c,t),a=N(c,t),s=n[i]||T(t,e,c),u=n[a]||0;r.push({position:o+u,span:s}),o+=u,o+=s}return r}(t,e,n),i=0;i<c.length;i++){var a=c[i],s=a.span,u=a.position,l=q(u,o),f=J(u,o);r.push(Q("span",i,s,e)),r.push(Q("offset",i,f+1,e,f>0)),r.push(Q("row",i,l+1,e))}return r}function Z(e,t){var n={};return e.filter((function(e){return e.enabled&&t[e.name]})).map((function(e){return n[t[e.name](e.column,e.value,e.device)]=!0})),n}var $=function(){return Object(y.createElement)(S.SVG,{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},Object(y.createElement)(S.Path,{d:"M4 5v13h17V5H4zm10 2v9h-3V7h3zM6 7h3v9H6V7zm13 9h-3V7h3v9z"}))},ee=function(){return Object(y.createElement)(S.SVG,{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 48 48"},Object(y.createElement)(S.Path,{d:"M7 12v24h34V12H7zm32 22H9V14h30v20z"}))},te=function(){return Object(y.createElement)(S.SVG,{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 48 48"},Object(y.createElement)(S.Path,{d:"M7,12v24h34V12H7z M23,34H9V14h14V34z M39,34H25V14h14V34z"}))},ne=function(){return Object(y.createElement)(S.SVG,{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 48 48"},Object(y.createElement)(S.Path,{d:"M7 12v24h34V12H7zm23 2h9v20h-9V14zm-2 20h-8V14h8v20zM9 14h9v20H9V14z"}))},re=function(){return Object(y.createElement)(S.SVG,{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 48 48"},Object(y.createElement)(S.Path,{d:"M7 12v24h34V12H7zm8 22H9V14h6v20zm8 0h-6V14h6v20zm8 0h-6V14h6v20zm8 0h-6V14h6v20z"}))},oe=function(e){var t=e.columns;return 4===t?Object(y.createElement)(re,null):3===t?Object(y.createElement)(ne,null):2===t?Object(y.createElement)(te,null):Object(y.createElement)(ee,null)};var ce=function(e){var t=e.height,n=e.xPos,r=e.top,o=e.isSelected,c=w()("wpcom-overlay-resize__handle","components-resizable-box__container",{"is-selected":o}),i={height:t+"px",width:n+"px",top:r+"px"},a={left:n+"px"};return Object(y.createElement)("div",{className:c,style:i},Object(y.createElement)("span",null,Object(y.createElement)("div",{className:"components-resizable-box__handle components-resizable-box__side-handle components-resizable-box__handle-left",style:a})))},ie=function(e){function t(e){var n;return l()(this,t),n=d()(this,m()(t).call(this,e)),o()(g()(n),"onMouseDown",(function(e){var t=e.target;if((0===e.button||e.touches)&&(t.dataset.resizeRight||t.dataset.resizeLeft)){n.block=t.closest(".wp-block");var r=n.block.getBoundingClientRect(),o=r.height,c=r.right,i=r.left,a=r.top,s=t.getBoundingClientRect().width,u=n.getChildPosition(n.block),l=t.dataset.resizeLeft;n.setState({resizingColumn:u,xPos:n.getAdjustedOffset(n.getMouseX(e),s),height:o,width:s,top:n.getAdjustedTop(a),direction:l?"left":"right",max:l?n.getAdjustedOffset(c,s):n.getAdjustedOffset(i,s)}),0===e.button?(document.addEventListener("mousemove",n.onMouseMove),document.addEventListener("mouseup",n.onMouseUp),e.preventDefault()):(document.addEventListener("touchmove",n.onMouseMove),document.addEventListener("touchend",n.onMouseUp)),e.stopPropagation()}})),o()(g()(n),"onMouseMove",(function(e){e.stopPropagation(),void 0===e.touches&&e.preventDefault();var t=n.block.getBoundingClientRect().height;n.setState({xPos:n.getRestrictedOffset(n.getAdjustedOffset(n.getMouseX(e))),height:t});var r=n.getNearestColumn(n.state.direction,e);r&&n.props.onResize(n.state.resizingColumn,r)})),o()(g()(n),"onMouseUp",(function(e){n.setState({resizingColumn:-1}),document.removeEventListener("mousemove",n.onMouseMove),document.removeEventListener("mouseup",n.onMouseUp),document.removeEventListener("touchmove",n.onMouseMove),document.removeEventListener("touchend",n.onMouseUp)})),n.containerRef=Object(y.createRef)(),n.state={resizingColumn:-1,xPos:0,height:0},n}return j()(t,e),p()(t,[{key:"getNearestColumn",value:function(e,t){var n=this.props,r=n.totalColumns,o=n.layoutGrid,c=o.getStart(this.state.resizingColumn),i=o.getSpan(this.state.resizingColumn),a=Math.min(r,Math.max(0,function(e,t,n,r){var o=e.getBoundingClientRect(),c=o.width/r,i=t-o.x,a=Math.floor(i/c),s=i%c;return"left"===n?s<=c/2?a:a+1:s<c/2?a:a+1}(this.containerRef.current,this.getMouseX(t),e,r)));if("left"===e){if(a===c)return null;var s=Math.abs(a-c),u={start:a,span:a>c?i-s:i+s,direction:e};return u.start>=c+i?null:(u.span=Math.max(1,u.span),u)}return{span:Math.max(1,a-c),direction:e}}},{key:"getMouseX",value:function(e){var t=e.clientX,n=e.targetTouches;return t||n&&n[0].clientX}},{key:"getAdjustedOffset",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=this.state.width,r=t>0?t:n;return e-this.containerRef.current.getBoundingClientRect().left-r/2}},{key:"getAdjustedTop",value:function(e){return e-this.containerRef.current.getBoundingClientRect().top}},{key:"getRestrictedOffset",value:function(e){var t=this.state,n=t.direction,r=t.max,o=t.width;return"left"===n?Math.min(r-o,e):Math.max(r+o,e)}},{key:"getChildPosition",value:function(e){for(var t=0;null!==e.previousSibling;)e=e.previousSibling,t++;return t}},{key:"render",value:function(){var e=this.props,t=e.className,n=e.children,r=e.isSelected,o=this.state,c=o.resizingColumn,i=o.xPos,a=o.height,s=w()(t,-1!==c?"wp-block-jetpack-layout-grid__resizing":null);return Object(y.createElement)("div",{className:s,onMouseDown:this.onMouseDown,onTouchStart:this.onMouseDown,ref:this.containerRef},-1!==c&&Object(y.createElement)(ce,{height:a,xPos:i,top:this.state.top,isSelected:r}),n)}}]),t}(y.Component);function ae(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function se(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ae(Object(n),!0).forEach((function(t){o()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ae(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var ue=function(){function e(t,n,r){l()(this,e),this.attributes=t,this.device=n,this.columnCount=r}return p()(e,[{key:"getGridValues",value:function(){for(var e={},t=0;t<this.columnCount;t++){var n=T(this.device,this.columnCount,t);e[R(t,this.device)]=this.getSpan(t)||n,e[N(t,this.device)]=this.getOffset(t)}return e}},{key:"applyAdjustments",value:function(e){for(var t=this.getGridValues(),n=0;n<e.length;n++)t=se({},t,{},e[n]);return t}},{key:"getSpanAdjustment",value:function(e,t){return o()({},R(e,this.device),t)}},{key:"getAdjustOffset",value:function(e,t){return o()({},N(e,this.device),t)}},{key:"getShrinkOffset",value:function(e,t){var n=this.getOffset(e),r=t>=n?n:t;return{adjustment:this.getAdjustOffset(e,n-r),offsetUsed:r}}},{key:"hasOverlaps",value:function(e){for(var t=0;t<e.length;t++)for(var n=e[t],r=t+1;r<e.length;r++){var o=e[r];if(n.start>o.start&&n.start<o.end)return!0;if(n.end>o.start&&n.end<o.end)return!0}return!1}},{key:"validateGrid",value:function(e){for(var t,n,r=[],o=V(this.device),c=0,i=0,a=0;a<this.columnCount;a++){var s=e[R(a,this.device)],u=e[N(a,this.device)];if((i+=u)>=o&&(i-=o),(i+=s)>o)return!1;r.push({start:c+u,end:c+u+s}),c+=s+u}return!(c>(t=this.device,n=this.columnCount,t===z&&n>2?2*V(t):t===B?V(t)*n:V(t)))&&!this.hasOverlaps(r)}},{key:"getEndAdjustments",value:function(e,t){var n=[];if(t<0)return[this.getAdjustOffset(e,this.getOffset(e)+Math.abs(t))];if(t>0)for(var r=e;r<this.columnCount&&t>0;r++){var o=this.getShrinkOffset(r,Math.abs(t));n.push(o.adjustment),t-=o.offsetUsed}return n}},{key:"getStartMovedLeft",value:function(e,t){for(var n=[],r=e;r>=0&&t>0;r--){var o=this.getShrinkOffset(r,t);n.push(o.adjustment),t-=o.offsetUsed}return n}},{key:"getStartAdjustments",value:function(e,t){var n=this.getOffset(e),r=this.getOffsetFromStart(e,t),o=r-n;return o<0?this.getStartMovedLeft(e,Math.abs(o)):[this.getAdjustOffset(e,r)]}},{key:"getSpan",value:function(e){return this.attributes[R(e,this.device)]}},{key:"getOffset",value:function(e){return this.attributes[N(e,this.device)]}},{key:"getStart",value:function(e){for(var t=0,n=0;n<e;n++)t+=this.getSpan(n)+this.getOffset(n);var r=Math.max(1,Math.floor(t/V(this.device)));return(t+this.getOffset(e))%(r*V(this.device))}},{key:"getOffsetFromStart",value:function(e,t){if(0===e)return t;var n=t-this.getStart(e);return this.getOffset(e)+n}},{key:"convertOffsetToStart",value:function(e,t){return this.getStart(e)+(t-this.getOffset(e))}},{key:"getAdjustedGrid",value:function(e,t){var n=t.start,r=void 0===n?this.getStart(e):n,o=t.span,c=void 0===o?this.getSpan(e):o,i=[];r!==this.getStart(e)&&c!==this.getSpan(e)?i=(i=i.concat(this.getStartAdjustments(e,r))).concat(this.getSpanAdjustment(e,c)):c!==this.getSpan(e)?i=(i=i.concat(this.getSpanAdjustment(e,c))).concat(this.getEndAdjustments(e+1,c-this.getSpan(e))):r!==this.getStart(e)&&(i=(i=i.concat(this.getStartAdjustments(e,r))).concat(this.getEndAdjustments(e+1,r-this.getStart(e))));var a=this.applyAdjustments(i);return i.length>0&&this.validateGrid(a)?a:null}}]),e}();function le(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}var fe=["jetpack/layout-grid-column"],pe=function(e){function t(e){var n;return l()(this,t),n=d()(this,m()(t).call(this,e)),o()(g()(n),"onChangeLayout",(function(e){for(var t={},r=0;r<e;r++)for(var o=0;o<L.length;o++){var c=T(L[o],e,r);t[R(r,L[o])]=c,t[N(r,L[o])]=0}n.props.updateColumns(n.props.columns,e,t)})),o()(g()(n),"onChangeDevice",(function(e){n.setState({selectedDevice:e})})),o()(g()(n),"onResize",(function(e,t){var r=new ue(n.props.attributes,n.state.selectedDevice,n.props.columns).getAdjustedGrid(e,t);r&&n.props.setAttributes(r)})),o()(g()(n),"onChangeSpan",(function(e,t,r){var o=new ue(n.props.attributes,t,n.props.columns).getAdjustedGrid(e,{span:parseInt(r,10)});o&&n.props.setAttributes(o)})),o()(g()(n),"onChangeOffset",(function(e,t,r){var o=new ue(n.props.attributes,t,n.props.columns),c=o.getAdjustedGrid(e,{start:o.convertOffsetToStart(e,parseInt(r,10))});c&&n.props.setAttributes(c)})),n.overlayRef=Object(y.createRef)(),n.state={selectedDevice:A()[0].value},n}return j()(t,e),p()(t,[{key:"renderDeviceSettings",value:function(e,t,n){for(var r=this,o=new ue(n,t,this.props.columns),c=[],a=function(n){var a=o.getSpan(n)||T(t,e,n),s=o.getOffset(n)||0;c.push(Object(y.createElement)("div",{className:"jetpack-layout-grid-settings",key:n},Object(y.createElement)("strong",null,Object(i.__)("Column")," ",n+1),Object(y.createElement)("div",{className:"jetpack-layout-grid-settings__group"},Object(y.createElement)(S.TextControl,{type:"number",label:Object(i.__)("Offset"),value:s||0,min:0,max:V(t)-1,onChange:function(e){return r.onChangeOffset(n,t,e)}}),Object(y.createElement)(S.TextControl,{type:"number",label:Object(i.__)("Span"),value:a,min:1,max:V(t),onChange:function(e){return r.onChangeSpan(n,t,e)}}))))},s=0;s<e;s++)a(s);return c}},{key:"removeExisting",value:function(e){return e.replace(/column\d-\w*-grid__\w*-\d*/g,"").replace(/column\d-grid__\w*-\d*/g,"").replace(/\s{2,}/,"")}},{key:"getPreviewText",value:function(e){return"Mobile"===e?Object(i.__)("Showing mobile layout"):"Tablet"===e?Object(i.__)("Showing tablet layout"):Object(i.__)("Showing desktop layout")}},{key:"canResizeBreakpoint",value:function(e){return!(!this.overlayRef||!this.overlayRef.current)&&this.overlayRef.current.getBoundingClientRect().width/V(e)>50}},{key:"render",value:function(){var e=this,t=this.props,n=t.className,r=t.attributes,o=void 0===r?{}:r,c=t.isSelected,a=t.columns,s=this.state.selectedDevice,u=function(e,t){return Z(Y(e,t,arguments.length>2&&void 0!==arguments[2]?arguments[2]:{}),{span:H,offset:U,row:X})}(s,a,o),l=new ue(o,s,a),f=w()(this.removeExisting(n),u,{"wp-block-jetpack-layout-tablet":"Tablet"===s,"wp-block-jetpack-layout-desktop":"Desktop"===s,"wp-block-jetpack-layout-mobile":"Mobile"===s,"wp-block-jetpack-layout-resizable":this.canResizeBreakpoint(s)});return 0===a?Object(y.createElement)(S.Placeholder,{icon:"layout",label:Object(i.__)("Choose Layout"),instructions:Object(i.__)("Select a layout to start with:"),className:f},Object(y.createElement)("ul",{className:"block-editor-inner-blocks__template-picker-options"},M().map((function(t){return Object(y.createElement)("li",{key:t.value},Object(y.createElement)(S.IconButton,{isLarge:!0,icon:Object(y.createElement)(oe,{columns:t.value}),onClick:function(){return e.onChangeLayout(t.value)},className:"block-editor-inner-blocks__template-picker-option",label:t.label}))})))):Object(y.createElement)(S.IsolatedEventContainer,null,Object(y.createElement)(ie,{className:f,onResize:this.onResize,totalColumns:V(s),layoutGrid:l,isSelected:c},Object(y.createElement)("div",{className:"wpcom-overlay-grid",ref:this.overlayRef},Object(k.times)(V(s)).map((function(e){return Object(y.createElement)("div",{className:"wpcom-overlay-grid__column",key:e})}))),Object(y.createElement)(E.InnerBlocks,{template:null,templateLock:"all",allowedBlocks:fe}),Object(y.createElement)(E.InspectorControls,null,Object(y.createElement)(S.PanelBody,{title:Object(i.__)("Layout")},Object(y.createElement)("div",{className:"jetpack-layout-grid-columns block-editor-block-styles"},M().map((function(t){return Object(y.createElement)("div",{key:t.value,className:w()("block-editor-block-styles__item",{"is-active":a===t.value}),onClick:function(){return e.onChangeLayout(t.value)},onKeyDown:function(n){C.ENTER!==n.keyCode&&C.SPACE!==n.keyCode||(n.preventDefault(),e.onChangeLayout(t.value))},role:"button",tabIndex:"0","aria-label":t.label},Object(y.createElement)("div",{className:"block-editor-block-styles__item-preview"},Object(y.createElement)(oe,{columns:t.value})),Object(y.createElement)("div",{className:"editor-block-styles__item-label block-editor-block-styles__item-label"},t.label))}))),Object(y.createElement)("p",null,Object(y.createElement)("em",null,Object(i.__)("Changing the number of columns will reset your layout and could remove content.")))),Object(y.createElement)(S.PanelBody,{title:Object(i.__)("Responsive Breakpoints")},Object(y.createElement)("p",null,Object(y.createElement)("em",null,Object(i.__)("Note that previewing your post will show your browser's breakpoint, not the currently selected one."))),Object(y.createElement)(S.ButtonGroup,null,A().map((function(t){return Object(y.createElement)(S.Button,{key:t.value,isDefault:!0,isPrimary:t.value===s,onClick:function(){return e.onChangeDevice(t.value)}},t.label)}))),this.renderDeviceSettings(a,s,o))),Object(y.createElement)("div",{className:"jetpack-layout-grid-previewing"},this.getPreviewText(s))))}}]),t}(y.Component);var be=Object(P.compose)([Object(x.withDispatch)((function(e,t,n){return{updateColumns:function(r,i,a){var u=t.clientId,l=e("core/block-editor").replaceBlock,f=function(e,t,n){if(n>t)return[].concat(s()(e),s()(Object(k.times)(n-t,(function(){return Object(c.createBlock)("jetpack/layout-grid-column")}))));var r=s()(e),o=0;return r.reverse(),(r=r.filter((function(e){return!(o<t-n&&0===e.innerBlocks.length)||(o++,!1)}))).slice(Math.max(0,t-n-o)).reverse()}((0,n.select("core/block-editor").getBlocks)(u),r,i);l(u,Object(c.createBlock)(t.name,function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?le(Object(n),!0).forEach((function(t){o()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):le(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},t.attributes,{},a),f))}}})),Object(x.withSelect)((function(e,t){var n=t.clientId;return{columns:e("core/block-editor").getBlockCount(n)}}))])(pe),de=function(e){var t=e.attributes,n=e.innerBlocks,r=t.className,o=function(e){for(var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n={},r={span:F,offset:K,row:W},o=0;o<L.length;o++)n=G({},n,{},Z(Y(L[o],e,t),r));return n}(n.length,t),c=w()(r,o);return Object(y.createElement)("div",{className:c},Object(y.createElement)(E.InnerBlocks.Content,null))},he=function(e){function t(e){var n;return l()(this,t),n=d()(this,m()(t).call(this,e)),o()(g()(n),"onLeftIn",(function(){n.setState({direction:"left"}),document.addEventListener("mouseup",n.onLeftOut)})),o()(g()(n),"onLeftOut",(function(){n.setState({direction:null}),document.removeEventListener("mouseup",n.onLeftOut)})),o()(g()(n),"onRightIn",(function(){n.setState({direction:"right"}),document.addEventListener("mouseup",n.onRightOut)})),o()(g()(n),"onRightOut",(function(){n.setState({direction:null}),document.removeEventListener("mouseup",n.onRightOut)})),n.state={direction:null},n}return j()(t,e),p()(t,[{key:"render",value:function(){var e,t=this.props,n=t.className,r=t.hasChildBlocks,c=t.backgroundColor,a=t.setBackgroundColor,s=t.attributes,u=t.setAttributes,l=s.padding,f=this.state.direction,p=w()(n,c.class,(e={},o()(e,"wp-block-jetpack-layout-grid__padding-"+l,!0),o()(e,"has-background",c.color),o()(e,"components-resizable-box__container",!0),o()(e,c.class,c.class),o()(e,"wp-blocks-jetpack-layout-grid__showleft","right"===f),o()(e,"wp-blocks-jetpack-layout-grid__showright","left"===f),e)),b={backgroundColor:c.color};return Object(y.createElement)("div",{className:p,style:b},Object(y.createElement)("span",{className:"wp-blocks-jetpack-layout-grid__resize-handles"},Object(y.createElement)("div",{className:"components-resizable-box__handle components-resizable-box__side-handle components-resizable-box__handle-right",onMouseDown:this.onRightIn,"data-resize-right":!0}),Object(y.createElement)("div",{className:"components-resizable-box__handle components-resizable-box__side-handle components-resizable-box__handle-left",onMouseDown:this.onLeftIn,"data-resize-left":!0})),Object(y.createElement)(E.InnerBlocks,{templateLock:!1,renderAppender:r?void 0:function(){return Object(y.createElement)(E.InnerBlocks.ButtonBlockAppender,null)}}),Object(y.createElement)(E.InspectorControls,null,Object(y.createElement)(E.PanelColorSettings,{title:Object(i.__)("Column Color"),initialOpen:!0,colorSettings:[{value:c.color,onChange:a,label:Object(i.__)("Background")}]}),Object(y.createElement)(S.PanelBody,{title:Object(i.__)("Column Padding")},Object(y.createElement)("p",null,Object(i.__)("Choose padding for this column:")),Object(y.createElement)(S.SelectControl,{value:l,onChange:function(e){return u({padding:e})},options:[{value:"none",label:Object(i.__)("No padding")},{value:"small",label:Object(i.__)("Small")},{value:"medium",label:Object(i.__)("Medium")},{value:"large",label:Object(i.__)("Large")},{value:"huge",label:Object(i.__)("Huge")}]}))))}}]),t}(y.Component),me=Object(P.compose)(Object(E.withColors)("backgroundColor"),Object(x.withSelect)((function(e,t){var n=t.clientId;return{hasChildBlocks:(0,e("core/block-editor").getBlockOrder)(n).length>0}})))(he),ve=function(e){var t,n=e.attributes,r=void 0===n?{}:n,c=r.className,i=r.backgroundColor,a=r.customBackgroundColor,s=r.padding,u=Object(E.getColorClassName)("background-color",i),l=w()(c,(t={},o()(t,"wp-block-jetpack-layout-grid__padding-"+s,!0),o()(t,"has-background",i),o()(t,u,u),t)),f={backgroundColor:u?void 0:a};return Object(y.createElement)("div",{className:l,style:f},Object(y.createElement)(E.InnerBlocks.Content,null))};function ge(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Oe(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ge(Object(n),!0).forEach((function(t){o()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ge(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function je(e,t){for(var n={},r=function(e){t.map((function(t){n[R(e,t)]={type:"number"},n[N(e,t)]={type:"number",default:0}}))},o=0;o<e;o++)r(o);return n}Object(c.registerBlockType)("jetpack/layout-grid",{title:Object(i.__)("Layout Grid"),description:Object(i.__)("Align blocks to to a global grid, with support for responsive breakpoints."),icon:$,category:"layout",supports:{align:["full"],html:!1},example:{attributes:{columns:2},innerBlocks:[{name:"jetpack/layout-grid-column",innerBlocks:[{name:"core/paragraph",attributes:{customFontSize:32,content:Object(i.__)("<strong>Snow Patrol</strong>"),align:"center"}}]},{name:"jetpack/layout-grid-column",innerBlocks:[{name:"core/image",attributes:{url:"https://s.w.org/images/core/5.3/Windbuchencom.jpg"}}]}]},attributes:Oe({align:{type:"string",default:"full"}},je(D,L)),edit:be,save:de}),Object(c.registerBlockType)("jetpack/layout-grid-column",{description:Object(i.__)("A column used inside a Layout Grid block."),title:Object(i.__)("Column"),icon:$,category:"layout",parent:["jetpack/layout-grid"],supports:{inserter:!1,reusable:!1,html:!1},attributes:{backgroundColor:{type:"string"},customBackgroundColor:{type:"string"},padding:{type:"string",default:"none"}},edit:me,save:ve})}]);
3
  Copyright (c) 2017 Jed Watson.
4
  Licensed under the MIT License (MIT), see
5
  http://jedwatson.github.io/classnames
6
+ */!function(){"use strict";var n={}.hasOwnProperty;function o(){for(var e=[],t=0;t<arguments.length;t++){var r=arguments[t];if(r){var c=typeof r;if("string"===c||"number"===c)e.push(r);else if(Array.isArray(r)&&r.length){var i=o.apply(null,r);i&&e.push(i)}else if("object"===c)for(var a in r)n.call(r,a)&&r[a]&&e.push(a)}}return e.join(" ")}e.exports?(o.default=o,e.exports=o):void 0===(r=function(){return o}.apply(t,[]))||(e.exports=r)}()},function(e,t){e.exports=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}},function(e,t){function n(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}e.exports=function(e,t,r){return t&&n(e.prototype,t),r&&n(e,r),e}},function(e,t,n){var r=n(21),o=n(4);e.exports=function(e,t){return!t||"object"!==r(t)&&"function"!=typeof t?o(e):t}},function(e,t){function n(t){return e.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},n(t)}e.exports=n},function(e,t,n){var r=n(22);e.exports=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&r(e,t)}},function(e,t){!function(){e.exports=this.wp.blocks}()},function(e,t){!function(){e.exports=this.wp.data}()},function(e,t){!function(){e.exports=this.wp.compose}()},function(e,t,n){var r=n(18),o=n(19),c=n(20);e.exports=function(e){return r(e)||o(e)||c()}},function(e,t){!function(){e.exports=this.lodash}()},function(e,t){!function(){e.exports=this.wp.keycodes}()},function(e,t){e.exports=function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}},function(e,t){e.exports=function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}},function(e,t){e.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}},function(e,t){function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function r(t){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?e.exports=r=function(e){return n(e)}:e.exports=r=function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":n(e)},r(t)}e.exports=r},function(e,t){function n(t,r){return e.exports=n=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},n(t,r)}e.exports=n},function(e,t,n){"use strict";n.r(t);var r=n(2),o=n.n(r),c=n(12),i=n(1),a=n(15),u=n.n(a),s=n(7),l=n.n(s),f=n(8),p=n.n(f),d=n(9),b=n.n(d),h=n(10),m=n.n(h),v=n(4),g=n.n(v),O=n(11),j=n.n(O),y=n(0),k=n(16),_=n(6),w=n.n(_),S=n(5),E=n(3),C=n(17),x=n(13),P=n(14),M=function(){return[{label:Object(i.__)("1 column"),value:1},{label:Object(i.__)("2 columns"),value:2},{label:Object(i.__)("3 columns"),value:3},{label:Object(i.__)("4 columns"),value:4}]},z="Tablet",B="Mobile",A=function(){return[{value:"Desktop",label:Object(i.__)("Desktop")},{value:z,label:Object(i.__)("Tablet")},{value:B,label:Object(i.__)("Mobile")}]},D=4,L=["Desktop",z,B];function R(e,t){return"column".concat(e+1).concat(t,"Span")}function N(e,t){return"column".concat(e+1).concat(t,"Offset")}var V=function(e){return e===z?8:e===B?4:12};function G(e,t,n){return e===z?3===t&&2===n?V(e):t>1?V(e)/2:V(e):e===B?V(e):V(e)/t}function T(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function I(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?T(Object(n),!0).forEach((function(t){o()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):T(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var H=function(e,t){return"column".concat(e+1,"-grid__span-").concat(t)},U=function(e,t){return"column".concat(e+1,"-grid__start-").concat(t)},X=function(e,t){return"column".concat(e+1,"-grid__row-").concat(t)},F=function(e,t,n){return"column".concat(e+1,"-").concat(n.toLowerCase(),"-grid__span-").concat(t)},K=function(e,t,n){return"column".concat(e+1,"-").concat(n.toLowerCase(),"-grid__start-").concat(t)},W=function(e,t,n){return"column".concat(e+1,"-").concat(n.toLowerCase(),"-grid__row-").concat(t)};function q(e,t){return Math.floor(e/t)}function J(e,t){return e%t}function Q(e,t,n,r){return{name:e,column:t,value:n,device:r,enabled:!(arguments.length>4&&void 0!==arguments[4])||arguments[4]}}function Y(e,t,n){for(var r=[],o=V(e),c=function(e,t,n){for(var r=[],o=0,c=0;c<e;c++){var i=R(c,t),a=N(c,t),u=n[i]||G(t,e,c),s=n[a]||0;r.push({position:o+s,span:u}),o+=s,o+=u}return r}(t,e,n),i=0;i<c.length;i++){var a=c[i],u=a.span,s=a.position,l=q(s,o),f=J(s,o);r.push(Q("span",i,u,e)),r.push(Q("offset",i,f+1,e,f>0)),r.push(Q("row",i,l+1,e))}return r}function Z(e,t){var n={};return e.filter((function(e){return e.enabled&&t[e.name]})).map((function(e){return n[t[e.name](e.column,e.value,e.device)]=!0})),n}function $(e){return e?e.replace(/column\d-\w*-grid__\w*-\d*/g,"").replace(/column\d-grid__\w*-\d*/g,"").replace(/\s{2,}/,""):e}var ee=function(){return Object(y.createElement)(E.SVG,{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},Object(y.createElement)(E.Path,{d:"M4 5v13h17V5H4zm10 2v9h-3V7h3zM6 7h3v9H6V7zm13 9h-3V7h3v9z"}))},te=function(){return Object(y.createElement)(E.SVG,{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 48 48"},Object(y.createElement)(E.Path,{d:"M7 12v24h34V12H7zm32 22H9V14h30v20z"}))},ne=function(){return Object(y.createElement)(E.SVG,{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 48 48"},Object(y.createElement)(E.Path,{d:"M7,12v24h34V12H7z M23,34H9V14h14V34z M39,34H25V14h14V34z"}))},re=function(){return Object(y.createElement)(E.SVG,{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 48 48"},Object(y.createElement)(E.Path,{d:"M7 12v24h34V12H7zm23 2h9v20h-9V14zm-2 20h-8V14h8v20zM9 14h9v20H9V14z"}))},oe=function(){return Object(y.createElement)(E.SVG,{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 48 48"},Object(y.createElement)(E.Path,{d:"M7 12v24h34V12H7zm8 22H9V14h6v20zm8 0h-6V14h6v20zm8 0h-6V14h6v20zm8 0h-6V14h6v20z"}))},ce=function(e){var t=e.columns;return 4===t?Object(y.createElement)(oe,null):3===t?Object(y.createElement)(re,null):2===t?Object(y.createElement)(ne,null):Object(y.createElement)(te,null)};var ie=function(e){var t=e.height,n=e.xPos,r=e.top,o=e.isSelected,c=w()("wpcom-overlay-resize__handle","components-resizable-box__container",{"is-selected":o}),i={height:t+"px",width:n+"px",top:r+"px"},a={left:n+"px"};return Object(y.createElement)("div",{className:c,style:i},Object(y.createElement)("span",null,Object(y.createElement)("div",{className:"components-resizable-box__handle components-resizable-box__side-handle components-resizable-box__handle-left",style:a})))},ae=function(e){function t(e){var n;return l()(this,t),n=b()(this,m()(t).call(this,e)),o()(g()(n),"onMouseDown",(function(e){var t=e.target;if((0===e.button||e.touches)&&(t.dataset.resizeRight||t.dataset.resizeLeft)){n.block=t.closest(".wp-block");var r=n.block.getBoundingClientRect(),o=r.height,c=r.right,i=r.left,a=r.top,u=t.getBoundingClientRect().width,s=n.getChildPosition(n.block),l=t.dataset.resizeLeft;n.setState({resizingColumn:s,xPos:n.getAdjustedOffset(n.getMouseX(e),u),height:o,width:u,top:n.getAdjustedTop(a),direction:l?"left":"right",max:l?n.getAdjustedOffset(c,u):n.getAdjustedOffset(i,u)}),0===e.button?(document.addEventListener("mousemove",n.onMouseMove),document.addEventListener("mouseup",n.onMouseUp),e.preventDefault()):(document.addEventListener("touchmove",n.onMouseMove),document.addEventListener("touchend",n.onMouseUp)),e.stopPropagation()}})),o()(g()(n),"onMouseMove",(function(e){e.stopPropagation(),void 0===e.touches&&e.preventDefault();var t=n.block.getBoundingClientRect().height;n.setState({xPos:n.getRestrictedOffset(n.getAdjustedOffset(n.getMouseX(e))),height:t});var r=n.getNearestColumn(n.state.direction,e);r&&n.props.onResize(n.state.resizingColumn,r)})),o()(g()(n),"onMouseUp",(function(e){n.setState({resizingColumn:-1}),document.removeEventListener("mousemove",n.onMouseMove),document.removeEventListener("mouseup",n.onMouseUp),document.removeEventListener("touchmove",n.onMouseMove),document.removeEventListener("touchend",n.onMouseUp)})),n.containerRef=Object(y.createRef)(),n.state={resizingColumn:-1,xPos:0,height:0},n}return j()(t,e),p()(t,[{key:"getNearestColumn",value:function(e,t){var n=this.props,r=n.totalColumns,o=n.layoutGrid,c=o.getStart(this.state.resizingColumn),i=o.getSpan(this.state.resizingColumn),a=Math.min(r,Math.max(0,function(e,t,n,r){var o=e.getBoundingClientRect(),c=o.width/r,i=t-o.x,a=Math.floor(i/c),u=i%c;return"left"===n?u<=c/2?a:a+1:u<c/2?a:a+1}(this.containerRef.current,this.getMouseX(t),e,r)));if("left"===e){if(a===c)return null;var u=Math.abs(a-c),s={start:a,span:a>c?i-u:i+u,direction:e};return s.start>=c+i?null:(s.span=Math.max(1,s.span),s)}return{span:Math.max(1,a-c),direction:e}}},{key:"getMouseX",value:function(e){var t=e.clientX,n=e.targetTouches;return t||n&&n[0].clientX}},{key:"getAdjustedOffset",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=this.state.width,r=t>0?t:n;return e-this.containerRef.current.getBoundingClientRect().left-r/2}},{key:"getAdjustedTop",value:function(e){return e-this.containerRef.current.getBoundingClientRect().top}},{key:"getRestrictedOffset",value:function(e){var t=this.state,n=t.direction,r=t.max,o=t.width;return"left"===n?Math.min(r-o,e):Math.max(r+o,e)}},{key:"getChildPosition",value:function(e){for(var t=0;null!==e.previousSibling;)e=e.previousSibling,t++;return t}},{key:"render",value:function(){var e=this.props,t=e.className,n=e.children,r=e.isSelected,o=this.state,c=o.resizingColumn,i=o.xPos,a=o.height,u=w()(t,-1!==c?"wp-block-jetpack-layout-grid__resizing":null);return Object(y.createElement)("div",{className:u,onMouseDown:this.onMouseDown,onTouchStart:this.onMouseDown,ref:this.containerRef},-1!==c&&Object(y.createElement)(ie,{height:a,xPos:i,top:this.state.top,isSelected:r}),n)}}]),t}(y.Component);function ue(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function se(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ue(Object(n),!0).forEach((function(t){o()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ue(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var le=function(){function e(t,n,r){l()(this,e),this.attributes=t,this.device=n,this.columnCount=r}return p()(e,[{key:"getGridValues",value:function(){for(var e={},t=0;t<this.columnCount;t++){var n=G(this.device,this.columnCount,t);e[R(t,this.device)]=this.getSpan(t)||n,e[N(t,this.device)]=this.getOffset(t)}return e}},{key:"applyAdjustments",value:function(e){for(var t=this.getGridValues(),n=0;n<e.length;n++)t=se({},t,{},e[n]);return t}},{key:"getSpanAdjustment",value:function(e,t){return o()({},R(e,this.device),t)}},{key:"getAdjustOffset",value:function(e,t){return o()({},N(e,this.device),t)}},{key:"getShrinkOffset",value:function(e,t){var n=this.getOffset(e),r=t>=n?n:t;return{adjustment:this.getAdjustOffset(e,n-r),offsetUsed:r}}},{key:"hasOverlaps",value:function(e){for(var t=0;t<e.length;t++)for(var n=e[t],r=t+1;r<e.length;r++){var o=e[r];if(n.start>o.start&&n.start<o.end)return!0;if(n.end>o.start&&n.end<o.end)return!0}return!1}},{key:"validateGrid",value:function(e){for(var t,n,r=[],o=V(this.device),c=0,i=0,a=0;a<this.columnCount;a++){var u=e[R(a,this.device)],s=e[N(a,this.device)];if((i+=s)>=o&&(i-=o),(i+=u)>o)return!1;r.push({start:c+s,end:c+s+u}),c+=u+s}return!(c>(t=this.device,n=this.columnCount,t===z&&n>2?2*V(t):t===B?V(t)*n:V(t)))&&!this.hasOverlaps(r)}},{key:"getEndAdjustments",value:function(e,t){var n=[];if(t<0)return[this.getAdjustOffset(e,this.getOffset(e)+Math.abs(t))];if(t>0)for(var r=e;r<this.columnCount&&t>0;r++){var o=this.getShrinkOffset(r,Math.abs(t));n.push(o.adjustment),t-=o.offsetUsed}return n}},{key:"getStartMovedLeft",value:function(e,t){for(var n=[],r=e;r>=0&&t>0;r--){var o=this.getShrinkOffset(r,t);n.push(o.adjustment),t-=o.offsetUsed}return n}},{key:"getStartAdjustments",value:function(e,t){var n=this.getOffset(e),r=this.getOffsetFromStart(e,t),o=r-n;return o<0?this.getStartMovedLeft(e,Math.abs(o)):[this.getAdjustOffset(e,r)]}},{key:"getSpan",value:function(e){return this.attributes[R(e,this.device)]}},{key:"getOffset",value:function(e){return this.attributes[N(e,this.device)]}},{key:"getStart",value:function(e){for(var t=0,n=0;n<e;n++)t+=this.getSpan(n)+this.getOffset(n);var r=Math.max(1,Math.floor(t/V(this.device)));return(t+this.getOffset(e))%(r*V(this.device))}},{key:"getOffsetFromStart",value:function(e,t){if(0===e)return t;var n=t-this.getStart(e);return this.getOffset(e)+n}},{key:"convertOffsetToStart",value:function(e,t){return this.getStart(e)+(t-this.getOffset(e))}},{key:"getAdjustedGrid",value:function(e,t){var n=t.start,r=void 0===n?this.getStart(e):n,o=t.span,c=void 0===o?this.getSpan(e):o,i=[];r!==this.getStart(e)&&c!==this.getSpan(e)?i=(i=i.concat(this.getStartAdjustments(e,r))).concat(this.getSpanAdjustment(e,c)):c!==this.getSpan(e)?i=(i=i.concat(this.getSpanAdjustment(e,c))).concat(this.getEndAdjustments(e+1,c-this.getSpan(e))):r!==this.getStart(e)&&(i=(i=i.concat(this.getStartAdjustments(e,r))).concat(this.getEndAdjustments(e+1,r-this.getStart(e))));var a=this.applyAdjustments(i);return i.length>0&&this.validateGrid(a)?a:null}}]),e}();function fe(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function pe(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?fe(Object(n),!0).forEach((function(t){o()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):fe(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var de=["jetpack/layout-grid-column"],be=function(e){function t(e){var n;return l()(this,t),n=b()(this,m()(t).call(this,e)),o()(g()(n),"onChangeLayout",(function(e){for(var t={},r=0;r<e;r++)for(var o=0;o<L.length;o++){var c=G(L[o],e,r);t[R(r,L[o])]=c,t[N(r,L[o])]=0}n.props.updateColumns(n.props.columns,e,t)})),o()(g()(n),"onChangeDevice",(function(e){n.setState({selectedDevice:e})})),o()(g()(n),"onResize",(function(e,t){var r=n.props,o=r.attributes,c=r.columns,i=new le(o,n.state.selectedDevice,c).getAdjustedGrid(e,t);i&&n.adjustGrid(i)})),o()(g()(n),"onChangeSpan",(function(e,t,r){var o=n.props,c=o.attributes,i=o.columns,a=new le(c,t,i).getAdjustedGrid(e,{span:parseInt(r,10)});a&&n.adjustGrid(a)})),o()(g()(n),"onChangeOffset",(function(e,t,r){var o=n.props,c=o.attributes,i=o.columns,a=new le(c,t,i),u=a.getAdjustedGrid(e,{start:a.convertOffsetToStart(e,parseInt(r,10))});u&&n.adjustGrid(u)})),n.overlayRef=Object(y.createRef)(),n.state={selectedDevice:A()[0].value},n}return j()(t,e),p()(t,[{key:"adjustGrid",value:function(e){var t=this.props;(0,t.setAttributes)(pe({},e,{className:$(t.attributes.className)}))}},{key:"renderDeviceSettings",value:function(e,t,n){for(var r=this,o=new le(n,t,this.props.columns),c=[],a=function(n){var a=o.getSpan(n)||G(t,e,n),u=o.getOffset(n)||0;c.push(Object(y.createElement)("div",{className:"jetpack-layout-grid-settings",key:n},Object(y.createElement)("strong",null,Object(i.__)("Column")," ",n+1),Object(y.createElement)("div",{className:"jetpack-layout-grid-settings__group"},Object(y.createElement)(E.TextControl,{type:"number",label:Object(i.__)("Offset"),value:u||0,min:0,max:V(t)-1,onChange:function(e){return r.onChangeOffset(n,t,e)}}),Object(y.createElement)(E.TextControl,{type:"number",label:Object(i.__)("Span"),value:a,min:1,max:V(t),onChange:function(e){return r.onChangeSpan(n,t,e)}}))))},u=0;u<e;u++)a(u);return c}},{key:"getPreviewText",value:function(e){return"Mobile"===e?Object(i.__)("Showing mobile layout"):"Tablet"===e?Object(i.__)("Showing tablet layout"):Object(i.__)("Showing desktop layout")}},{key:"canResizeBreakpoint",value:function(e){return!(!this.overlayRef||!this.overlayRef.current)&&this.overlayRef.current.getBoundingClientRect().width/V(e)>50}},{key:"render",value:function(){var e=this,t=this.props,n=t.className,r=t.attributes,o=void 0===r?{}:r,c=t.isSelected,a=t.columns,u=this.state.selectedDevice,s=function(e,t){return Z(Y(e,t,arguments.length>2&&void 0!==arguments[2]?arguments[2]:{}),{span:H,offset:U,row:X})}(u,a,o),l=new le(o,u,a),f=w()($(n),s,{"wp-block-jetpack-layout-tablet":"Tablet"===u,"wp-block-jetpack-layout-desktop":"Desktop"===u,"wp-block-jetpack-layout-mobile":"Mobile"===u,"wp-block-jetpack-layout-resizable":this.canResizeBreakpoint(u)});return 0===a?Object(y.createElement)(E.Placeholder,{icon:"layout",label:Object(i.__)("Choose Layout"),instructions:Object(i.__)("Select a layout to start with:"),className:f},Object(y.createElement)("ul",{className:"block-editor-inner-blocks__template-picker-options"},M().map((function(t){return Object(y.createElement)("li",{key:t.value},Object(y.createElement)(E.IconButton,{isLarge:!0,icon:Object(y.createElement)(ce,{columns:t.value}),onClick:function(){return e.onChangeLayout(t.value)},className:"block-editor-inner-blocks__template-picker-option",label:t.label}))})))):Object(y.createElement)(E.IsolatedEventContainer,null,Object(y.createElement)(ae,{className:f,onResize:this.onResize,totalColumns:V(u),layoutGrid:l,isSelected:c},Object(y.createElement)("div",{className:"wpcom-overlay-grid",ref:this.overlayRef},Object(k.times)(V(u)).map((function(e){return Object(y.createElement)("div",{className:"wpcom-overlay-grid__column",key:e})}))),Object(y.createElement)(S.InnerBlocks,{template:null,templateLock:"all",allowedBlocks:de}),Object(y.createElement)(S.InspectorControls,null,Object(y.createElement)(E.PanelBody,{title:Object(i.__)("Layout")},Object(y.createElement)("div",{className:"jetpack-layout-grid-columns block-editor-block-styles"},M().map((function(t){return Object(y.createElement)("div",{key:t.value,className:w()("block-editor-block-styles__item",{"is-active":a===t.value}),onClick:function(){return e.onChangeLayout(t.value)},onKeyDown:function(n){C.ENTER!==n.keyCode&&C.SPACE!==n.keyCode||(n.preventDefault(),e.onChangeLayout(t.value))},role:"button",tabIndex:"0","aria-label":t.label},Object(y.createElement)("div",{className:"block-editor-block-styles__item-preview"},Object(y.createElement)(ce,{columns:t.value})),Object(y.createElement)("div",{className:"editor-block-styles__item-label block-editor-block-styles__item-label"},t.label))}))),Object(y.createElement)("p",null,Object(y.createElement)("em",null,Object(i.__)("Changing the number of columns will reset your layout and could remove content.")))),Object(y.createElement)(E.PanelBody,{title:Object(i.__)("Responsive Breakpoints")},Object(y.createElement)("p",null,Object(y.createElement)("em",null,Object(i.__)("Note that previewing your post will show your browser's breakpoint, not the currently selected one."))),Object(y.createElement)(E.ButtonGroup,null,A().map((function(t){return Object(y.createElement)(E.Button,{key:t.value,isDefault:!0,isPrimary:t.value===u,onClick:function(){return e.onChangeDevice(t.value)}},t.label)}))),this.renderDeviceSettings(a,u,o))),Object(y.createElement)("div",{className:"jetpack-layout-grid-previewing"},this.getPreviewText(u))))}}]),t}(y.Component);var he=Object(P.compose)([Object(x.withDispatch)((function(e,t,n){return{updateColumns:function(r,o,i){var a=t.clientId,s=e("core/block-editor").replaceBlock,l=function(e,t,n){if(n>t)return[].concat(u()(e),u()(Object(k.times)(n-t,(function(){return Object(c.createBlock)("jetpack/layout-grid-column")}))));var r=u()(e),o=0;return r.reverse(),(r=r.filter((function(e){return!(o<t-n&&0===e.innerBlocks.length)||(o++,!1)}))).slice(Math.max(0,t-n-o)).reverse()}((0,n.select("core/block-editor").getBlocks)(a),r,o);s(a,Object(c.createBlock)(t.name,pe({},t.attributes,{},i),l))}}})),Object(x.withSelect)((function(e,t){var n=t.clientId;return{columns:e("core/block-editor").getBlockCount(n)}}))])(be),me=function(e){var t=e.attributes,n=e.innerBlocks,r=t.className,o=function(e){for(var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n={},r={span:F,offset:K,row:W},o=0;o<L.length;o++)n=I({},n,{},Z(Y(L[o],e,t),r));return n}(n.length,t),c=w()($(r),o);return Object(y.createElement)("div",{className:c},Object(y.createElement)(S.InnerBlocks.Content,null))},ve=function(e){function t(e){var n;return l()(this,t),n=b()(this,m()(t).call(this,e)),o()(g()(n),"onLeftIn",(function(){n.setState({direction:"left"}),document.addEventListener("mouseup",n.onLeftOut)})),o()(g()(n),"onLeftOut",(function(){n.setState({direction:null}),document.removeEventListener("mouseup",n.onLeftOut)})),o()(g()(n),"onRightIn",(function(){n.setState({direction:"right"}),document.addEventListener("mouseup",n.onRightOut)})),o()(g()(n),"onRightOut",(function(){n.setState({direction:null}),document.removeEventListener("mouseup",n.onRightOut)})),n.state={direction:null},n}return j()(t,e),p()(t,[{key:"render",value:function(){var e,t=this.props,n=t.className,r=t.hasChildBlocks,c=t.backgroundColor,a=t.setBackgroundColor,u=t.attributes,s=t.setAttributes,l=u.padding,f=this.state.direction,p=w()(n,c.class,(e={},o()(e,"wp-block-jetpack-layout-grid__padding-"+l,!0),o()(e,"has-background",c.color),o()(e,"components-resizable-box__container",!0),o()(e,c.class,c.class),o()(e,"wp-blocks-jetpack-layout-grid__showleft","right"===f),o()(e,"wp-blocks-jetpack-layout-grid__showright","left"===f),e)),d={backgroundColor:c.color};return Object(y.createElement)("div",{className:p,style:d},Object(y.createElement)("span",{className:"wp-blocks-jetpack-layout-grid__resize-handles"},Object(y.createElement)("div",{className:"components-resizable-box__handle components-resizable-box__side-handle components-resizable-box__handle-right",onMouseDown:this.onRightIn,"data-resize-right":!0}),Object(y.createElement)("div",{className:"components-resizable-box__handle components-resizable-box__side-handle components-resizable-box__handle-left",onMouseDown:this.onLeftIn,"data-resize-left":!0})),Object(y.createElement)(S.InnerBlocks,{templateLock:!1,renderAppender:r?void 0:function(){return Object(y.createElement)(S.InnerBlocks.ButtonBlockAppender,null)}}),Object(y.createElement)(S.InspectorControls,null,Object(y.createElement)(S.PanelColorSettings,{title:Object(i.__)("Column Color"),initialOpen:!0,colorSettings:[{value:c.color,onChange:a,label:Object(i.__)("Background")}]}),Object(y.createElement)(E.PanelBody,{title:Object(i.__)("Column Padding")},Object(y.createElement)("p",null,Object(i.__)("Choose padding for this column:")),Object(y.createElement)(E.SelectControl,{value:l,onChange:function(e){return s({padding:e})},options:[{value:"none",label:Object(i.__)("No padding")},{value:"small",label:Object(i.__)("Small")},{value:"medium",label:Object(i.__)("Medium")},{value:"large",label:Object(i.__)("Large")},{value:"huge",label:Object(i.__)("Huge")}]}))))}}]),t}(y.Component),ge=Object(P.compose)(Object(S.withColors)("backgroundColor"),Object(x.withSelect)((function(e,t){var n=t.clientId;return{hasChildBlocks:(0,e("core/block-editor").getBlockOrder)(n).length>0}})))(ve),Oe=function(e){var t,n=e.attributes,r=void 0===n?{}:n,c=r.className,i=r.backgroundColor,a=r.customBackgroundColor,u=r.padding,s=Object(S.getColorClassName)("background-color",i),l=w()(c,(t={},o()(t,"wp-block-jetpack-layout-grid__padding-"+u,!0),o()(t,"has-background",i),o()(t,s,s),t)),f={backgroundColor:s?void 0:a};return Object(y.createElement)("div",{className:l,style:f},Object(y.createElement)(S.InnerBlocks.Content,null))};function je(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function ye(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?je(Object(n),!0).forEach((function(t){o()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):je(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function ke(e,t){for(var n={},r=function(e){t.map((function(t){n[R(e,t)]={type:"number"},n[N(e,t)]={type:"number",default:0}}))},o=0;o<e;o++)r(o);return n}Object(c.registerBlockType)("jetpack/layout-grid",{title:Object(i.__)("Layout Grid"),description:Object(i.__)("Align blocks to to a global grid, with support for responsive breakpoints."),icon:ee,category:"layout",supports:{align:["full"],html:!1},example:{attributes:{columns:2},innerBlocks:[{name:"jetpack/layout-grid-column",innerBlocks:[{name:"core/paragraph",attributes:{customFontSize:32,content:Object(i.__)("<strong>Snow Patrol</strong>"),align:"center"}}]},{name:"jetpack/layout-grid-column",innerBlocks:[{name:"core/image",attributes:{url:"https://s.w.org/images/core/5.3/Windbuchencom.jpg"}}]}]},attributes:ye({align:{type:"string",default:"full"}},ke(D,L)),edit:he,save:me}),Object(c.registerBlockType)("jetpack/layout-grid-column",{description:Object(i.__)("A column used inside a Layout Grid block."),title:Object(i.__)("Column"),icon:ee,category:"layout",parent:["jetpack/layout-grid"],supports:{inserter:!1,reusable:!1,html:!1},attributes:{backgroundColor:{type:"string"},customBackgroundColor:{type:"string"},padding:{type:"string",default:"none"}},edit:ge,save:Oe})}]);
index.php CHANGED
@@ -1,9 +1,8 @@
1
  <?php
2
  /**
3
  * Plugin Name: Layout Grid
4
- * Plugin URI: https://github.com/automattic/wpcom-blocks
5
  * Description: Let any blocks align to a global grid
6
- * Version: 1.0.1
7
  * Author: Automattic
8
  * Author URI: https://automattic.com
9
  * Text Domain: jetpack-layout-grid
1
  <?php
2
  /**
3
  * Plugin Name: Layout Grid
 
4
  * Description: Let any blocks align to a global grid
5
+ * Version: 1.0.2
6
  * Author: Automattic
7
  * Author URI: https://automattic.com
8
  * Text Domain: jetpack-layout-grid
readme.txt CHANGED
@@ -1,6 +1,6 @@
1
  === Layout Grid Block ===
2
  Contributors: automattic, jasmussen, johnny5, mkaz
3
- Stable tag: 1.0.1
4
  Tested up to: 5.3
5
  Requires at least: 5.3
6
  License: GPLv2 or later
@@ -19,6 +19,9 @@ Want to create a column-based layout with easily customizable column-width and p
19
 
20
  == Changelog ==
21
 
 
 
 
22
  = 1.0.1 - 26th November 2019 =
23
  * Fix problem with edit history putting the block into an inbetween state
24
  * Fix cropping of the grid in the editor
1
  === Layout Grid Block ===
2
  Contributors: automattic, jasmussen, johnny5, mkaz
3
+ Stable tag: 1.0.2
4
  Tested up to: 5.3
5
  Requires at least: 5.3
6
  License: GPLv2 or later
19
 
20
  == Changelog ==
21
 
22
+ = 1.0.2 - 28th November 2019 =
23
+ * Fix a bug with duplicate column spans
24
+
25
  = 1.0.1 - 26th November 2019 =
26
  * Fix problem with edit history putting the block into an inbetween state
27
  * Fix cropping of the grid in the editor