Editing: product-gallery.js
(()=>{"use strict";var e,t,o,r={612:(e,t,o)=>{var r=o(4997);const l=window.wp.data,i=window.wc.wcTypes;class s{blocks=new Map;initialized=!1;attemptedRegisteredBlocks=new Set;constructor(){this.initializeSubscriptions()}static getInstance(){return s.instance||(s.instance=new s),s.instance}parseTemplateId(e){const t=(0,i.isNumber)(e)?void 0:e;return t?.split("//")[1]}initializeSubscriptions(){if(this.initialized)return;const e=(0,l.subscribe)((()=>{const t=(0,l.select)("core/edit-site"),o=(0,l.select)("core/edit-post");if(t||o)if(t){const o=t.getEditedPostId();e(),this.currentTemplateId="string"==typeof o?this.parseTemplateId(o):void 0,(0,l.subscribe)((()=>{const e=this.currentTemplateId;this.currentTemplateId=this.parseTemplateId(t.getEditedPostId()),e!==this.currentTemplateId&&this.handleTemplateChange(e)}),"core/edit-site"),this.initialized=!0}else o&&(e(),this.blocks.forEach((e=>{if(e.isAvailableOnPostEditor){const t=e.variationName||e.blockName;this.hasAttemptedRegistration(t)||this.registerBlock(e)}})),this.initialized=!0)}))}handleTemplateChange(e){(this.currentTemplateId?.includes("single-product")||e?.includes("single-product"))&&this.blocks.forEach((e=>{this.unregisterBlock(e),this.registerBlock(e)}))}hasAttemptedRegistration(e){return this.attemptedRegisteredBlocks.has(e)}unregisterBlock(e){const{blockName:t,isVariationBlock:o,variationName:l}=e;try{o&&l?((0,r.unregisterBlockVariation)(t,l),this.attemptedRegisteredBlocks.delete(l)):((0,r.unregisterBlockType)(t),this.attemptedRegisteredBlocks.delete(t))}catch(e){console.debug(`Failed to unregister block ${t}:`,e)}}registerBlock(e){const{blockName:t,settings:o,isVariationBlock:s,variationName:a,isAvailableOnPostEditor:c}=e;try{const e=a||t;if(this.hasAttemptedRegistration(e))return;const n=(0,l.select)("core/edit-site");if(!n&&!c)return;if(s)(0,r.registerBlockVariation)(t,o);else{const e=(0,i.isEmpty)(o?.ancestor)?["woocommerce/single-product"]:o?.ancestor,l=n&&this.currentTemplateId?.includes("single-product");(0,r.registerBlockType)(t,{...o,ancestor:l?void 0:e})}this.attemptedRegisteredBlocks.add(e)}catch(e){console.error(`Failed to register block ${t}:`,e)}}registerBlockConfig(e){const t=e.variationName||e.blockName;this.blocks.set(t,e),this.registerBlock(e)}}const a=JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"woocommerce/product-gallery","title":"Product Gallery (Beta)","description":"Showcase your products relevant images and media.","category":"woocommerce","keywords":["WooCommerce"],"supports":{"align":true,"interactivity":true,"layout":{"default":{"type":"flex","flexWrap":"nowrap","orientation":"horizontal"},"allowOrientation":true,"allowEditing":true,"allowJustification":false}},"textdomain":"woocommerce","usesContext":["postId"],"providesContext":{"hoverZoom":"hoverZoom","fullScreenOnClick":"fullScreenOnClick"},"ancestor":["woocommerce/single-product"],"attributes":{"hoverZoom":{"type":"boolean","default":true},"fullScreenOnClick":{"type":"boolean","default":true}},"viewScript":"wc-product-gallery-frontend","example":{},"viewScriptModule":"woocommerce/product-gallery","style":"file:../woocommerce/product-gallery-style.css"}');var c=o(4715);const n=window.wc.wcBlocksSharedHocs;var u=o(6427),m=o(7723),d=o(790);const p=({attributes:e,setAttributes:t})=>{const{hoverZoom:o,fullScreenOnClick:r}=e;return(0,d.jsx)(c.InspectorControls,{children:(0,d.jsxs)(u.PanelBody,{title:(0,m.__)("Media Settings","woocommerce"),children:[(0,d.jsx)(u.ToggleControl,{label:(0,m.__)("Zoom while hovering","woocommerce"),help:(0,m.__)("While hovering the large image will zoom in by 30%.","woocommerce"),checked:o,onChange:()=>t({hoverZoom:!o})}),(0,d.jsx)(u.ToggleControl,{label:(0,m.__)("Open pop-up when clicked","woocommerce"),help:(0,m.__)("Clicking on the large image will open a full-screen gallery experience.","woocommerce"),checked:r,onChange:()=>t({fullScreenOnClick:!r})})]})})},g=[["woocommerce/product-gallery-thumbnails"],["woocommerce/product-gallery-large-image",{},[["woocommerce/product-image",{showProductLink:!1,showSaleBadge:!1}],["woocommerce/product-sale-badge",{align:"right"}],["woocommerce/product-gallery-large-image-next-previous"]]]],h=(0,n.withProductDataContext)((({attributes:e,setAttributes:t})=>{const o=(0,c.useBlockProps)({className:"wc-block-product-gallery"});return(0,d.jsxs)("div",{...o,children:[(0,d.jsx)(c.InspectorControls,{children:(0,d.jsx)(p,{attributes:e,setAttributes:t})}),(0,d.jsx)(c.InnerBlocks,{allowedBlocks:["woocommerce/product-gallery-large-image","woocommerce/product-gallery-thumbnails"],template:g})]})}));var w=o(4921);const b=({className:e})=>(0,d.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"8",height:"12",fill:"none",className:e,children:(0,d.jsx)("path",{fill:"currentColor",fillRule:"evenodd",d:"M6.445 12.005.986 6 6.445-.005l1.11 1.01L3.014 6l4.54 4.995-1.109 1.01Z",clipRule:"evenodd"})}),v=({className:e})=>(0,d.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"8",height:"12",fill:"none",className:e,children:(0,d.jsx)("path",{fill:"currentColor",fillRule:"evenodd",d:"M1.555-.004 7.014 6l-5.459 6.005-1.11-1.01L4.986 6 .446 1.005l1.109-1.01Z",clipRule:"evenodd"})}),f=JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"woocommerce/product-gallery-large-image-next-previous","title":"Next/Previous Buttons","description":"Display next and previous buttons.","category":"woocommerce","keywords":["WooCommerce"],"usesContext":["postId"],"textdomain":"woocommerce","supports":{"interactivity":true,"color":{"background":true,"text":true,"__experimentalSkipSerialization":true},"align":true,"layout":{"default":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"},"allowVerticalAlignment":true,"allowOrientation":false,"allowJustification":false},"shadow":true,"spacing":{"margin":true,"__experimentalSkipSerialization":true},"__experimentalBorder":{"radius":true,"__experimentalSkipSerialization":true},"__experimentalSelector":".wc-block-product-gallery-large-image-next-previous__button"},"ancestor":["woocommerce/product-gallery-large-image","woocommerce/product-collection"],"editorStyle":"file:../woocommerce/product-gallery-large-image-next-previous-editor.css"}');(0,r.registerBlockType)(f,{icon:()=>(0,d.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,d.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M6.22448 1.5L1.5 6.81504V11.7072L5.12953 9.06066C5.38061 8.87758 5.71858 8.86829 5.97934 9.0373L8.90601 10.9342L12.4772 7.46225C12.7683 7.17925 13.2317 7.17925 13.5228 7.46225L16.5 10.3568V2C16.5 1.72386 16.2761 1.5 16 1.5H6.22448ZM1.5 13.5636V16C1.5 16.2761 1.72386 16.5 2 16.5H16C16.2761 16.5 16.5 16.2761 16.5 16V12.4032L16.4772 12.4266L13 9.04603L9.52279 12.4266C9.27191 12.6706 8.88569 12.7086 8.59206 12.5183L5.59643 10.5766L1.5 13.5636ZM0 2C0 0.89543 0.895431 0 2 0H16C17.1046 0 18 0.895431 18 2V16C18 17.1046 17.1046 18 16 18H2C0.89543 18 0 17.1046 0 16V2Z",fill:"#1E1E1E"})}),edit:({attributes:e})=>{const t=(e=>{const t=e?.layout?.verticalAlignment;return"top"===t?"aligntop":"bottom"===t?"alignbottom":""})(e),{style:o,...r}=(0,c.useBlockProps)({className:(0,w.A)("wc-block-product-gallery-large-image-next-previous",t)}),l=(0,c.__experimentalUseBorderProps)(e),i=(0,c.__experimentalUseColorProps)(e),s=(0,c.__experimentalGetSpacingClassesAndStyles)(e),a=(0,c.__experimentalGetShadowClassesAndStyles)(e),n=(0,w.A)("wc-block-product-gallery-large-image-next-previous__button",l.className,i.className,s.className,a.className),u={...o,...l.style,...i.style,...s.style,...a.style};return(0,d.jsxs)("div",{...r,children:[(0,d.jsx)("button",{className:n,style:u,disabled:!0,children:(0,d.jsx)(b,{className:"wc-block-product-gallery-large-image-next-previous__icon wc-block-product-gallery-large-image-next-previous__icon--left"})}),(0,d.jsx)("button",{className:n,style:u,children:(0,d.jsx)(v,{className:"wc-block-product-gallery-large-image-next-previous__icon wc-block-product-gallery-large-image-next-previous__icon--right"})})]})},save:()=>(0,d.jsx)("div",{...c.useBlockProps.save()})}),o(8111),(e=>{const t=e.name;if(!t)return void console.error("registerProductBlockType: Block name is required for registration");const o=(({name:e,...t})=>t)(e),{isVariationBlock:r,variationName:l,isAvailableOnPostEditor:i,...a}={...o,...{isAvailableOnPostEditor:!0}||{}},c={blockName:t,settings:{...a},isVariationBlock:null!=r&&r,variationName:null!=l?l:void 0,isAvailableOnPostEditor:null!=i&&i};s.getInstance().registerBlockConfig(c)})({...a,icon:()=>(0,d.jsxs)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,d.jsx)("path",{d:"M19 3H5C4.4 3 4 3.4 4 4V11C4 11.5 4.4 12 5 12H19C19.5 12 20 11.6 20 11V4C20 3.4 19.6 3 19 3ZM5.5 10.5V10.1L7.3 8.8L8.6 9.6C8.9 9.8 9.3 9.8 9.5 9.5L11 8.1L13.4 10.5H5.5ZM18.5 10.5H15.6L11.6 6.5C11.3 6.2 10.8 6.2 10.5 6.5L8.9 8L7.7 7.2C7.4 7 7.1 7 6.8 7.2L5.5 8.2V4.5H18.5V10.5Z",fill:"currentColor"}),(0,d.jsx)("rect",{x:"4.75",y:"15.5",width:"5",height:"4.5",rx:"1",stroke:"currentColor",strokeWidth:"1.5",fill:"none"}),(0,d.jsx)("rect",{x:"12.25",y:"15.5",width:"5",height:"4.5",rx:"1",stroke:"currentColor",strokeWidth:"1.5",fill:"none"})]}),edit:h,save:()=>{const e=c.useBlockProps.save({className:"wc-block-product-gallery"}),t=c.useInnerBlocksProps.save(e);return(0,d.jsx)("div",{...t})}})},8111:(e,t,o)=>{var r=o(4997),l=o(790);var i=o(4921),s=o(4715);const a=window.wc.wcBlocksSharedContext;var c=o(6087);const n=window.wc.wcSettings;var u=o(7723),m=o(6427);const d=({attributes:e,setAttributes:t})=>{const{thumbnailSize:o,aspectRatio:r}=e,i=[{value:"",label:(0,u.__)("Select Aspect Ratio","woocommerce"),disabled:!0},{value:"auto",label:(0,u.__)("Auto","woocommerce")},{value:"1",label:(0,u.__)("Square - 1:1","woocommerce")},{value:"4/3",label:(0,u.__)("Standard - 4:3","woocommerce")},{value:"3/4",label:(0,u.__)("Portrait - 3:4","woocommerce")},{value:"3/2",label:(0,u.__)("Classic - 3:2","woocommerce")},{value:"2/3",label:(0,u.__)("Classic Portrait - 2:3","woocommerce")},{value:"16/9",label:(0,u.__)("Wide - 16:9","woocommerce")},{value:"9/16",label:(0,u.__)("Tall - 9:16","woocommerce")}];return(0,l.jsxs)(m.PanelBody,{children:[(0,l.jsx)(m.__experimentalUnitControl,{label:(0,u.__)("Thumbnail Size","woocommerce"),value:o,onChange:e=>{const o=Number(e?.replace("%","")||25),r=Math.min(Math.max(o,10),50);t({thumbnailSize:r+"%"})},units:[{value:"%",label:"%"}],min:10,max:50,step:1,size:"default",__next40pxDefaultSize:!0,help:(0,u.__)("Choose the size of each thumbnail in respect to the product image. If thumbnails container size gets bigger than the product image, thumbnails will turn to slider.","woocommerce")}),(0,l.jsx)(m.SelectControl,{__next40pxDefaultSize:!0,multiple:!1,value:r,options:i,label:(0,u.__)("Aspect Ratio","woocommerce"),onChange:e=>{t({aspectRatio:e})},help:(0,u.__)("Applies the selected aspect ratio to product thumbnails.","woocommerce")})]})},p=JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"woocommerce/product-gallery-thumbnails","title":"Thumbnails","description":"Display the Thumbnails of a product.","category":"woocommerce","keywords":["WooCommerce"],"usesContext":["postId"],"textdomain":"woocommerce","ancestor":["woocommerce/product-gallery"],"attributes":{"thumbnailSize":{"type":"string","default":"25%"},"aspectRatio":{"type":"string","default":"1"}},"supports":{"spacing":{"margin":true},"interactivity":true},"editorStyle":"file:../woocommerce/product-gallery-thumbnails-editor.css"}');(0,r.registerBlockType)(p,{icon:()=>(0,l.jsx)("svg",{width:"19",height:"19",viewBox:"0 0 19 19",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,l.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M13.375 1.5H1.625C1.55596 1.5 1.5 1.55596 1.5 1.625V9.87895L4.35871 8.33965C4.5696 8.22609 4.82204 8.22009 5.03808 8.3235L7.42329 9.46513L10.3126 7.39076C10.574 7.20308 10.926 7.20308 11.1874 7.39076L13.5 9.05108V1.625C13.5 1.55596 13.444 1.5 13.375 1.5ZM13.5 10.8976L10.75 8.92328L7.93741 10.9426C7.71497 11.1023 7.42319 11.1281 7.1762 11.0098L4.73428 9.84105L1.5 11.5826V13.375C1.5 13.444 1.55596 13.5 1.625 13.5H13.375C13.444 13.5 13.5 13.444 13.5 13.375V10.8976ZM1.625 0C0.727537 0 0 0.727538 0 1.625V13.375C0 14.2725 0.727538 15 1.625 15H13.375C14.2725 15 15 14.2725 15 13.375V1.625C15 0.727537 14.2725 0 13.375 0H1.625ZM17.25 5V16C17.25 16.6909 16.6909 17.25 16.0011 17.25H3V18.75H16.0011C17.5204 18.75 18.75 17.5183 18.75 16V5H17.25Z",fill:"#1E1E1E"})}),edit:({attributes:e,setAttributes:t})=>{const{thumbnailSize:o,aspectRatio:r}=e,u=(0,a.useProductDataContext)(),m=u?.product,p=Boolean(m?.id)?(g=m?.images,g.slice(0,10).map((e=>({src:e?.src,alt:e?.alt})))):Array(10).fill({src:n.PLACEHOLDER_IMG_SRC,alt:""});var g;const h=p.length>1,w=(0,c.useRef)(null),[b,v]=(0,c.useState)({bottom:!1,right:!1});(0,c.useEffect)((()=>{const e=w.current;if(!e)return;const t=new ResizeObserver((()=>{const t=(e=>{if(!e)return{top:!1,bottom:!1,left:!1,right:!1};const{scrollTop:t,scrollHeight:o,clientHeight:r,scrollLeft:l,scrollWidth:i,clientWidth:s}=e;return{top:t>3,bottom:t+r<o-3,left:l>3,right:l+s<i-3}})(e);v(t)}));return t.observe(e),e.parentElement&&t.observe(e.parentElement),()=>{t.disconnect()}}),[o]);const f=Number(o.replace("%","")),x=(0,i.A)("wc-block-product-gallery-thumbnails",`wc-block-product-gallery-thumbnails--thumbnails-size-${f}`,{"wc-block-product-gallery-thumbnails--overflow-right":b.right,"wc-block-product-gallery-thumbnails--overflow-bottom":b.bottom}),y=(0,s.useBlockProps)({className:x}),k={aspectRatio:r};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(s.InspectorControls,{children:(0,l.jsx)(d,{attributes:e,setAttributes:t})}),h&&(0,l.jsx)("div",{...y,children:(0,l.jsx)("div",{ref:w,className:"wc-block-product-gallery-thumbnails__scrollable",children:p.map((({src:e,alt:t},o)=>{const r=(0,i.A)("wc-block-product-gallery-thumbnails__thumbnail__image",{"wc-block-product-gallery-thumbnails__thumbnail__image--is-active":0===o});return(0,l.jsx)("div",{className:"wc-block-product-gallery-thumbnails__thumbnail",children:(0,l.jsx)("img",{className:r,src:e,alt:t,loading:"lazy",style:k})},o)}))})})]})},save:()=>null})},790:e=>{e.exports=window.ReactJSXRuntime},4715:e=>{e.exports=window.wp.blockEditor},4997:e=>{e.exports=window.wp.blocks},6427:e=>{e.exports=window.wp.components},6087:e=>{e.exports=window.wp.element},7723:e=>{e.exports=window.wp.i18n}},l={};function i(e){var t=l[e];if(void 0!==t)return t.exports;var o=l[e]={exports:{}};return r[e].call(o.exports,o,o.exports,i),o.exports}i.m=r,e=[],i.O=(t,o,r,l)=>{if(!o){var s=1/0;for(u=0;u<e.length;u++){for(var[o,r,l]=e[u],a=!0,c=0;c<o.length;c++)(!1&l||s>=l)&&Object.keys(i.O).every((e=>i.O[e](o[c])))?o.splice(c--,1):(a=!1,l<s&&(s=l));if(a){e.splice(u--,1);var n=r();void 0!==n&&(t=n)}}return t}l=l||0;for(var u=e.length;u>0&&e[u-1][2]>l;u--)e[u]=e[u-1];e[u]=[o,r,l]},i.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return i.d(t,{a:t}),t},o=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,i.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var l=Object.create(null);i.r(l);var s={};t=t||[null,o({}),o([]),o(o)];for(var a=2&r&&e;"object"==typeof a&&!~t.indexOf(a);a=o(a))Object.getOwnPropertyNames(a).forEach((t=>s[t]=()=>e[t]));return s.default=()=>e,i.d(l,s),l},i.d=(e,t)=>{for(var o in t)i.o(t,o)&&!i.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=6749,(()=>{var e={6565:0,6749:0};i.O.j=t=>0===e[t];var t=(t,o)=>{var r,l,[s,a,c]=o,n=0;if(s.some((t=>0!==e[t]))){for(r in a)i.o(a,r)&&(i.m[r]=a[r]);if(c)var u=c(i)}for(t&&t(o);n<s.length;n++)l=s[n],i.o(e,l)&&e[l]&&e[l][0](),e[l]=0;return i.O(u)},o=globalThis.webpackChunkwebpackWcBlocksMainJsonp=globalThis.webpackChunkwebpackWcBlocksMainJsonp||[];o.forEach(t.bind(null,0)),o.push=t.bind(null,o.push.bind(o))})();var s=i.O(void 0,[94],(()=>i(612)));s=i.O(s),((this.wc=this.wc||{}).blocks=this.wc.blocks||{})["product-gallery"]=s})();
Save
Back