"use strict";(self.webpackChunkcoblocks=self.webpackChunkcoblocks||[]).push([[495],{2495:function(e,t,l){l.r(t),l.d(t,{default:function(){return R}});var o=l(9196),n=l(4184),a=l.n(n),c=l(5736),i=[{
/* translators: visual style option */
label:(0,c.__)("Dark","coblocks"),value:"dark"},{
/* translators: visual style option */
label:(0,c.__)("Light","coblocks"),value:"light"},{
/* translators: visual style option */
label:(0,c.__)("None","coblocks"),value:"none"}],s=l(5697),r=l.n(s),u=[{label:(0,c.__)("None","coblocks"),value:"none"},{label:(0,c.__)("Media file","coblocks"),value:"media"},{label:(0,c.__)("Attachment page","coblocks"),value:"attachment"},{label:(0,c.__)("Custom URL","coblocks"),value:"custom"}],b=l(9307),m=l(5609);class p extends b.Component{constructor(){super(...arguments),this.setNewTab=this.setNewTab.bind(this),this.setLinkRel=this.setLinkRel.bind(this),this.setLinkTo=this.setLinkTo.bind(this)}componentDidUpdate(e){const{attributes:t,setAttributes:l}=this.props,{lightbox:o}=t;"none"!==e.attributes.linkTo&&o&&l({linkTo:"none"})}setLinkTo(e){const{setAttributes:t}=this.props;t({linkTo:e})}setLinkRel(e){const{setAttributes:t}=this.props;t({rel:e})}setNewTab(e){const{attributes:t,setAttributes:l}=this.props,{rel:o}=t,n=e?"_blank":void 0;let a=o;n&&!o?a="noreferrer noopener":n||"noreferrer noopener"!==o||(a=void 0),l({rel:a,target:n})}render(){const{attributes:e,setAttributes:t}=this.props,{lightbox:l,linkTo:n,target:a,rel:i}=e;return(0,o.createElement)(b.Fragment,null,!l&&(0,o.createElement)(m.PanelBody,{initialOpen:!1,title:(0,c.__)("Link settings","coblocks")},(0,o.createElement)(m.SelectControl,{label:(0,c.__)("Link to","coblocks"),onChange:this.setLinkTo,options:u,value:n}),"none"!==n&&(0,o.createElement)(b.Fragment,null,(0,o.createElement)(m.ToggleControl,{checked:"_blank"===a,label:(0,c.__)("Open in new tab","coblocks"),onChange:this.setNewTab}),(0,o.createElement)(m.TextControl
/* translators: html attribute that specifies the relationship between two pages */,{label:(0,c.__)("Link rel","coblocks"),onChange:e=>t({rel:e}),value:i}))))}}p.propTypes={attributes:r().object,setAttributes:r().func};var _=p,g=l(5629);const k=[{
/* translators: abbreviation for small size */
label:(0,c.__)("S","coblocks"),tooltip:(0,c.__)("Small","coblocks"),value:"small"},{
/* translators: abbreviation for medium size */
label:(0,c.__)("M","coblocks"),tooltip:(0,c.__)("Medium","coblocks"),value:"medium"},{
/* translators: abbreviation for large size */
label:(0,c.__)("L","coblocks"),tooltip:(0,c.__)("Large","coblocks"),value:"large"}],d=e=>{const{attributes:t,setAttributes:l}=e,{align:n,gutter:a,gutterCustom:i}=t,s="full"===n?10:5;return(0,b.useEffect)((()=>{i>s&&l({gutterCustom:s})}),[i,s]),(0,o.createElement)(o.Fragment,null,(0,o.createElement)(g.Z,{currentOption:a,label:(0,c.__)("Gutter","coblocks"),onChange:e=>l({gutter:e}),options:k,showCustomOption:!0}),"custom"===a&&(0,o.createElement)(m.RangeControl,{initialValue:0,max:s,min:0,onChange:e=>l({gutterCustom:e.toString()}),step:.1,value:parseFloat(i)||0,withInputField:!0}))};var h=d;d.propTypes={attributes:r().object,setAttributes:r().func};var E=l(2175),v=e=>{const{attributes:t,setAttributes:l,enableGutter:n,enableCaptions:a}=e,{shadow:s,captions:r,captionStyle:u,lightbox:b}=t,p=[{value:"sm",
/* translators: abbreviation for small size */
label:(0,c.__)("S","coblocks"),tooltip:(0,c.__)("Small","coblocks")},{value:"md",
/* translators: abbreviation for medium size */
label:(0,c.__)("M","coblocks"),tooltip:(0,c.__)("Medium","coblocks")},{value:"lg",
/* translators: abbreviation for large size */
label:(0,c.__)("L","coblocks"),tooltip:(0,c.__)("Large","coblocks")}];return(0,o.createElement)(E.InspectorControls,null,(0,o.createElement)(m.PanelBody,{title:(0,c.__)("Collage settings","coblocks")},n&&(0,o.createElement)(h,{...e}),!n&&(0,o.createElement)(g.Z,{currentOption:s,label:(0,c.__)("Shadow","coblocks"),onChange:e=>{l({shadow:e})},options:p,showNoneOption:!0}),(0,o.createElement)(m.ToggleControl,{checked:!!b,help:e=>e?(0,c.__)("Image lightbox is enabled.","coblocks"):(0,c.__)("Toggle to enable the image lightbox.","coblocks"),label:(0,c.__)("Lightbox","coblocks"),onChange:()=>l({lightbox:!b})}),a&&(0,o.createElement)(m.ToggleControl,{checked:!!r,help:e=>e?(0,c.__)("Showing captions for each media item.","coblocks"):(0,c.__)("Toggle to show media captions.","coblocks"),label:(0,c.__)("Captions","coblocks"),onChange:()=>l({captions:!r})}),r&&(0,o.createElement)(m.SelectControl,{label:(0,c.__)("Caption style","coblocks"),onChange:e=>{l({captionStyle:e})},options:i,value:u})),(0,o.createElement)(_,{...e}))},f=l(2819),C=l.n(f),w=l(7635),y=l(9818);const T=({hoveredFilter:e})=>{if(!e)return null;const t=C().cloneDeep((0,y.select)("core/block-editor").getSelectedBlock());return t.attributes.filter=e,(0,o.createElement)("div",{className:"block-editor-block-switcher__popover__preview__parent"},(0,o.createElement)("div",{className:"block-editor-block-switcher__popover__preview__container"},(0,o.createElement)(m.Popover,{className:"block-editor-block-switcher__preview__popover coblocks-image-filter-popover",focusOnMount:!1,position:"bottom right"},(0,o.createElement)("div",{className:"block-editor-block-switcher__preview coblocks__preview"},(0,o.createElement)("div",{className:"block-editor-block-switcher__preview-title"},(0,c.__)("Preview filter","coblocks")),(0,o.createElement)(E.BlockPreview,{autoHeight:!0,blocks:{...t}})))))},N=e=>{const[t,l]=(0,b.useState)(null),n=e=>{l(e)},{attributes:i,setAttributes:s}=e,{filter:r}=i,u=[{icon:(0,o.createElement)(m.Icon,{icon:w.mJk}),isActive:"none"===r,onClick:()=>{s({filter:"none"})},slug:"none",
/* translators: image style */
title:(0,c.__)("Original","coblocks")},{icon:(0,o.createElement)(m.Icon,{icon:w.NC1}),isActive:"grayscale"===r,onClick:()=>{s({filter:"grayscale"})},slug:"grayscale",
/* translators: image style */
title:(0,c.__)("Grayscale filter","coblocks")},{icon:(0,o.createElement)(m.Icon,{icon:w.amg}),isActive:"sepia"===r,onClick:()=>{s({filter:"sepia"})},slug:"sepia",
/* translators: image style */
title:(0,c.__)("Sepia filter","coblocks")},{icon:(0,o.createElement)(m.Icon,{icon:w.swD}),isActive:"saturation"===r,onClick:()=>{s({filter:"saturation"})},slug:"saturation",
/* translators: image style */
title:(0,c.__)("Saturation filter","coblocks")},{icon:(0,o.createElement)(m.Icon,{icon:w.tu4}),isActive:"dim"===r,onClick:()=>{s({filter:"dim"})},slug:"dim",
/* translators: image style */
title:(0,c.__)("Dim filter","coblocks")},{icon:(0,o.createElement)(m.Icon,{icon:w.jZD}),isActive:"vintage"===r,onClick:()=>{s({filter:"vintage"})},slug:"vintage",
/* translators: image style */
title:(0,c.__)("Vintage filter","coblocks")}];return(0,o.createElement)(m.ToolbarGroup,null,(0,o.createElement)(m.DropdownMenu,{className:a()("components-coblocks-media-filter","none"!==r?"has-filter":""),icon:(0,o.createElement)(m.Icon,{icon:w.AF8}),label:(0,c.__)("Apply filter","coblocks"),noIcons:!0,popoverProps:{className:"components-coblocks-dropdown"}},(()=>(0,o.createElement)(m.MenuGroup,null,(0,o.createElement)(T,{hoveredFilter:t}),u.map((e=>(0,o.createElement)(m.MenuItem,{icon:e.icon,isSelected:r===e.slug,key:`coblocks-image-filter-${e.slug}`,label:e.title,onClick:e.onClick,onMouseEnter:()=>n(e.slug),onMouseLeave:()=>n(null),role:"menuitemradio"},e.title)))))))};var S=N;N.propTypes={attributes:r().object,setAttributes:r().func};var I=e=>{const{attributes:t}=e,{images:l}=t,n=!!l.filter((e=>void 0!==e.id)).length;return(0,o.createElement)(E.BlockControls,null,n&&(0,o.createElement)(S,{...e}))},L=l(2547),A=l(3264),x=l(2238);const D=e=>{const{noticeOperations:t,onSelect:l,label:n}=e;return(0,o.createElement)(m.DropZone,{label:n,onFilesDrop:e=>{(0,x.mediaUpload)({allowedTypes:L.o2,filesList:e,onError:t.createErrorNotice,onFileChange:e=>l(e)})}})};D.propTypes={label:r().string,noticeOperations:r().object,onSelect:r().func};var F=D,M=l(4333),B=l(1313),O=l(7231),R=(0,M.compose)([m.withNotices])((e=>{const{attributes:t,className:l,isSelected:n,noticeUI:i,setAttributes:s}=e,[r,u]=(0,b.useState)(null),[p,_]=(0,b.useState)(null),[g,k]=(0,b.useState)(!1),d=(0,M.usePrevious)(l),h=(0,M.usePrevious)(n);(0,b.useEffect)((()=>{l!==d&&(l.includes("is-style-layered")?(_(t.gutter),s({gutter:"small"})):(_(null),s({shadow:"none",gutter:p||t.gutter})))}),[l,d]),(0,b.useEffect)((()=>{n!==h&&!1===n&&u(null)}),[n,h]);const f=e=>t.images.find((t=>parseInt(t.index)===parseInt(e))),C=t=>{const{noticeOperations:l}=e;l.removeAllNotices(),l.createErrorNotice(t)},w=(e,l)=>{const o=[...t.images.filter((e=>parseInt(e.index)!==parseInt(l))),{...L.oj(e),index:l}];s({images:o})},y=(e,l)=>{const o=f(e),n=[...t.images.filter((t=>parseInt(t.index)!==parseInt(e))),Object.assign({},o,l)];s({images:n})},T=()=>{k(!0)},N=e=>{const i=f(e),b=n&&r===i.index,p=!l.includes("is-style-layered"),_=(0,o.createElement)(m.DropZone,{label:(0,c.__)("Drop image to replace","coblocks"),onFilesDrop:t=>((e,t)=>{(0,x.mediaUpload)({allowedTypes:["image"],filesList:e,onFileChange:([e])=>w(e,t),onError:C})})(t,e)});return(0,o.createElement)(o.Fragment,null,(0,o.createElement)("a",{onClick:()=>(e=>{r!==e&&u(e)})(i.index),role:"button",tabIndex:"0"},(0,o.createElement)("figure",{className:a()({"wp-block-coblocks-gallery-collage__figure":!0,"is-transient":(0,B.isBlobURL)(i.url),"is-selected":b,[`shadow-${t.shadow}`]:t.shadow})},b&&(0,o.createElement)(o.Fragment,null,(0,o.createElement)(m.ButtonGroup,{className:"block-library-gallery-item__inline-menu is-right is-visible"},(0,o.createElement)(E.MediaUploadCheck,null,(0,o.createElement)(E.MediaUpload,{allowedTypes:["image"],onSelect:t=>w(t,e),render:({open:e})=>(0,o.createElement)(m.Button,{className:"coblocks-gallery-item__button-replace",label:(0,c.__)("Replace Image","coblocks"),onClick:e},(0,c.__)("Replace","coblocks")),value:i.url})),(0,o.createElement)(m.Button,{disabled:!b,icon:O.Z,label:(0,c.__)("Remove image","coblocks"),onClick:()=>(e=>{const l=[...t.images.filter((t=>parseInt(t.index)!==parseInt(e)))];s({images:l})})(e)}))),r===i.index&&"custom"===t.linkTo&&(0,o.createElement)("form",{className:"components-coblocks-gallery-item__image-link",onSubmit:e=>e.preventDefault()},(0,o.createElement)(m.Dashicon,{icon:"admin-links"}),(0,o.createElement)(E.URLInput,{onChange:t=>y(e,{imgLink:t}),value:i.imgLink}),(0,o.createElement)(m.Button,{icon:g?"saved":"editor-break",label:g?(0,c.__)("Saving","coblocks"):(0,c.__)("Apply","coblocks"),onClick:T,type:"submit"})),_,(0,B.isBlobURL)(i.url)&&(0,o.createElement)(m.Spinner,null),(0,o.createElement)("img",{alt:i.alt,src:i.url}),p&&t.captions&&(i.caption||b)&&(0,o.createElement)(E.RichText,{className:"coblocks-gallery--caption",inlineToolbar:!0,isSelected:b,onChange:t=>y(e,{caption:t}),placeholder:(0,c.__)("Write caption…","coblocks"),tagName:"figcaption",value:i.caption}))))},S=l=>{const n=!!f(l),c=a()("wp-block-coblocks-gallery-collage__figure",{[`shadow-${t.shadow}`]:t.shadow});return(0,o.createElement)(E.MediaPlaceholder,{accept:"image/*",addToGallery:!0,allowedTypes:["image"],className:c,disableDropZone:!0,disableMediaButtons:n,icon:!1,labels:{title:" ",instructions:" "},multiple:!1,onError:C,onSelect:e=>w(e,l)},(0,o.createElement)(F,{...e,label:"Drop file to upload",onSelect:([e])=>w(e,l)}))},{animation:D,captions:R,captionStyle:U,filter:P,lightbox:G}=t,Z=!l.includes("is-style-layered"),$=!l.includes("is-style-layered"),j=[];for(let e=0;e<(["is-style-tiled","is-style-layered"].includes(t.className)?4:5);e++){const t=f(e);j.push((0,o.createElement)("li",{className:a()("wp-block-coblocks-gallery-collage__item",`item-${e+1}`,{[`coblocks-animate ${D}`]:D,"is-selected":e===parseInt(r)}),key:`image-${e}`},t?N(e):S(e)))}return(0,o.createElement)(o.Fragment,null,(0,o.createElement)(I,{...e}),(0,o.createElement)(v,{...e,enableCaptions:$,enableGutter:Z}),i,(0,o.createElement)(A.Z,{...t},(0,o.createElement)("div",{className:a()(l,{[`has-filter-${P}`]:"none"!==P,[`has-caption-style-${U}`]:R&&void 0!==U,"has-lightbox":G})},(0,o.createElement)("ul",null,j))))}))}}]);