Stackable – Page Builder Gutenberg Blocks - Version 0.4

Version Description

  • New: Card Block
  • New: Pricing Block
  • New: Header Block
  • Fixed: Stackable block icons did not show in Gutenberg 2.6.0
Download this release

Release Info

Developer bfintal
Plugin Icon 128x128 Stackable – Page Builder Gutenberg Blocks
Version 0.4
Comparing to
See all releases

Code changes from version 0.3.1 to 0.4

Files changed (32) hide show
  1. dist/blocks.build.js +1 -1
  2. dist/blocks.editor.build.css +3 -0
  3. dist/blocks.style.build.css +4 -1
  4. plugin.php +1 -1
  5. readme.txt +58 -30
  6. src/block/blockquote/index.js +78 -69
  7. src/block/button/index.js +126 -131
  8. src/block/call-to-action/index.js +228 -231
  9. src/block/card/editor.scss +24 -0
  10. src/block/card/index.js +433 -0
  11. src/block/card/style.scss +51 -0
  12. src/block/count-up/index.js +118 -108
  13. src/block/divider/index.js +81 -64
  14. src/block/divider/style.scss +1 -0
  15. src/block/expand/index.js +131 -116
  16. src/block/ghost-button/index.js +144 -135
  17. src/block/header/editor.scss +6 -0
  18. src/block/header/index.js +470 -0
  19. src/block/header/style.scss +104 -0
  20. src/block/image-box/index.js +247 -242
  21. src/block/notification/index.js +146 -144
  22. src/block/number-box/index.js +307 -309
  23. src/block/pricing-box/editor.scss +6 -0
  24. src/block/pricing-box/index.js +760 -0
  25. src/block/pricing-box/style.scss +127 -0
  26. src/block/pullquote/index.js +79 -73
  27. src/block/spacer/index.js +43 -37
  28. src/block/team-member/index.js +386 -395
  29. src/block/testimonial/index.js +373 -392
  30. src/block/video-popup/index.js +148 -151
  31. src/blocks.js +3 -0
  32. src/icons.js +128 -85
dist/blocks.build.js CHANGED
@@ -1 +1 @@
1
- !function(e){function t(l){if(n[l])return n[l].exports;var o=n[l]={i:l,l:!1,exports:{}};return e[l].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,l){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:l})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=2)}([function(e,t,n){"use strict";n.d(t,"f",function(){return r}),n.d(t,"a",function(){return a}),n.d(t,"e",function(){return i}),n.d(t,"c",function(){return c}),n.d(t,"i",function(){return u}),n.d(t,"j",function(){return m}),n.d(t,"l",function(){return s}),n.d(t,"b",function(){return p}),n.d(t,"k",function(){return d}),n.d(t,"d",function(){return b}),n.d(t,"g",function(){return g}),n.d(t,"h",function(){return h}),n.d(t,"m",function(){return w});var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e},o=function(e){return wp.element.createElement("defs",null,wp.element.createElement("linearGradient",l({},e,{gradientTransform:"rotate(90)"}),wp.element.createElement("stop",{offset:"0%",stopColor:"#2FDDD1",stopOpacity:"1"}),wp.element.createElement("stop",{offset:"20%",stopColor:"#30A2E3",stopOpacity:"1"}),wp.element.createElement("stop",{offset:"50%",stopColor:"#F56FAE",stopOpacity:"1"}),wp.element.createElement("stop",{offset:"100%",stopColor:"#FFC58E",stopOpacity:"1"})))},r=function(){return wp.element.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024",width:"20",height:"20"},wp.element.createElement(o,{id:"AlertIconGradient"}),wp.element.createElement("path",{fill:"url(#AlertIconGradient)",d:"M512 96c-111.118 0-215.584 43.272-294.156 121.844S96 400.882 96 512s43.272 215.584 121.844 294.156S400.882 928 512 928s215.584-43.272 294.156-121.844S928 623.118 928 512s-43.272-215.584-121.843-294.156S623.118 96 512 96zm0-96c282.77 0 512 229.23 512 512s-229.23 512-512 512S0 794.77 0 512 229.23 0 512 0zm-64 704h128v128H448zm0-512h128v384H448z"}))},a=function(){return wp.element.createElement("svg",{role:"img",focusable:"false",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20"},wp.element.createElement(o,{id:"AlertIconGradient"}),wp.element.createElement("path",{fill:"url(#AlertIconGradient)",d:"M17 5H3c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm1 7c0 .6-.4 1-1 1H3c-.6 0-1-.4-1-1V7c0-.6.4-1 1-1h14c.6 0 1 .4 1 1v5z"}))},i=function(){return wp.element.createElement(a,null)},c=function(){return wp.element.createElement("svg",{role:"img",focusable:"false",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20"},wp.element.createElement(o,{id:"AlertIconGradient"}),wp.element.createElement("path",{fill:"url(#AlertIconGradient)",d:"M4 9h12v2H4V9z"}))},u=function(){return wp.element.createElement("svg",{role:"img",focusable:"false",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20"},wp.element.createElement(o,{id:"AlertIconGradient"}),wp.element.createElement("path",{fill:"url(#AlertIconGradient)",d:"M8.54 12.74c0-.87-.24-1.61-.72-2.22-.73-.92-2.14-1.03-2.96-.85-.34-1.93 1.3-4.39 3.42-5.45L6.65 1.94C3.45 3.46.31 6.96.85 11.37 1.19 14.16 2.8 16 5.08 16c1 0 1.83-.29 2.48-.88.66-.59.98-1.38.98-2.38zm9.43 0c0-.87-.24-1.61-.72-2.22-.73-.92-2.14-1.03-2.96-.85-.34-1.93 1.3-4.39 3.42-5.45l-1.63-2.28c-3.2 1.52-6.34 5.02-5.8 9.43.34 2.79 1.95 4.63 4.23 4.63 1 0 1.83-.29 2.48-.88.66-.59.98-1.38.98-2.38z"}))},m=function(){return wp.element.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 14 32"},wp.element.createElement(o,{id:"AlertIconGradient"}),wp.element.createElement("path",{fill:"url(#AlertIconGradient)",d:"M0 29h5.833L0 23h5V9H0l5.833-6H0V0h14v3H8.167L14 9H9v14h5l-5.833 6H14v3H0v-3z"}))},s=function(){return wp.element.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 13 12.916010856628418"},wp.element.createElement(o,{id:"AlertIconGradient"}),wp.element.createElement("path",{fill:"url(#AlertIconGradient)",d:"M5.68 12.916a.5.5 0 0 1-.397-.196L3.208 10H1.463C.656 10 0 9.428 0 8.621V1.463C0 .656.656 0 1.463 0h10.074C12.344 0 13 .656 13 1.463v7.158C13 9.428 12.344 10 11.537 10H8.151l-2.073 2.72a.504.504 0 0 1-.398.196zM1.463 1A.464.464 0 0 0 1 1.463v7.158c0 .255.208.463.463.463h1.993a.5.5 0 0 1 .397.196l1.827 2.312L7.507 9.28a.502.502 0 0 1 .397-.196h3.633A.464.464 0 0 0 12 8.621V1.463A.464.464 0 0 0 11.537 1H1.463zm1.193 2h7.828c.284.024.514.207.514.49a.498.498 0 0 1-.514.496H2.656a.499.499 0 0 1-.514-.496c.001-.283.231-.466.514-.49zm0 3h7.828c.284.024.514.207.514.49a.498.498 0 0 1-.514.496H2.656a.499.499 0 0 1-.514-.496c.001-.283.231-.466.514-.49z"}))},p=function(){return wp.element.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 16 14"},wp.element.createElement(o,{id:"Grad"}),wp.element.createElement("path",{fill:"url(#Grad)",d:"M10 0c-.17 0-.36.05-.52.14C8.04 1.02 4.5 3.58 3 4c-1.38 0-3 .67-3 2.5S1.63 9 3 9c.3.08.64.23 1 .41V14h2v-3.45c1.34.86 2.69 1.83 3.48 2.31.16.09.34.14.52.14.52 0 1-.42 1-1V1c0-.58-.48-1-1-1zm0 12c-.38-.23-.89-.58-1.5-1-.16-.11-.33-.22-.5-.34V2.31c.16-.11.31-.2.47-.31.61-.41 1.16-.77 1.53-1v11zm2-6h4v1h-4V6zm0 2l4 2v1l-4-2V8zm4-6v1l-4 2V4l4-2z"}))},d=function(){return wp.element.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 896 1023"},wp.element.createElement(o,{id:"Grad"}),wp.element.createElement("path",{fill:"url(#Grad)",d:"M821 491q-41-41-95-60 62-26 100-82t38-125q0-93-65.5-158.5T640 0q-71 0-128.5 41T430 147q-32-39-77-61t-97-22q-93 0-158.5 65.5T32 288q0 69 38 125t100 82q-54 19-95 60Q0 630 0 736v191q0 40 28 68t68 28h320q31 0 55.5-18t34.5-46h294q40 0 68-28t28-68V672q0-106-75-181zM527 111q47-47 113-47t113 47 47 113-47 113-113 47-113-47-47-113 47-113zM143 401q-47-47-47-113t47-113 113-47 113 47 47 113-47 113-113 47-113-47zm305 526q0 13-9.5 22.5T416 959H96q-13 0-22.5-9.5T64 927V736q0-79 56.5-135.5T256 544t136 56q1 2 2 3 54 55 54 133v191zm-27-387q-36-30-79-45 43-18 75.5-52t48.5-78q36 44 88 66-54 19-95 60-22 23-38 49zm411 323q0 13-9.5 22.5T800 895H512V736q0-80-46-146 15-30 38-53 57-57 136-57t135.5 56.5T832 672v191z"}))},b=function(){return wp.element.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 32 8"},wp.element.createElement(o,{id:"Grad"}),wp.element.createElement("path",{fill:"url(#Grad)",d:"M4 0C1.79 0 0 1.79 0 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm24 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zM16 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"}))},g=function(){return wp.element.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 21.027502059936523 10.284000396728516"},wp.element.createElement(o,{id:"Grad"}),wp.element.createElement("path",{fill:"url(#Grad)",d:"M3.028 10.284a1 1 0 0 1-1-1V2.902l-.553.276A1 1 0 1 1 .58 1.389l2-1a.998.998 0 0 1 1.447.895v8a1 1 0 0 1-1 1zm9 0h-5a1.002 1.002 0 0 1-.707-1.707l4-4c.254-.254.394-.591.394-.95 0-.358-.14-.695-.394-.949-.508-.508-1.39-.508-1.9.001a1.33 1.33 0 0 0-.393.948 1 1 0 0 1-2 0c0-.894.348-1.733.98-2.364C8.273 0 10.472 0 11.735 1.264c.632.631.979 1.471.979 2.363 0 .893-.348 1.733-.98 2.364L9.443 8.284h2.586a1 1 0 0 1 0 2zm7.955-5.623a2.725 2.725 0 0 0 .545-1.627 2.753 2.753 0 0 0-2.75-2.75 2.739 2.739 0 0 0-2.44 1.484 1 1 0 1 0 1.776.92.75.75 0 1 1 .664 1.096 1 1 0 0 0 0 2c.689 0 1.25.561 1.25 1.25s-.561 1.25-1.25 1.25-1.25-.561-1.25-1.25a1 1 0 0 0-2 0c0 1.792 1.458 3.25 3.25 3.25s3.25-1.458 3.25-3.25a3.23 3.23 0 0 0-1.045-2.373z"}))},h=function(){return wp.element.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 1024 896"},wp.element.createElement(o,{id:"Grad"}),wp.element.createElement("path",{fill:"url(#Grad)",d:"M960 0H64Q38 0 19 19T0 64v768q0 26 19 45t45 19h896q26 0 45-19t19-45V64q0-26-19-45T960 0zM64 64h896v714L724 430q-7-12-21-14t-25 7L524 548 350 305q-10-14-28-13t-26 17L64 757V64zm855 768H97l231-447 184 255 179-145zM737 190q13 0 22.5 9.5T769 222t-9.5 22.5T737 254t-22.5-9.5T705 222t9.5-22.5T737 190zm0-64q-40 0-68 28t-28 68 28 68 68 28 68-28 28-68-28-68-68-28z"}))},w=function(){return wp.element.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 38 26"},wp.element.createElement(o,{id:"Grad"}),wp.element.createElement("path",{fill:"url(#Grad)",d:"M2 0h34a2 2 0 0 1 2 2v22a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm5.77 4C6.24 4 5 5.511 5 7.375v11.25C5 20.489 6.24 22 7.77 22h15.46c1.53 0 2.77-1.511 2.77-3.375V16l6 5h1V5h-1l-6 5V7.375C26 5.511 24.76 4 23.23 4H7.77z"}))}},function(e,t){var n={utf8:{stringToBytes:function(e){return n.bin.stringToBytes(unescape(encodeURIComponent(e)))},bytesToString:function(e){return decodeURIComponent(escape(n.bin.bytesToString(e)))}},bin:{stringToBytes:function(e){for(var t=[],n=0;n<e.length;n++)t.push(255&e.charCodeAt(n));return t},bytesToString:function(e){for(var t=[],n=0;n<e.length;n++)t.push(String.fromCharCode(e[n]));return t.join("")}}};e.exports=n},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});n(3),n(6),n(9),n(12),n(15),n(21),n(24),n(27),n(30),n(33),n(36),n(39),n(42),n(45),n(48)},function(e,t,n){"use strict";var l=n(4),o=(n.n(l),n(5)),r=(n.n(o),n(0)),a=wp.i18n.__;(0,wp.blocks.registerBlockType)("ugb/spacer",{title:a("Spacer"),icon:r.j,category:"layout",keywords:[a("Spacer"),a("Stackable")],attributes:{height:{default:50,type:"number"}},edit:function(e){var t=e.isSelected,n=wp.blocks.InspectorControls,l=wp.components,o=l.RangeControl,r=(l.TextControl,e.attributes.height);return[!!t&&wp.element.createElement(n,{key:"inspector"},wp.element.createElement(o,{label:a("Height"),value:r,min:"30",max:"200",onChange:function(t){e.setAttributes({height:t})}})),wp.element.createElement("div",{className:e.className,style:{height:r+"px"}})]},save:function(e){var t=e.attributes.height;return wp.element.createElement("div",{className:e.className,style:{height:t+"px"}})}})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(7),o=(n.n(l),n(8)),r=(n.n(o),n(0)),a=wp.i18n.__,i=wp.blocks.registerBlockType,c=wp.components.PanelColor;i("ugb/divider",{title:a("Divider"),icon:r.c,category:"layout",keywords:[a("Divider"),a("Stackable")],attributes:{height:{default:1,type:"number"},width:{default:50,type:"number"},color:{type:"string",default:"#dddddd"},alignment:{type:"string",default:"center"}},edit:function(e){var t=e.isSelected,n=wp.blocks,l=n.InspectorControls,o=n.ColorPalette,r=n.BlockControls,i=n.AlignmentToolbar,u=wp.components.RangeControl,m=e.attributes,s=m.height,p=m.width,d=m.color,b=m.alignment;return[t&&wp.element.createElement(r,{key:"controls"},wp.element.createElement(i,{value:b,onChange:function(t){e.setAttributes({alignment:t})}})),t&&wp.element.createElement(l,{key:"inspector"},wp.element.createElement(u,{label:a("Height"),value:s,min:"1",max:"10",onChange:function(t){e.setAttributes({height:t})}}),wp.element.createElement(u,{label:a("Width"),value:p,min:"10",max:"100",step:"0.1",onChange:function(t){e.setAttributes({width:t})}}),wp.element.createElement(c,{title:a("Divider Color"),colorValue:d,initialOpen:!1},wp.element.createElement(o,{value:d,onChange:function(t){return e.setAttributes({color:t})}}))),wp.element.createElement("div",{className:"ugb-divider",style:{paddingTop:8,paddingBottom:8}},wp.element.createElement("hr",{align:b,style:{marginTop:0,marginBottom:0,backgroundColor:d,width:p+"%",height:s}}))]},save:function(e){var t=e.attributes,n=t.height,l=t.width,o=t.color,r=t.alignment;return wp.element.createElement("div",{className:"ugb-divider"},wp.element.createElement("hr",{align:r,style:{backgroundColor:o,width:l+"%",height:n}}))}})},function(e,t){},function(e,t){},function(e,t,n){"use strict";function l(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}function r(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var a=n(10),i=(n.n(a),n(11)),c=(n.n(i),n(0)),u=function(){function e(e,t){for(var n=0;n<t.length;n++){var l=t[n];l.enumerable=l.enumerable||!1,l.configurable=!0,"value"in l&&(l.writable=!0),Object.defineProperty(e,l.key,l)}}return function(t,n,l){return n&&e(t.prototype,n),l&&e(t,l),t}}(),m=wp.i18n.__,s=wp.element.Component,p=wp.blocks.registerBlockType,d=wp.components,b=d.PanelColor,g=d.Dashicon,h=d.IconButton,w=d.SelectControl,f=d.RangeControl,y=wp.blocks,v=y.InspectorControls,C=y.BlockControls,E=y.AlignmentToolbar,T=y.RichText,k=y.ColorPalette,x=y.UrlInput,N=function(e){function t(){return l(this,t),o(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return r(t,e),u(t,[{key:"render",value:function(){var e=this.props,t=e.isSelected,n=(e.className,e.setAttributes),l=this.props.attributes,o=l.url,r=l.title,a=l.text,i=l.color,c=l.textColor,u=l.size,s=l.textAlignment,p=l.cornerButtonRadius,d=[{value:"small",label:m("Small")},{value:"normal",label:m("Normal")},{value:"medium",label:m("Medium")},{value:"large",label:m("Large")}];return[t&&wp.element.createElement(C,{key:"controls"},wp.element.createElement(E,{value:s,onChange:function(e){n({textAlignment:e})}})),wp.element.createElement("span",{key:"button",title:r,className:"wp-block-button ugb-button-"+s},wp.element.createElement(T,{tagName:"span",placeholder:m("Enter Text"),value:a,onChange:function(e){return n({text:e})},formattingControls:["bold","italic","strikethrough"],className:"wp-ugb-button ugb-button-"+u,style:{backgroundColor:i,color:c,borderRadius:p+"px"},isSelected:t,keepPlaceholderOnFocus:!0}),t&&wp.element.createElement(v,{key:"inspector"},wp.element.createElement(w,{label:m("Size"),value:u,options:d.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){n({size:e})}}),wp.element.createElement(f,{label:m("Corner Radius"),value:p,min:"1",max:"50",onChange:function(e){return n({cornerButtonRadius:e})}}),wp.element.createElement(b,{title:m("Background Color"),colorValue:i,initialOpen:!1},wp.element.createElement(k,{value:i,onChange:function(e){return n({color:e})}})),wp.element.createElement(b,{title:m("Text Color"),colorValue:c,initialOpen:!1},wp.element.createElement(k,{value:c,onChange:function(e){return n({textColor:e})}})))),t&&wp.element.createElement("form",{key:"form-link",onSubmit:function(e){return e.preventDefault()},className:"blocks-button__inline-link ugb-button-"+s},wp.element.createElement(g,{icon:"admin-links"}),wp.element.createElement(x,{value:o,onChange:function(e){return n({url:e})}}),wp.element.createElement(h,{icon:"editor-break",label:m("Apply"),type:"submit"}))]}}]),t}(s);p("ugb/button",{title:m("Button"),icon:c.a,category:"layout",keywords:[m("Button"),m("Stackable")],attributes:{url:{type:"string",source:"attribute",selector:"a",attribute:"href"},title:{type:"string",source:"attribute",selector:"a",attribute:"title"},text:{type:"array",source:"children",selector:"a"},textAlignment:{type:"string",default:"center"},color:{type:"string",default:"#2091e1"},textColor:{type:"string",default:"#ffffff"},size:{type:"string",default:"normal"},cornerButtonRadius:{type:"number",default:4}},edit:N,save:function(e){var t=e.attributes,n=t.url,l=(t.title,t.text),o=t.textAlignment,r=t.color,a=t.textColor,i=t.size,c=t.cornerButtonRadius,u={backgroundColor:r,color:a,borderRadius:c+"px"};return wp.element.createElement("div",{className:"ugb-button-"+o},wp.element.createElement("a",{href:n,className:"wp-ugb-button ugb-button-"+i,style:u},l))}})},function(e,t){},function(e,t){},function(e,t,n){"use strict";function l(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}function r(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var a=n(13),i=(n.n(a),n(14)),c=(n.n(i),n(0)),u=function(){function e(e,t){for(var n=0;n<t.length;n++){var l=t[n];l.enumerable=l.enumerable||!1,l.configurable=!0,"value"in l&&(l.writable=!0),Object.defineProperty(e,l.key,l)}}return function(t,n,l){return n&&e(t.prototype,n),l&&e(t,l),t}}(),m=wp.i18n.__,s=wp.element.Component,p=wp.blocks,d=p.registerBlockType,b=p.InspectorControls,g=p.BlockControls,h=p.RichText,w=p.AlignmentToolbar,f=p.ColorPalette,y=p.UrlInput,v=wp.components,C=v.PanelColor,E=v.IconButton,T=v.Dashicon,k=v.SelectControl,x=v.RangeControl,N=function(e){function t(){return l(this,t),o(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return r(t,e),u(t,[{key:"render",value:function(){var e=this.props,t=e.isSelected,n=e.setAttributes,l=this.props.attributes,o=l.url,r=l.title,a=l.text,i=l.color,c=l.size,u=l.textAlignment,s=l.cornerButtonRadius,p=l.borderThickness,d=[{value:"small",label:m("Small")},{value:"normal",label:m("Normal ")},{value:"medium",label:m("Medium")},{value:"large",label:m("Large")}];return[t&&wp.element.createElement(g,{key:"controls"},wp.element.createElement(w,{value:u,onChange:function(e){n({textAlignment:e})}})),wp.element.createElement("span",{key:"button",title:r,className:"wp-block-button ugb-button-"+u},wp.element.createElement(h,{tagName:"span",placeholder:m("Enter Text"),value:a,onChange:function(e){return n({text:e})},formattingControls:["bold","italic","strikethrough"],className:"wp-ugb-button ugb-button-"+c+" ugb-ghost-button",style:{borderColor:i,color:i,borderRadius:s+"px",borderWidth:p+"px"},isSelected:t,keepPlaceholderOnFocus:!0}),t&&wp.element.createElement(b,{key:"inspector"},wp.element.createElement(k,{label:m("Size"),value:c,options:d.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){n({size:e})}}),wp.element.createElement(x,{label:m("Corner Radius"),value:s,min:"1",max:"50",onChange:function(e){return n({cornerButtonRadius:e})}}),wp.element.createElement(x,{label:m("Border Thickness"),value:p,min:"1",max:"10",onChange:function(e){return n({borderThickness:e})}}),wp.element.createElement(C,{title:m("Button Color"),colorValue:i,initialOpen:!1},wp.element.createElement(f,{value:i,onChange:function(e){return n({color:e})}})))),t&&wp.element.createElement("form",{key:"form-link",onSubmit:function(e){return e.preventDefault()},className:"blocks-button__inline-link ugb-button-"+u},wp.element.createElement(T,{icon:"admin-links"}),wp.element.createElement(y,{value:o,onChange:function(e){return n({url:e})}}),wp.element.createElement(E,{icon:"editor-break",label:m("Apply"),type:"submit"}))]}}]),t}(s);d("ugb/ghost-button",{title:m("Ghost Button"),icon:c.e,category:"layout",keywords:[m("Ghost Button"),m("Stackable")],attributes:{url:{type:"string",source:"attribute",selector:"a",attribute:"href"},title:{type:"string",source:"attribute",selector:"a",attribute:"title"},text:{type:"array",source:"children",selector:"a"},textAlignment:{type:"string",default:"center"},color:{type:"string"},textColor:{type:"string"},size:{type:"string",default:"normal"},cornerButtonRadius:{type:"number",default:"4"},borderThickness:{type:"number",default:"1"}},edit:N,save:function(e){var t=e.attributes,n=t.url,l=(t.title,t.text),o=t.textAlignment,r=t.color,a=t.size,i=t.cornerButtonRadius,c=t.borderThickness,u={borderColor:r,color:r,borderRadius:i+"px",borderWidth:c+"px"};return wp.element.createElement("div",{className:"ugb-button-"+o},wp.element.createElement("a",{href:n,className:"wp-ugb-button ugb-button-"+a+" ugb-ghost-button",style:u},l))}})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(16),o=(n.n(l),n(17)),r=(n.n(o),n(18)),a=n.n(r),i=n(0),c=wp.i18n.__,u=(wp.element.Component,wp.components),m=u.withState,s=u.SelectControl,p=u.PanelColor,d=u.ToggleControl,b=wp.blocks,g=b.registerBlockType,h=b.InspectorControls,w=b.RichText,f=b.ColorPalette,y=b.BlockControls;g("ugb/notification",{title:c("Notification"),icon:i.f,category:"layout",keywords:[c("Notification"),c("Stackable")],attributes:{text:{type:"array",source:"children",selector:"p",default:c("This is an informational alert, usually used for successful subscriptions, promo announcements, and the like.")},color:{type:"string"},textColor:{type:"string"},notifType:{type:"string",default:"success"},dismissible:{type:"boolean",default:!1}},edit:m({editable:"content"})(function(e){var t=[{value:"success",label:c("Success")},{value:"error",label:c("Error")},{value:"warning",label:c("Warning")},{value:"info",label:c("Information")}],n=e.isSelected,l=e.editable,o=e.setState,r=e.setAttributes,a=(e.className,e.attributes),i=a.text,u=a.color,m=a.textColor,b=a.notifType,g=a.dismissible;return[n&&wp.element.createElement(y,{key:"controls"}),wp.element.createElement("div",{key:"editable",className:"ugb-notification type-"+b+" dismissible-"+g},g&&wp.element.createElement("span",{key:"button",className:"close-button"},wp.element.createElement("svg",{viewBox:"0 0 28.3 28.3",style:{fill:m}},wp.element.createElement("path",{d:"M52.4-166.2c3.2,0,3.2-5,0-5C49.2-171.2,49.2-166.2,52.4-166.2L52.4-166.2z"}),wp.element.createElement("path",{d:"M16.8,13.9L26.9,3.8c0.6-0.6,0.6-1.5,0-2.1s-1.5-0.6-2.1,0L14.7,11.8L4.6,1.7C4,1.1,3.1,1.1,2.5,1.7s-0.6,1.5,0,2.1l10.1,10.1L2.5,24c-0.6,0.6-0.6,1.5,0,2.1c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4L14.7,16l10.1,10.1c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4c0.6-0.6,0.6-1.5,0-2.1L16.8,13.9z"}))),wp.element.createElement(w,{tagName:"p",placeholder:e.attributes.text.default,value:i,isSelected:n&&"content"===l,onFocus:function(e){return function(){o({editable:e})}}("content"),onChange:function(e){return r({text:e})},className:"wp-ugb-notif notif-"+b,style:{backgroundColor:u,color:m}}),n&&wp.element.createElement(h,{key:"inspector"},wp.element.createElement(d,{label:c("Dismissible"),checked:g,onChange:function(){return r({dismissible:!g})}}),wp.element.createElement(s,{label:c("Notification Type"),value:b,options:t.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){r({notifType:e})}}),wp.element.createElement(p,{title:c("Background Color"),colorValue:u,initialOpen:!1},wp.element.createElement(f,{value:u,onChange:function(e){return r({color:e})}})),wp.element.createElement(p,{title:c("Text Color"),colorValue:m,initialOpen:!1},wp.element.createElement(f,{value:m,onChange:function(e){return r({textColor:e})}}))))]}),save:function(e){var t=e.attributes,n=t.text,l=t.color,o=t.textColor,r=t.notifType,i=t.dismissible,c={backgroundColor:l,color:o},u=a()(n+r).substr(0,6);return wp.element.createElement("div",{className:"ugb-notification type-"+r+" dismissible-"+i,"data-uid":u},i&&wp.element.createElement("span",{key:"button",className:"close-button"},wp.element.createElement("svg",{viewBox:"0 0 28.3 28.3",style:{fill:o}},wp.element.createElement("path",{d:"M52.4-166.2c3.2,0,3.2-5,0-5C49.2-171.2,49.2-166.2,52.4-166.2L52.4-166.2z"}),wp.element.createElement("path",{d:"M16.8,13.9L26.9,3.8c0.6-0.6,0.6-1.5,0-2.1s-1.5-0.6-2.1,0L14.7,11.8L4.6,1.7C4,1.1,3.1,1.1,2.5,1.7s-0.6,1.5,0,2.1l10.1,10.1L2.5,24c-0.6,0.6-0.6,1.5,0,2.1c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4L14.7,16l10.1,10.1c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4c0.6-0.6,0.6-1.5,0-2.1L16.8,13.9z"}))),wp.element.createElement("p",{className:"wp-ugb-notif notif-"+r,style:c},n))}})},function(e,t){},function(e,t){},function(e,t,n){!function(){var t=n(19),l=n(1).utf8,o=n(20),r=n(1).bin,a=function(e,n){e.constructor==String?e=n&&"binary"===n.encoding?r.stringToBytes(e):l.stringToBytes(e):o(e)?e=Array.prototype.slice.call(e,0):Array.isArray(e)||(e=e.toString());for(var i=t.bytesToWords(e),c=8*e.length,u=1732584193,m=-271733879,s=-1732584194,p=271733878,d=0;d<i.length;d++)i[d]=16711935&(i[d]<<8|i[d]>>>24)|4278255360&(i[d]<<24|i[d]>>>8);i[c>>>5]|=128<<c%32,i[14+(c+64>>>9<<4)]=c;for(var b=a._ff,g=a._gg,h=a._hh,w=a._ii,d=0;d<i.length;d+=16){var f=u,y=m,v=s,C=p;u=b(u,m,s,p,i[d+0],7,-680876936),p=b(p,u,m,s,i[d+1],12,-389564586),s=b(s,p,u,m,i[d+2],17,606105819),m=b(m,s,p,u,i[d+3],22,-1044525330),u=b(u,m,s,p,i[d+4],7,-176418897),p=b(p,u,m,s,i[d+5],12,1200080426),s=b(s,p,u,m,i[d+6],17,-1473231341),m=b(m,s,p,u,i[d+7],22,-45705983),u=b(u,m,s,p,i[d+8],7,1770035416),p=b(p,u,m,s,i[d+9],12,-1958414417),s=b(s,p,u,m,i[d+10],17,-42063),m=b(m,s,p,u,i[d+11],22,-1990404162),u=b(u,m,s,p,i[d+12],7,1804603682),p=b(p,u,m,s,i[d+13],12,-40341101),s=b(s,p,u,m,i[d+14],17,-1502002290),m=b(m,s,p,u,i[d+15],22,1236535329),u=g(u,m,s,p,i[d+1],5,-165796510),p=g(p,u,m,s,i[d+6],9,-1069501632),s=g(s,p,u,m,i[d+11],14,643717713),m=g(m,s,p,u,i[d+0],20,-373897302),u=g(u,m,s,p,i[d+5],5,-701558691),p=g(p,u,m,s,i[d+10],9,38016083),s=g(s,p,u,m,i[d+15],14,-660478335),m=g(m,s,p,u,i[d+4],20,-405537848),u=g(u,m,s,p,i[d+9],5,568446438),p=g(p,u,m,s,i[d+14],9,-1019803690),s=g(s,p,u,m,i[d+3],14,-187363961),m=g(m,s,p,u,i[d+8],20,1163531501),u=g(u,m,s,p,i[d+13],5,-1444681467),p=g(p,u,m,s,i[d+2],9,-51403784),s=g(s,p,u,m,i[d+7],14,1735328473),m=g(m,s,p,u,i[d+12],20,-1926607734),u=h(u,m,s,p,i[d+5],4,-378558),p=h(p,u,m,s,i[d+8],11,-2022574463),s=h(s,p,u,m,i[d+11],16,1839030562),m=h(m,s,p,u,i[d+14],23,-35309556),u=h(u,m,s,p,i[d+1],4,-1530992060),p=h(p,u,m,s,i[d+4],11,1272893353),s=h(s,p,u,m,i[d+7],16,-155497632),m=h(m,s,p,u,i[d+10],23,-1094730640),u=h(u,m,s,p,i[d+13],4,681279174),p=h(p,u,m,s,i[d+0],11,-358537222),s=h(s,p,u,m,i[d+3],16,-722521979),m=h(m,s,p,u,i[d+6],23,76029189),u=h(u,m,s,p,i[d+9],4,-640364487),p=h(p,u,m,s,i[d+12],11,-421815835),s=h(s,p,u,m,i[d+15],16,530742520),m=h(m,s,p,u,i[d+2],23,-995338651),u=w(u,m,s,p,i[d+0],6,-198630844),p=w(p,u,m,s,i[d+7],10,1126891415),s=w(s,p,u,m,i[d+14],15,-1416354905),m=w(m,s,p,u,i[d+5],21,-57434055),u=w(u,m,s,p,i[d+12],6,1700485571),p=w(p,u,m,s,i[d+3],10,-1894986606),s=w(s,p,u,m,i[d+10],15,-1051523),m=w(m,s,p,u,i[d+1],21,-2054922799),u=w(u,m,s,p,i[d+8],6,1873313359),p=w(p,u,m,s,i[d+15],10,-30611744),s=w(s,p,u,m,i[d+6],15,-1560198380),m=w(m,s,p,u,i[d+13],21,1309151649),u=w(u,m,s,p,i[d+4],6,-145523070),p=w(p,u,m,s,i[d+11],10,-1120210379),s=w(s,p,u,m,i[d+2],15,718787259),m=w(m,s,p,u,i[d+9],21,-343485551),u=u+f>>>0,m=m+y>>>0,s=s+v>>>0,p=p+C>>>0}return t.endian([u,m,s,p])};a._ff=function(e,t,n,l,o,r,a){var i=e+(t&n|~t&l)+(o>>>0)+a;return(i<<r|i>>>32-r)+t},a._gg=function(e,t,n,l,o,r,a){var i=e+(t&l|n&~l)+(o>>>0)+a;return(i<<r|i>>>32-r)+t},a._hh=function(e,t,n,l,o,r,a){var i=e+(t^n^l)+(o>>>0)+a;return(i<<r|i>>>32-r)+t},a._ii=function(e,t,n,l,o,r,a){var i=e+(n^(t|~l))+(o>>>0)+a;return(i<<r|i>>>32-r)+t},a._blocksize=16,a._digestsize=16,e.exports=function(e,n){if(void 0===e||null===e)throw new Error("Illegal argument "+e);var l=t.wordsToBytes(a(e,n));return n&&n.asBytes?l:n&&n.asString?r.bytesToString(l):t.bytesToHex(l)}}()},function(e,t){!function(){var t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",n={rotl:function(e,t){return e<<t|e>>>32-t},rotr:function(e,t){return e<<32-t|e>>>t},endian:function(e){if(e.constructor==Number)return 16711935&n.rotl(e,8)|4278255360&n.rotl(e,24);for(var t=0;t<e.length;t++)e[t]=n.endian(e[t]);return e},randomBytes:function(e){for(var t=[];e>0;e--)t.push(Math.floor(256*Math.random()));return t},bytesToWords:function(e){for(var t=[],n=0,l=0;n<e.length;n++,l+=8)t[l>>>5]|=e[n]<<24-l%32;return t},wordsToBytes:function(e){for(var t=[],n=0;n<32*e.length;n+=8)t.push(e[n>>>5]>>>24-n%32&255);return t},bytesToHex:function(e){for(var t=[],n=0;n<e.length;n++)t.push((e[n]>>>4).toString(16)),t.push((15&e[n]).toString(16));return t.join("")},hexToBytes:function(e){for(var t=[],n=0;n<e.length;n+=2)t.push(parseInt(e.substr(n,2),16));return t},bytesToBase64:function(e){for(var n=[],l=0;l<e.length;l+=3)for(var o=e[l]<<16|e[l+1]<<8|e[l+2],r=0;r<4;r++)8*l+6*r<=8*e.length?n.push(t.charAt(o>>>6*(3-r)&63)):n.push("=");return n.join("")},base64ToBytes:function(e){e=e.replace(/[^A-Z0-9+\/]/gi,"");for(var n=[],l=0,o=0;l<e.length;o=++l%4)0!=o&&n.push((t.indexOf(e.charAt(l-1))&Math.pow(2,-2*o+8)-1)<<2*o|t.indexOf(e.charAt(l))>>>6-2*o);return n}};e.exports=n}()},function(e,t){function n(e){return!!e.constructor&&"function"===typeof e.constructor.isBuffer&&e.constructor.isBuffer(e)}function l(e){return"function"===typeof e.readFloatLE&&"function"===typeof e.slice&&n(e.slice(0,0))}e.exports=function(e){return null!=e&&(n(e)||l(e)||!!e._isBuffer)}},function(e,t,n){"use strict";var l=n(22),o=(n.n(l),n(23)),r=(n.n(o),n(0)),a=wp.i18n.__,i=(wp.element.Component,wp.components),c=i.PanelColor,u=i.withState,m=wp.blocks,s=m.registerBlockType,p=m.InspectorControls,d=m.RichText,b=m.ColorPalette;s("ugb/blockquote",{title:a("Blockquote"),icon:r.i,category:"common",keywords:[a("Blockquote"),a("Stackable")],attributes:{text:{type:"array",source:"children",selector:"p",default:a("It's okay to acknowledge that life can get complicated, but we musn't forget the beauty in its simplicity, too. From the multitude of stars above, to freshly mowed grass in the morning, life is simply wonderful.")},color:{type:"string",default:"#424242"},borderColor:{type:"string",default:"#2091e1"}},edit:u({editable:"content"})(function(e){var t=e.isSelected,n=e.setAttributes,l=(e.className,e.attributes),o=l.color,r=l.text,i=l.borderColor;return[wp.element.createElement("blockquote",{key:"quote",className:"ugb-blockquote",style:{borderLeftColor:i}},wp.element.createElement(d,{tagName:"p",className:"ugb-blockquote-text",value:r,onChange:function(e){return n({text:e})},isSelected:t,style:{color:o}})),t&&wp.element.createElement(p,{key:"inspector"},wp.element.createElement(c,{title:a("Text Color"),colorValue:o,initialOpen:!1},wp.element.createElement(b,{value:o,onChange:function(e){return n({color:e})}})),wp.element.createElement(c,{title:a("Border Color"),colorValue:i,initialOpen:!1},wp.element.createElement(b,{value:i,onChange:function(e){return n({borderColor:e})}})))]}),save:function(e){var t=e.attributes,n=t.color,l=t.text,o=t.borderColor;return wp.element.createElement("blockquote",{className:"ugb-blockquote",style:{borderLeftColor:o}},wp.element.createElement("p",{style:{color:n}},l))}})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(25),o=(n.n(l),n(26)),r=(n.n(o),n(0)),a=wp.i18n.__,i=(wp.element.Component,wp.components),c=i.PanelColor,u=i.withState,m=wp.blocks,s=m.registerBlockType,p=m.InspectorControls,d=m.RichText,b=m.ColorPalette;s("ugb/pullquote",{title:a("Pullquote"),icon:r.i,category:"formatting",keywords:[a("Pullquote"),a("Stackable")],attributes:{text:{type:"array",source:"children",selector:"p",default:a("It's okay to acknowledge that life can get complicated, but we musn't forget the beauty in its simplicity, too. From the multitude of stars above, to freshly mowed grass in the morning, life is simply wonderful.")},color:{type:"string",default:"#2091e1"},borderColor:{type:"string",default:"#2091e1"}},edit:u({editable:"content"})(function(e){var t=e.isSelected,n=e.setAttributes,l=(e.className,e.attributes),o=l.color,r=l.text,i=l.borderColor;return[wp.element.createElement("blockquote",{key:"quote",className:"ugb-pullquote",style:{borderTopColor:i,borderBottomColor:i}},wp.element.createElement(d,{tagName:"p",className:"ugb-pullquote-text",value:r,onChange:function(e){return n({text:e})},placeholder:a("Write quote\u2026"),formattingControls:["bold","italic","strikethrough","link"],isSelected:t,keepPlaceholderOnFocus:!0,style:{color:o}})),t&&wp.element.createElement(p,{key:"inspector"},wp.element.createElement(c,{title:a("Text Color"),colorValue:o,initialOpen:!1},wp.element.createElement(b,{value:o,onChange:function(e){return n({color:e})}})),wp.element.createElement(c,{title:a("Border Color"),colorValue:i,initialOpen:!1},wp.element.createElement(b,{value:i,onChange:function(e){return n({borderColor:e})}})))]}),save:function(e){var t=e.attributes,n=t.color,l=t.text,o=t.borderColor;return wp.element.createElement("blockquote",{className:"ugb-pullquote",style:{borderTopColor:o,borderBottomColor:o}},wp.element.createElement("p",{style:{color:n}},l))}})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(28),o=(n.n(l),n(29)),r=(n.n(o),n(0)),a=wp.i18n.__,i=(wp.element.Component,wp.components),c=i.PanelColor,u=i.Dashicon,m=i.IconButton,s=i.withState,p=i.SelectControl,d=i.RangeControl,b=wp.blocks,g=b.registerBlockType,h=b.InspectorControls,w=(b.BlockControls,b.AlignmentToolbar,b.RichText),f=b.ColorPalette,y=b.UrlInput;g("ugb/cta",{title:a("Call to Action"),icon:r.b,category:"layout",keywords:[a("Call to Action"),a("Stackable"),a("CTA")],attributes:{url:{type:"string",source:"attribute",selector:"a",attribute:"href"},title:{type:"string",source:"attribute",selector:"a",attribute:"title"},ctaTitle:{type:"array",source:"children",selector:"h3",default:a("Get Started Today")},bodyText:{type:"array",source:"children",selector:"p",default:a("Get Stackable: Ultimate Gutenberg Blocks today.\xa0 Apart from adding new blocks, it gives Gutenberg users more options and settings to tinker with, expanding Gutenberg\u2019s functionality.")},buttonText:{type:"array",source:"children",selector:"a"},color:{type:"string",default:"#2091e1"},textColor:{type:"string",default:"#ffffff"},titleColor:{type:"string"},bodyTextColor:{type:"string"},bgColor:{type:"string"},size:{type:"string",default:"normal"},borderButtonRadius:{type:"number",default:4}},edit:s({editable:"content"})(function(e){var t=e.isSelected,n=e.editable,l=e.setState,o=(e.className,e.setAttributes),r=e.attributes,i=r.url,s=r.buttonText,b=(r.title,r.ctaTitle),g=r.bodyText,v=r.color,C=r.textColor,E=r.size,T=r.borderButtonRadius,k=r.bodyTextColor,x=r.titleColor,N=r.bgColor,S=[{value:"small",label:a("Small")},{value:"normal",label:a("Normal")},{value:"medium",label:a("Medium")},{value:"large",label:a("Large")}],B=function(e){return function(){l({editable:e})}};return[wp.element.createElement("div",{key:"editable",className:"ugb-cta",style:{backgroundColor:N}},wp.element.createElement(w,{className:"ugb-cta-title",tagName:"h3",placeholder:a("Add Title"),value:b,onChange:function(e){return o({ctaTitle:e})},isSelected:t&&"ctaTitle"===n,onFocus:B("ctaTitle"),keepPlaceholderOnFocus:!0,style:{color:x}}),wp.element.createElement(w,{tagName:"p",value:g,className:"ugb-cta-bodyText",onChange:function(e){return o({bodyText:e})},isSelected:t&&"bodyText"===n,onFocus:B("bodyText"),placeholder:a("Write body text\u2026"),style:{color:k}}),wp.element.createElement("span",{key:"button",className:"wp-block-button ugb-cta-button"},wp.element.createElement(w,{tagName:"span",placeholder:a("Add Text"),value:s,onChange:function(e){return o({buttonText:e})},isSelected:t&&"buttonText"===n,onFocus:B("buttonText"),className:"wp-ugb-button ugb-button-"+E,style:{backgroundColor:v,color:C,borderRadius:T+"px"},keepPlaceholderOnFocus:!0}),t&&wp.element.createElement(h,{key:"inspector"},wp.element.createElement(p,{label:a("Button Size"),value:E,options:S.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){o({size:e})}}),wp.element.createElement(d,{label:a("Button Border Radius"),value:T,min:"1",max:"50",onChange:function(e){return o({borderButtonRadius:e})}}),wp.element.createElement(c,{title:a("Title Color"),colorValue:x,initialOpen:!1},wp.element.createElement(f,{value:v,onChange:function(e){return o({titleColor:e})}})),wp.element.createElement(c,{title:a("Body Text Color"),colorValue:k,initialOpen:!1},wp.element.createElement(f,{value:v,onChange:function(e){return o({bodyTextColor:e})}})),wp.element.createElement(c,{title:a("Button Background Color"),colorValue:v,initialOpen:!1},wp.element.createElement(f,{value:v,onChange:function(e){return o({color:e})}})),wp.element.createElement(c,{title:a("Button Text Color"),colorValue:C,initialOpen:!1},wp.element.createElement(f,{value:C,onChange:function(e){return o({textColor:e})}})),wp.element.createElement(c,{title:a("Background Color"),colorValue:N,initialOpen:!1},wp.element.createElement(f,{value:N,onChange:function(e){return o({bgColor:e})}})))),t&&wp.element.createElement("form",{key:"form-link",onSubmit:function(e){return e.preventDefault()},className:"blocks-button__inline-link"},wp.element.createElement(u,{icon:"admin-links"}),wp.element.createElement(y,{value:i,onChange:function(e){return o({url:e})}}),wp.element.createElement(m,{icon:"editor-break",label:a("Apply"),type:"submit"})))]}),save:function(e){var t=e.attributes,n=t.url,l=(t.title,t.buttonText),o=t.ctaTitle,r=t.bodyText,a=t.color,i=t.textColor,c=t.size,u=t.borderButtonRadius,m=t.bodyTextColor,s=t.titleColor,p=t.bgColor,d={backgroundColor:a,color:i,borderRadius:u+"px"};return wp.element.createElement("div",{className:"ugb-cta",style:{backgroundColor:p}},o&&!!o.length&&wp.element.createElement("h3",{className:"ugb-cta-title",style:{color:s}},o),r&&!!r.length&&wp.element.createElement("p",{className:"ugb-cta-bodyText",style:{color:m}},r),l&&!!l.length&&wp.element.createElement("a",{href:n,className:"wp-ugb-button ugb-cta-button ugb-button-"+c,style:d},l))}})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(31),o=(n.n(l),n(32)),r=(n.n(o),n(0)),a=wp.i18n.__,i=(wp.element.Component,wp.blocks.registerBlockType),c=wp.components,u=c.PanelColor,m=c.Button,s=c.withState,p=c.SelectControl,d=wp.blocks,b=d.InspectorControls,g=d.RichText,h=d.ColorPalette,w=d.MediaUpload,f=d.BlockControls;d.AlignmentToolbar;i("ugb/testimonial",{title:a("Testimonial"),icon:r.l,category:"common",keywords:[a("Testimonial"),a("Stackable")],attributes:{title:{type:"string",source:"attribute",selector:"a",attribute:"title"},url:{type:"string",source:"attribute",selector:"a",attribute:"href"},href:{type:"url"},hrefTwo:{type:"url"},hrefThree:{type:"url"},mediaID:{type:"number"},mediaIDTwo:{type:"number"},mediaIDThree:{type:"number"},mediaURL:{type:"string",source:"attribute",selector:".ugb-testimonial-column-one .testimonial-image",attribute:"data-src"},mediaURLTwo:{type:"string",source:"attribute",selector:".ugb-testimonial-column-two .testimonial-image",attribute:"data-src"},mediaURLThree:{type:"string",source:"attribute",selector:".ugb-testimonial-column-three .testimonial-image",attribute:"data-src"},testimonialTitle:{type:"array",source:"children",selector:".ugb-testimonial-column-one h4",default:a("Ben Adams")},testimonialTitleTwo:{type:"array",source:"children",selector:".ugb-testimonial-column-two h4",default:a("Alex Johnson")},testimonialTitleThree:{type:"array",source:"children",selector:".ugb-testimonial-column-three h4",default:a("Sammy Simpson")},position:{type:"array",source:"children",selector:".ugb-testimonial-position",default:a("Founder")},positionTwo:{type:"array",source:"children",selector:".ugb-testimonial-position-two",default:a("Editor")},positionThree:{type:"array",source:"children",selector:".ugb-testimonial-position-three",default:a("Programmer")},body:{type:"array",source:"children",selector:".ugb-testimonial-body",default:a("Stackable: Ultimate Blocks from Gutenberg has all the blocks I need to make a great webpage.")},bodyTwo:{type:"array",source:"children",selector:".ugb-testimonial-body-two",default:a("Stackable: Ultimate Blocks from Gutenberg has all the blocks I need to make a great webpage.")},bodyThree:{type:"array",source:"children",selector:".ugb-testimonial-body-three",default:a("Stackable: Ultimate Blocks from Gutenberg has all the blocks I need to make a great webpage.")},titleColor:{type:"string"},posColor:{type:"string"},bodyTextColor:{type:"string"},iconColor:{type:"string"},columns:{type:"select",default:"1"}},edit:s({editable:"content"})(function(e){var t=e.isSelected,n=e.editable,l=e.setState,o=(e.className,e.setAttributes),r=e.attributes,i=(r.url,r.title,r.testimonialTitle),c=r.testimonialTitleTwo,s=r.testimonialTitleThree,d=r.body,y=r.bodyTwo,v=r.bodyThree,C=r.position,E=r.positionTwo,T=r.positionThree,k=(r.href,r.hrefTwo,r.hrefThree,r.mediaID),x=r.mediaIDTwo,N=r.mediaIDThree,S=r.mediaURL,B=r.mediaURLTwo,I=r.mediaURLThree,O=r.columns,A=r.titleColor,P=r.posColor,F=r.bodyTextColor,z=r.iconColor,L=[{value:"1",label:a("One Column")},{value:"2",label:a("Two Column")},{value:"3",label:a("Three Column")}],_=function(e){return function(){l({editable:e})}};return[t&&wp.element.createElement(f,null),t&&wp.element.createElement(b,{key:"inspector"},wp.element.createElement(p,{label:a("Column Number"),value:O,options:L.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){o({columns:e})}}),wp.element.createElement(u,{title:a("Title Color"),colorValue:A,initialOpen:!1},wp.element.createElement(h,{value:A,onChange:function(e){return o({titleColor:e})}})),wp.element.createElement(u,{title:a("Position Color"),colorValue:P,initialOpen:!1},wp.element.createElement(h,{value:P,onChange:function(e){return o({posColor:e})}})),wp.element.createElement(u,{title:a("Body Text Color"),colorValue:F,initialOpen:!1},wp.element.createElement(h,{value:F,onChange:function(e){return o({bodyTextColor:e})}})),wp.element.createElement(u,{title:a("Icon Color"),colorValue:z,initialOpen:!1},wp.element.createElement(h,{value:z,onChange:function(e){return o({iconColor:e})}}))),wp.element.createElement("div",{key:"editable",className:"ugb-testimonial column-"+O},wp.element.createElement("div",{className:"ugb-testimonial-column-one"},wp.element.createElement("div",null,wp.element.createElement(w,{onSelect:function(e){return o({mediaURL:e.url,mediaID:e.id})},type:"image",value:k,render:function(e){return wp.element.createElement(m,{className:k?"":"button button-large",onClick:e.open},k?wp.element.createElement("div",{className:"testimonial-image",style:{backgroundImage:"url("+S+")"}}):a("Upload Image"))}})),wp.element.createElement(g,{tagName:"h4",placeholder:a("Add title\u2026"),value:i,onChange:function(e){return o({testimonialTitle:e})},isSelected:t&&"testimonialTitle"===n,onFocus:_("testimonialTitle"),style:{color:A},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:C,className:"ugb-testimonial-position",onChange:function(e){return o({position:e})},isSelected:t&&"position"===n,onFocus:_("position"),placeholder:a("Add position\u2026"),style:{color:P},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:d,className:"ugb-testimonial-body",onChange:function(e){return o({body:e})},isSelected:t&&"body"===n,onFocus:_("body"),placeholder:a("Add body\u2026"),style:{color:F},keepPlaceholderOnFocus:!0})),wp.element.createElement("div",{className:"ugb-testimonial-column-two"},wp.element.createElement("div",null,wp.element.createElement(w,{onSelect:function(e){return o({mediaURLTwo:e.url,mediaIDTwo:e.id})},type:"image",value:x,render:function(e){return wp.element.createElement(m,{className:x?"":"button button-large",onClick:e.open},x?wp.element.createElement("div",{className:"testimonial-image",style:{backgroundImage:"url("+B+")"}}):a("Upload Image"))}})),wp.element.createElement(g,{tagName:"h4",placeholder:a("Add title\u2026"),value:c,onChange:function(e){return o({testimonialTitleTwo:e})},isSelected:t&&"testimonialTitleTwo"===n,onFocus:_("testimonialTitleTwo"),style:{color:A},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:E,className:"ugb-testimonial-position-two",onChange:function(e){return o({positionTwo:e})},isSelected:t&&"positionTwo"===n,onFocus:_("positionTwo"),placeholder:a("Add position\u2026"),style:{color:P},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:y,className:"ugb-testimonial-body-two",onChange:function(e){return o({bodyTwo:e})},isSelected:t&&"bodyTwo"===n,onFocus:_("bodyTwo"),placeholder:a("Add body\u2026"),style:{color:F},keepPlaceholderOnFocus:!0})),wp.element.createElement("div",{className:"ugb-testimonial-column-three"},wp.element.createElement("div",null,wp.element.createElement(w,{onSelect:function(e){return o({mediaURLThree:e.url,mediaIDThree:e.id})},type:"image",value:N,render:function(e){return wp.element.createElement(m,{className:N?"":"button button-large",onClick:e.open},N?wp.element.createElement("div",{className:"testimonial-image",style:{backgroundImage:"url("+I+")"}}):a("Upload Image"))}})),wp.element.createElement(g,{tagName:"h4",placeholder:a("Add title\u2026"),value:s,onChange:function(e){return o({testimonialTitleThree:e})},isSelected:t&&"testimonialTitleThree"===n,onFocus:_("testimonialTitleThree"),style:{color:A},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:T,className:"ugb-testimonial-position-three",onChange:function(e){return o({positionThree:e})},isSelected:t&&"positionThree"===n,onFocus:_("positionThree"),placeholder:a("Add position\u2026"),style:{color:P},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:v,className:"ugb-testimonial-body-three",onChange:function(e){return o({bodyThree:e})},isSelected:t&&"bodyThree"===n,onFocus:_("bodyThree"),placeholder:a("Add body\u2026"),style:{color:F},keepPlaceholderOnFocus:!0})))]}),save:function(e){var t=e.attributes,n=(t.url,t.title,t.testimonialTitle),l=t.testimonialTitleTwo,o=t.testimonialTitleThree,r=t.body,a=t.bodyTwo,i=t.bodyThree,c=t.position,u=t.positionTwo,m=t.positionThree,s=t.mediaURL,p=t.mediaURLTwo,d=t.mediaURLThree,b=(t.mediaID,t.mediaIDTwo,t.mediaIDThree,t.titleColor),g=t.posColor,h=t.bodyTextColor,w=t.iconColor,f=t.columns,y=wp.element.createElement("div",{key:"button",className:"quote-icon"},wp.element.createElement("svg",{viewBox:"0 0 246 187.5",style:{fill:w}},wp.element.createElement("path",{d:"M98.5,0h-93C2.5,0,0,2.5,0,5.5v93c0,3,2.5,5.5,5.5,5.5h39c-1.7,15.5-8.8,50-39,50c-3,0-5.5,2.5-5.5,5.5V182c0,3,2.5,5.5,5.5,5.5c5.2,0,98.5-4.5,98.5-89v-93C104,2.5,101.5,0,98.5,0z"}),wp.element.createElement("path",{d:"M240.5,0h-93c-3,0-5.5,2.5-5.5,5.5v93c0,3,2.5,5.5,5.5,5.5h39c-1.7,15.5-8.8,50-39,50c-3,0-5.5,2.5-5.5,5.5V182c0,3,2.5,5.5,5.5,5.5c5.2,0,98.5-4.5,98.5-89v-93C246,2.5,243.5,0,240.5,0z"}),wp.element.createElement("path",{d:"M161.3-86.3c3.2,0,3.2-5,0-5C158.1-91.3,158.1-86.3,161.3-86.3L161.3-86.3z"})));return wp.element.createElement("div",{className:"ugb-testimonial column-"+f},wp.element.createElement("div",{className:"ugb-testimonial-column-one"},s?wp.element.createElement("div",{className:"testimonial-image",style:{backgroundImage:"url("+s+")"},"data-src":s}):y,n&&!!n.length&&wp.element.createElement("h4",{style:{color:b}},n),c&&!!c.length&&wp.element.createElement("p",{className:"ugb-testimonial-position",style:{color:g}},c),r&&!!r.length&&wp.element.createElement("p",{className:"ugb-testimonial-body",style:{color:h}},r)),f>1&&wp.element.createElement("div",{className:"ugb-testimonial-column-two"},p?wp.element.createElement("div",{className:"testimonial-image",style:{backgroundImage:"url("+p+")"},"data-src":p}):y,l&&!!l.length&&wp.element.createElement("h4",{style:{color:b}},l),u&&!!u.length&&wp.element.createElement("p",{className:"ugb-testimonial-position-two",style:{color:g}},u),a&&!!a.length&&wp.element.createElement("p",{className:"ugb-testimonial-body-two",style:{color:h}},a)),f>2&&wp.element.createElement("div",{className:"ugb-testimonial-column-three"},d?wp.element.createElement("div",{className:"testimonial-image",style:{backgroundImage:"url("+d+")"},"data-src":d}):y,o&&!!o.length&&wp.element.createElement("h4",{style:{color:b}},o),m&&!!m.length&&wp.element.createElement("p",{className:"ugb-testimonial-position-three",style:{color:g}},m),i&&!!i.length&&wp.element.createElement("p",{className:"ugb-testimonial-body-three",style:{color:h}},i)))}})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(34),o=(n.n(l),n(35)),r=(n.n(o),n(0)),a=wp.i18n.__,i=(wp.element.Component,wp.components),c=i.PanelColor,u=i.Button,m=i.SelectControl,s=(i.TextControl,i.withState),p=wp.blocks,d=p.registerBlockType,b=p.InspectorControls,g=p.RichText,h=p.ColorPalette,w=p.MediaUpload,f=p.BlockControls;p.AlignmentToolbar;d("ugb/team-member",{title:a("Team Member"),icon:r.k,category:"common",keywords:[a("Team Member"),a("Stackable")],attributes:{title:{type:"string",source:"attribute",selector:"a",attribute:"title"},url:{type:"string",source:"attribute",selector:"a",attribute:"href"},href:{type:"url"},hrefTwo:{type:"url"},hrefThree:{type:"url"},mediaID:{type:"number"},mediaIDTwo:{type:"number"},mediaIDThree:{type:"number"},mediaURL:{type:"string",source:"attribute",selector:".ugb-team-member-column-one .team-member-image",attribute:"data-src"},mediaURLTwo:{type:"string",source:"attribute",selector:".ugb-team-member-column-two .team-member-image",attribute:"data-src"},mediaURLThree:{type:"string",source:"attribute",selector:".ugb-team-member-column-three .team-member-image",attribute:"data-src"},name:{type:"array",source:"children",selector:".ugb-team-member-column-one h4",default:a("Ben Adams")},nameTwo:{type:"array",source:"children",selector:".ugb-team-member-column-two h4",default:a("Alex Johnson")},nameThree:{type:"array",source:"children",selector:".ugb-team-member-column-three h4",default:a("Sammy Simpson")},position:{type:"array",source:"children",selector:".ugb-team-member-column-one .ugb-team-member-position",default:a("Founder")},positionTwo:{type:"array",source:"children",selector:".ugb-team-member-column-two .ugb-team-member-position",default:a("Editor")},positionThree:{type:"array",source:"children",selector:".ugb-team-member-column-three .ugb-team-member-position",default:a("Programmer")},des:{type:"array",source:"children",selector:".ugb-team-member-des",default:a("Ben is the head of our small team. He loves walking his dog, Walter, when he has some free time.")},desTwo:{type:"array",source:"children",selector:".ugb-team-member-des-two",default:a("Alex handles all written content. She enjoys painting and playing softball on the weekends.")},desThree:{type:"array",source:"children",selector:".ugb-team-member-des-three",default:a("Sammy is our programmer. You'll usually find her nose in a book. She has a cat named Skitty.")},nameColor:{type:"string"},posColor:{type:"string"},desColor:{type:"string"},iconColor:{type:"string"},columns:{type:"select",default:"1"},shapes:{type:"select",default:"square"}},edit:s({editable:"content"})(function(e){var t=e.isSelected,n=e.editable,l=e.setState,o=(e.className,e.setAttributes),r=e.attributes,i=(r.url,r.title,r.name),s=r.nameTwo,p=r.nameThree,d=r.des,y=r.desTwo,v=r.desThree,C=r.position,E=r.positionTwo,T=r.positionThree,k=(r.href,r.hrefTwo,r.hrefThree,r.mediaID),x=r.mediaIDTwo,N=r.mediaIDThree,S=r.mediaURL,B=r.mediaURLTwo,I=r.mediaURLThree,O=r.columns,A=r.nameColor,P=r.posColor,F=r.desColor,z=r.iconColor,L=r.shapes,_=[{value:"1",label:a("One Column")},{value:"2",label:a("Two Column")},{value:"3",label:a("Three Column")}],R=[{value:"square",label:a("Square")},{value:"circle",label:a("Circle")}],V=function(e){return function(){l({editable:e})}};return[t&&wp.element.createElement(f,{key:"controls"}),t&&wp.element.createElement(b,{key:"inspector"},wp.element.createElement(m,{label:a("Image Shape"),value:L,options:R.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){o({shapes:e})}}),wp.element.createElement(m,{label:a("Column Number"),value:O,options:_.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){o({columns:e})}}),wp.element.createElement(c,{title:a("Name Color"),colorValue:A,initialOpen:!1},wp.element.createElement(h,{value:A,onChange:function(e){return o({nameColor:e})}})),wp.element.createElement(c,{title:a("Position Color"),colorValue:P,initialOpen:!1},wp.element.createElement(h,{value:P,onChange:function(e){return o({posColor:e})}})),wp.element.createElement(c,{title:a("Description Color"),colorValue:F,initialOpen:!1},wp.element.createElement(h,{value:F,onChange:function(e){return o({desColor:e})}})),wp.element.createElement(c,{title:a("Icon Color"),colorValue:z,initialOpen:!1},wp.element.createElement(h,{value:z,onChange:function(e){return o({iconColor:e})}}))),wp.element.createElement("div",{key:"editable",className:"ugb-team-member column-"+O+" image-"+L},wp.element.createElement("div",{className:"ugb-team-member-column-one"},wp.element.createElement("div",null,wp.element.createElement(w,{onSelect:function(e){return o({mediaURL:e.url,mediaID:e.id})},type:"image",value:k,render:function(e){return wp.element.createElement(u,{className:k?"":"button button-large",onClick:e.open},k?wp.element.createElement("div",{className:"team-member-image",style:{backgroundImage:"url("+S+")"}}):a("Upload Image"))}})),wp.element.createElement(g,{tagName:"h4",value:i,onChange:function(e){return o({name:e})},isSelected:t&&"name"===n,onFocus:V("name"),placeholder:i.default,style:{color:A},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:C,className:"ugb-team-member-position",onChange:function(e){return o({position:e})},isSelected:t&&"position"===n,onFocus:V("position"),placeholder:C.default,style:{color:P},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:d,className:"ugb-team-member-des",onChange:function(e){return o({des:e})},isSelected:t&&"des"===n,onFocus:V("des"),placeholder:d.default,style:{color:F},keepPlaceholderOnFocus:!0})),wp.element.createElement("div",{className:"ugb-team-member-column-two"},wp.element.createElement("div",null,wp.element.createElement(w,{onSelect:function(e){return o({mediaURLTwo:e.url,mediaIDTwo:e.id})},type:"image",value:x,render:function(e){return wp.element.createElement(u,{className:x?"":"button button-large",onClick:e.open},x?wp.element.createElement("div",{className:"team-member-image",style:{backgroundImage:"url("+B+")"}}):a("Upload Image"))}})),wp.element.createElement(g,{tagName:"h4",value:s,onChange:function(e){return o({nameTwo:e})},isSelected:t&&"nameTwo"===n,onFocus:V("nameTwo"),placeholder:s.default,style:{color:A},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:E,className:"ugb-team-member-position",onChange:function(e){return o({positionTwo:e})},isSelected:t&&"positionTwo"===n,onFocus:V("positionTwo"),placeholder:E.default,style:{color:P},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:y,className:"ugb-team-member-des-two",onChange:function(e){return o({desTwo:e})},isSelected:t&&"desTwo"===n,onFocus:V("desTwo"),placeholder:y.default,style:{color:F},keepPlaceholderOnFocus:!0})),wp.element.createElement("div",{className:"ugb-team-member-column-three"},wp.element.createElement("div",null,wp.element.createElement(w,{onSelect:function(e){return o({mediaURLThree:e.url,mediaIDThree:e.id})},type:"image",value:N,render:function(e){return wp.element.createElement(u,{className:N?"":"button button-large",onClick:e.open},N?wp.element.createElement("div",{className:"team-member-image",style:{backgroundImage:"url("+I+")"}}):a("Upload Image"))}})),wp.element.createElement(g,{tagName:"h4",value:p,onChange:function(e){return o({nameThree:e})},isSelected:t&&"nameThree"===n,onFocus:V("nameThree"),placeholder:p.default,style:{color:A},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:T,className:"ugb-team-member-position",onChange:function(e){return o({positionThree:e})},isSelected:t&&"positionThree"===n,onFocus:V("positionThree"),placeholder:T.default,style:{color:P},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:v,className:"ugb-team-member-des-three",onChange:function(e){return o({desThree:e})},isSelected:t&&"desThree"===n,onFocus:V("desThree"),placeholder:v.default,style:{color:F},keepPlaceholderOnFocus:!0})))]}),save:function(e){var t=e.attributes,n=(t.url,t.title,t.name),l=t.nameTwo,o=t.nameThree,r=t.shapes,a=t.des,i=t.desTwo,c=t.desThree,u=t.position,m=t.positionTwo,s=t.positionThree,p=t.mediaURL,d=t.mediaURLTwo,b=t.mediaURLThree,g=(t.mediaID,t.mediaIDTwo,t.mediaIDThree,t.nameColor),h=t.posColor,w=t.desColor,f=(t.iconColor,t.columns);return wp.element.createElement("div",{className:"ugb-team-member column-"+f+" image-"+r},wp.element.createElement("div",{className:"ugb-team-member-column-one"},p&&wp.element.createElement("div",{className:"team-member-image",style:{backgroundImage:"url("+p+")"},"data-src":p}),n&&!!n.length&&wp.element.createElement("h4",{style:{color:g}},n),u&&!!u.length&&wp.element.createElement("p",{className:"ugb-team-member-position",style:{color:h}},u),a&&!!a.length&&wp.element.createElement("p",{className:"ugb-team-member-des",style:{color:w}},a)),f>1&&wp.element.createElement("div",{className:"ugb-team-member-column-two"},d&&wp.element.createElement("div",{className:"team-member-image",style:{backgroundImage:"url("+d+")"},"data-src":d}),l&&!!l.length&&wp.element.createElement("h4",{style:{color:g}},l),m&&!!m.length&&wp.element.createElement("p",{className:"ugb-team-member-position",style:{color:h}},m),i&&!!i.length&&wp.element.createElement("p",{className:"ugb-team-member-des-two",style:{color:w}},i)),f>2&&wp.element.createElement("div",{className:"ugb-team-member-column-three"},b&&wp.element.createElement("div",{className:"team-member-image",style:{backgroundImage:"url("+b+")"},"data-src":b}),o&&!!o.length&&wp.element.createElement("h4",{style:{color:g}},o),s&&!!s.length&&wp.element.createElement("p",{className:"ugb-team-member-position",style:{color:h}},s),c&&!!c.length&&wp.element.createElement("p",{className:"ugb-team-member-des-three",style:{color:w}},c)))}})},function(e,t){},function(e,t){},function(e,t,n){"use strict";function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var o=n(37),r=(n.n(o),n(38)),a=(n.n(r),n(0)),i=wp.i18n.__,c=(wp.element.Component,wp.components.withState),u=wp.blocks,m=u.registerBlockType,s=u.RichText,p=u.BlockControls,d=function(e){return e.map(function(e){return e.children})},b=function(e){return e.map(function(e){return{children:e}})};m("ugb/expand",{title:i("Expand / Show More"),icon:a.d,category:"formatting",keywords:[i("Expand"),i("Show more/less"),i("Stackable")],attributes:{text:{type:"array",source:"query",selector:".ugb-expand-less-text > p",query:{children:{source:"node"}},default:[]},moreText:{type:"array",source:"query",selector:".ugb-expand-more-text > p",query:{children:{source:"node"}},default:[]},moreLabel:{type:"array",source:"children",selector:".ugb-expand-more",default:i("Show more")},lessLabel:{type:"array",source:"children",selector:".ugb-expand-less",default:i("Show less")}},edit:c({editable:"text"})(function(e){var t=(e.focus,e.setFocus,e.editable),n=e.setAttributes,o=e.setState,r=e.className,a=e.isSelected,c=function(e){return function(){o({editable:e})}},u=e.attributes,m=u.text,g=u.moreLabel,h=u.moreText,w=u.lessLabel;return[a&&wp.element.createElement(p,{key:"controls"}),wp.element.createElement("div",{key:"expand",className:r},a&&wp.element.createElement("label",{className:"ugb-editor-label"},"Less text"),wp.element.createElement(s,l({multiline:"p",placeholder:e.attributes.text.default,value:d(m),onChange:function(e){return n({text:b(e)})},isSelected:a&&"text"===t,onFocus:c("text"),className:"ugb-expand-less-text"},"placeholder",i("Some short text that can be expanded to show more details."))),wp.element.createElement(s,l({tagName:"a",placeholder:e.attributes.moreLabel.default,value:g,isSelected:a&&"moreLabel"===t,onFocus:c("moreLabel"),onChange:function(e){return n({moreLabel:e})},formattingControls:["bold","italic","strikethrough"],className:"ugb-expand-more"},"placeholder",i("Show more"))),a&&wp.element.createElement("label",{className:"ugb-editor-label"},"More text"),a&&wp.element.createElement(s,l({multiline:"p",placeholder:e.attributes.moreText.default,value:d(h),isSelected:a&&"moreText"===t,onFocus:c("moreText"),onChange:function(e){return n({moreText:b(e)})},className:"ugb-expand-more-text"},"placeholder",i("Some short text that can be expanded to show more details. Some additional text that can only be seen when expanded."))),a&&wp.element.createElement(s,l({tagName:"a",placeholder:e.attributes.lessLabel.default,value:w,isSelected:a&&"lessLabel"===t,onFocus:c("lessLabel"),onChange:function(e){return n({lessLabel:e})},formattingControls:["bold","italic","strikethrough"],className:"ugb-expand-less"},"placeholder",i("Show less"))))]}),save:function(e){var t=e.attributes,n=t.text,l=t.moreLabel,o=t.moreText,r=t.lessLabel;return wp.element.createElement("div",null,wp.element.createElement("div",{className:"ugb-expand-less-text"},n.map(function(e,t){return wp.element.createElement("p",{key:t},e.children&&e.children.props.children)})),wp.element.createElement("div",{className:"ugb-expand-more-text",style:{display:"none"}},o.map(function(e,t){return wp.element.createElement("p",{key:t},e.children&&e.children.props.children)})),wp.element.createElement("a",{className:"ugb-expand-button",href:"#"},wp.element.createElement("span",{className:"ugb-expand-more"},l),wp.element.createElement("span",{className:"ugb-expand-less",style:{display:"none"}},r)))}})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(40),o=(n.n(l),n(41)),r=(n.n(o),n(0)),a=wp.i18n.__,i=(wp.element.Component,wp.components),c=i.PanelColor,u=i.withState,m=i.SelectControl,s=wp.blocks,p=s.registerBlockType,d=s.InspectorControls,b=s.RichText,g=s.ColorPalette,h=(s.MediaUpload,s.BlockControls);s.AlignmentToolbar,s.BlockAlignmentToolbar;p("ugb/number-box",{title:a("Number Box"),icon:r.g,category:"common",keywords:[a("Number Box"),a("Stackable")],attributes:{title:{type:"string",source:"attribute",selector:"a",attribute:"title"},numberBox:{type:"array",source:"children",selector:".ugb-number-box-column-one span",default:a("01")},numberBoxTwo:{type:"array",source:"children",selector:".ugb-number-box-column-two span",default:a("02")},numberBoxThree:{type:"array",source:"children",selector:".ugb-number-box-column-three span",default:a("03")},name:{type:"array",source:"children",selector:".ugb-number-box-name",default:a("Registration")},nameTwo:{type:"array",source:"children",selector:".ugb-number-box-name-two",default:a("Waiting Period")},nameThree:{type:"array",source:"children",selector:".ugb-number-box-name-three",default:a("Delivery")},body:{type:"array",source:"children",selector:".ugb-number-box-body",default:a("This is just a sample write-up, but you can check out more info on Gutenberg on the WP repository.")},bodyTwo:{type:"array",source:"children",selector:".ugb-number-box-body-two",default:a("This is just a sample write-up, but you can check out more info on Gutenberg on the WP repository.")},bodyThree:{type:"array",source:"children",selector:".ugb-number-box-body-three",default:a("This is just a sample write-up, but you can check out more info on Gutenberg on the WP repository.")},numberBoxColor:{type:"string"},nameColor:{type:"string"},bodyTextColor:{type:"string"},numberBGColor:{type:"string"},columns:{type:"select",default:"1"}},edit:u({editable:"content"})(function(e){var t=(e.className,e.setAttributes),n=e.isSelected,l=e.editable,o=e.setState,r=e.attributes,i=(r.title,r.numberBox),u=r.numberBoxTwo,s=r.numberBoxThree,p=r.body,w=r.bodyTwo,f=r.bodyThree,y=r.name,v=r.nameTwo,C=r.nameThree,E=r.columns,T=r.numberBoxColor,k=r.nameColor,x=r.bodyTextColor,N=r.numberBGColor,S=[{value:"1",label:a("One Column")},{value:"2",label:a("Two Column")},{value:"3",label:a("Three Column")}],B=function(e){return function(){o({editable:e})}};return[n&&wp.element.createElement(h,{key:"controls"}),n&&wp.element.createElement(d,{key:"inspector"},wp.element.createElement(m,{label:a("Column Number"),value:E,options:S.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){t({columns:e})}}),wp.element.createElement(c,{title:a("Number Color"),colorValue:T,initialOpen:!1},wp.element.createElement(g,{value:T,onChange:function(e){return t({numberBoxColor:e})}})),wp.element.createElement(c,{title:a("Number Background Color"),colorValue:N,initialOpen:!1},wp.element.createElement(g,{value:N,onChange:function(e){return t({numberBGColor:e})}})),wp.element.createElement(c,{title:a("Name Color"),colorValue:k,initialOpen:!1},wp.element.createElement(g,{value:k,onChange:function(e){return t({nameColor:e})}})),wp.element.createElement(c,{title:a("Body Text Color"),colorValue:x,initialOpen:!1},wp.element.createElement(g,{value:x,onChange:function(e){return t({bodyTextColor:e})}}))),wp.element.createElement("div",{key:"editable",className:"ugb-number-box column-"+E},wp.element.createElement("div",{className:"ugb-number-box-column-one"},wp.element.createElement(b,{tagName:"span",placeholder:i.default,value:i,onChange:function(e){return t({numberBox:e})},isSelected:n&&"numberBox"===l,onFocus:B("numberBox"),style:{color:T,backgroundColor:N},keepPlaceholderOnFocus:!0}),wp.element.createElement(b,{tagName:"h4",value:y,className:"ugb-number-box-name",onChange:function(e){return t({name:e})},isSelected:n&&"name"===l,onFocus:B("name"),placeholder:a("Add name\u2026"),style:{color:k},keepPlaceholderOnFocus:!0}),wp.element.createElement(b,{tagName:"p",value:p,className:"ugb-number-box-body",onChange:function(e){return t({body:e})},isSelected:n&&"body"===l,onFocus:B("body"),placeholder:a("Add body\u2026"),style:{color:x},keepPlaceholderOnFocus:!0})),wp.element.createElement("div",{className:"ugb-number-box-column-two"},wp.element.createElement(b,{tagName:"span",placeholder:u.default,value:u,onChange:function(e){return t({numberBoxTwo:e})},isSelected:n&&"numberBoxTwo"===l,onFocus:B("numberBoxTwo"),style:{color:T,backgroundColor:N},keepPlaceholderOnFocus:!0}),wp.element.createElement(b,{tagName:"h4",value:v,className:"ugb-number-box-name-two",onChange:function(e){return t({nameTwo:e})},isSelected:n&&"nameTwo"===l,onFocus:B("nameTwo"),placeholder:a("Add name\u2026"),style:{color:k},keepPlaceholderOnFocus:!0}),wp.element.createElement(b,{tagName:"p",value:w,className:"ugb-number-box-body-two",onChange:function(e){return t({bodyTwo:e})},isSelected:n&&"bodyTwo"===l,onFocus:B("bodyTwo"),placeholder:a("Add body\u2026"),style:{color:x},keepPlaceholderOnFocus:!0})),wp.element.createElement("div",{className:"ugb-number-box-column-three"},wp.element.createElement(b,{tagName:"span",placeholder:s.default,value:s,onChange:function(e){return t({numberBoxThree:e})},isSelected:n&&"numberBoxThree"===l,onFocus:B("numberBoxThree"),style:{color:T,backgroundColor:N},keepPlaceholderOnFocus:!0}),wp.element.createElement(b,{tagName:"h4",value:C,className:"ugb-number-box-name-three",onChange:function(e){return t({nameThree:e})},isSelected:n&&"nameThree"===l,onFocus:B("nameThree"),placeholder:a("Add name\u2026"),style:{color:k},keepPlaceholderOnFocus:!0}),wp.element.createElement(b,{tagName:"p",value:f,className:"ugb-number-box-body-three",onChange:function(e){return t({bodyThree:e})},isSelected:n&&"bodyThree"===l,onFocus:B("bodyThree"),placeholder:a("Add body\u2026"),style:{color:x},keepPlaceholderOnFocus:!0})))]}),save:function(e){var t=e.attributes,n=(t.title,t.numberBox),l=t.numberBoxTwo,o=t.numberBoxThree,r=t.body,a=t.bodyTwo,i=t.bodyThree,c=t.name,u=t.nameTwo,m=t.nameThree,s=t.numberBoxColor,p=t.nameColor,d=t.bodyTextColor,b=t.numberBGColor,g=t.columns;return wp.element.createElement("div",{className:"ugb-number-box column-"+g},wp.element.createElement("div",{className:"ugb-number-box-column-one"},n&&!!n.length&&wp.element.createElement("span",{style:{color:s,backgroundColor:b}},n),c&&!!c.length&&wp.element.createElement("h4",{className:"ugb-number-box-name",style:{color:p}},c),r&&!!r.length&&wp.element.createElement("p",{className:"ugb-number-box-body",style:{color:d}},r)),g>1&&wp.element.createElement("div",{className:"ugb-number-box-column-two"},l&&!!l.length&&wp.element.createElement("span",{style:{color:s,backgroundColor:b}},l),u&&!!u.length&&wp.element.createElement("h4",{className:"ugb-number-box-name-two",style:{color:p}},u),a&&!!a.length&&wp.element.createElement("p",{className:"ugb-number-box-body-two",style:{color:d}},a)),g>2&&wp.element.createElement("div",{className:"ugb-number-box-column-three"},o&&!!o.length&&wp.element.createElement("span",{style:{color:s,backgroundColor:b}},o),m&&!!m.length&&wp.element.createElement("h4",{className:"ugb-number-box-name-three",style:{color:p}},m),i&&!!i.length&&wp.element.createElement("p",{className:"ugb-number-box-body-three",style:{color:d}},i)))}})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(43),o=(n.n(l),n(44)),r=(n.n(o),n(0)),a=wp.i18n.__,i=(wp.element.Component,wp.components),c=i.IconButton,u=i.PanelColor,m=i.Toolbar,s=i.Button,p=i.withState,d=i.RangeControl,b=i.SelectControl,g=i.ToggleControl,h=wp.blocks,w=h.registerBlockType,f=h.RichText,y=h.MediaUpload,v=h.BlockControls,C=h.InspectorControls,E=h.ColorPalette;w("ugb/image-box",{title:a("Image Box"),icon:r.h,category:"common",keywords:[a("Image Box"),a("Stackable")],attributes:{title:{type:"array",source:"children",selector:"h4",default:a("Title")},subtitle:{type:"array",source:"children",selector:"p",default:a("Subtitle goes here")},url:{type:"string",source:"attribute",selector:".ugb-image-box",attribute:"data-url"},titleColor:{type:"string",default:"#ffffff"},subtitleColor:{type:"string",default:"#ffffff"},overlayColor:{type:"string",default:"#42b078"},id:{type:"number"},width:{type:"number",default:"400"},height:{type:"number",default:"400"},verticalAlign:{type:"string",default:"center"},horizontalAlign:{type:"string",default:"center"},full:{type:"boolean",default:!1}},edit:p({editable:"content"})(function(e){var t=(e.className,e.setAttributes),n=e.isSelected,l=e.editable,o=e.setState,r=e.attributes,i=r.url,p=r.title,h=r.titleColor,w=r.subtitle,T=r.subtitleColor,k=r.overlayColor,x=r.id,N=r.height,S=r.width,B=r.verticalAlign,I=r.horizontalAlign,O=r.full,A=i?"has-image":"",P=O?"full-width":"",F=function(e){return function(){o({editable:e})}},z=[{value:"flex-start",label:a("Top")},{value:"center",label:a("Center")},{value:"flex-end",label:a("Bottom")}],L=[{value:"flex-start",label:a("Left")},{value:"center",label:a("Center")},{value:"flex-end",label:a("Right")}];return[n&&wp.element.createElement(v,{key:"controls"},i&&wp.element.createElement(m,null,wp.element.createElement(y,{onSelect:function(e){return t({url:e.url,id:e.id})},type:"image",value:x,render:function(e){var t=e.open;return wp.element.createElement(c,{className:"components-toolbar__control",label:a("Edit image"),icon:"edit",onClick:t})}}))),n&&wp.element.createElement(C,{key:"inspector"},wp.element.createElement(g,{label:"Full-Width",checked:!!O,onChange:function(){return t({full:!O})}}),wp.element.createElement(d,{label:a("Height"),value:N,min:"135",max:"700",onChange:function(e){return t({height:e})}}),wp.element.createElement(d,{label:a("Width"),value:S,min:"400",max:"999",onChange:function(e){return t({width:e})}}),wp.element.createElement(b,{label:a("Vertical Alignment"),value:B,options:z.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){t({verticalAlign:e})}}),wp.element.createElement(b,{label:a("Horizontal Alignment"),value:I,options:L.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){t({horizontalAlign:e})}}),wp.element.createElement(u,{title:a("Title Color"),colorValue:h,initialOpen:!1},wp.element.createElement(E,{value:h,onChange:function(e){return t({titleColor:e})}})),wp.element.createElement(u,{title:a("Subtitle Color"),colorValue:T,initialOpen:!1},wp.element.createElement(E,{value:T,onChange:function(e){return t({subtitleColor:e})}})),wp.element.createElement(u,{title:a("Overlay Color"),colorValue:k,initialOpen:!1},wp.element.createElement(E,{value:k,onChange:function(e){return t({overlayColor:e})}}))),wp.element.createElement("div",{key:"editable",className:"ugb-image-box "+A+" "+P,"data-url":i,style:{width:S+"px",height:N+"px",backgroundImage:"url("+i+")",alignItems:I,justifyContent:B}},wp.element.createElement(y,{onSelect:function(e){return t({url:e.url,id:e.id})},type:"image",value:x,render:function(e){return[!i&&wp.element.createElement(s,{className:x?"":"button button-large",onClick:e.open},a("Upload Image"))]}}),wp.element.createElement("a",{href:"#",style:{backgroundColor:k}}),wp.element.createElement(f,{tagName:"h4",placeholder:p.default,value:p,onChange:function(e){return t({title:e})},isSelected:n&&"title"===l,onFocus:F("title"),style:{color:h}}),wp.element.createElement(f,{tagName:"p",placeholder:w.default,value:w,onChange:function(e){return t({subtitle:e})},isSelected:n&&"subtitle"===l,onFocus:F("subtitle"),style:{color:T}}))]}),save:function(e){var t=e.attributes,n=t.url,l=t.title,o=t.titleColor,r=t.subtitle,a=t.subtitleColor,i=t.overlayColor,c=(t.id,t.height),u=t.width,m=t.verticalAlign,s=t.horizontalAlign,p=t.full,d=n?"has-image":"",b=p?"full-width":"",g=l.length||r.length?"has-content":"has-no-content";return wp.element.createElement("div",{className:"ugb-image-box "+d+" "+g+" "+b,"data-url":n,style:{width:u+"px",height:c+"px",backgroundImage:"url("+n+")",alignItems:s,justifyContent:m}},wp.element.createElement("a",{href:"#",style:{backgroundColor:i}}),l&&!!l.length&&wp.element.createElement("h4",{style:{color:o}},l),r&&!!r.length&&wp.element.createElement("p",{style:{color:a}},r))}})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(46),o=(n.n(l),n(47)),r=(n.n(o),n(0)),a=wp.i18n.__,i=(wp.element.Component,wp.components),c=i.PanelColor,u=i.withState,m=i.RangeControl,s=wp.blocks,p=s.registerBlockType,d=s.InspectorControls,b=s.RichText,g=s.ColorPalette;p("ugb/count-up",{title:a("Count Up"),icon:r.g,category:"common",keywords:[a("Count Up"),a("Stackable")],attributes:{title:{type:"array",source:"children",selector:"h4",default:a("Happy Customers")},counter:{type:"array",source:"children",selector:".ugb-counter",default:"12,345"},des:{type:"array",source:"children",selector:"p",default:a("and counting")},fontSize:{type:"number",default:"60"},headingColor:{type:"string"},desColor:{type:"string"},color:{type:"string"}},edit:u({editable:"content"})(function(e){var t=function(e){return function(){o({editable:e})}},n=e.isSelected,l=e.editable,o=e.setState,r=e.setAttributes,i=(e.className,e.attributes),u=i.color,s=i.headingColor,p=i.desColor,h=i.title,w=i.counter,f=i.des,y=i.fontSize;return[wp.element.createElement("div",{className:"ugb-countup"},wp.element.createElement(b,{tagName:"h4",value:h,onChange:function(e){return r({title:e})},isSelected:n&&"title"===l,onFocus:t("title"),style:{color:s}}),wp.element.createElement(b,{tagName:"div",className:"ugb-counter",placeholder:w.default,"data-duration":"1000","data-delay":"16",value:w,onChange:function(e){return r({counter:e})},isSelected:n&&"counter"===l,onFocus:t("counter"),style:{color:u,fontSize:y+"px"}}),wp.element.createElement(b,{tagName:"p",className:"ugb-counter-des",value:f,onChange:function(e){return r({des:e})},isSelected:n&&"des"===l,onFocus:t("des"),style:{color:p}})),n&&wp.element.createElement(d,{key:"inspector"},wp.element.createElement(c,{title:a("Heading Color"),colorValue:s,initialOpen:!1},wp.element.createElement(g,{value:s,onChange:function(e){return r({headingColor:e})}})),wp.element.createElement(c,{title:a("Count Up Text Color"),colorValue:u,initialOpen:!1},wp.element.createElement(g,{value:u,onChange:function(e){return r({color:e})}})),wp.element.createElement(c,{title:a("Description Color"),colorValue:p,initialOpen:!1},wp.element.createElement(g,{value:p,onChange:function(e){return r({desColor:e})}})),wp.element.createElement(m,{label:a("Counter Text Font Size"),max:"100",min:"10",value:y,onChange:function(e){return r({fontSize:e})}}))]}),save:function(e){var t=e.attributes,n=t.color,l=t.headingColor,o=t.desColor,r=t.title,a=t.counter,i=t.des,c=t.fontSize;return wp.element.createElement("div",{className:"ugb-countup"},wp.element.createElement("h4",{style:{color:l}}," ",r," "),wp.element.createElement("div",{className:"ugb-counter",style:{color:n,fontSize:c+"px"},"data-duration":"1000","data-delay":"16"},a),wp.element.createElement("p",{style:{color:o}}," ",i," "))}})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(49),o=(n.n(l),n(50)),r=(n.n(o),n(0)),a=wp.i18n.__,i=(wp.element.Component,wp.components),c=i.IconButton,u=i.PanelColor,m=i.Button,s=i.SelectControl,p=i.Dashicon,d=i.Toolbar,b=wp.blocks,g=b.registerBlockType,h=b.MediaUpload,w=b.InspectorControls,f=b.ColorPalette,y=b.BlockControls,v=b.UrlInput,C={normal:wp.element.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"30",height:"30",viewBox:"0 0 256 320"},wp.element.createElement("path",{d:"M0 0v320l256-160L0 0z"})),circle:wp.element.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"50",height:"50",viewBox:"0 0 40 40"},wp.element.createElement("path",{d:"M16 29l12-9-12-9v18zm4-29C8.95 0 0 8.95 0 20s8.95 20 20 20 20-8.95 20-20S31.05 0 20 0zm0 36c-8.82 0-16-7.18-16-16S11.18 4 20 4s16 7.18 16 16-7.18 16-16 16z"})),outline:wp.element.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"50",height:"50",viewBox:"0 0 34 34"},wp.element.createElement("path",{d:"M17 34C7.6 34 0 26.4 0 17S7.6 0 17 0s17 7.6 17 17-7.6 17-17 17zm0-32C8.7 2 2 8.7 2 17s6.7 15 15 15 15-6.7 15-15S25.3 2 17 2z"}),wp.element.createElement("path",{d:"M12 25.7V8.3L27 17l-15 8.7zm2-14v10.5l9-5.3-9-5.2z"}))};g("ugb/video-popup",{title:a("Video Popup"),icon:r.m,category:"common",keywords:[a("Video Popup"),a("Stackable")],attributes:{videoLink:{type:"string",source:"attribute",selector:".ugb-video-popup",attribute:"data-video"},mediaLink:{type:"string",source:"attribute",selector:".ugb-video-preview",attribute:"data-url"},mediaID:{type:"number"},overlayColor:{type:"string",default:"#000000"},playButtonType:{type:"string",default:"normal"}},edit:function(e){var t=(e.className,e.setAttributes),n=e.isSelected,l=e.attributes,o=l.videoLink,r=l.mediaLink,i=l.overlayColor,b=l.playButtonType,g=l.mediaID,E=[{value:"normal",label:a("Normal Play Button")},{value:"circle",label:a("Play Button with Circle")},{value:"outline",label:a("Outline Play Button")}];return[n&&wp.element.createElement(y,{key:"controls"},r&&wp.element.createElement(d,null,wp.element.createElement(h,{onSelect:function(e){return t({mediaLink:e.url,mediaID:e.id})},type:"image",value:g,render:function(e){var t=e.open;return wp.element.createElement(c,{className:"components-toolbar__control",label:a("Edit image"),icon:"edit",onClick:t})}}))),n&&wp.element.createElement(w,{key:"inspector"},wp.element.createElement(s,{label:a("Play Button Style"),value:b,options:E.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){t({playButtonType:e})}}),wp.element.createElement(u,{title:a("Background/Overlay Color"),colorValue:i,initialOpen:!1},wp.element.createElement(f,{value:i,onChange:function(e){return t({overlayColor:e})}}))),wp.element.createElement("div",{className:"ugb-video-popup","data-video":o,style:{backgroundColor:i}},wp.element.createElement("div",{className:"ugb-video-preview",style:{backgroundImage:"url("+r+")"}}),wp.element.createElement("div",{className:"ugb-video-wrapper"},wp.element.createElement(h,{onSelect:function(e){return t({mediaLink:e.url,mediaID:e.id})},type:"image",value:g,render:function(e){return[!r&&wp.element.createElement(m,{className:g?"":"button button-large",onClick:e.open},a("Upload Image"))]}}),wp.element.createElement("div",{className:"ugb-video-overlay",style:{backgroundColor:i}}),wp.element.createElement("span",{className:"ugb-play-button"},C[b]))),n&&wp.element.createElement("form",{key:"form-link",onSubmit:function(e){return e.preventDefault()},className:"ugb-video-popup-link blocks-button__inline-link"},wp.element.createElement(p,{icon:"admin-links"}),wp.element.createElement(v,{value:o,onChange:function(e){return t({videoLink:e})}}),wp.element.createElement(c,{icon:"editor-break",label:a("Apply"),type:"submit"}),wp.element.createElement("p",null,wp.element.createElement("i",null,"Youtube/Vimeo ID only")))]},save:function(e){var t=e.attributes,n=t.videoLink,l=t.mediaLink,o=t.overlayColor,r=t.playButtonType;t.mediaID;return wp.element.createElement("div",{className:"ugb-video-popup","data-video":n,style:{backgroundColor:o}},wp.element.createElement("div",{className:"ugb-video-preview",style:{backgroundImage:"url("+l+")"},"data-url":l}),wp.element.createElement("div",{className:"ugb-video-wrapper"},wp.element.createElement("a",{href:"#",style:{backgroundColor:o}}),wp.element.createElement("span",{className:"ugb-play-button"},C[r])))}})},function(e,t){},function(e,t){}]);
1
+ !function(e){function t(l){if(n[l])return n[l].exports;var o=n[l]={i:l,l:!1,exports:{}};return e[l].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,l){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:l})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=2)}([function(e,t,n){"use strict";n.d(t,"g",function(){return c}),n.d(t,"a",function(){return i}),n.d(t,"e",function(){return u}),n.d(t,"c",function(){return m}),n.d(t,"k",function(){return s}),n.d(t,"l",function(){return p}),n.d(t,"n",function(){return b}),n.d(t,"b",function(){return d}),n.d(t,"m",function(){return g}),n.d(t,"d",function(){return h}),n.d(t,"h",function(){return w}),n.d(t,"f",function(){return f}),n.d(t,"i",function(){return y}),n.d(t,"o",function(){return v}),n.d(t,"j",function(){return C});var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e},o=function(e){return wp.element.createElement("defs",null,wp.element.createElement("linearGradient",l({},e,{gradientTransform:"rotate(90)"}),wp.element.createElement("stop",{offset:"0%",stopColor:"#2FDDD1",stopOpacity:"1"}),wp.element.createElement("stop",{offset:"20%",stopColor:"#30A2E3",stopOpacity:"1"}),wp.element.createElement("stop",{offset:"50%",stopColor:"#F56FAE",stopOpacity:"1"}),wp.element.createElement("stop",{offset:"100%",stopColor:"#FFC58E",stopOpacity:"1"})))},r=1,a=function(){return"stk-icon-"+r++},c=function(){var e=a();return wp.element.createElement("svg",{className:"dashicon",role:"img",focusable:"false",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024",width:"20",height:"20"},wp.element.createElement(o,{id:e}),wp.element.createElement("path",{fill:"url(#"+e+")",d:"M512 96c-111.118 0-215.584 43.272-294.156 121.844S96 400.882 96 512s43.272 215.584 121.844 294.156S400.882 928 512 928s215.584-43.272 294.156-121.844S928 623.118 928 512s-43.272-215.584-121.843-294.156S623.118 96 512 96zm0-96c282.77 0 512 229.23 512 512s-229.23 512-512 512S0 794.77 0 512 229.23 0 512 0zm-64 704h128v128H448zm0-512h128v384H448z"}))},i=function(){var e=a();return wp.element.createElement("svg",{className:"dashicon",role:"img",focusable:"false",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20"},wp.element.createElement(o,{id:e}),wp.element.createElement("path",{fill:"url(#"+e+")",d:"M17 5H3c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm1 7c0 .6-.4 1-1 1H3c-.6 0-1-.4-1-1V7c0-.6.4-1 1-1h14c.6 0 1 .4 1 1v5z"}))},u=function(){return wp.element.createElement(i,null)},m=function(){var e=a();return wp.element.createElement("svg",{className:"dashicon",role:"img",focusable:"false",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20"},wp.element.createElement(o,{id:e}),wp.element.createElement("path",{fill:"url(#"+e+")",d:"M4 9h12v2H4V9z"}))},s=function(){var e=a();return wp.element.createElement("svg",{className:"dashicon",role:"img",focusable:"false",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20"},wp.element.createElement(o,{id:e}),wp.element.createElement("path",{fill:"url(#"+e+")",d:"M8.54 12.74c0-.87-.24-1.61-.72-2.22-.73-.92-2.14-1.03-2.96-.85-.34-1.93 1.3-4.39 3.42-5.45L6.65 1.94C3.45 3.46.31 6.96.85 11.37 1.19 14.16 2.8 16 5.08 16c1 0 1.83-.29 2.48-.88.66-.59.98-1.38.98-2.38zm9.43 0c0-.87-.24-1.61-.72-2.22-.73-.92-2.14-1.03-2.96-.85-.34-1.93 1.3-4.39 3.42-5.45l-1.63-2.28c-3.2 1.52-6.34 5.02-5.8 9.43.34 2.79 1.95 4.63 4.23 4.63 1 0 1.83-.29 2.48-.88.66-.59.98-1.38.98-2.38z"}))},p=function(){var e=a();return wp.element.createElement("svg",{className:"dashicon",role:"img",focusable:"false",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 14 32"},wp.element.createElement(o,{id:e}),wp.element.createElement("path",{fill:"url(#"+e+")",d:"M0 29h5.833L0 23h5V9H0l5.833-6H0V0h14v3H8.167L14 9H9v14h5l-5.833 6H14v3H0v-3z"}))},b=function(){var e=a();return wp.element.createElement("svg",{className:"dashicon",role:"img",focusable:"false",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 13 12.916010856628418"},wp.element.createElement(o,{id:e}),wp.element.createElement("path",{fill:"url(#"+e+")",d:"M5.68 12.916a.5.5 0 0 1-.397-.196L3.208 10H1.463C.656 10 0 9.428 0 8.621V1.463C0 .656.656 0 1.463 0h10.074C12.344 0 13 .656 13 1.463v7.158C13 9.428 12.344 10 11.537 10H8.151l-2.073 2.72a.504.504 0 0 1-.398.196zM1.463 1A.464.464 0 0 0 1 1.463v7.158c0 .255.208.463.463.463h1.993a.5.5 0 0 1 .397.196l1.827 2.312L7.507 9.28a.502.502 0 0 1 .397-.196h3.633A.464.464 0 0 0 12 8.621V1.463A.464.464 0 0 0 11.537 1H1.463zm1.193 2h7.828c.284.024.514.207.514.49a.498.498 0 0 1-.514.496H2.656a.499.499 0 0 1-.514-.496c.001-.283.231-.466.514-.49zm0 3h7.828c.284.024.514.207.514.49a.498.498 0 0 1-.514.496H2.656a.499.499 0 0 1-.514-.496c.001-.283.231-.466.514-.49z"}))},d=function(){var e=a();return wp.element.createElement("svg",{className:"dashicon",role:"img",focusable:"false",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 16 14"},wp.element.createElement(o,{id:e}),wp.element.createElement("path",{fill:"url(#"+e+")",d:"M10 0c-.17 0-.36.05-.52.14C8.04 1.02 4.5 3.58 3 4c-1.38 0-3 .67-3 2.5S1.63 9 3 9c.3.08.64.23 1 .41V14h2v-3.45c1.34.86 2.69 1.83 3.48 2.31.16.09.34.14.52.14.52 0 1-.42 1-1V1c0-.58-.48-1-1-1zm0 12c-.38-.23-.89-.58-1.5-1-.16-.11-.33-.22-.5-.34V2.31c.16-.11.31-.2.47-.31.61-.41 1.16-.77 1.53-1v11zm2-6h4v1h-4V6zm0 2l4 2v1l-4-2V8zm4-6v1l-4 2V4l4-2z"}))},g=function(){var e=a();return wp.element.createElement("svg",{className:"dashicon",role:"img",focusable:"false",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 896 1023"},wp.element.createElement(o,{id:e}),wp.element.createElement("path",{fill:"url(#"+e+")",d:"M821 491q-41-41-95-60 62-26 100-82t38-125q0-93-65.5-158.5T640 0q-71 0-128.5 41T430 147q-32-39-77-61t-97-22q-93 0-158.5 65.5T32 288q0 69 38 125t100 82q-54 19-95 60Q0 630 0 736v191q0 40 28 68t68 28h320q31 0 55.5-18t34.5-46h294q40 0 68-28t28-68V672q0-106-75-181zM527 111q47-47 113-47t113 47 47 113-47 113-113 47-113-47-47-113 47-113zM143 401q-47-47-47-113t47-113 113-47 113 47 47 113-47 113-113 47-113-47zm305 526q0 13-9.5 22.5T416 959H96q-13 0-22.5-9.5T64 927V736q0-79 56.5-135.5T256 544t136 56q1 2 2 3 54 55 54 133v191zm-27-387q-36-30-79-45 43-18 75.5-52t48.5-78q36 44 88 66-54 19-95 60-22 23-38 49zm411 323q0 13-9.5 22.5T800 895H512V736q0-80-46-146 15-30 38-53 57-57 136-57t135.5 56.5T832 672v191z"}))},h=function(){var e=a();return wp.element.createElement("svg",{className:"dashicon",role:"img",focusable:"false",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 32 8"},wp.element.createElement(o,{id:e}),wp.element.createElement("path",{fill:"url(#"+e+")",d:"M4 0C1.79 0 0 1.79 0 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm24 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zM16 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"}))},w=function(){var e=a();return wp.element.createElement("svg",{className:"dashicon",role:"img",focusable:"false",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 21.027502059936523 10.284000396728516"},wp.element.createElement(o,{id:e}),wp.element.createElement("path",{fill:"url(#"+e+")",d:"M3.028 10.284a1 1 0 0 1-1-1V2.902l-.553.276A1 1 0 1 1 .58 1.389l2-1a.998.998 0 0 1 1.447.895v8a1 1 0 0 1-1 1zm9 0h-5a1.002 1.002 0 0 1-.707-1.707l4-4c.254-.254.394-.591.394-.95 0-.358-.14-.695-.394-.949-.508-.508-1.39-.508-1.9.001a1.33 1.33 0 0 0-.393.948 1 1 0 0 1-2 0c0-.894.348-1.733.98-2.364C8.273 0 10.472 0 11.735 1.264c.632.631.979 1.471.979 2.363 0 .893-.348 1.733-.98 2.364L9.443 8.284h2.586a1 1 0 0 1 0 2zm7.955-5.623a2.725 2.725 0 0 0 .545-1.627 2.753 2.753 0 0 0-2.75-2.75 2.739 2.739 0 0 0-2.44 1.484 1 1 0 1 0 1.776.92.75.75 0 1 1 .664 1.096 1 1 0 0 0 0 2c.689 0 1.25.561 1.25 1.25s-.561 1.25-1.25 1.25-1.25-.561-1.25-1.25a1 1 0 0 0-2 0c0 1.792 1.458 3.25 3.25 3.25s3.25-1.458 3.25-3.25a3.23 3.23 0 0 0-1.045-2.373z"}))},f=function(){var e=a();return wp.element.createElement("svg",{className:"dashicon",role:"img",focusable:"false",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 32 38"},wp.element.createElement(o,{id:e}),wp.element.createElement("path",{fill:"url(#"+e+")",d:"M0 0h32v38H0V0zm3 3v32h26V3H3zm2 2h22v7H5V5zm0 9h14v19H5V14zm16 19V14h6v19h-6zM6 6v5h20V6H6z"}))},y=function(){var e=a();return wp.element.createElement("svg",{className:"dashicon",role:"img",focusable:"false",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 1024 896"},wp.element.createElement(o,{id:e}),wp.element.createElement("path",{fill:"url(#"+e+")",d:"M960 0H64Q38 0 19 19T0 64v768q0 26 19 45t45 19h896q26 0 45-19t19-45V64q0-26-19-45T960 0zM64 64h896v714L724 430q-7-12-21-14t-25 7L524 548 350 305q-10-14-28-13t-26 17L64 757V64zm855 768H97l231-447 184 255 179-145zM737 190q13 0 22.5 9.5T769 222t-9.5 22.5T737 254t-22.5-9.5T705 222t9.5-22.5T737 190zm0-64q-40 0-68 28t-28 68 28 68 68 28 68-28 28-68-28-68-68-28z"}))},v=function(){var e=a();return wp.element.createElement("svg",{className:"dashicon",role:"img",focusable:"false",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 38 26"},wp.element.createElement(o,{id:e}),wp.element.createElement("path",{fill:"url(#"+e+")",d:"M2 0h34a2 2 0 0 1 2 2v22a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm5.77 4C6.24 4 5 5.511 5 7.375v11.25C5 20.489 6.24 22 7.77 22h15.46c1.53 0 2.77-1.511 2.77-3.375V16l6 5h1V5h-1l-6 5V7.375C26 5.511 24.76 4 23.23 4H7.77z"}))},C=function(){var e=a();return wp.element.createElement("svg",{className:"dashicon",role:"img",focusable:"false",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 448 448"},wp.element.createElement(o,{id:e}),wp.element.createElement("path",{fill:"url(#"+e+")",d:"M416 32V0H256L0 288l160 160 23.471-23.904L208 448l240-272V32h-32zM160 425.371L22.39 288 262.621 16H400v137.377l-216.555 247.99-11.34 11.363L160 425.371zm272-255.994L208 425.371l-13.182-12.65L416 160V48h16v121.377z"}),wp.element.createElement("path",{d:"M320 128c17.645 0 32-14.355 32-32s-14.355-32-32-32-32 14.355-32 32 14.355 32 32 32zm0-48c8.836 0 16 7.163 16 16s-7.164 16-16 16-16-7.163-16-16 7.164-16 16-16z"}))}},function(e,t){var n={utf8:{stringToBytes:function(e){return n.bin.stringToBytes(unescape(encodeURIComponent(e)))},bytesToString:function(e){return decodeURIComponent(escape(n.bin.bytesToString(e)))}},bin:{stringToBytes:function(e){for(var t=[],n=0;n<e.length;n++)t.push(255&e.charCodeAt(n));return t},bytesToString:function(e){for(var t=[],n=0;n<e.length;n++)t.push(String.fromCharCode(e[n]));return t.join("")}}};e.exports=n},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});n(3),n(6),n(9),n(12),n(15),n(21),n(24),n(27),n(30),n(33),n(36),n(39),n(42),n(45),n(49),n(52),n(55),n(58)},function(e,t,n){"use strict";var l=n(4),o=(n.n(l),n(5)),r=(n.n(o),n(0)),a=wp.i18n.__,c=wp.components,i=c.RangeControl,u=(c.TextControl,wp.blocks),m=u.registerBlockType,s=u.InspectorControls,p=function(e){var t=e.attributes.height;return wp.element.createElement("div",{style:{height:t+"px"}})},b=function(e){var t=e.isSelected,n=e.attributes.height;return[!!t&&wp.element.createElement(s,{key:"inspector"},wp.element.createElement(i,{label:a("Height"),value:n,min:"30",max:"200",onChange:function(t){e.setAttributes({height:t})}})),wp.element.createElement("div",{className:e.className,style:{height:n+"px"}})]};m("ugb/spacer",{title:a("Spacer"),icon:r.l,category:"layout",keywords:[a("Spacer"),a("Stackable")],attributes:{height:{default:50,type:"number"}},edit:b,save:p})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(7),o=(n.n(l),n(8)),r=(n.n(o),n(0)),a=wp.i18n.__,c=wp.blocks,i=c.registerBlockType,u=c.InspectorControls,m=c.ColorPalette,s=c.BlockControls,p=c.AlignmentToolbar,b=wp.components,d=b.PanelColor,g=b.RangeControl,h=function(e){var t=e.attributes,n=t.height,l=t.width,o=t.color,r=t.alignment;return wp.element.createElement("div",{className:"ugb-divider"},wp.element.createElement("hr",{align:r,style:{backgroundColor:o,width:l+"%",height:n}}))},w=function(e){var t=e.isSelected,n=e.attributes,l=n.height,o=n.width,r=n.color,c=n.alignment;return[t&&wp.element.createElement(s,{key:"controls"},wp.element.createElement(p,{value:c,onChange:function(t){e.setAttributes({alignment:t})}})),t&&wp.element.createElement(u,{key:"inspector"},wp.element.createElement(g,{label:a("Height"),value:l,min:"1",max:"10",onChange:function(t){e.setAttributes({height:t})}}),wp.element.createElement(g,{label:a("Width"),value:o,min:"10",max:"100",step:"0.1",onChange:function(t){e.setAttributes({width:t})}}),wp.element.createElement(d,{title:a("Divider Color"),colorValue:r,initialOpen:!1},wp.element.createElement(m,{value:r,onChange:function(t){return e.setAttributes({color:t})}}))),wp.element.createElement("div",{className:"ugb-divider",style:{paddingTop:8,paddingBottom:8}},wp.element.createElement("hr",{align:c,style:{marginTop:0,marginBottom:0,backgroundColor:r,width:o+"%",height:l}}))]};i("ugb/divider",{title:a("Divider"),icon:r.c,category:"layout",keywords:[a("Divider"),a("Stackable")],attributes:{height:{default:1,type:"number"},width:{default:50,type:"number"},color:{type:"string",default:"#dddddd"},alignment:{type:"string",default:"center"}},edit:w,save:h})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(10),o=(n.n(l),n(11)),r=(n.n(o),n(0)),a=wp.i18n.__,c=wp.blocks,i=c.registerBlockType,u=c.InspectorControls,m=c.BlockControls,s=c.AlignmentToolbar,p=c.RichText,b=c.ColorPalette,d=c.UrlInput,g=wp.components,h=g.PanelColor,w=g.Dashicon,f=g.IconButton,y=g.SelectControl,v=g.RangeControl,C=function(e){var t=e.isSelected,n=(e.className,e.setAttributes),l=e.attributes,o=l.url,r=l.text,c=l.color,i=l.textColor,g=l.size,C=l.textAlignment,E=l.cornerButtonRadius,x=[{value:"small",label:a("Small")},{value:"normal",label:a("Normal")},{value:"medium",label:a("Medium")},{value:"large",label:a("Large")}];return[t&&wp.element.createElement(m,{key:"controls"},wp.element.createElement(s,{value:C,onChange:function(e){n({textAlignment:e})}})),t&&wp.element.createElement(u,{key:"inspector"},wp.element.createElement(y,{label:a("Size"),value:g,options:x.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){n({size:e})}}),wp.element.createElement(v,{label:a("Corner Radius"),value:E,min:"1",max:"50",onChange:function(e){return n({cornerButtonRadius:e})}}),wp.element.createElement(h,{title:a("Background Color"),colorValue:c,initialOpen:!1},wp.element.createElement(b,{value:c,onChange:function(e){return n({color:e})}})),wp.element.createElement(h,{title:a("Text Color"),colorValue:i,initialOpen:!1},wp.element.createElement(b,{value:i,onChange:function(e){return n({textColor:e})}}))),wp.element.createElement("span",{key:"button",className:"wp-block-button ugb-button-"+C},wp.element.createElement(p,{tagName:"span",placeholder:a("Enter Text"),value:r,onChange:function(e){return n({text:e})},formattingControls:["bold","italic","strikethrough"],className:"wp-ugb-button ugb-button-"+g,style:{backgroundColor:c,color:i,borderRadius:E+"px"},isSelected:t,keepPlaceholderOnFocus:!0})),t&&wp.element.createElement("form",{key:"form-link",onSubmit:function(e){return e.preventDefault()},className:"blocks-button__inline-link ugb-button-"+C},wp.element.createElement(w,{icon:"admin-links"}),wp.element.createElement(d,{value:o,onChange:function(e){return n({url:e})}}),wp.element.createElement(f,{icon:"editor-break",label:a("Apply"),type:"submit"}))]},E=function(e){var t=e.attributes,n=t.url,l=t.text,o=t.textAlignment,r=t.color,a=t.textColor,c=t.size,i=t.cornerButtonRadius,u={backgroundColor:r,color:a,borderRadius:i+"px"};return wp.element.createElement("div",{className:"ugb-button-"+o},wp.element.createElement("a",{href:n,className:"wp-ugb-button ugb-button-"+c,style:u},l))};i("ugb/button",{title:a("Button"),icon:r.a,category:"layout",keywords:[a("Button"),a("Stackable")],attributes:{url:{type:"string",source:"attribute",selector:"a",attribute:"href"},text:{type:"array",source:"children",selector:"a"},textAlignment:{type:"string",default:"center"},color:{type:"string",default:"#2091e1"},textColor:{type:"string",default:"#ffffff"},size:{type:"string",default:"normal"},cornerButtonRadius:{type:"number",default:4}},edit:C,save:E})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(13),o=(n.n(l),n(14)),r=(n.n(o),n(0)),a=wp.i18n.__,c=wp.blocks,i=c.registerBlockType,u=c.InspectorControls,m=c.BlockControls,s=c.RichText,p=c.AlignmentToolbar,b=c.ColorPalette,d=c.UrlInput,g=wp.components,h=g.PanelColor,w=g.IconButton,f=g.Dashicon,y=g.SelectControl,v=g.RangeControl,C=function(e){var t=e.isSelected,n=e.setAttributes,l=e.attributes,o=l.url,r=l.text,c=l.color,i=l.size,g=l.textAlignment,C=l.cornerButtonRadius,E=l.borderThickness,x=[{value:"small",label:a("Small")},{value:"normal",label:a("Normal ")},{value:"medium",label:a("Medium")},{value:"large",label:a("Large")}];return[t&&wp.element.createElement(m,{key:"controls"},wp.element.createElement(p,{value:g,onChange:function(e){n({textAlignment:e})}})),wp.element.createElement("span",{key:"button",className:"wp-block-button ugb-button-"+g},wp.element.createElement(s,{tagName:"span",placeholder:a("Enter Text"),value:r,onChange:function(e){return n({text:e})},formattingControls:["bold","italic","strikethrough"],className:"wp-ugb-button ugb-button-"+i+" ugb-ghost-button",style:{borderColor:c,color:c,borderRadius:C+"px",borderWidth:E+"px"},isSelected:t,keepPlaceholderOnFocus:!0}),t&&wp.element.createElement(u,{key:"inspector"},wp.element.createElement(y,{label:a("Size"),value:i,options:x.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){n({size:e})}}),wp.element.createElement(v,{label:a("Corner Radius"),value:C,min:"1",max:"50",onChange:function(e){return n({cornerButtonRadius:e})}}),wp.element.createElement(v,{label:a("Border Thickness"),value:E,min:"1",max:"10",onChange:function(e){return n({borderThickness:e})}}),wp.element.createElement(h,{title:a("Button Color"),colorValue:c,initialOpen:!1},wp.element.createElement(b,{value:c,onChange:function(e){return n({color:e})}})))),t&&wp.element.createElement("form",{key:"form-link",onSubmit:function(e){return e.preventDefault()},className:"blocks-button__inline-link ugb-button-"+g},wp.element.createElement(f,{icon:"admin-links"}),wp.element.createElement(d,{value:o,onChange:function(e){return n({url:e})}}),wp.element.createElement(w,{icon:"editor-break",label:a("Apply"),type:"submit"}))]},E=function(e){var t=e.attributes,n=t.url,l=t.text,o=t.textAlignment,r=t.color,a=t.size,c=t.cornerButtonRadius,i=t.borderThickness,u={borderColor:r,color:r,borderRadius:c+"px",borderWidth:i+"px"};return wp.element.createElement("div",{className:"ugb-button-"+o},wp.element.createElement("a",{href:n,className:"wp-ugb-button ugb-button-"+a+" ugb-ghost-button",style:u},l))};i("ugb/ghost-button",{title:a("Ghost Button"),icon:r.e,category:"layout",keywords:[a("Ghost Button"),a("Stackable")],attributes:{url:{type:"string",source:"attribute",selector:"a",attribute:"href"},text:{type:"array",source:"children",selector:"a"},textAlignment:{type:"string",default:"center"},color:{type:"string"},textColor:{type:"string"},size:{type:"string",default:"normal"},cornerButtonRadius:{type:"number",default:"4"},borderThickness:{type:"number",default:"1"}},edit:C,save:E})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(16),o=(n.n(l),n(17)),r=(n.n(o),n(18)),a=n.n(r),c=n(0),i=wp.i18n.__,u=wp.components,m=u.withState,s=u.SelectControl,p=u.PanelColor,b=u.ToggleControl,d=wp.blocks,g=d.registerBlockType,h=d.InspectorControls,w=d.RichText,f=d.ColorPalette,y=d.BlockControls,v=function(e){var t=[{value:"success",label:i("Success")},{value:"error",label:i("Error")},{value:"warning",label:i("Warning")},{value:"info",label:i("Information")}],n=e.isSelected,l=e.editable,o=e.setState,r=e.setAttributes,a=(e.className,e.attributes),c=a.text,u=a.color,m=a.textColor,d=a.notifType,g=a.dismissible;return[n&&wp.element.createElement(y,{key:"controls"}),wp.element.createElement("div",{key:"editable",className:"ugb-notification type-"+d+" dismissible-"+g},g&&wp.element.createElement("span",{key:"button",className:"close-button"},wp.element.createElement("svg",{viewBox:"0 0 28.3 28.3",style:{fill:m}},wp.element.createElement("path",{d:"M52.4-166.2c3.2,0,3.2-5,0-5C49.2-171.2,49.2-166.2,52.4-166.2L52.4-166.2z"}),wp.element.createElement("path",{d:"M16.8,13.9L26.9,3.8c0.6-0.6,0.6-1.5,0-2.1s-1.5-0.6-2.1,0L14.7,11.8L4.6,1.7C4,1.1,3.1,1.1,2.5,1.7s-0.6,1.5,0,2.1l10.1,10.1L2.5,24c-0.6,0.6-0.6,1.5,0,2.1c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4L14.7,16l10.1,10.1c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4c0.6-0.6,0.6-1.5,0-2.1L16.8,13.9z"}))),wp.element.createElement(w,{tagName:"p",placeholder:e.attributes.text.default,value:c,isSelected:n&&"content"===l,onFocus:function(e){return function(){o({editable:e})}}("content"),onChange:function(e){return r({text:e})},className:"wp-ugb-notif notif-"+d,style:{backgroundColor:u,color:m}}),n&&wp.element.createElement(h,{key:"inspector"},wp.element.createElement(b,{label:i("Dismissible"),checked:g,onChange:function(){return r({dismissible:!g})}}),wp.element.createElement(s,{label:i("Notification Type"),value:d,options:t.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){r({notifType:e})}}),wp.element.createElement(p,{title:i("Background Color"),colorValue:u,initialOpen:!1},wp.element.createElement(f,{value:u,onChange:function(e){return r({color:e})}})),wp.element.createElement(p,{title:i("Text Color"),colorValue:m,initialOpen:!1},wp.element.createElement(f,{value:m,onChange:function(e){return r({textColor:e})}}))))]},C=function(e){var t=e.attributes,n=t.text,l=t.color,o=t.textColor,r=t.notifType,c=t.dismissible,i={backgroundColor:l,color:o},u=a()(n+r).substr(0,6);return wp.element.createElement("div",{className:"ugb-notification type-"+r+" dismissible-"+c,"data-uid":u},c&&wp.element.createElement("span",{key:"button",className:"close-button"},wp.element.createElement("svg",{viewBox:"0 0 28.3 28.3",style:{fill:o}},wp.element.createElement("path",{d:"M52.4-166.2c3.2,0,3.2-5,0-5C49.2-171.2,49.2-166.2,52.4-166.2L52.4-166.2z"}),wp.element.createElement("path",{d:"M16.8,13.9L26.9,3.8c0.6-0.6,0.6-1.5,0-2.1s-1.5-0.6-2.1,0L14.7,11.8L4.6,1.7C4,1.1,3.1,1.1,2.5,1.7s-0.6,1.5,0,2.1l10.1,10.1L2.5,24c-0.6,0.6-0.6,1.5,0,2.1c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4L14.7,16l10.1,10.1c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4c0.6-0.6,0.6-1.5,0-2.1L16.8,13.9z"}))),wp.element.createElement("p",{className:"wp-ugb-notif notif-"+r,style:i},n))};g("ugb/notification",{title:i("Notification"),icon:c.g,category:"layout",keywords:[i("Notification"),i("Stackable")],attributes:{text:{type:"array",source:"children",selector:"p",default:i("This is an informational alert, usually used for successful subscriptions, promo announcements, and the like.")},color:{type:"string"},textColor:{type:"string"},notifType:{type:"string",default:"success"},dismissible:{type:"boolean",default:!1}},edit:m({editable:"content"})(v),save:C})},function(e,t){},function(e,t){},function(e,t,n){!function(){var t=n(19),l=n(1).utf8,o=n(20),r=n(1).bin,a=function(e,n){e.constructor==String?e=n&&"binary"===n.encoding?r.stringToBytes(e):l.stringToBytes(e):o(e)?e=Array.prototype.slice.call(e,0):Array.isArray(e)||(e=e.toString());for(var c=t.bytesToWords(e),i=8*e.length,u=1732584193,m=-271733879,s=-1732584194,p=271733878,b=0;b<c.length;b++)c[b]=16711935&(c[b]<<8|c[b]>>>24)|4278255360&(c[b]<<24|c[b]>>>8);c[i>>>5]|=128<<i%32,c[14+(i+64>>>9<<4)]=i;for(var d=a._ff,g=a._gg,h=a._hh,w=a._ii,b=0;b<c.length;b+=16){var f=u,y=m,v=s,C=p;u=d(u,m,s,p,c[b+0],7,-680876936),p=d(p,u,m,s,c[b+1],12,-389564586),s=d(s,p,u,m,c[b+2],17,606105819),m=d(m,s,p,u,c[b+3],22,-1044525330),u=d(u,m,s,p,c[b+4],7,-176418897),p=d(p,u,m,s,c[b+5],12,1200080426),s=d(s,p,u,m,c[b+6],17,-1473231341),m=d(m,s,p,u,c[b+7],22,-45705983),u=d(u,m,s,p,c[b+8],7,1770035416),p=d(p,u,m,s,c[b+9],12,-1958414417),s=d(s,p,u,m,c[b+10],17,-42063),m=d(m,s,p,u,c[b+11],22,-1990404162),u=d(u,m,s,p,c[b+12],7,1804603682),p=d(p,u,m,s,c[b+13],12,-40341101),s=d(s,p,u,m,c[b+14],17,-1502002290),m=d(m,s,p,u,c[b+15],22,1236535329),u=g(u,m,s,p,c[b+1],5,-165796510),p=g(p,u,m,s,c[b+6],9,-1069501632),s=g(s,p,u,m,c[b+11],14,643717713),m=g(m,s,p,u,c[b+0],20,-373897302),u=g(u,m,s,p,c[b+5],5,-701558691),p=g(p,u,m,s,c[b+10],9,38016083),s=g(s,p,u,m,c[b+15],14,-660478335),m=g(m,s,p,u,c[b+4],20,-405537848),u=g(u,m,s,p,c[b+9],5,568446438),p=g(p,u,m,s,c[b+14],9,-1019803690),s=g(s,p,u,m,c[b+3],14,-187363961),m=g(m,s,p,u,c[b+8],20,1163531501),u=g(u,m,s,p,c[b+13],5,-1444681467),p=g(p,u,m,s,c[b+2],9,-51403784),s=g(s,p,u,m,c[b+7],14,1735328473),m=g(m,s,p,u,c[b+12],20,-1926607734),u=h(u,m,s,p,c[b+5],4,-378558),p=h(p,u,m,s,c[b+8],11,-2022574463),s=h(s,p,u,m,c[b+11],16,1839030562),m=h(m,s,p,u,c[b+14],23,-35309556),u=h(u,m,s,p,c[b+1],4,-1530992060),p=h(p,u,m,s,c[b+4],11,1272893353),s=h(s,p,u,m,c[b+7],16,-155497632),m=h(m,s,p,u,c[b+10],23,-1094730640),u=h(u,m,s,p,c[b+13],4,681279174),p=h(p,u,m,s,c[b+0],11,-358537222),s=h(s,p,u,m,c[b+3],16,-722521979),m=h(m,s,p,u,c[b+6],23,76029189),u=h(u,m,s,p,c[b+9],4,-640364487),p=h(p,u,m,s,c[b+12],11,-421815835),s=h(s,p,u,m,c[b+15],16,530742520),m=h(m,s,p,u,c[b+2],23,-995338651),u=w(u,m,s,p,c[b+0],6,-198630844),p=w(p,u,m,s,c[b+7],10,1126891415),s=w(s,p,u,m,c[b+14],15,-1416354905),m=w(m,s,p,u,c[b+5],21,-57434055),u=w(u,m,s,p,c[b+12],6,1700485571),p=w(p,u,m,s,c[b+3],10,-1894986606),s=w(s,p,u,m,c[b+10],15,-1051523),m=w(m,s,p,u,c[b+1],21,-2054922799),u=w(u,m,s,p,c[b+8],6,1873313359),p=w(p,u,m,s,c[b+15],10,-30611744),s=w(s,p,u,m,c[b+6],15,-1560198380),m=w(m,s,p,u,c[b+13],21,1309151649),u=w(u,m,s,p,c[b+4],6,-145523070),p=w(p,u,m,s,c[b+11],10,-1120210379),s=w(s,p,u,m,c[b+2],15,718787259),m=w(m,s,p,u,c[b+9],21,-343485551),u=u+f>>>0,m=m+y>>>0,s=s+v>>>0,p=p+C>>>0}return t.endian([u,m,s,p])};a._ff=function(e,t,n,l,o,r,a){var c=e+(t&n|~t&l)+(o>>>0)+a;return(c<<r|c>>>32-r)+t},a._gg=function(e,t,n,l,o,r,a){var c=e+(t&l|n&~l)+(o>>>0)+a;return(c<<r|c>>>32-r)+t},a._hh=function(e,t,n,l,o,r,a){var c=e+(t^n^l)+(o>>>0)+a;return(c<<r|c>>>32-r)+t},a._ii=function(e,t,n,l,o,r,a){var c=e+(n^(t|~l))+(o>>>0)+a;return(c<<r|c>>>32-r)+t},a._blocksize=16,a._digestsize=16,e.exports=function(e,n){if(void 0===e||null===e)throw new Error("Illegal argument "+e);var l=t.wordsToBytes(a(e,n));return n&&n.asBytes?l:n&&n.asString?r.bytesToString(l):t.bytesToHex(l)}}()},function(e,t){!function(){var t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",n={rotl:function(e,t){return e<<t|e>>>32-t},rotr:function(e,t){return e<<32-t|e>>>t},endian:function(e){if(e.constructor==Number)return 16711935&n.rotl(e,8)|4278255360&n.rotl(e,24);for(var t=0;t<e.length;t++)e[t]=n.endian(e[t]);return e},randomBytes:function(e){for(var t=[];e>0;e--)t.push(Math.floor(256*Math.random()));return t},bytesToWords:function(e){for(var t=[],n=0,l=0;n<e.length;n++,l+=8)t[l>>>5]|=e[n]<<24-l%32;return t},wordsToBytes:function(e){for(var t=[],n=0;n<32*e.length;n+=8)t.push(e[n>>>5]>>>24-n%32&255);return t},bytesToHex:function(e){for(var t=[],n=0;n<e.length;n++)t.push((e[n]>>>4).toString(16)),t.push((15&e[n]).toString(16));return t.join("")},hexToBytes:function(e){for(var t=[],n=0;n<e.length;n+=2)t.push(parseInt(e.substr(n,2),16));return t},bytesToBase64:function(e){for(var n=[],l=0;l<e.length;l+=3)for(var o=e[l]<<16|e[l+1]<<8|e[l+2],r=0;r<4;r++)8*l+6*r<=8*e.length?n.push(t.charAt(o>>>6*(3-r)&63)):n.push("=");return n.join("")},base64ToBytes:function(e){e=e.replace(/[^A-Z0-9+\/]/gi,"");for(var n=[],l=0,o=0;l<e.length;o=++l%4)0!=o&&n.push((t.indexOf(e.charAt(l-1))&Math.pow(2,-2*o+8)-1)<<2*o|t.indexOf(e.charAt(l))>>>6-2*o);return n}};e.exports=n}()},function(e,t){function n(e){return!!e.constructor&&"function"===typeof e.constructor.isBuffer&&e.constructor.isBuffer(e)}function l(e){return"function"===typeof e.readFloatLE&&"function"===typeof e.slice&&n(e.slice(0,0))}e.exports=function(e){return null!=e&&(n(e)||l(e)||!!e._isBuffer)}},function(e,t,n){"use strict";var l=n(22),o=(n.n(l),n(23)),r=(n.n(o),n(0)),a=wp.i18n.__,c=wp.components,i=c.PanelColor,u=c.withState,m=wp.blocks,s=m.registerBlockType,p=m.InspectorControls,b=m.RichText,d=m.ColorPalette,g=function(e){var t=e.isSelected,n=e.setAttributes,l=(e.className,e.attributes),o=l.color,r=l.text,c=l.borderColor;return[wp.element.createElement("blockquote",{key:"quote",className:"ugb-blockquote",style:{borderLeftColor:c}},wp.element.createElement(b,{tagName:"p",className:"ugb-blockquote-text",value:r,onChange:function(e){return n({text:e})},isSelected:t,style:{color:o}})),t&&wp.element.createElement(p,{key:"inspector"},wp.element.createElement(i,{title:a("Text Color"),colorValue:o,initialOpen:!1},wp.element.createElement(d,{value:o,onChange:function(e){return n({color:e})}})),wp.element.createElement(i,{title:a("Border Color"),colorValue:c,initialOpen:!1},wp.element.createElement(d,{value:c,onChange:function(e){return n({borderColor:e})}})))]},h=function(e){var t=e.attributes,n=t.color,l=t.text,o=t.borderColor;return wp.element.createElement("blockquote",{className:"ugb-blockquote",style:{borderLeftColor:o}},wp.element.createElement("p",{style:{color:n}},l))};s("ugb/blockquote",{title:a("Blockquote"),icon:r.k,category:"common",keywords:[a("Blockquote"),a("Stackable")],attributes:{text:{type:"array",source:"children",selector:"p",default:a("It's okay to acknowledge that life can get complicated, but we musn't forget the beauty in its simplicity, too. From the multitude of stars above, to freshly mowed grass in the morning, life is simply wonderful.")},color:{type:"string",default:"#424242"},borderColor:{type:"string",default:"#2091e1"}},edit:u({editable:"content"})(g),save:h})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(25),o=(n.n(l),n(26)),r=(n.n(o),n(0)),a=wp.i18n.__,c=wp.components,i=c.PanelColor,u=c.withState,m=wp.blocks,s=m.registerBlockType,p=m.InspectorControls,b=m.RichText,d=m.ColorPalette,g=function(e){var t=e.isSelected,n=e.setAttributes,l=(e.className,e.attributes),o=l.color,r=l.text,c=l.borderColor;return[wp.element.createElement("blockquote",{key:"quote",className:"ugb-pullquote",style:{borderTopColor:c,borderBottomColor:c}},wp.element.createElement(b,{tagName:"p",className:"ugb-pullquote-text",value:r,onChange:function(e){return n({text:e})},placeholder:a("Write quote\u2026"),formattingControls:["bold","italic","strikethrough","link"],isSelected:t,keepPlaceholderOnFocus:!0,style:{color:o}})),t&&wp.element.createElement(p,{key:"inspector"},wp.element.createElement(i,{title:a("Text Color"),colorValue:o,initialOpen:!1},wp.element.createElement(d,{value:o,onChange:function(e){return n({color:e})}})),wp.element.createElement(i,{title:a("Border Color"),colorValue:c,initialOpen:!1},wp.element.createElement(d,{value:c,onChange:function(e){return n({borderColor:e})}})))]},h=function(e){var t=e.attributes,n=t.color,l=t.text,o=t.borderColor;return wp.element.createElement("blockquote",{className:"ugb-pullquote",style:{borderTopColor:o,borderBottomColor:o}},wp.element.createElement("p",{style:{color:n}},l))};s("ugb/pullquote",{title:a("Pullquote"),icon:r.k,category:"formatting",keywords:[a("Pullquote"),a("Stackable")],attributes:{text:{type:"array",source:"children",selector:"p",default:a("It's okay to acknowledge that life can get complicated, but we musn't forget the beauty in its simplicity, too. From the multitude of stars above, to freshly mowed grass in the morning, life is simply wonderful.")},color:{type:"string",default:"#2091e1"},borderColor:{type:"string",default:"#2091e1"}},edit:u({editable:"content"})(g),save:h})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(28),o=(n.n(l),n(29)),r=(n.n(o),n(0)),a=wp.i18n.__,c=wp.components,i=c.PanelColor,u=c.Dashicon,m=c.IconButton,s=c.withState,p=c.SelectControl,b=c.RangeControl,d=wp.blocks,g=d.registerBlockType,h=d.InspectorControls,w=(d.BlockControls,d.AlignmentToolbar,d.RichText),f=d.ColorPalette,y=d.UrlInput,v=function(e){var t=e.isSelected,n=e.editable,l=e.setState,o=(e.className,e.setAttributes),r=e.attributes,c=r.url,s=r.buttonText,d=r.ctaTitle,g=r.bodyText,v=r.color,C=r.textColor,E=r.size,x=r.borderButtonRadius,T=r.bodyTextColor,k=r.titleColor,N=r.bgColor,S=[{value:"small",label:a("Small")},{value:"normal",label:a("Normal")},{value:"medium",label:a("Medium")},{value:"large",label:a("Large")}],B=function(e){return function(){l({editable:e})}};return[wp.element.createElement("div",{key:"editable",className:"ugb-cta",style:{backgroundColor:N}},wp.element.createElement(w,{className:"ugb-cta-title",tagName:"h3",placeholder:a("Add Title"),value:d,onChange:function(e){return o({ctaTitle:e})},isSelected:t&&"ctaTitle"===n,onFocus:B("ctaTitle"),keepPlaceholderOnFocus:!0,style:{color:k}}),wp.element.createElement(w,{tagName:"p",value:g,className:"ugb-cta-bodyText",onChange:function(e){return o({bodyText:e})},isSelected:t&&"bodyText"===n,onFocus:B("bodyText"),placeholder:a("Write body text\u2026"),style:{color:T}}),wp.element.createElement("span",{key:"button",className:"wp-block-button ugb-cta-button"},wp.element.createElement(w,{tagName:"span",placeholder:a("Add Text"),value:s,onChange:function(e){return o({buttonText:e})},isSelected:t&&"buttonText"===n,onFocus:B("buttonText"),className:"wp-ugb-button ugb-button-"+E,style:{backgroundColor:v,color:C,borderRadius:x+"px"},keepPlaceholderOnFocus:!0}),t&&wp.element.createElement(h,{key:"inspector"},wp.element.createElement(p,{label:a("Button Size"),value:E,options:S.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){o({size:e})}}),wp.element.createElement(b,{label:a("Button Border Radius"),value:x,min:"1",max:"50",onChange:function(e){return o({borderButtonRadius:e})}}),wp.element.createElement(i,{title:a("Title Color"),colorValue:k,initialOpen:!1},wp.element.createElement(f,{value:v,onChange:function(e){return o({titleColor:e})}})),wp.element.createElement(i,{title:a("Body Text Color"),colorValue:T,initialOpen:!1},wp.element.createElement(f,{value:v,onChange:function(e){return o({bodyTextColor:e})}})),wp.element.createElement(i,{title:a("Button Background Color"),colorValue:v,initialOpen:!1},wp.element.createElement(f,{value:v,onChange:function(e){return o({color:e})}})),wp.element.createElement(i,{title:a("Button Text Color"),colorValue:C,initialOpen:!1},wp.element.createElement(f,{value:C,onChange:function(e){return o({textColor:e})}})),wp.element.createElement(i,{title:a("Background Color"),colorValue:N,initialOpen:!1},wp.element.createElement(f,{value:N,onChange:function(e){return o({bgColor:e})}})))),t&&wp.element.createElement("form",{key:"form-link",onSubmit:function(e){return e.preventDefault()},className:"blocks-button__inline-link"},wp.element.createElement(u,{icon:"admin-links"}),wp.element.createElement(y,{value:c,onChange:function(e){return o({url:e})}}),wp.element.createElement(m,{icon:"editor-break",label:a("Apply"),type:"submit"})))]},C=function(e){var t=e.attributes,n=t.url,l=t.buttonText,o=t.ctaTitle,r=t.bodyText,a=t.color,c=t.textColor,i=t.size,u=t.borderButtonRadius,m=t.bodyTextColor,s=t.titleColor,p=t.bgColor,b={backgroundColor:a,color:c,borderRadius:u+"px"};return wp.element.createElement("div",{className:"ugb-cta",style:{backgroundColor:p}},o&&!!o.length&&wp.element.createElement("h3",{className:"ugb-cta-title",style:{color:s}},o),r&&!!r.length&&wp.element.createElement("p",{className:"ugb-cta-bodyText",style:{color:m}},r),l&&!!l.length&&wp.element.createElement("a",{href:n,className:"wp-ugb-button ugb-cta-button ugb-button-"+i,style:b},l))};g("ugb/cta",{title:a("Call to Action"),icon:r.b,category:"layout",keywords:[a("Call to Action"),a("Stackable"),a("CTA")],attributes:{url:{type:"string",source:"attribute",selector:"a",attribute:"href"},ctaTitle:{type:"array",source:"children",selector:"h3",default:a("Get Started Today")},bodyText:{type:"array",source:"children",selector:"p",default:a("Get Stackable: Ultimate Gutenberg Blocks today.\xa0 Apart from adding new blocks, it gives Gutenberg users more options and settings to tinker with, expanding Gutenberg\u2019s functionality.")},buttonText:{type:"array",source:"children",selector:"a"},color:{type:"string",default:"#2091e1"},textColor:{type:"string",default:"#ffffff"},titleColor:{type:"string"},bodyTextColor:{type:"string"},bgColor:{type:"string"},size:{type:"string",default:"normal"},borderButtonRadius:{type:"number",default:4}},edit:s({editable:"content"})(v),save:C})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(31),o=(n.n(l),n(32)),r=(n.n(o),n(0)),a=wp.i18n.__,c=wp.components,i=c.PanelColor,u=c.Button,m=c.withState,s=c.SelectControl,p=wp.blocks,b=p.registerBlockType,d=p.InspectorControls,g=p.RichText,h=p.ColorPalette,w=p.MediaUpload,f=p.BlockControls,y=(p.AlignmentToolbar,function(e){var t=e.isSelected,n=e.editable,l=e.setState,o=(e.className,e.setAttributes),r=e.attributes,c=r.testimonialTitle,m=r.testimonialTitleTwo,p=r.testimonialTitleThree,b=r.body,y=r.bodyTwo,v=r.bodyThree,C=r.position,E=r.positionTwo,x=r.positionThree,T=(r.href,r.hrefTwo,r.hrefThree,r.mediaID),k=r.mediaIDTwo,N=r.mediaIDThree,S=r.mediaURL,B=r.mediaURLTwo,L=r.mediaURLThree,F=r.columns,O=r.titleColor,I=r.posColor,A=r.bodyTextColor,P=r.iconColor,R=[{value:"1",label:a("One Column")},{value:"2",label:a("Two Column")},{value:"3",label:a("Three Column")}],z=function(e){return function(){l({editable:e})}};return[t&&wp.element.createElement(f,null),t&&wp.element.createElement(d,{key:"inspector"},wp.element.createElement(s,{label:a("Column Number"),value:F,options:R.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){o({columns:e})}}),wp.element.createElement(i,{title:a("Title Color"),colorValue:O,initialOpen:!1},wp.element.createElement(h,{value:O,onChange:function(e){return o({titleColor:e})}})),wp.element.createElement(i,{title:a("Position Color"),colorValue:I,initialOpen:!1},wp.element.createElement(h,{value:I,onChange:function(e){return o({posColor:e})}})),wp.element.createElement(i,{title:a("Body Text Color"),colorValue:A,initialOpen:!1},wp.element.createElement(h,{value:A,onChange:function(e){return o({bodyTextColor:e})}})),wp.element.createElement(i,{title:a("Icon Color"),colorValue:P,initialOpen:!1},wp.element.createElement(h,{value:P,onChange:function(e){return o({iconColor:e})}}))),wp.element.createElement("div",{key:"editable",className:"ugb-testimonial column-"+F},wp.element.createElement("div",{className:"ugb-testimonial-column-one"},wp.element.createElement("div",null,wp.element.createElement(w,{onSelect:function(e){return o({mediaURL:e.url,mediaID:e.id})},type:"image",value:T,render:function(e){return wp.element.createElement(u,{className:T?"":"button button-large",onClick:e.open},T?wp.element.createElement("div",{className:"testimonial-image",style:{backgroundImage:"url("+S+")"}}):a("Upload Image"))}})),wp.element.createElement(g,{tagName:"h4",value:c,onChange:function(e){return o({testimonialTitle:e})},isSelected:t&&"testimonialTitle"===n,onFocus:z("testimonialTitle"),style:{color:O},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:C,className:"ugb-testimonial-position",onChange:function(e){return o({position:e})},isSelected:t&&"position"===n,onFocus:z("position"),style:{color:I},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:b,className:"ugb-testimonial-body",onChange:function(e){return o({body:e})},isSelected:t&&"body"===n,onFocus:z("body"),style:{color:A},keepPlaceholderOnFocus:!0})),wp.element.createElement("div",{className:"ugb-testimonial-column-two"},wp.element.createElement("div",null,wp.element.createElement(w,{onSelect:function(e){return o({mediaURLTwo:e.url,mediaIDTwo:e.id})},type:"image",value:k,render:function(e){return wp.element.createElement(u,{className:k?"":"button button-large",onClick:e.open},k?wp.element.createElement("div",{className:"testimonial-image",style:{backgroundImage:"url("+B+")"}}):a("Upload Image"))}})),wp.element.createElement(g,{tagName:"h4",value:m,onChange:function(e){return o({testimonialTitleTwo:e})},isSelected:t&&"testimonialTitleTwo"===n,onFocus:z("testimonialTitleTwo"),style:{color:O},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:E,className:"ugb-testimonial-position-two",onChange:function(e){return o({positionTwo:e})},isSelected:t&&"positionTwo"===n,onFocus:z("positionTwo"),style:{color:I},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:y,className:"ugb-testimonial-body-two",onChange:function(e){return o({bodyTwo:e})},isSelected:t&&"bodyTwo"===n,onFocus:z("bodyTwo"),style:{color:A},keepPlaceholderOnFocus:!0})),wp.element.createElement("div",{className:"ugb-testimonial-column-three"},wp.element.createElement("div",null,wp.element.createElement(w,{onSelect:function(e){return o({mediaURLThree:e.url,mediaIDThree:e.id})},type:"image",value:N,render:function(e){return wp.element.createElement(u,{className:N?"":"button button-large",onClick:e.open},N?wp.element.createElement("div",{className:"testimonial-image",style:{backgroundImage:"url("+L+")"}}):a("Upload Image"))}})),wp.element.createElement(g,{tagName:"h4",value:p,onChange:function(e){return o({testimonialTitleThree:e})},isSelected:t&&"testimonialTitleThree"===n,onFocus:z("testimonialTitleThree"),style:{color:O},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:x,className:"ugb-testimonial-position-three",onChange:function(e){return o({positionThree:e})},isSelected:t&&"positionThree"===n,onFocus:z("positionThree"),style:{color:I},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:v,className:"ugb-testimonial-body-three",onChange:function(e){return o({bodyThree:e})},isSelected:t&&"bodyThree"===n,onFocus:z("bodyThree"),style:{color:A},keepPlaceholderOnFocus:!0})))]}),v=function(e){var t=e.attributes,n=t.testimonialTitle,l=t.testimonialTitleTwo,o=t.testimonialTitleThree,r=t.body,a=t.bodyTwo,c=t.bodyThree,i=t.position,u=t.positionTwo,m=t.positionThree,s=t.mediaURL,p=t.mediaURLTwo,b=t.mediaURLThree,d=(t.mediaID,t.mediaIDTwo,t.mediaIDThree,t.titleColor),g=t.posColor,h=t.bodyTextColor,w=t.iconColor,f=t.columns,y=wp.element.createElement("div",{key:"button",className:"quote-icon"},wp.element.createElement("svg",{viewBox:"0 0 246 187.5",style:{fill:w}},wp.element.createElement("path",{d:"M98.5,0h-93C2.5,0,0,2.5,0,5.5v93c0,3,2.5,5.5,5.5,5.5h39c-1.7,15.5-8.8,50-39,50c-3,0-5.5,2.5-5.5,5.5V182c0,3,2.5,5.5,5.5,5.5c5.2,0,98.5-4.5,98.5-89v-93C104,2.5,101.5,0,98.5,0z"}),wp.element.createElement("path",{d:"M240.5,0h-93c-3,0-5.5,2.5-5.5,5.5v93c0,3,2.5,5.5,5.5,5.5h39c-1.7,15.5-8.8,50-39,50c-3,0-5.5,2.5-5.5,5.5V182c0,3,2.5,5.5,5.5,5.5c5.2,0,98.5-4.5,98.5-89v-93C246,2.5,243.5,0,240.5,0z"}),wp.element.createElement("path",{d:"M161.3-86.3c3.2,0,3.2-5,0-5C158.1-91.3,158.1-86.3,161.3-86.3L161.3-86.3z"})));return wp.element.createElement("div",{className:"ugb-testimonial column-"+f},wp.element.createElement("div",{className:"ugb-testimonial-column-one"},s?wp.element.createElement("div",{className:"testimonial-image",style:{backgroundImage:"url("+s+")"},"data-src":s}):y,n&&!!n.length&&wp.element.createElement("h4",{style:{color:d}},n),i&&!!i.length&&wp.element.createElement("p",{className:"ugb-testimonial-position",style:{color:g}},i),r&&!!r.length&&wp.element.createElement("p",{className:"ugb-testimonial-body",style:{color:h}},r)),f>1&&wp.element.createElement("div",{className:"ugb-testimonial-column-two"},p?wp.element.createElement("div",{className:"testimonial-image",style:{backgroundImage:"url("+p+")"},"data-src":p}):y,l&&!!l.length&&wp.element.createElement("h4",{style:{color:d}},l),u&&!!u.length&&wp.element.createElement("p",{className:"ugb-testimonial-position-two",style:{color:g}},u),a&&!!a.length&&wp.element.createElement("p",{className:"ugb-testimonial-body-two",style:{color:h}},a)),f>2&&wp.element.createElement("div",{className:"ugb-testimonial-column-three"},b?wp.element.createElement("div",{className:"testimonial-image",style:{backgroundImage:"url("+b+")"},"data-src":b}):y,o&&!!o.length&&wp.element.createElement("h4",{style:{color:d}},o),m&&!!m.length&&wp.element.createElement("p",{className:"ugb-testimonial-position-three",style:{color:g}},m),c&&!!c.length&&wp.element.createElement("p",{className:"ugb-testimonial-body-three",style:{color:h}},c)))};b("ugb/testimonial",{title:a("Testimonial"),icon:r.n,category:"common",keywords:[a("Testimonial"),a("Stackable")],attributes:{href:{type:"url"},hrefTwo:{type:"url"},hrefThree:{type:"url"},mediaID:{type:"number"},mediaIDTwo:{type:"number"},mediaIDThree:{type:"number"},mediaURL:{type:"string",source:"attribute",selector:".ugb-testimonial-column-one .testimonial-image",attribute:"data-src"},mediaURLTwo:{type:"string",source:"attribute",selector:".ugb-testimonial-column-two .testimonial-image",attribute:"data-src"},mediaURLThree:{type:"string",source:"attribute",selector:".ugb-testimonial-column-three .testimonial-image",attribute:"data-src"},testimonialTitle:{type:"array",source:"children",selector:".ugb-testimonial-column-one h4",default:a("Ben Adams")},testimonialTitleTwo:{type:"array",source:"children",selector:".ugb-testimonial-column-two h4",default:a("Alex Johnson")},testimonialTitleThree:{type:"array",source:"children",selector:".ugb-testimonial-column-three h4",default:a("Sammy Simpson")},position:{type:"array",source:"children",selector:".ugb-testimonial-position",default:a("Founder")},positionTwo:{type:"array",source:"children",selector:".ugb-testimonial-position-two",default:a("Editor")},positionThree:{type:"array",source:"children",selector:".ugb-testimonial-position-three",default:a("Programmer")},body:{type:"array",source:"children",selector:".ugb-testimonial-body",default:a("Stackable: Ultimate Blocks from Gutenberg has all the blocks I need to make a great webpage.")},bodyTwo:{type:"array",source:"children",selector:".ugb-testimonial-body-two",default:a("Stackable: Ultimate Blocks from Gutenberg has all the blocks I need to make a great webpage.")},bodyThree:{type:"array",source:"children",selector:".ugb-testimonial-body-three",default:a("Stackable: Ultimate Blocks from Gutenberg has all the blocks I need to make a great webpage.")},titleColor:{type:"string"},posColor:{type:"string"},bodyTextColor:{type:"string"},iconColor:{type:"string"},columns:{type:"select",default:"1"}},edit:m({editable:"content"})(y),save:v})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(34),o=(n.n(l),n(35)),r=(n.n(o),n(0)),a=wp.i18n.__,c=wp.components,i=c.PanelColor,u=c.Button,m=c.SelectControl,s=(c.TextControl,c.withState),p=wp.blocks,b=p.registerBlockType,d=p.InspectorControls,g=p.RichText,h=p.ColorPalette,w=p.MediaUpload,f=p.BlockControls,y=(p.AlignmentToolbar,function(e){var t=e.isSelected,n=e.editable,l=e.setState,o=(e.className,e.setAttributes),r=e.attributes,c=r.name,s=r.nameTwo,p=r.nameThree,b=r.des,y=r.desTwo,v=r.desThree,C=r.position,E=r.positionTwo,x=r.positionThree,T=(r.href,r.hrefTwo,r.hrefThree,r.mediaID),k=r.mediaIDTwo,N=r.mediaIDThree,S=r.mediaURL,B=r.mediaURLTwo,L=r.mediaURLThree,F=r.columns,O=r.nameColor,I=r.posColor,A=r.desColor,P=r.iconColor,R=r.shapes,z=[{value:"1",label:a("One Column")},{value:"2",label:a("Two Column")},{value:"3",label:a("Three Column")}],V=[{value:"square",label:a("Square")},{value:"circle",label:a("Circle")}],M=function(e){return function(){l({editable:e})}};return[t&&wp.element.createElement(f,{key:"controls"}),t&&wp.element.createElement(d,{key:"inspector"},wp.element.createElement(m,{label:a("Image Shape"),value:R,options:V.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){o({shapes:e})}}),wp.element.createElement(m,{label:a("Column Number"),value:F,options:z.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){o({columns:e})}}),wp.element.createElement(i,{title:a("Name Color"),colorValue:O,initialOpen:!1},wp.element.createElement(h,{value:O,onChange:function(e){return o({nameColor:e})}})),wp.element.createElement(i,{title:a("Position Color"),colorValue:I,initialOpen:!1},wp.element.createElement(h,{value:I,onChange:function(e){return o({posColor:e})}})),wp.element.createElement(i,{title:a("Description Color"),colorValue:A,initialOpen:!1},wp.element.createElement(h,{value:A,onChange:function(e){return o({desColor:e})}})),wp.element.createElement(i,{title:a("Icon Color"),colorValue:P,initialOpen:!1},wp.element.createElement(h,{value:P,onChange:function(e){return o({iconColor:e})}}))),wp.element.createElement("div",{key:"editable",className:"ugb-team-member column-"+F+" image-"+R},wp.element.createElement("div",{className:"ugb-team-member-column-one"},wp.element.createElement("div",null,wp.element.createElement(w,{onSelect:function(e){return o({mediaURL:e.url,mediaID:e.id})},type:"image",value:T,render:function(e){return wp.element.createElement(u,{className:T?"":"button button-large",onClick:e.open},T?wp.element.createElement("div",{className:"team-member-image",style:{backgroundImage:"url("+S+")"}}):a("Upload Image"))}})),wp.element.createElement(g,{tagName:"h4",value:c,onChange:function(e){return o({name:e})},isSelected:t&&"name"===n,onFocus:M("name"),style:{color:O},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:C,className:"ugb-team-member-position",onChange:function(e){return o({position:e})},isSelected:t&&"position"===n,onFocus:M("position"),style:{color:I},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:b,className:"ugb-team-member-des",onChange:function(e){return o({des:e})},isSelected:t&&"des"===n,onFocus:M("des"),style:{color:A},keepPlaceholderOnFocus:!0})),wp.element.createElement("div",{className:"ugb-team-member-column-two"},wp.element.createElement("div",null,wp.element.createElement(w,{onSelect:function(e){return o({mediaURLTwo:e.url,mediaIDTwo:e.id})},type:"image",value:k,render:function(e){return wp.element.createElement(u,{className:k?"":"button button-large",onClick:e.open},k?wp.element.createElement("div",{className:"team-member-image",style:{backgroundImage:"url("+B+")"}}):a("Upload Image"))}})),wp.element.createElement(g,{tagName:"h4",value:s,onChange:function(e){return o({nameTwo:e})},isSelected:t&&"nameTwo"===n,onFocus:M("nameTwo"),style:{color:O},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:E,className:"ugb-team-member-position",onChange:function(e){return o({positionTwo:e})},isSelected:t&&"positionTwo"===n,onFocus:M("positionTwo"),style:{color:I},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:y,className:"ugb-team-member-des-two",onChange:function(e){return o({desTwo:e})},isSelected:t&&"desTwo"===n,onFocus:M("desTwo"),style:{color:A},keepPlaceholderOnFocus:!0})),wp.element.createElement("div",{className:"ugb-team-member-column-three"},wp.element.createElement("div",null,wp.element.createElement(w,{onSelect:function(e){return o({mediaURLThree:e.url,mediaIDThree:e.id})},type:"image",value:N,render:function(e){return wp.element.createElement(u,{className:N?"":"button button-large",onClick:e.open},N?wp.element.createElement("div",{className:"team-member-image",style:{backgroundImage:"url("+L+")"}}):a("Upload Image"))}})),wp.element.createElement(g,{tagName:"h4",value:p,onChange:function(e){return o({nameThree:e})},isSelected:t&&"nameThree"===n,onFocus:M("nameThree"),style:{color:O},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:x,className:"ugb-team-member-position",onChange:function(e){return o({positionThree:e})},isSelected:t&&"positionThree"===n,onFocus:M("positionThree"),style:{color:I},keepPlaceholderOnFocus:!0}),wp.element.createElement(g,{tagName:"p",value:v,className:"ugb-team-member-des-three",onChange:function(e){return o({desThree:e})},isSelected:t&&"desThree"===n,onFocus:M("desThree"),style:{color:A},keepPlaceholderOnFocus:!0})))]}),v=function(e){var t=e.attributes,n=t.name,l=t.nameTwo,o=t.nameThree,r=t.shapes,a=t.des,c=t.desTwo,i=t.desThree,u=t.position,m=t.positionTwo,s=t.positionThree,p=t.mediaURL,b=t.mediaURLTwo,d=t.mediaURLThree,g=(t.mediaID,t.mediaIDTwo,t.mediaIDThree,t.nameColor),h=t.posColor,w=t.desColor,f=(t.iconColor,t.columns);return wp.element.createElement("div",{className:"ugb-team-member column-"+f+" image-"+r},wp.element.createElement("div",{className:"ugb-team-member-column-one"},p&&wp.element.createElement("div",{className:"team-member-image",style:{backgroundImage:"url("+p+")"},"data-src":p}),n&&!!n.length&&wp.element.createElement("h4",{style:{color:g}},n),u&&!!u.length&&wp.element.createElement("p",{className:"ugb-team-member-position",style:{color:h}},u),a&&!!a.length&&wp.element.createElement("p",{className:"ugb-team-member-des",style:{color:w}},a)),f>1&&wp.element.createElement("div",{className:"ugb-team-member-column-two"},b&&wp.element.createElement("div",{className:"team-member-image",style:{backgroundImage:"url("+b+")"},"data-src":b}),l&&!!l.length&&wp.element.createElement("h4",{style:{color:g}},l),m&&!!m.length&&wp.element.createElement("p",{className:"ugb-team-member-position",style:{color:h}},m),c&&!!c.length&&wp.element.createElement("p",{className:"ugb-team-member-des-two",style:{color:w}},c)),f>2&&wp.element.createElement("div",{className:"ugb-team-member-column-three"},d&&wp.element.createElement("div",{className:"team-member-image",style:{backgroundImage:"url("+d+")"},"data-src":d}),o&&!!o.length&&wp.element.createElement("h4",{style:{color:g}},o),s&&!!s.length&&wp.element.createElement("p",{className:"ugb-team-member-position",style:{color:h}},s),i&&!!i.length&&wp.element.createElement("p",{className:"ugb-team-member-des-three",style:{color:w}},i)))};b("ugb/team-member",{title:a("Team Member"),icon:r.m,category:"common",keywords:[a("Team Member"),a("Stackable")],attributes:{href:{type:"url"},hrefTwo:{type:"url"},hrefThree:{type:"url"},mediaID:{type:"number"},mediaIDTwo:{type:"number"},mediaIDThree:{type:"number"},mediaURL:{type:"string",source:"attribute",selector:".ugb-team-member-column-one .team-member-image",attribute:"data-src"},mediaURLTwo:{type:"string",source:"attribute",selector:".ugb-team-member-column-two .team-member-image",attribute:"data-src"},mediaURLThree:{type:"string",source:"attribute",selector:".ugb-team-member-column-three .team-member-image",attribute:"data-src"},name:{type:"array",source:"children",selector:".ugb-team-member-column-one h4",default:a("Ben Adams")},nameTwo:{type:"array",source:"children",selector:".ugb-team-member-column-two h4",default:a("Alex Johnson")},nameThree:{type:"array",source:"children",selector:".ugb-team-member-column-three h4",default:a("Sammy Simpson")},position:{type:"array",source:"children",selector:".ugb-team-member-column-one .ugb-team-member-position",default:a("Founder")},positionTwo:{type:"array",source:"children",selector:".ugb-team-member-column-two .ugb-team-member-position",default:a("Editor")},positionThree:{type:"array",source:"children",selector:".ugb-team-member-column-three .ugb-team-member-position",default:a("Programmer")},des:{type:"array",source:"children",selector:".ugb-team-member-des",default:a("Ben is the head of our small team. He loves walking his dog, Walter, when he has some free time.")},desTwo:{type:"array",source:"children",selector:".ugb-team-member-des-two",default:a("Alex handles all written content. She enjoys painting and playing softball on the weekends.")},desThree:{type:"array",source:"children",selector:".ugb-team-member-des-three",default:a("Sammy is our programmer. You'll usually find her nose in a book. She has a cat named Skitty.")},nameColor:{type:"string"},posColor:{type:"string"},desColor:{type:"string"},iconColor:{type:"string"},columns:{type:"select",default:"1"},shapes:{type:"select",default:"square"}},edit:s({editable:"content"})(y),save:v})},function(e,t){},function(e,t){},function(e,t,n){"use strict";function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var o=n(37),r=(n.n(o),n(38)),a=(n.n(r),n(0)),c=wp.i18n.__,i=wp.components.withState,u=wp.blocks,m=u.registerBlockType,s=u.RichText,p=u.BlockControls,b=function(e){return e.map?e.map(function(e){return e.children}):""},d=function(e){return e.map?e.map(function(e){return{children:e}}):""},g=function(e){var t=(e.focus,e.setFocus,e.editable),n=e.setAttributes,o=e.setState,r=e.className,a=e.isSelected,i=function(e){return function(){o({editable:e})}},u=e.attributes,m=u.text,g=u.moreLabel,h=u.moreText,w=u.lessLabel;return[a&&wp.element.createElement(p,{key:"controls"}),wp.element.createElement("div",{key:"expand",className:r},a&&wp.element.createElement("label",{className:"ugb-editor-label"},"Less text"),wp.element.createElement(s,l({multiline:"p",placeholder:e.attributes.text.default,value:b(m),onChange:function(e){return n({text:d(e)})},isSelected:a&&"text"===t,onFocus:i("text"),className:"ugb-expand-less-text"},"placeholder",c("Some short text that can be expanded to show more details."))),wp.element.createElement(s,l({tagName:"a",placeholder:e.attributes.moreLabel.default,value:g,isSelected:a&&"moreLabel"===t,onFocus:i("moreLabel"),onChange:function(e){return n({moreLabel:e})},formattingControls:["bold","italic","strikethrough"],className:"ugb-expand-more"},"placeholder",c("Show more"))),a&&wp.element.createElement("label",{className:"ugb-editor-label"},"More text"),a&&wp.element.createElement(s,l({multiline:"p",placeholder:e.attributes.moreText.default,value:b(h),isSelected:a&&"moreText"===t,onFocus:i("moreText"),onChange:function(e){return n({moreText:d(e)})},className:"ugb-expand-more-text"},"placeholder",c("Some short text that can be expanded to show more details. Some additional text that can only be seen when expanded."))),a&&wp.element.createElement(s,l({tagName:"a",placeholder:e.attributes.lessLabel.default,value:w,isSelected:a&&"lessLabel"===t,onFocus:i("lessLabel"),onChange:function(e){return n({lessLabel:e})},formattingControls:["bold","italic","strikethrough"],className:"ugb-expand-less"},"placeholder",c("Show less"))))]},h=function(e){var t=e.attributes,n=t.text,l=t.moreLabel,o=t.moreText,r=t.lessLabel;return wp.element.createElement("div",null,wp.element.createElement("div",{className:"ugb-expand-less-text"},n.map&&n.map(function(e,t){return wp.element.createElement("p",{key:t},e.children&&e.children.props.children)})),wp.element.createElement("div",{className:"ugb-expand-more-text",style:{display:"none"}},o.map&&o.map(function(e,t){return wp.element.createElement("p",{key:t},e.children&&e.children.props.children)})),wp.element.createElement("a",{className:"ugb-expand-button",href:"#"},wp.element.createElement("span",{className:"ugb-expand-more"},l),wp.element.createElement("span",{className:"ugb-expand-less",style:{display:"none"}},r)))};m("ugb/expand",{title:c("Expand / Show More"),icon:a.d,category:"formatting",keywords:[c("Expand"),c("Show more/less"),c("Stackable")],attributes:{text:{type:"array",source:"query",selector:".ugb-expand-less-text > p",query:{children:{source:"node"}},default:[]},moreText:{type:"array",source:"query",selector:".ugb-expand-more-text > p",query:{children:{source:"node"}},default:[]},moreLabel:{type:"array",source:"children",selector:".ugb-expand-more",default:c("Show more")},lessLabel:{type:"array",source:"children",selector:".ugb-expand-less",default:c("Show less")}},edit:i({editable:"text"})(g),save:h})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(40),o=(n.n(l),n(41)),r=(n.n(o),n(0)),a=wp.i18n.__,c=wp.components,i=c.PanelColor,u=c.withState,m=c.SelectControl,s=wp.blocks,p=s.registerBlockType,b=s.InspectorControls,d=s.RichText,g=s.ColorPalette,h=(s.MediaUpload,s.BlockControls),w=(s.AlignmentToolbar,s.BlockAlignmentToolbar,function(e){var t=(e.className,e.setAttributes),n=e.isSelected,l=e.editable,o=e.setState,r=e.attributes,c=r.numberBox,u=r.numberBoxTwo,s=r.numberBoxThree,p=r.body,w=r.bodyTwo,f=r.bodyThree,y=r.name,v=r.nameTwo,C=r.nameThree,E=r.columns,x=r.numberBoxColor,T=r.nameColor,k=r.bodyTextColor,N=r.numberBGColor,S=[{value:"1",label:a("One Column")},{value:"2",label:a("Two Column")},{value:"3",label:a("Three Column")}],B=function(e){return function(){o({editable:e})}};return[n&&wp.element.createElement(h,{key:"controls"}),n&&wp.element.createElement(b,{key:"inspector"},wp.element.createElement(m,{label:a("Column Number"),value:E,options:S.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){t({columns:e})}}),wp.element.createElement(i,{title:a("Number Color"),colorValue:x,initialOpen:!1},wp.element.createElement(g,{value:x,onChange:function(e){return t({numberBoxColor:e})}})),wp.element.createElement(i,{title:a("Number Background Color"),colorValue:N,initialOpen:!1},wp.element.createElement(g,{value:N,onChange:function(e){return t({numberBGColor:e})}})),wp.element.createElement(i,{title:a("Name Color"),colorValue:T,initialOpen:!1},wp.element.createElement(g,{value:T,onChange:function(e){return t({nameColor:e})}})),wp.element.createElement(i,{title:a("Body Text Color"),colorValue:k,initialOpen:!1},wp.element.createElement(g,{value:k,onChange:function(e){return t({bodyTextColor:e})}}))),wp.element.createElement("div",{key:"editable",className:"ugb-number-box column-"+E},wp.element.createElement("div",{className:"ugb-number-box-column-one"},wp.element.createElement(d,{tagName:"span",placeholder:c?c.default:"",value:c,onChange:function(e){return t({numberBox:e})},isSelected:n&&"numberBox"===l,onFocus:B("numberBox"),style:{color:x,backgroundColor:N},keepPlaceholderOnFocus:!0}),wp.element.createElement(d,{tagName:"h4",value:y,className:"ugb-number-box-name",onChange:function(e){return t({name:e})},isSelected:n&&"name"===l,onFocus:B("name"),placeholder:a("Add name\u2026"),style:{color:T},keepPlaceholderOnFocus:!0}),wp.element.createElement(d,{tagName:"p",value:p,className:"ugb-number-box-body",onChange:function(e){return t({body:e})},isSelected:n&&"body"===l,onFocus:B("body"),placeholder:a("Add body\u2026"),style:{color:k},keepPlaceholderOnFocus:!0})),wp.element.createElement("div",{className:"ugb-number-box-column-two"},wp.element.createElement(d,{tagName:"span",placeholder:u?u.default:"",value:u,onChange:function(e){return t({numberBoxTwo:e})},isSelected:n&&"numberBoxTwo"===l,onFocus:B("numberBoxTwo"),style:{color:x,backgroundColor:N},keepPlaceholderOnFocus:!0}),wp.element.createElement(d,{tagName:"h4",value:v,className:"ugb-number-box-name-two",onChange:function(e){return t({nameTwo:e})},isSelected:n&&"nameTwo"===l,onFocus:B("nameTwo"),placeholder:a("Add name\u2026"),style:{color:T},keepPlaceholderOnFocus:!0}),wp.element.createElement(d,{tagName:"p",value:w,className:"ugb-number-box-body-two",onChange:function(e){return t({bodyTwo:e})},isSelected:n&&"bodyTwo"===l,onFocus:B("bodyTwo"),placeholder:a("Add body\u2026"),style:{color:k},keepPlaceholderOnFocus:!0})),wp.element.createElement("div",{className:"ugb-number-box-column-three"},wp.element.createElement(d,{tagName:"span",placeholder:s?s.default:"",value:s,onChange:function(e){return t({numberBoxThree:e})},isSelected:n&&"numberBoxThree"===l,onFocus:B("numberBoxThree"),style:{color:x,backgroundColor:N},keepPlaceholderOnFocus:!0}),wp.element.createElement(d,{tagName:"h4",value:C,className:"ugb-number-box-name-three",onChange:function(e){return t({nameThree:e})},isSelected:n&&"nameThree"===l,onFocus:B("nameThree"),placeholder:a("Add name\u2026"),style:{color:T},keepPlaceholderOnFocus:!0}),wp.element.createElement(d,{tagName:"p",value:f,className:"ugb-number-box-body-three",onChange:function(e){return t({bodyThree:e})},isSelected:n&&"bodyThree"===l,onFocus:B("bodyThree"),placeholder:a("Add body\u2026"),style:{color:k},keepPlaceholderOnFocus:!0})))]}),f=function(e){var t=e.attributes,n=t.numberBox,l=t.numberBoxTwo,o=t.numberBoxThree,r=t.body,a=t.bodyTwo,c=t.bodyThree,i=t.name,u=t.nameTwo,m=t.nameThree,s=t.numberBoxColor,p=t.nameColor,b=t.bodyTextColor,d=t.numberBGColor,g=t.columns;return wp.element.createElement("div",{className:"ugb-number-box column-"+g},wp.element.createElement("div",{className:"ugb-number-box-column-one"},n&&!!n.length&&wp.element.createElement("span",{style:{color:s,backgroundColor:d}},n),i&&!!i.length&&wp.element.createElement("h4",{className:"ugb-number-box-name",style:{color:p}},i),r&&!!r.length&&wp.element.createElement("p",{className:"ugb-number-box-body",style:{color:b}},r)),g>1&&wp.element.createElement("div",{className:"ugb-number-box-column-two"},l&&!!l.length&&wp.element.createElement("span",{style:{color:s,backgroundColor:d}},l),u&&!!u.length&&wp.element.createElement("h4",{className:"ugb-number-box-name-two",style:{color:p}},u),a&&!!a.length&&wp.element.createElement("p",{className:"ugb-number-box-body-two",style:{color:b}},a)),g>2&&wp.element.createElement("div",{className:"ugb-number-box-column-three"},o&&!!o.length&&wp.element.createElement("span",{style:{color:s,backgroundColor:d}},o),m&&!!m.length&&wp.element.createElement("h4",{className:"ugb-number-box-name-three",style:{color:p}},m),c&&!!c.length&&wp.element.createElement("p",{className:"ugb-number-box-body-three",style:{color:b}},c)))};p("ugb/number-box",{title:a("Number Box"),icon:r.h,category:"common",keywords:[a("Number Box"),a("Stackable")],attributes:{numberBox:{type:"array",source:"children",selector:".ugb-number-box-column-one span",default:a("01")},numberBoxTwo:{type:"array",source:"children",selector:".ugb-number-box-column-two span",default:a("02")},numberBoxThree:{type:"array",source:"children",selector:".ugb-number-box-column-three span",default:a("03")},name:{type:"array",source:"children",selector:".ugb-number-box-name",default:a("Registration")},nameTwo:{type:"array",source:"children",selector:".ugb-number-box-name-two",default:a("Waiting Period")},nameThree:{type:"array",source:"children",selector:".ugb-number-box-name-three",default:a("Delivery")},body:{type:"array",source:"children",selector:".ugb-number-box-body",default:a("This is just a sample write-up, but you can check out more info on Gutenberg on the WP repository.")},bodyTwo:{type:"array",source:"children",selector:".ugb-number-box-body-two",default:a("This is just a sample write-up, but you can check out more info on Gutenberg on the WP repository.")},bodyThree:{type:"array",source:"children",selector:".ugb-number-box-body-three",default:a("This is just a sample write-up, but you can check out more info on Gutenberg on the WP repository.")},numberBoxColor:{type:"string"},nameColor:{type:"string"},bodyTextColor:{type:"string"},numberBGColor:{type:"string"},columns:{type:"select",default:"1"}},edit:u({editable:"content"})(w),save:f})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(43),o=(n.n(l),n(44)),r=(n.n(o),n(0)),a=wp.i18n.__,c=(wp.element.Component,wp.components),i=c.PanelColor,u=c.SelectControl,m=c.withState,s=c.Dashicon,p=c.IconButton,b=c.RangeControl,d=wp.blocks,g=d.registerBlockType,h=d.InspectorControls,w=d.RichText,f=d.ColorPalette,y=d.BlockControls,v=d.UrlInput;g("ugb/pricing-box",{title:a("Pricing Box"),icon:r.j,category:"common",keywords:[a("Pricing Box"),a("Stackable")],attributes:{url:{type:"string",source:"attribute",selector:".ugb-pricing-box-column-one a",attribute:"href"},url2:{type:"string",source:"attribute",selector:".ugb-pricing-box-column-two a",attribute:"href"},url3:{type:"string",source:"attribute",selector:".ugb-pricing-box-column-three a",attribute:"href"},pricingBoxTitle:{type:"array",source:"children",selector:".ugb-pricing-box-column-one h3",default:a("Basic")},pricingBoxTitle2:{type:"array",source:"children",selector:".ugb-pricing-box-column-two h3",default:a("Basic")},pricingBoxTitle3:{type:"array",source:"children",selector:".ugb-pricing-box-column-three h3",default:a("Basic")},price:{type:"array",source:"children",selector:".ugb-pricing-box-column-one .ugb-pricing-box-pricing",default:a("$9")},price2:{type:"array",source:"children",selector:".ugb-pricing-box-column-two .ugb-pricing-box-pricing",default:a("$9")},price3:{type:"array",source:"children",selector:".ugb-pricing-box-column-three .ugb-pricing-box-pricing",default:a("$9")},perMonthLabel:{type:"array",source:"children",selector:".ugb-pricing-box-column-one .ugb-pricing-box-per-month-label",default:a("per month")},perMonthLabel2:{type:"array",source:"children",selector:".ugb-pricing-box-column-two .ugb-pricing-box-per-month-label",default:a("per month")},perMonthLabel3:{type:"array",source:"children",selector:".ugb-pricing-box-column-three .ugb-pricing-box-per-month-label",default:a("per month")},buttonText:{type:"array",source:"children",selector:".ugb-pricing-box-column-one a",default:a("Buy Now")},buttonText2:{type:"array",source:"children",selector:".ugb-pricing-box-column-two a",default:a("Buy Now")},buttonText3:{type:"array",source:"children",selector:".ugb-pricing-box-column-three a",default:a("Buy Now")},featureList:{type:"array",source:"children",selector:".ugb-pricing-box-column-one .ugb-pricing-box-feature-list",default:a("Consectetur adipiscing elit Suspendisse at pretium tortor Vestibulum ante ipsum primis In faucibus orci luctus et Ultrices posuere cubilia cura Aenean consectetur nec")},featureList2:{type:"array",source:"children",selector:".ugb-pricing-box-column-two .ugb-pricing-box-feature-list",default:a("Consectetur adipiscing elit Suspendisse at pretium tortor Vestibulum ante ipsum primis In faucibus orci luctus et Ultrices posuere cubilia cura Aenean consectetur nec")},featureList3:{type:"array",source:"children",selector:".ugb-pricing-box-column-three .ugb-pricing-box-feature-list",default:a("Consectetur adipiscing elit Suspendisse at pretium tortor Vestibulum ante ipsum primis In faucibus orci luctus et Ultrices posuere cubilia cura Aenean consectetur nec")},pricingBoxColor:{type:"string"},priceColor:{type:"string"},perMonthLabelColor:{type:"string"},buttonColor:{type:"string"},buttonTextColor:{type:"string"},featureListColor:{type:"string"},columns:{type:"select",default:"1"},size:{type:"string",default:"normal"},cornerButtonRadius:{type:"number",default:4}},edit:m({editable:"content"})(function(e){var t=e.isSelected,n=e.editable,l=e.setState,o=(e.className,e.setAttributes),r=e.attributes,c=r.url,m=(r.url2,r.url3,r.pricingBoxTitle),d=r.pricingBoxTitle2,g=r.pricingBoxTitle3,C=r.price,E=r.price2,x=r.price3,T=r.perMonthLabel,k=r.perMonthLabel2,N=r.perMonthLabel3,S=r.buttonText,B=r.buttonText2,L=r.buttonText3,F=r.featureList,O=r.featureList2,I=r.featureList3,A=r.pricingBoxColor,P=r.priceColor,R=r.perMonthLabelColor,z=r.buttonColor,V=r.buttonTextColor,M=r.featureListColor,_=r.columns,U=r.size,D=r.cornerButtonRadius,q=[{value:"1",label:a("One Column")},{value:"2",label:a("Two Column")},{value:"3",label:a("Three Column")}],H=[{value:"small",label:a("Small")},{value:"normal",label:a("Normal")},{value:"medium",label:a("Medium")},{value:"large",label:a("Large")}],j=function(e){return function(){l({editable:e})}};return[t&&wp.element.createElement(y,{key:"controls"}),t&&wp.element.createElement(h,{key:"inspector"},wp.element.createElement(u,{label:a("Column Number"),value:_,options:q.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){o({columns:e})}}),wp.element.createElement(b,{label:a("Corner Radius"),value:D,min:"1",max:"50",onChange:function(e){return o({cornerButtonRadius:e})}}),wp.element.createElement(i,{title:a("Pricing Title Color"),colorValue:A,initialOpen:!1},wp.element.createElement(f,{value:A,onChange:function(e){return o({pricingBoxColor:e})}})),wp.element.createElement(i,{title:a("Price Color"),colorValue:P,initialOpen:!1},wp.element.createElement(f,{value:P,onChange:function(e){return o({priceColor:e})}})),wp.element.createElement(i,{title:a("Per Month Label Color"),colorValue:R,initialOpen:!1},wp.element.createElement(f,{value:R,onChange:function(e){return o({perMonthLabelColor:e})}})),wp.element.createElement(i,{title:a("Feature List Color"),colorValue:M,initialOpen:!1},wp.element.createElement(f,{value:M,onChange:function(e){return o({featureListColor:e})}})),wp.element.createElement(u,{label:a("Button Size"),value:U,options:H.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){o({size:e})}}),wp.element.createElement(i,{title:a("Button Color"),colorValue:z,initialOpen:!1},wp.element.createElement(f,{value:z,onChange:function(e){return o({buttonColor:e})}})),wp.element.createElement(i,{title:a("Button Text Color"),colorValue:V,initialOpen:!1},wp.element.createElement(f,{value:V,onChange:function(e){return o({buttonTextColor:e})}}))),wp.element.createElement("div",{key:"editable",className:"ugb-pricing-box column-"+_},wp.element.createElement("div",{className:"ugb-pricing-box-column-one"},wp.element.createElement(w,{tagName:"h3",placeholder:m.default,value:m,onChange:function(e){return o({pricingBoxTitle:e})},isSelected:t&&"pricingBoxTitle"===n,onFocus:j("pricingBoxTitle"),style:{color:A},keepPlaceholderOnFocus:!0}),wp.element.createElement(w,{tagName:"p",placeholder:C.default,value:C,className:"ugb-pricing-box-pricing",onChange:function(e){return o({price:e})},isSelected:t&&"price"===n,onFocus:j("price"),style:{color:P},keepPlaceholderOnFocus:!0}),wp.element.createElement(w,{tagName:"p",placeholder:T.default,value:T,className:"ugb-pricing-box-per-month-label",onChange:function(e){return o({perMonthLabel:e})},focus:t&&"perMonthLabel"===n,onFocus:j("perMonthLabel"),style:{color:R},keepPlaceholderOnFocus:!0}),wp.element.createElement("span",{key:"button",className:"wp-block-button"},wp.element.createElement(w,{tagName:"span",placeholder:S.default,value:S,onChange:function(e){return o({buttonText:e})},className:"wp-ugb-button ugb-button-"+U,isSelected:t&&"buttonText"===n,onFocus:j("buttonText"),style:{backgroundColor:z,color:V,borderRadius:D+"px"},keepPlaceholderOnFocus:!0})),wp.element.createElement(w,{tagName:"p",placeholder:F.default,value:F,className:"ugb-pricing-box-feature-list",onChange:function(e){return o({featureList:e})},focus:t&&"featureList"===n,onFocus:j("featureList"),style:{color:M},keepPlaceholderOnFocus:!0}),t&&wp.element.createElement("form",{key:"form-link",onSubmit:function(e){return e.preventDefault()},className:"blocks-button__inline-link pricing-box"},wp.element.createElement(s,{icon:"admin-links"}),wp.element.createElement(v,{value:c,onChange:function(e){return o({url:e})}}),wp.element.createElement(p,{icon:"editor-break",label:a("Apply"),type:"submit"}))),wp.element.createElement("div",{className:"ugb-pricing-box-column-two"},wp.element.createElement(w,{tagName:"h3",placeholder:d.default,value:d,onChange:function(e){return o({pricingBoxTitle2:e})},isSelected:t&&"pricingBoxTitle2"===n,onFocus:j("pricingBoxTitle2"),style:{color:A},keepPlaceholderOnFocus:!0}),wp.element.createElement(w,{tagName:"p",placeholder:E.default,value:E,className:"ugb-pricing-box-pricing",onChange:function(e){return o({price2:e})},isSelected:t&&"price2"===n,onFocus:j("price2"),style:{color:P},keepPlaceholderOnFocus:!0}),wp.element.createElement(w,{tagName:"p",placeholder:k.default,value:k,className:"ugb-pricing-box-per-month-label",onChange:function(e){return o({perMonthLabel2:e})},focus:t&&"perMonthLabel2"===n,onFocus:j("perMonthLabel2"),style:{color:R},keepPlaceholderOnFocus:!0}),wp.element.createElement("span",{key:"button",className:"wp-block-button"},wp.element.createElement(w,{tagName:"span",placeholder:B.default,value:B,onChange:function(e){return o({buttonText2:e})},className:"wp-ugb-button ugb-button-"+U,isSelected:t&&"buttonText2"===n,onFocus:j("buttonText2"),style:{backgroundColor:z,color:V,borderRadius:D+"px"},keepPlaceholderOnFocus:!0})),wp.element.createElement(w,{tagName:"p",placeholder:O.default,value:O,className:"ugb-pricing-box-feature-list",onChange:function(e){return o({featureList2:e})},focus:t&&"featureList2"===n,onFocus:j("featureList2"),style:{color:M},keepPlaceholderOnFocus:!0}),t&&wp.element.createElement("form",{key:"form-link",onSubmit:function(e){return e.preventDefault()},className:"blocks-button__inline-link pricing-box"},wp.element.createElement(s,{icon:"admin-links"}),wp.element.createElement(v,{value:c,onChange:function(e){return o({url:e})}}),wp.element.createElement(p,{icon:"editor-break",label:a("Apply"),type:"submit"}))),wp.element.createElement("div",{className:"ugb-pricing-box-column-three"},wp.element.createElement(w,{tagName:"h3",placeholder:g.default,value:g,onChange:function(e){return o({pricingBoxTitle3:e})},isSelected:t&&"pricingBoxTitle3"===n,onFocus:j("pricingBoxTitle3"),style:{color:A},keepPlaceholderOnFocus:!0}),wp.element.createElement(w,{tagName:"p",placeholder:x.default,value:x,className:"ugb-pricing-box-pricing",onChange:function(e){return o({price3:e})},isSelected:t&&"price3"===n,onFocus:j("price3"),style:{color:P},keepPlaceholderOnFocus:!0}),wp.element.createElement(w,{tagName:"p",placeholder:N.default,value:N,className:"ugb-pricing-box-per-month-label",onChange:function(e){return o({perMonthLabel3:e})},focus:t&&"perMonthLabel3"===n,onFocus:j("perMonthLabel3"),style:{color:R},keepPlaceholderOnFocus:!0}),wp.element.createElement("span",{key:"button",className:"wp-block-button"},wp.element.createElement(w,{tagName:"span",placeholder:L.default,value:L,onChange:function(e){return o({buttonText3:e})},className:"wp-ugb-button ugb-button-"+U,isSelected:t&&"buttonText3"===n,onFocus:j("buttonText3"),style:{backgroundColor:z,color:V,borderRadius:D+"px"},keepPlaceholderOnFocus:!0})),wp.element.createElement(w,{tagName:"p",placeholder:I.default,value:I,className:"ugb-pricing-box-feature-list",onChange:function(e){return o({featureList3:e})},focus:t&&"featureList3"===n,onFocus:j("featureList3"),style:{color:M},keepPlaceholderOnFocus:!0}),t&&wp.element.createElement("form",{key:"form-link",onSubmit:function(e){return e.preventDefault()},className:"blocks-button__inline-link pricing-box"},wp.element.createElement(s,{icon:"admin-links"}),wp.element.createElement(v,{value:c,onChange:function(e){return o({url:e})}}),wp.element.createElement(p,{icon:"editor-break",label:a("Apply"),type:"submit"}))))]}),save:function(e){var t=e.attributes,n=t.url,l=t.url2,o=t.url3,r=t.pricingBoxTitle,a=t.pricingBoxTitle2,c=t.pricingBoxTitle3,i=t.price,u=t.price2,m=t.price3,s=t.perMonthLabel,p=t.perMonthLabel2,b=t.perMonthLabel3,d=t.buttonText,g=t.buttonText2,h=t.buttonText3,w=t.featureList,f=t.featureList2,y=t.featureList3,v=t.pricingBoxColor,C=t.priceColor,E=t.perMonthLabelColor,x=t.buttonColor,T=t.buttonTextColor,k=t.featureListColor,N=t.columns,S=t.size,B=t.cornerButtonRadius,L={backgroundColor:x,color:T,borderRadius:B+"px"};return wp.element.createElement("div",{className:"ugb-pricing-box column-"+N},wp.element.createElement("div",{className:"ugb-pricing-box-column-one"},r&&!!r.length&&wp.element.createElement("h3",{style:{color:v}},r),i&&!!i.length&&wp.element.createElement("p",{className:"ugb-pricing-box-pricing",style:{color:C}},i),s&&!!s.length&&wp.element.createElement("p",{className:"ugb-pricing-box-per-month-label",style:{color:E}},s),d&&!!d.length&&wp.element.createElement("a",{href:n,className:"wp-ugb-button ugb-button-"+S,style:L},d),w&&!!w.length&&wp.element.createElement("p",{className:"ugb-pricing-box-feature-list",style:{color:k}},w)),N>1&&wp.element.createElement("div",{className:"ugb-pricing-box-column-two"},a&&!!a.length&&wp.element.createElement("h3",{style:{color:v}},a),u&&!!u.length&&wp.element.createElement("p",{className:"ugb-pricing-box-pricing",style:{color:C}},u),p&&!!p.length&&wp.element.createElement("p",{className:"ugb-pricing-box-per-month-label",style:{color:E}},p),g&&!!g.length&&wp.element.createElement("a",{href:l,className:"wp-ugb-button ugb-button-"+S,style:L},g),f&&!!f.length&&wp.element.createElement("p",{className:"ugb-pricing-box-feature-list",style:{color:k}},f)),N>2&&wp.element.createElement("div",{className:"ugb-pricing-box-column-three"},c&&!!c.length&&wp.element.createElement("h3",{style:{color:v}},c),m&&!!m.length&&wp.element.createElement("p",{className:"ugb-pricing-box-pricing",style:{color:C}},m),b&&!!b.length&&wp.element.createElement("p",{className:"ugb-pricing-box-per-month-label",style:{color:E}},b),h&&!!h.length&&wp.element.createElement("a",{href:o,className:"wp-ugb-button ugb-button-"+S,style:L},h),y&&!!y.length&&wp.element.createElement("p",{className:"ugb-pricing-box-feature-list",style:{color:k}},y)))}})},function(e,t){},function(e,t){},function(e,t,n){"use strict";function l(e){return 0===e?null:"overlay-opacity-"+1*Math.round(e/1)}var o=n(46),r=n.n(o),a=n(47),c=(n.n(a),n(48)),i=(n.n(c),n(0)),u=wp.i18n.__,m=wp.components,s=m.IconButton,p=m.PanelColor,b=m.Dashicon,d=m.RangeControl,g=m.SelectControl,h=m.Toolbar,w=m.Button,f=m.withState,y=wp.blocks,v=y.registerBlockType,C=y.RichText,E=y.AlignmentToolbar,x=y.MediaUpload,T=y.BlockControls,k=y.InspectorControls,N=y.ColorPalette,S=y.UrlInput,B=function(e){var t=(e.className,e.setAttributes),n=e.isSelected,o=e.editable,a=e.setState,c=e.attributes,i=c.url,m=c.buttonURL,f=c.buttonText,y=c.buttonColor,v=c.buttonTextColor,B=c.cornerButtonRadius,L=c.size,F=c.title,O=c.titleColor,I=c.subtitle,A=c.subtitleColor,P=c.contentAlign,R=c.id,z=c.backgroundColor,V=c.opacity,M=i?{backgroundImage:"url("+i+")"}:void 0,_=i?"has-image":"",U=r()(l(V),{"overlay-opacity":0!==V}),D=function(e){return function(){a({editable:e})}},q=[{value:"small",label:u("Small")},{value:"normal",label:u("Normal")},{value:"medium",label:u("Medium")},{value:"large",label:u("Large")}];return[n&&wp.element.createElement(T,{key:"controls"},wp.element.createElement(E,{value:P,onChange:function(e){return t({contentAlign:e})}}),wp.element.createElement(h,null,wp.element.createElement(x,{onSelect:function(e){return t({url:e.url,id:e.id})},type:"image",value:R,render:function(e){var t=e.open;return wp.element.createElement(s,{className:"components-toolbar__control",label:u("Edit image"),icon:"edit",onClick:t})}}))),n&&wp.element.createElement(k,{key:"inspector"},wp.element.createElement(p,{title:u("Title Color"),colorValue:O,initialOpen:!1},wp.element.createElement(N,{value:O,onChange:function(e){return t({titleColor:e})}})),wp.element.createElement(p,{title:u("Subtitle Color"),colorValue:A,initialOpen:!1},wp.element.createElement(N,{value:A,onChange:function(e){return t({subtitleColor:e})}})),wp.element.createElement(p,{title:u("Heading Background Color"),colorValue:z,initialOpen:!1},wp.element.createElement(N,{value:z,onChange:function(e){return t({backgroundColor:e})}})),wp.element.createElement(d,{label:u("Background Opacity"),value:V,min:0,max:10,step:1,onChange:function(e){return t({opacity:e})}}),wp.element.createElement("h2",null,"Button Settings"),wp.element.createElement(g,{label:u("Button Size"),value:L,options:q.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){t({size:e})}}),wp.element.createElement(d,{label:u("Corner Radius"),value:B,min:"1",max:"50",onChange:function(e){return t({cornerButtonRadius:e})}}),wp.element.createElement(p,{title:u("Button Color"),colorValue:y,initialOpen:!1},wp.element.createElement(N,{value:y,onChange:function(e){return t({buttonColor:e})}})),wp.element.createElement(p,{title:u("Button Text Color"),colorValue:v,initialOpen:!1},wp.element.createElement(N,{value:v,onChange:function(e){return t({buttonTextColor:e})}}))),wp.element.createElement("div",{key:"editable",className:"ugb-header "+_+" "},wp.element.createElement("div",{className:"ugb-header-overlay "+U,style:{backgroundColor:z}}),wp.element.createElement(x,{onSelect:function(e){return t({url:e.url,id:e.id})},type:"image",value:R,render:function(e){return[!i&&wp.element.createElement(w,{className:R?"":"button button-large",onClick:e.open},u("Upload Image"))]}}),wp.element.createElement("section",{key:"preview","data-url":i,style:M,className:"ugb-header-section"},wp.element.createElement(C,{tagName:"h2",className:"ugb-header-title",placeholder:F.default,value:F,onChange:function(e){return t({title:e})},isSelected:n&&"title"===o,onFocus:D("title"),style:{textAlign:P,color:O}}),wp.element.createElement(C,{tagName:"p",className:"ugb-header-subtitle",placeholder:I.default,value:I,onChange:function(e){return t({subtitle:e})},isSelected:n&&"subtitle"===o,onFocus:D("subtitle"),style:{textAlign:P,color:A}}),wp.element.createElement("span",{key:"button",className:"wp-block-button ugb-button-"+P},wp.element.createElement(C,{tagName:"span",placeholder:f.default,value:f,onChange:function(e){return t({buttonText:e})},className:"wp-ugb-button ugb-button-"+L,style:{backgroundColor:y,color:v,borderRadius:B+"px"},isSelected:n&&"buttonText"===o,onFocus:D("buttonText"),keepPlaceholderOnFocus:!0})))),n&&wp.element.createElement("form",{key:"form-link",onSubmit:function(e){return e.preventDefault()},className:"blocks-button__inline-link ugb-button-"+P},wp.element.createElement(b,{icon:"admin-links"}),wp.element.createElement(S,{value:m,onChange:function(e){return t({buttonURL:e})}}),wp.element.createElement(s,{icon:"editor-break",label:u("Apply"),type:"submit"}))]},L=function(e){var t=e.attributes,n=t.url,o=t.buttonURL,a=t.buttonText,c=t.buttonColor,i=t.buttonTextColor,u=t.cornerButtonRadius,m=t.size,s=t.title,p=t.titleColor,b=t.subtitle,d=t.subtitleColor,g=(t.contentAlign,t.id,t.backgroundColor),h=t.opacity,w={backgroundColor:c,color:i,borderRadius:u+"px"},f=n?{backgroundImage:"url("+n+")"}:void 0,y=n?"has-image":"",v=r()(l(h),{"overlay-opacity":0!==h}),C=s.length||b.length||a.length?"has-content":"has-no-content";return wp.element.createElement("div",{className:"ugb-header "+y+" "+C},wp.element.createElement("div",{className:"ugb-header-overlay "+v,style:{backgroundColor:g}}),wp.element.createElement("section",{key:"preview","data-url":n,style:f,className:"ugb-header-section"},s&&!!s.length&&wp.element.createElement("h2",{className:"ugb-header-title",style:{color:p}},s),b&&!!b.length&&wp.element.createElement("p",{className:"ugb-header-subtitle",style:{color:d}},b),a&&!!a.length&&wp.element.createElement("a",{href:o,className:"wp-ugb-button ugb-button-"+m,style:w},a)))};v("ugb/header",{title:u("Header"),icon:i.f,category:"common",keywords:[u("Header"),u("Stackable")],attributes:{title:{type:"array",source:"children",selector:"h2",default:u("Heading Title")},subtitle:{type:"array",source:"children",selector:"p",default:u("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue tincidunt nisit ut pretium. Duis blandit, tortor et suscipit tincidunt, dolor metus mattis neque, ac varius magna nibh ac tortor.")},url:{type:"string",source:"attribute",selector:".ugb-header .ugb-header-section",attribute:"data-url"},buttonURL:{type:"string",source:"attribute",selector:"a",attribute:"href"},titleColor:{type:"string",default:"#ffffff"},subtitleColor:{type:"string",default:"#ffffff"},buttonText:{type:"array",source:"children",selector:".ugb-header a.wp-ugb-button",default:u("Button")},buttonColor:{type:"string",default:"#2091e1"},buttonTextColor:{type:"string",default:"#ffffff"},size:{type:"string",default:"normal"},cornerButtonRadius:{type:"number",default:4},contentAlign:{type:"string",default:"center"},id:{type:"number"},backgroundColor:{type:"string",default:"#000000"},opacity:{type:"number",default:5}},edit:f({editable:"content"})(B),save:L})},function(e,t,n){var l,o;!function(){"use strict";function n(){for(var e=[],t=0;t<arguments.length;t++){var l=arguments[t];if(l){var o=typeof l;if("string"===o||"number"===o)e.push(l);else if(Array.isArray(l))e.push(n.apply(null,l));else if("object"===o)for(var a in l)r.call(l,a)&&l[a]&&e.push(a)}}return e.join(" ")}var r={}.hasOwnProperty;"undefined"!==typeof e&&e.exports?e.exports=n:(l=[],void 0!==(o=function(){return n}.apply(t,l))&&(e.exports=o))}()},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(50),o=(n.n(l),n(51)),r=(n.n(o),n(0)),a=wp.i18n.__,c=wp.components,i=c.IconButton,u=c.PanelColor,m=c.Toolbar,s=c.Button,p=c.withState,b=c.RangeControl,d=c.SelectControl,g=c.ToggleControl,h=wp.blocks,w=h.registerBlockType,f=h.RichText,y=h.MediaUpload,v=h.BlockControls,C=h.InspectorControls,E=h.ColorPalette,x=function(e){var t=(e.className,e.setAttributes),n=e.isSelected,l=e.editable,o=e.setState,r=e.attributes,c=r.url,p=r.title,h=r.titleColor,w=r.subtitle,x=r.subtitleColor,T=r.overlayColor,k=r.id,N=r.height,S=r.width,B=r.verticalAlign,L=r.horizontalAlign,F=r.full,O=c?"has-image":"",I=F?"full-width":"",A=function(e){return function(){o({editable:e})}},P=[{value:"flex-start",label:a("Top")},{value:"center",label:a("Center")},{value:"flex-end",label:a("Bottom")}],R=[{value:"flex-start",label:a("Left")},{value:"center",label:a("Center")},{value:"flex-end",label:a("Right")}];return[n&&wp.element.createElement(v,{key:"controls"},c&&wp.element.createElement(m,null,wp.element.createElement(y,{onSelect:function(e){return t({url:e.url,id:e.id})},type:"image",value:k,render:function(e){var t=e.open;return wp.element.createElement(i,{className:"components-toolbar__control",label:a("Edit image"),icon:"edit",onClick:t})}}))),n&&wp.element.createElement(C,{key:"inspector"},wp.element.createElement(g,{label:"Full-Width",checked:!!F,onChange:function(){return t({full:!F})}}),wp.element.createElement(b,{label:a("Height"),value:N,min:"135",max:"700",onChange:function(e){return t({height:e})}}),wp.element.createElement(b,{label:a("Width"),value:S,min:"400",max:"999",onChange:function(e){return t({width:e})}}),wp.element.createElement(d,{label:a("Vertical Alignment"),value:B,options:P.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){t({verticalAlign:e})}}),wp.element.createElement(d,{label:a("Horizontal Alignment"),value:L,options:R.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){t({horizontalAlign:e})}}),wp.element.createElement(u,{title:a("Title Color"),colorValue:h,initialOpen:!1},wp.element.createElement(E,{value:h,onChange:function(e){return t({titleColor:e})}})),wp.element.createElement(u,{title:a("Subtitle Color"),colorValue:x,initialOpen:!1},wp.element.createElement(E,{value:x,onChange:function(e){return t({subtitleColor:e})}})),wp.element.createElement(u,{title:a("Overlay Color"),colorValue:T,initialOpen:!1},wp.element.createElement(E,{value:T,onChange:function(e){return t({overlayColor:e})}}))),wp.element.createElement("div",{key:"editable",className:"ugb-image-box "+O+" "+I,"data-url":c,style:{width:S+"px",height:N+"px",backgroundImage:"url("+c+")",alignItems:L,justifyContent:B}},wp.element.createElement(y,{onSelect:function(e){return t({url:e.url,id:e.id})},type:"image",value:k,render:function(e){return[!c&&wp.element.createElement(s,{className:k?"":"button button-large",onClick:e.open},a("Upload Image"))]}}),wp.element.createElement("a",{href:"#",style:{backgroundColor:T}}),wp.element.createElement(f,{tagName:"h4",placeholder:p.default,value:p,onChange:function(e){return t({title:e})},isSelected:n&&"title"===l,onFocus:A("title"),style:{color:h}}),wp.element.createElement(f,{tagName:"p",placeholder:w.default,value:w,onChange:function(e){return t({subtitle:e})},isSelected:n&&"subtitle"===l,onFocus:A("subtitle"),style:{color:x}}))]},T=function(e){var t=e.attributes,n=t.url,l=t.title,o=t.titleColor,r=t.subtitle,a=t.subtitleColor,c=t.overlayColor,i=(t.id,t.height),u=t.width,m=t.verticalAlign,s=t.horizontalAlign,p=t.full,b=n?"has-image":"",d=p?"full-width":"",g=l.length||r.length?"has-content":"has-no-content";return wp.element.createElement("div",{className:"ugb-image-box "+b+" "+g+" "+d,"data-url":n,style:{width:u+"px",height:i+"px",backgroundImage:"url("+n+")",alignItems:s,justifyContent:m}},wp.element.createElement("a",{href:"#",style:{backgroundColor:c}}),l&&!!l.length&&wp.element.createElement("h4",{style:{color:o}},l),r&&!!r.length&&wp.element.createElement("p",{style:{color:a}},r))};w("ugb/image-box",{title:a("Image Box"),icon:r.i,category:"common",keywords:[a("Image Box"),a("Stackable")],attributes:{title:{type:"array",source:"children",selector:"h4",default:a("Title")},subtitle:{type:"array",source:"children",selector:"p",default:a("Subtitle goes here")},url:{type:"string",source:"attribute",selector:".ugb-image-box",attribute:"data-url"},titleColor:{type:"string",default:"#ffffff"},subtitleColor:{type:"string",default:"#ffffff"},overlayColor:{type:"string",default:"#42b078"},id:{type:"number"},width:{type:"number",default:"400"},height:{type:"number",default:"400"},verticalAlign:{type:"string",default:"center"},horizontalAlign:{type:"string",default:"center"},full:{type:"boolean",default:!1}},edit:p({editable:"content"})(x),save:T})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(53),o=(n.n(l),n(54)),r=(n.n(o),n(0)),a=wp.i18n.__,c=wp.components,i=c.PanelColor,u=c.withState,m=c.RangeControl,s=wp.blocks,p=s.registerBlockType,b=s.InspectorControls,d=s.RichText,g=s.ColorPalette,h=function(e){var t=function(e){return function(){o({editable:e})}},n=e.isSelected,l=e.editable,o=e.setState,r=e.setAttributes,c=(e.className,e.attributes),u=c.color,s=c.headingColor,p=c.desColor,h=c.title,w=c.counter,f=c.des,y=c.fontSize;return[wp.element.createElement("div",{className:"ugb-countup"},wp.element.createElement(d,{tagName:"h4",value:h,onChange:function(e){return r({title:e})},isSelected:n&&"title"===l,onFocus:t("title"),style:{color:s}}),wp.element.createElement(d,{tagName:"div",className:"ugb-counter",placeholder:w.default,"data-duration":"1000","data-delay":"16",value:w,onChange:function(e){return r({counter:e})},isSelected:n&&"counter"===l,onFocus:t("counter"),style:{color:u,fontSize:y+"px"}}),wp.element.createElement(d,{tagName:"p",className:"ugb-counter-des",value:f,onChange:function(e){return r({des:e})},isSelected:n&&"des"===l,onFocus:t("des"),style:{color:p}})),n&&wp.element.createElement(b,{key:"inspector"},wp.element.createElement(i,{title:a("Heading Color"),colorValue:s,initialOpen:!1},wp.element.createElement(g,{value:s,onChange:function(e){return r({headingColor:e})}})),wp.element.createElement(i,{title:a("Count Up Text Color"),colorValue:u,initialOpen:!1},wp.element.createElement(g,{value:u,onChange:function(e){return r({color:e})}})),wp.element.createElement(i,{title:a("Description Color"),colorValue:p,initialOpen:!1},wp.element.createElement(g,{value:p,onChange:function(e){return r({desColor:e})}})),wp.element.createElement(m,{label:a("Counter Text Font Size"),max:"100",min:"10",value:y,onChange:function(e){return r({fontSize:e})}}))]},w=function(e){var t=e.attributes,n=t.color,l=t.headingColor,o=t.desColor,r=t.title,a=t.counter,c=t.des,i=t.fontSize;return wp.element.createElement("div",{className:"ugb-countup"},wp.element.createElement("h4",{style:{color:l}}," ",r," "),wp.element.createElement("div",{className:"ugb-counter",style:{color:n,fontSize:i+"px"},"data-duration":"1000","data-delay":"16"},a),wp.element.createElement("p",{style:{color:o}}," ",c," "))};p("ugb/count-up",{title:a("Count Up"),icon:r.h,category:"common",keywords:[a("Count Up"),a("Stackable")],attributes:{title:{type:"array",source:"children",selector:"h4",default:a("Happy Customers")},counter:{type:"array",source:"children",selector:".ugb-counter",default:"12,345"},des:{type:"array",source:"children",selector:"p",default:a("and counting")},fontSize:{type:"number",default:"60"},headingColor:{type:"string"},desColor:{type:"string"},color:{type:"string"}},edit:u({editable:"content"})(h),save:w})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(56),o=(n.n(l),n(57)),r=(n.n(o),n(0)),a=wp.i18n.__,c=wp.components,i=c.IconButton,u=c.PanelColor,m=c.Button,s=c.SelectControl,p=c.Dashicon,b=c.Toolbar,d=wp.blocks,g=d.registerBlockType,h=d.MediaUpload,w=d.InspectorControls,f=d.ColorPalette,y=d.BlockControls,v=d.UrlInput,C={normal:wp.element.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"30",height:"30",viewBox:"0 0 256 320"},wp.element.createElement("path",{d:"M0 0v320l256-160L0 0z"})),circle:wp.element.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"50",height:"50",viewBox:"0 0 40 40"},wp.element.createElement("path",{d:"M16 29l12-9-12-9v18zm4-29C8.95 0 0 8.95 0 20s8.95 20 20 20 20-8.95 20-20S31.05 0 20 0zm0 36c-8.82 0-16-7.18-16-16S11.18 4 20 4s16 7.18 16 16-7.18 16-16 16z"})),outline:wp.element.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"50",height:"50",viewBox:"0 0 34 34"},wp.element.createElement("path",{d:"M17 34C7.6 34 0 26.4 0 17S7.6 0 17 0s17 7.6 17 17-7.6 17-17 17zm0-32C8.7 2 2 8.7 2 17s6.7 15 15 15 15-6.7 15-15S25.3 2 17 2z"}),wp.element.createElement("path",{d:"M12 25.7V8.3L27 17l-15 8.7zm2-14v10.5l9-5.3-9-5.2z"}))},E=function(e){var t=(e.className,e.setAttributes),n=e.isSelected,l=e.attributes,o=l.videoLink,r=l.mediaLink,c=l.overlayColor,d=l.playButtonType,g=l.mediaID,E=[{value:"normal",label:a("Normal Play Button")},{value:"circle",label:a("Play Button with Circle")},{value:"outline",label:a("Outline Play Button")}];return[n&&wp.element.createElement(y,{key:"controls"},r&&wp.element.createElement(b,null,wp.element.createElement(h,{onSelect:function(e){return t({mediaLink:e.url,mediaID:e.id})},type:"image",value:g,render:function(e){var t=e.open;return wp.element.createElement(i,{className:"components-toolbar__control",label:a("Edit image"),icon:"edit",onClick:t})}}))),n&&wp.element.createElement(w,{key:"inspector"},wp.element.createElement(s,{label:a("Play Button Style"),value:d,options:E.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){t({playButtonType:e})}}),wp.element.createElement(u,{title:a("Background/Overlay Color"),colorValue:c,initialOpen:!1},wp.element.createElement(f,{value:c,onChange:function(e){return t({overlayColor:e})}}))),wp.element.createElement("div",{className:"ugb-video-popup","data-video":o,style:{backgroundColor:c}},wp.element.createElement("div",{className:"ugb-video-preview",style:{backgroundImage:"url("+r+")"}}),wp.element.createElement("div",{className:"ugb-video-wrapper"},wp.element.createElement(h,{onSelect:function(e){return t({mediaLink:e.url,mediaID:e.id})},type:"image",value:g,render:function(e){return[!r&&wp.element.createElement(m,{className:g?"":"button button-large",onClick:e.open},a("Upload Image"))]}}),wp.element.createElement("div",{className:"ugb-video-overlay",style:{backgroundColor:c}}),wp.element.createElement("span",{className:"ugb-play-button"},C[d]))),n&&wp.element.createElement("form",{key:"form-link",onSubmit:function(e){return e.preventDefault()},className:"ugb-video-popup-link blocks-button__inline-link"},wp.element.createElement(p,{icon:"admin-links"}),wp.element.createElement(v,{value:o,onChange:function(e){return t({videoLink:e})}}),wp.element.createElement(i,{icon:"editor-break",label:a("Apply"),type:"submit"}),wp.element.createElement("p",null,wp.element.createElement("i",null,"Youtube/Vimeo ID only")))]},x=function(e){var t=e.attributes,n=t.videoLink,l=t.mediaLink,o=t.overlayColor,r=t.playButtonType;t.mediaID;return wp.element.createElement("div",{className:"ugb-video-popup","data-video":n,style:{backgroundColor:o}},wp.element.createElement("div",{className:"ugb-video-preview",style:{backgroundImage:"url("+l+")"},"data-url":l}),wp.element.createElement("div",{className:"ugb-video-wrapper"},wp.element.createElement("a",{href:"#",style:{backgroundColor:o}}),wp.element.createElement("span",{className:"ugb-play-button"},C[r])))};g("ugb/video-popup",{title:a("Video Popup"),icon:r.o,category:"common",keywords:[a("Video Popup"),a("Stackable")],attributes:{videoLink:{type:"string",source:"attribute",selector:".ugb-video-popup",attribute:"data-video"},mediaLink:{type:"string",source:"attribute",selector:".ugb-video-preview",attribute:"data-url"},mediaID:{type:"number"},overlayColor:{type:"string",default:"#000000"},playButtonType:{type:"string",default:"normal"}},edit:E,save:x})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var l=n(59),o=(n.n(l),n(60)),r=(n.n(o),n(0)),a=wp.i18n.__,c=wp.components,i=c.PanelColor,u=c.Button,m=c.IconButton,s=c.Dashicon,p=c.withState,b=c.SelectControl,d=c.RangeControl,g=c.Toolbar,h=wp.blocks,w=h.registerBlockType,f=h.InspectorControls,y=h.RichText,v=h.ColorPalette,C=h.MediaUpload,E=h.BlockControls,x=h.UrlInput,T=h.AlignmentToolbar,k=function(e){var t=e.isSelected,n=e.editable,l=e.setState,o=(e.className,e.setAttributes),r=e.attributes,c=r.heading,p=r.tagline,h=r.des,w=r.mediaID,k=r.mediaURL,N=r.headingColor,S=r.taglineColor,B=r.desColor,L=r.buttonURL,F=r.buttonText,O=r.buttonColor,I=r.buttonTextColor,A=r.size,P=r.cornerButtonRadius,R=r.contentAlign,z=function(e){return function(){l({editable:e})}},V=k?"has-image":"",M=[{value:"small",label:a("Small")},{value:"normal",label:a("Normal")},{value:"medium",label:a("Medium")},{value:"large",label:a("Large")}];return[t&&wp.element.createElement(E,{key:"controls"},wp.element.createElement(T,{value:R,onChange:function(e){return o({contentAlign:e})}}),wp.element.createElement(g,null,wp.element.createElement(C,{onSelect:function(e){return o({mediaURL:e.url,mediaID:e.id})},type:"image",value:w,render:function(e){var t=e.open;return wp.element.createElement(m,{className:"components-toolbar__control",label:a("Edit image"),icon:"edit",onClick:t})}}))),t&&wp.element.createElement(f,{key:"inspector"},wp.element.createElement(i,{title:a("Heading Color"),colorValue:N,initialOpen:!1},wp.element.createElement(v,{value:N,onChange:function(e){return o({headingColor:e})}})),wp.element.createElement(i,{title:a("Tagline Color"),colorValue:S,initialOpen:!1},wp.element.createElement(v,{value:S,onChange:function(e){return o({taglineColor:e})}})),wp.element.createElement(i,{title:a("Description Color"),colorValue:B,initialOpen:!1},wp.element.createElement(v,{value:B,onChange:function(e){return o({desColor:e})}})),wp.element.createElement("h2",null,"Button Settings"),wp.element.createElement(b,{label:a("Button Size"),value:A,options:M.map(function(e){return{value:e.value,label:e.label}}),onChange:function(e){o({size:e})}}),wp.element.createElement(d,{label:a("Corner Radius"),value:P,min:"1",max:"50",onChange:function(e){return o({cornerButtonRadius:e})}}),wp.element.createElement(i,{title:a("Button Color"),colorValue:O,initialOpen:!1},wp.element.createElement(v,{value:O,onChange:function(e){return o({buttonColor:e})}})),wp.element.createElement(i,{title:a("Button Text Color"),colorValue:I,initialOpen:!1},wp.element.createElement(v,{value:I,onChange:function(e){return o({buttonTextColor:e})}}))),wp.element.createElement("div",{key:"editable",className:"ugb-card "+V},wp.element.createElement("div",{className:"ugb-card-image-container",style:{backgroundImage:"url("+k+")",textAlign:R}},wp.element.createElement(C,{onSelect:function(e){return o({mediaURL:e.url,mediaID:e.id})},type:"image",value:w,render:function(e){return[!k&&wp.element.createElement(u,{className:w?"":"button button-large",onClick:e.open},a("Upload Image"))]}})),wp.element.createElement(y,{tagName:"h4",value:c,className:"ugb-card-heading",onChange:function(e){return o({heading:e})},isSelected:t&&"heading"===n,onFocus:z("heading"),style:{color:N,textAlign:R},keepPlaceholderOnFocus:!0}),wp.element.createElement(y,{tagName:"p",value:p,className:"ugb-tagline",onChange:function(e){return o({tagline:e})},isSelected:t&&"tagline"===n,onFocus:z("tagline"),style:{color:S,textAlign:R},keepPlaceholderOnFocus:!0}),wp.element.createElement(y,{tagName:"p",value:h,className:"ugb-card-des",onChange:function(e){return o({des:e})},isSelected:t&&"des"===n,onFocus:z("des"),style:{color:B,textAlign:R},keepPlaceholderOnFocus:!0}),wp.element.createElement("span",{key:"button",className:"wp-block-button ugb-button-"+R},wp.element.createElement(y,{tagName:"span",placeholder:F.default,value:F,onChange:function(e){return o({buttonText:e})},className:"wp-ugb-button ugb-button-"+A,style:{backgroundColor:O,color:I,borderRadius:P+"px"},isSelected:t&&"buttonText"===n,onFocus:z("buttonText"),keepPlaceholderOnFocus:!0}))),t&&wp.element.createElement("form",{key:"form-link",onSubmit:function(e){return e.preventDefault()},className:"blocks-button__inline-link ugb-button-"+R,style:{marginTop:10}},wp.element.createElement(s,{icon:"admin-links"}),wp.element.createElement(x,{value:L,onChange:function(e){return o({buttonURL:e})}}),wp.element.createElement(m,{icon:"editor-break",label:a("Apply"),type:"submit"}))]},N=function(e){var t=e.attributes,n=t.heading,l=t.tagline,o=t.des,r=t.mediaURL,a=(t.mediaID,t.headingColor),c=t.taglineColor,i=t.desColor,u=t.buttonURL,m=t.buttonText,s=t.buttonColor,p=t.buttonTextColor,b=t.size,d=t.cornerButtonRadius,g=t.contentAlign,h={backgroundColor:s,color:p,borderRadius:d+"px"},w=r?"has-image":"",f=n.length||l.length||o.length||m.length?"has-content":"has-no-content";return wp.element.createElement("div",{className:"ugb-card "+w+" "+f},r&&wp.element.createElement("div",{className:"ugb-card-image-container",style:{backgroundImage:"url("+r+")"},"data-src":r}),n&&!!n.length&&wp.element.createElement("h4",{style:{color:a,textAlign:g}},n),l&&!!l.length&&wp.element.createElement("p",{className:"ugb-tagline",style:{color:c,textAlign:g}},l),o&&!!o.length&&wp.element.createElement("p",{className:"ugb-card-des",style:{color:i,textAlign:g}},o),m&&!!m.length&&wp.element.createElement("a",{href:u,className:"wp-ugb-button wp-block-button ugb-button-"+b+" ugb-button-"+g,style:h},m))};w("ugb/card",{title:a("Card"),icon:r.m,category:"common",keywords:[a("Card"),a("Stackable")],attributes:{mediaID:{type:"number"},mediaURL:{type:"string",source:"attribute",selector:".ugb-card-image-container",attribute:"data-src"},heading:{type:"array",source:"children",selector:".ugb-card h4",default:a("Ben Adams")},tagline:{type:"array",source:"children",selector:".ugb-tagline",default:a("Ben is the head of our small team")},des:{type:"array",source:"children",selector:".ugb-card-des",default:a("Ben is the head of our small team. He loves walking his dog, Walter, when he has some free time.")},headingColor:{type:"string"},taglineColor:{type:"string"},desColor:{type:"string"},buttonURL:{type:"string",source:"attribute",selector:".wp-ugb-button",attribute:"href"},buttonText:{type:"array",source:"children",selector:".wp-block-button",default:a("Button")},buttonColor:{type:"string",default:"#2091e1"},buttonTextColor:{type:"string",default:"#ffffff"},size:{type:"string",default:"normal"},cornerButtonRadius:{type:"number",default:4},contentAlign:{type:"string",default:"left"}},edit:p({editable:"content"})(k),save:N})},function(e,t){},function(e,t){}]);
dist/blocks.editor.build.css CHANGED
@@ -13,3 +13,6 @@
13
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}
14
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}
15
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}
 
 
 
13
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}
14
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}
15
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}
16
+ .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}
17
+ .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}
18
+ .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.edit-post-visual-editor .ugb-card{margin:0 !important}.edit-post-visual-editor .ugb-card .ugb-card-image-container{padding:0}.edit-post-visual-editor .ugb-card button{margin:0 30px}.edit-post-visual-editor .ugb-card.has-image button{width:100%;height:300px;padding:0}
dist/blocks.style.build.css CHANGED
@@ -1,5 +1,5 @@
1
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}
2
- .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.wp-block-ugb-divider{border:0;height:1px;width:100%;background-color:transparent;margin-top:2rem;margin-bottom:2rem}.wp-block-ugb-divider hr{background-color:#dddddd;border:0 !important}
3
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.wp-block-button.ugb-button-center{-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);left:50%;position:relative}span.wp-block-button.ugb-button-right,form.blocks-button__inline-link.ugb-button-right{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);left:100%;position:relative}form.blocks-button__inline-link.ugb-button-center{margin:0 auto}.wp-ugb-button.wp-ugb-button{border:none;border-radius:4px;-webkit-box-shadow:none !important;box-shadow:none !important;cursor:pointer;display:inline-block;line-height:1em;margin:0;text-decoration:none !important;white-space:nowrap;display:inline-block;opacity:1;background:#2091e1;color:#fff;padding:0.75em 1em;-webkit-transition:opacity .2s ease-in-out;-o-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out;box-shadow:none !important}.wp-ugb-button.wp-ugb-button:hover{opacity:.85;-webkit-box-shadow:none !important;box-shadow:none !important;border:0}.wp-block-ugb-button .wp-ugb-button:hover{color:white}.wp-block-ugb-button.ugb-button-right{margin:10px 0;text-align:right}.wp-block-ugb-button.ugb-button-center{margin:10px 0;text-align:center}.wp-block-ugb-button.ugb-button-left{margin:10px 0;text-align:left}.ugb-button-small{font-size:.75em}.ugb-button-normal{font-size:1em}.ugb-button-medium{font-size:1.25em}.ugb-button-large{font-size:1.5em}
4
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.wp-block-ugb-ghost-button.ugb-button-right{margin:10px 0;text-align:right}.wp-block-ugb-ghost-button.ugb-button-center{margin:10px 0;text-align:center}.wp-block-ugb-ghost-button.ugb-button-left{margin:10px 0;text-align:left}.wp-block-button .wp-ugb-button.ugb-ghost-button,.wp-block-ugb-ghost-button .wp-ugb-button.ugb-ghost-button{background-color:transparent;border:2px solid #2091e1;color:#2091e1}.wp-block-button .wp-ugb-button.ugb-ghost-button:hover,.wp-block-ugb-ghost-button .wp-ugb-button.ugb-ghost-button:hover{opacity:.85;-webkit-box-shadow:none !important;box-shadow:none !important;color:#2091e1}
5
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.wp-block-ugb-notification{position:relative}.wp-ugb-notif{border-radius:4px;padding:1.3em 1.5em;color:#ffffff}.notif-success{background-color:#40ba7b}.notif-error{background-color:#d9534f}.notif-warning{background-color:#ffdd57;color:#424242}.notif-info{background-color:#2091e1}.ugb-notification,.wp-block-ugb-notification{position:relative}.ugb-notification .close-button,.wp-block-ugb-notification .close-button{position:absolute;right:0;z-index:2;margin-right:1.5rem;margin-top:1.3rem;font-size:8px;padding-top:.3rem;cursor:pointer}.ugb-notification .close-button svg,.wp-block-ugb-notification .close-button svg{width:13px;height:auto}.ugb-notification.dismissible-true .wp-ugb-notif{padding-right:4rem}.ugb-notification.type-success svg,.ugb-notification.type-error svg,.ugb-notification.type-info svg{fill:#ffffff}.ugb-notification.type-warning svg{fill:#424242}.ugb-notification.dismissible-true[data-uid]{display:none}
@@ -10,6 +10,9 @@
10
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.ugb-team-member .team-member-image{width:300px;height:300px;background-size:cover;background-position:center;margin:0 auto 1.3rem}.ugb-team-member.image-circle .team-member-image{border-radius:100%}.ugb-team-member.column-2 .team-member-image{width:220px;height:220px}.ugb-team-member.column-3 .team-member-image{width:150px;height:150px}.ugb-team-member>div{text-align:center;padding:1rem 0}.ugb-team-member>div p{text-align:center}.ugb-team-member h4{margin:0 0 .5rem !important}.ugb-team-member .ugb-team-member-position{margin:0 0 1rem}.ugb-team-member .ugb-team-member-position{opacity:.3;font-size:.75em;text-transform:uppercase}.ugb-team-member .ugb-team-member-des,.ugb-team-member .ugb-team-member-des-two,.ugb-team-member .ugb-team-member-des-three{opacity:.5;margin:0 0 1rem;left:0}.ugb-team-member.column-1 .ugb-team-member-column-two,.ugb-team-member.column-1 .ugb-team-member-column-three{display:none}.ugb-team-member.column-2{display:-ms-flexbox;display:flex}.ugb-team-member.column-2 .ugb-team-member-column-one{padding-right:1rem}.ugb-team-member.column-2 .ugb-team-member-column-two{padding-left:1rem}.ugb-team-member.column-2 .ugb-team-member-column-one,.ugb-team-member.column-2 .ugb-team-member-column-two{width:50%}.ugb-team-member.column-2 .ugb-team-member-column-three{display:none}.ugb-team-member.column-2 .team-member-image img{height:200px;width:250px}.ugb-team-member.column-3{display:-ms-flexbox;display:flex}.ugb-team-member.column-3 .ugb-team-member-column-one,.ugb-team-member.column-3 .ugb-team-member-column-two,.ugb-team-member.column-3 .ugb-team-member-column-three{width:33.33%}.ugb-team-member.column-3 .ugb-team-member-column-one{padding-right:1rem}.ugb-team-member.column-3 .ugb-team-member-column-two{padding-left:1rem;padding-right:1rem}.ugb-team-member.column-3 .ugb-team-member-column-three{padding-left:1rem}.ugb-team-member.column-3 .team-member-image img{height:200px;width:200px}.team-member-social a{color:#000000;opacity:.30;padding:0 3px}
11
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.wp-block-ugb-expand p:last-child{margin-bottom:0}.wp-block-ugb-expand.ugb-more .ugb-expand-less-text,.wp-block-ugb-expand.ugb-more .ugb-expand-more{display:none}.wp-block-ugb-expand.ugb-more .ugb-expand-more-text,.wp-block-ugb-expand.ugb-more .ugb-expand-less{display:inline !important}
12
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.ugb-number-box{display:-ms-flexbox;display:flex;margin:1rem 0}.ugb-number-box span,.ugb-number-box .blocks-rich-text span{background-color:#ddd;border-radius:100%;font-size:3em;display:block;padding:0;text-align:center;overflow:hidden;margin:0 auto;height:2.5em;width:2.5em;line-height:2.5em}.ugb-number-box>div{text-align:center;margin:0 auto}.ugb-number-box>div p{text-align:center}.ugb-number-box .ugb-number-box-name,.ugb-number-box .ugb-number-box-name-two,.ugb-number-box .ugb-number-box-name-three{margin:1.3rem 0 1rem}.ugb-number-box .ugb-number-box-body,.ugb-number-box .ugb-number-box-body-two,.ugb-number-box .ugb-number-box-body-three{opacity:.5;margin:0 0 1rem;left:0}.ugb-number-box.column-1 .ugb-number-box-column-two,.ugb-number-box.column-1 .ugb-number-box-column-three{display:none}.ugb-number-box.column-2 .ugb-number-box-column-one{margin-right:1rem}.ugb-number-box.column-2 .ugb-number-box-column-two{margin-left:1rem}.ugb-number-box.column-2>div{width:50%}.ugb-number-box.column-2 .ugb-number-box-column-three{display:none}.ugb-number-box.column-3>div{width:33.2%;margin-left:1rem;margin-right:1rem}.ugb-number-box.column-3>div:first-child{margin-left:0}.ugb-number-box.column-3>div:last-child{margin-right:0}@media screen and (max-width: 800px){.ugb-number-box.column-3.column-3{display:block}.ugb-number-box.column-3.column-3>div{width:100%;margin:0}}@media screen and (max-width: 600px){.ugb-number-box.column-2.column-2{display:block}.ugb-number-box.column-2.column-2>div{width:100%;margin:0}}
 
 
13
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.ugb-image-box{background-size:cover;background-position:center;padding:2rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin:0 auto;position:relative;background-color:#999}.ugb-image-box *{-webkit-transition:all .4s ease-in-out !important;-o-transition:all .4s ease-in-out !important;transition:all .4s ease-in-out !important;border:0 !important;-webkit-box-shadow:none !important;box-shadow:none !important}.ugb-image-box button.components-button{z-index:3;margin-bottom:1em}.ugb-image-box a{position:absolute;z-index:2;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none}.ugb-image-box h4,.ugb-image-box p{z-index:3}.ugb-image-box h4{margin:0 0 0.5em !important}.ugb-image-box p{margin:0 !important;opacity:0;-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}.ugb-image-box:hover a{opacity:.7}.ugb-image-box:hover p{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.ugb-image-box.full-width{width:100% !important}.wp-block-ugb-image-box.has-no-content{display:none}
14
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.ugb-countup{text-align:center;margin-bottom:1em}.ugb-countup h4,.ugb-countup div,.ugb-countup p{margin:0 !important;line-height:1em}.ugb-countup h4{margin-bottom:1em !important}.ugb-countup p{margin-top:1em !important}.ugb-countup .ugb-countup-hide{visibility:hidden}
15
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.video-popup-image{height:220px;width:220px;background-position:center;background-size:cover;margin-bottom:10px}.ugb-video-popup{position:relative;margin:0 auto;width:100%;max-width:600px}.ugb-video-popup .ugb-video-preview,.ugb-video-popup a,.ugb-video-popup .ugb-video-overlay,.ugb-video-popup .ugb-play-button{position:absolute;top:0;left:0;right:0;bottom:0}.ugb-video-popup .ugb-video-preview{background-size:cover;background-position:center;opacity:.4;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;z-index:1}.ugb-video-popup:hover .ugb-video-preview{opacity:.5}.ugb-video-popup .ugb-video-wrapper{position:relative;width:100%;padding-bottom:56.25%;border:0 !important;-webkit-box-shadow:none !important;box-shadow:none !important}.ugb-video-popup a,.ugb-video-popup .ugb-video-overlay{z-index:3;-webkit-box-shadow:none !important;box-shadow:none !important;background:transparent !important;display:block !important}.ugb-video-popup .ugb-play-button{z-index:2;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column}.ugb-video-popup svg{fill:#fff !important}.ugb-video-popup button.components-button.button{position:absolute;z-index:4;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);top:30%}.ugb-video-popup button.components-button.button:active{-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.ugb-video-popup-link.blocks-button__inline-link{margin:5px auto}.ugb-video-popup-link.blocks-button__inline-link>p{font-size:.8em;margin-left:30px}
 
1
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}
2
+ .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.wp-block-ugb-divider{border:0;height:1px;width:100%;background-color:transparent;margin-top:2rem;margin-bottom:2rem}.wp-block-ugb-divider hr{background-color:#dddddd;border:0 !important;padding:0 !important}
3
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.wp-block-button.ugb-button-center{-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);left:50%;position:relative}span.wp-block-button.ugb-button-right,form.blocks-button__inline-link.ugb-button-right{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);left:100%;position:relative}form.blocks-button__inline-link.ugb-button-center{margin:0 auto}.wp-ugb-button.wp-ugb-button{border:none;border-radius:4px;-webkit-box-shadow:none !important;box-shadow:none !important;cursor:pointer;display:inline-block;line-height:1em;margin:0;text-decoration:none !important;white-space:nowrap;display:inline-block;opacity:1;background:#2091e1;color:#fff;padding:0.75em 1em;-webkit-transition:opacity .2s ease-in-out;-o-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out;box-shadow:none !important}.wp-ugb-button.wp-ugb-button:hover{opacity:.85;-webkit-box-shadow:none !important;box-shadow:none !important;border:0}.wp-block-ugb-button .wp-ugb-button:hover{color:white}.wp-block-ugb-button.ugb-button-right{margin:10px 0;text-align:right}.wp-block-ugb-button.ugb-button-center{margin:10px 0;text-align:center}.wp-block-ugb-button.ugb-button-left{margin:10px 0;text-align:left}.ugb-button-small{font-size:.75em}.ugb-button-normal{font-size:1em}.ugb-button-medium{font-size:1.25em}.ugb-button-large{font-size:1.5em}
4
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.wp-block-ugb-ghost-button.ugb-button-right{margin:10px 0;text-align:right}.wp-block-ugb-ghost-button.ugb-button-center{margin:10px 0;text-align:center}.wp-block-ugb-ghost-button.ugb-button-left{margin:10px 0;text-align:left}.wp-block-button .wp-ugb-button.ugb-ghost-button,.wp-block-ugb-ghost-button .wp-ugb-button.ugb-ghost-button{background-color:transparent;border:2px solid #2091e1;color:#2091e1}.wp-block-button .wp-ugb-button.ugb-ghost-button:hover,.wp-block-ugb-ghost-button .wp-ugb-button.ugb-ghost-button:hover{opacity:.85;-webkit-box-shadow:none !important;box-shadow:none !important;color:#2091e1}
5
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.wp-block-ugb-notification{position:relative}.wp-ugb-notif{border-radius:4px;padding:1.3em 1.5em;color:#ffffff}.notif-success{background-color:#40ba7b}.notif-error{background-color:#d9534f}.notif-warning{background-color:#ffdd57;color:#424242}.notif-info{background-color:#2091e1}.ugb-notification,.wp-block-ugb-notification{position:relative}.ugb-notification .close-button,.wp-block-ugb-notification .close-button{position:absolute;right:0;z-index:2;margin-right:1.5rem;margin-top:1.3rem;font-size:8px;padding-top:.3rem;cursor:pointer}.ugb-notification .close-button svg,.wp-block-ugb-notification .close-button svg{width:13px;height:auto}.ugb-notification.dismissible-true .wp-ugb-notif{padding-right:4rem}.ugb-notification.type-success svg,.ugb-notification.type-error svg,.ugb-notification.type-info svg{fill:#ffffff}.ugb-notification.type-warning svg{fill:#424242}.ugb-notification.dismissible-true[data-uid]{display:none}
10
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.ugb-team-member .team-member-image{width:300px;height:300px;background-size:cover;background-position:center;margin:0 auto 1.3rem}.ugb-team-member.image-circle .team-member-image{border-radius:100%}.ugb-team-member.column-2 .team-member-image{width:220px;height:220px}.ugb-team-member.column-3 .team-member-image{width:150px;height:150px}.ugb-team-member>div{text-align:center;padding:1rem 0}.ugb-team-member>div p{text-align:center}.ugb-team-member h4{margin:0 0 .5rem !important}.ugb-team-member .ugb-team-member-position{margin:0 0 1rem}.ugb-team-member .ugb-team-member-position{opacity:.3;font-size:.75em;text-transform:uppercase}.ugb-team-member .ugb-team-member-des,.ugb-team-member .ugb-team-member-des-two,.ugb-team-member .ugb-team-member-des-three{opacity:.5;margin:0 0 1rem;left:0}.ugb-team-member.column-1 .ugb-team-member-column-two,.ugb-team-member.column-1 .ugb-team-member-column-three{display:none}.ugb-team-member.column-2{display:-ms-flexbox;display:flex}.ugb-team-member.column-2 .ugb-team-member-column-one{padding-right:1rem}.ugb-team-member.column-2 .ugb-team-member-column-two{padding-left:1rem}.ugb-team-member.column-2 .ugb-team-member-column-one,.ugb-team-member.column-2 .ugb-team-member-column-two{width:50%}.ugb-team-member.column-2 .ugb-team-member-column-three{display:none}.ugb-team-member.column-2 .team-member-image img{height:200px;width:250px}.ugb-team-member.column-3{display:-ms-flexbox;display:flex}.ugb-team-member.column-3 .ugb-team-member-column-one,.ugb-team-member.column-3 .ugb-team-member-column-two,.ugb-team-member.column-3 .ugb-team-member-column-three{width:33.33%}.ugb-team-member.column-3 .ugb-team-member-column-one{padding-right:1rem}.ugb-team-member.column-3 .ugb-team-member-column-two{padding-left:1rem;padding-right:1rem}.ugb-team-member.column-3 .ugb-team-member-column-three{padding-left:1rem}.ugb-team-member.column-3 .team-member-image img{height:200px;width:200px}.team-member-social a{color:#000000;opacity:.30;padding:0 3px}
11
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.wp-block-ugb-expand p:last-child{margin-bottom:0}.wp-block-ugb-expand.ugb-more .ugb-expand-less-text,.wp-block-ugb-expand.ugb-more .ugb-expand-more{display:none}.wp-block-ugb-expand.ugb-more .ugb-expand-more-text,.wp-block-ugb-expand.ugb-more .ugb-expand-less{display:inline !important}
12
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.ugb-number-box{display:-ms-flexbox;display:flex;margin:1rem 0}.ugb-number-box span,.ugb-number-box .blocks-rich-text span{background-color:#ddd;border-radius:100%;font-size:3em;display:block;padding:0;text-align:center;overflow:hidden;margin:0 auto;height:2.5em;width:2.5em;line-height:2.5em}.ugb-number-box>div{text-align:center;margin:0 auto}.ugb-number-box>div p{text-align:center}.ugb-number-box .ugb-number-box-name,.ugb-number-box .ugb-number-box-name-two,.ugb-number-box .ugb-number-box-name-three{margin:1.3rem 0 1rem}.ugb-number-box .ugb-number-box-body,.ugb-number-box .ugb-number-box-body-two,.ugb-number-box .ugb-number-box-body-three{opacity:.5;margin:0 0 1rem;left:0}.ugb-number-box.column-1 .ugb-number-box-column-two,.ugb-number-box.column-1 .ugb-number-box-column-three{display:none}.ugb-number-box.column-2 .ugb-number-box-column-one{margin-right:1rem}.ugb-number-box.column-2 .ugb-number-box-column-two{margin-left:1rem}.ugb-number-box.column-2>div{width:50%}.ugb-number-box.column-2 .ugb-number-box-column-three{display:none}.ugb-number-box.column-3>div{width:33.2%;margin-left:1rem;margin-right:1rem}.ugb-number-box.column-3>div:first-child{margin-left:0}.ugb-number-box.column-3>div:last-child{margin-right:0}@media screen and (max-width: 800px){.ugb-number-box.column-3.column-3{display:block}.ugb-number-box.column-3.column-3>div{width:100%;margin:0}}@media screen and (max-width: 600px){.ugb-number-box.column-2.column-2{display:block}.ugb-number-box.column-2.column-2>div{width:100%;margin:0}}
13
+ .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.ugb-pricing-box{display:-ms-flexbox;display:flex;margin-top:2rem;margin-bottom:2rem}.ugb-pricing-box>div{text-align:center;margin:0 auto}.ugb-pricing-box>div p{text-align:center;padding-bottom:0}.ugb-pricing-box h3{margin:0 0 2rem !important;line-height:100% !important}.ugb-pricing-box .ugb-pricing-box-pricing{font-size:3.5em;margin:0 0 .5rem;line-height:100% !important}.ugb-pricing-box .ugb-pricing-box-per-month-label{font-size:.75em;opacity:.3;margin:0 0 2rem;text-transform:uppercase;line-height:100% !important}.ugb-pricing-box .wp-ugb-button{margin-bottom:2rem}.ugb-pricing-box .ugb-pricing-box-feature-list{opacity:.5;font-size:1em;line-height:1.8em !important;width:40%;margin:0 auto}.blocks-button__inline-link.pricing-box{margin:5px auto 0px auto}.ugb-pricing-box.column-1 .ugb-pricing-box-column-two,.ugb-pricing-box.column-1 .ugb-pricing-box-column-three{display:none}.ugb-pricing-box.column-2 .ugb-pricing-box-feature-list{width:85%;margin:0 auto}.ugb-pricing-box.column-2 .ugb-pricing-box-column-one{margin-right:2rem}.ugb-pricing-box.column-2 .ugb-pricing-box-column-two{border-left:1px solid #eee;margin-left:0;padding-left:2rem}.ugb-pricing-box.column-2>div{width:50%}.ugb-pricing-box.column-2 .ugb-pricing-box-column-three{display:none}.ugb-pricing-box.column-2 .blocks-button__inline-link{width:225px}.ugb-pricing-box.column-3>div{width:33.2%;margin-left:1rem;margin-right:1rem}.ugb-pricing-box.column-3>div:first-child{margin-left:0}.ugb-pricing-box.column-3>div:last-child{margin-right:0}.ugb-pricing-box.column-3 .ugb-pricing-box-column-two{border-left:1px solid #eee;border-right:1px solid #eee;margin-left:0;margin-right:0;padding-left:1rem;padding-right:1rem}.ugb-pricing-box.column-3 .ugb-pricing-box-feature-list{width:100%}.ugb-pricing-box.column-3 .blocks-button__inline-link{width:181px}.ugb-pricing-box.column-3 .blocks-button__inline-link .blocks-url-input{width:50%}@media screen and (max-width: 800px){.ugb-pricing-box.column-3.column-3{display:block}.ugb-pricing-box.column-3.column-3>div{width:100%;margin:0}}@media screen and (max-width: 600px){.ugb-pricing-box.column-2.column-2{display:block}.ugb-pricing-box.column-2.column-2>div{width:100%;margin:0}}
14
+ .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.ugb-header.has-image{padding:0}.ugb-header.has-image .ugb-header-section{padding:9.5rem 4rem;background-size:cover;background-repeat:no-repeat;background-position:center}.ugb-header{text-align:center;padding:9.5rem 4rem;position:relative}.ugb-header .ugb-header-overlay{position:absolute;top:0;left:0;right:0;bottom:0}.ugb-header .header-image{height:400px;width:600px;background-size:cover;background-repeat:no-repeat;background-position:center}.ugb-header .wp-block-button.ugb-button-center{left:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);margin-bottom:1.5em}.ugb-header .wp-block-button.ugb-button-right{-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);left:50%;margin-bottom:1.5em}.ugb-header .wp-block-button.ugb-button-left{-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);left:-50%;margin-bottom:1.5em}.ugb-header .ugb-header-title{margin-bottom:1rem;padding-bottom:0;margin-top:0;position:relative}.ugb-header .ugb-header-subtitle{margin-bottom:2rem;padding-bottom:0;position:relative}.ugb-header button.components-button{margin-bottom:.5em;position:relative}.ugb-header .wp-ugb-button{position:relative}.ugb-header-overlay.overlay-opacity.overlay-opacity-1{opacity:.1}.ugb-header-overlay.overlay-opacity.overlay-opacity-2{opacity:.2}.ugb-header-overlay.overlay-opacity.overlay-opacity-3{opacity:.3}.ugb-header-overlay.overlay-opacity.overlay-opacity-4{opacity:.4}.ugb-header-overlay.overlay-opacity.overlay-opacity-5{opacity:.5}.ugb-header-overlay.overlay-opacity.overlay-opacity-6{opacity:.6}.ugb-header-overlay.overlay-opacity.overlay-opacity-7{opacity:.7}.ugb-header-overlay.overlay-opacity.overlay-opacity-8{opacity:.8}.ugb-header-overlay.overlay-opacity.overlay-opacity-9{opacity:.9}.ugb-header-overlay.overlay-opacity.overlay-opacity-10{opacity:1}.wp-block-ugb-header.has-no-content{display:none}
15
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.ugb-image-box{background-size:cover;background-position:center;padding:2rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin:0 auto;position:relative;background-color:#999}.ugb-image-box *{-webkit-transition:all .4s ease-in-out !important;-o-transition:all .4s ease-in-out !important;transition:all .4s ease-in-out !important;border:0 !important;-webkit-box-shadow:none !important;box-shadow:none !important}.ugb-image-box button.components-button{z-index:3;margin-bottom:1em}.ugb-image-box a{position:absolute;z-index:2;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none}.ugb-image-box h4,.ugb-image-box p{z-index:3}.ugb-image-box h4{margin:0 0 0.5em !important}.ugb-image-box p{margin:0 !important;opacity:0;-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}.ugb-image-box:hover a{opacity:.7}.ugb-image-box:hover p{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.ugb-image-box.full-width{width:100% !important}.wp-block-ugb-image-box.has-no-content{display:none}
16
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.ugb-countup{text-align:center;margin-bottom:1em}.ugb-countup h4,.ugb-countup div,.ugb-countup p{margin:0 !important;line-height:1em}.ugb-countup h4{margin-bottom:1em !important}.ugb-countup p{margin-top:1em !important}.ugb-countup .ugb-countup-hide{visibility:hidden}
17
  .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.video-popup-image{height:220px;width:220px;background-position:center;background-size:cover;margin-bottom:10px}.ugb-video-popup{position:relative;margin:0 auto;width:100%;max-width:600px}.ugb-video-popup .ugb-video-preview,.ugb-video-popup a,.ugb-video-popup .ugb-video-overlay,.ugb-video-popup .ugb-play-button{position:absolute;top:0;left:0;right:0;bottom:0}.ugb-video-popup .ugb-video-preview{background-size:cover;background-position:center;opacity:.4;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;z-index:1}.ugb-video-popup:hover .ugb-video-preview{opacity:.5}.ugb-video-popup .ugb-video-wrapper{position:relative;width:100%;padding-bottom:56.25%;border:0 !important;-webkit-box-shadow:none !important;box-shadow:none !important}.ugb-video-popup a,.ugb-video-popup .ugb-video-overlay{z-index:3;-webkit-box-shadow:none !important;box-shadow:none !important;background:transparent !important;display:block !important}.ugb-video-popup .ugb-play-button{z-index:2;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column}.ugb-video-popup svg{fill:#fff !important}.ugb-video-popup button.components-button.button{position:absolute;z-index:4;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);top:30%}.ugb-video-popup button.components-button.button:active{-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.ugb-video-popup-link.blocks-button__inline-link{margin:5px auto}.ugb-video-popup-link.blocks-button__inline-link>p{font-size:.8em;margin-left:30px}
18
+ .gutenberg .ugb-editor-label{font-size:12px;text-transform:uppercase;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:#8e979e;padding:2em 0 0;background:#fff;border:none;-webkit-box-shadow:none;box-shadow:none;white-space:nowrap;display:block}.gutenberg .ugb-editor-label:first-child{padding-top:0}.ugb-card{border-radius:4px;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.1);box-shadow:0 0 5px rgba(0,0,0,0.1);margin:30px 0;padding-bottom:30px}.ugb-card:not(.has-image){padding-top:30px}.ugb-card.has-image .ugb-card-image-container{height:300px;width:100%;margin:0 auto 20px;background-size:cover;background-position:center;border-top-right-radius:4px;border-top-left-radius:4px;padding-top:0px}.ugb-card>*:first-child{margin-top:0 !important}.ugb-card>*:last-child{margin-bottom:0 !important}.ugb-card>h4,.ugb-card>*{margin:0 30px .5rem !important}.ugb-card .wp-ugb-button{margin-top:1rem !important}.ugb-card .ugb-card-image-container{margin:0 0 20px !important}.ugb-card .ugb-tagline{opacity:.7}.ugb-card .wp-block-button.ugb-button-center{margin-left:0 !important;margin-right:0 !important}.ugb-card .wp-block-button.ugb-button-right{-webkit-transform:translateX(-100%) translateX(-60px);-ms-transform:translateX(-100%) translateX(-60px);transform:translateX(-100%) translateX(-60px)}
plugin.php CHANGED
@@ -5,7 +5,7 @@
5
  * Description: Essential Gutenberg blocks in one plugin. Simple, flexible, and customizable.
6
  * Author: Gambit Technologies, Inc
7
  * Author URI: http://gambit.ph
8
- * Version: 0.3.1
9
  *
10
  * @package Stackable
11
  */
5
  * Description: Essential Gutenberg blocks in one plugin. Simple, flexible, and customizable.
6
  * Author: Gambit Technologies, Inc
7
  * Author URI: http://gambit.ph
8
+ * Version: 0.4
9
  *
10
  * @package Stackable
11
  */
readme.txt CHANGED
@@ -2,9 +2,9 @@
2
  Contributors: bfintal, reggieduran, gambitph, freemius
3
  Tags: gutenberg, blocks, gutenberg blocks, editor, addon, add on, add-on, gutenberg addon, wordpress 5.0, simple, essential, options, all in one
4
  Requires at least: 4.8
5
- Tested up to: 4.9.4
6
  Requires PHP: 5.3
7
- Stable tag: 0.3.1
8
  License: GPLv3
9
  License URI: https://www.gnu.org/licenses/gpl-3.0.html
10
 
@@ -16,7 +16,7 @@ Stackable adds the missing design blocks and options you need in the Gutenberg e
16
 
17
  > [Website](https://wpstackable.com/) | [Want more blocks? Join our newsletter](https://wpstackable.com/#newsletter)
18
 
19
- **15 Blocks so far and counting...**
20
 
21
  > We are in alpha stage until Gutenberg is merged into core. As features, APIs, and best practices change in Gutenberg, so will this plugin.
22
 
@@ -30,21 +30,23 @@ With Stackable: Ultimate Blocks for Gutenberg, you get your essential blocks and
30
 
31
  These blocks are built with usability in mind. Stackable is also designed to suit Gutenberg's interface, simple and straightforward:
32
 
33
- 1. Image box (New!)
34
- 2. Count up (New!)
35
- 3. Video Popup (New!)
36
- 4. Testimonials
37
- 5. Team Members
38
- 6. Call to Action
39
- 7. Notification
40
- 8. Blockquote (Improved!)
41
- 9. Pullquote
42
- 10. Number box
43
- 11. Button (Improved!)
44
- 12. Ghost Button
45
- 13. Expand / Show more
46
- 14. Divider (Improved!)
47
- 15. Spacer
 
 
48
 
49
  We plan to add more in the future.
50
 
@@ -54,51 +56,71 @@ Each Stackable block has unique features you can modify. Change colors, tweak te
54
 
55
  = Our current list of blocks =
56
 
57
- **1. Testimonials**
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
58
 
59
  Add testimonial sections on your website. Add a text description, and choose between uploading a thumbnail image or icon for each testimonial.
60
 
61
- **2. Team Members**
62
 
63
  Introduce your team through individual photos and write-ups in columns. Comes with optional social media icons for each member.
64
 
65
- **3. Call to Action**
66
 
67
  Persuade your visitors to take action. Feature , and engage with Call to Action blocks.
68
 
69
- **4. Notification**
70
 
71
  Add alerts on your Gutenberg-built website. Use these to notify your site visitors of promos, license expiration, and other important alerts. Choose from a range of basic settings and styles.
72
 
73
- **5. Blockquote**
74
 
75
  Customize the current Gutenberg blockqoute by changing both text and background color.
76
 
77
- **6. Pullquote**
78
 
79
  Perfect for pulling quotes from your chosen article and showcasing them as your readers scroll down. Change text and background color to suit your page's design.
80
 
81
- **7. Number Box**
82
 
83
  Highlight steps or procedures that only take a few steps.
84
 
85
- **8. Button**
86
 
87
  A more flexible, customizable button block for Gutenberg. Change size, alignment, color, text color, and even corner radius to match the overall look of your site. Modify more by placing links and icons inside.
88
 
89
- **9. Ghost Button**
90
 
91
  Just like the Button block, but presented in a sleek, minimalistic way: outlines only.
92
 
93
- **10. Expand / Show More**
94
 
95
  Show snippets of text as short previews of longer text, and let visitors have the option to show more details.
96
 
97
- **11. Divider**
98
 
99
  Extended options for Gutenberg's divider. Adjust height, weight, color, and more.
100
 
101
- **12. Spacer**
102
 
103
  A simple block that lets you adjust space in between Gutenberg blocks on your page.
104
 
@@ -133,6 +155,12 @@ Nope. Stackable only works with Gutenberg.
133
 
134
  == Changelog ==
135
 
 
 
 
 
 
 
136
  = 0.3.1 =
137
  * Fixed: Notification block warnings
138
  * Fixed: Testimonial block warnings
2
  Contributors: bfintal, reggieduran, gambitph, freemius
3
  Tags: gutenberg, blocks, gutenberg blocks, editor, addon, add on, add-on, gutenberg addon, wordpress 5.0, simple, essential, options, all in one
4
  Requires at least: 4.8
5
+ Tested up to: 4.9.5
6
  Requires PHP: 5.3
7
+ Stable tag: 0.4
8
  License: GPLv3
9
  License URI: https://www.gnu.org/licenses/gpl-3.0.html
10
 
16
 
17
  > [Website](https://wpstackable.com/) | [Want more blocks? Join our newsletter](https://wpstackable.com/#newsletter)
18
 
19
+ **17 Blocks so far and counting...**
20
 
21
  > We are in alpha stage until Gutenberg is merged into core. As features, APIs, and best practices change in Gutenberg, so will this plugin.
22
 
30
 
31
  These blocks are built with usability in mind. Stackable is also designed to suit Gutenberg's interface, simple and straightforward:
32
 
33
+ 1. Card (New!)
34
+ 2. Pricing box (New!)
35
+ 3. Header (New!)
36
+ 4. Count up
37
+ 5. Video Popup
38
+ 6. Testimonials
39
+ 7. Team Members
40
+ 8. Call to Action
41
+ 9. Notification
42
+ 10. Blockquote (Improved!)
43
+ 11. Pullquote
44
+ 12. Number box
45
+ 13. Button (Improved!)
46
+ 14. Ghost Button
47
+ 15. Expand / Show more
48
+ 16. Divider (Improved!)
49
+ 17. Spacer
50
 
51
  We plan to add more in the future.
52
 
56
 
57
  = Our current list of blocks =
58
 
59
+ **1. Card**
60
+
61
+ A simple shadowed box you can use to showcase sections of your page. Add images, text, and buttons altogether to make a card.
62
+
63
+ **2. Pricing Box**
64
+
65
+ Sshowcase your products and their prices, including short descriptions and buttons. You can also edit the colors of the boxes along with its text.
66
+
67
+ **3. Header**
68
+
69
+ Welcome your customers to your page with simple, sleek header. Upload an image and adjust its tint, and add header text and up to 1 button.
70
+
71
+ **4. Count-Up**
72
+
73
+ Add a numerical value that animates in a count-up fashion. Perfect for business milestones, showcasing your number of happy customers, and more
74
+
75
+ **5. Video Popups**
76
+
77
+ Video thumbnails with videos that pop up on full screen upon clicking.
78
+
79
+ **6. Testimonials**
80
 
81
  Add testimonial sections on your website. Add a text description, and choose between uploading a thumbnail image or icon for each testimonial.
82
 
83
+ **7. Team Members**
84
 
85
  Introduce your team through individual photos and write-ups in columns. Comes with optional social media icons for each member.
86
 
87
+ **8. Call to Action**
88
 
89
  Persuade your visitors to take action. Feature , and engage with Call to Action blocks.
90
 
91
+ **9. Notification**
92
 
93
  Add alerts on your Gutenberg-built website. Use these to notify your site visitors of promos, license expiration, and other important alerts. Choose from a range of basic settings and styles.
94
 
95
+ **10. Blockquote**
96
 
97
  Customize the current Gutenberg blockqoute by changing both text and background color.
98
 
99
+ **11. Pullquote**
100
 
101
  Perfect for pulling quotes from your chosen article and showcasing them as your readers scroll down. Change text and background color to suit your page's design.
102
 
103
+ **12. Number Box**
104
 
105
  Highlight steps or procedures that only take a few steps.
106
 
107
+ **13. Button**
108
 
109
  A more flexible, customizable button block for Gutenberg. Change size, alignment, color, text color, and even corner radius to match the overall look of your site. Modify more by placing links and icons inside.
110
 
111
+ **14. Ghost Button**
112
 
113
  Just like the Button block, but presented in a sleek, minimalistic way: outlines only.
114
 
115
+ **15. Expand / Show More**
116
 
117
  Show snippets of text as short previews of longer text, and let visitors have the option to show more details.
118
 
119
+ **16. Divider**
120
 
121
  Extended options for Gutenberg's divider. Adjust height, weight, color, and more.
122
 
123
+ **17. Spacer**
124
 
125
  A simple block that lets you adjust space in between Gutenberg blocks on your page.
126
 
155
 
156
  == Changelog ==
157
 
158
+ = 0.4 =
159
+ * New: Card Block
160
+ * New: Pricing Block
161
+ * New: Header Block
162
+ * Fixed: Stackable block icons did not show in Gutenberg 2.6.0
163
+
164
  = 0.3.1 =
165
  * Fixed: Notification block warnings
166
  * Fixed: Testimonial block warnings
src/block/blockquote/index.js CHANGED
@@ -8,11 +8,15 @@
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
11
-
12
 
13
  const { __ } = wp.i18n; // Import __() from wp.i18n
14
- const { Component } = wp.element
15
- const { PanelColor, withState } = wp.components
 
 
 
 
16
  const {
17
  registerBlockType, // Import registerBlockType() from wp.blocks
18
  InspectorControls,
@@ -20,7 +24,75 @@ const {
20
  ColorPalette
21
  } = wp.blocks
22
 
23
- import { QuoteIcon } from '../../icons'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
 
25
  /**
26
  * Register: Gutenberg Block.
@@ -61,71 +133,8 @@ registerBlockType( 'ugb/blockquote', {
61
  },
62
 
63
  // The "edit" property must be a valid function.
64
- edit: withState( { editable: 'content', } )( ( props ) => {
65
-
66
- const onSetActiveEditable = ( newEditable ) => () => {
67
- setState( { editable: newEditable } )
68
- }
69
-
70
- const { isSelected, setAttributes, className } = props
71
-
72
- const { color, text, borderColor } = props.attributes
73
-
74
- return [
75
- <blockquote
76
- key={ 'quote' }
77
- className={ 'ugb-blockquote' }
78
- style={ {
79
- borderLeftColor: borderColor
80
- } }>
81
- <RichText
82
- tagName={ 'p' }
83
- className={ 'ugb-blockquote-text' }
84
- value={ text }
85
- onChange={ ( nextValue ) => setAttributes( { text: nextValue } ) }
86
- isSelected={ isSelected }
87
- style={ {
88
- color: color,
89
- } }
90
- />
91
- </blockquote>,
92
- isSelected && (
93
- <InspectorControls key='inspector'>
94
- <PanelColor
95
- title={ __( 'Text Color' ) }
96
- colorValue={ color }
97
- initialOpen={ false }>
98
- <ColorPalette
99
- value={ color }
100
- onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
101
- />
102
- </PanelColor>
103
- <PanelColor
104
- title={ __( 'Border Color' ) }
105
- colorValue={ borderColor }
106
- initialOpen={ false }>
107
- <ColorPalette
108
- value={ borderColor }
109
- onChange={ ( colorValue ) => setAttributes( { borderColor: colorValue } ) }
110
- />
111
- </PanelColor>
112
- </InspectorControls>
113
- )
114
- ];
115
- } ),
116
 
117
  // The "save" property must be specified and must be a valid function.
118
- save: function( props ) {
119
- const { color, text, borderColor } = props.attributes
120
-
121
- return (
122
- <blockquote
123
- className={ 'ugb-blockquote' }
124
- style={ {
125
- borderLeftColor: borderColor,
126
- } }>
127
- <p style={ { color: color } }>{ text }</p>
128
- </blockquote>
129
- );
130
- },
131
  } );
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
11
+ import { QuoteIcon } from '../../icons'
12
 
13
  const { __ } = wp.i18n; // Import __() from wp.i18n
14
+
15
+ const {
16
+ PanelColor,
17
+ withState
18
+ } = wp.components
19
+
20
  const {
21
  registerBlockType, // Import registerBlockType() from wp.blocks
22
  InspectorControls,
24
  ColorPalette
25
  } = wp.blocks
26
 
27
+
28
+ export const edit = ( props ) => {
29
+
30
+ const onSetActiveEditable = ( newEditable ) => () => {
31
+ setState( { editable: newEditable } )
32
+ }
33
+
34
+ const { isSelected, setAttributes, className } = props
35
+
36
+ const { color, text, borderColor } = props.attributes
37
+
38
+ return [
39
+ <blockquote
40
+ key={ 'quote' }
41
+ className={ 'ugb-blockquote' }
42
+ style={ {
43
+ borderLeftColor: borderColor
44
+ } }>
45
+ <RichText
46
+ tagName={ 'p' }
47
+ className={ 'ugb-blockquote-text' }
48
+ value={ text }
49
+ onChange={ ( nextValue ) => setAttributes( { text: nextValue } ) }
50
+ isSelected={ isSelected }
51
+ style={ {
52
+ color: color,
53
+ } }
54
+ />
55
+ </blockquote>,
56
+ isSelected && (
57
+ <InspectorControls key='inspector'>
58
+ <PanelColor
59
+ title={ __( 'Text Color' ) }
60
+ colorValue={ color }
61
+ initialOpen={ false }>
62
+ <ColorPalette
63
+ value={ color }
64
+ onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
65
+ />
66
+ </PanelColor>
67
+ <PanelColor
68
+ title={ __( 'Border Color' ) }
69
+ colorValue={ borderColor }
70
+ initialOpen={ false }>
71
+ <ColorPalette
72
+ value={ borderColor }
73
+ onChange={ ( colorValue ) => setAttributes( { borderColor: colorValue } ) }
74
+ />
75
+ </PanelColor>
76
+ </InspectorControls>
77
+ )
78
+ ];
79
+ }
80
+
81
+ export const save = ( props ) => {
82
+
83
+ const { color, text, borderColor } = props.attributes
84
+
85
+ return (
86
+ <blockquote
87
+ className={ 'ugb-blockquote' }
88
+ style={ {
89
+ borderLeftColor: borderColor,
90
+ } }>
91
+ <p style={ { color: color } }>{ text }</p>
92
+ </blockquote>
93
+ );
94
+ }
95
+
96
 
97
  /**
98
  * Register: Gutenberg Block.
133
  },
134
 
135
  // The "edit" property must be a valid function.
136
+ edit: withState( { editable: 'content', } )( edit ),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
137
 
138
  // The "save" property must be specified and must be a valid function.
139
+ save: save,
 
 
 
 
 
 
 
 
 
 
 
 
140
  } );
src/block/button/index.js CHANGED
@@ -8,19 +8,12 @@
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
 
11
 
12
  const { __ } = wp.i18n; // Import __() from wp.i18n
13
- const { Component } = wp.element
14
- const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
15
- const {
16
- PanelColor,
17
- Dashicon,
18
- IconButton,
19
- SelectControl,
20
- RangeControl
21
- } = wp.components;
22
 
23
  const {
 
24
  InspectorControls,
25
  BlockControls,
26
  AlignmentToolbar,
@@ -29,111 +22,134 @@ const {
29
  UrlInput,
30
  } = wp.blocks;
31
 
32
- import { ButtonIcon } from '../../icons'
 
 
 
 
 
 
33
 
34
- class UGBButtonBlock extends Component {
35
-
36
- render() {
37
- const { isSelected, className, setAttributes } = this.props;
38
- const { url, title, text, color, textColor, size, textAlignment, cornerButtonRadius } = this.props.attributes;
39
- const linkOptions = [
40
- { value: 'small', label: __( 'Small' ) },
41
- { value: 'normal', label: __( 'Normal' ) },
42
- { value: 'medium', label: __( 'Medium' ) },
43
- { value: 'large', label: __( 'Large' ) },
44
- ];
45
-
46
- return [
47
- isSelected && (
48
- <BlockControls key="controls">
49
- <AlignmentToolbar
50
- value={ textAlignment }
51
- onChange={ ( nextAlign ) => {
52
- setAttributes( { textAlignment: nextAlign } );
53
- } }
54
- />
55
- </BlockControls>
56
- ),
57
- <span key={ 'button' }
58
- title={ title }
59
- className={ `wp-block-button ugb-button-${textAlignment}` }>
60
- <RichText
61
- tagName={ 'span' }
62
- placeholder={ __( 'Enter Text' ) }
63
- value={ text }
64
- onChange={ (text) => setAttributes( { text: text } ) }
65
- formattingControls={ [ 'bold', 'italic', 'strikethrough' ] }
66
- className={`wp-ugb-button ugb-button-${size}`}
67
- style={ {
68
- backgroundColor: color,
69
- color: textColor,
70
- borderRadius: cornerButtonRadius + 'px',
71
  } }
72
- isSelected={ isSelected }
73
- keepPlaceholderOnFocus
74
  />
75
- {
76
- isSelected &&
77
- <InspectorControls key={ 'inspector' }>
78
- <SelectControl
79
- label={ __( 'Size' ) }
80
- value={ size }
81
- options={ linkOptions.map( ({ value, label }) => ( {
82
- value: value,
83
- label: label,
84
- } ) ) }
85
- onChange={ ( newSize ) => { setAttributes( { size: newSize } ) } }
86
- />
87
- <RangeControl
88
- label={ __( 'Corner Radius' ) }
89
- value={ cornerButtonRadius }
90
- min='1'
91
- max='50'
92
- onChange={ ( cornerRad ) => setAttributes( { cornerButtonRadius: cornerRad } ) }
93
- />
94
- <PanelColor
95
- title={ __( 'Background Color' ) }
96
- colorValue={ color }
97
- initialOpen={ false }
98
- >
99
- <ColorPalette
100
- value={ color }
101
- onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
102
- />
103
- </PanelColor>
104
- <PanelColor
105
- title={ __( 'Text Color' ) }
106
- colorValue={ textColor }
107
- initialOpen={ false }
108
- >
109
- <ColorPalette
110
- value={ textColor }
111
- onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
112
- />
113
- </PanelColor>
114
-
115
- </InspectorControls>
116
- }
117
- </span>,
118
- isSelected && (
119
- <form
120
- key={ 'form-link' }
121
- onSubmit={ ( event ) => event.preventDefault() }
122
- className={ `blocks-button__inline-link ugb-button-${textAlignment}`}>
123
- <Dashicon icon={ 'admin-links' } />
124
- <UrlInput
125
- value={ url }
126
- onChange={ ( value ) => setAttributes( { url: value } ) }
127
  />
128
- <IconButton
129
- icon={ 'editor-break' }
130
- label={ __( 'Apply' ) }
131
- type={ 'submit' }
 
 
 
 
 
132
  />
133
- </form>
134
- ),
135
- ];
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
136
  }
 
 
 
 
 
 
 
 
137
  }
138
 
139
 
@@ -165,12 +181,6 @@ registerBlockType( 'ugb/button', {
165
  selector: 'a',
166
  attribute: 'href',
167
  },
168
- title: {
169
- type: 'string',
170
- source: 'attribute',
171
- selector: 'a',
172
- attribute: 'title',
173
- },
174
  text: {
175
  type: 'array',
176
  source: 'children',
@@ -199,23 +209,8 @@ registerBlockType( 'ugb/button', {
199
  },
200
 
201
  // The "edit" property must be a valid function.
202
- edit: UGBButtonBlock,
203
 
204
  // The "save" property must be specified and must be a valid function.
205
- save: function( props ) {
206
- const { url, title, text, textAlignment, color, textColor, size, cornerButtonRadius } = props.attributes;
207
- const buttonStyle = {
208
- backgroundColor: color,
209
- color: textColor,
210
- borderRadius: cornerButtonRadius + 'px',
211
- }
212
-
213
- return (
214
- <div className={ `ugb-button-${textAlignment}` }>
215
- <a href={ url } className={ `wp-ugb-button ugb-button-${size}` } style={ buttonStyle }>
216
- { text }
217
- </a>
218
- </div>
219
- );
220
- },
221
  } );
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
11
+ import { ButtonIcon } from '../../icons'
12
 
13
  const { __ } = wp.i18n; // Import __() from wp.i18n
 
 
 
 
 
 
 
 
 
14
 
15
  const {
16
+ registerBlockType, // Import registerBlockType() from wp.blocks
17
  InspectorControls,
18
  BlockControls,
19
  AlignmentToolbar,
22
  UrlInput,
23
  } = wp.blocks;
24
 
25
+ const {
26
+ PanelColor,
27
+ Dashicon,
28
+ IconButton,
29
+ SelectControl,
30
+ RangeControl
31
+ } = wp.components;
32
 
33
+
34
+ export const edit = ( props ) => {
35
+
36
+ const { isSelected, className, setAttributes } = props;
37
+
38
+ const { url, text, color, textColor, size, textAlignment, cornerButtonRadius } = props.attributes;
39
+
40
+ const linkOptions = [
41
+ { value: 'small', label: __( 'Small' ) },
42
+ { value: 'normal', label: __( 'Normal' ) },
43
+ { value: 'medium', label: __( 'Medium' ) },
44
+ { value: 'large', label: __( 'Large' ) },
45
+ ];
46
+
47
+ return [
48
+ isSelected && (
49
+ <BlockControls key="controls">
50
+ <AlignmentToolbar
51
+ value={ textAlignment }
52
+ onChange={ ( nextAlign ) => {
53
+ setAttributes( { textAlignment: nextAlign } );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54
  } }
 
 
55
  />
56
+ </BlockControls>
57
+ ),
58
+ isSelected && (
59
+ <InspectorControls key={ 'inspector' }>
60
+ <SelectControl
61
+ label={ __( 'Size' ) }
62
+ value={ size }
63
+ options={ linkOptions.map( ({ value, label }) => ( {
64
+ value: value,
65
+ label: label,
66
+ } ) ) }
67
+ onChange={ ( newSize ) => { setAttributes( { size: newSize } ) } }
68
+ />
69
+ <RangeControl
70
+ label={ __( 'Corner Radius' ) }
71
+ value={ cornerButtonRadius }
72
+ min='1'
73
+ max='50'
74
+ onChange={ ( cornerRad ) => setAttributes( { cornerButtonRadius: cornerRad } ) }
75
+ />
76
+ <PanelColor
77
+ title={ __( 'Background Color' ) }
78
+ colorValue={ color }
79
+ initialOpen={ false }
80
+ >
81
+ <ColorPalette
82
+ value={ color }
83
+ onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
84
  />
85
+ </PanelColor>
86
+ <PanelColor
87
+ title={ __( 'Text Color' ) }
88
+ colorValue={ textColor }
89
+ initialOpen={ false }
90
+ >
91
+ <ColorPalette
92
+ value={ textColor }
93
+ onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
94
  />
95
+ </PanelColor>
96
+ </InspectorControls>
97
+ ),
98
+ <span key={ 'button' }
99
+ className={ `wp-block-button ugb-button-${textAlignment}` }>
100
+ <RichText
101
+ tagName={ 'span' }
102
+ placeholder={ __( 'Enter Text' ) }
103
+ value={ text }
104
+ onChange={ (text) => setAttributes( { text: text } ) }
105
+ formattingControls={ [ 'bold', 'italic', 'strikethrough' ] }
106
+ className={`wp-ugb-button ugb-button-${size}`}
107
+ style={ {
108
+ backgroundColor: color,
109
+ color: textColor,
110
+ borderRadius: cornerButtonRadius + 'px',
111
+ } }
112
+ isSelected={ isSelected }
113
+ keepPlaceholderOnFocus
114
+ />
115
+ </span>,
116
+ isSelected && (
117
+ <form
118
+ key={ 'form-link' }
119
+ onSubmit={ ( event ) => event.preventDefault() }
120
+ className={ `blocks-button__inline-link ugb-button-${textAlignment}`}>
121
+ <Dashicon icon={ 'admin-links' } />
122
+ <UrlInput
123
+ value={ url }
124
+ onChange={ ( value ) => setAttributes( { url: value } ) }
125
+ />
126
+ <IconButton
127
+ icon={ 'editor-break' }
128
+ label={ __( 'Apply' ) }
129
+ type={ 'submit' }
130
+ />
131
+ </form>
132
+ ),
133
+ ];
134
+ }
135
+
136
+ export const save = ( props ) => {
137
+
138
+ const { url, text, textAlignment, color, textColor, size, cornerButtonRadius } = props.attributes;
139
+
140
+ const buttonStyle = {
141
+ backgroundColor: color,
142
+ color: textColor,
143
+ borderRadius: cornerButtonRadius + 'px',
144
  }
145
+
146
+ return (
147
+ <div className={ `ugb-button-${textAlignment}` }>
148
+ <a href={ url } className={ `wp-ugb-button ugb-button-${size}` } style={ buttonStyle }>
149
+ { text }
150
+ </a>
151
+ </div>
152
+ );
153
  }
154
 
155
 
181
  selector: 'a',
182
  attribute: 'href',
183
  },
 
 
 
 
 
 
184
  text: {
185
  type: 'array',
186
  source: 'children',
209
  },
210
 
211
  // The "edit" property must be a valid function.
212
+ edit: edit,
213
 
214
  // The "save" property must be specified and must be a valid function.
215
+ save: save
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
216
  } );
src/block/call-to-action/index.js CHANGED
@@ -9,9 +9,9 @@
9
  // Import CSS.
10
  import './style.scss';
11
  import './editor.scss';
 
12
 
13
  const { __ } = wp.i18n; // Import __() from wp.i18n
14
- const { Component } = wp.element
15
 
16
  const {
17
  PanelColor,
@@ -32,7 +32,231 @@ const {
32
  UrlInput,
33
  } = wp.blocks;
34
 
35
- import { CTAIcon } from '../../icons'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
 
37
  /**
38
  * Register: Gutenberg Block.
@@ -63,12 +287,6 @@ registerBlockType( 'ugb/cta', {
63
  selector: 'a',
64
  attribute: 'href',
65
  },
66
- title: {
67
- type: 'string',
68
- source: 'attribute',
69
- selector: 'a',
70
- attribute: 'title',
71
- },
72
  ctaTitle: {
73
  type: 'array',
74
  source: 'children',
@@ -114,229 +332,8 @@ registerBlockType( 'ugb/cta', {
114
  },
115
 
116
  // The "edit" property must be a valid function.
117
- edit: withState( { editable: 'content', } )( ( props ) => {
118
-
119
- const {
120
- isSelected,
121
- editable,
122
- setState,
123
- className,
124
- setAttributes
125
- } = props;
126
-
127
- const {
128
- url,
129
- buttonText,
130
- title,
131
- ctaTitle,
132
- bodyText,
133
- color,
134
- textColor,
135
- size,
136
- borderButtonRadius,
137
- bodyTextColor,
138
- titleColor,
139
- bgColor
140
- } = props.attributes;
141
-
142
- const linkOptions = [
143
- { value: 'small', label: __( 'Small' ) },
144
- { value: 'normal', label: __( 'Normal' ) },
145
- { value: 'medium', label: __( 'Medium' ) },
146
- { value: 'large', label: __( 'Large' ) },
147
- ];
148
-
149
- const onSetActiveEditable = ( newEditable ) => () => {
150
- setState( { editable: newEditable } )
151
- }
152
-
153
- return [
154
- <div key={'editable'} className={ 'ugb-cta' } style={ { backgroundColor: bgColor } }>
155
- <RichText
156
- className={ 'ugb-cta-title' }
157
- tagName={ 'h3' }
158
- placeholder={ __('Add Title') }
159
- value={ ctaTitle }
160
- onChange={ (text) => setAttributes( { ctaTitle: text } ) }
161
- isSelected={ isSelected && editable === 'ctaTitle' }
162
- onFocus={ onSetActiveEditable( 'ctaTitle' ) }
163
- keepPlaceholderOnFocus
164
- style={ {
165
- color: titleColor,
166
- } }
167
- />
168
- <RichText
169
- tagName={'p'}
170
- value={ bodyText }
171
- className={ 'ugb-cta-bodyText' }
172
- onChange={ (text) => setAttributes( { bodyText: text } ) }
173
- isSelected={ isSelected && editable === 'bodyText' }
174
- onFocus={ onSetActiveEditable( 'bodyText' ) }
175
- placeholder={ __( 'Write body text…' ) }
176
- style={ {
177
- color: bodyTextColor,
178
- } }
179
- />
180
- <span key={ 'button' }
181
- className={ `wp-block-button ugb-cta-button` }>
182
- <RichText
183
- tagName={ 'span' }
184
- placeholder={ __( 'Add Text' ) }
185
- value={ buttonText }
186
- onChange={ (text) => setAttributes( { buttonText: text } ) }
187
- isSelected={ isSelected && editable === 'buttonText' }
188
- onFocus={ onSetActiveEditable( 'buttonText' ) }
189
- className={`wp-ugb-button ugb-button-${size}`}
190
- style={ {
191
- backgroundColor: color,
192
- color: textColor,
193
- borderRadius: borderButtonRadius + 'px',
194
- } }
195
- keepPlaceholderOnFocus
196
- />
197
- {
198
- isSelected &&
199
- <InspectorControls key={ 'inspector' }>
200
- <SelectControl
201
- label={ __( 'Button Size' ) }
202
- value={ size }
203
- options={ linkOptions.map( ({ value, label }) => ( {
204
- value: value,
205
- label: label,
206
- } ) ) }
207
- onChange={ ( newSize ) => { setAttributes( { size: newSize } ) } }
208
- />
209
- <RangeControl
210
- label={ __( 'Button Border Radius' ) }
211
- value={ borderButtonRadius }
212
- min='1'
213
- max='50'
214
- onChange={ ( borderRad ) => setAttributes( { borderButtonRadius: borderRad } ) }
215
- />
216
- <PanelColor
217
- title={ __( 'Title Color' ) }
218
- colorValue={ titleColor }
219
- initialOpen={ false }
220
- >
221
- <ColorPalette
222
- value={ color }
223
- onChange={ ( colorValue ) => setAttributes( { titleColor: colorValue } ) }
224
- />
225
- </PanelColor>
226
- <PanelColor
227
- title={ __( 'Body Text Color' ) }
228
- colorValue={ bodyTextColor }
229
- initialOpen={ false }
230
- >
231
- <ColorPalette
232
- value={ color }
233
- onChange={ ( colorValue ) => setAttributes( { bodyTextColor: colorValue } ) }
234
- />
235
- </PanelColor>
236
- <PanelColor
237
- title={ __( 'Button Background Color' ) }
238
- colorValue={ color }
239
- initialOpen={ false }
240
- >
241
- <ColorPalette
242
- value={ color }
243
- onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
244
- />
245
- </PanelColor>
246
- <PanelColor
247
- title={ __( 'Button Text Color' ) }
248
- colorValue={ textColor }
249
- initialOpen={ false }
250
- >
251
- <ColorPalette
252
- value={ textColor }
253
- onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
254
- />
255
- </PanelColor>
256
- <PanelColor
257
- title={ __( 'Background Color' ) }
258
- colorValue={ bgColor }
259
- initialOpen={ false }
260
- >
261
- <ColorPalette
262
- value={ bgColor }
263
- onChange={ ( colorValue ) => setAttributes( { bgColor: colorValue } ) }
264
- />
265
- </PanelColor>
266
- </InspectorControls>
267
- }
268
- </span>
269
- {
270
- isSelected && (
271
- <form
272
- key={ 'form-link' }
273
- onSubmit={ ( event ) => event.preventDefault() }
274
- className={ `blocks-button__inline-link`}>
275
- <Dashicon icon={ 'admin-links' } />
276
- <UrlInput
277
- value={ url }
278
- onChange={ ( value ) => setAttributes( { url: value } ) }
279
- />
280
- <IconButton
281
- icon={ 'editor-break' }
282
- label={ __( 'Apply' ) }
283
- type={ 'submit' }
284
- />
285
- </form>
286
- )
287
- }
288
- </div>
289
- ];
290
- } ),
291
 
292
  // The "save" property must be specified and must be a valid function.
293
- save: function( props ) {
294
- const {
295
- url,
296
- title,
297
- buttonText,
298
- ctaTitle,
299
- bodyText,
300
- color,
301
- textColor,
302
- size,
303
- borderButtonRadius,
304
- bodyTextColor,
305
- titleColor,
306
- bgColor
307
- } = props.attributes;
308
-
309
- const buttonStyle = {
310
- backgroundColor: color,
311
- color: textColor,
312
- borderRadius: borderButtonRadius + 'px',
313
- }
314
-
315
- return (
316
- <div className={ `ugb-cta` } style={ { backgroundColor: bgColor } }>
317
- { ctaTitle && !! ctaTitle.length && (
318
- <h3
319
- className={ 'ugb-cta-title' }
320
- style={ { color: titleColor } }>
321
- {ctaTitle}
322
- </h3>
323
- ) }
324
- { bodyText && !! bodyText.length && (
325
- <p
326
- className={ 'ugb-cta-bodyText' }
327
- style={ { color: bodyTextColor } }>
328
- {bodyText}
329
- </p>
330
- ) }
331
- { buttonText && !! buttonText.length && (
332
- <a
333
- href={ url }
334
- className={ `wp-ugb-button ugb-cta-button ugb-button-${size}` }
335
- style={ buttonStyle }>
336
- { buttonText }
337
- </a>
338
- ) }
339
- </div>
340
- );
341
- },
342
  } );
9
  // Import CSS.
10
  import './style.scss';
11
  import './editor.scss';
12
+ import { CTAIcon } from '../../icons'
13
 
14
  const { __ } = wp.i18n; // Import __() from wp.i18n
 
15
 
16
  const {
17
  PanelColor,
32
  UrlInput,
33
  } = wp.blocks;
34
 
35
+
36
+ export const edit = ( props ) => {
37
+
38
+ const {
39
+ isSelected,
40
+ editable,
41
+ setState,
42
+ className,
43
+ setAttributes
44
+ } = props;
45
+
46
+ const {
47
+ url,
48
+ buttonText,
49
+ ctaTitle,
50
+ bodyText,
51
+ color,
52
+ textColor,
53
+ size,
54
+ borderButtonRadius,
55
+ bodyTextColor,
56
+ titleColor,
57
+ bgColor
58
+ } = props.attributes;
59
+
60
+ const linkOptions = [
61
+ { value: 'small', label: __( 'Small' ) },
62
+ { value: 'normal', label: __( 'Normal' ) },
63
+ { value: 'medium', label: __( 'Medium' ) },
64
+ { value: 'large', label: __( 'Large' ) },
65
+ ];
66
+
67
+ const onSetActiveEditable = ( newEditable ) => () => {
68
+ setState( { editable: newEditable } )
69
+ }
70
+
71
+ return [
72
+ <div key={'editable'} className={ 'ugb-cta' } style={ { backgroundColor: bgColor } }>
73
+ <RichText
74
+ className={ 'ugb-cta-title' }
75
+ tagName={ 'h3' }
76
+ placeholder={ __('Add Title') }
77
+ value={ ctaTitle }
78
+ onChange={ (text) => setAttributes( { ctaTitle: text } ) }
79
+ isSelected={ isSelected && editable === 'ctaTitle' }
80
+ onFocus={ onSetActiveEditable( 'ctaTitle' ) }
81
+ keepPlaceholderOnFocus
82
+ style={ {
83
+ color: titleColor,
84
+ } }
85
+ />
86
+ <RichText
87
+ tagName={'p'}
88
+ value={ bodyText }
89
+ className={ 'ugb-cta-bodyText' }
90
+ onChange={ (text) => setAttributes( { bodyText: text } ) }
91
+ isSelected={ isSelected && editable === 'bodyText' }
92
+ onFocus={ onSetActiveEditable( 'bodyText' ) }
93
+ placeholder={ __( 'Write body text…' ) }
94
+ style={ {
95
+ color: bodyTextColor,
96
+ } }
97
+ />
98
+ <span key={ 'button' }
99
+ className={ `wp-block-button ugb-cta-button` }>
100
+ <RichText
101
+ tagName={ 'span' }
102
+ placeholder={ __( 'Add Text' ) }
103
+ value={ buttonText }
104
+ onChange={ (text) => setAttributes( { buttonText: text } ) }
105
+ isSelected={ isSelected && editable === 'buttonText' }
106
+ onFocus={ onSetActiveEditable( 'buttonText' ) }
107
+ className={`wp-ugb-button ugb-button-${size}`}
108
+ style={ {
109
+ backgroundColor: color,
110
+ color: textColor,
111
+ borderRadius: borderButtonRadius + 'px',
112
+ } }
113
+ keepPlaceholderOnFocus
114
+ />
115
+ {
116
+ isSelected &&
117
+ <InspectorControls key={ 'inspector' }>
118
+ <SelectControl
119
+ label={ __( 'Button Size' ) }
120
+ value={ size }
121
+ options={ linkOptions.map( ({ value, label }) => ( {
122
+ value: value,
123
+ label: label,
124
+ } ) ) }
125
+ onChange={ ( newSize ) => { setAttributes( { size: newSize } ) } }
126
+ />
127
+ <RangeControl
128
+ label={ __( 'Button Border Radius' ) }
129
+ value={ borderButtonRadius }
130
+ min='1'
131
+ max='50'
132
+ onChange={ ( borderRad ) => setAttributes( { borderButtonRadius: borderRad } ) }
133
+ />
134
+ <PanelColor
135
+ title={ __( 'Title Color' ) }
136
+ colorValue={ titleColor }
137
+ initialOpen={ false }
138
+ >
139
+ <ColorPalette
140
+ value={ color }
141
+ onChange={ ( colorValue ) => setAttributes( { titleColor: colorValue } ) }
142
+ />
143
+ </PanelColor>
144
+ <PanelColor
145
+ title={ __( 'Body Text Color' ) }
146
+ colorValue={ bodyTextColor }
147
+ initialOpen={ false }
148
+ >
149
+ <ColorPalette
150
+ value={ color }
151
+ onChange={ ( colorValue ) => setAttributes( { bodyTextColor: colorValue } ) }
152
+ />
153
+ </PanelColor>
154
+ <PanelColor
155
+ title={ __( 'Button Background Color' ) }
156
+ colorValue={ color }
157
+ initialOpen={ false }
158
+ >
159
+ <ColorPalette
160
+ value={ color }
161
+ onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
162
+ />
163
+ </PanelColor>
164
+ <PanelColor
165
+ title={ __( 'Button Text Color' ) }
166
+ colorValue={ textColor }
167
+ initialOpen={ false }
168
+ >
169
+ <ColorPalette
170
+ value={ textColor }
171
+ onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
172
+ />
173
+ </PanelColor>
174
+ <PanelColor
175
+ title={ __( 'Background Color' ) }
176
+ colorValue={ bgColor }
177
+ initialOpen={ false }
178
+ >
179
+ <ColorPalette
180
+ value={ bgColor }
181
+ onChange={ ( colorValue ) => setAttributes( { bgColor: colorValue } ) }
182
+ />
183
+ </PanelColor>
184
+ </InspectorControls>
185
+ }
186
+ </span>
187
+ {
188
+ isSelected && (
189
+ <form
190
+ key={ 'form-link' }
191
+ onSubmit={ ( event ) => event.preventDefault() }
192
+ className={ `blocks-button__inline-link`}>
193
+ <Dashicon icon={ 'admin-links' } />
194
+ <UrlInput
195
+ value={ url }
196
+ onChange={ ( value ) => setAttributes( { url: value } ) }
197
+ />
198
+ <IconButton
199
+ icon={ 'editor-break' }
200
+ label={ __( 'Apply' ) }
201
+ type={ 'submit' }
202
+ />
203
+ </form>
204
+ )
205
+ }
206
+ </div>
207
+ ];
208
+ }
209
+
210
+ export const save = ( props ) => {
211
+
212
+ const {
213
+ url,
214
+ buttonText,
215
+ ctaTitle,
216
+ bodyText,
217
+ color,
218
+ textColor,
219
+ size,
220
+ borderButtonRadius,
221
+ bodyTextColor,
222
+ titleColor,
223
+ bgColor
224
+ } = props.attributes;
225
+
226
+ const buttonStyle = {
227
+ backgroundColor: color,
228
+ color: textColor,
229
+ borderRadius: borderButtonRadius + 'px',
230
+ }
231
+
232
+ return (
233
+ <div className={ `ugb-cta` } style={ { backgroundColor: bgColor } }>
234
+ { ctaTitle && !! ctaTitle.length && (
235
+ <h3
236
+ className={ 'ugb-cta-title' }
237
+ style={ { color: titleColor } }>
238
+ {ctaTitle}
239
+ </h3>
240
+ ) }
241
+ { bodyText && !! bodyText.length && (
242
+ <p
243
+ className={ 'ugb-cta-bodyText' }
244
+ style={ { color: bodyTextColor } }>
245
+ {bodyText}
246
+ </p>
247
+ ) }
248
+ { buttonText && !! buttonText.length && (
249
+ <a
250
+ href={ url }
251
+ className={ `wp-ugb-button ugb-cta-button ugb-button-${size}` }
252
+ style={ buttonStyle }>
253
+ { buttonText }
254
+ </a>
255
+ ) }
256
+ </div>
257
+ );
258
+ }
259
+
260
 
261
  /**
262
  * Register: Gutenberg Block.
287
  selector: 'a',
288
  attribute: 'href',
289
  },
 
 
 
 
 
 
290
  ctaTitle: {
291
  type: 'array',
292
  source: 'children',
332
  },
333
 
334
  // The "edit" property must be a valid function.
335
+ edit: withState( { editable: 'content', } ) ( edit ),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
336
 
337
  // The "save" property must be specified and must be a valid function.
338
+ save: save,
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
339
  } );
src/block/card/editor.scss ADDED
@@ -0,0 +1,24 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * #.# Editor Styles for Card Block
3
+ *
4
+ * CSS for just Backend enqueued after style.scss
5
+ * which makes it higher in priority.
6
+ */
7
+ .edit-post-visual-editor {
8
+ .ugb-card {
9
+ .ugb-card-image-container {
10
+ padding: 0;
11
+ }
12
+ margin: 0 !important;
13
+ button {
14
+ margin: 0 30px;
15
+ }
16
+ &.has-image {
17
+ button {
18
+ width: 100%;
19
+ height: 300px;
20
+ padding: 0;
21
+ }
22
+ }
23
+ }
24
+ }
src/block/card/index.js ADDED
@@ -0,0 +1,433 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * BLOCK: Card Block.
3
+ *
4
+ * Registering a basic block with Gutenberg.
5
+ * Simple block, renders and saves the same content without any interactivity.
6
+ */
7
+
8
+ // Import CSS.
9
+ import './style.scss';
10
+ import './editor.scss';
11
+ import { TeamMemberIcon } from '../../icons'
12
+
13
+
14
+ const { __ } = wp.i18n; // Import __() from wp.i18n
15
+
16
+ const {
17
+ PanelColor,
18
+ Button,
19
+ IconButton,
20
+ Dashicon,
21
+ withState,
22
+ SelectControl,
23
+ RangeControl,
24
+ Toolbar
25
+ } = wp.components;
26
+
27
+ const {
28
+ registerBlockType, // Import registerBlockType() from wp.blocks
29
+ InspectorControls,
30
+ RichText,
31
+ ColorPalette,
32
+ MediaUpload,
33
+ BlockControls,
34
+ UrlInput,
35
+ AlignmentToolbar
36
+ } = wp.blocks;
37
+
38
+
39
+ export const edit = ( props ) => {
40
+
41
+ const {
42
+ isSelected,
43
+ editable,
44
+ setState,
45
+ className,
46
+ setAttributes
47
+ } = props;
48
+
49
+ const {
50
+ heading,
51
+ tagline,
52
+ des,
53
+ mediaID,
54
+ mediaURL,
55
+ headingColor,
56
+ taglineColor,
57
+ desColor,
58
+ buttonURL,
59
+ buttonText,
60
+ buttonColor,
61
+ buttonTextColor,
62
+ size,
63
+ cornerButtonRadius,
64
+ contentAlign
65
+ } = props.attributes;
66
+
67
+ const onSetActiveEditable = ( newEditable ) => () => {
68
+ setState( { editable: newEditable } )
69
+ }
70
+
71
+ const imageClass = mediaURL ? 'has-image' : ''
72
+
73
+ const buttonSizes = [
74
+ { value: 'small', label: __( 'Small' ) },
75
+ { value: 'normal', label: __( 'Normal' ) },
76
+ { value: 'medium', label: __( 'Medium' ) },
77
+ { value: 'large', label: __( 'Large' ) },
78
+ ];
79
+
80
+ return [
81
+ isSelected && (
82
+ <BlockControls key='controls'>
83
+ <AlignmentToolbar
84
+ value={ contentAlign }
85
+ onChange={ ( newAlign ) => setAttributes( { contentAlign: newAlign } ) }
86
+ />
87
+ <Toolbar>
88
+ <MediaUpload
89
+ onSelect={ ( media ) => setAttributes( { mediaURL: media.url, mediaID: media.id } ) }
90
+ type="image"
91
+ value={ mediaID }
92
+ render={ ( { open } ) => (
93
+ <IconButton
94
+ className="components-toolbar__control"
95
+ label={ __( 'Edit image' ) }
96
+ icon="edit"
97
+ onClick={ open }
98
+ />
99
+ ) }
100
+ />
101
+ </Toolbar>
102
+ </BlockControls>
103
+ ),
104
+ isSelected && (
105
+ <InspectorControls key={ 'inspector' }>
106
+ <PanelColor
107
+ title={ __( 'Heading Color' ) }
108
+ colorValue={ headingColor }
109
+ initialOpen={ false }
110
+ >
111
+ <ColorPalette
112
+ value={ headingColor }
113
+ onChange={ ( colorValue ) => setAttributes( { headingColor: colorValue } ) }
114
+ />
115
+ </PanelColor>
116
+ <PanelColor
117
+ title={ __( 'Tagline Color' ) }
118
+ colorValue={ taglineColor }
119
+ initialOpen={ false }
120
+ >
121
+ <ColorPalette
122
+ value={ taglineColor }
123
+ onChange={ ( colorValue ) => setAttributes( { taglineColor: colorValue } ) }
124
+ />
125
+ </PanelColor>
126
+ <PanelColor
127
+ title={ __( 'Description Color' ) }
128
+ colorValue={ desColor }
129
+ initialOpen={ false }
130
+ >
131
+ <ColorPalette
132
+ value={ desColor }
133
+ onChange={ ( colorValue ) => setAttributes( { desColor: colorValue } ) }
134
+ />
135
+ </PanelColor>
136
+ <h2>Button Settings</h2>
137
+ <SelectControl
138
+ label={ __( 'Button Size' ) }
139
+ value={ size }
140
+ options={ buttonSizes.map( ({ value, label }) => ( {
141
+ value: value,
142
+ label: label,
143
+ } ) ) }
144
+ onChange={ ( newSize ) => { setAttributes( { size: newSize } ) } }
145
+ />
146
+ <RangeControl
147
+ label={ __( 'Corner Radius' ) }
148
+ value={ cornerButtonRadius }
149
+ min='1'
150
+ max='50'
151
+ onChange={ ( cornerRad ) => setAttributes( { cornerButtonRadius: cornerRad } ) }
152
+ />
153
+ <PanelColor
154
+ title={ __( 'Button Color' ) }
155
+ colorValue={ buttonColor }
156
+ initialOpen={ false }
157
+ >
158
+ <ColorPalette
159
+ value={ buttonColor }
160
+ onChange={ ( colorValue ) => setAttributes( { buttonColor: colorValue } ) }
161
+ />
162
+ </PanelColor>
163
+ <PanelColor
164
+ title={ __( 'Button Text Color' ) }
165
+ colorValue={ buttonTextColor }
166
+ initialOpen={ false }
167
+ >
168
+ <ColorPalette
169
+ value={ buttonTextColor }
170
+ onChange={ ( colorValue ) => setAttributes( { buttonTextColor: colorValue } ) }
171
+ />
172
+ </PanelColor>
173
+ </InspectorControls>
174
+ ),
175
+ <div key={'editable'} className={ `ugb-card ${imageClass}` }>
176
+ <div className='ugb-card-image-container' style={{ backgroundImage: `url(${mediaURL})`, textAlign: contentAlign }}>
177
+ <MediaUpload
178
+ onSelect={ ( media ) => setAttributes( { mediaURL: media.url, mediaID: media.id } ) }
179
+ type={'image'}
180
+ value={mediaID}
181
+ render={ function( obj ) {
182
+ return [
183
+ ! mediaURL && (
184
+ <Button
185
+ className={ mediaID ? '' : 'button button-large' }
186
+ onClick={ obj.open }
187
+ >
188
+ {__('Upload Image')}
189
+ </Button>
190
+ )
191
+ ]
192
+ } }
193
+ />
194
+ </div>
195
+ <RichText
196
+ tagName={ 'h4' }
197
+ value={ heading }
198
+ className={ 'ugb-card-heading' }
199
+ onChange={ (text) => setAttributes( { heading: text } ) }
200
+ isSelected={ isSelected && editable === 'heading' }
201
+ onFocus={ onSetActiveEditable( 'heading' ) }
202
+ style={ {
203
+ color: headingColor,
204
+ textAlign: contentAlign
205
+ } }
206
+ keepPlaceholderOnFocus
207
+ />
208
+ <RichText
209
+ tagName={'p'}
210
+ value={ tagline }
211
+ className={ 'ugb-tagline' }
212
+ onChange={ (text) => setAttributes( { tagline: text } ) }
213
+ isSelected={ isSelected && editable === 'tagline' }
214
+ onFocus={ onSetActiveEditable( 'tagline' ) }
215
+ style={ {
216
+ color: taglineColor,
217
+ textAlign: contentAlign
218
+ } }
219
+ keepPlaceholderOnFocus
220
+ />
221
+ <RichText
222
+ tagName={'p'}
223
+ value={ des }
224
+ className={ 'ugb-card-des' }
225
+ onChange={ (text) => setAttributes( { des: text } ) }
226
+ isSelected={ isSelected && editable === 'des' }
227
+ onFocus={ onSetActiveEditable( 'des' ) }
228
+ style={ {
229
+ color: desColor,
230
+ textAlign: contentAlign
231
+ } }
232
+ keepPlaceholderOnFocus
233
+ />
234
+ <span key={ 'button' }
235
+ className={ `wp-block-button ugb-button-${contentAlign}` }>
236
+ <RichText
237
+ tagName={ 'span' }
238
+ placeholder={ buttonText.default }
239
+ value={ buttonText }
240
+ onChange={ (text) => setAttributes( { buttonText: text } ) }
241
+ className={`wp-ugb-button ugb-button-${size}`}
242
+ style={ {
243
+ backgroundColor: buttonColor,
244
+ color: buttonTextColor,
245
+ borderRadius: cornerButtonRadius + 'px',
246
+ } }
247
+ isSelected={ isSelected && editable === 'buttonText' }
248
+ onFocus={ onSetActiveEditable( 'buttonText' ) }
249
+ keepPlaceholderOnFocus
250
+ />
251
+ </span>
252
+ </div>,
253
+ isSelected && (
254
+ <form
255
+ key={ 'form-link' }
256
+ onSubmit={ ( event ) => event.preventDefault() }
257
+ className={ `blocks-button__inline-link ugb-button-${contentAlign}` }
258
+ style={{ marginTop: 10 }}
259
+ >
260
+ <Dashicon icon={ 'admin-links' } />
261
+ <UrlInput
262
+ value={ buttonURL }
263
+ onChange={ ( value ) => setAttributes( { buttonURL: value } ) }
264
+ />
265
+ <IconButton
266
+ icon={ 'editor-break' }
267
+ label={ __( 'Apply' ) }
268
+ type={ 'submit' }
269
+ />
270
+ </form>
271
+ )
272
+ ];
273
+ }
274
+
275
+ export const save = ( props ) => {
276
+
277
+ const {
278
+ heading,
279
+ tagline,
280
+ des,
281
+ mediaURL,
282
+ mediaID,
283
+ headingColor,
284
+ taglineColor,
285
+ desColor,
286
+ buttonURL,
287
+ buttonText,
288
+ buttonColor,
289
+ buttonTextColor,
290
+ size,
291
+ cornerButtonRadius,
292
+ contentAlign
293
+ } = props.attributes;
294
+
295
+ const buttonStyle = {
296
+ backgroundColor: buttonColor,
297
+ color: buttonTextColor,
298
+ borderRadius: cornerButtonRadius + 'px',
299
+ }
300
+
301
+ const imageClass = mediaURL ? 'has-image' : ''
302
+
303
+ const displayNone = ( ! heading.length && ! tagline.length && ! des.length && ! buttonText.length ) ? 'has-no-content' : 'has-content'
304
+
305
+ return (
306
+ <div className={ `ugb-card ${imageClass} ${displayNone}` }>
307
+ { mediaURL && <div className="ugb-card-image-container" style={{ backgroundImage: `url(${mediaURL})` }} data-src={mediaURL}></div> }
308
+ { heading && !! heading.length && (
309
+ <h4 style={ { color: headingColor, textAlign: contentAlign } }>
310
+ { heading }
311
+ </h4>
312
+ ) }
313
+ { tagline && !! tagline.length && (
314
+ <p className={ 'ugb-tagline' } style={ { color: taglineColor, textAlign: contentAlign } }>
315
+ { tagline }
316
+ </p>
317
+ ) }
318
+ { des && !! des.length && (
319
+ <p className={ 'ugb-card-des' } style={ { color: desColor, textAlign: contentAlign } }>
320
+ { des }
321
+ </p>
322
+ ) }
323
+ { buttonText && !! buttonText.length && (
324
+ <a
325
+ href={ buttonURL }
326
+ className={ `wp-ugb-button wp-block-button ugb-button-${size} ugb-button-${contentAlign}` }
327
+ style={ buttonStyle }>
328
+ { buttonText }
329
+ </a>
330
+ ) }
331
+ </div>
332
+ );
333
+ }
334
+
335
+
336
+ /**
337
+ * Register: Gutenberg Block.
338
+ *
339
+ * Registers a new block provided a unique name and an object defining its
340
+ * behavior. Once registered, the block is made editor as an option to any
341
+ * editor interface where blocks are implemented.
342
+ *
343
+ * @param {string} name Block name.
344
+ * @param {Object} settings Block settings.
345
+ * @return {?WPBlock} The block, if it has been successfully
346
+ * registered; otherwise `undefined`.
347
+ */
348
+ registerBlockType( 'ugb/card', {
349
+ // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
350
+ title: __( 'Card' ), // Block title.
351
+ icon: TeamMemberIcon, // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
352
+ category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
353
+ keywords: [
354
+ __( 'Card' ),
355
+ __( 'Stackable' ),
356
+ ],
357
+ attributes: {
358
+ mediaID: {
359
+ type: 'number',
360
+ },
361
+ mediaURL: {
362
+ type: 'string',
363
+ source: 'attribute',
364
+ selector: '.ugb-card-image-container',
365
+ attribute: 'data-src',
366
+ },
367
+ heading: {
368
+ type: 'array',
369
+ source: 'children',
370
+ selector: '.ugb-card h4',
371
+ default: __( 'Ben Adams' )
372
+ },
373
+ tagline: {
374
+ type: 'array',
375
+ source: 'children',
376
+ selector: '.ugb-tagline',
377
+ default: __( 'Ben is the head of our small team' )
378
+ },
379
+ des: {
380
+ type: 'array',
381
+ source: 'children',
382
+ selector: '.ugb-card-des',
383
+ default: __( 'Ben is the head of our small team. He loves walking his dog, Walter, when he has some free time.' )
384
+ },
385
+ headingColor: {
386
+ type: 'string',
387
+ },
388
+ taglineColor: {
389
+ type: 'string',
390
+ },
391
+ desColor: {
392
+ type: 'string',
393
+ },
394
+ buttonURL: {
395
+ type: 'string',
396
+ source: 'attribute',
397
+ selector: '.wp-ugb-button',
398
+ attribute: 'href',
399
+ },
400
+ buttonText: {
401
+ type: 'array',
402
+ source: 'children',
403
+ selector: '.wp-block-button',
404
+ default: __( 'Button' )
405
+ },
406
+ buttonColor: {
407
+ type: 'string',
408
+ default: '#2091e1',
409
+ },
410
+ buttonTextColor: {
411
+ type: 'string',
412
+ default: '#ffffff',
413
+ },
414
+ size: {
415
+ type: 'string',
416
+ default: 'normal',
417
+ },
418
+ cornerButtonRadius: {
419
+ type: 'number',
420
+ default: 4,
421
+ },
422
+ contentAlign: {
423
+ type: 'string',
424
+ default: 'left',
425
+ },
426
+ },
427
+
428
+ // The "edit" property must be a valid function.
429
+ edit: withState( { editable: 'content', } )( edit ),
430
+
431
+ // The "save" property must be specified and must be a valid function.
432
+ save: save,
433
+ } );
src/block/card/style.scss ADDED
@@ -0,0 +1,51 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * #.# Styles for Card Block.
3
+ *
4
+ * CSS for both Frontend+Backend.
5
+ */
6
+ .ugb-card {
7
+ border-radius: 4px;
8
+ box-shadow: 0 0 5px rgba(0,0,0,0.1);
9
+ margin: 30px 0;
10
+ padding-bottom: 30px;
11
+ &:not(.has-image) {
12
+ padding-top: 30px;
13
+ }
14
+ &.has-image {
15
+ .ugb-card-image-container {
16
+ height: 300px;
17
+ width: 100%;
18
+ margin: 0 auto 20px;
19
+ background-size: cover;
20
+ background-position: center;
21
+ border-top-right-radius: 4px;
22
+ border-top-left-radius: 4px;
23
+ padding-top: 0px;
24
+ }
25
+ }
26
+ > *:first-child {
27
+ margin-top: 0 !important;
28
+ }
29
+ > *:last-child {
30
+ margin-bottom: 0 !important;
31
+ }
32
+ > h4, > * {
33
+ margin: 0 30px .5rem !important;
34
+ }
35
+ .wp-ugb-button {
36
+ margin-top: 1rem !important;
37
+ }
38
+ .ugb-card-image-container {
39
+ margin: 0 0 20px !important;
40
+ }
41
+ .ugb-tagline {
42
+ opacity: .7;
43
+ }
44
+ .wp-block-button.ugb-button-center {
45
+ margin-left: 0 !important;
46
+ margin-right: 0 !important;
47
+ }
48
+ .wp-block-button.ugb-button-right {
49
+ transform: translateX(-100%) translateX(-60px);
50
+ }
51
+ }
src/block/count-up/index.js CHANGED
@@ -8,11 +8,16 @@
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
11
-
12
 
13
  const { __ } = wp.i18n; // Import __() from wp.i18n
14
- const { Component } = wp.element
15
- const { PanelColor, withState, RangeControl } = wp.components
 
 
 
 
 
16
  const {
17
  registerBlockType, // Import registerBlockType() from wp.blocks
18
  InspectorControls,
@@ -20,7 +25,114 @@ const {
20
  ColorPalette
21
  } = wp.blocks
22
 
23
- import { NumberBoxIcon } from '../../icons'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
 
25
  /**
26
  * Register: Gutenberg Block.
@@ -79,110 +191,8 @@ registerBlockType( 'ugb/count-up', {
79
  },
80
 
81
  // The "edit" property must be a valid function.
82
- edit: withState( { editable: 'content', } )( ( props ) => {
83
-
84
- const onSetActiveEditable = ( newEditable ) => () => {
85
- setState( { editable: newEditable } )
86
- }
87
-
88
- const { isSelected, editable, setState, setAttributes, className } = props
89
-
90
- const { color, headingColor, desColor, title, counter, des, fontSize } = props.attributes
91
-
92
- return [
93
- <div className={ 'ugb-countup' }>
94
- <RichText
95
- tagName={ 'h4' }
96
- value={ title }
97
- onChange={ ( nextValue ) => setAttributes( { title: nextValue } ) }
98
- isSelected={ isSelected && editable === 'title' }
99
- onFocus={ onSetActiveEditable( 'title' ) }
100
- style={{ color: headingColor }}
101
- />
102
- <RichText
103
- tagName={ 'div' }
104
- className={ 'ugb-counter' }
105
- placeholder={ counter.default }
106
- data-duration="1000"
107
- data-delay="16"
108
- value={ counter }
109
- onChange={ ( nextValue ) => setAttributes( { counter: nextValue } ) }
110
- isSelected={ isSelected && editable === 'counter' }
111
- onFocus={ onSetActiveEditable( 'counter' ) }
112
- style={ {
113
- color: color,
114
- fontSize: fontSize + 'px'
115
- } }
116
- />
117
- <RichText
118
- tagName={ 'p' }
119
- className={ 'ugb-counter-des' }
120
- value={ des }
121
- onChange={ ( nextValue ) => setAttributes( { des: nextValue } ) }
122
- isSelected={ isSelected && editable === 'des' }
123
- onFocus={ onSetActiveEditable( 'des' ) }
124
- style={{ color: desColor }}
125
- />
126
- </div>,
127
- isSelected && (
128
- <InspectorControls key='inspector'>
129
- <PanelColor
130
- title={ __( 'Heading Color' ) }
131
- colorValue={ headingColor }
132
- initialOpen={ false }>
133
- <ColorPalette
134
- value={ headingColor }
135
- onChange={ ( colorValue ) => setAttributes( { headingColor: colorValue } ) }
136
- />
137
- </PanelColor>
138
- <PanelColor
139
- title={ __( 'Count Up Text Color' ) }
140
- colorValue={ color }
141
- initialOpen={ false }>
142
- <ColorPalette
143
- value={ color }
144
- onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
145
- />
146
- </PanelColor>
147
- <PanelColor
148
- title={ __( 'Description Color' ) }
149
- colorValue={ desColor }
150
- initialOpen={ false }>
151
- <ColorPalette
152
- value={ desColor }
153
- onChange={ ( colorValue ) => setAttributes( { desColor: colorValue } ) }
154
- />
155
- </PanelColor>
156
- <RangeControl
157
- label={ __( 'Counter Text Font Size' ) }
158
- max="100"
159
- min="10"
160
- value={ fontSize }
161
- onChange={ ( newFontSize ) => setAttributes( { fontSize: newFontSize } ) }
162
- >
163
- </RangeControl>
164
- </InspectorControls>
165
- )
166
- ];
167
- } ),
168
 
169
  // The "save" property must be specified and must be a valid function.
170
- save: function( props ) {
171
- const { color, headingColor, desColor, title, counter, des, fontSize } = props.attributes
172
-
173
- return (
174
- <div className={ 'ugb-countup' }>
175
- <h4 style={{ color: headingColor }}> { title } </h4>
176
- <div
177
- className={ 'ugb-counter' }
178
- style={ { color: color, fontSize: fontSize + 'px' } }
179
- data-duration="1000"
180
- data-delay="16"
181
- >
182
- { counter }
183
- </div>
184
- <p style={{ color: desColor }}> { des } </p>
185
- </div>
186
- );
187
- },
188
  } );
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
11
+ import { NumberBoxIcon } from '../../icons'
12
 
13
  const { __ } = wp.i18n; // Import __() from wp.i18n
14
+
15
+ const {
16
+ PanelColor,
17
+ withState,
18
+ RangeControl
19
+ } = wp.components
20
+
21
  const {
22
  registerBlockType, // Import registerBlockType() from wp.blocks
23
  InspectorControls,
25
  ColorPalette
26
  } = wp.blocks
27
 
28
+
29
+ export const edit = ( props ) => {
30
+
31
+ const onSetActiveEditable = ( newEditable ) => () => {
32
+ setState( { editable: newEditable } )
33
+ }
34
+
35
+ const { isSelected, editable, setState, setAttributes, className } = props
36
+
37
+ const { color, headingColor, desColor, title, counter, des, fontSize } = props.attributes
38
+
39
+ return [
40
+ <div className={ 'ugb-countup' }>
41
+ <RichText
42
+ tagName={ 'h4' }
43
+ value={ title }
44
+ onChange={ ( nextValue ) => setAttributes( { title: nextValue } ) }
45
+ isSelected={ isSelected && editable === 'title' }
46
+ onFocus={ onSetActiveEditable( 'title' ) }
47
+ style={{ color: headingColor }}
48
+ />
49
+ <RichText
50
+ tagName={ 'div' }
51
+ className={ 'ugb-counter' }
52
+ placeholder={ counter.default }
53
+ data-duration="1000"
54
+ data-delay="16"
55
+ value={ counter }
56
+ onChange={ ( nextValue ) => setAttributes( { counter: nextValue } ) }
57
+ isSelected={ isSelected && editable === 'counter' }
58
+ onFocus={ onSetActiveEditable( 'counter' ) }
59
+ style={ {
60
+ color: color,
61
+ fontSize: fontSize + 'px'
62
+ } }
63
+ />
64
+ <RichText
65
+ tagName={ 'p' }
66
+ className={ 'ugb-counter-des' }
67
+ value={ des }
68
+ onChange={ ( nextValue ) => setAttributes( { des: nextValue } ) }
69
+ isSelected={ isSelected && editable === 'des' }
70
+ onFocus={ onSetActiveEditable( 'des' ) }
71
+ style={{ color: desColor }}
72
+ />
73
+ </div>,
74
+ isSelected && (
75
+ <InspectorControls key='inspector'>
76
+ <PanelColor
77
+ title={ __( 'Heading Color' ) }
78
+ colorValue={ headingColor }
79
+ initialOpen={ false }>
80
+ <ColorPalette
81
+ value={ headingColor }
82
+ onChange={ ( colorValue ) => setAttributes( { headingColor: colorValue } ) }
83
+ />
84
+ </PanelColor>
85
+ <PanelColor
86
+ title={ __( 'Count Up Text Color' ) }
87
+ colorValue={ color }
88
+ initialOpen={ false }>
89
+ <ColorPalette
90
+ value={ color }
91
+ onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
92
+ />
93
+ </PanelColor>
94
+ <PanelColor
95
+ title={ __( 'Description Color' ) }
96
+ colorValue={ desColor }
97
+ initialOpen={ false }>
98
+ <ColorPalette
99
+ value={ desColor }
100
+ onChange={ ( colorValue ) => setAttributes( { desColor: colorValue } ) }
101
+ />
102
+ </PanelColor>
103
+ <RangeControl
104
+ label={ __( 'Counter Text Font Size' ) }
105
+ max="100"
106
+ min="10"
107
+ value={ fontSize }
108
+ onChange={ ( newFontSize ) => setAttributes( { fontSize: newFontSize } ) }
109
+ >
110
+ </RangeControl>
111
+ </InspectorControls>
112
+ )
113
+ ];
114
+ }
115
+
116
+ export const save = ( props ) => {
117
+
118
+ const { color, headingColor, desColor, title, counter, des, fontSize } = props.attributes
119
+
120
+ return (
121
+ <div className={ 'ugb-countup' }>
122
+ <h4 style={{ color: headingColor }}> { title } </h4>
123
+ <div
124
+ className={ 'ugb-counter' }
125
+ style={ { color: color, fontSize: fontSize + 'px' } }
126
+ data-duration="1000"
127
+ data-delay="16"
128
+ >
129
+ { counter }
130
+ </div>
131
+ <p style={{ color: desColor }}> { des } </p>
132
+ </div>
133
+ );
134
+ }
135
+
136
 
137
  /**
138
  * Register: Gutenberg Block.
191
  },
192
 
193
  // The "edit" property must be a valid function.
194
+ edit: withState( { editable: 'content', } )( edit ),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
195
 
196
  // The "save" property must be specified and must be a valid function.
197
+ save: save,
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
198
  } );
src/block/divider/index.js CHANGED
@@ -5,15 +5,89 @@
5
  * Simple block, renders and saves the same content without any interactivity.
6
  */
7
 
8
- // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
 
 
11
 
12
  const { __ } = wp.i18n; // Import __() from wp.i18n
13
- const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
14
- const { PanelColor } = wp.components;
15
 
16
- import { DividerIcon } from '../../icons'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
 
18
  /**
19
  * Register: aa Gutenberg Block.
@@ -56,65 +130,8 @@ registerBlockType( 'ugb/divider', {
56
  },
57
 
58
  // The "edit" property must be a valid function.
59
- edit: function( props ) {
60
-
61
- const { isSelected } = props;
62
- const { InspectorControls, ColorPalette, BlockControls, AlignmentToolbar } = wp.blocks;
63
- const { RangeControl } = wp.components
64
- const { height, width, color, alignment } = props.attributes;
65
-
66
- return [
67
- isSelected && (
68
- <BlockControls key='controls'>
69
- <AlignmentToolbar
70
- value={alignment}
71
- onChange={function( alignment ) {
72
- props.setAttributes( { alignment: alignment } );
73
- }}
74
- />
75
- </BlockControls>
76
- ),
77
- isSelected && (
78
- <InspectorControls key='inspector'>
79
- <RangeControl
80
- label={__('Height')}
81
- value={height}
82
- min='1'
83
- max='10'
84
- onChange={function( height ) {
85
- props.setAttributes( { height: height } );
86
- }}
87
- />
88
- <RangeControl
89
- label={__('Width')}
90
- value={width}
91
- min='10'
92
- max='100'
93
- step='0.1'
94
- onChange={function( width ) {
95
- props.setAttributes( { width: width } );
96
- }}
97
- />
98
- <PanelColor title={ __( 'Divider Color' ) } colorValue={ color } initialOpen={ false }>
99
- <ColorPalette
100
- value={ color }
101
- onChange={ ( colorValue ) => props.setAttributes( { color: colorValue } ) }
102
- />
103
- </PanelColor>
104
- </InspectorControls>
105
-
106
- ),
107
- <div className={ 'ugb-divider' } style={{ paddingTop: 8, paddingBottom: 8 }}>
108
- <hr align={alignment} style={{marginTop: 0, marginBottom: 0, backgroundColor:color, width:width + '%', height:height}} />
109
- </div>
110
- ]
111
- },
112
-
113
  // The "save" property must be specified and must be a valid function.
114
- save: function( props ) {
115
- const { height, width, color, alignment } = props.attributes
116
- return (
117
- <div className={ 'ugb-divider' }><hr align={alignment} style={{backgroundColor:color, width:width + '%', height:height}} /></div>
118
- );
119
- },
120
  } );
5
  * Simple block, renders and saves the same content without any interactivity.
6
  */
7
 
8
+ // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
11
+ import { DividerIcon } from '../../icons';
12
+
13
 
14
  const { __ } = wp.i18n; // Import __() from wp.i18n
 
 
15
 
16
+ const { registerBlockType, // Import registerBlockType() from wp.blocks
17
+ InspectorControls,
18
+ ColorPalette,
19
+ BlockControls,
20
+ AlignmentToolbar
21
+ } = wp.blocks;
22
+
23
+ const {
24
+ PanelColor,
25
+ RangeControl
26
+ } = wp.components;
27
+
28
+
29
+ export const save = ( props ) => {
30
+
31
+ const { height, width, color, alignment } = props.attributes
32
+
33
+ return (
34
+ <div className={ 'ugb-divider' }><hr align={alignment} style={{backgroundColor:color, width:width + '%', height:height}} /></div>
35
+ );
36
+ }
37
+
38
+ export const edit = ( props ) => {
39
+
40
+ const { isSelected } = props;
41
+
42
+ const { height, width, color, alignment } = props.attributes;
43
+
44
+ return [
45
+ isSelected && (
46
+ <BlockControls key='controls'>
47
+ <AlignmentToolbar
48
+ value={alignment}
49
+ onChange={function( alignment ) {
50
+ props.setAttributes( { alignment: alignment } );
51
+ }}
52
+ />
53
+ </BlockControls>
54
+ ),
55
+ isSelected && (
56
+ <InspectorControls key='inspector'>
57
+ <RangeControl
58
+ label={__('Height')}
59
+ value={height}
60
+ min='1'
61
+ max='10'
62
+ onChange={function( height ) {
63
+ props.setAttributes( { height: height } );
64
+ }}
65
+ />
66
+ <RangeControl
67
+ label={__('Width')}
68
+ value={width}
69
+ min='10'
70
+ max='100'
71
+ step='0.1'
72
+ onChange={function( width ) {
73
+ props.setAttributes( { width: width } );
74
+ }}
75
+ />
76
+ <PanelColor title={ __( 'Divider Color' ) } colorValue={ color } initialOpen={ false }>
77
+ <ColorPalette
78
+ value={ color }
79
+ onChange={ ( colorValue ) => props.setAttributes( { color: colorValue } ) }
80
+ />
81
+ </PanelColor>
82
+ </InspectorControls>
83
+
84
+ ),
85
+ <div className={ 'ugb-divider' } style={{ paddingTop: 8, paddingBottom: 8 }}>
86
+ <hr align={alignment} style={{marginTop: 0, marginBottom: 0, backgroundColor:color, width:width + '%', height:height}} />
87
+ </div>
88
+ ]
89
+ }
90
+
91
 
92
  /**
93
  * Register: aa Gutenberg Block.
130
  },
131
 
132
  // The "edit" property must be a valid function.
133
+ edit: edit,
134
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
135
  // The "save" property must be specified and must be a valid function.
136
+ save: save,
 
 
 
 
 
137
  } );
src/block/divider/style.scss CHANGED
@@ -14,5 +14,6 @@
14
  hr {
15
  background-color: #dddddd;
16
  border: 0 !important;
 
17
  }
18
  }
14
  hr {
15
  background-color: #dddddd;
16
  border: 0 !important;
17
+ padding: 0 !important;
18
  }
19
  }
src/block/expand/index.js CHANGED
@@ -8,9 +8,11 @@
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
 
 
11
 
12
  const { __ } = wp.i18n; // Import __() from wp.i18n
13
- const { Component } = wp.element
14
  const { withState } = wp.components
15
 
16
  const {
@@ -19,12 +21,133 @@ const {
19
  BlockControls,
20
  } = wp.blocks;
21
 
22
- import { ExpandIcon } from '../../icons'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
 
24
- const toRichTextMultilineValue = value => value.map( ( subValue => subValue.children ) );
25
- const fromRichTextMultilineValue = value => value.map( ( subValue ) => ( {
26
- children: subValue,
27
- } ) );
28
 
29
  /**
30
  * Register: aa Gutenberg Block.
@@ -89,117 +212,9 @@ registerBlockType( 'ugb/expand', {
89
  },
90
  },
91
 
92
-
93
-
94
  // The "edit" property must be a valid function.
95
- edit: withState( { editable: 'text', } )( ( props ) => {
96
-
97
- const {
98
- focus,
99
- setFocus,
100
- editable,
101
- setAttributes,
102
- setState,
103
- className,
104
- isSelected,
105
- } = props
106
-
107
- const onSetActiveEditable = ( newEditable ) => () => {
108
- setState( { editable: newEditable } );
109
- };
110
-
111
- const {
112
- text,
113
- moreLabel,
114
- moreText,
115
- lessLabel,
116
- } = props.attributes
117
-
118
- return [
119
- isSelected && (
120
- <BlockControls key="controls"/>
121
- ),
122
- <div key='expand' className={ className }>
123
- { isSelected && <label className="ugb-editor-label">Less text</label> }
124
- <RichText
125
- multiline='p'
126
- placeholder={ props.attributes.text.default }
127
- value={ toRichTextMultilineValue( text ) }
128
- onChange={ (text) => setAttributes( { text: fromRichTextMultilineValue( text ) } ) }
129
- isSelected={ isSelected && editable === 'text' }
130
- onFocus={ onSetActiveEditable( 'text' ) }
131
- className={`ugb-expand-less-text`}
132
- placeholder={ __( 'Some short text that can be expanded to show more details.' ) }
133
- />
134
- <RichText
135
- tagName='a'
136
- placeholder={ props.attributes.moreLabel.default }
137
- value={ moreLabel }
138
- isSelected={ isSelected && editable === 'moreLabel' }
139
- onFocus={ onSetActiveEditable( 'moreLabel' ) }
140
- onChange={ (text) => setAttributes( { moreLabel: text } ) }
141
- formattingControls={ [ 'bold', 'italic', 'strikethrough' ] }
142
- className={`ugb-expand-more`}
143
- placeholder={ __( 'Show more' ) }
144
- />
145
- { isSelected && <label className="ugb-editor-label">More text</label> }
146
- {
147
- isSelected &&
148
- <RichText
149
- multiline='p'
150
- placeholder={ props.attributes.moreText.default }
151
- value={ toRichTextMultilineValue( moreText ) }
152
- isSelected={ isSelected && editable === 'moreText' }
153
- onFocus={ onSetActiveEditable( 'moreText' ) }
154
- onChange={ (text) => setAttributes( { moreText: fromRichTextMultilineValue( text ) } ) }
155
- className={`ugb-expand-more-text`}
156
- placeholder={ __( 'Some short text that can be expanded to show more details. Some additional text that can only be seen when expanded.' ) }
157
- />
158
- }
159
- { isSelected &&
160
- <RichText
161
- tagName='a'
162
- placeholder={ props.attributes.lessLabel.default }
163
- value={ lessLabel }
164
- isSelected={ isSelected && editable === 'lessLabel' }
165
- onFocus={ onSetActiveEditable( 'lessLabel' ) }
166
- onChange={ (text) => setAttributes( { lessLabel: text } ) }
167
- formattingControls={ [ 'bold', 'italic', 'strikethrough' ] }
168
- className={`ugb-expand-less`}
169
- placeholder={ __( 'Show less' ) }
170
- />
171
- }
172
- </div>
173
- ]
174
- } ),
175
 
176
  // The "save" property must be specified and must be a valid function.
177
- save: function( props ) {
178
-
179
- const {
180
- text,
181
- moreLabel,
182
- moreText,
183
- lessLabel,
184
- } = props.attributes
185
-
186
- return (
187
- <div>
188
- <div className='ugb-expand-less-text'>
189
- { text.map( ( paragraph, i ) => (
190
- <p key={ i }>{ paragraph.children && paragraph.children.props.children }</p>
191
- ) ) }
192
- </div>
193
- <div className='ugb-expand-more-text' style={{ display: 'none' }}>
194
- { moreText.map( ( paragraph, i ) => (
195
- <p key={ i }>{ paragraph.children && paragraph.children.props.children }</p>
196
- ) ) }
197
- </div>
198
- <a className='ugb-expand-button' href="#">
199
- <span className='ugb-expand-more'>{ moreLabel }</span>
200
- <span className='ugb-expand-less' style={{ display: 'none' }}>{ lessLabel }</span>
201
- </a>
202
- </div>
203
- )
204
- },
205
  } );
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
11
+ import { ExpandIcon } from '../../icons'
12
+
13
 
14
  const { __ } = wp.i18n; // Import __() from wp.i18n
15
+
16
  const { withState } = wp.components
17
 
18
  const {
21
  BlockControls,
22
  } = wp.blocks;
23
 
24
+ const toRichTextMultilineValue = value => {
25
+ if ( value.map ) {
26
+ return value.map( ( subValue => subValue.children ) );
27
+ }
28
+ return ''
29
+ }
30
+
31
+ const fromRichTextMultilineValue = value => {
32
+ if ( value.map ) {
33
+ return value.map( ( subValue ) => ( {
34
+ children: subValue,
35
+ } ) );
36
+ }
37
+ return ''
38
+ }
39
+
40
+
41
+ export const edit = ( props ) => {
42
+
43
+ const {
44
+ focus,
45
+ setFocus,
46
+ editable,
47
+ setAttributes,
48
+ setState,
49
+ className,
50
+ isSelected,
51
+ } = props
52
+
53
+ const onSetActiveEditable = ( newEditable ) => () => {
54
+ setState( { editable: newEditable } );
55
+ };
56
+
57
+ const {
58
+ text,
59
+ moreLabel,
60
+ moreText,
61
+ lessLabel,
62
+ } = props.attributes
63
+
64
+ return [
65
+ isSelected && (
66
+ <BlockControls key="controls"/>
67
+ ),
68
+ <div key='expand' className={ className }>
69
+ { isSelected && <label className="ugb-editor-label">Less text</label> }
70
+ <RichText
71
+ multiline='p'
72
+ placeholder={ props.attributes.text.default }
73
+ value={ toRichTextMultilineValue( text ) }
74
+ onChange={ (text) => setAttributes( { text: fromRichTextMultilineValue( text ) } ) }
75
+ isSelected={ isSelected && editable === 'text' }
76
+ onFocus={ onSetActiveEditable( 'text' ) }
77
+ className={`ugb-expand-less-text`}
78
+ placeholder={ __( 'Some short text that can be expanded to show more details.' ) }
79
+ />
80
+ <RichText
81
+ tagName='a'
82
+ placeholder={ props.attributes.moreLabel.default }
83
+ value={ moreLabel }
84
+ isSelected={ isSelected && editable === 'moreLabel' }
85
+ onFocus={ onSetActiveEditable( 'moreLabel' ) }
86
+ onChange={ (text) => setAttributes( { moreLabel: text } ) }
87
+ formattingControls={ [ 'bold', 'italic', 'strikethrough' ] }
88
+ className={`ugb-expand-more`}
89
+ placeholder={ __( 'Show more' ) }
90
+ />
91
+ { isSelected && <label className="ugb-editor-label">More text</label> }
92
+ {
93
+ isSelected &&
94
+ <RichText
95
+ multiline='p'
96
+ placeholder={ props.attributes.moreText.default }
97
+ value={ toRichTextMultilineValue( moreText ) }
98
+ isSelected={ isSelected && editable === 'moreText' }
99
+ onFocus={ onSetActiveEditable( 'moreText' ) }
100
+ onChange={ (text) => setAttributes( { moreText: fromRichTextMultilineValue( text ) } ) }
101
+ className={`ugb-expand-more-text`}
102
+ placeholder={ __( 'Some short text that can be expanded to show more details. Some additional text that can only be seen when expanded.' ) }
103
+ />
104
+ }
105
+ { isSelected &&
106
+ <RichText
107
+ tagName='a'
108
+ placeholder={ props.attributes.lessLabel.default }
109
+ value={ lessLabel }
110
+ isSelected={ isSelected && editable === 'lessLabel' }
111
+ onFocus={ onSetActiveEditable( 'lessLabel' ) }
112
+ onChange={ (text) => setAttributes( { lessLabel: text } ) }
113
+ formattingControls={ [ 'bold', 'italic', 'strikethrough' ] }
114
+ className={`ugb-expand-less`}
115
+ placeholder={ __( 'Show less' ) }
116
+ />
117
+ }
118
+ </div>
119
+ ]
120
+ }
121
+
122
+ export const save = ( props ) => {
123
+
124
+ const {
125
+ text,
126
+ moreLabel,
127
+ moreText,
128
+ lessLabel,
129
+ } = props.attributes
130
+
131
+ return (
132
+ <div>
133
+ <div className='ugb-expand-less-text'>
134
+ { text.map && text.map( ( paragraph, i ) => (
135
+ <p key={ i }>{ paragraph.children && paragraph.children.props.children }</p>
136
+ ) ) }
137
+ </div>
138
+ <div className='ugb-expand-more-text' style={{ display: 'none' }}>
139
+ { moreText.map && moreText.map( ( paragraph, i ) => (
140
+ <p key={ i }>{ paragraph.children && paragraph.children.props.children }</p>
141
+ ) ) }
142
+ </div>
143
+ <a className='ugb-expand-button' href="#">
144
+ <span className='ugb-expand-more'>{ moreLabel }</span>
145
+ <span className='ugb-expand-less' style={{ display: 'none' }}>{ lessLabel }</span>
146
+ </a>
147
+ </div>
148
+ )
149
+ }
150
 
 
 
 
 
151
 
152
  /**
153
  * Register: aa Gutenberg Block.
212
  },
213
  },
214
 
 
 
215
  // The "edit" property must be a valid function.
216
+ edit: withState( { editable: 'text', } )( edit ),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
217
 
218
  // The "save" property must be specified and must be a valid function.
219
+ save: save,
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
220
  } );
src/block/ghost-button/index.js CHANGED
@@ -8,9 +8,11 @@
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
 
 
11
 
12
  const { __ } = wp.i18n; // Import __() from wp.i18n
13
- const { Component } = wp.element
14
  const {
15
  registerBlockType, // Import registerBlockType() from wp.block
16
  InspectorControls,
@@ -29,124 +31,153 @@ const {
29
  RangeControl,
30
  } = wp.components
31
 
32
- import { GhostButtonIcon } from '../../icons'
33
 
34
- class UGBGhostButtonBlock extends Component {
35
-
36
- render() {
37
- const {
38
- isSelected,
39
- setAttributes
40
- } = this.props
41
-
42
- const {
43
- url,
44
- title,
45
- text,
46
- color,
47
- size,
48
- textAlignment,
49
- cornerButtonRadius,
50
- borderThickness
51
- } = this.props.attributes
52
-
53
- const buttonSizes = [
54
- { value: 'small', label: __( 'Small' ) },
55
- { value: 'normal', label: __( 'Normal ' ) },
56
- { value: 'medium', label: __( 'Medium' ) },
57
- { value: 'large', label: __( 'Large' ) },
58
- ]
59
-
60
- return [
61
- isSelected && (
62
- <BlockControls key='controls'>
63
- <AlignmentToolbar
64
- value={textAlignment}
65
- onChange={ ( nextAlign ) => {
66
- setAttributes( { textAlignment: nextAlign } );
67
- } }
68
- />
69
- </BlockControls>
70
- ),
71
- <span key='button'
72
- title={ title }
73
- className={ `wp-block-button ugb-button-${textAlignment}` }>
74
- <RichText
75
- tagName={ 'span' }
76
- placeholder={ __( 'Enter Text' ) }
77
- value={ text }
78
- onChange={ ( text ) => setAttributes( { text: text } ) }
79
- formattingControls={ [ 'bold', 'italic', 'strikethrough' ] }
80
- className={ `wp-ugb-button ugb-button-${size} ugb-ghost-button` }
81
- style = { {
82
- borderColor: color,
83
- color: color,
84
- borderRadius: cornerButtonRadius + 'px',
85
- borderWidth: borderThickness + 'px',
86
  } }
87
- isSelected={ isSelected }
88
- keepPlaceholderOnFocus
89
  />
90
- {
91
- isSelected &&
92
- <InspectorControls key='inspector'>
93
- <SelectControl
94
- label={ __( 'Size' ) }
95
- value={ size }
96
- options={ buttonSizes.map( ( { value, label } ) => ( {
97
- value: value,
98
- label: label,
99
- } ) ) }
100
- onChange={ ( newSize ) => { setAttributes( { size: newSize } ) } }
101
- />
102
- <RangeControl
103
- label={ __( 'Corner Radius' ) }
104
- value={ cornerButtonRadius }
105
- min='1'
106
- max='50'
107
- onChange={ ( cornerRad ) => setAttributes( { cornerButtonRadius: cornerRad } ) }
108
- />
109
- <RangeControl
110
- label={ __( 'Border Thickness' ) }
111
- value={ borderThickness }
112
- min='1'
113
- max='10'
114
- onChange={ ( borderThick ) => setAttributes( { borderThickness: borderThick } ) }
115
- />
116
- <PanelColor
117
- title={ __( 'Button Color' ) }
118
- colorValue={ color }
119
- initialOpen={ false }
120
- >
121
- <ColorPalette
122
- value={ color }
123
- onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
124
- />
125
- </PanelColor>
126
- </InspectorControls>
127
- }
128
- </span>,
129
- isSelected && (
130
- <form
131
- key={ 'form-link' }
132
- onSubmit={ ( event ) => event.preventDefault() }
133
- className={ `blocks-button__inline-link ugb-button-${textAlignment}`}>
134
- <Dashicon icon={ 'admin-links' } />
135
- <UrlInput
136
- value={ url }
137
- onChange={ ( value ) => setAttributes( { url: value } ) }
138
  />
139
- <IconButton
140
- icon={ 'editor-break' }
141
- label={ __( 'Apply' ) }
142
- type={ 'submit' }
 
 
143
  />
144
- </form>
145
- ),
146
- ]
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
147
  }
 
 
 
 
 
 
 
 
148
  }
149
 
 
 
 
 
 
 
 
150
  /**
151
  * Register: Gutenberg Block.
152
  *
@@ -175,12 +206,6 @@ registerBlockType( 'ugb/ghost-button', {
175
  selector: 'a',
176
  attribute: 'href',
177
  },
178
- title: {
179
- type: 'string',
180
- source: 'attribute',
181
- selector: 'a',
182
- attribute: 'title',
183
- },
184
  text: {
185
  type: 'array',
186
  source: 'children',
@@ -211,24 +236,8 @@ registerBlockType( 'ugb/ghost-button', {
211
  },
212
 
213
  // The "edit" property must be a valid function.
214
- edit: UGBGhostButtonBlock,
215
 
216
  // The "save" property must be valid function.
217
- save: function( props ) {
218
- const { url, title, text, textAlignment, color, size, cornerButtonRadius, borderThickness } = props.attributes;
219
- const buttonStyle = {
220
- borderColor: color,
221
- color: color,
222
- borderRadius: cornerButtonRadius + 'px',
223
- borderWidth: borderThickness + 'px',
224
- }
225
-
226
- return (
227
- <div className={ `ugb-button-${textAlignment}` }>
228
- <a href={ url } className={ `wp-ugb-button ugb-button-${size} ugb-ghost-button` } style={ buttonStyle }>
229
- { text }
230
- </a>
231
- </div>
232
- );
233
- }
234
  } )
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
11
+ import { GhostButtonIcon } from '../../icons'
12
+
13
 
14
  const { __ } = wp.i18n; // Import __() from wp.i18n
15
+
16
  const {
17
  registerBlockType, // Import registerBlockType() from wp.block
18
  InspectorControls,
31
  RangeControl,
32
  } = wp.components
33
 
 
34
 
35
+ export const edit = ( props ) => {
36
+ const {
37
+ isSelected,
38
+ setAttributes
39
+ } = props
40
+
41
+ const {
42
+ url,
43
+ text,
44
+ color,
45
+ size,
46
+ textAlignment,
47
+ cornerButtonRadius,
48
+ borderThickness
49
+ } = props.attributes
50
+
51
+ const buttonSizes = [
52
+ { value: 'small', label: __( 'Small' ) },
53
+ { value: 'normal', label: __( 'Normal ' ) },
54
+ { value: 'medium', label: __( 'Medium' ) },
55
+ { value: 'large', label: __( 'Large' ) },
56
+ ]
57
+
58
+ return [
59
+ isSelected && (
60
+ <BlockControls key='controls'>
61
+ <AlignmentToolbar
62
+ value={textAlignment}
63
+ onChange={ ( nextAlign ) => {
64
+ setAttributes( { textAlignment: nextAlign } );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65
  } }
 
 
66
  />
67
+ </BlockControls>
68
+ ),
69
+ <span key='button'
70
+ className={ `wp-block-button ugb-button-${textAlignment}` }>
71
+ <RichText
72
+ tagName={ 'span' }
73
+ placeholder={ __( 'Enter Text' ) }
74
+ value={ text }
75
+ onChange={ ( text ) => setAttributes( { text: text } ) }
76
+ formattingControls={ [ 'bold', 'italic', 'strikethrough' ] }
77
+ className={ `wp-ugb-button ugb-button-${size} ugb-ghost-button` }
78
+ style = { {
79
+ borderColor: color,
80
+ color: color,
81
+ borderRadius: cornerButtonRadius + 'px',
82
+ borderWidth: borderThickness + 'px',
83
+ } }
84
+ isSelected={ isSelected }
85
+ keepPlaceholderOnFocus
86
+ />
87
+ {
88
+ isSelected &&
89
+ <InspectorControls key='inspector'>
90
+ <SelectControl
91
+ label={ __( 'Size' ) }
92
+ value={ size }
93
+ options={ buttonSizes.map( ( { value, label } ) => ( {
94
+ value: value,
95
+ label: label,
96
+ } ) ) }
97
+ onChange={ ( newSize ) => { setAttributes( { size: newSize } ) } }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
98
  />
99
+ <RangeControl
100
+ label={ __( 'Corner Radius' ) }
101
+ value={ cornerButtonRadius }
102
+ min='1'
103
+ max='50'
104
+ onChange={ ( cornerRad ) => setAttributes( { cornerButtonRadius: cornerRad } ) }
105
  />
106
+ <RangeControl
107
+ label={ __( 'Border Thickness' ) }
108
+ value={ borderThickness }
109
+ min='1'
110
+ max='10'
111
+ onChange={ ( borderThick ) => setAttributes( { borderThickness: borderThick } ) }
112
+ />
113
+ <PanelColor
114
+ title={ __( 'Button Color' ) }
115
+ colorValue={ color }
116
+ initialOpen={ false }
117
+ >
118
+ <ColorPalette
119
+ value={ color }
120
+ onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
121
+ />
122
+ </PanelColor>
123
+ </InspectorControls>
124
+ }
125
+ </span>,
126
+ isSelected && (
127
+ <form
128
+ key={ 'form-link' }
129
+ onSubmit={ ( event ) => event.preventDefault() }
130
+ className={ `blocks-button__inline-link ugb-button-${textAlignment}`}>
131
+ <Dashicon icon={ 'admin-links' } />
132
+ <UrlInput
133
+ value={ url }
134
+ onChange={ ( value ) => setAttributes( { url: value } ) }
135
+ />
136
+ <IconButton
137
+ icon={ 'editor-break' }
138
+ label={ __( 'Apply' ) }
139
+ type={ 'submit' }
140
+ />
141
+ </form>
142
+ ),
143
+ ]
144
+ }
145
+
146
+ export const save = ( props ) => {
147
+
148
+ const {
149
+ url,
150
+ text,
151
+ textAlignment,
152
+ color,
153
+ size,
154
+ cornerButtonRadius,
155
+ borderThickness
156
+ } = props.attributes;
157
+
158
+ const buttonStyle = {
159
+ borderColor: color,
160
+ color: color,
161
+ borderRadius: cornerButtonRadius + 'px',
162
+ borderWidth: borderThickness + 'px',
163
  }
164
+
165
+ return (
166
+ <div className={ `ugb-button-${textAlignment}` }>
167
+ <a href={ url } className={ `wp-ugb-button ugb-button-${size} ugb-ghost-button` } style={ buttonStyle }>
168
+ { text }
169
+ </a>
170
+ </div>
171
+ );
172
  }
173
 
174
+ // class UGBGhostButtonBlock extends Component {
175
+ //
176
+ // render() {
177
+ //
178
+ // }
179
+ // }
180
+
181
  /**
182
  * Register: Gutenberg Block.
183
  *
206
  selector: 'a',
207
  attribute: 'href',
208
  },
 
 
 
 
 
 
209
  text: {
210
  type: 'array',
211
  source: 'children',
236
  },
237
 
238
  // The "edit" property must be a valid function.
239
+ edit: edit,
240
 
241
  // The "save" property must be valid function.
242
+ save: save,
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
243
  } )
src/block/header/editor.scss ADDED
@@ -0,0 +1,6 @@
 
 
 
 
 
 
1
+ /**
2
+ * #.# Editor Styles for Header Block
3
+ *
4
+ * CSS for just Backend enqueued after style.scss
5
+ * which makes it higher in priority.
6
+ */
src/block/header/index.js ADDED
@@ -0,0 +1,470 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * BLOCK: Header Block.
3
+ *
4
+ * Registering a basic block with Gutenberg.
5
+ * Simple block, renders and saves the same content without any interactivity.
6
+ */
7
+
8
+ import classnames from 'classnames';
9
+
10
+ // Import CSS.
11
+ import './style.scss';
12
+ import './editor.scss';
13
+ import { HeaderIcon } from '../../icons'
14
+
15
+
16
+ const { __ } = wp.i18n; // Import __() from wp.i18n
17
+
18
+ const {
19
+ IconButton,
20
+ PanelColor,
21
+ Dashicon,
22
+ RangeControl,
23
+ SelectControl,
24
+ Toolbar,
25
+ Button,
26
+ withState
27
+ } = wp.components;
28
+
29
+ const {
30
+ registerBlockType, // Import registerBlockType() from wp.blocks
31
+ RichText,
32
+ AlignmentToolbar,
33
+ MediaUpload,
34
+ BlockControls,
35
+ InspectorControls,
36
+ ColorPalette,
37
+ UrlInput
38
+ } = wp.blocks;
39
+
40
+
41
+ export const edit = ( props ) => {
42
+
43
+ const {
44
+ className,
45
+ setAttributes,
46
+ isSelected,
47
+ editable,
48
+ setState
49
+ } = props
50
+
51
+ const {
52
+ url,
53
+ buttonURL,
54
+ buttonText,
55
+ buttonColor,
56
+ buttonTextColor,
57
+ cornerButtonRadius,
58
+ size,
59
+ title,
60
+ titleColor,
61
+ subtitle,
62
+ subtitleColor,
63
+ contentAlign,
64
+ id,
65
+ backgroundColor,
66
+ opacity,
67
+ } = props.attributes
68
+
69
+ const style = url ? { backgroundImage: `url(${ url })` } : undefined
70
+
71
+ const imageClass = url ? 'has-image' : ''
72
+
73
+ const opacityClass = classnames(
74
+ opacityToClass( opacity ),
75
+ {
76
+ 'overlay-opacity': opacity !== 0,
77
+ }
78
+ );
79
+
80
+ const onSetActiveEditable = ( newEditable ) => () => {
81
+ setState( { editable: newEditable } )
82
+ }
83
+
84
+ const buttonSizes = [
85
+ { value: 'small', label: __( 'Small' ) },
86
+ { value: 'normal', label: __( 'Normal' ) },
87
+ { value: 'medium', label: __( 'Medium' ) },
88
+ { value: 'large', label: __( 'Large' ) },
89
+ ];
90
+
91
+ return [
92
+ isSelected && (
93
+ <BlockControls key='controls'>
94
+ <AlignmentToolbar
95
+ value={ contentAlign }
96
+ onChange={ ( newAlign ) => setAttributes( { contentAlign: newAlign } ) }
97
+ />
98
+ <Toolbar>
99
+ <MediaUpload
100
+ onSelect={ ( media ) => setAttributes( { url: media.url, id: media.id } ) }
101
+ type="image"
102
+ value={ id }
103
+ render={ ( { open } ) => (
104
+ <IconButton
105
+ className="components-toolbar__control"
106
+ label={ __( 'Edit image' ) }
107
+ icon="edit"
108
+ onClick={ open }
109
+ />
110
+ ) }
111
+ />
112
+ </Toolbar>
113
+ </BlockControls>
114
+ ),
115
+ isSelected && (
116
+ <InspectorControls key={ 'inspector' }>
117
+ <PanelColor
118
+ title={ __( 'Title Color' ) }
119
+ colorValue={ titleColor }
120
+ initialOpen={ false }
121
+ >
122
+ <ColorPalette
123
+ value={ titleColor }
124
+ onChange={ ( colorValue ) => setAttributes( { titleColor: colorValue } ) }
125
+ />
126
+ </PanelColor>
127
+ <PanelColor
128
+ title={ __( 'Subtitle Color' ) }
129
+ colorValue={ subtitleColor }
130
+ initialOpen={ false }
131
+ >
132
+ <ColorPalette
133
+ value={ subtitleColor }
134
+ onChange={ ( colorValue ) => setAttributes( { subtitleColor: colorValue } ) }
135
+ />
136
+ </PanelColor>
137
+ <PanelColor
138
+ title={ __( 'Heading Background Color' ) }
139
+ colorValue={ backgroundColor }
140
+ initialOpen={ false }
141
+ >
142
+ <ColorPalette
143
+ value={ backgroundColor }
144
+ onChange={ ( colorValue ) => setAttributes( { backgroundColor: colorValue } ) }
145
+ />
146
+ </PanelColor>
147
+ <RangeControl
148
+ label={ __( 'Background Opacity' ) }
149
+ value={ opacity }
150
+ min={ 0 }
151
+ max={ 10 }
152
+ step={ 1 }
153
+ onChange={ ( ratio ) => setAttributes( { opacity: ratio } ) }
154
+ />
155
+ <h2>Button Settings</h2>
156
+ <SelectControl
157
+ label={ __( 'Button Size' ) }
158
+ value={ size }
159
+ options={ buttonSizes.map( ({ value, label }) => ( {
160
+ value: value,
161
+ label: label,
162
+ } ) ) }
163
+ onChange={ ( newSize ) => { setAttributes( { size: newSize } ) } }
164
+ />
165
+ <RangeControl
166
+ label={ __( 'Corner Radius' ) }
167
+ value={ cornerButtonRadius }
168
+ min='1'
169
+ max='50'
170
+ onChange={ ( cornerRad ) => setAttributes( { cornerButtonRadius: cornerRad } ) }
171
+ />
172
+ <PanelColor
173
+ title={ __( 'Button Color' ) }
174
+ colorValue={ buttonColor }
175
+ initialOpen={ false }
176
+ >
177
+ <ColorPalette
178
+ value={ buttonColor }
179
+ onChange={ ( colorValue ) => setAttributes( { buttonColor: colorValue } ) }
180
+ />
181
+ </PanelColor>
182
+ <PanelColor
183
+ title={ __( 'Button Text Color' ) }
184
+ colorValue={ buttonTextColor }
185
+ initialOpen={ false }
186
+ >
187
+ <ColorPalette
188
+ value={ buttonTextColor }
189
+ onChange={ ( colorValue ) => setAttributes( { buttonTextColor: colorValue } ) }
190
+ />
191
+ </PanelColor>
192
+ </InspectorControls>
193
+ ),
194
+ <div key={'editable'}
195
+ className={ `ugb-header ${imageClass} ` }
196
+ >
197
+ <div className={ `ugb-header-overlay ${opacityClass}` }
198
+ style={ {
199
+ backgroundColor: backgroundColor,
200
+ } }
201
+ >
202
+ </div>
203
+ <MediaUpload
204
+ onSelect={ ( media ) => setAttributes( { url: media.url, id: media.id } ) }
205
+ type={'image'}
206
+ value={id}
207
+ render={ function( obj ) {
208
+ return [
209
+ ! url && (
210
+ <Button
211
+ className={ id ? '' : 'button button-large' }
212
+ onClick={ obj.open }
213
+ >
214
+ {__('Upload Image')}
215
+ </Button>
216
+ )
217
+ ]
218
+ } }
219
+ />
220
+ <section
221
+ key="preview"
222
+ data-url={ url }
223
+ style={ style }
224
+ className={ 'ugb-header-section' }
225
+ >
226
+ <RichText
227
+ tagName="h2"
228
+ className={ 'ugb-header-title' }
229
+ placeholder={ title.default }
230
+ value={ title }
231
+ onChange={ ( value ) => setAttributes( { title: value } ) }
232
+ isSelected={ isSelected && editable === 'title' }
233
+ onFocus={ onSetActiveEditable( 'title' ) }
234
+ style={ {
235
+ textAlign: contentAlign,
236
+ color: titleColor
237
+ } }
238
+ />
239
+ <RichText
240
+ tagName="p"
241
+ className={ 'ugb-header-subtitle' }
242
+ placeholder={ subtitle.default }
243
+ value={ subtitle }
244
+ onChange={ ( value ) => setAttributes( { subtitle: value } ) }
245
+ isSelected={ isSelected && editable === 'subtitle' }
246
+ onFocus={ onSetActiveEditable( 'subtitle' ) }
247
+ style={ {
248
+ textAlign: contentAlign,
249
+ color: subtitleColor
250
+ } }
251
+ />
252
+ <span key={ 'button' }
253
+ className={ `wp-block-button ugb-button-${contentAlign}` }>
254
+ <RichText
255
+ tagName={ 'span' }
256
+ placeholder={ buttonText.default }
257
+ value={ buttonText }
258
+ onChange={ (text) => setAttributes( { buttonText: text } ) }
259
+ className={`wp-ugb-button ugb-button-${size}`}
260
+ style={ {
261
+ backgroundColor: buttonColor,
262
+ color: buttonTextColor,
263
+ borderRadius: cornerButtonRadius + 'px',
264
+ } }
265
+ isSelected={ isSelected && editable === 'buttonText' }
266
+ onFocus={ onSetActiveEditable( 'buttonText' ) }
267
+ keepPlaceholderOnFocus
268
+ />
269
+ </span>
270
+
271
+ </section>
272
+ </div>,
273
+ isSelected && (
274
+ <form
275
+ key={ 'form-link' }
276
+ onSubmit={ ( event ) => event.preventDefault() }
277
+ className={ `blocks-button__inline-link ugb-button-${contentAlign}`}>
278
+ <Dashicon icon={ 'admin-links' } />
279
+ <UrlInput
280
+ value={ buttonURL }
281
+ onChange={ ( value ) => setAttributes( { buttonURL: value } ) }
282
+ />
283
+ <IconButton
284
+ icon={ 'editor-break' }
285
+ label={ __( 'Apply' ) }
286
+ type={ 'submit' }
287
+ />
288
+ </form>
289
+ )
290
+ ];
291
+ }
292
+
293
+ export const save = ( props ) => {
294
+
295
+ const {
296
+ url,
297
+ buttonURL,
298
+ buttonText,
299
+ buttonColor,
300
+ buttonTextColor,
301
+ cornerButtonRadius,
302
+ size,
303
+ title,
304
+ titleColor,
305
+ subtitle,
306
+ subtitleColor,
307
+ contentAlign,
308
+ id,
309
+ backgroundColor,
310
+ opacity
311
+ } = props.attributes
312
+
313
+ const buttonStyle = {
314
+ backgroundColor: buttonColor,
315
+ color: buttonTextColor,
316
+ borderRadius: cornerButtonRadius + 'px',
317
+ }
318
+
319
+ const style = url ? { backgroundImage: `url(${ url })` } : undefined
320
+
321
+ const imageClass = url ? 'has-image' : ''
322
+
323
+ const opacityClass = classnames(
324
+ opacityToClass( opacity ),
325
+ {
326
+ 'overlay-opacity': opacity !== 0,
327
+ }
328
+ );
329
+
330
+ const displayNone = ( ! title.length && ! subtitle.length && ! buttonText.length ) ? 'has-no-content' : 'has-content'
331
+
332
+ return (
333
+ <div className={ `ugb-header ${imageClass} ${displayNone}` }>
334
+ <div className={ `ugb-header-overlay ${opacityClass}` }
335
+ style={ { backgroundColor: backgroundColor } }>
336
+ </div>
337
+ <section
338
+ key="preview"
339
+ data-url={ url }
340
+ style={ style }
341
+ className={ 'ugb-header-section' }>
342
+ { title && !! title.length && (
343
+ <h2 className={ 'ugb-header-title' } style={ { color: titleColor } }>
344
+ { title }
345
+ </h2>
346
+ ) }
347
+ { subtitle && !! subtitle.length && (
348
+ <p className={ 'ugb-header-subtitle' } style={ { color: subtitleColor } }>
349
+ { subtitle }
350
+ </p>
351
+ ) }
352
+ { buttonText && !! buttonText.length && (
353
+ <a
354
+ href={ buttonURL }
355
+ className={ `wp-ugb-button ugb-button-${size}` }
356
+ style={ buttonStyle }>
357
+ { buttonText }
358
+ </a>
359
+ ) }
360
+ </section>
361
+ </div>
362
+ );
363
+ }
364
+
365
+
366
+ /**
367
+ * Register: Gutenberg Block.
368
+ *
369
+ * Registers a new block provided a unique name and an object defining its
370
+ * behavior. Once registered, the block is made editor as an option to any
371
+ * editor interface where blocks are implemented.
372
+ *
373
+ * @param {string} name Block name.
374
+ * @param {Object} settings Block settings.
375
+ * @return {?WPBlock} The block, if it has been successfully
376
+ * registered; otherwise `undefined`.
377
+ */
378
+ registerBlockType( 'ugb/header', {
379
+ // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
380
+ title: __( 'Header' ), // Block title.
381
+ icon: HeaderIcon, // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
382
+ category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
383
+ keywords: [
384
+ __( 'Header' ),
385
+ __( 'Stackable' ),
386
+ ],
387
+ attributes: {
388
+ title: {
389
+ type: 'array',
390
+ source: 'children',
391
+ selector: 'h2',
392
+ default: __( 'Heading Title' )
393
+ },
394
+ subtitle: {
395
+ type: 'array',
396
+ source: 'children',
397
+ selector: 'p',
398
+ default: __( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue tincidunt nisit ut pretium. Duis blandit, tortor et suscipit tincidunt, dolor metus mattis neque, ac varius magna nibh ac tortor.' )
399
+ },
400
+ url: {
401
+ type: 'string',
402
+ source: 'attribute',
403
+ selector: '.ugb-header .ugb-header-section',
404
+ attribute: 'data-url',
405
+ },
406
+ buttonURL: {
407
+ type: 'string',
408
+ source: 'attribute',
409
+ selector: 'a',
410
+ attribute: 'href',
411
+ },
412
+ titleColor: {
413
+ type: 'string',
414
+ default: '#ffffff',
415
+ },
416
+ subtitleColor: {
417
+ type: 'string',
418
+ default: '#ffffff',
419
+ },
420
+ buttonText: {
421
+ type: 'array',
422
+ source: 'children',
423
+ selector: '.ugb-header a.wp-ugb-button',
424
+ default: __( 'Button' )
425
+ },
426
+ buttonColor: {
427
+ type: 'string',
428
+ default: '#2091e1',
429
+ },
430
+ buttonTextColor: {
431
+ type: 'string',
432
+ default: '#ffffff',
433
+ },
434
+ size: {
435
+ type: 'string',
436
+ default: 'normal',
437
+ },
438
+ cornerButtonRadius: {
439
+ type: 'number',
440
+ default: 4,
441
+ },
442
+ contentAlign: {
443
+ type: 'string',
444
+ default: 'center',
445
+ },
446
+ id: {
447
+ type: 'number',
448
+ },
449
+ backgroundColor: {
450
+ type: 'string',
451
+ default: '#000000',
452
+ },
453
+ opacity: {
454
+ type: 'number',
455
+ default: 5,
456
+ },
457
+ },
458
+
459
+ // The "edit" property must be a valid function.
460
+ edit: withState( { editable: 'content', } )( edit ),
461
+
462
+ // The "save" property must be specified and must be a valid function.
463
+ save: save,
464
+ } );
465
+
466
+ function opacityToClass( ratio ) {
467
+ return ( ratio === 0 ) ?
468
+ null :
469
+ 'overlay-opacity-' + ( 1 * Math.round( ratio / 1 ) );
470
+ }
src/block/header/style.scss ADDED
@@ -0,0 +1,104 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * #.# Styles for Header Block.
3
+ *
4
+ * CSS for both Frontend+Backend.
5
+ */
6
+ .ugb-header.has-image {
7
+ padding: 0;
8
+ .ugb-header-section {
9
+ padding: 9.5rem 4rem;
10
+ background-size: cover;
11
+ background-repeat: no-repeat;
12
+ background-position: center;
13
+ }
14
+ }
15
+ .ugb-header {
16
+ text-align: center;
17
+ padding: 9.5rem 4rem;
18
+ position: relative;
19
+ .ugb-header-overlay {
20
+ position: absolute;
21
+ top: 0;
22
+ left: 0;
23
+ right: 0;
24
+ bottom: 0;
25
+ }
26
+ .header-image {
27
+ height: 400px;
28
+ width: 600px;
29
+ background-size: cover;
30
+ background-repeat: no-repeat;
31
+ background-position: center;
32
+ }
33
+ .wp-block-button.ugb-button-center {
34
+ left: 0;
35
+ transform: translateX(0);
36
+ margin-bottom: 1.5em;
37
+ }
38
+ .wp-block-button.ugb-button-right {
39
+ transform: translateX(-50%);
40
+ left: 50%;
41
+ margin-bottom: 1.5em;
42
+ }
43
+ .wp-block-button.ugb-button-left {
44
+ transform: translateX(50%);
45
+ left: -50%;
46
+ margin-bottom: 1.5em;
47
+ }
48
+ .ugb-header-title {
49
+ margin-bottom: 1rem;
50
+ padding-bottom: 0;
51
+ margin-top: 0;
52
+ position: relative;
53
+ }
54
+ .ugb-header-subtitle {
55
+ margin-bottom: 2rem;
56
+ padding-bottom: 0;
57
+ position: relative;
58
+ }
59
+ button.components-button {
60
+ margin-bottom: .5em;
61
+ position: relative;
62
+ }
63
+ .wp-ugb-button {
64
+ position: relative;
65
+ }
66
+ }
67
+
68
+ .ugb-header-overlay.overlay-opacity.overlay-opacity-1 {
69
+ opacity: .1;
70
+ }
71
+ .ugb-header-overlay.overlay-opacity.overlay-opacity-2 {
72
+ opacity: .2;
73
+ }
74
+ .ugb-header-overlay.overlay-opacity.overlay-opacity-3 {
75
+ opacity: .3;
76
+ }
77
+ .ugb-header-overlay.overlay-opacity.overlay-opacity-4 {
78
+ opacity: .4;
79
+ }
80
+ .ugb-header-overlay.overlay-opacity.overlay-opacity-5 {
81
+ opacity: .5;
82
+ }
83
+ .ugb-header-overlay.overlay-opacity.overlay-opacity-6 {
84
+ opacity: .6;
85
+ }
86
+ .ugb-header-overlay.overlay-opacity.overlay-opacity-7 {
87
+ opacity: .7;
88
+ }
89
+ .ugb-header-overlay.overlay-opacity.overlay-opacity-8 {
90
+ opacity: .8;
91
+ }
92
+ .ugb-header-overlay.overlay-opacity.overlay-opacity-9 {
93
+ opacity: .9;
94
+ }
95
+ .ugb-header-overlay.overlay-opacity.overlay-opacity-10 {
96
+ opacity: 1;
97
+ }
98
+
99
+ /**
100
+ * Frontend Styles.
101
+ */
102
+ .wp-block-ugb-header.has-no-content {
103
+ display: none
104
+ }
src/block/image-box/index.js CHANGED
@@ -8,9 +8,11 @@
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
 
 
11
 
12
  const { __ } = wp.i18n; // Import __() from wp.i18n
13
- const { Component } = wp.element
14
  const {
15
  IconButton,
16
  PanelColor,
@@ -31,7 +33,248 @@ const {
31
  ColorPalette
32
  } = wp.blocks;
33
 
34
- import { PictureIcon } from '../../icons'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
 
36
  /**
37
  * Register: Gutenberg Block.
@@ -111,246 +354,8 @@ registerBlockType( 'ugb/image-box', {
111
  },
112
 
113
  // The "edit" property must be a valid function.
114
- edit: withState( { editable: 'content', } )( ( props ) => {
115
-
116
- const {
117
- className,
118
- setAttributes,
119
- isSelected,
120
- editable,
121
- setState
122
- } = props
123
-
124
- const {
125
- url,
126
- title,
127
- titleColor,
128
- subtitle,
129
- subtitleColor,
130
- overlayColor,
131
- id,
132
- height,
133
- width,
134
- verticalAlign,
135
- horizontalAlign,
136
- full
137
- } = props.attributes
138
-
139
- const imageClass = url ? 'has-image' : ''
140
-
141
- const fullWidth = full ? 'full-width': ''
142
-
143
- const onSetActiveEditable = ( newEditable ) => () => {
144
- setState( { editable: newEditable } )
145
- }
146
-
147
- const vertical = [
148
- { value: 'flex-start', label: __( 'Top' ) },
149
- { value: 'center', label: __( 'Center' ) },
150
- { value: 'flex-end', label: __( 'Bottom' ) }
151
- ];
152
-
153
- const horizontal = [
154
- { value: 'flex-start', label: __( 'Left' ) },
155
- { value: 'center', label: __( 'Center' ) },
156
- { value: 'flex-end', label: __( 'Right' ) },
157
- ];
158
-
159
- return [
160
- isSelected && (
161
- <BlockControls key='controls'>
162
- { url && (
163
- <Toolbar>
164
- <MediaUpload
165
- onSelect={ ( media ) => setAttributes( { url: media.url, id: media.id } ) }
166
- type="image"
167
- value={ id }
168
- render={ ( { open } ) => (
169
- <IconButton
170
- className="components-toolbar__control"
171
- label={ __( 'Edit image' ) }
172
- icon="edit"
173
- onClick={ open }
174
- />
175
- ) }
176
- />
177
- </Toolbar>
178
- )}
179
- </BlockControls>
180
- ),
181
- isSelected && (
182
- <InspectorControls key={ 'inspector' }>
183
- <ToggleControl
184
- label='Full-Width'
185
- checked={ !! full }
186
- onChange={ () => setAttributes( { full: ! full } ) }
187
- />
188
- <RangeControl
189
- label={ __( 'Height' ) }
190
- value={ height }
191
- min='135'
192
- max='700'
193
- onChange={ ( height ) => setAttributes( { height: height } ) }
194
- />
195
- <RangeControl
196
- label={ __( 'Width' ) }
197
- value={ width }
198
- min='400'
199
- max='999'
200
- onChange={ ( width ) => setAttributes( { width: width } ) }
201
- />
202
- <SelectControl
203
- label={ __( 'Vertical Alignment' ) }
204
- value={ verticalAlign }
205
- options={ vertical.map( ({ value, label }) => ( {
206
- value: value,
207
- label: label,
208
- } ) ) }
209
- onChange={ ( newSize ) => { setAttributes( { verticalAlign: newSize } ) } }
210
- />
211
- <SelectControl
212
- label={ __( 'Horizontal Alignment' ) }
213
- value={ horizontalAlign }
214
- options={ horizontal.map( ({ value, label }) => ( {
215
- value: value,
216
- label: label,
217
- } ) ) }
218
- onChange={ ( newSize ) => { setAttributes( { horizontalAlign: newSize } ) } }
219
- />
220
- <PanelColor
221
- title={ __( 'Title Color' ) }
222
- colorValue={ titleColor }
223
- initialOpen={ false }
224
- >
225
- <ColorPalette
226
- value={ titleColor }
227
- onChange={ ( colorValue ) => setAttributes( { titleColor: colorValue } ) }
228
- />
229
- </PanelColor>
230
- <PanelColor
231
- title={ __( 'Subtitle Color' ) }
232
- colorValue={ subtitleColor }
233
- initialOpen={ false }
234
- >
235
- <ColorPalette
236
- value={ subtitleColor }
237
- onChange={ ( colorValue ) => setAttributes( { subtitleColor: colorValue } ) }
238
- />
239
- </PanelColor>
240
- <PanelColor
241
- title={ __( 'Overlay Color' ) }
242
- colorValue={ overlayColor }
243
- initialOpen={ false }
244
- >
245
- <ColorPalette
246
- value={ overlayColor }
247
- onChange={ ( colorValue ) => setAttributes( { overlayColor: colorValue } ) }
248
- />
249
- </PanelColor>
250
- </InspectorControls>
251
- ),
252
- <div key={'editable'}
253
- className={ `ugb-image-box ${imageClass} ${fullWidth}` }
254
- data-url={ url }
255
- style={ {
256
- width: width + 'px',
257
- height: height + 'px',
258
- backgroundImage: `url(${url})`,
259
- alignItems: horizontalAlign,
260
- justifyContent: verticalAlign
261
- } }
262
- >
263
- <MediaUpload
264
- onSelect={ ( media ) => setAttributes( { url: media.url, id: media.id } ) }
265
- type={'image'}
266
- value={id}
267
- render={ function( obj ) {
268
- return [
269
- ! url && (
270
- <Button
271
- className={ id ? '' : 'button button-large' }
272
- onClick={ obj.open }
273
- >
274
- {__('Upload Image')}
275
- </Button>
276
- )
277
- ]
278
- } }
279
- />
280
- <a href="#" style={ { backgroundColor: overlayColor } } />
281
- <RichText
282
- tagName="h4"
283
- placeholder={ title.default }
284
- value={ title }
285
- onChange={ ( value ) => setAttributes( { title: value } ) }
286
- isSelected={ isSelected && editable === 'title' }
287
- onFocus={ onSetActiveEditable( 'title' ) }
288
- style={ {
289
- color: titleColor
290
- } }
291
- />
292
- <RichText
293
- tagName="p"
294
- placeholder={ subtitle.default }
295
- value={ subtitle }
296
- onChange={ ( value ) => setAttributes( { subtitle: value } ) }
297
- isSelected={ isSelected && editable === 'subtitle' }
298
- onFocus={ onSetActiveEditable( 'subtitle' ) }
299
- style={ {
300
- color: subtitleColor
301
- } }
302
- />
303
- </div>
304
- ];
305
- } ),
306
 
307
  // The "save" property must be specified and must be a valid function.
308
- save: function( props ) {
309
-
310
- const {
311
- url,
312
- title,
313
- titleColor,
314
- subtitle,
315
- subtitleColor,
316
- overlayColor,
317
- id,
318
- height,
319
- width,
320
- verticalAlign,
321
- horizontalAlign,
322
- full
323
- } = props.attributes
324
-
325
- const imageClass = url ? 'has-image' : ''
326
-
327
- const fullWidth = full ? 'full-width': ''
328
-
329
- const displayNone = ( ! title.length && ! subtitle.length ) ? 'has-no-content' : 'has-content'
330
-
331
- return (
332
- <div className={ `ugb-image-box ${imageClass} ${displayNone} ${fullWidth}` }
333
- data-url={ url }
334
- style={ {
335
- width: width + 'px',
336
- height: height + 'px',
337
- backgroundImage: `url(${url})`,
338
- alignItems: horizontalAlign,
339
- justifyContent: verticalAlign
340
- } }
341
- >
342
- <a href="#" style={ { backgroundColor: overlayColor } } />
343
- { title && !! title.length && (
344
- <h4 style={ { color: titleColor } }>
345
- { title }
346
- </h4>
347
- ) }
348
- { subtitle && !! subtitle.length && (
349
- <p style={ { color: subtitleColor } }>
350
- { subtitle }
351
- </p>
352
- ) }
353
- </div>
354
- );
355
- }
356
  } );
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
11
+ import { PictureIcon } from '../../icons'
12
+
13
 
14
  const { __ } = wp.i18n; // Import __() from wp.i18n
15
+
16
  const {
17
  IconButton,
18
  PanelColor,
33
  ColorPalette
34
  } = wp.blocks;
35
 
36
+
37
+ export const edit = ( props ) => {
38
+
39
+ const {
40
+ className,
41
+ setAttributes,
42
+ isSelected,
43
+ editable,
44
+ setState
45
+ } = props
46
+
47
+ const {
48
+ url,
49
+ title,
50
+ titleColor,
51
+ subtitle,
52
+ subtitleColor,
53
+ overlayColor,
54
+ id,
55
+ height,
56
+ width,
57
+ verticalAlign,
58
+ horizontalAlign,
59
+ full
60
+ } = props.attributes
61
+
62
+ const imageClass = url ? 'has-image' : ''
63
+
64
+ const fullWidth = full ? 'full-width': ''
65
+
66
+ const onSetActiveEditable = ( newEditable ) => () => {
67
+ setState( { editable: newEditable } )
68
+ }
69
+
70
+ const vertical = [
71
+ { value: 'flex-start', label: __( 'Top' ) },
72
+ { value: 'center', label: __( 'Center' ) },
73
+ { value: 'flex-end', label: __( 'Bottom' ) }
74
+ ];
75
+
76
+ const horizontal = [
77
+ { value: 'flex-start', label: __( 'Left' ) },
78
+ { value: 'center', label: __( 'Center' ) },
79
+ { value: 'flex-end', label: __( 'Right' ) },
80
+ ];
81
+
82
+ return [
83
+ isSelected && (
84
+ <BlockControls key='controls'>
85
+ { url && (
86
+ <Toolbar>
87
+ <MediaUpload
88
+ onSelect={ ( media ) => setAttributes( { url: media.url, id: media.id } ) }
89
+ type="image"
90
+ value={ id }
91
+ render={ ( { open } ) => (
92
+ <IconButton
93
+ className="components-toolbar__control"
94
+ label={ __( 'Edit image' ) }
95
+ icon="edit"
96
+ onClick={ open }
97
+ />
98
+ ) }
99
+ />
100
+ </Toolbar>
101
+ )}
102
+ </BlockControls>
103
+ ),
104
+ isSelected && (
105
+ <InspectorControls key={ 'inspector' }>
106
+ <ToggleControl
107
+ label='Full-Width'
108
+ checked={ !! full }
109
+ onChange={ () => setAttributes( { full: ! full } ) }
110
+ />
111
+ <RangeControl
112
+ label={ __( 'Height' ) }
113
+ value={ height }
114
+ min='135'
115
+ max='700'
116
+ onChange={ ( height ) => setAttributes( { height: height } ) }
117
+ />
118
+ <RangeControl
119
+ label={ __( 'Width' ) }
120
+ value={ width }
121
+ min='400'
122
+ max='999'
123
+ onChange={ ( width ) => setAttributes( { width: width } ) }
124
+ />
125
+ <SelectControl
126
+ label={ __( 'Vertical Alignment' ) }
127
+ value={ verticalAlign }
128
+ options={ vertical.map( ({ value, label }) => ( {
129
+ value: value,
130
+ label: label,
131
+ } ) ) }
132
+ onChange={ ( newSize ) => { setAttributes( { verticalAlign: newSize } ) } }
133
+ />
134
+ <SelectControl
135
+ label={ __( 'Horizontal Alignment' ) }
136
+ value={ horizontalAlign }
137
+ options={ horizontal.map( ({ value, label }) => ( {
138
+ value: value,
139
+ label: label,
140
+ } ) ) }
141
+ onChange={ ( newSize ) => { setAttributes( { horizontalAlign: newSize } ) } }
142
+ />
143
+ <PanelColor
144
+ title={ __( 'Title Color' ) }
145
+ colorValue={ titleColor }
146
+ initialOpen={ false }
147
+ >
148
+ <ColorPalette
149
+ value={ titleColor }
150
+ onChange={ ( colorValue ) => setAttributes( { titleColor: colorValue } ) }
151
+ />
152
+ </PanelColor>
153
+ <PanelColor
154
+ title={ __( 'Subtitle Color' ) }
155
+ colorValue={ subtitleColor }
156
+ initialOpen={ false }
157
+ >
158
+ <ColorPalette
159
+ value={ subtitleColor }
160
+ onChange={ ( colorValue ) => setAttributes( { subtitleColor: colorValue } ) }
161
+ />
162
+ </PanelColor>
163
+ <PanelColor
164
+ title={ __( 'Overlay Color' ) }
165
+ colorValue={ overlayColor }
166
+ initialOpen={ false }
167
+ >
168
+ <ColorPalette
169
+ value={ overlayColor }
170
+ onChange={ ( colorValue ) => setAttributes( { overlayColor: colorValue } ) }
171
+ />
172
+ </PanelColor>
173
+ </InspectorControls>
174
+ ),
175
+ <div key={'editable'}
176
+ className={ `ugb-image-box ${imageClass} ${fullWidth}` }
177
+ data-url={ url }
178
+ style={ {
179
+ width: width + 'px',
180
+ height: height + 'px',
181
+ backgroundImage: `url(${url})`,
182
+ alignItems: horizontalAlign,
183
+ justifyContent: verticalAlign
184
+ } }
185
+ >
186
+ <MediaUpload
187
+ onSelect={ ( media ) => setAttributes( { url: media.url, id: media.id } ) }
188
+ type={'image'}
189
+ value={id}
190
+ render={ function( obj ) {
191
+ return [
192
+ ! url && (
193
+ <Button
194
+ className={ id ? '' : 'button button-large' }
195
+ onClick={ obj.open }
196
+ >
197
+ {__('Upload Image')}
198
+ </Button>
199
+ )
200
+ ]
201
+ } }
202
+ />
203
+ <a href="#" style={ { backgroundColor: overlayColor } } />
204
+ <RichText
205
+ tagName="h4"
206
+ placeholder={ title.default }
207
+ value={ title }
208
+ onChange={ ( value ) => setAttributes( { title: value } ) }
209
+ isSelected={ isSelected && editable === 'title' }
210
+ onFocus={ onSetActiveEditable( 'title' ) }
211
+ style={ {
212
+ color: titleColor
213
+ } }
214
+ />
215
+ <RichText
216
+ tagName="p"
217
+ placeholder={ subtitle.default }
218
+ value={ subtitle }
219
+ onChange={ ( value ) => setAttributes( { subtitle: value } ) }
220
+ isSelected={ isSelected && editable === 'subtitle' }
221
+ onFocus={ onSetActiveEditable( 'subtitle' ) }
222
+ style={ {
223
+ color: subtitleColor
224
+ } }
225
+ />
226
+ </div>
227
+ ];
228
+ }
229
+
230
+ export const save = ( props ) => {
231
+ const {
232
+ url,
233
+ title,
234
+ titleColor,
235
+ subtitle,
236
+ subtitleColor,
237
+ overlayColor,
238
+ id,
239
+ height,
240
+ width,
241
+ verticalAlign,
242
+ horizontalAlign,
243
+ full
244
+ } = props.attributes
245
+
246
+ const imageClass = url ? 'has-image' : ''
247
+
248
+ const fullWidth = full ? 'full-width': ''
249
+
250
+ const displayNone = ( ! title.length && ! subtitle.length ) ? 'has-no-content' : 'has-content'
251
+
252
+ return (
253
+ <div className={ `ugb-image-box ${imageClass} ${displayNone} ${fullWidth}` }
254
+ data-url={ url }
255
+ style={ {
256
+ width: width + 'px',
257
+ height: height + 'px',
258
+ backgroundImage: `url(${url})`,
259
+ alignItems: horizontalAlign,
260
+ justifyContent: verticalAlign
261
+ } }
262
+ >
263
+ <a href="#" style={ { backgroundColor: overlayColor } } />
264
+ { title && !! title.length && (
265
+ <h4 style={ { color: titleColor } }>
266
+ { title }
267
+ </h4>
268
+ ) }
269
+ { subtitle && !! subtitle.length && (
270
+ <p style={ { color: subtitleColor } }>
271
+ { subtitle }
272
+ </p>
273
+ ) }
274
+ </div>
275
+ );
276
+ }
277
+
278
 
279
  /**
280
  * Register: Gutenberg Block.
354
  },
355
 
356
  // The "edit" property must be a valid function.
357
+ edit: withState( { editable: 'content', } )( edit ),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
358
 
359
  // The "save" property must be specified and must be a valid function.
360
+ save: save,
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
361
  } );
src/block/notification/index.js CHANGED
@@ -8,10 +8,11 @@
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
 
 
11
 
12
- const { __ } = wp.i18n; // Import __() from wp.i18n
13
 
14
- const { Component } = wp.element
15
 
16
  const {
17
  withState,
@@ -20,8 +21,6 @@ const {
20
  ToggleControl
21
  } = wp.components
22
 
23
- import md5 from 'md5'
24
-
25
  const {
26
  registerBlockType, // Import registerBlockType() from wp.blocks
27
  InspectorControls,
@@ -30,7 +29,147 @@ const {
30
  BlockControls,
31
  } = wp.blocks;
32
 
33
- import { NotificationIcon } from '../../icons'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
34
 
35
  /**
36
  * Register: aa Gutenberg Block.
@@ -77,146 +216,9 @@ registerBlockType( 'ugb/notification', {
77
  },
78
 
79
 
80
-
81
  // The "edit" property must be a valid function.
82
- edit: withState( { editable: 'content', } )( ( props ) => {
83
-
84
- const onSetActiveEditable = ( newEditable ) => () => {
85
- setState( { editable: newEditable } );
86
- };
87
-
88
- const notifAlert = [
89
- { value: 'success', label: __( 'Success' ) },
90
- { value: 'error', label: __( 'Error' ) },
91
- { value: 'warning', label: __( 'Warning' ) },
92
- { value: 'info', label: __( 'Information' ) },
93
- ];
94
-
95
- const {
96
- isSelected,
97
- editable,
98
- setState,
99
- setAttributes,
100
- className
101
- } = props
102
-
103
- const {
104
- text,
105
- color,
106
- textColor,
107
- notifType,
108
- dismissible
109
- } = props.attributes
110
-
111
- return [
112
- isSelected && (
113
- <BlockControls key="controls"/>
114
- ), (
115
- <div key={ 'editable' } className={ `ugb-notification type-${notifType} dismissible-${dismissible}` }>
116
- {
117
- dismissible && (
118
- <span key='button' className={ 'close-button' }>
119
- <svg viewBox="0 0 28.3 28.3" style={ { fill: textColor } }>
120
- <path d="M52.4-166.2c3.2,0,3.2-5,0-5C49.2-171.2,49.2-166.2,52.4-166.2L52.4-166.2z"/>
121
- <path d="M16.8,13.9L26.9,3.8c0.6-0.6,0.6-1.5,0-2.1s-1.5-0.6-2.1,0L14.7,11.8L4.6,1.7C4,1.1,3.1,1.1,2.5,1.7s-0.6,1.5,0,2.1l10.1,10.1L2.5,24c-0.6,0.6-0.6,1.5,0,2.1c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4L14.7,16l10.1,10.1c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4c0.6-0.6,0.6-1.5,0-2.1L16.8,13.9z"/>
122
- </svg>
123
- </span>
124
- )
125
- }
126
- <RichText
127
- tagName='p'
128
- placeholder={ props.attributes.text.default }
129
- value={ text }
130
- isSelected={ isSelected && editable === 'content' }
131
- onFocus={ onSetActiveEditable( 'content' ) }
132
- onChange={ (text) => setAttributes( { text: text } ) }
133
- className={`wp-ugb-notif notif-${notifType}`}
134
- style={ {
135
- backgroundColor: color,
136
- color: textColor,
137
- } }
138
- />
139
- {
140
- isSelected &&
141
- <InspectorControls key={ 'inspector' }>
142
- <ToggleControl
143
- label={ __( 'Dismissible' ) }
144
- checked={ dismissible }
145
- onChange={ () => setAttributes( { dismissible: ! dismissible } ) }
146
- />
147
- <SelectControl
148
- label={ __( 'Notification Type' ) }
149
- value={ notifType }
150
- options={ notifAlert.map( ({ value, label }) => ( {
151
- value: value,
152
- label: label,
153
- } ) ) }
154
- onChange={ ( newSize ) => { setAttributes( { notifType: newSize } ) } }
155
- />
156
-
157
- <PanelColor
158
- title={ __( 'Background Color' ) }
159
- colorValue={ color }
160
- initialOpen={ false }
161
- >
162
- <ColorPalette
163
- value={ color }
164
- onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
165
- />
166
- </PanelColor>
167
- <PanelColor
168
- title={ __( 'Text Color' ) }
169
- colorValue={ textColor }
170
- initialOpen={ false }
171
- >
172
- <ColorPalette
173
- value={ textColor }
174
- onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
175
- />
176
- </PanelColor>
177
-
178
- </InspectorControls>
179
- }
180
- </div>
181
- ) ]
182
- } ),
183
 
184
  // The "save" property must be specified and must be a valid function.
185
- save: function( props ) {
186
-
187
- const {
188
- text,
189
- color,
190
- textColor,
191
- notifType,
192
- dismissible
193
- } = props.attributes
194
-
195
- const buttonStyle = {
196
- backgroundColor: color,
197
- color: textColor,
198
- }
199
-
200
- // UID is a unique string depending on the contents and is used for
201
- // remembering whether the notification was closed in the frontend.
202
- const uid = md5( text + notifType ).substr( 0, 6 )
203
-
204
- return (
205
- <div className={ `ugb-notification type-${notifType} dismissible-${dismissible}` } data-uid={uid}>
206
- {
207
- dismissible && (
208
- <span key='button' className={ 'close-button' }>
209
- <svg viewBox="0 0 28.3 28.3" style={ { fill: textColor } }>
210
- <path d="M52.4-166.2c3.2,0,3.2-5,0-5C49.2-171.2,49.2-166.2,52.4-166.2L52.4-166.2z"/>
211
- <path d="M16.8,13.9L26.9,3.8c0.6-0.6,0.6-1.5,0-2.1s-1.5-0.6-2.1,0L14.7,11.8L4.6,1.7C4,1.1,3.1,1.1,2.5,1.7s-0.6,1.5,0,2.1l10.1,10.1L2.5,24c-0.6,0.6-0.6,1.5,0,2.1c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4L14.7,16l10.1,10.1c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4c0.6-0.6,0.6-1.5,0-2.1L16.8,13.9z"/>
212
- </svg>
213
- </span>
214
- )
215
- }
216
- <p className={ `wp-ugb-notif notif-${notifType}` } style={ buttonStyle }>
217
- { text }
218
- </p>
219
- </div>
220
- )
221
- },
222
  } );
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
11
+ import md5 from 'md5'
12
+ import { NotificationIcon } from '../../icons'
13
 
 
14
 
15
+ const { __ } = wp.i18n; // Import __() from wp.i18n
16
 
17
  const {
18
  withState,
21
  ToggleControl
22
  } = wp.components
23
 
 
 
24
  const {
25
  registerBlockType, // Import registerBlockType() from wp.blocks
26
  InspectorControls,
29
  BlockControls,
30
  } = wp.blocks;
31
 
32
+
33
+ export const edit = ( props ) => {
34
+
35
+ const onSetActiveEditable = ( newEditable ) => () => {
36
+ setState( { editable: newEditable } );
37
+ };
38
+
39
+ const notifAlert = [
40
+ { value: 'success', label: __( 'Success' ) },
41
+ { value: 'error', label: __( 'Error' ) },
42
+ { value: 'warning', label: __( 'Warning' ) },
43
+ { value: 'info', label: __( 'Information' ) },
44
+ ];
45
+
46
+ const {
47
+ isSelected,
48
+ editable,
49
+ setState,
50
+ setAttributes,
51
+ className
52
+ } = props
53
+
54
+ const {
55
+ text,
56
+ color,
57
+ textColor,
58
+ notifType,
59
+ dismissible
60
+ } = props.attributes
61
+
62
+ return [
63
+ isSelected && (
64
+ <BlockControls key="controls"/>
65
+ ), (
66
+ <div key={ 'editable' } className={ `ugb-notification type-${notifType} dismissible-${dismissible}` }>
67
+ {
68
+ dismissible && (
69
+ <span key='button' className={ 'close-button' }>
70
+ <svg viewBox="0 0 28.3 28.3" style={ { fill: textColor } }>
71
+ <path d="M52.4-166.2c3.2,0,3.2-5,0-5C49.2-171.2,49.2-166.2,52.4-166.2L52.4-166.2z"/>
72
+ <path d="M16.8,13.9L26.9,3.8c0.6-0.6,0.6-1.5,0-2.1s-1.5-0.6-2.1,0L14.7,11.8L4.6,1.7C4,1.1,3.1,1.1,2.5,1.7s-0.6,1.5,0,2.1l10.1,10.1L2.5,24c-0.6,0.6-0.6,1.5,0,2.1c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4L14.7,16l10.1,10.1c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4c0.6-0.6,0.6-1.5,0-2.1L16.8,13.9z"/>
73
+ </svg>
74
+ </span>
75
+ )
76
+ }
77
+ <RichText
78
+ tagName='p'
79
+ placeholder={ props.attributes.text.default }
80
+ value={ text }
81
+ isSelected={ isSelected && editable === 'content' }
82
+ onFocus={ onSetActiveEditable( 'content' ) }
83
+ onChange={ (text) => setAttributes( { text: text } ) }
84
+ className={`wp-ugb-notif notif-${notifType}`}
85
+ style={ {
86
+ backgroundColor: color,
87
+ color: textColor,
88
+ } }
89
+ />
90
+ {
91
+ isSelected &&
92
+ <InspectorControls key={ 'inspector' }>
93
+ <ToggleControl
94
+ label={ __( 'Dismissible' ) }
95
+ checked={ dismissible }
96
+ onChange={ () => setAttributes( { dismissible: ! dismissible } ) }
97
+ />
98
+ <SelectControl
99
+ label={ __( 'Notification Type' ) }
100
+ value={ notifType }
101
+ options={ notifAlert.map( ({ value, label }) => ( {
102
+ value: value,
103
+ label: label,
104
+ } ) ) }
105
+ onChange={ ( newSize ) => { setAttributes( { notifType: newSize } ) } }
106
+ />
107
+
108
+ <PanelColor
109
+ title={ __( 'Background Color' ) }
110
+ colorValue={ color }
111
+ initialOpen={ false }
112
+ >
113
+ <ColorPalette
114
+ value={ color }
115
+ onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
116
+ />
117
+ </PanelColor>
118
+ <PanelColor
119
+ title={ __( 'Text Color' ) }
120
+ colorValue={ textColor }
121
+ initialOpen={ false }
122
+ >
123
+ <ColorPalette
124
+ value={ textColor }
125
+ onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
126
+ />
127
+ </PanelColor>
128
+
129
+ </InspectorControls>
130
+ }
131
+ </div>
132
+ ) ]
133
+ }
134
+
135
+ export const save = ( props ) => {
136
+
137
+ const {
138
+ text,
139
+ color,
140
+ textColor,
141
+ notifType,
142
+ dismissible
143
+ } = props.attributes
144
+
145
+ const buttonStyle = {
146
+ backgroundColor: color,
147
+ color: textColor,
148
+ }
149
+
150
+ // UID is a unique string depending on the contents and is used for
151
+ // remembering whether the notification was closed in the frontend.
152
+ const uid = md5( text + notifType ).substr( 0, 6 )
153
+
154
+ return (
155
+ <div className={ `ugb-notification type-${notifType} dismissible-${dismissible}` } data-uid={uid}>
156
+ {
157
+ dismissible && (
158
+ <span key='button' className={ 'close-button' }>
159
+ <svg viewBox="0 0 28.3 28.3" style={ { fill: textColor } }>
160
+ <path d="M52.4-166.2c3.2,0,3.2-5,0-5C49.2-171.2,49.2-166.2,52.4-166.2L52.4-166.2z"/>
161
+ <path d="M16.8,13.9L26.9,3.8c0.6-0.6,0.6-1.5,0-2.1s-1.5-0.6-2.1,0L14.7,11.8L4.6,1.7C4,1.1,3.1,1.1,2.5,1.7s-0.6,1.5,0,2.1l10.1,10.1L2.5,24c-0.6,0.6-0.6,1.5,0,2.1c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4L14.7,16l10.1,10.1c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4c0.6-0.6,0.6-1.5,0-2.1L16.8,13.9z"/>
162
+ </svg>
163
+ </span>
164
+ )
165
+ }
166
+ <p className={ `wp-ugb-notif notif-${notifType}` } style={ buttonStyle }>
167
+ { text }
168
+ </p>
169
+ </div>
170
+ )
171
+ }
172
+
173
 
174
  /**
175
  * Register: aa Gutenberg Block.
216
  },
217
 
218
 
 
219
  // The "edit" property must be a valid function.
220
+ edit: withState( { editable: 'content', } )( edit ),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
221
 
222
  // The "save" property must be specified and must be a valid function.
223
+ save: save,
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
224
  } );
src/block/number-box/index.js CHANGED
@@ -8,9 +8,11 @@
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
 
 
11
 
12
  const { __ } = wp.i18n; // Import __() from wp.i18n
13
- const { Component } = wp.element
14
  const {
15
  PanelColor,
16
  withState,
@@ -28,7 +30,308 @@ const {
28
  BlockAlignmentToolbar
29
  } = wp.blocks;
30
 
31
- import { NumberBoxIcon } from '../../icons'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
32
 
33
  /**
34
  * Register: Gutenberg Block.
@@ -52,12 +355,6 @@ registerBlockType( 'ugb/number-box', {
52
  __( 'Stackable' ),
53
  ],
54
  attributes: {
55
- title: {
56
- type: 'string',
57
- source: 'attribute',
58
- selector: 'a',
59
- attribute: 'title',
60
- },
61
  numberBox: {
62
  type: 'array',
63
  source: 'children',
@@ -131,307 +428,8 @@ registerBlockType( 'ugb/number-box', {
131
  },
132
 
133
  // The "edit" property must be a valid function.
134
- edit: withState( { editable: 'content', } )( ( props ) => {
135
-
136
- const {
137
- className,
138
- setAttributes,
139
- isSelected,
140
- editable,
141
- setState
142
- } = props;
143
-
144
- const {
145
- title,
146
- numberBox,
147
- numberBoxTwo,
148
- numberBoxThree,
149
- body,
150
- bodyTwo,
151
- bodyThree,
152
- name,
153
- nameTwo,
154
- nameThree,
155
- columns,
156
- numberBoxColor,
157
- nameColor,
158
- bodyTextColor,
159
- numberBGColor
160
- } = props.attributes;
161
-
162
- const column = [
163
- { value: '1', label: __( 'One Column' ) },
164
- { value: '2', label: __( 'Two Column' ) },
165
- { value: '3', label: __( 'Three Column' ) },
166
- ];
167
-
168
- const onSetActiveEditable = ( newEditable ) => () => {
169
- setState( { editable: newEditable } )
170
- }
171
-
172
- return [
173
- isSelected && (
174
- <BlockControls key="controls"/>
175
- ),
176
- isSelected && (
177
- <InspectorControls key={ 'inspector' }>
178
- <SelectControl
179
- label={ __( 'Column Number' ) }
180
- value={ columns }
181
- options={ column.map( ({ value, label }) => ( {
182
- value: value,
183
- label: label,
184
- } ) ) }
185
- onChange={ ( newColumns ) => { setAttributes( { columns: newColumns } ) } }
186
- />
187
- <PanelColor
188
- title={ __( 'Number Color' ) }
189
- colorValue={ numberBoxColor }
190
- initialOpen={ false }
191
- >
192
- <ColorPalette
193
- value={ numberBoxColor }
194
- onChange={ ( colorValue ) => setAttributes( { numberBoxColor: colorValue } ) }
195
- />
196
- </PanelColor>
197
- <PanelColor
198
- title={ __( 'Number Background Color' ) }
199
- colorValue={ numberBGColor }
200
- initialOpen={ false }
201
- >
202
- <ColorPalette
203
- value={ numberBGColor }
204
- onChange={ ( colorValue ) => setAttributes( { numberBGColor: colorValue } ) }
205
- />
206
- </PanelColor>
207
- <PanelColor
208
- title={ __( 'Name Color' ) }
209
- colorValue={ nameColor }
210
- initialOpen={ false }
211
- >
212
- <ColorPalette
213
- value={ nameColor }
214
- onChange={ ( colorValue ) => setAttributes( { nameColor: colorValue } ) }
215
- />
216
- </PanelColor>
217
- <PanelColor
218
- title={ __( 'Body Text Color' ) }
219
- colorValue={ bodyTextColor }
220
- initialOpen={ false }
221
- >
222
- <ColorPalette
223
- value={ bodyTextColor }
224
- onChange={ ( colorValue ) => setAttributes( { bodyTextColor: colorValue } ) }
225
- />
226
- </PanelColor>
227
- </InspectorControls>
228
- ),
229
- <div key={'editable'} className={ `ugb-number-box column-${columns}` }>
230
- <div className={ 'ugb-number-box-column-one' }>
231
- <RichText
232
- tagName={ 'span' }
233
- placeholder={ numberBox.default }
234
- value={ numberBox }
235
- onChange={ (text) => setAttributes( { numberBox: text } ) }
236
- isSelected={ isSelected && editable === 'numberBox' }
237
- onFocus={ onSetActiveEditable( 'numberBox' ) }
238
- style={ {
239
- color: numberBoxColor,
240
- backgroundColor: numberBGColor
241
- } }
242
- keepPlaceholderOnFocus
243
- />
244
- <RichText
245
- tagName={'h4'}
246
- value={ name }
247
- className={ 'ugb-number-box-name' }
248
- onChange={ (text) => setAttributes( { name: text } ) }
249
- isSelected={ isSelected && editable === 'name' }
250
- onFocus={ onSetActiveEditable( 'name' ) }
251
- placeholder={ __( 'Add name…' ) }
252
- style={ {
253
- color: nameColor
254
- } }
255
- keepPlaceholderOnFocus
256
- />
257
- <RichText
258
- tagName={'p'}
259
- value={ body }
260
- className={ 'ugb-number-box-body' }
261
- onChange={ (text) => setAttributes( { body: text } ) }
262
- isSelected={ isSelected && editable === 'body' }
263
- onFocus={ onSetActiveEditable( 'body' ) }
264
- placeholder={ __( 'Add body…' ) }
265
- style={ {
266
- color: bodyTextColor
267
- } }
268
- keepPlaceholderOnFocus
269
- />
270
- </div>
271
- <div className={ 'ugb-number-box-column-two' }>
272
- <RichText
273
- tagName={ 'span' }
274
- placeholder={ numberBoxTwo.default }
275
- value={ numberBoxTwo }
276
- onChange={ (text) => setAttributes( { numberBoxTwo: text } ) }
277
- isSelected={ isSelected && editable === 'numberBoxTwo' }
278
- onFocus={ onSetActiveEditable( 'numberBoxTwo' ) }
279
- style={ {
280
- color: numberBoxColor,
281
- backgroundColor: numberBGColor
282
- } }
283
- keepPlaceholderOnFocus
284
- />
285
- <RichText
286
- tagName={'h4'}
287
- value={ nameTwo }
288
- className={ 'ugb-number-box-name-two' }
289
- onChange={ (text) => setAttributes( { nameTwo: text } ) }
290
- isSelected={ isSelected && editable === 'nameTwo' }
291
- onFocus={ onSetActiveEditable( 'nameTwo' ) }
292
- placeholder={ __( 'Add name…' ) }
293
- style={ {
294
- color: nameColor
295
- } }
296
- keepPlaceholderOnFocus
297
- />
298
- <RichText
299
- tagName={'p'}
300
- value={ bodyTwo }
301
- className={ 'ugb-number-box-body-two' }
302
- onChange={ (text) => setAttributes( { bodyTwo: text } ) }
303
- isSelected={ isSelected && editable === 'bodyTwo' }
304
- onFocus={ onSetActiveEditable( 'bodyTwo' ) }
305
- placeholder={ __( 'Add body…' ) }
306
- style={ {
307
- color: bodyTextColor
308
- } }
309
- keepPlaceholderOnFocus
310
- />
311
- </div>
312
- <div className={ 'ugb-number-box-column-three' }>
313
- <RichText
314
- tagName={ 'span' }
315
- placeholder={ numberBoxThree.default }
316
- value={ numberBoxThree }
317
- onChange={ (text) => setAttributes( { numberBoxThree: text } ) }
318
- isSelected={ isSelected && editable === 'numberBoxThree' }
319
- onFocus={ onSetActiveEditable( 'numberBoxThree' ) }
320
- style={ {
321
- color: numberBoxColor,
322
- backgroundColor: numberBGColor
323
- } }
324
- keepPlaceholderOnFocus
325
- />
326
- <RichText
327
- tagName={'h4'}
328
- value={ nameThree }
329
- className={ 'ugb-number-box-name-three' }
330
- onChange={ (text) => setAttributes( { nameThree: text } ) }
331
- isSelected={ isSelected && editable === 'nameThree' }
332
- onFocus={ onSetActiveEditable( 'nameThree' ) }
333
- placeholder={ __( 'Add name…' ) }
334
- style={ {
335
- color: nameColor
336
- } }
337
- keepPlaceholderOnFocus
338
- />
339
- <RichText
340
- tagName={'p'}
341
- value={ bodyThree }
342
- className={ 'ugb-number-box-body-three' }
343
- onChange={ (text) => setAttributes( { bodyThree: text } ) }
344
- isSelected={ isSelected && editable === 'bodyThree' }
345
- onFocus={ onSetActiveEditable( 'bodyThree' ) }
346
- placeholder={ __( 'Add body…' ) }
347
- style={ {
348
- color: bodyTextColor
349
- } }
350
- keepPlaceholderOnFocus
351
- />
352
- </div>
353
- </div>
354
- ];
355
- } ),
356
 
357
  // The "save" property must be specified and must be a valid function.
358
- save: function( props ) {
359
- const {
360
- title,
361
- numberBox,
362
- numberBoxTwo,
363
- numberBoxThree,
364
- body,
365
- bodyTwo,
366
- bodyThree,
367
- name,
368
- nameTwo,
369
- nameThree,
370
- numberBoxColor,
371
- nameColor,
372
- bodyTextColor,
373
- numberBGColor,
374
- columns
375
- } = props.attributes;
376
-
377
- return (
378
- <div className={ `ugb-number-box column-${columns}` }>
379
- <div className={ 'ugb-number-box-column-one' }>
380
- { numberBox && !! numberBox.length && (
381
- <span style={ { color: numberBoxColor, backgroundColor: numberBGColor } }>
382
- { numberBox }
383
- </span>
384
- ) }
385
- { name && !! name.length && (
386
- <h4 className={ 'ugb-number-box-name' } style={ { color: nameColor } }>
387
- { name }
388
- </h4>
389
- ) }
390
- { body && !! body.length && (
391
- <p className={ 'ugb-number-box-body' } style={ { color: bodyTextColor } }>
392
- { body }
393
- </p>
394
- ) }
395
- </div>
396
- { columns > 1 && (
397
- <div className={ 'ugb-number-box-column-two' }>
398
- { numberBoxTwo && !! numberBoxTwo.length && (
399
- <span style={ { color: numberBoxColor, backgroundColor: numberBGColor } }>
400
- { numberBoxTwo }
401
- </span>
402
- ) }
403
- { nameTwo && !! nameTwo.length && (
404
- <h4 className={ 'ugb-number-box-name-two' } style={ { color: nameColor } }>
405
- { nameTwo }
406
- </h4>
407
- ) }
408
- { bodyTwo && !! bodyTwo.length && (
409
- <p className={ 'ugb-number-box-body-two' } style={ { color: bodyTextColor } }>
410
- { bodyTwo }
411
- </p>
412
- ) }
413
- </div>
414
- ) }
415
- { columns > 2 && (
416
- <div className={ 'ugb-number-box-column-three' }>
417
- { numberBoxThree && !! numberBoxThree.length && (
418
- <span style={ { color: numberBoxColor, backgroundColor: numberBGColor } }>
419
- { numberBoxThree }
420
- </span>
421
- ) }
422
- { nameThree && !! nameThree.length && (
423
- <h4 className={ 'ugb-number-box-name-three' } style={ { color: nameColor } }>
424
- { nameThree }
425
- </h4>
426
- ) }
427
- { bodyThree && !! bodyThree.length && (
428
- <p className={ 'ugb-number-box-body-three' } style={ { color: bodyTextColor } }>
429
- { bodyThree }
430
- </p>
431
- ) }
432
- </div>
433
- ) }
434
- </div>
435
- );
436
- },
437
  } );
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
11
+ import { NumberBoxIcon } from '../../icons'
12
+
13
 
14
  const { __ } = wp.i18n; // Import __() from wp.i18n
15
+
16
  const {
17
  PanelColor,
18
  withState,
30
  BlockAlignmentToolbar
31
  } = wp.blocks;
32
 
33
+
34
+ export const edit = ( props ) => {
35
+
36
+ const {
37
+ className,
38
+ setAttributes,
39
+ isSelected,
40
+ editable,
41
+ setState
42
+ } = props;
43
+
44
+ const {
45
+ numberBox,
46
+ numberBoxTwo,
47
+ numberBoxThree,
48
+ body,
49
+ bodyTwo,
50
+ bodyThree,
51
+ name,
52
+ nameTwo,
53
+ nameThree,
54
+ columns,
55
+ numberBoxColor,
56
+ nameColor,
57
+ bodyTextColor,
58
+ numberBGColor
59
+ } = props.attributes;
60
+
61
+ const column = [
62
+ { value: '1', label: __( 'One Column' ) },
63
+ { value: '2', label: __( 'Two Column' ) },
64
+ { value: '3', label: __( 'Three Column' ) },
65
+ ];
66
+
67
+ const onSetActiveEditable = ( newEditable ) => () => {
68
+ setState( { editable: newEditable } )
69
+ }
70
+
71
+ return [
72
+ isSelected && (
73
+ <BlockControls key="controls"/>
74
+ ),
75
+ isSelected && (
76
+ <InspectorControls key={ 'inspector' }>
77
+ <SelectControl
78
+ label={ __( 'Column Number' ) }
79
+ value={ columns }
80
+ options={ column.map( ({ value, label }) => ( {
81
+ value: value,
82
+ label: label,
83
+ } ) ) }
84
+ onChange={ ( newColumns ) => { setAttributes( { columns: newColumns } ) } }
85
+ />
86
+ <PanelColor
87
+ title={ __( 'Number Color' ) }
88
+ colorValue={ numberBoxColor }
89
+ initialOpen={ false }
90
+ >
91
+ <ColorPalette
92
+ value={ numberBoxColor }
93
+ onChange={ ( colorValue ) => setAttributes( { numberBoxColor: colorValue } ) }
94
+ />
95
+ </PanelColor>
96
+ <PanelColor
97
+ title={ __( 'Number Background Color' ) }
98
+ colorValue={ numberBGColor }
99
+ initialOpen={ false }
100
+ >
101
+ <ColorPalette
102
+ value={ numberBGColor }
103
+ onChange={ ( colorValue ) => setAttributes( { numberBGColor: colorValue } ) }
104
+ />
105
+ </PanelColor>
106
+ <PanelColor
107
+ title={ __( 'Name Color' ) }
108
+ colorValue={ nameColor }
109
+ initialOpen={ false }
110
+ >
111
+ <ColorPalette
112
+ value={ nameColor }
113
+ onChange={ ( colorValue ) => setAttributes( { nameColor: colorValue } ) }
114
+ />
115
+ </PanelColor>
116
+ <PanelColor
117
+ title={ __( 'Body Text Color' ) }
118
+ colorValue={ bodyTextColor }
119
+ initialOpen={ false }
120
+ >
121
+ <ColorPalette
122
+ value={ bodyTextColor }
123
+ onChange={ ( colorValue ) => setAttributes( { bodyTextColor: colorValue } ) }
124
+ />
125
+ </PanelColor>
126
+ </InspectorControls>
127
+ ),
128
+ <div key={'editable'} className={ `ugb-number-box column-${columns}` }>
129
+ <div className={ 'ugb-number-box-column-one' }>
130
+ <RichText
131
+ tagName={ 'span' }
132
+ placeholder={ numberBox ? numberBox.default : '' }
133
+ value={ numberBox }
134
+ onChange={ (text) => setAttributes( { numberBox: text } ) }
135
+ isSelected={ isSelected && editable === 'numberBox' }
136
+ onFocus={ onSetActiveEditable( 'numberBox' ) }
137
+ style={ {
138
+ color: numberBoxColor,
139
+ backgroundColor: numberBGColor
140
+ } }
141
+ keepPlaceholderOnFocus
142
+ />
143
+ <RichText
144
+ tagName={'h4'}
145
+ value={ name }
146
+ className={ 'ugb-number-box-name' }
147
+ onChange={ (text) => setAttributes( { name: text } ) }
148
+ isSelected={ isSelected && editable === 'name' }
149
+ onFocus={ onSetActiveEditable( 'name' ) }
150
+ placeholder={ __( 'Add name…' ) }
151
+ style={ {
152
+ color: nameColor
153
+ } }
154
+ keepPlaceholderOnFocus
155
+ />
156
+ <RichText
157
+ tagName={'p'}
158
+ value={ body }
159
+ className={ 'ugb-number-box-body' }
160
+ onChange={ (text) => setAttributes( { body: text } ) }
161
+ isSelected={ isSelected && editable === 'body' }
162
+ onFocus={ onSetActiveEditable( 'body' ) }
163
+ placeholder={ __( 'Add body…' ) }
164
+ style={ {
165
+ color: bodyTextColor
166
+ } }
167
+ keepPlaceholderOnFocus
168
+ />
169
+ </div>
170
+ <div className={ 'ugb-number-box-column-two' }>
171
+ <RichText
172
+ tagName={ 'span' }
173
+ placeholder={ numberBoxTwo ? numberBoxTwo.default : '' }
174
+ value={ numberBoxTwo }
175
+ onChange={ (text) => setAttributes( { numberBoxTwo: text } ) }
176
+ isSelected={ isSelected && editable === 'numberBoxTwo' }
177
+ onFocus={ onSetActiveEditable( 'numberBoxTwo' ) }
178
+ style={ {
179
+ color: numberBoxColor,
180
+ backgroundColor: numberBGColor
181
+ } }
182
+ keepPlaceholderOnFocus
183
+ />
184
+ <RichText
185
+ tagName={'h4'}
186
+ value={ nameTwo }
187
+ className={ 'ugb-number-box-name-two' }
188
+ onChange={ (text) => setAttributes( { nameTwo: text } ) }
189
+ isSelected={ isSelected && editable === 'nameTwo' }
190
+ onFocus={ onSetActiveEditable( 'nameTwo' ) }
191
+ placeholder={ __( 'Add name…' ) }
192
+ style={ {
193
+ color: nameColor
194
+ } }
195
+ keepPlaceholderOnFocus
196
+ />
197
+ <RichText
198
+ tagName={'p'}
199
+ value={ bodyTwo }
200
+ className={ 'ugb-number-box-body-two' }
201
+ onChange={ (text) => setAttributes( { bodyTwo: text } ) }
202
+ isSelected={ isSelected && editable === 'bodyTwo' }
203
+ onFocus={ onSetActiveEditable( 'bodyTwo' ) }
204
+ placeholder={ __( 'Add body…' ) }
205
+ style={ {
206
+ color: bodyTextColor
207
+ } }
208
+ keepPlaceholderOnFocus
209
+ />
210
+ </div>
211
+ <div className={ 'ugb-number-box-column-three' }>
212
+ <RichText
213
+ tagName={ 'span' }
214
+ placeholder={ numberBoxThree ? numberBoxThree.default : '' }
215
+ value={ numberBoxThree }
216
+ onChange={ (text) => setAttributes( { numberBoxThree: text } ) }
217
+ isSelected={ isSelected && editable === 'numberBoxThree' }
218
+ onFocus={ onSetActiveEditable( 'numberBoxThree' ) }
219
+ style={ {
220
+ color: numberBoxColor,
221
+ backgroundColor: numberBGColor
222
+ } }
223
+ keepPlaceholderOnFocus
224
+ />
225
+ <RichText
226
+ tagName={'h4'}
227
+ value={ nameThree }
228
+ className={ 'ugb-number-box-name-three' }
229
+ onChange={ (text) => setAttributes( { nameThree: text } ) }
230
+ isSelected={ isSelected && editable === 'nameThree' }
231
+ onFocus={ onSetActiveEditable( 'nameThree' ) }
232
+ placeholder={ __( 'Add name…' ) }
233
+ style={ {
234
+ color: nameColor
235
+ } }
236
+ keepPlaceholderOnFocus
237
+ />
238
+ <RichText
239
+ tagName={'p'}
240
+ value={ bodyThree }
241
+ className={ 'ugb-number-box-body-three' }
242
+ onChange={ (text) => setAttributes( { bodyThree: text } ) }
243
+ isSelected={ isSelected && editable === 'bodyThree' }
244
+ onFocus={ onSetActiveEditable( 'bodyThree' ) }
245
+ placeholder={ __( 'Add body…' ) }
246
+ style={ {
247
+ color: bodyTextColor
248
+ } }
249
+ keepPlaceholderOnFocus
250
+ />
251
+ </div>
252
+ </div>
253
+ ];
254
+ }
255
+
256
+ export const save = ( props ) => {
257
+ const {
258
+ numberBox,
259
+ numberBoxTwo,
260
+ numberBoxThree,
261
+ body,
262
+ bodyTwo,
263
+ bodyThree,
264
+ name,
265
+ nameTwo,
266
+ nameThree,
267
+ numberBoxColor,
268
+ nameColor,
269
+ bodyTextColor,
270
+ numberBGColor,
271
+ columns
272
+ } = props.attributes;
273
+
274
+ return (
275
+ <div className={ `ugb-number-box column-${columns}` }>
276
+ <div className={ 'ugb-number-box-column-one' }>
277
+ { numberBox && !! numberBox.length && (
278
+ <span style={ { color: numberBoxColor, backgroundColor: numberBGColor } }>
279
+ { numberBox }
280
+ </span>
281
+ ) }
282
+ { name && !! name.length && (
283
+ <h4 className={ 'ugb-number-box-name' } style={ { color: nameColor } }>
284
+ { name }
285
+ </h4>
286
+ ) }
287
+ { body && !! body.length && (
288
+ <p className={ 'ugb-number-box-body' } style={ { color: bodyTextColor } }>
289
+ { body }
290
+ </p>
291
+ ) }
292
+ </div>
293
+ { columns > 1 && (
294
+ <div className={ 'ugb-number-box-column-two' }>
295
+ { numberBoxTwo && !! numberBoxTwo.length && (
296
+ <span style={ { color: numberBoxColor, backgroundColor: numberBGColor } }>
297
+ { numberBoxTwo }
298
+ </span>
299
+ ) }
300
+ { nameTwo && !! nameTwo.length && (
301
+ <h4 className={ 'ugb-number-box-name-two' } style={ { color: nameColor } }>
302
+ { nameTwo }
303
+ </h4>
304
+ ) }
305
+ { bodyTwo && !! bodyTwo.length && (
306
+ <p className={ 'ugb-number-box-body-two' } style={ { color: bodyTextColor } }>
307
+ { bodyTwo }
308
+ </p>
309
+ ) }
310
+ </div>
311
+ ) }
312
+ { columns > 2 && (
313
+ <div className={ 'ugb-number-box-column-three' }>
314
+ { numberBoxThree && !! numberBoxThree.length && (
315
+ <span style={ { color: numberBoxColor, backgroundColor: numberBGColor } }>
316
+ { numberBoxThree }
317
+ </span>
318
+ ) }
319
+ { nameThree && !! nameThree.length && (
320
+ <h4 className={ 'ugb-number-box-name-three' } style={ { color: nameColor } }>
321
+ { nameThree }
322
+ </h4>
323
+ ) }
324
+ { bodyThree && !! bodyThree.length && (
325
+ <p className={ 'ugb-number-box-body-three' } style={ { color: bodyTextColor } }>
326
+ { bodyThree }
327
+ </p>
328
+ ) }
329
+ </div>
330
+ ) }
331
+ </div>
332
+ );
333
+ }
334
+
335
 
336
  /**
337
  * Register: Gutenberg Block.
355
  __( 'Stackable' ),
356
  ],
357
  attributes: {
 
 
 
 
 
 
358
  numberBox: {
359
  type: 'array',
360
  source: 'children',
428
  },
429
 
430
  // The "edit" property must be a valid function.
431
+ edit: withState( { editable: 'content', } )( edit ),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
432
 
433
  // The "save" property must be specified and must be a valid function.
434
+ save: save,
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
435
  } );
src/block/pricing-box/editor.scss ADDED
@@ -0,0 +1,6 @@
 
 
 
 
 
 
1
+ /**
2
+ * #.# Editor Styles for Pricing Box Block
3
+ *
4
+ * CSS for just Backend enqueued after style.scss
5
+ * which makes it higher in priority.
6
+ */
src/block/pricing-box/index.js ADDED
@@ -0,0 +1,760 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * BLOCK: Pricing Box Block.
3
+ *
4
+ * Registering a basic block with Gutenberg.
5
+ * Simple block, renders and saves the same content without any interactivity.
6
+ */
7
+
8
+ // Import CSS.
9
+ import './style.scss';
10
+ import './editor.scss';
11
+
12
+ const { __ } = wp.i18n; // Import __() from wp.i18n
13
+ const { Component } = wp.element
14
+ const {
15
+ PanelColor,
16
+ SelectControl,
17
+ withState,
18
+ Dashicon,
19
+ IconButton,
20
+ RangeControl
21
+ } = wp.components;
22
+
23
+ const {
24
+ registerBlockType, // Import registerBlockType() from wp.blocks
25
+ InspectorControls,
26
+ RichText,
27
+ ColorPalette,
28
+ BlockControls,
29
+ UrlInput
30
+ } = wp.blocks;
31
+
32
+ import { PricingIcon } from '../../icons'
33
+
34
+ /**
35
+ * Register: Gutenberg Block.
36
+ *
37
+ * Registers a new block provided a unique name and an object defining its
38
+ * behavior. Once registered, the block is made editor as an option to any
39
+ * editor interface where blocks are implemented.
40
+ *
41
+ * @param {string} name Block name.
42
+ * @param {Object} settings Block settings.
43
+ * @return {?WPBlock} The block, if it has been successfully
44
+ * registered; otherwise `undefined`.
45
+ */
46
+ registerBlockType( 'ugb/pricing-box', {
47
+ // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
48
+ title: __( 'Pricing Box' ), // Block title.
49
+ icon: PricingIcon, // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
50
+ category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
51
+ keywords: [
52
+ __( 'Pricing Box' ),
53
+ __( 'Stackable' ),
54
+ ],
55
+ attributes: {
56
+ url: {
57
+ type: 'string',
58
+ source: 'attribute',
59
+ selector: '.ugb-pricing-box-column-one a',
60
+ attribute: 'href',
61
+ },
62
+ url2: {
63
+ type: 'string',
64
+ source: 'attribute',
65
+ selector: '.ugb-pricing-box-column-two a',
66
+ attribute: 'href',
67
+ },
68
+ url3: {
69
+ type: 'string',
70
+ source: 'attribute',
71
+ selector: '.ugb-pricing-box-column-three a',
72
+ attribute: 'href',
73
+ },
74
+ pricingBoxTitle: {
75
+ type: 'array',
76
+ source: 'children',
77
+ selector: '.ugb-pricing-box-column-one h3',
78
+ default: __( 'Basic' ),
79
+ },
80
+ pricingBoxTitle2: {
81
+ type: 'array',
82
+ source: 'children',
83
+ selector: '.ugb-pricing-box-column-two h3',
84
+ default: __( 'Basic' ),
85
+ },
86
+ pricingBoxTitle3: {
87
+ type: 'array',
88
+ source: 'children',
89
+ selector: '.ugb-pricing-box-column-three h3',
90
+ default: __( 'Basic' ),
91
+ },
92
+ price: {
93
+ type: 'array',
94
+ source: 'children',
95
+ selector: '.ugb-pricing-box-column-one .ugb-pricing-box-pricing',
96
+ default: __( '$9' ),
97
+ },
98
+ price2: {
99
+ type: 'array',
100
+ source: 'children',
101
+ selector: '.ugb-pricing-box-column-two .ugb-pricing-box-pricing',
102
+ default: __( '$9' ),
103
+ },
104
+ price3: {
105
+ type: 'array',
106
+ source: 'children',
107
+ selector: '.ugb-pricing-box-column-three .ugb-pricing-box-pricing',
108
+ default: __( '$9' ),
109
+ },
110
+ perMonthLabel: {
111
+ type: 'array',
112
+ source: 'children',
113
+ selector: '.ugb-pricing-box-column-one .ugb-pricing-box-per-month-label',
114
+ default: __( 'per month' ),
115
+ },
116
+ perMonthLabel2: {
117
+ type: 'array',
118
+ source: 'children',
119
+ selector: '.ugb-pricing-box-column-two .ugb-pricing-box-per-month-label',
120
+ default: __( 'per month' ),
121
+ },
122
+ perMonthLabel3: {
123
+ type: 'array',
124
+ source: 'children',
125
+ selector: '.ugb-pricing-box-column-three .ugb-pricing-box-per-month-label',
126
+ default: __( 'per month' ),
127
+ },
128
+ buttonText: {
129
+ type: 'array',
130
+ source: 'children',
131
+ selector: '.ugb-pricing-box-column-one a',
132
+ default: __( 'Buy Now'),
133
+ },
134
+ buttonText2: {
135
+ type: 'array',
136
+ source: 'children',
137
+ selector: '.ugb-pricing-box-column-two a',
138
+ default: __( 'Buy Now'),
139
+ },
140
+ buttonText3: {
141
+ type: 'array',
142
+ source: 'children',
143
+ selector: '.ugb-pricing-box-column-three a',
144
+ default: __( 'Buy Now'),
145
+ },
146
+ featureList: {
147
+ type: 'array',
148
+ source: 'children',
149
+ selector: '.ugb-pricing-box-column-one .ugb-pricing-box-feature-list',
150
+ default: __( 'Consectetur adipiscing elit Suspendisse at pretium tortor Vestibulum ante ipsum primis In faucibus orci luctus et Ultrices posuere cubilia cura Aenean consectetur nec' ),
151
+ },
152
+ featureList2: {
153
+ type: 'array',
154
+ source: 'children',
155
+ selector: '.ugb-pricing-box-column-two .ugb-pricing-box-feature-list',
156
+ default: __( 'Consectetur adipiscing elit Suspendisse at pretium tortor Vestibulum ante ipsum primis In faucibus orci luctus et Ultrices posuere cubilia cura Aenean consectetur nec' ),
157
+ },
158
+ featureList3: {
159
+ type: 'array',
160
+ source: 'children',
161
+ selector: '.ugb-pricing-box-column-three .ugb-pricing-box-feature-list',
162
+ default: __( 'Consectetur adipiscing elit Suspendisse at pretium tortor Vestibulum ante ipsum primis In faucibus orci luctus et Ultrices posuere cubilia cura Aenean consectetur nec' ),
163
+ },
164
+ pricingBoxColor: {
165
+ type: 'string',
166
+ },
167
+ priceColor: {
168
+ type: 'string',
169
+ },
170
+ perMonthLabelColor: {
171
+ type: 'string',
172
+ },
173
+ buttonColor: {
174
+ type: 'string',
175
+ },
176
+ buttonTextColor: {
177
+ type: 'string',
178
+ },
179
+ featureListColor: {
180
+ type: 'string',
181
+ },
182
+ columns: {
183
+ type: 'select',
184
+ default: '1'
185
+ },
186
+ size: {
187
+ type: 'string',
188
+ default: 'normal',
189
+ },
190
+ cornerButtonRadius: {
191
+ type: 'number',
192
+ default: 4,
193
+ }
194
+ },
195
+
196
+ // The "edit" property must be a valid function.
197
+ edit: withState({ editable: 'content', })( ( props ) => {
198
+
199
+ const {
200
+ isSelected,
201
+ editable,
202
+ setState,
203
+ className,
204
+ setAttributes
205
+ } = props;
206
+
207
+ const {
208
+ url,
209
+ url2,
210
+ url3,
211
+ pricingBoxTitle,
212
+ pricingBoxTitle2,
213
+ pricingBoxTitle3,
214
+ price,
215
+ price2,
216
+ price3,
217
+ perMonthLabel,
218
+ perMonthLabel2,
219
+ perMonthLabel3,
220
+ buttonText,
221
+ buttonText2,
222
+ buttonText3,
223
+ featureList,
224
+ featureList2,
225
+ featureList3,
226
+ pricingBoxColor,
227
+ priceColor,
228
+ perMonthLabelColor,
229
+ buttonColor,
230
+ buttonTextColor,
231
+ featureListColor,
232
+ columns,
233
+ size,
234
+ cornerButtonRadius
235
+ } = props.attributes;
236
+
237
+ const column = [
238
+ { value: '1', label: __( 'One Column' ) },
239
+ { value: '2', label: __( 'Two Column' ) },
240
+ { value: '3', label: __( 'Three Column' ) },
241
+ ];
242
+
243
+ const buttonSizes = [
244
+ { value: 'small', label: __( 'Small' ) },
245
+ { value: 'normal', label: __( 'Normal' ) },
246
+ { value: 'medium', label: __( 'Medium' ) },
247
+ { value: 'large', label: __( 'Large' ) },
248
+ ];
249
+
250
+ const onSetActiveEditable = ( newEditable ) => () => {
251
+ setState( { editable: newEditable } )
252
+ }
253
+
254
+ return [
255
+ isSelected && <BlockControls key="controls"/>,
256
+ isSelected && (
257
+ <InspectorControls key={ 'inspector' }>
258
+ <SelectControl
259
+ label={ __( 'Column Number' ) }
260
+ value={ columns }
261
+ options={ column.map( ({ value, label }) => ( {
262
+ value: value,
263
+ label: label,
264
+ } ) ) }
265
+ onChange={ ( newColumns ) => { setAttributes( { columns: newColumns } ) } }
266
+ />
267
+ <RangeControl
268
+ label={ __( 'Corner Radius' ) }
269
+ value={ cornerButtonRadius }
270
+ min='1'
271
+ max='50'
272
+ onChange={ ( cornerRad ) => setAttributes( { cornerButtonRadius: cornerRad } ) }
273
+ />
274
+ <PanelColor
275
+ title={ __( 'Pricing Title Color' ) }
276
+ colorValue={ pricingBoxColor }
277
+ initialOpen={ false }
278
+ >
279
+ <ColorPalette
280
+ value={ pricingBoxColor }
281
+ onChange={ ( colorValue ) => setAttributes( { pricingBoxColor: colorValue } ) }
282
+ />
283
+ </PanelColor>
284
+ <PanelColor
285
+ title={ __( 'Price Color' ) }
286
+ colorValue={ priceColor }
287
+ initialOpen={ false }
288
+ >
289
+ <ColorPalette
290
+ value={ priceColor }
291
+ onChange={ ( colorValue ) => setAttributes( { priceColor: colorValue } ) }
292
+ />
293
+ </PanelColor>
294
+ <PanelColor
295
+ title={ __( 'Per Month Label Color' ) }
296
+ colorValue={ perMonthLabelColor }
297
+ initialOpen={ false }
298
+ >
299
+ <ColorPalette
300
+ value={ perMonthLabelColor }
301
+ onChange={ ( colorValue ) => setAttributes( { perMonthLabelColor: colorValue } ) }
302
+ />
303
+ </PanelColor>
304
+ <PanelColor
305
+ title={ __( 'Feature List Color' ) }
306
+ colorValue={ featureListColor }
307
+ initialOpen={ false }
308
+ >
309
+ <ColorPalette
310
+ value={ featureListColor }
311
+ onChange={ ( colorValue ) => setAttributes( { featureListColor: colorValue } ) }
312
+ />
313
+ </PanelColor>
314
+ <SelectControl
315
+ label={ __( 'Button Size' ) }
316
+ value={ size }
317
+ options={ buttonSizes.map( ({ value, label }) => ( {
318
+ value: value,
319
+ label: label,
320
+ } ) ) }
321
+ onChange={ ( newSize ) => { setAttributes( { size: newSize } ) } }
322
+ />
323
+ <PanelColor
324
+ title={ __( 'Button Color' ) }
325
+ colorValue={ buttonColor }
326
+ initialOpen={ false }
327
+ >
328
+ <ColorPalette
329
+ value={ buttonColor }
330
+ onChange={ ( colorValue ) => setAttributes( { buttonColor: colorValue } ) }
331
+ />
332
+ </PanelColor>
333
+ <PanelColor
334
+ title={ __( 'Button Text Color' ) }
335
+ colorValue={ buttonTextColor }
336
+ initialOpen={ false }
337
+ >
338
+ <ColorPalette
339
+ value={ buttonTextColor }
340
+ onChange={ ( colorValue ) => setAttributes( { buttonTextColor: colorValue } ) }
341
+ />
342
+ </PanelColor>
343
+ </InspectorControls>
344
+ ),
345
+ <div key={'editable'} className={ `ugb-pricing-box column-${columns}` }>
346
+ <div className={ 'ugb-pricing-box-column-one' }>
347
+ <RichText
348
+ tagName={ 'h3' }
349
+ placeholder={ pricingBoxTitle.default }
350
+ value={ pricingBoxTitle }
351
+ onChange={ (text) => setAttributes( { pricingBoxTitle: text } ) }
352
+ isSelected={ isSelected && editable === 'pricingBoxTitle' }
353
+ onFocus={ onSetActiveEditable( 'pricingBoxTitle' ) }
354
+ style={ {
355
+ color: pricingBoxColor
356
+ } }
357
+ keepPlaceholderOnFocus
358
+ />
359
+ <RichText
360
+ tagName={'p'}
361
+ placeholder={ price.default }
362
+ value={ price }
363
+ className={ 'ugb-pricing-box-pricing' }
364
+ onChange={ (text) => setAttributes( { price: text } ) }
365
+ isSelected={ isSelected && editable === 'price' }
366
+ onFocus={ onSetActiveEditable( 'price' ) }
367
+ style={ {
368
+ color: priceColor
369
+ } }
370
+ keepPlaceholderOnFocus
371
+ />
372
+ <RichText
373
+ tagName={'p'}
374
+ placeholder={ perMonthLabel.default }
375
+ value={ perMonthLabel }
376
+ className={ 'ugb-pricing-box-per-month-label' }
377
+ onChange={ (text) => setAttributes( { perMonthLabel: text } ) }
378
+ focus={ isSelected && editable === 'perMonthLabel' }
379
+ onFocus={ onSetActiveEditable( 'perMonthLabel' ) }
380
+ style={ {
381
+ color: perMonthLabelColor
382
+ } }
383
+ keepPlaceholderOnFocus
384
+ />
385
+ <span key={ 'button' }
386
+ // title={ title }
387
+ className={ 'wp-block-button' }>
388
+ <RichText
389
+ tagName={ 'span' }
390
+ placeholder={ buttonText.default }
391
+ value={ buttonText }
392
+ onChange={ (text) => setAttributes( { buttonText: text } ) }
393
+ className={`wp-ugb-button ugb-button-${size}`}
394
+ isSelected={ isSelected && editable === 'buttonText' }
395
+ onFocus={ onSetActiveEditable( 'buttonText' ) }
396
+ style={ {
397
+ backgroundColor: buttonColor,
398
+ color: buttonTextColor,
399
+ borderRadius: cornerButtonRadius + 'px',
400
+ } }
401
+ keepPlaceholderOnFocus
402
+ />
403
+ </span>
404
+ <RichText
405
+ tagName={'p'}
406
+ placeholder={ featureList.default }
407
+ value={ featureList }
408
+ className={ 'ugb-pricing-box-feature-list' }
409
+ onChange={ (text) => setAttributes( { featureList: text } ) }
410
+ focus={ isSelected && editable === 'featureList' }
411
+ onFocus={ onSetActiveEditable( 'featureList' ) }
412
+ style={ {
413
+ color: featureListColor
414
+ } }
415
+ keepPlaceholderOnFocus
416
+ />
417
+ {
418
+ isSelected && (
419
+ <form
420
+ key={ 'form-link' }
421
+ onSubmit={ ( event ) => event.preventDefault() }
422
+ className={ `blocks-button__inline-link pricing-box`}>
423
+ <Dashicon icon={ 'admin-links' } />
424
+ <UrlInput
425
+ value={ url }
426
+ onChange={ ( value ) => setAttributes( { url: value } ) }
427
+ />
428
+ <IconButton
429
+ icon={ 'editor-break' }
430
+ label={ __( 'Apply' ) }
431
+ type={ 'submit' }
432
+ />
433
+ </form>
434
+ )
435
+ }
436
+ </div>
437
+ <div className={ 'ugb-pricing-box-column-two' }>
438
+ <RichText
439
+ tagName={ 'h3' }
440
+ placeholder={ pricingBoxTitle2.default }
441
+ value={ pricingBoxTitle2 }
442
+ onChange={ (text) => setAttributes( { pricingBoxTitle2: text } ) }
443
+ isSelected={ isSelected && editable === 'pricingBoxTitle2' }
444
+ onFocus={ onSetActiveEditable( 'pricingBoxTitle2' ) }
445
+ style={ {
446
+ color: pricingBoxColor
447
+ } }
448
+ keepPlaceholderOnFocus
449
+ />
450
+ <RichText
451
+ tagName={'p'}
452
+ placeholder={ price2.default }
453
+ value={ price2 }
454
+ className={ 'ugb-pricing-box-pricing' }
455
+ onChange={ (text) => setAttributes( { price2: text } ) }
456
+ isSelected={ isSelected && editable === 'price2' }
457
+ onFocus={ onSetActiveEditable( 'price2' ) }
458
+ style={ {
459
+ color: priceColor
460
+ } }
461
+ keepPlaceholderOnFocus
462
+ />
463
+ <RichText
464
+ tagName={'p'}
465
+ placeholder={ perMonthLabel2.default }
466
+ value={ perMonthLabel2 }
467
+ className={ 'ugb-pricing-box-per-month-label' }
468
+ onChange={ (text) => setAttributes( { perMonthLabel2: text } ) }
469
+ focus={ isSelected && editable === 'perMonthLabel2' }
470
+ onFocus={ onSetActiveEditable( 'perMonthLabel2' ) }
471
+ style={ {
472
+ color: perMonthLabelColor
473
+ } }
474
+ keepPlaceholderOnFocus
475
+ />
476
+ <span key={ 'button' }
477
+ // title={ title }
478
+ className={ 'wp-block-button' }>
479
+ <RichText
480
+ tagName={ 'span' }
481
+ placeholder={ buttonText2.default }
482
+ value={ buttonText2 }
483
+ onChange={ (text) => setAttributes( { buttonText2: text } ) }
484
+ className={`wp-ugb-button ugb-button-${size}`}
485
+ isSelected={ isSelected && editable === 'buttonText2' }
486
+ onFocus={ onSetActiveEditable( 'buttonText2' ) }
487
+ style={ {
488
+ backgroundColor: buttonColor,
489
+ color: buttonTextColor,
490
+ borderRadius: cornerButtonRadius + 'px',
491
+ } }
492
+ keepPlaceholderOnFocus
493
+ />
494
+ </span>
495
+ <RichText
496
+ tagName={'p'}
497
+ placeholder={ featureList2.default }
498
+ value={ featureList2 }
499
+ className={ 'ugb-pricing-box-feature-list' }
500
+ onChange={ (text) => setAttributes( { featureList2: text } ) }
501
+ focus={ isSelected && editable === 'featureList2' }
502
+ onFocus={ onSetActiveEditable( 'featureList2' ) }
503
+ style={ {
504
+ color: featureListColor
505
+ } }
506
+ keepPlaceholderOnFocus
507
+ />
508
+ {
509
+ isSelected && (
510
+ <form
511
+ key={ 'form-link' }
512
+ onSubmit={ ( event ) => event.preventDefault() }
513
+ className={ `blocks-button__inline-link pricing-box`}>
514
+ <Dashicon icon={ 'admin-links' } />
515
+ <UrlInput
516
+ value={ url }
517
+ onChange={ ( value ) => setAttributes( { url: value } ) }
518
+ />
519
+ <IconButton
520
+ icon={ 'editor-break' }
521
+ label={ __( 'Apply' ) }
522
+ type={ 'submit' }
523
+ />
524
+ </form>
525
+ )
526
+ }
527
+ </div>
528
+ <div className={ 'ugb-pricing-box-column-three' }>
529
+ <RichText
530
+ tagName={ 'h3' }
531
+ placeholder={ pricingBoxTitle3.default }
532
+ value={ pricingBoxTitle3 }
533
+ onChange={ (text) => setAttributes( { pricingBoxTitle3: text } ) }
534
+ isSelected={ isSelected && editable === 'pricingBoxTitle3' }
535
+ onFocus={ onSetActiveEditable( 'pricingBoxTitle3' ) }
536
+ style={ {
537
+ color: pricingBoxColor
538
+ } }
539
+ keepPlaceholderOnFocus
540
+ />
541
+ <RichText
542
+ tagName={'p'}
543
+ placeholder={ price3.default }
544
+ value={ price3 }
545
+ className={ 'ugb-pricing-box-pricing' }
546
+ onChange={ (text) => setAttributes( { price3: text } ) }
547
+ isSelected={ isSelected && editable === 'price3' }
548
+ onFocus={ onSetActiveEditable( 'price3' ) }
549
+ style={ {
550
+ color: priceColor
551
+ } }
552
+ keepPlaceholderOnFocus
553
+ />
554
+ <RichText
555
+ tagName={'p'}
556
+ placeholder={ perMonthLabel3.default }
557
+ value={ perMonthLabel3 }
558
+ className={ 'ugb-pricing-box-per-month-label' }
559
+ onChange={ (text) => setAttributes( { perMonthLabel3: text } ) }
560
+ focus={ isSelected && editable === 'perMonthLabel3' }
561
+ onFocus={ onSetActiveEditable( 'perMonthLabel3' ) }
562
+ style={ {
563
+ color: perMonthLabelColor
564
+ } }
565
+ keepPlaceholderOnFocus
566
+ />
567
+ <span key={ 'button' }
568
+ // title={ title }
569
+ className={ 'wp-block-button' }>
570
+ <RichText
571
+ tagName={ 'span' }
572
+ placeholder={ buttonText3.default }
573
+ value={ buttonText3 }
574
+ onChange={ (text) => setAttributes( { buttonText3: text } ) }
575
+ className={`wp-ugb-button ugb-button-${size}`}
576
+ isSelected={ isSelected && editable === 'buttonText3' }
577
+ onFocus={ onSetActiveEditable( 'buttonText3' ) }
578
+ style={ {
579
+ backgroundColor: buttonColor,
580
+ color: buttonTextColor,
581
+ borderRadius: cornerButtonRadius + 'px',
582
+ } }
583
+ keepPlaceholderOnFocus
584
+ />
585
+ </span>
586
+ <RichText
587
+ tagName={'p'}
588
+ placeholder={ featureList3.default }
589
+ value={ featureList3 }
590
+ className={ 'ugb-pricing-box-feature-list' }
591
+ onChange={ (text) => setAttributes( { featureList3: text } ) }
592
+ focus={ isSelected && editable === 'featureList3' }
593
+ onFocus={ onSetActiveEditable( 'featureList3' ) }
594
+ style={ {
595
+ color: featureListColor
596
+ } }
597
+ keepPlaceholderOnFocus
598
+ />
599
+ {
600
+ isSelected && (
601
+ <form
602
+ key={ 'form-link' }
603
+ onSubmit={ ( event ) => event.preventDefault() }
604
+ className={ `blocks-button__inline-link pricing-box`}>
605
+ <Dashicon icon={ 'admin-links' } />
606
+ <UrlInput
607
+ value={ url }
608
+ onChange={ ( value ) => setAttributes( { url: value } ) }
609
+ />
610
+ <IconButton
611
+ icon={ 'editor-break' }
612
+ label={ __( 'Apply' ) }
613
+ type={ 'submit' }
614
+ />
615
+ </form>
616
+ )
617
+ }
618
+ </div>
619
+ </div>
620
+ ];
621
+ } ),
622
+
623
+ // The "save" property must be specified and must be a valid function.
624
+ save: function( props ) {
625
+ const {
626
+ url,
627
+ url2,
628
+ url3,
629
+ pricingBoxTitle,
630
+ pricingBoxTitle2,
631
+ pricingBoxTitle3,
632
+ price,
633
+ price2,
634
+ price3,
635
+ perMonthLabel,
636
+ perMonthLabel2,
637
+ perMonthLabel3,
638
+ buttonText,
639
+ buttonText2,
640
+ buttonText3,
641
+ featureList,
642
+ featureList2,
643
+ featureList3,
644
+ pricingBoxColor,
645
+ priceColor,
646
+ perMonthLabelColor,
647
+ buttonColor,
648
+ buttonTextColor,
649
+ featureListColor,
650
+ columns,
651
+ size,
652
+ cornerButtonRadius
653
+ } = props.attributes;
654
+
655
+ const buttonStyle = {
656
+ backgroundColor: buttonColor,
657
+ color: buttonTextColor,
658
+ borderRadius: cornerButtonRadius + 'px',
659
+ }
660
+
661
+ return (
662
+ <div className={ `ugb-pricing-box column-${columns}` }>
663
+ <div className={ 'ugb-pricing-box-column-one' }>
664
+ { pricingBoxTitle && !! pricingBoxTitle.length && (
665
+ <h3 style={ { color: pricingBoxColor } }>
666
+ { pricingBoxTitle }
667
+ </h3>
668
+ ) }
669
+ { price && !! price.length && (
670
+ <p className={ 'ugb-pricing-box-pricing' } style={ { color: priceColor } }>
671
+ { price }
672
+ </p>
673
+ ) }
674
+ { perMonthLabel && !! perMonthLabel.length && (
675
+ <p className={ 'ugb-pricing-box-per-month-label' } style={ { color: perMonthLabelColor } }>
676
+ { perMonthLabel }
677
+ </p>
678
+ ) }
679
+ { buttonText && !! buttonText.length && (
680
+ <a
681
+ href={ url }
682
+ className={ `wp-ugb-button ugb-button-${size}` }
683
+ style={ buttonStyle }>
684
+ { buttonText }
685
+ </a>
686
+ ) }
687
+ { featureList && !! featureList.length && (
688
+ <p className={ 'ugb-pricing-box-feature-list' } style={ { color: featureListColor } }>
689
+ { featureList }
690
+ </p>
691
+ ) }
692
+ </div>
693
+ { columns > 1 && (
694
+ <div className={ 'ugb-pricing-box-column-two' }>
695
+ { pricingBoxTitle2 && !! pricingBoxTitle2.length && (
696
+ <h3 style={ { color: pricingBoxColor } }>
697
+ { pricingBoxTitle2 }
698
+ </h3>
699
+ ) }
700
+ { price2 && !! price2.length && (
701
+ <p className={ 'ugb-pricing-box-pricing' } style={ { color: priceColor } }>
702
+ { price2 }
703
+ </p>
704
+ ) }
705
+ { perMonthLabel2 && !! perMonthLabel2.length && (
706
+ <p className={ 'ugb-pricing-box-per-month-label' } style={ { color: perMonthLabelColor } }>
707
+ { perMonthLabel2 }
708
+ </p>
709
+ ) }
710
+ { buttonText2 && !! buttonText2.length && (
711
+ <a
712
+ href={ url2 }
713
+ className={ `wp-ugb-button ugb-button-${size}` }
714
+ style={ buttonStyle }>
715
+ { buttonText2 }
716
+ </a>
717
+ ) }
718
+ { featureList2 && !! featureList2.length && (
719
+ <p className={ 'ugb-pricing-box-feature-list' } style={ { color: featureListColor } }>
720
+ { featureList2 }
721
+ </p>
722
+ ) }
723
+ </div>
724
+ ) }
725
+ { columns > 2 && (
726
+ <div className={ 'ugb-pricing-box-column-three' }>
727
+ { pricingBoxTitle3 && !! pricingBoxTitle3.length && (
728
+ <h3 style={ { color: pricingBoxColor } }>
729
+ { pricingBoxTitle3 }
730
+ </h3>
731
+ ) }
732
+ { price3 && !! price3.length && (
733
+ <p className={ 'ugb-pricing-box-pricing' } style={ { color: priceColor } }>
734
+ { price3 }
735
+ </p>
736
+ ) }
737
+ { perMonthLabel3 && !! perMonthLabel3.length && (
738
+ <p className={ 'ugb-pricing-box-per-month-label' } style={ { color: perMonthLabelColor } }>
739
+ { perMonthLabel3 }
740
+ </p>
741
+ ) }
742
+ { buttonText3 && !! buttonText3.length && (
743
+ <a
744
+ href={ url3 }
745
+ className={ `wp-ugb-button ugb-button-${size}` }
746
+ style={ buttonStyle }>
747
+ { buttonText3 }
748
+ </a>
749
+ ) }
750
+ { featureList3 && !! featureList3.length && (
751
+ <p className={ 'ugb-pricing-box-feature-list' } style={ { color: featureListColor } }>
752
+ { featureList3 }
753
+ </p>
754
+ ) }
755
+ </div>
756
+ ) }
757
+ </div>
758
+ );
759
+ },
760
+ } );
src/block/pricing-box/style.scss ADDED
@@ -0,0 +1,127 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * #.# Styles for Pricing Box Block.
3
+ *
4
+ * CSS for both Frontend+Backend.
5
+ */
6
+ .ugb-pricing-box {
7
+ display: flex;
8
+ margin-top: 2rem;
9
+ margin-bottom: 2rem;
10
+ > div {
11
+ text-align: center;
12
+ margin: 0 auto;
13
+ p {
14
+ text-align: center;
15
+ padding-bottom: 0;
16
+ }
17
+ }
18
+ h3 {
19
+ margin: 0 0 2rem !important;
20
+ line-height: 100% !important;
21
+ }
22
+ .ugb-pricing-box-pricing {
23
+ font-size: 3.5em;
24
+ margin: 0 0 .5rem;
25
+ line-height: 100% !important;
26
+ }
27
+ .ugb-pricing-box-per-month-label {
28
+ font-size: .75em;
29
+ opacity: .3;
30
+ margin: 0 0 2rem;
31
+ text-transform: uppercase;
32
+ line-height: 100% !important;
33
+ }
34
+ .wp-ugb-button {
35
+ margin-bottom: 2rem;
36
+ }
37
+ .ugb-pricing-box-feature-list {
38
+ opacity: .5;
39
+ font-size: 1em;
40
+ line-height: 1.8em !important;
41
+ width: 40%;
42
+ margin: 0 auto;
43
+ }
44
+
45
+ }
46
+ .blocks-button__inline-link.pricing-box {
47
+ margin: 5px auto 0px auto;
48
+ }
49
+ .ugb-pricing-box.column-1 {
50
+ .ugb-pricing-box-column-two,
51
+ .ugb-pricing-box-column-three {
52
+ display: none;
53
+ }
54
+ }
55
+ .ugb-pricing-box.column-2 {
56
+ .ugb-pricing-box-feature-list {
57
+ width: 85%;
58
+ margin: 0 auto;
59
+ }
60
+ .ugb-pricing-box-column-one {
61
+ margin-right: 2rem;
62
+ }
63
+ .ugb-pricing-box-column-two {
64
+ border-left: 1px solid #eee;
65
+ margin-left: 0;
66
+ padding-left: 2rem;
67
+ }
68
+ > div {
69
+ width: 50%;
70
+ }
71
+ .ugb-pricing-box-column-three {
72
+ display: none;
73
+ }
74
+ .blocks-button__inline-link {
75
+ width: 225px;
76
+ }
77
+ }
78
+ .ugb-pricing-box.column-3 {
79
+ > div {
80
+ width: 33.2%;
81
+ margin-left: 1rem;
82
+ margin-right: 1rem;
83
+ }
84
+ > div:first-child {
85
+ margin-left: 0;
86
+ }
87
+ > div:last-child {
88
+ margin-right: 0;
89
+ }
90
+ .ugb-pricing-box-column-two {
91
+ border-left: 1px solid #eee;
92
+ border-right: 1px solid #eee;
93
+ margin-left: 0;
94
+ margin-right: 0;
95
+ padding-left: 1rem;
96
+ padding-right: 1rem;
97
+ }
98
+ .ugb-pricing-box-feature-list {
99
+ width: 100%;
100
+ }
101
+ .blocks-button__inline-link {
102
+ width: 181px;
103
+ .blocks-url-input {
104
+ width: 50%;
105
+ }
106
+ }
107
+ }
108
+
109
+ @media screen and (max-width: 800px) {
110
+ .ugb-pricing-box.column-3.column-3 {
111
+ display: block;
112
+ > div {
113
+ width: 100%;
114
+ margin: 0;
115
+ }
116
+ }
117
+ }
118
+
119
+ @media screen and (max-width: 600px) {
120
+ .ugb-pricing-box.column-2.column-2 {
121
+ display: block;
122
+ > div {
123
+ width: 100%;
124
+ margin: 0;
125
+ }
126
+ }
127
+ }
src/block/pullquote/index.js CHANGED
@@ -8,11 +8,13 @@
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
 
11
 
12
 
13
  const { __ } = wp.i18n; // Import __() from wp.i18n
14
- const { Component } = wp.element
15
  const { PanelColor, withState } = wp.components
 
16
  const {
17
  registerBlockType, // Import registerBlockType() from wp.blocks
18
  InspectorControls,
@@ -20,7 +22,80 @@ const {
20
  ColorPalette
21
  } = wp.blocks
22
 
23
- import { QuoteIcon } from '../../icons'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
 
25
  /**
26
  * Register: Gutenberg Block.
@@ -61,77 +136,8 @@ registerBlockType( 'ugb/pullquote', {
61
  },
62
 
63
  // The "edit" property must be a valid function.
64
- edit: withState( { editable: 'content', } )( ( props ) => {
65
-
66
- const onSetActiveEditable = ( newEditable ) => () => {
67
- setState( { editable: newEditable } )
68
- }
69
-
70
- const { isSelected, setAttributes, className } = props
71
-
72
- const { color, text, borderColor } = props.attributes
73
-
74
-
75
- return [
76
- <blockquote
77
- key={ 'quote' }
78
- className={ 'ugb-pullquote' }
79
- style={ {
80
- borderTopColor: borderColor,
81
- borderBottomColor: borderColor
82
- } }>
83
- <RichText
84
- tagName={ 'p' }
85
- className={ 'ugb-pullquote-text' }
86
- value={ text }
87
- onChange={ ( nextValue ) => setAttributes( { text: nextValue } ) }
88
- placeholder={ __( 'Write quote…' ) }
89
- formattingControls={ [ 'bold', 'italic', 'strikethrough', 'link' ] }
90
- isSelected={ isSelected }
91
- keepPlaceholderOnFocus
92
- style={ {
93
- color: color
94
- } }
95
- />
96
- </blockquote>,
97
- isSelected && (
98
- <InspectorControls key='inspector'>
99
- <PanelColor
100
- title={ __( 'Text Color' ) }
101
- colorValue={ color }
102
- initialOpen={ false }>
103
- <ColorPalette
104
- value={ color }
105
- onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
106
- />
107
- </PanelColor>
108
- <PanelColor
109
- title={ __( 'Border Color' ) }
110
- colorValue={ borderColor }
111
- initialOpen={ false }>
112
- <ColorPalette
113
- value={ borderColor }
114
- onChange={ ( colorValue ) => setAttributes( { borderColor: colorValue } ) }
115
- />
116
- </PanelColor>
117
- </InspectorControls>
118
- )
119
- ];
120
- } ),
121
 
122
  // The "save" property must be specified and must be a valid function.
123
- save: function( props ) {
124
- const { color, text, borderColor } = props.attributes
125
-
126
- return (
127
- <blockquote
128
- className={ 'ugb-pullquote' }
129
- style={ {
130
- borderTopColor: borderColor,
131
- borderBottomColor: borderColor,
132
- } }>
133
- <p style={ { color: color } }>{ text }</p>
134
- </blockquote>
135
- );
136
- },
137
  } );
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
11
+ import { QuoteIcon } from '../../icons'
12
 
13
 
14
  const { __ } = wp.i18n; // Import __() from wp.i18n
15
+
16
  const { PanelColor, withState } = wp.components
17
+
18
  const {
19
  registerBlockType, // Import registerBlockType() from wp.blocks
20
  InspectorControls,
22
  ColorPalette
23
  } = wp.blocks
24
 
25
+
26
+ export const edit = ( props ) => {
27
+ const onSetActiveEditable = ( newEditable ) => () => {
28
+ setState( { editable: newEditable } )
29
+ }
30
+
31
+ const { isSelected, setAttributes, className } = props
32
+
33
+ const { color, text, borderColor } = props.attributes
34
+
35
+
36
+ return [
37
+ <blockquote
38
+ key={ 'quote' }
39
+ className={ 'ugb-pullquote' }
40
+ style={ {
41
+ borderTopColor: borderColor,
42
+ borderBottomColor: borderColor
43
+ } }>
44
+ <RichText
45
+ tagName={ 'p' }
46
+ className={ 'ugb-pullquote-text' }
47
+ value={ text }
48
+ onChange={ ( nextValue ) => setAttributes( { text: nextValue } ) }
49
+ placeholder={ __( 'Write quote…' ) }
50
+ formattingControls={ [ 'bold', 'italic', 'strikethrough', 'link' ] }
51
+ isSelected={ isSelected }
52
+ keepPlaceholderOnFocus
53
+ style={ {
54
+ color: color
55
+ } }
56
+ />
57
+ </blockquote>,
58
+ isSelected && (
59
+ <InspectorControls key='inspector'>
60
+ <PanelColor
61
+ title={ __( 'Text Color' ) }
62
+ colorValue={ color }
63
+ initialOpen={ false }>
64
+ <ColorPalette
65
+ value={ color }
66
+ onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
67
+ />
68
+ </PanelColor>
69
+ <PanelColor
70
+ title={ __( 'Border Color' ) }
71
+ colorValue={ borderColor }
72
+ initialOpen={ false }>
73
+ <ColorPalette
74
+ value={ borderColor }
75
+ onChange={ ( colorValue ) => setAttributes( { borderColor: colorValue } ) }
76
+ />
77
+ </PanelColor>
78
+ </InspectorControls>
79
+ )
80
+ ];
81
+ }
82
+
83
+ export const save = ( props ) => {
84
+
85
+ const { color, text, borderColor } = props.attributes
86
+
87
+ return (
88
+ <blockquote
89
+ className={ 'ugb-pullquote' }
90
+ style={ {
91
+ borderTopColor: borderColor,
92
+ borderBottomColor: borderColor,
93
+ } }>
94
+ <p style={ { color: color } }>{ text }</p>
95
+ </blockquote>
96
+ );
97
+ }
98
+
99
 
100
  /**
101
  * Register: Gutenberg Block.
136
  },
137
 
138
  // The "edit" property must be a valid function.
139
+ edit: withState( { editable: 'content', } )( edit ),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
140
 
141
  // The "save" property must be specified and must be a valid function.
142
+ save: save,
 
 
 
 
 
 
 
 
 
 
 
 
 
143
  } );
src/block/spacer/index.js CHANGED
@@ -8,11 +8,49 @@
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
 
 
11
 
12
  const { __ } = wp.i18n; // Import __() from wp.i18n
13
- const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
14
 
15
- import { SpacerIcon } from '../../icons'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
 
17
  /**
18
  * Register: aa Gutenberg Block.
@@ -41,40 +79,8 @@ registerBlockType( 'ugb/spacer', {
41
  type: 'number',
42
  },
43
  },
 
 
44
 
45
- // The "edit" property must be a valid function.
46
- edit: function( props ) {
47
-
48
- const { isSelected } = props;
49
- const { InspectorControls } = wp.blocks;
50
- const { RangeControl, TextControl } = wp.components;
51
- const { height } = props.attributes;
52
-
53
- return [
54
-
55
- !! isSelected && (
56
- <InspectorControls key='inspector'>
57
- <RangeControl
58
- label={__('Height')}
59
- value={height}
60
- min='30'
61
- max='200'
62
- onChange={function( height ) {
63
- props.setAttributes( { height: height } );
64
- }}
65
- />
66
-
67
- </InspectorControls>
68
- ),
69
- <div className={ props.className } style={{height:height + 'px'}}></div>
70
- ]
71
- },
72
-
73
- // The "save" property must be specified and must be a valid function.
74
- save: function( props ) {
75
- const { height } = props.attributes
76
- return (
77
- <div className={ props.className } style={{height:height + 'px'}}></div>
78
- );
79
- },
80
  } );
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
11
+ import { SpacerIcon } from '../../icons'
12
+
13
 
14
  const { __ } = wp.i18n; // Import __() from wp.i18n
 
15
 
16
+ const { RangeControl, TextControl } = wp.components;
17
+
18
+ const { registerBlockType, InspectorControls } = wp.blocks; // Import registerBlockType() from wp.blocks
19
+
20
+
21
+ export const save = ( props ) => {
22
+
23
+ const { height } = props.attributes
24
+
25
+ return (
26
+ <div style={{height:height + 'px'}}></div>
27
+ );
28
+ }
29
+
30
+ export const edit = ( props ) => {
31
+
32
+ const { isSelected } = props;
33
+
34
+ const { height } = props.attributes;
35
+
36
+ return [
37
+ !! isSelected && (
38
+ <InspectorControls key='inspector'>
39
+ <RangeControl
40
+ label={__('Height')}
41
+ value={height}
42
+ min='30'
43
+ max='200'
44
+ onChange={function( height ) {
45
+ props.setAttributes( { height: height } );
46
+ }}
47
+ />
48
+ </InspectorControls>
49
+ ),
50
+ <div className={ props.className } style={{height:height + 'px'}}></div>
51
+ ]
52
+ }
53
+
54
 
55
  /**
56
  * Register: aa Gutenberg Block.
79
  type: 'number',
80
  },
81
  },
82
+
83
+ edit: edit,
84
 
85
+ save: save,
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
86
  } );
src/block/team-member/index.js CHANGED
@@ -8,9 +8,11 @@
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
 
 
11
 
12
  const { __ } = wp.i18n; // Import __() from wp.i18n
13
- const { Component } = wp.element
14
  const {
15
  PanelColor,
16
  Button,
@@ -29,7 +31,387 @@ const {
29
  AlignmentToolbar
30
  } = wp.blocks;
31
 
32
- import { TeamMemberIcon } from '../../icons'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
33
 
34
  /**
35
  * Register: Gutenberg Block.
@@ -53,18 +435,6 @@ registerBlockType( 'ugb/team-member', {
53
  __( 'Stackable' ),
54
  ],
55
  attributes: {
56
- title: {
57
- type: 'string',
58
- source: 'attribute',
59
- selector: 'a',
60
- attribute: 'title',
61
- },
62
- url: {
63
- type: 'string',
64
- source: 'attribute',
65
- selector: 'a',
66
- attribute: 'href',
67
- },
68
  href: {
69
  type: 'url',
70
  },
@@ -178,387 +548,8 @@ registerBlockType( 'ugb/team-member', {
178
  },
179
 
180
  // The "edit" property must be a valid function.
181
- edit: withState( { editable: 'content', } )( ( props ) => {
182
-
183
- const {
184
- isSelected,
185
- editable,
186
- setState,
187
- className,
188
- setAttributes
189
- } = props;
190
-
191
- const {
192
- url,
193
- title,
194
- name,
195
- nameTwo,
196
- nameThree,
197
- des,
198
- desTwo,
199
- desThree,
200
- position,
201
- positionTwo,
202
- positionThree,
203
- href,
204
- hrefTwo,
205
- hrefThree,
206
- mediaID,
207
- mediaIDTwo,
208
- mediaIDThree,
209
- mediaURL,
210
- mediaURLTwo,
211
- mediaURLThree,
212
- columns,
213
- nameColor,
214
- posColor,
215
- desColor,
216
- iconColor,
217
- shapes
218
- } = props.attributes;
219
-
220
- const column = [
221
- { value: '1', label: __( 'One Column' ) },
222
- { value: '2', label: __( 'Two Column' ) },
223
- { value: '3', label: __( 'Three Column' ) },
224
- ];
225
- const shape = [
226
- { value: 'square', label: __( 'Square' ) },
227
- { value: 'circle', label: __( 'Circle' ) },
228
- ];
229
-
230
- const onSetActiveEditable = ( newEditable ) => () => {
231
- setState( { editable: newEditable } )
232
- }
233
-
234
- return [
235
- isSelected && (
236
- <BlockControls key="controls"/>
237
- ),
238
- isSelected && (
239
- <InspectorControls key={ 'inspector' }>
240
- <SelectControl
241
- label={ __( 'Image Shape' ) }
242
- value={ shapes }
243
- options={ shape.map( ({ value, label }) => ( {
244
- value: value,
245
- label: label,
246
- } ) ) }
247
- onChange={ ( newShape ) => { setAttributes( { shapes: newShape } ) } }
248
- />
249
- <SelectControl
250
- label={ __( 'Column Number' ) }
251
- value={ columns }
252
- options={ column.map( ({ value, label }) => ( {
253
- value: value,
254
- label: label,
255
- } ) ) }
256
- onChange={ ( newColumns ) => { setAttributes( { columns: newColumns } ) } }
257
- />
258
- <PanelColor
259
- title={ __( 'Name Color' ) }
260
- colorValue={ nameColor }
261
- initialOpen={ false }
262
- >
263
- <ColorPalette
264
- value={ nameColor }
265
- onChange={ ( colorValue ) => setAttributes( { nameColor: colorValue } ) }
266
- />
267
- </PanelColor>
268
- <PanelColor
269
- title={ __( 'Position Color' ) }
270
- colorValue={ posColor }
271
- initialOpen={ false }
272
- >
273
- <ColorPalette
274
- value={ posColor }
275
- onChange={ ( colorValue ) => setAttributes( { posColor: colorValue } ) }
276
- />
277
- </PanelColor>
278
- <PanelColor
279
- title={ __( 'Description Color' ) }
280
- colorValue={ desColor }
281
- initialOpen={ false }
282
- >
283
- <ColorPalette
284
- value={ desColor }
285
- onChange={ ( colorValue ) => setAttributes( { desColor: colorValue } ) }
286
- />
287
- </PanelColor>
288
- <PanelColor
289
- title={ __( 'Icon Color' ) }
290
- colorValue={ iconColor }
291
- initialOpen={ false }
292
- >
293
- <ColorPalette
294
- value={ iconColor }
295
- onChange={ ( colorValue ) => setAttributes( { iconColor: colorValue } ) }
296
- />
297
- </PanelColor>
298
- </InspectorControls>
299
- ),
300
- <div key={'editable'} className={ `ugb-team-member column-${columns} image-${ shapes }` }>
301
- <div className={ 'ugb-team-member-column-one' }>
302
- <div>
303
- <MediaUpload
304
- onSelect={ ( media ) => setAttributes( { mediaURL: media.url, mediaID: media.id } ) }
305
- type={'image'}
306
- value={mediaID}
307
- render={ function( obj ) {
308
- return <Button
309
- className={ mediaID ? '' : 'button button-large' }
310
- onClick={ obj.open } >
311
- {
312
- mediaID ? <div className="team-member-image" style={{ backgroundImage: `url(${mediaURL})` }}></div> : __( 'Upload Image' )
313
- }
314
- </Button>
315
- } }
316
- />
317
- </div>
318
- <RichText
319
- tagName={ 'h4' }
320
- value={ name }
321
- onChange={ (text) => setAttributes( { name: text } ) }
322
- isSelected={ isSelected && editable === 'name' }
323
- onFocus={ onSetActiveEditable( 'name' ) }
324
- placeholder={ name.default }
325
- style={ {
326
- color: nameColor
327
- } }
328
- keepPlaceholderOnFocus
329
- />
330
- <RichText
331
- tagName={'p'}
332
- value={ position }
333
- className={ 'ugb-team-member-position' }
334
- onChange={ (text) => setAttributes( { position: text } ) }
335
- isSelected={ isSelected && editable === 'position' }
336
- onFocus={ onSetActiveEditable( 'position' ) }
337
- placeholder={ position.default }
338
- style={ {
339
- color: posColor
340
- } }
341
- keepPlaceholderOnFocus
342
- />
343
- <RichText
344
- tagName={'p'}
345
- value={ des }
346
- className={ 'ugb-team-member-des' }
347
- onChange={ (text) => setAttributes( { des: text } ) }
348
- isSelected={ isSelected && editable === 'des' }
349
- onFocus={ onSetActiveEditable( 'des' ) }
350
- placeholder={ des.default }
351
- style={ {
352
- color: desColor
353
- } }
354
- keepPlaceholderOnFocus
355
- />
356
- </div>
357
- <div className={ 'ugb-team-member-column-two' }>
358
- <div>
359
- <MediaUpload
360
- onSelect={ ( media ) => setAttributes( { mediaURLTwo: media.url, mediaIDTwo: media.id } ) }
361
- type={'image'}
362
- value={ mediaIDTwo }
363
- render={ function( obj ) {
364
- return <Button
365
- className={ mediaIDTwo ? '' : 'button button-large' }
366
- onClick={ obj.open } >
367
- {
368
- mediaIDTwo ? <div className="team-member-image" style={{ backgroundImage: `url(${mediaURLTwo})` }}></div> : __( 'Upload Image' )
369
- }
370
- </Button>
371
- } }
372
- />
373
- </div>
374
- <RichText
375
- tagName={ 'h4' }
376
- value={ nameTwo }
377
- onChange={ (text) => setAttributes( { nameTwo: text } ) }
378
- isSelected={ isSelected && editable === 'nameTwo' }
379
- onFocus={ onSetActiveEditable( 'nameTwo' ) }
380
- placeholder={ nameTwo.default }
381
- style={ {
382
- color: nameColor
383
- } }
384
- keepPlaceholderOnFocus
385
- />
386
- <RichText
387
- tagName={'p'}
388
- value={ positionTwo }
389
- className={ 'ugb-team-member-position' }
390
- onChange={ (text) => setAttributes( { positionTwo: text } ) }
391
- isSelected={ isSelected && editable === 'positionTwo' }
392
- onFocus={ onSetActiveEditable( 'positionTwo' ) }
393
- placeholder={ positionTwo.default }
394
- style={ {
395
- color: posColor
396
- } }
397
- keepPlaceholderOnFocus
398
- />
399
- <RichText
400
- tagName={'p'}
401
- value={ desTwo }
402
- className={ 'ugb-team-member-des-two' }
403
- onChange={ (text) => setAttributes( { desTwo: text } ) }
404
- isSelected={ isSelected && editable === 'desTwo' }
405
- onFocus={ onSetActiveEditable( 'desTwo' ) }
406
- placeholder={ desTwo.default }
407
- style={ {
408
- color: desColor
409
- } }
410
- keepPlaceholderOnFocus
411
- />
412
- </div>
413
- <div className={ 'ugb-team-member-column-three' }>
414
- <div>
415
- <MediaUpload
416
- onSelect={ ( media ) => setAttributes( { mediaURLThree: media.url, mediaIDThree: media.id } ) }
417
- type={'image'}
418
- value={ mediaIDThree }
419
- render={ function( obj ) {
420
- return <Button
421
- className={ mediaIDThree ? '' : 'button button-large' }
422
- onClick={ obj.open } >
423
- {
424
- mediaIDThree ? <div className="team-member-image" style={{ backgroundImage: `url(${mediaURLThree})` }}></div> : __( 'Upload Image' )
425
- }
426
- </Button>
427
- } }
428
- />
429
- </div>
430
- <RichText
431
- tagName={ 'h4' }
432
- value={ nameThree }
433
- onChange={ (text) => setAttributes( { nameThree: text } ) }
434
- isSelected={ isSelected && editable === 'nameThree' }
435
- onFocus={ onSetActiveEditable( 'nameThree' ) }
436
- placeholder={ nameThree.default }
437
- style={ {
438
- color: nameColor
439
- } }
440
- keepPlaceholderOnFocus
441
- />
442
- <RichText
443
- tagName={'p'}
444
- value={ positionThree }
445
- className={ 'ugb-team-member-position' }
446
- onChange={ (text) => setAttributes( { positionThree: text } ) }
447
- isSelected={ isSelected && editable === 'positionThree' }
448
- onFocus={ onSetActiveEditable( 'positionThree' ) }
449
- placeholder={ positionThree.default }
450
- style={ {
451
- color: posColor
452
- } }
453
- keepPlaceholderOnFocus
454
- />
455
- <RichText
456
- tagName={'p'}
457
- value={ desThree }
458
- className={ 'ugb-team-member-des-three' }
459
- onChange={ (text) => setAttributes( { desThree: text } ) }
460
- isSelected={ isSelected && editable === 'desThree' }
461
- onFocus={ onSetActiveEditable( 'desThree' ) }
462
- placeholder={ desThree.default }
463
- style={ {
464
- color: desColor
465
- } }
466
- keepPlaceholderOnFocus
467
- />
468
- </div>
469
- </div>
470
- ];
471
- } ),
472
 
473
  // The "save" property must be specified and must be a valid function.
474
- save: function( props ) {
475
- const {
476
- url,
477
- title,
478
- name,
479
- nameTwo,
480
- nameThree,
481
- shapes,
482
- des,
483
- desTwo,
484
- desThree,
485
- position,
486
- positionTwo,
487
- positionThree,
488
- mediaURL,
489
- mediaURLTwo,
490
- mediaURLThree,
491
- mediaID,
492
- mediaIDTwo,
493
- mediaIDThree,
494
- nameColor,
495
- posColor,
496
- desColor,
497
- iconColor,
498
- columns
499
- } = props.attributes;
500
-
501
- return (
502
- <div className={ `ugb-team-member column-${columns} image-${ shapes }` }>
503
- <div className={ 'ugb-team-member-column-one' }>
504
- { mediaURL && <div className="team-member-image" style={{ backgroundImage: `url(${mediaURL})` }} data-src={mediaURL}></div> }
505
- { name && !! name.length && (
506
- <h4 style={ { color: nameColor } }>
507
- { name }
508
- </h4>
509
- ) }
510
- { position && !! position.length && (
511
- <p className={ 'ugb-team-member-position' } style={ { color: posColor } }>
512
- { position }
513
- </p>
514
- ) }
515
- { des && !! des.length && (
516
- <p className={ 'ugb-team-member-des' } style={ { color: desColor } }>
517
- { des }
518
- </p>
519
- ) }
520
- </div>
521
- { columns > 1 && (
522
- <div className={ 'ugb-team-member-column-two' }>
523
- { mediaURLTwo && <div className="team-member-image" style={{ backgroundImage: `url(${mediaURLTwo})` }} data-src={mediaURLTwo}></div> }
524
- { nameTwo && !! nameTwo.length && (
525
- <h4 style={ { color: nameColor } }>
526
- { nameTwo }
527
- </h4>
528
- ) }
529
- { positionTwo && !! positionTwo.length && (
530
- <p className={ 'ugb-team-member-position' } style={ { color: posColor } }>
531
- { positionTwo }
532
- </p>
533
- ) }
534
- { desTwo && !! desTwo.length && (
535
- <p className={ 'ugb-team-member-des-two' } style={ { color: desColor } }>
536
- { desTwo }
537
- </p>
538
- ) }
539
- </div>
540
- ) }
541
- { columns > 2 && (
542
- <div className={ 'ugb-team-member-column-three' }>
543
- { mediaURLThree && <div className="team-member-image" style={{ backgroundImage: `url(${mediaURLThree})` }} data-src={mediaURLThree}></div> }
544
- { nameThree && !! nameThree.length && (
545
- <h4 style={ { color: nameColor } }>
546
- { nameThree }
547
- </h4>
548
- ) }
549
- { positionThree && !! positionThree.length && (
550
- <p className={ 'ugb-team-member-position' } style={ { color: posColor } }>
551
- { positionThree }
552
- </p>
553
- ) }
554
- { desThree && !! desThree.length && (
555
- <p className={ 'ugb-team-member-des-three' } style={ { color: desColor } }>
556
- { desThree }
557
- </p>
558
- ) }
559
- </div>
560
- ) }
561
- </div>
562
- );
563
- },
564
  } );
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
11
+ import { TeamMemberIcon } from '../../icons'
12
+
13
 
14
  const { __ } = wp.i18n; // Import __() from wp.i18n
15
+
16
  const {
17
  PanelColor,
18
  Button,
31
  AlignmentToolbar
32
  } = wp.blocks;
33
 
34
+
35
+ export const edit = ( props ) => {
36
+
37
+ const {
38
+ isSelected,
39
+ editable,
40
+ setState,
41
+ className,
42
+ setAttributes
43
+ } = props;
44
+
45
+ const {
46
+ name,
47
+ nameTwo,
48
+ nameThree,
49
+ des,
50
+ desTwo,
51
+ desThree,
52
+ position,
53
+ positionTwo,
54
+ positionThree,
55
+ href,
56
+ hrefTwo,
57
+ hrefThree,
58
+ mediaID,
59
+ mediaIDTwo,
60
+ mediaIDThree,
61
+ mediaURL,
62
+ mediaURLTwo,
63
+ mediaURLThree,
64
+ columns,
65
+ nameColor,
66
+ posColor,
67
+ desColor,
68
+ iconColor,
69
+ shapes
70
+ } = props.attributes;
71
+
72
+ const column = [
73
+ { value: '1', label: __( 'One Column' ) },
74
+ { value: '2', label: __( 'Two Column' ) },
75
+ { value: '3', label: __( 'Three Column' ) },
76
+ ];
77
+ const shape = [
78
+ { value: 'square', label: __( 'Square' ) },
79
+ { value: 'circle', label: __( 'Circle' ) },
80
+ ];
81
+
82
+ const onSetActiveEditable = ( newEditable ) => () => {
83
+ setState( { editable: newEditable } )
84
+ }
85
+
86
+ return [
87
+ isSelected && (
88
+ <BlockControls key="controls"/>
89
+ ),
90
+ isSelected && (
91
+ <InspectorControls key={ 'inspector' }>
92
+ <SelectControl
93
+ label={ __( 'Image Shape' ) }
94
+ value={ shapes }
95
+ options={ shape.map( ({ value, label }) => ( {
96
+ value: value,
97
+ label: label,
98
+ } ) ) }
99
+ onChange={ ( newShape ) => { setAttributes( { shapes: newShape } ) } }
100
+ />
101
+ <SelectControl
102
+ label={ __( 'Column Number' ) }
103
+ value={ columns }
104
+ options={ column.map( ({ value, label }) => ( {
105
+ value: value,
106
+ label: label,
107
+ } ) ) }
108
+ onChange={ ( newColumns ) => { setAttributes( { columns: newColumns } ) } }
109
+ />
110
+ <PanelColor
111
+ title={ __( 'Name Color' ) }
112
+ colorValue={ nameColor }
113
+ initialOpen={ false }
114
+ >
115
+ <ColorPalette
116
+ value={ nameColor }
117
+ onChange={ ( colorValue ) => setAttributes( { nameColor: colorValue } ) }
118
+ />
119
+ </PanelColor>
120
+ <PanelColor
121
+ title={ __( 'Position Color' ) }
122
+ colorValue={ posColor }
123
+ initialOpen={ false }
124
+ >
125
+ <ColorPalette
126
+ value={ posColor }
127
+ onChange={ ( colorValue ) => setAttributes( { posColor: colorValue } ) }
128
+ />
129
+ </PanelColor>
130
+ <PanelColor
131
+ title={ __( 'Description Color' ) }
132
+ colorValue={ desColor }
133
+ initialOpen={ false }
134
+ >
135
+ <ColorPalette
136
+ value={ desColor }
137
+ onChange={ ( colorValue ) => setAttributes( { desColor: colorValue } ) }
138
+ />
139
+ </PanelColor>
140
+ <PanelColor
141
+ title={ __( 'Icon Color' ) }
142
+ colorValue={ iconColor }
143
+ initialOpen={ false }
144
+ >
145
+ <ColorPalette
146
+ value={ iconColor }
147
+ onChange={ ( colorValue ) => setAttributes( { iconColor: colorValue } ) }
148
+ />
149
+ </PanelColor>
150
+ </InspectorControls>
151
+ ),
152
+ <div key={'editable'} className={ `ugb-team-member column-${columns} image-${ shapes }` }>
153
+ <div className={ 'ugb-team-member-column-one' }>
154
+ <div>
155
+ <MediaUpload
156
+ onSelect={ ( media ) => setAttributes( { mediaURL: media.url, mediaID: media.id } ) }
157
+ type={'image'}
158
+ value={mediaID}
159
+ render={ function( obj ) {
160
+ return <Button
161
+ className={ mediaID ? '' : 'button button-large' }
162
+ onClick={ obj.open } >
163
+ {
164
+ mediaID ? <div className="team-member-image" style={{ backgroundImage: `url(${mediaURL})` }}></div> : __( 'Upload Image' )
165
+ }
166
+ </Button>
167
+ } }
168
+ />
169
+ </div>
170
+ <RichText
171
+ tagName={ 'h4' }
172
+ value={ name }
173
+ onChange={ (text) => setAttributes( { name: text } ) }
174
+ isSelected={ isSelected && editable === 'name' }
175
+ onFocus={ onSetActiveEditable( 'name' ) }
176
+ // placeholder={ name.default }
177
+ style={ {
178
+ color: nameColor
179
+ } }
180
+ keepPlaceholderOnFocus
181
+ />
182
+ <RichText
183
+ tagName={'p'}
184
+ value={ position }
185
+ className={ 'ugb-team-member-position' }
186
+ onChange={ (text) => setAttributes( { position: text } ) }
187
+ isSelected={ isSelected && editable === 'position' }
188
+ onFocus={ onSetActiveEditable( 'position' ) }
189
+ // placeholder={ position.default }
190
+ style={ {
191
+ color: posColor
192
+ } }
193
+ keepPlaceholderOnFocus
194
+ />
195
+ <RichText
196
+ tagName={'p'}
197
+ value={ des }
198
+ className={ 'ugb-team-member-des' }
199
+ onChange={ (text) => setAttributes( { des: text } ) }
200
+ isSelected={ isSelected && editable === 'des' }
201
+ onFocus={ onSetActiveEditable( 'des' ) }
202
+ // placeholder={ des.default }
203
+ style={ {
204
+ color: desColor
205
+ } }
206
+ keepPlaceholderOnFocus
207
+ />
208
+ </div>
209
+ <div className={ 'ugb-team-member-column-two' }>
210
+ <div>
211
+ <MediaUpload
212
+ onSelect={ ( media ) => setAttributes( { mediaURLTwo: media.url, mediaIDTwo: media.id } ) }
213
+ type={'image'}
214
+ value={ mediaIDTwo }
215
+ render={ function( obj ) {
216
+ return <Button
217
+ className={ mediaIDTwo ? '' : 'button button-large' }
218
+ onClick={ obj.open } >
219
+ {
220
+ mediaIDTwo ? <div className="team-member-image" style={{ backgroundImage: `url(${mediaURLTwo})` }}></div> : __( 'Upload Image' )
221
+ }
222
+ </Button>
223
+ } }
224
+ />
225
+ </div>
226
+ <RichText
227
+ tagName={ 'h4' }
228
+ value={ nameTwo }
229
+ onChange={ (text) => setAttributes( { nameTwo: text } ) }
230
+ isSelected={ isSelected && editable === 'nameTwo' }
231
+ onFocus={ onSetActiveEditable( 'nameTwo' ) }
232
+ // placeholder={ nameTwo.default }
233
+ style={ {
234
+ color: nameColor
235
+ } }
236
+ keepPlaceholderOnFocus
237
+ />
238
+ <RichText
239
+ tagName={'p'}
240
+ value={ positionTwo }
241
+ className={ 'ugb-team-member-position' }
242
+ onChange={ (text) => setAttributes( { positionTwo: text } ) }
243
+ isSelected={ isSelected && editable === 'positionTwo' }
244
+ onFocus={ onSetActiveEditable( 'positionTwo' ) }
245
+ // placeholder={ positionTwo.default }
246
+ style={ {
247
+ color: posColor
248
+ } }
249
+ keepPlaceholderOnFocus
250
+ />
251
+ <RichText
252
+ tagName={'p'}
253
+ value={ desTwo }
254
+ className={ 'ugb-team-member-des-two' }
255
+ onChange={ (text) => setAttributes( { desTwo: text } ) }
256
+ isSelected={ isSelected && editable === 'desTwo' }
257
+ onFocus={ onSetActiveEditable( 'desTwo' ) }
258
+ // placeholder={ desTwo.default }
259
+ style={ {
260
+ color: desColor
261
+ } }
262
+ keepPlaceholderOnFocus
263
+ />
264
+ </div>
265
+ <div className={ 'ugb-team-member-column-three' }>
266
+ <div>
267
+ <MediaUpload
268
+ onSelect={ ( media ) => setAttributes( { mediaURLThree: media.url, mediaIDThree: media.id } ) }
269
+ type={'image'}
270
+ value={ mediaIDThree }
271
+ render={ function( obj ) {
272
+ return <Button
273
+ className={ mediaIDThree ? '' : 'button button-large' }
274
+ onClick={ obj.open } >
275
+ {
276
+ mediaIDThree ? <div className="team-member-image" style={{ backgroundImage: `url(${mediaURLThree})` }}></div> : __( 'Upload Image' )
277
+ }
278
+ </Button>
279
+ } }
280
+ />
281
+ </div>
282
+ <RichText
283
+ tagName={ 'h4' }
284
+ value={ nameThree }
285
+ onChange={ (text) => setAttributes( { nameThree: text } ) }
286
+ isSelected={ isSelected && editable === 'nameThree' }
287
+ onFocus={ onSetActiveEditable( 'nameThree' ) }
288
+ // placeholder={ nameThree.default }
289
+ style={ {
290
+ color: nameColor
291
+ } }
292
+ keepPlaceholderOnFocus
293
+ />
294
+ <RichText
295
+ tagName={'p'}
296
+ value={ positionThree }
297
+ className={ 'ugb-team-member-position' }
298
+ onChange={ (text) => setAttributes( { positionThree: text } ) }
299
+ isSelected={ isSelected && editable === 'positionThree' }
300
+ onFocus={ onSetActiveEditable( 'positionThree' ) }
301
+ // placeholder={ positionThree.default }
302
+ style={ {
303
+ color: posColor
304
+ } }
305
+ keepPlaceholderOnFocus
306
+ />
307
+ <RichText
308
+ tagName={'p'}
309
+ value={ desThree }
310
+ className={ 'ugb-team-member-des-three' }
311
+ onChange={ (text) => setAttributes( { desThree: text } ) }
312
+ isSelected={ isSelected && editable === 'desThree' }
313
+ onFocus={ onSetActiveEditable( 'desThree' ) }
314
+ // placeholder={ desThree.default }
315
+ style={ {
316
+ color: desColor
317
+ } }
318
+ keepPlaceholderOnFocus
319
+ />
320
+ </div>
321
+ </div>
322
+ ];
323
+ }
324
+
325
+ export const save = ( props ) => {
326
+
327
+ const {
328
+ name,
329
+ nameTwo,
330
+ nameThree,
331
+ shapes,
332
+ des,
333
+ desTwo,
334
+ desThree,
335
+ position,
336
+ positionTwo,
337
+ positionThree,
338
+ mediaURL,
339
+ mediaURLTwo,
340
+ mediaURLThree,
341
+ mediaID,
342
+ mediaIDTwo,
343
+ mediaIDThree,
344
+ nameColor,
345
+ posColor,
346
+ desColor,
347
+ iconColor,
348
+ columns
349
+ } = props.attributes;
350
+
351
+ return (
352
+ <div className={ `ugb-team-member column-${columns} image-${ shapes }` }>
353
+ <div className={ 'ugb-team-member-column-one' }>
354
+ { mediaURL && <div className="team-member-image" style={{ backgroundImage: `url(${mediaURL})` }} data-src={mediaURL}></div> }
355
+ { name && !! name.length && (
356
+ <h4 style={ { color: nameColor } }>
357
+ { name }
358
+ </h4>
359
+ ) }
360
+ { position && !! position.length && (
361
+ <p className={ 'ugb-team-member-position' } style={ { color: posColor } }>
362
+ { position }
363
+ </p>
364
+ ) }
365
+ { des && !! des.length && (
366
+ <p className={ 'ugb-team-member-des' } style={ { color: desColor } }>
367
+ { des }
368
+ </p>
369
+ ) }
370
+ </div>
371
+ { columns > 1 && (
372
+ <div className={ 'ugb-team-member-column-two' }>
373
+ { mediaURLTwo && <div className="team-member-image" style={{ backgroundImage: `url(${mediaURLTwo})` }} data-src={mediaURLTwo}></div> }
374
+ { nameTwo && !! nameTwo.length && (
375
+ <h4 style={ { color: nameColor } }>
376
+ { nameTwo }
377
+ </h4>
378
+ ) }
379
+ { positionTwo && !! positionTwo.length && (
380
+ <p className={ 'ugb-team-member-position' } style={ { color: posColor } }>
381
+ { positionTwo }
382
+ </p>
383
+ ) }
384
+ { desTwo && !! desTwo.length && (
385
+ <p className={ 'ugb-team-member-des-two' } style={ { color: desColor } }>
386
+ { desTwo }
387
+ </p>
388
+ ) }
389
+ </div>
390
+ ) }
391
+ { columns > 2 && (
392
+ <div className={ 'ugb-team-member-column-three' }>
393
+ { mediaURLThree && <div className="team-member-image" style={{ backgroundImage: `url(${mediaURLThree})` }} data-src={mediaURLThree}></div> }
394
+ { nameThree && !! nameThree.length && (
395
+ <h4 style={ { color: nameColor } }>
396
+ { nameThree }
397
+ </h4>
398
+ ) }
399
+ { positionThree && !! positionThree.length && (
400
+ <p className={ 'ugb-team-member-position' } style={ { color: posColor } }>
401
+ { positionThree }
402
+ </p>
403
+ ) }
404
+ { desThree && !! desThree.length && (
405
+ <p className={ 'ugb-team-member-des-three' } style={ { color: desColor } }>
406
+ { desThree }
407
+ </p>
408
+ ) }
409
+ </div>
410
+ ) }
411
+ </div>
412
+ );
413
+ }
414
+
415
 
416
  /**
417
  * Register: Gutenberg Block.
435
  __( 'Stackable' ),
436
  ],
437
  attributes: {
 
 
 
 
 
 
 
 
 
 
 
 
438
  href: {
439
  type: 'url',
440
  },
548
  },
549
 
550
  // The "edit" property must be a valid function.
551
+ edit: withState( { editable: 'content', } )( edit ),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
552
 
553
  // The "save" property must be specified and must be a valid function.
554
+ save: save,
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
555
  } );
src/block/testimonial/index.js CHANGED
@@ -8,10 +8,11 @@
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
 
 
11
 
12
  const { __ } = wp.i18n; // Import __() from wp.i18n
13
- const { Component } = wp.element
14
- const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
15
  const {
16
  PanelColor,
17
  Button,
@@ -20,6 +21,7 @@ const {
20
  } = wp.components;
21
 
22
  const {
 
23
  InspectorControls,
24
  RichText,
25
  ColorPalette,
@@ -28,7 +30,373 @@ const {
28
  AlignmentToolbar
29
  } = wp.blocks;
30
 
31
- import { TestimonialIcon } from '../../icons'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
32
 
33
  /**
34
  * Register: Gutenberg Block.
@@ -52,18 +420,6 @@ registerBlockType( 'ugb/testimonial', {
52
  __( 'Stackable' ),
53
  ],
54
  attributes: {
55
- title: {
56
- type: 'string',
57
- source: 'attribute',
58
- selector: 'a',
59
- attribute: 'title',
60
- },
61
- url: {
62
- type: 'string',
63
- source: 'attribute',
64
- selector: 'a',
65
- attribute: 'href',
66
- },
67
  href: {
68
  type: 'url',
69
  },
@@ -173,383 +529,8 @@ registerBlockType( 'ugb/testimonial', {
173
  },
174
 
175
  // The "edit" property must be a valid function.
176
- edit: withState( { editable: 'content', } )( ( props ) => {
177
-
178
- const {
179
- isSelected,
180
- editable,
181
- setState,
182
- className,
183
- setAttributes
184
- } = props;
185
-
186
- const {
187
- url,
188
- title,
189
- testimonialTitle,
190
- testimonialTitleTwo,
191
- testimonialTitleThree,
192
- body,
193
- bodyTwo,
194
- bodyThree,
195
- position,
196
- positionTwo,
197
- positionThree,
198
- href,
199
- hrefTwo,
200
- hrefThree,
201
- mediaID,
202
- mediaIDTwo,
203
- mediaIDThree,
204
- mediaURL,
205
- mediaURLTwo,
206
- mediaURLThree,
207
- columns,
208
- titleColor,
209
- posColor,
210
- bodyTextColor,
211
- iconColor
212
- } = props.attributes;
213
-
214
- const column = [
215
- { value: '1', label: __( 'One Column' ) },
216
- { value: '2', label: __( 'Two Column' ) },
217
- { value: '3', label: __( 'Three Column' ) },
218
- ];
219
-
220
- const onSetActiveEditable = ( newEditable ) => () => {
221
- setState( { editable: newEditable } )
222
- }
223
-
224
- return [
225
- isSelected && (
226
- <BlockControls/>
227
- ),
228
- isSelected && (
229
- <InspectorControls key={ 'inspector' }>
230
- <SelectControl
231
- label={ __( 'Column Number' ) }
232
- value={ columns }
233
- options={ column.map( ({ value, label }) => ( {
234
- value: value,
235
- label: label,
236
- } ) ) }
237
- onChange={ ( newColumns ) => { setAttributes( { columns: newColumns } ) } }
238
- />
239
- <PanelColor
240
- title={ __( 'Title Color' ) }
241
- colorValue={ titleColor }
242
- initialOpen={ false }
243
- >
244
- <ColorPalette
245
- value={ titleColor }
246
- onChange={ ( colorValue ) => setAttributes( { titleColor: colorValue } ) }
247
- />
248
- </PanelColor>
249
- <PanelColor
250
- title={ __( 'Position Color' ) }
251
- colorValue={ posColor }
252
- initialOpen={ false }
253
- >
254
- <ColorPalette
255
- value={ posColor }
256
- onChange={ ( colorValue ) => setAttributes( { posColor: colorValue } ) }
257
- />
258
- </PanelColor>
259
- <PanelColor
260
- title={ __( 'Body Text Color' ) }
261
- colorValue={ bodyTextColor }
262
- initialOpen={ false }
263
- >
264
- <ColorPalette
265
- value={ bodyTextColor }
266
- onChange={ ( colorValue ) => setAttributes( { bodyTextColor: colorValue } ) }
267
- />
268
- </PanelColor>
269
- <PanelColor
270
- title={ __( 'Icon Color' ) }
271
- colorValue={ iconColor }
272
- initialOpen={ false }
273
- >
274
- <ColorPalette
275
- value={ iconColor }
276
- onChange={ ( colorValue ) => setAttributes( { iconColor: colorValue } ) }
277
- />
278
- </PanelColor>
279
- </InspectorControls>
280
- ),
281
- <div key={'editable'} className={ `ugb-testimonial column-${columns}` }>
282
- <div className={ 'ugb-testimonial-column-one' }>
283
- <div>
284
- <MediaUpload
285
- onSelect={ ( media ) => setAttributes( { mediaURL: media.url, mediaID: media.id } ) }
286
- type={'image'}
287
- value={mediaID}
288
- render={ function( obj ) {
289
- return <Button
290
- className={ mediaID ? '' : 'button button-large' }
291
- onClick={ obj.open } >
292
- {
293
- mediaID ? <div className="testimonial-image" style={{ backgroundImage: `url(${mediaURL})` }}></div> : __( 'Upload Image' )
294
- }
295
- </Button>
296
- } }
297
- />
298
- </div>
299
- <RichText
300
- tagName={ 'h4' }
301
- placeholder={ __('Add title…') }
302
- value={ testimonialTitle }
303
- onChange={ (text) => setAttributes( { testimonialTitle: text } ) }
304
- isSelected={ isSelected && editable === 'testimonialTitle' }
305
- onFocus={ onSetActiveEditable( 'testimonialTitle' ) }
306
- style={ {
307
- color: titleColor
308
- } }
309
- keepPlaceholderOnFocus
310
- />
311
- <RichText
312
- tagName={'p'}
313
- value={ position }
314
- className={ 'ugb-testimonial-position' }
315
- onChange={ (text) => setAttributes( { position: text } ) }
316
- isSelected={ isSelected && editable === 'position' }
317
- onFocus={ onSetActiveEditable( 'position' ) }
318
- placeholder={ __( 'Add position…' ) }
319
- style={ {
320
- color: posColor
321
- } }
322
- keepPlaceholderOnFocus
323
- />
324
- <RichText
325
- tagName={'p'}
326
- value={ body }
327
- className={ 'ugb-testimonial-body' }
328
- onChange={ (text) => setAttributes( { body: text } ) }
329
- isSelected={ isSelected && editable === 'body' }
330
- onFocus={ onSetActiveEditable( 'body' ) }
331
- placeholder={ __( 'Add body…' ) }
332
- style={ {
333
- color: bodyTextColor
334
- } }
335
- keepPlaceholderOnFocus
336
- />
337
- </div>
338
- <div className={ 'ugb-testimonial-column-two' }>
339
- <div>
340
- <MediaUpload
341
- onSelect={ ( media ) => setAttributes( { mediaURLTwo: media.url, mediaIDTwo: media.id } ) }
342
- type={'image'}
343
- value={ mediaIDTwo }
344
- render={ function( obj ) {
345
- return <Button
346
- className={ mediaIDTwo ? '' : 'button button-large' }
347
- onClick={ obj.open } >
348
- {
349
- mediaIDTwo ? <div className="testimonial-image" style={{ backgroundImage: `url(${mediaURLTwo})` }}></div> : __( 'Upload Image' )
350
- }
351
- </Button>
352
- } }
353
- />
354
- </div>
355
- <RichText
356
- tagName={ 'h4' }
357
- placeholder={ __('Add title…') }
358
- value={ testimonialTitleTwo }
359
- onChange={ (text) => setAttributes( { testimonialTitleTwo: text } ) }
360
- isSelected={ isSelected && editable === 'testimonialTitleTwo' }
361
- onFocus={ onSetActiveEditable( 'testimonialTitleTwo' ) }
362
- // onFocus={ ( props ) => setFocus( { ...props, editable: 'testimonialTitleTwo' } ) }
363
- style={ {
364
- color: titleColor
365
- } }
366
- keepPlaceholderOnFocus
367
- />
368
- <RichText
369
- tagName={'p'}
370
- value={ positionTwo }
371
- className={ 'ugb-testimonial-position-two' }
372
- onChange={ (text) => setAttributes( { positionTwo: text } ) }
373
- isSelected={ isSelected && editable === 'positionTwo' }
374
- onFocus={ onSetActiveEditable( 'positionTwo' ) }
375
- placeholder={ __( 'Add position…' ) }
376
- style={ {
377
- color: posColor
378
- } }
379
- keepPlaceholderOnFocus
380
- />
381
- <RichText
382
- tagName={'p'}
383
- value={ bodyTwo }
384
- className={ 'ugb-testimonial-body-two' }
385
- onChange={ (text) => setAttributes( { bodyTwo: text } ) }
386
- isSelected={ isSelected && editable === 'bodyTwo' }
387
- onFocus={ onSetActiveEditable( 'bodyTwo' ) }
388
- placeholder={ __( 'Add body…' ) }
389
- style={ {
390
- color: bodyTextColor
391
- } }
392
- keepPlaceholderOnFocus
393
- />
394
- </div>
395
- <div className={ 'ugb-testimonial-column-three' }>
396
- <div>
397
- <MediaUpload
398
- onSelect={ ( media ) => setAttributes( { mediaURLThree: media.url, mediaIDThree: media.id } ) }
399
- type={'image'}
400
- value={ mediaIDThree }
401
- render={ function( obj ) {
402
- return <Button
403
- className={ mediaIDThree ? '' : 'button button-large' }
404
- onClick={ obj.open } >
405
- {
406
- mediaIDThree ? <div className="testimonial-image" style={{ backgroundImage: `url(${mediaURLThree})` }}></div> : __( 'Upload Image' )
407
- }
408
- </Button>
409
- } }
410
- />
411
- </div>
412
- <RichText
413
- tagName={ 'h4' }
414
- placeholder={ __('Add title…') }
415
- value={ testimonialTitleThree }
416
- onChange={ (text) => setAttributes( { testimonialTitleThree: text } ) }
417
- isSelected={ isSelected && editable === 'testimonialTitleThree' }
418
- onFocus={ onSetActiveEditable( 'testimonialTitleThree' ) }
419
- style={ {
420
- color: titleColor
421
- } }
422
- keepPlaceholderOnFocus
423
- />
424
- <RichText
425
- tagName={'p'}
426
- value={ positionThree }
427
- className={ 'ugb-testimonial-position-three' }
428
- onChange={ (text) => setAttributes( { positionThree: text } ) }
429
- isSelected={ isSelected && editable === 'positionThree' }
430
- onFocus={ onSetActiveEditable( 'positionThree' ) }
431
- placeholder={ __( 'Add position…' ) }
432
- style={ {
433
- color: posColor
434
- } }
435
- keepPlaceholderOnFocus
436
- />
437
- <RichText
438
- tagName={'p'}
439
- value={ bodyThree }
440
- className={ 'ugb-testimonial-body-three' }
441
- onChange={ (text) => setAttributes( { bodyThree: text } ) }
442
- isSelected={ isSelected && editable === 'bodyThree' }
443
- onFocus={ onSetActiveEditable( 'bodyThree' ) }
444
- placeholder={ __( 'Add body…' ) }
445
- style={ {
446
- color: bodyTextColor
447
- } }
448
- keepPlaceholderOnFocus
449
- />
450
- </div>
451
- </div>
452
- ];
453
- } ),
454
 
455
  // The "save" property must be specified and must be a valid function.
456
- save: function( props ) {
457
- const {
458
- url,
459
- title,
460
- testimonialTitle,
461
- testimonialTitleTwo,
462
- testimonialTitleThree,
463
- body,
464
- bodyTwo,
465
- bodyThree,
466
- position,
467
- positionTwo,
468
- positionThree,
469
- mediaURL,
470
- mediaURLTwo,
471
- mediaURLThree,
472
- mediaID,
473
- mediaIDTwo,
474
- mediaIDThree,
475
- titleColor,
476
- posColor,
477
- bodyTextColor,
478
- iconColor,
479
- columns
480
- } = props.attributes;
481
-
482
- const tesitimonialIcon = (
483
- <div key='button' className={ 'quote-icon' }>
484
- <svg viewBox="0 0 246 187.5" style={ { fill: iconColor } }>
485
- <path d="M98.5,0h-93C2.5,0,0,2.5,0,5.5v93c0,3,2.5,5.5,5.5,5.5h39c-1.7,15.5-8.8,50-39,50c-3,0-5.5,2.5-5.5,5.5V182c0,3,2.5,5.5,5.5,5.5c5.2,0,98.5-4.5,98.5-89v-93C104,2.5,101.5,0,98.5,0z"/>
486
- <path d="M240.5,0h-93c-3,0-5.5,2.5-5.5,5.5v93c0,3,2.5,5.5,5.5,5.5h39c-1.7,15.5-8.8,50-39,50c-3,0-5.5,2.5-5.5,5.5V182c0,3,2.5,5.5,5.5,5.5c5.2,0,98.5-4.5,98.5-89v-93C246,2.5,243.5,0,240.5,0z"/>
487
- <path d="M161.3-86.3c3.2,0,3.2-5,0-5C158.1-91.3,158.1-86.3,161.3-86.3L161.3-86.3z"/>
488
- </svg>
489
- </div>
490
- )
491
-
492
- return (
493
- <div className={ `ugb-testimonial column-${columns}` }>
494
- <div className={ 'ugb-testimonial-column-one' }>
495
- { mediaURL ? <div className="testimonial-image" style={{ backgroundImage: `url(${mediaURL})` }} data-src={mediaURL}></div> : tesitimonialIcon }
496
- { testimonialTitle && !! testimonialTitle.length && (
497
- <h4 style={ { color: titleColor } }>
498
- { testimonialTitle }
499
- </h4>
500
- ) }
501
- { position && !! position.length && (
502
- <p className={ 'ugb-testimonial-position' } style={ { color: posColor } }>
503
- { position }
504
- </p>
505
- ) }
506
- { body && !! body.length && (
507
- <p className={ 'ugb-testimonial-body' } style={ { color: bodyTextColor } }>
508
- { body }
509
- </p>
510
- ) }
511
- </div>
512
- { columns > 1 && (
513
- <div className={ 'ugb-testimonial-column-two' }>
514
- { mediaURLTwo ? <div className="testimonial-image" style={{ backgroundImage: `url(${mediaURLTwo})` }} data-src={mediaURLTwo}></div> : tesitimonialIcon }
515
- { testimonialTitleTwo && !! testimonialTitleTwo.length && (
516
- <h4 style={ { color: titleColor } }>
517
- { testimonialTitleTwo }
518
- </h4>
519
- ) }
520
- { positionTwo && !! positionTwo.length && (
521
- <p className={ 'ugb-testimonial-position-two' } style={ { color: posColor } }>
522
- { positionTwo }
523
- </p>
524
- ) }
525
- { bodyTwo && !! bodyTwo.length && (
526
- <p className={ 'ugb-testimonial-body-two' } style={ { color: bodyTextColor } }>
527
- { bodyTwo }
528
- </p>
529
- ) }
530
- </div>
531
- ) }
532
- { columns > 2 && (
533
- <div className={ 'ugb-testimonial-column-three' }>
534
- { mediaURLThree ? <div className="testimonial-image" style={{ backgroundImage: `url(${mediaURLThree})` }} data-src={mediaURLThree}></div> : tesitimonialIcon }
535
- { testimonialTitleThree && !! testimonialTitleThree.length && (
536
- <h4 style={ { color: titleColor } }>
537
- { testimonialTitleThree }
538
- </h4>
539
- ) }
540
- { positionThree && !! positionThree.length && (
541
- <p className={ 'ugb-testimonial-position-three' } style={ { color: posColor } }>
542
- { positionThree }
543
- </p>
544
- ) }
545
- { bodyThree && !! bodyThree.length && (
546
- <p className={ 'ugb-testimonial-body-three' } style={ { color: bodyTextColor } }>
547
- { bodyThree }
548
- </p>
549
- ) }
550
- </div>
551
- ) }
552
- </div>
553
- );
554
- },
555
  } );
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
11
+ import { TestimonialIcon } from '../../icons'
12
+
13
 
14
  const { __ } = wp.i18n; // Import __() from wp.i18n
15
+
 
16
  const {
17
  PanelColor,
18
  Button,
21
  } = wp.components;
22
 
23
  const {
24
+ registerBlockType, // Import registerBlockType() from wp.blocks
25
  InspectorControls,
26
  RichText,
27
  ColorPalette,
30
  AlignmentToolbar
31
  } = wp.blocks;
32
 
33
+
34
+ export const edit = ( props ) => {
35
+
36
+ const {
37
+ isSelected,
38
+ editable,
39
+ setState,
40
+ className,
41
+ setAttributes
42
+ } = props;
43
+
44
+ const {
45
+ testimonialTitle,
46
+ testimonialTitleTwo,
47
+ testimonialTitleThree,
48
+ body,
49
+ bodyTwo,
50
+ bodyThree,
51
+ position,
52
+ positionTwo,
53
+ positionThree,
54
+ href,
55
+ hrefTwo,
56
+ hrefThree,
57
+ mediaID,
58
+ mediaIDTwo,
59
+ mediaIDThree,
60
+ mediaURL,
61
+ mediaURLTwo,
62
+ mediaURLThree,
63
+ columns,
64
+ titleColor,
65
+ posColor,
66
+ bodyTextColor,
67
+ iconColor
68
+ } = props.attributes;
69
+
70
+ const column = [
71
+ { value: '1', label: __( 'One Column' ) },
72
+ { value: '2', label: __( 'Two Column' ) },
73
+ { value: '3', label: __( 'Three Column' ) },
74
+ ];
75
+
76
+ const onSetActiveEditable = ( newEditable ) => () => {
77
+ setState( { editable: newEditable } )
78
+ }
79
+
80
+ return [
81
+ isSelected && (
82
+ <BlockControls/>
83
+ ),
84
+ isSelected && (
85
+ <InspectorControls key={ 'inspector' }>
86
+ <SelectControl
87
+ label={ __( 'Column Number' ) }
88
+ value={ columns }
89
+ options={ column.map( ({ value, label }) => ( {
90
+ value: value,
91
+ label: label,
92
+ } ) ) }
93
+ onChange={ ( newColumns ) => { setAttributes( { columns: newColumns } ) } }
94
+ />
95
+ <PanelColor
96
+ title={ __( 'Title Color' ) }
97
+ colorValue={ titleColor }
98
+ initialOpen={ false }
99
+ >
100
+ <ColorPalette
101
+ value={ titleColor }
102
+ onChange={ ( colorValue ) => setAttributes( { titleColor: colorValue } ) }
103
+ />
104
+ </PanelColor>
105
+ <PanelColor
106
+ title={ __( 'Position Color' ) }
107
+ colorValue={ posColor }
108
+ initialOpen={ false }
109
+ >
110
+ <ColorPalette
111
+ value={ posColor }
112
+ onChange={ ( colorValue ) => setAttributes( { posColor: colorValue } ) }
113
+ />
114
+ </PanelColor>
115
+ <PanelColor
116
+ title={ __( 'Body Text Color' ) }
117
+ colorValue={ bodyTextColor }
118
+ initialOpen={ false }
119
+ >
120
+ <ColorPalette
121
+ value={ bodyTextColor }
122
+ onChange={ ( colorValue ) => setAttributes( { bodyTextColor: colorValue } ) }
123
+ />
124
+ </PanelColor>
125
+ <PanelColor
126
+ title={ __( 'Icon Color' ) }
127
+ colorValue={ iconColor }
128
+ initialOpen={ false }
129
+ >
130
+ <ColorPalette
131
+ value={ iconColor }
132
+ onChange={ ( colorValue ) => setAttributes( { iconColor: colorValue } ) }
133
+ />
134
+ </PanelColor>
135
+ </InspectorControls>
136
+ ),
137
+ <div key={'editable'} className={ `ugb-testimonial column-${columns}` }>
138
+ <div className={ 'ugb-testimonial-column-one' }>
139
+ <div>
140
+ <MediaUpload
141
+ onSelect={ ( media ) => setAttributes( { mediaURL: media.url, mediaID: media.id } ) }
142
+ type={'image'}
143
+ value={mediaID}
144
+ render={ function( obj ) {
145
+ return <Button
146
+ className={ mediaID ? '' : 'button button-large' }
147
+ onClick={ obj.open } >
148
+ {
149
+ mediaID ? <div className="testimonial-image" style={{ backgroundImage: `url(${mediaURL})` }}></div> : __( 'Upload Image' )
150
+ }
151
+ </Button>
152
+ } }
153
+ />
154
+ </div>
155
+ <RichText
156
+ tagName={ 'h4' }
157
+ value={ testimonialTitle }
158
+ onChange={ (text) => setAttributes( { testimonialTitle: text } ) }
159
+ isSelected={ isSelected && editable === 'testimonialTitle' }
160
+ onFocus={ onSetActiveEditable( 'testimonialTitle' ) }
161
+ style={ {
162
+ color: titleColor
163
+ } }
164
+ keepPlaceholderOnFocus
165
+ />
166
+ <RichText
167
+ tagName={'p'}
168
+ value={ position }
169
+ className={ 'ugb-testimonial-position' }
170
+ onChange={ (text) => setAttributes( { position: text } ) }
171
+ isSelected={ isSelected && editable === 'position' }
172
+ onFocus={ onSetActiveEditable( 'position' ) }
173
+ style={ {
174
+ color: posColor
175
+ } }
176
+ keepPlaceholderOnFocus
177
+ />
178
+ <RichText
179
+ tagName={'p'}
180
+ value={ body }
181
+ className={ 'ugb-testimonial-body' }
182
+ onChange={ (text) => setAttributes( { body: text } ) }
183
+ isSelected={ isSelected && editable === 'body' }
184
+ onFocus={ onSetActiveEditable( 'body' ) }
185
+ style={ {
186
+ color: bodyTextColor
187
+ } }
188
+ keepPlaceholderOnFocus
189
+ />
190
+ </div>
191
+ <div className={ 'ugb-testimonial-column-two' }>
192
+ <div>
193
+ <MediaUpload
194
+ onSelect={ ( media ) => setAttributes( { mediaURLTwo: media.url, mediaIDTwo: media.id } ) }
195
+ type={'image'}
196
+ value={ mediaIDTwo }
197
+ render={ function( obj ) {
198
+ return <Button
199
+ className={ mediaIDTwo ? '' : 'button button-large' }
200
+ onClick={ obj.open } >
201
+ {
202
+ mediaIDTwo ? <div className="testimonial-image" style={{ backgroundImage: `url(${mediaURLTwo})` }}></div> : __( 'Upload Image' )
203
+ }
204
+ </Button>
205
+ } }
206
+ />
207
+ </div>
208
+ <RichText
209
+ tagName={ 'h4' }
210
+ value={ testimonialTitleTwo }
211
+ onChange={ (text) => setAttributes( { testimonialTitleTwo: text } ) }
212
+ isSelected={ isSelected && editable === 'testimonialTitleTwo' }
213
+ onFocus={ onSetActiveEditable( 'testimonialTitleTwo' ) }
214
+ style={ {
215
+ color: titleColor
216
+ } }
217
+ keepPlaceholderOnFocus
218
+ />
219
+ <RichText
220
+ tagName={'p'}
221
+ value={ positionTwo }
222
+ className={ 'ugb-testimonial-position-two' }
223
+ onChange={ (text) => setAttributes( { positionTwo: text } ) }
224
+ isSelected={ isSelected && editable === 'positionTwo' }
225
+ onFocus={ onSetActiveEditable( 'positionTwo' ) }
226
+ style={ {
227
+ color: posColor
228
+ } }
229
+ keepPlaceholderOnFocus
230
+ />
231
+ <RichText
232
+ tagName={'p'}
233
+ value={ bodyTwo }
234
+ className={ 'ugb-testimonial-body-two' }
235
+ onChange={ (text) => setAttributes( { bodyTwo: text } ) }
236
+ isSelected={ isSelected && editable === 'bodyTwo' }
237
+ onFocus={ onSetActiveEditable( 'bodyTwo' ) }
238
+ style={ {
239
+ color: bodyTextColor
240
+ } }
241
+ keepPlaceholderOnFocus
242
+ />
243
+ </div>
244
+ <div className={ 'ugb-testimonial-column-three' }>
245
+ <div>
246
+ <MediaUpload
247
+ onSelect={ ( media ) => setAttributes( { mediaURLThree: media.url, mediaIDThree: media.id } ) }
248
+ type={'image'}
249
+ value={ mediaIDThree }
250
+ render={ function( obj ) {
251
+ return <Button
252
+ className={ mediaIDThree ? '' : 'button button-large' }
253
+ onClick={ obj.open } >
254
+ {
255
+ mediaIDThree ? <div className="testimonial-image" style={{ backgroundImage: `url(${mediaURLThree})` }}></div> : __( 'Upload Image' )
256
+ }
257
+ </Button>
258
+ } }
259
+ />
260
+ </div>
261
+ <RichText
262
+ tagName={ 'h4' }
263
+ value={ testimonialTitleThree }
264
+ onChange={ (text) => setAttributes( { testimonialTitleThree: text } ) }
265
+ isSelected={ isSelected && editable === 'testimonialTitleThree' }
266
+ onFocus={ onSetActiveEditable( 'testimonialTitleThree' ) }
267
+ style={ {
268
+ color: titleColor
269
+ } }
270
+ keepPlaceholderOnFocus
271
+ />
272
+ <RichText
273
+ tagName={'p'}
274
+ value={ positionThree }
275
+ className={ 'ugb-testimonial-position-three' }
276
+ onChange={ (text) => setAttributes( { positionThree: text } ) }
277
+ isSelected={ isSelected && editable === 'positionThree' }
278
+ onFocus={ onSetActiveEditable( 'positionThree' ) }
279
+ style={ {
280
+ color: posColor
281
+ } }
282
+ keepPlaceholderOnFocus
283
+ />
284
+ <RichText
285
+ tagName={'p'}
286
+ value={ bodyThree }
287
+ className={ 'ugb-testimonial-body-three' }
288
+ onChange={ (text) => setAttributes( { bodyThree: text } ) }
289
+ isSelected={ isSelected && editable === 'bodyThree' }
290
+ onFocus={ onSetActiveEditable( 'bodyThree' ) }
291
+ style={ {
292
+ color: bodyTextColor
293
+ } }
294
+ keepPlaceholderOnFocus
295
+ />
296
+ </div>
297
+ </div>
298
+ ];
299
+ }
300
+
301
+ export const save = ( props ) => {
302
+
303
+ const {
304
+ testimonialTitle,
305
+ testimonialTitleTwo,
306
+ testimonialTitleThree,
307
+ body,
308
+ bodyTwo,
309
+ bodyThree,
310
+ position,
311
+ positionTwo,
312
+ positionThree,
313
+ mediaURL,
314
+ mediaURLTwo,
315
+ mediaURLThree,
316
+ mediaID,
317
+ mediaIDTwo,
318
+ mediaIDThree,
319
+ titleColor,
320
+ posColor,
321
+ bodyTextColor,
322
+ iconColor,
323
+ columns
324
+ } = props.attributes;
325
+
326
+ const tesitimonialIcon = (
327
+ <div key='button' className={ 'quote-icon' }>
328
+ <svg viewBox="0 0 246 187.5" style={ { fill: iconColor } }>
329
+ <path d="M98.5,0h-93C2.5,0,0,2.5,0,5.5v93c0,3,2.5,5.5,5.5,5.5h39c-1.7,15.5-8.8,50-39,50c-3,0-5.5,2.5-5.5,5.5V182c0,3,2.5,5.5,5.5,5.5c5.2,0,98.5-4.5,98.5-89v-93C104,2.5,101.5,0,98.5,0z"/>
330
+ <path d="M240.5,0h-93c-3,0-5.5,2.5-5.5,5.5v93c0,3,2.5,5.5,5.5,5.5h39c-1.7,15.5-8.8,50-39,50c-3,0-5.5,2.5-5.5,5.5V182c0,3,2.5,5.5,5.5,5.5c5.2,0,98.5-4.5,98.5-89v-93C246,2.5,243.5,0,240.5,0z"/>
331
+ <path d="M161.3-86.3c3.2,0,3.2-5,0-5C158.1-91.3,158.1-86.3,161.3-86.3L161.3-86.3z"/>
332
+ </svg>
333
+ </div>
334
+ )
335
+
336
+ return (
337
+ <div className={ `ugb-testimonial column-${columns}` }>
338
+ <div className={ 'ugb-testimonial-column-one' }>
339
+ { mediaURL ? <div className="testimonial-image" style={{ backgroundImage: `url(${mediaURL})` }} data-src={mediaURL}></div> : tesitimonialIcon }
340
+ { testimonialTitle && !! testimonialTitle.length && (
341
+ <h4 style={ { color: titleColor } }>
342
+ { testimonialTitle }
343
+ </h4>
344
+ ) }
345
+ { position && !! position.length && (
346
+ <p className={ 'ugb-testimonial-position' } style={ { color: posColor } }>
347
+ { position }
348
+ </p>
349
+ ) }
350
+ { body && !! body.length && (
351
+ <p className={ 'ugb-testimonial-body' } style={ { color: bodyTextColor } }>
352
+ { body }
353
+ </p>
354
+ ) }
355
+ </div>
356
+ { columns > 1 && (
357
+ <div className={ 'ugb-testimonial-column-two' }>
358
+ { mediaURLTwo ? <div className="testimonial-image" style={{ backgroundImage: `url(${mediaURLTwo})` }} data-src={mediaURLTwo}></div> : tesitimonialIcon }
359
+ { testimonialTitleTwo && !! testimonialTitleTwo.length && (
360
+ <h4 style={ { color: titleColor } }>
361
+ { testimonialTitleTwo }
362
+ </h4>
363
+ ) }
364
+ { positionTwo && !! positionTwo.length && (
365
+ <p className={ 'ugb-testimonial-position-two' } style={ { color: posColor } }>
366
+ { positionTwo }
367
+ </p>
368
+ ) }
369
+ { bodyTwo && !! bodyTwo.length && (
370
+ <p className={ 'ugb-testimonial-body-two' } style={ { color: bodyTextColor } }>
371
+ { bodyTwo }
372
+ </p>
373
+ ) }
374
+ </div>
375
+ ) }
376
+ { columns > 2 && (
377
+ <div className={ 'ugb-testimonial-column-three' }>
378
+ { mediaURLThree ? <div className="testimonial-image" style={{ backgroundImage: `url(${mediaURLThree})` }} data-src={mediaURLThree}></div> : tesitimonialIcon }
379
+ { testimonialTitleThree && !! testimonialTitleThree.length && (
380
+ <h4 style={ { color: titleColor } }>
381
+ { testimonialTitleThree }
382
+ </h4>
383
+ ) }
384
+ { positionThree && !! positionThree.length && (
385
+ <p className={ 'ugb-testimonial-position-three' } style={ { color: posColor } }>
386
+ { positionThree }
387
+ </p>
388
+ ) }
389
+ { bodyThree && !! bodyThree.length && (
390
+ <p className={ 'ugb-testimonial-body-three' } style={ { color: bodyTextColor } }>
391
+ { bodyThree }
392
+ </p>
393
+ ) }
394
+ </div>
395
+ ) }
396
+ </div>
397
+ );
398
+ }
399
+
400
 
401
  /**
402
  * Register: Gutenberg Block.
420
  __( 'Stackable' ),
421
  ],
422
  attributes: {
 
 
 
 
 
 
 
 
 
 
 
 
423
  href: {
424
  type: 'url',
425
  },
529
  },
530
 
531
  // The "edit" property must be a valid function.
532
+ edit: withState( { editable: 'content', } )( edit ),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
533
 
534
  // The "save" property must be specified and must be a valid function.
535
+ save: save,
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
536
  } );
src/block/video-popup/index.js CHANGED
@@ -8,9 +8,10 @@
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
 
 
11
 
12
  const { __ } = wp.i18n; // Import __() from wp.i18n
13
- const { Component } = wp.element
14
  const {
15
  IconButton,
16
  PanelColor,
@@ -19,7 +20,6 @@ const {
19
  Dashicon,
20
  Toolbar
21
  } = wp.components;
22
-
23
  const {
24
  registerBlockType, // Import registerBlockType() from wp.blocks
25
  MediaUpload,
@@ -28,15 +28,156 @@ const {
28
  BlockControls,
29
  UrlInput
30
  } = wp.blocks;
31
-
32
- import { VideoPopupIcon } from '../../icons'
33
-
34
  const playButton = {
35
  normal: <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 256 320"><path d="M0 0v320l256-160L0 0z"/></svg>,
36
  circle: <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 40 40"><path d="M16 29l12-9-12-9v18zm4-29C8.95 0 0 8.95 0 20s8.95 20 20 20 20-8.95 20-20S31.05 0 20 0zm0 36c-8.82 0-16-7.18-16-16S11.18 4 20 4s16 7.18 16 16-7.18 16-16 16z"/></svg>,
37
  outline: <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 34 34"><path d="M17 34C7.6 34 0 26.4 0 17S7.6 0 17 0s17 7.6 17 17-7.6 17-17 17zm0-32C8.7 2 2 8.7 2 17s6.7 15 15 15 15-6.7 15-15S25.3 2 17 2z"/><path d="M12 25.7V8.3L27 17l-15 8.7zm2-14v10.5l9-5.3-9-5.2z"/></svg>
38
  }
39
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
40
  /**
41
  * Register: Gutenberg Block.
42
  *
@@ -85,151 +226,7 @@ registerBlockType( 'ugb/video-popup', {
85
  },
86
 
87
  // The "edit" property must be a valid function.
88
- edit: function( props ) {
89
-
90
- const {
91
- className,
92
- setAttributes,
93
- isSelected,
94
- } = props
95
-
96
- const {
97
- videoLink,
98
- mediaLink,
99
- overlayColor,
100
- playButtonType,
101
- mediaID
102
- } = props.attributes
103
-
104
- const playButtonTypes = [
105
- { value: 'normal', label: __( 'Normal Play Button' ) },
106
- { value: 'circle', label: __( 'Play Button with Circle' ) },
107
- { value: 'outline', label: __( 'Outline Play Button' ) }
108
- ];
109
-
110
- return [
111
- isSelected && (
112
- <BlockControls key='controls'>
113
- { mediaLink && (
114
- <Toolbar>
115
- <MediaUpload
116
- onSelect={ ( media ) => setAttributes( { mediaLink: media.url, mediaID: media.id } ) }
117
- type="image"
118
- value={ mediaID }
119
- render={ ( { open } ) => (
120
- <IconButton
121
- className="components-toolbar__control"
122
- label={ __( 'Edit image' ) }
123
- icon="edit"
124
- onClick={ open }
125
- />
126
- ) }
127
- />
128
- </Toolbar>
129
- )}
130
- </BlockControls>
131
- ),
132
- isSelected && (
133
- <InspectorControls key={ 'inspector' }>
134
-
135
- <SelectControl
136
- label={ __( 'Play Button Style' ) }
137
- value={ playButtonType }
138
- options={ playButtonTypes.map( ({ value, label }) => ( {
139
- value: value,
140
- label: label,
141
- } ) ) }
142
- onChange={ ( newSize ) => { setAttributes( { playButtonType: newSize } ) } }
143
- />
144
- <PanelColor
145
- title={ __( 'Background/Overlay Color' ) }
146
- colorValue={ overlayColor }
147
- initialOpen={ false }
148
- >
149
- <ColorPalette
150
- value={ overlayColor }
151
- onChange={ ( colorValue ) => setAttributes( { overlayColor: colorValue } ) }
152
- />
153
- </PanelColor>
154
- </InspectorControls>
155
- ),
156
- <div className='ugb-video-popup'
157
- data-video={ videoLink }
158
- style={ { backgroundColor: overlayColor } }>
159
- <div className='ugb-video-preview'
160
- style={ { backgroundImage: `url(${mediaLink})` } }>
161
- </div>
162
- <div className='ugb-video-wrapper' >
163
- <MediaUpload
164
- onSelect={ ( media ) => setAttributes( { mediaLink: media.url, mediaID: media.id } ) }
165
- type={'image'}
166
- value={ mediaID }
167
- render={ function( obj ) {
168
- return [
169
- ! mediaLink && (
170
- <Button
171
- className={ mediaID ? '' : 'button button-large' }
172
- onClick={ obj.open }
173
- >
174
- {__('Upload Image')}
175
- </Button>
176
- )
177
- ]
178
- } }
179
- />
180
- <div className='ugb-video-overlay' style={ { backgroundColor: overlayColor } } />
181
- <span className="ugb-play-button">
182
- { playButton[ playButtonType ] }
183
- </span>
184
- </div>
185
- </div>,
186
- isSelected && (
187
- <form
188
- key={ 'form-link' }
189
- onSubmit={ ( event ) => event.preventDefault() }
190
- className='ugb-video-popup-link blocks-button__inline-link'>
191
- <Dashicon icon={ 'admin-links' } />
192
- <UrlInput
193
- value={ videoLink }
194
- onChange={ ( value ) => setAttributes( { videoLink: value } ) }
195
- />
196
- <IconButton
197
- icon={ 'editor-break' }
198
- label={ __( 'Apply' ) }
199
- type={ 'submit' }
200
- />
201
- <p><i>Youtube/Vimeo ID only</i></p>
202
- </form>
203
- )
204
- ];
205
- },
206
-
207
  // The "save" property must be specified and must be a valid function.
208
- save: function( props ) {
209
-
210
- const {
211
- videoLink,
212
- mediaLink,
213
- overlayColor,
214
- playButtonType,
215
- mediaID
216
- } = props.attributes
217
-
218
- return (
219
- <div className='ugb-video-popup'
220
- data-video={ videoLink }
221
- style={ { backgroundColor: overlayColor } }>
222
- <div className='ugb-video-preview'
223
- style={ { backgroundImage: `url(${mediaLink})` } }
224
- data-url={ mediaLink }>
225
- </div>
226
- <div className='ugb-video-wrapper' >
227
- <a href="#" style={ { backgroundColor: overlayColor } } />
228
- <span className='ugb-play-button'>
229
- { playButton[ playButtonType ] }
230
- </span>
231
- </div>
232
- </div>
233
- );
234
- }
235
  } );
8
  // Import CSS.
9
  import './style.scss';
10
  import './editor.scss';
11
+ import { VideoPopupIcon } from '../../icons'
12
+
13
 
14
  const { __ } = wp.i18n; // Import __() from wp.i18n
 
15
  const {
16
  IconButton,
17
  PanelColor,
20
  Dashicon,
21
  Toolbar
22
  } = wp.components;
 
23
  const {
24
  registerBlockType, // Import registerBlockType() from wp.blocks
25
  MediaUpload,
28
  BlockControls,
29
  UrlInput
30
  } = wp.blocks;
 
 
 
31
  const playButton = {
32
  normal: <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 256 320"><path d="M0 0v320l256-160L0 0z"/></svg>,
33
  circle: <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 40 40"><path d="M16 29l12-9-12-9v18zm4-29C8.95 0 0 8.95 0 20s8.95 20 20 20 20-8.95 20-20S31.05 0 20 0zm0 36c-8.82 0-16-7.18-16-16S11.18 4 20 4s16 7.18 16 16-7.18 16-16 16z"/></svg>,
34
  outline: <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 34 34"><path d="M17 34C7.6 34 0 26.4 0 17S7.6 0 17 0s17 7.6 17 17-7.6 17-17 17zm0-32C8.7 2 2 8.7 2 17s6.7 15 15 15 15-6.7 15-15S25.3 2 17 2z"/><path d="M12 25.7V8.3L27 17l-15 8.7zm2-14v10.5l9-5.3-9-5.2z"/></svg>
35
  }
36
 
37
+
38
+ export const edit = ( props ) => {
39
+ const {
40
+ className,
41
+ setAttributes,
42
+ isSelected,
43
+ } = props
44
+ const {
45
+ videoLink,
46
+ mediaLink,
47
+ overlayColor,
48
+ playButtonType,
49
+ mediaID
50
+ } = props.attributes
51
+ const playButtonTypes = [
52
+ { value: 'normal', label: __( 'Normal Play Button' ) },
53
+ { value: 'circle', label: __( 'Play Button with Circle' ) },
54
+ { value: 'outline', label: __( 'Outline Play Button' ) }
55
+ ];
56
+
57
+ return [
58
+ isSelected && (
59
+ <BlockControls key='controls'>
60
+ { mediaLink && (
61
+ <Toolbar>
62
+ <MediaUpload
63
+ onSelect={ ( media ) => setAttributes( { mediaLink: media.url, mediaID: media.id } ) }
64
+ type="image"
65
+ value={ mediaID }
66
+ render={ ( { open } ) => (
67
+ <IconButton
68
+ className="components-toolbar__control"
69
+ label={ __( 'Edit image' ) }
70
+ icon="edit"
71
+ onClick={ open }
72
+ />
73
+ ) }
74
+ />
75
+ </Toolbar>
76
+ )}
77
+ </BlockControls>
78
+ ),
79
+ isSelected && (
80
+ <InspectorControls key={ 'inspector' }>
81
+
82
+ <SelectControl
83
+ label={ __( 'Play Button Style' ) }
84
+ value={ playButtonType }
85
+ options={ playButtonTypes.map( ({ value, label }) => ( {
86
+ value: value,
87
+ label: label,
88
+ } ) ) }
89
+ onChange={ ( newSize ) => { setAttributes( { playButtonType: newSize } ) } }
90
+ />
91
+ <PanelColor
92
+ title={ __( 'Background/Overlay Color' ) }
93
+ colorValue={ overlayColor }
94
+ initialOpen={ false }
95
+ >
96
+ <ColorPalette
97
+ value={ overlayColor }
98
+ onChange={ ( colorValue ) => setAttributes( { overlayColor: colorValue } ) }
99
+ />
100
+ </PanelColor>
101
+ </InspectorControls>
102
+ ),
103
+ <div className='ugb-video-popup'
104
+ data-video={ videoLink }
105
+ style={ { backgroundColor: overlayColor } }>
106
+ <div className='ugb-video-preview'
107
+ style={ { backgroundImage: `url(${mediaLink})` } }>
108
+ </div>
109
+ <div className='ugb-video-wrapper' >
110
+ <MediaUpload
111
+ onSelect={ ( media ) => setAttributes( { mediaLink: media.url, mediaID: media.id } ) }
112
+ type={'image'}
113
+ value={ mediaID }
114
+ render={ function( obj ) {
115
+ return [
116
+ ! mediaLink && (
117
+ <Button
118
+ className={ mediaID ? '' : 'button button-large' }
119
+ onClick={ obj.open }
120
+ >
121
+ {__('Upload Image')}
122
+ </Button>
123
+ )
124
+ ]
125
+ } }
126
+ />
127
+ <div className='ugb-video-overlay' style={ { backgroundColor: overlayColor } } />
128
+ <span className="ugb-play-button">
129
+ { playButton[ playButtonType ] }
130
+ </span>
131
+ </div>
132
+ </div>,
133
+ isSelected && (
134
+ <form
135
+ key={ 'form-link' }
136
+ onSubmit={ ( event ) => event.preventDefault() }
137
+ className='ugb-video-popup-link blocks-button__inline-link'>
138
+ <Dashicon icon={ 'admin-links' } />
139
+ <UrlInput
140
+ value={ videoLink }
141
+ onChange={ ( value ) => setAttributes( { videoLink: value } ) }
142
+ />
143
+ <IconButton
144
+ icon={ 'editor-break' }
145
+ label={ __( 'Apply' ) }
146
+ type={ 'submit' }
147
+ />
148
+ <p><i>Youtube/Vimeo ID only</i></p>
149
+ </form>
150
+ )
151
+ ];
152
+ }
153
+
154
+ export const save = ( props ) => {
155
+ const {
156
+ videoLink,
157
+ mediaLink,
158
+ overlayColor,
159
+ playButtonType,
160
+ mediaID
161
+ } = props.attributes
162
+
163
+ return (
164
+ <div className='ugb-video-popup'
165
+ data-video={ videoLink }
166
+ style={ { backgroundColor: overlayColor } }>
167
+ <div className='ugb-video-preview'
168
+ style={ { backgroundImage: `url(${mediaLink})` } }
169
+ data-url={ mediaLink }>
170
+ </div>
171
+ <div className='ugb-video-wrapper' >
172
+ <a href="#" style={ { backgroundColor: overlayColor } } />
173
+ <span className='ugb-play-button'>
174
+ { playButton[ playButtonType ] }
175
+ </span>
176
+ </div>
177
+ </div>
178
+ );
179
+ }
180
+
181
  /**
182
  * Register: Gutenberg Block.
183
  *
226
  },
227
 
228
  // The "edit" property must be a valid function.
229
+ edit: edit,
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
230
  // The "save" property must be specified and must be a valid function.
231
+ save: save,
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
232
  } );
src/blocks.js CHANGED
@@ -22,6 +22,9 @@ import './block/testimonial';
22
  import './block/team-member';
23
  import './block/expand';
24
  import './block/number-box';
 
 
25
  import './block/image-box';
26
  import './block/count-up';
27
  import './block/video-popup';
 
22
  import './block/team-member';
23
  import './block/expand';
24
  import './block/number-box';
25
+ import './block/pricing-box';
26
+ import './block/header';
27
  import './block/image-box';
28
  import './block/count-up';
29
  import './block/video-popup';
30
+ import './block/card';
src/icons.js CHANGED
@@ -13,104 +13,147 @@ const Gradient = (props) => (
13
  </defs>
14
  )
15
 
16
- export const NotificationIcon = () => (
17
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="20" height="20">
18
- <Gradient id="AlertIconGradient" />
19
- <path fill="url(#AlertIconGradient)" d="M512 96c-111.118 0-215.584 43.272-294.156 121.844S96 400.882 96 512s43.272 215.584 121.844 294.156S400.882 928 512 928s215.584-43.272 294.156-121.844S928 623.118 928 512s-43.272-215.584-121.843-294.156S623.118 96 512 96zm0-96c282.77 0 512 229.23 512 512s-229.23 512-512 512S0 794.77 0 512 229.23 0 512 0zm-64 704h128v128H448zm0-512h128v384H448z"/>
 
 
 
 
 
20
  </svg>
21
- )
22
-
23
- export const ButtonIcon = () => (
24
- <svg role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
25
- <Gradient id="AlertIconGradient" />
26
- <path fill="url(#AlertIconGradient)" d="M17 5H3c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm1 7c0 .6-.4 1-1 1H3c-.6 0-1-.4-1-1V7c0-.6.4-1 1-1h14c.6 0 1 .4 1 1v5z"></path>
 
 
 
27
  </svg>
28
- )
 
29
 
30
- export const GhostButtonIcon = () => (
31
- <ButtonIcon/>
32
- )
33
 
34
- export const DividerIcon = () => (
35
- <svg role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
36
- <Gradient id="AlertIconGradient" />
37
- <path fill="url(#AlertIconGradient)" d="M4 9h12v2H4V9z"></path>
 
 
38
  </svg>
39
- )
40
-
41
- export const QuoteIcon = () => (
42
- <svg role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
43
- <Gradient id="AlertIconGradient" />
44
- <path fill="url(#AlertIconGradient)" d="M8.54 12.74c0-.87-.24-1.61-.72-2.22-.73-.92-2.14-1.03-2.96-.85-.34-1.93 1.3-4.39 3.42-5.45L6.65 1.94C3.45 3.46.31 6.96.85 11.37 1.19 14.16 2.8 16 5.08 16c1 0 1.83-.29 2.48-.88.66-.59.98-1.38.98-2.38zm9.43 0c0-.87-.24-1.61-.72-2.22-.73-.92-2.14-1.03-2.96-.85-.34-1.93 1.3-4.39 3.42-5.45l-1.63-2.28c-3.2 1.52-6.34 5.02-5.8 9.43.34 2.79 1.95 4.63 4.23 4.63 1 0 1.83-.29 2.48-.88.66-.59.98-1.38.98-2.38z"></path>
 
 
 
45
  </svg>
46
- )
47
-
48
- export const SpacerIcon = () => (
49
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 14 32">
50
- <Gradient id="AlertIconGradient" />
51
- <path fill="url(#AlertIconGradient)" d="M0 29h5.833L0 23h5V9H0l5.833-6H0V0h14v3H8.167L14 9H9v14h5l-5.833 6H14v3H0v-3z"/>
 
 
 
52
  </svg>
53
- )
54
-
55
- export const TestimonialIcon = () => (
56
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 13 12.916010856628418">
57
- <Gradient id="AlertIconGradient" />
58
- <path fill="url(#AlertIconGradient)" d="M5.68 12.916a.5.5 0 0 1-.397-.196L3.208 10H1.463C.656 10 0 9.428 0 8.621V1.463C0 .656.656 0 1.463 0h10.074C12.344 0 13 .656 13 1.463v7.158C13 9.428 12.344 10 11.537 10H8.151l-2.073 2.72a.504.504 0 0 1-.398.196zM1.463 1A.464.464 0 0 0 1 1.463v7.158c0 .255.208.463.463.463h1.993a.5.5 0 0 1 .397.196l1.827 2.312L7.507 9.28a.502.502 0 0 1 .397-.196h3.633A.464.464 0 0 0 12 8.621V1.463A.464.464 0 0 0 11.537 1H1.463zm1.193 2h7.828c.284.024.514.207.514.49a.498.498 0 0 1-.514.496H2.656a.499.499 0 0 1-.514-.496c.001-.283.231-.466.514-.49zm0 3h7.828c.284.024.514.207.514.49a.498.498 0 0 1-.514.496H2.656a.499.499 0 0 1-.514-.496c.001-.283.231-.466.514-.49z"/>
 
 
 
59
  </svg>
60
- )
61
-
62
- export const CTAIcon = () => (
63
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 14">
64
- <Gradient id="Grad" />
65
- <path fill="url(#Grad)" d="M10 0c-.17 0-.36.05-.52.14C8.04 1.02 4.5 3.58 3 4c-1.38 0-3 .67-3 2.5S1.63 9 3 9c.3.08.64.23 1 .41V14h2v-3.45c1.34.86 2.69 1.83 3.48 2.31.16.09.34.14.52.14.52 0 1-.42 1-1V1c0-.58-.48-1-1-1zm0 12c-.38-.23-.89-.58-1.5-1-.16-.11-.33-.22-.5-.34V2.31c.16-.11.31-.2.47-.31.61-.41 1.16-.77 1.53-1v11zm2-6h4v1h-4V6zm0 2l4 2v1l-4-2V8zm4-6v1l-4 2V4l4-2z"/>
 
 
 
66
  </svg>
67
- )
68
-
69
- export const TeamMemberIcon = () => (
70
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 896 1023">
71
- <Gradient id="Grad" />
72
- <path fill="url(#Grad)" d="M821 491q-41-41-95-60 62-26 100-82t38-125q0-93-65.5-158.5T640 0q-71 0-128.5 41T430 147q-32-39-77-61t-97-22q-93 0-158.5 65.5T32 288q0 69 38 125t100 82q-54 19-95 60Q0 630 0 736v191q0 40 28 68t68 28h320q31 0 55.5-18t34.5-46h294q40 0 68-28t28-68V672q0-106-75-181zM527 111q47-47 113-47t113 47 47 113-47 113-113 47-113-47-47-113 47-113zM143 401q-47-47-47-113t47-113 113-47 113 47 47 113-47 113-113 47-113-47zm305 526q0 13-9.5 22.5T416 959H96q-13 0-22.5-9.5T64 927V736q0-79 56.5-135.5T256 544t136 56q1 2 2 3 54 55 54 133v191zm-27-387q-36-30-79-45 43-18 75.5-52t48.5-78q36 44 88 66-54 19-95 60-22 23-38 49zm411 323q0 13-9.5 22.5T800 895H512V736q0-80-46-146 15-30 38-53 57-57 136-57t135.5 56.5T832 672v191z"/>
 
 
 
73
  </svg>
74
- )
75
-
76
- export const ExpandIcon = () => (
77
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 8">
78
- <Gradient id="Grad" />
79
- <path fill="url(#Grad)" d="M4 0C1.79 0 0 1.79 0 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm24 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zM16 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"/>
 
 
 
80
  </svg>
81
- )
82
-
83
- export const NumberBoxIcon = () => (
84
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 21.027502059936523 10.284000396728516">
85
- <Gradient id="Grad" />
86
- <path fill="url(#Grad)" d="M3.028 10.284a1 1 0 0 1-1-1V2.902l-.553.276A1 1 0 1 1 .58 1.389l2-1a.998.998 0 0 1 1.447.895v8a1 1 0 0 1-1 1zm9 0h-5a1.002 1.002 0 0 1-.707-1.707l4-4c.254-.254.394-.591.394-.95 0-.358-.14-.695-.394-.949-.508-.508-1.39-.508-1.9.001a1.33 1.33 0 0 0-.393.948 1 1 0 0 1-2 0c0-.894.348-1.733.98-2.364C8.273 0 10.472 0 11.735 1.264c.632.631.979 1.471.979 2.363 0 .893-.348 1.733-.98 2.364L9.443 8.284h2.586a1 1 0 0 1 0 2zm7.955-5.623a2.725 2.725 0 0 0 .545-1.627 2.753 2.753 0 0 0-2.75-2.75 2.739 2.739 0 0 0-2.44 1.484 1 1 0 1 0 1.776.92.75.75 0 1 1 .664 1.096 1 1 0 0 0 0 2c.689 0 1.25.561 1.25 1.25s-.561 1.25-1.25 1.25-1.25-.561-1.25-1.25a1 1 0 0 0-2 0c0 1.792 1.458 3.25 3.25 3.25s3.25-1.458 3.25-3.25a3.23 3.23 0 0 0-1.045-2.373z"/>
 
 
 
87
  </svg>
88
- )
89
-
90
- export const HeaderIcon = () => (
91
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 38">
92
- <Gradient id="Grad" />
93
- <path fill="url(#Grad)" d="M0 0h32v38H0V0zm3 3v32h26V3H3zm2 2h22v7H5V5zm0 9h14v19H5V14zm16 19V14h6v19h-6zM6 6v5h20V6H6z"/>
 
 
 
94
  </svg>
95
- )
96
-
97
- export const PictureIcon = () => (
98
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 1024 896">
99
- <Gradient id="Grad" />
100
- <path fill="url(#Grad)" d="M960 0H64Q38 0 19 19T0 64v768q0 26 19 45t45 19h896q26 0 45-19t19-45V64q0-26-19-45T960 0zM64 64h896v714L724 430q-7-12-21-14t-25 7L524 548 350 305q-10-14-28-13t-26 17L64 757V64zm855 768H97l231-447 184 255 179-145zM737 190q13 0 22.5 9.5T769 222t-9.5 22.5T737 254t-22.5-9.5T705 222t9.5-22.5T737 190zm0-64q-40 0-68 28t-28 68 28 68 68 28 68-28 28-68-28-68-68-28z"/>
 
 
 
101
  </svg>
102
- )
103
-
104
- export const VideoPopupIcon = () => (
105
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 38 26">
106
- <Gradient id="Grad" />
107
- <path fill="url(#Grad)" d="M2 0h34a2 2 0 0 1 2 2v22a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm5.77 4C6.24 4 5 5.511 5 7.375v11.25C5 20.489 6.24 22 7.77 22h15.46c1.53 0 2.77-1.511 2.77-3.375V16l6 5h1V5h-1l-6 5V7.375C26 5.511 24.76 4 23.23 4H7.77z"/>
 
 
 
108
  </svg>
109
- )
110
-
111
- export const PricingIcon = () => (
112
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 448 448">
113
- <Gradient id="Grad" />
114
- <path fill="url(#Grad)" d="M416 32V0H256L0 288l160 160 23.471-23.904L208 448l240-272V32h-32zM160 425.371L22.39 288 262.621 16H400v137.377l-216.555 247.99-11.34 11.363L160 425.371zm272-255.994L208 425.371l-13.182-12.65L416 160V48h16v121.377z"/><path d="M320 128c17.645 0 32-14.355 32-32s-14.355-32-32-32-32 14.355-32 32 14.355 32 32 32zm0-48c8.836 0 16 7.163 16 16s-7.164 16-16 16-16-7.163-16-16 7.164-16 16-16z"/>
 
 
 
115
  </svg>
116
- )
 
13
  </defs>
14
  )
15
 
16
+ let iconNum = 1
17
+ const iconID = () => `stk-icon-${iconNum++}`
18
+
19
+ export const NotificationIcon = () => {
20
+ const id = iconID()
21
+ return (
22
+ <svg className="dashicon" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="20" height="20">
23
+ <Gradient id={ id } />
24
+ <path fill={ `url(#${id})` } d="M512 96c-111.118 0-215.584 43.272-294.156 121.844S96 400.882 96 512s43.272 215.584 121.844 294.156S400.882 928 512 928s215.584-43.272 294.156-121.844S928 623.118 928 512s-43.272-215.584-121.843-294.156S623.118 96 512 96zm0-96c282.77 0 512 229.23 512 512s-229.23 512-512 512S0 794.77 0 512 229.23 0 512 0zm-64 704h128v128H448zm0-512h128v384H448z"/>
25
  </svg>
26
+ )
27
+ }
28
+
29
+ export const ButtonIcon = () => {
30
+ const id = iconID()
31
+ return (
32
+ <svg className="dashicon" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
33
+ <Gradient id={ id } />
34
+ <path fill={ `url(#${id})` } d="M17 5H3c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm1 7c0 .6-.4 1-1 1H3c-.6 0-1-.4-1-1V7c0-.6.4-1 1-1h14c.6 0 1 .4 1 1v5z"></path>
35
  </svg>
36
+ )
37
+ }
38
 
39
+ export const GhostButtonIcon = () => <ButtonIcon/>
 
 
40
 
41
+ export const DividerIcon = () => {
42
+ const id = iconID()
43
+ return (
44
+ <svg className="dashicon" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
45
+ <Gradient id={ id } />
46
+ <path fill={ `url(#${id})` } d="M4 9h12v2H4V9z"></path>
47
  </svg>
48
+ )
49
+ }
50
+
51
+ export const QuoteIcon = () => {
52
+ const id = iconID()
53
+ return (
54
+ <svg className="dashicon" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
55
+ <Gradient id={ id } />
56
+ <path fill={ `url(#${id})` } d="M8.54 12.74c0-.87-.24-1.61-.72-2.22-.73-.92-2.14-1.03-2.96-.85-.34-1.93 1.3-4.39 3.42-5.45L6.65 1.94C3.45 3.46.31 6.96.85 11.37 1.19 14.16 2.8 16 5.08 16c1 0 1.83-.29 2.48-.88.66-.59.98-1.38.98-2.38zm9.43 0c0-.87-.24-1.61-.72-2.22-.73-.92-2.14-1.03-2.96-.85-.34-1.93 1.3-4.39 3.42-5.45l-1.63-2.28c-3.2 1.52-6.34 5.02-5.8 9.43.34 2.79 1.95 4.63 4.23 4.63 1 0 1.83-.29 2.48-.88.66-.59.98-1.38.98-2.38z"></path>
57
  </svg>
58
+ )
59
+ }
60
+
61
+ export const SpacerIcon = () => {
62
+ const id = iconID()
63
+ return (
64
+ <svg className="dashicon" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 14 32">
65
+ <Gradient id={ id } />
66
+ <path fill={ `url(#${id})` } d="M0 29h5.833L0 23h5V9H0l5.833-6H0V0h14v3H8.167L14 9H9v14h5l-5.833 6H14v3H0v-3z"/>
67
  </svg>
68
+ )
69
+ }
70
+
71
+ export const TestimonialIcon = () => {
72
+ const id = iconID()
73
+ return (
74
+ <svg className="dashicon" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 13 12.916010856628418">
75
+ <Gradient id={ id } />
76
+ <path fill={ `url(#${id})` } d="M5.68 12.916a.5.5 0 0 1-.397-.196L3.208 10H1.463C.656 10 0 9.428 0 8.621V1.463C0 .656.656 0 1.463 0h10.074C12.344 0 13 .656 13 1.463v7.158C13 9.428 12.344 10 11.537 10H8.151l-2.073 2.72a.504.504 0 0 1-.398.196zM1.463 1A.464.464 0 0 0 1 1.463v7.158c0 .255.208.463.463.463h1.993a.5.5 0 0 1 .397.196l1.827 2.312L7.507 9.28a.502.502 0 0 1 .397-.196h3.633A.464.464 0 0 0 12 8.621V1.463A.464.464 0 0 0 11.537 1H1.463zm1.193 2h7.828c.284.024.514.207.514.49a.498.498 0 0 1-.514.496H2.656a.499.499 0 0 1-.514-.496c.001-.283.231-.466.514-.49zm0 3h7.828c.284.024.514.207.514.49a.498.498 0 0 1-.514.496H2.656a.499.499 0 0 1-.514-.496c.001-.283.231-.466.514-.49z"/>
77
  </svg>
78
+ )
79
+ }
80
+
81
+ export const CTAIcon = () => {
82
+ const id = iconID()
83
+ return (
84
+ <svg className="dashicon" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 14">
85
+ <Gradient id={ id } />
86
+ <path fill={ `url(#${id})` } d="M10 0c-.17 0-.36.05-.52.14C8.04 1.02 4.5 3.58 3 4c-1.38 0-3 .67-3 2.5S1.63 9 3 9c.3.08.64.23 1 .41V14h2v-3.45c1.34.86 2.69 1.83 3.48 2.31.16.09.34.14.52.14.52 0 1-.42 1-1V1c0-.58-.48-1-1-1zm0 12c-.38-.23-.89-.58-1.5-1-.16-.11-.33-.22-.5-.34V2.31c.16-.11.31-.2.47-.31.61-.41 1.16-.77 1.53-1v11zm2-6h4v1h-4V6zm0 2l4 2v1l-4-2V8zm4-6v1l-4 2V4l4-2z"/>
87
  </svg>
88
+ )
89
+ }
90
+
91
+ export const TeamMemberIcon = () => {
92
+ const id = iconID()
93
+ return (
94
+ <svg className="dashicon" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 896 1023">
95
+ <Gradient id={ id } />
96
+ <path fill={ `url(#${id})` } d="M821 491q-41-41-95-60 62-26 100-82t38-125q0-93-65.5-158.5T640 0q-71 0-128.5 41T430 147q-32-39-77-61t-97-22q-93 0-158.5 65.5T32 288q0 69 38 125t100 82q-54 19-95 60Q0 630 0 736v191q0 40 28 68t68 28h320q31 0 55.5-18t34.5-46h294q40 0 68-28t28-68V672q0-106-75-181zM527 111q47-47 113-47t113 47 47 113-47 113-113 47-113-47-47-113 47-113zM143 401q-47-47-47-113t47-113 113-47 113 47 47 113-47 113-113 47-113-47zm305 526q0 13-9.5 22.5T416 959H96q-13 0-22.5-9.5T64 927V736q0-79 56.5-135.5T256 544t136 56q1 2 2 3 54 55 54 133v191zm-27-387q-36-30-79-45 43-18 75.5-52t48.5-78q36 44 88 66-54 19-95 60-22 23-38 49zm411 323q0 13-9.5 22.5T800 895H512V736q0-80-46-146 15-30 38-53 57-57 136-57t135.5 56.5T832 672v191z"/>
97
  </svg>
98
+ )
99
+ }
100
+
101
+ export const ExpandIcon = () => {
102
+ const id = iconID()
103
+ return (
104
+ <svg className="dashicon" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 8">
105
+ <Gradient id={ id } />
106
+ <path fill={ `url(#${id})` } d="M4 0C1.79 0 0 1.79 0 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm24 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zM16 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"/>
107
  </svg>
108
+ )
109
+ }
110
+
111
+ export const NumberBoxIcon = () => {
112
+ const id = iconID()
113
+ return (
114
+ <svg className="dashicon" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 21.027502059936523 10.284000396728516">
115
+ <Gradient id={ id } />
116
+ <path fill={ `url(#${id})` } d="M3.028 10.284a1 1 0 0 1-1-1V2.902l-.553.276A1 1 0 1 1 .58 1.389l2-1a.998.998 0 0 1 1.447.895v8a1 1 0 0 1-1 1zm9 0h-5a1.002 1.002 0 0 1-.707-1.707l4-4c.254-.254.394-.591.394-.95 0-.358-.14-.695-.394-.949-.508-.508-1.39-.508-1.9.001a1.33 1.33 0 0 0-.393.948 1 1 0 0 1-2 0c0-.894.348-1.733.98-2.364C8.273 0 10.472 0 11.735 1.264c.632.631.979 1.471.979 2.363 0 .893-.348 1.733-.98 2.364L9.443 8.284h2.586a1 1 0 0 1 0 2zm7.955-5.623a2.725 2.725 0 0 0 .545-1.627 2.753 2.753 0 0 0-2.75-2.75 2.739 2.739 0 0 0-2.44 1.484 1 1 0 1 0 1.776.92.75.75 0 1 1 .664 1.096 1 1 0 0 0 0 2c.689 0 1.25.561 1.25 1.25s-.561 1.25-1.25 1.25-1.25-.561-1.25-1.25a1 1 0 0 0-2 0c0 1.792 1.458 3.25 3.25 3.25s3.25-1.458 3.25-3.25a3.23 3.23 0 0 0-1.045-2.373z"/>
117
  </svg>
118
+ )
119
+ }
120
+
121
+ export const HeaderIcon = () => {
122
+ const id = iconID()
123
+ return (
124
+ <svg className="dashicon" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 38">
125
+ <Gradient id={ id } />
126
+ <path fill={ `url(#${id})` } d="M0 0h32v38H0V0zm3 3v32h26V3H3zm2 2h22v7H5V5zm0 9h14v19H5V14zm16 19V14h6v19h-6zM6 6v5h20V6H6z"/>
127
  </svg>
128
+ )
129
+ }
130
+
131
+ export const PictureIcon = () => {
132
+ const id = iconID()
133
+ return (
134
+ <svg className="dashicon" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 1024 896">
135
+ <Gradient id={ id } />
136
+ <path fill={ `url(#${id})` } d="M960 0H64Q38 0 19 19T0 64v768q0 26 19 45t45 19h896q26 0 45-19t19-45V64q0-26-19-45T960 0zM64 64h896v714L724 430q-7-12-21-14t-25 7L524 548 350 305q-10-14-28-13t-26 17L64 757V64zm855 768H97l231-447 184 255 179-145zM737 190q13 0 22.5 9.5T769 222t-9.5 22.5T737 254t-22.5-9.5T705 222t9.5-22.5T737 190zm0-64q-40 0-68 28t-28 68 28 68 68 28 68-28 28-68-28-68-68-28z"/>
137
  </svg>
138
+ )
139
+ }
140
+
141
+ export const VideoPopupIcon = () => {
142
+ const id = iconID()
143
+ return (
144
+ <svg className="dashicon" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 38 26">
145
+ <Gradient id={ id } />
146
+ <path fill={ `url(#${id})` } d="M2 0h34a2 2 0 0 1 2 2v22a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm5.77 4C6.24 4 5 5.511 5 7.375v11.25C5 20.489 6.24 22 7.77 22h15.46c1.53 0 2.77-1.511 2.77-3.375V16l6 5h1V5h-1l-6 5V7.375C26 5.511 24.76 4 23.23 4H7.77z"/>
147
  </svg>
148
+ )
149
+ }
150
+
151
+ export const PricingIcon = () => {
152
+ const id = iconID()
153
+ return (
154
+ <svg className="dashicon" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 448 448">
155
+ <Gradient id={ id } />
156
+ <path fill={ `url(#${id})` } d="M416 32V0H256L0 288l160 160 23.471-23.904L208 448l240-272V32h-32zM160 425.371L22.39 288 262.621 16H400v137.377l-216.555 247.99-11.34 11.363L160 425.371zm272-255.994L208 425.371l-13.182-12.65L416 160V48h16v121.377z"/><path d="M320 128c17.645 0 32-14.355 32-32s-14.355-32-32-32-32 14.355-32 32 14.355 32 32 32zm0-48c8.836 0 16 7.163 16 16s-7.164 16-16 16-16-7.163-16-16 7.164-16 16-16z"/>
157
  </svg>
158
+ )
159
+ }