WordPress.org
Get WordPress

Plugin Directory

Changeset 2892984


Ignore:
Timestamp:
04/03/2023 05:42:30 PM (3 years ago)
Author:
cabezi
Message:

Version 1.2

Location:
flexblocks/trunk
Files:
12 edited

Legend:

Unmodified
Added
Removed

  • flexblocks/trunk/blocks/flexitem/build/index.asset.php

    r2872685 r2892984  
    1 <?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'e7032012edf3c2024ffef5e22cf1a252');
     1<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '3e6ead1367ce97e7be654fec5cffc916');

  • flexblocks/trunk/blocks/flexitem/build/index.js

    r2872685 r2892984  
    1 !function(){"use strict";var e=window.wp.blocks,l=window.wp.element,a=window.wp.i18n,t=window.wp.blockEditor,n=window.wp.components;function o(e){let l=arguments.length>1&&void 0!==arguments[1]&&arguments[1];const a=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;e=e.replace(a,(function(e,l,a,t){return l+l+a+a+t+t}));const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e),n=t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null;return n?l?`rgb(${n.r}, ${n.g}, ${n.b})`:`${n.r} ${n.g} ${n.b}`:null}function i(){return i=Object.assign||function(e){for(var l=1;l<arguments.length;l++){var a=arguments[l];for(var t in a)Object.prototype.hasOwnProperty.call(a,t)&&(e[t]=a[t])}return e},i.apply(this,arguments)}(0,e.registerBlockType)("cabezi/flexitem",{attributes:{alignItems:{type:"string",default:"normal"},alignItemsResponsive:{type:"string",default:"normal"},alignSelf:{type:"string",default:"auto"},alignSelfResponsive:{type:"string",default:"auto"},backgroundBlurEnabled:{type:"boolean",default:!1},backgroundBlurPixels:{type:"string",default:"0px"},backgroundAttachment:{type:"string",default:"scroll"},backgroundRepeat:{type:"string",default:"repeat"},bgColor:{type:"string",default:""},borderStyle:{type:"string",default:"none"},borderWidth:{type:"string",default:"1px"},borderColor:{type:"string",default:"initial"},borderRadius:{type:"string",default:"0px"},breakPoint:{type:"string",default:"768px"},boxShadowEnabled:{type:"boolean",default:!1},boxShadowOffsetX:{type:"string",default:"3px"},boxShadowOffsetY:{type:"string",default:"3px"},boxShadowBlurRadius:{type:"string",default:"3px"},boxShadowColor:{type:"string",default:"#000"},dropShadowEnabled:{type:"boolean",default:!1},dropShadowOffsetX:{type:"string",default:"3px"},dropShadowOffsetY:{type:"string",default:"3px"},dropShadowBlurRadius:{type:"string",default:"3px"},dropShadowColor:{type:"string",default:"#000"},dropShadowColorOpacity:{type:"string",default:"30%"},eagerLoadImages:{type:"boolean",default:!1},enableBreakPoint:{type:"boolean",default:!1},flexDirection:{type:"string",default:"row"},flexDirectionResponsive:{type:"string",default:"column"},flexGrow:{type:"string",default:"0"},flexShrink:{type:"string",default:"1"},flexBasis:{type:"string",default:"auto"},flexBasisCustom:{type:"string",default:"100%"},flexWrap:{type:"string",default:"nowrap"},flexWrapResponsive:{type:"string",default:"nowrap"},fontFamily:{type:"string"},gap:{type:"string",default:"0px"},overflow:{type:"string",default:"visible"},hideAtBreakPoint:{type:"boolean",default:!1},hideAboveBreakPoint:{type:"boolean",default:!1},inlineBgImage:{type:"string"},justifyContent:{type:"string",default:"normal"},justifyContentResponsive:{type:"string",default:"normal"},justifySelf:{type:"string",default:"auto"},justifySelfResponsive:{type:"string",default:"auto"},link:{type:"string",default:"/"},linkEnabled:{type:"boolean",default:!1},margin:{type:"object",default:{top:"0rem",right:"0rem",bottom:"0rem",left:"0rem"}},minHeight:{type:"string"},maxHeight:{type:"string"},minWidth:{type:"string"},maxWidth:{type:"string"},position:{type:"string",default:"relative"},positionOverrides:{type:"object"},padding:{type:"object",default:{top:"0rem",right:"0rem",bottom:"0rem",left:"0rem"}},revealDisabledMobile:{type:"boolean",default:!1},revealType:{type:"string",default:"none"},revealDuration:{type:"integer",default:200},revealDelay:{type:"integer",default:0},revealEasingFunction:{type:"string",default:"linear"},rotate:{type:"integer",default:0},uuid:{type:"string"},zIndex:{type:"integer",default:0}},edit:function(e){let{attributes:i,setAttributes:r,clientId:s}=e;i.uuid!==s&&r({uuid:s});const u={display:"flex",...i.bgColor&&{backgroundColor:i.bgColor},...i.backgroundBlurEnabled&&{backdropFilter:`blur(${i.backgroundBlurPixels})`},borderStyle:`${"none"===i.borderStyle?"solid":i.borderStyle}`,...i.borderWidth&&{borderWidth:i.borderWidth},borderColor:`${"none"===i.borderStyle?"lightgray":i.borderColor}`,...i.borderRadius&&{borderRadius:i.borderRadius},...i.boxShadowEnabled&&{boxShadow:`${i.boxShadowOffsetX} ${i.boxShadowOffsetY} ${i.boxShadowBlurRadius} ${i.boxShadowColor||"#FFF"}`},...i.dropShadowEnabled&&{filter:`drop-shadow(${i.dropShadowOffsetX} ${i.dropShadowOffsetY} ${i.dropShadowBlurRadius} rgba(${o(i.dropShadowColor||"#FFF")} / ${i.dropShadowColorOpacity||"100%"}))`},...i.fontFamily&&{fontFamily:i.fontFamily},...i.gap&&{gap:i.gap},...i.overflow&&{overflow:i.overflow},...i.inlineBgImage&&{backgroundImage:`url(${i.inlineBgImage})`,backgroundRepeat:`${i.backgroundRepeat}`,backgroundAttachment:`${i.backgroundAttachment}`,backgroundPosition:"50% 50%",backgroundSize:"repeat"===i.backgroundRepeat?"auto":"cover"},flex:`${i.flexGrow} ${i.flexShrink} ${"custom"===i.flexBasis?i.flexBasisCustom:i.flexBasis}`,...i.minHeight&&{minHeight:i.minHeight},...i.maxHeight&&{maxHeight:i.maxHeight},...i.minWidth&&{minWidth:i.minWidth},...i.maxWidth&&{maxWidth:i.maxWidth},marginTop:`calc(${i.margin.top} + 30px)`,marginBottom:`calc(${i.margin.bottom} + 30px)`,...i.margin.right&&{marginRight:i.margin.right},...i.margin.left&&{marginLeft:i.margin.left},...i.padding.top&&{paddingTop:i.padding.top},...i.padding.right&&{paddingRight:i.padding.right},paddingBottom:`calc(${i.padding.bottom} + 45px)`,...i.padding.left&&{paddingLeft:i.padding.left},...i.position&&{position:i.position},...i.positionOverrides?.top&&{top:i.positionOverrides?.top},...i.positionOverrides?.bottom&&{bottom:i.positionOverrides?.bottom},...i.positionOverrides?.left&&{left:i.positionOverrides?.left},...i.positionOverrides?.right&&{right:i.positionOverrides?.right},...i.rotate&&{transform:`rotate(${i.rotate}deg)`},...i.zIndex&&{zIndex:i.zIndex}},d=(0,t.useBlockProps)({className:`cabezi-block cabezi-${i.uuid}`,style:u}),c=(0,t.useInnerBlocksProps)(d,{__experimentalDirectInsert:!0,templateInsertUpdatesSelection:!0,renderAppender:e=>(0,l.createElement)("div",{style:{margin:".5rem"}},(0,l.createElement)(t.InnerBlocks.ButtonBlockAppender,e))});return(0,l.createElement)(l.Fragment,null,(0,l.createElement)(t.InspectorControls,{key:"setting"},(0,l.createElement)(n.Panel,null,(0,l.createElement)(n.PanelBody,{title:(0,a.__)("General Settings","flexitem"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Overflow",value:i.overflow,options:[{label:"Auto",value:"auto"},{label:"Hidden",value:"hidden"},{label:"Visible",value:"visible"},{label:"Scroll",value:"scroll"}],onChange:e=>{r({overflow:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.__experimentalInputControl,{label:(0,l.createElement)(l.Fragment,null,"Font Family ",(0,l.createElement)(n.Tooltip,{position:"top center",text:(0,a.__)("Font Family Must Be Loaded By Theme, Plugin, or Front End Framework!")},(0,l.createElement)(n.Dashicon,{icon:"editor-help"}))),value:i.fontFamily,onChange:e=>{r({fontFamily:e})},type:"text"}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Responsive Break Point?",checked:i.enableBreakPoint,onChange:e=>{r({enableBreakPoint:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Rotate Angle","flexitem")),(0,l.createElement)(n.AnglePickerControl,{value:i.rotate,onChange:e=>{r({rotate:e})}}))),i.enableBreakPoint&&(0,l.createElement)(l.Fragment,null,(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Hide Below Break Point",checked:i.hideAtBreakPoint,onChange:e=>{r({hideAtBreakPoint:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Hide Above Break Point",checked:i.hideAboveBreakPoint,onChange:e=>{r({hideAboveBreakPoint:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Responsive Break Point","flexitem")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.breakPoint,onChange:e=>{r({breakPoint:e})},units:[{value:"px",label:"px",default:768}]})))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Enable Link",checked:i.linkEnabled,onChange:e=>{r({linkEnabled:e})}}))),i.linkEnabled&&(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.__experimentalInputControl,{label:"Link URL",value:i.link,onChange:e=>{r({link:e})},type:"text"}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Eager Load Images",checked:i.eagerLoadImages,onChange:e=>{r({eagerLoadImages:e})}})))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Flex Options","flexitem"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Flex Direction",value:i.flexDirection,options:[{label:"row",value:"row"},{label:"row-reverse",value:"row-reverse"},{label:"column",value:"column"},{label:"column-reverse",value:"column-reverse"}],onChange:e=>{r({flexDirection:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Justify Content",value:i.justifyContent,options:[{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"left",value:"left"},{label:"right",value:"right"},{label:"space-between",value:"space-between"},{label:"space-around",value:"space-around"},{label:"space-evenly",value:"space-evenly"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{r({justifyContent:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Align Items",value:i.alignItems,options:[{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"start",value:"start"},{label:"end",value:"end"},{label:"self-start",value:"self-start"},{label:"self-end",value:"self-end"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{r({alignItems:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Justify Self",value:i.justifySelf,options:[{label:"auto",value:"auto"},{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"left",value:"left"},{label:"right",value:"right"},{label:"space-between",value:"space-between"},{label:"space-around",value:"space-around"},{label:"space-evenly",value:"space-evenly"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{r({justifySelf:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Align Self",value:i.alignSelf,options:[{label:"auto",value:"auto"},{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"start",value:"start"},{label:"end",value:"end"},{label:"self-start",value:"self-start"},{label:"self-end",value:"self-end"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{r({alignSelf:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Flex Wrap",value:i.flexWrap,options:[{label:"wrap",value:"wrap"},{label:"nowrap",value:"nowrap"},{label:"wrap-reverse",value:"wrap-reverse"}],onChange:e=>{r({flexWrap:e})}}))),i.enableBreakPoint&&(0,l.createElement)(l.Fragment,null,(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Flex Direction (Responsive)",value:i.flexDirectionResponsive,options:[{label:"row",value:"row"},{label:"row-reverse",value:"row-reverse"},{label:"column",value:"column"},{label:"column-reverse",value:"column-reverse"}],onChange:e=>{r({flexDirectionResponsive:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Justify Content (Responsive)",value:i.justifyContentResponsive,options:[{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"left",value:"left"},{label:"right",value:"right"},{label:"space-between",value:"space-between"},{label:"space-around",value:"space-around"},{label:"space-evenly",value:"space-evenly"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{r({justifyContentResponsive:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Align Items (Responsive)",value:i.alignItemsResponsive,options:[{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"start",value:"start"},{label:"end",value:"end"},{label:"self-start",value:"self-start"},{label:"self-end",value:"self-end"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{r({alignItemsResponsive:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Flex Wrap (Responsive)",value:i.flexWrapResponsive,options:[{label:"wrap",value:"wrap"},{label:"nowrap",value:"nowrap"},{label:"wrap-reverse",value:"wrap-reverse"}],onChange:e=>{r({flexWrapResponsive:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Justify Self (Responsive)",value:i.justifySelfResponsive,options:[{label:"auto",value:"auto"},{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"left",value:"left"},{label:"right",value:"right"},{label:"space-between",value:"space-between"},{label:"space-around",value:"space-around"},{label:"space-evenly",value:"space-evenly"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{r({justifySelfResponsive:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Align Self (Responsive)",value:i.alignSelfResponsive,options:[{label:"auto",value:"auto"},{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"start",value:"start"},{label:"end",value:"end"},{label:"self-start",value:"self-start"},{label:"self-end",value:"self-end"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{r({alignSelfResponsive:e})}}))))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Color Options","flexitem"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Background Color","flexitem")),(0,l.createElement)(n.ColorPicker,{color:i.bgColor,onChange:e=>{r({bgColor:e})},enableAlpha:!0}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Enable Background Blur",checked:i.backgroundBlurEnabled,onChange:e=>{r({backgroundBlurEnabled:e})}}))),i.backgroundBlurEnabled&&(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Background Blur Pixels","flexitem")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.backgroundBlurPixels,onChange:e=>{r({backgroundBlurPixels:e})},units:[{value:"px",label:"px",default:0}]})))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Border Options","flexitem"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Border Style",value:i.borderStyle,options:[{label:"dotted",value:"dotted"},{label:"dashed",value:"dashed"},{label:"solid",value:"solid"},{label:"double",value:"double"},{label:"groove",value:"groove"},{label:"ridge",value:"ridge"},{label:"inset",value:"inset"},{label:"outset",value:"outset"},{label:"none",value:"none"},{label:"hidden",value:"hidden"}],onChange:e=>{r({borderStyle:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Border Width","flexitem")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.borderWidth,onChange:e=>{r({borderWidth:e})},units:[{value:"px",label:"px",default:1},{value:"rem",label:"rem",default:.1}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Border Color","flexitem")),(0,l.createElement)(t.ColorPalette,{onChange:e=>{r({borderColor:e})},value:i.borderColor}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Border Radius","flexitem")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.borderRadius,onChange:e=>{r({borderRadius:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:0},{value:"rem",label:"rem",default:0,step:.01},{value:"vw",label:"vw",default:0},{value:"vh",label:"vh",default:0}]})))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Position","flexitem"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Position",value:i.position,options:[{label:"Relative",value:"relative"},{label:"Static",value:"static"},{label:"Absolute",value:"absolute"}],onChange:e=>{r({position:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.__experimentalBoxControl,{label:"Position Overrides",values:i.positionOverrides,onChange:e=>{r({positionOverrides:e})},units:[{value:"px",label:"px"},{value:"%",label:"%"},{value:"rem",label:"rem",step:.01}],inputProps:{onValidate:()=>null},resetValues:{top:null,bottom:null,right:null,left:null}})))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Dimensions","flexitem"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Min-Height","flexitem")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.minHeight,onChange:e=>{r({minHeight:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:100},{value:"rem",label:"rem",default:0,step:.01},{value:"vw",label:"vw",default:0},{value:"vh",label:"vh",default:0}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Max-Height","flexitem")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.maxHeight,onChange:e=>{r({maxHeight:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:100},{value:"rem",label:"rem",default:0,step:.01},{value:"vw",label:"vw",default:0},{value:"vh",label:"vh",default:0}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Min-Width","flexitem")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.minWidth,onChange:e=>{r({minWidth:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:0},{value:"rem",label:"rem",default:0,step:.01},{value:"vw",label:"vw",default:0},{value:"vh",label:"vh",default:0}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Max-Width","flexitem")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.maxWidth,onChange:e=>{r({maxWidth:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:0},{value:"rem",label:"rem",default:0,step:.01},{value:"vw",label:"vw",default:0},{value:"vh",label:"vh",default:0}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Gap","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.gap,onChange:e=>{r({gap:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:0},{value:"rem",label:"rem",default:0,step:.01},{value:"vw",label:"vw",default:0},{value:"vh",label:"vh",default:0}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Flex Grow",value:i.flexGrow,options:[{label:"0",value:"0"},{label:"1",value:"1"},{label:"2",value:"2"},{label:"3",value:"3"},{label:"4",value:"4"},{label:"5",value:"5"},{label:"6",value:"6"},{label:"7",value:"7"},{label:"8",value:"8"},{label:"9",value:"9"},{label:"10",value:"10"}],onChange:e=>{r({flexGrow:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Flex Shrink",value:i.flexShrink,options:[{label:"0",value:"0"},{label:"1",value:"1"},{label:"2",value:"2"},{label:"3",value:"3"},{label:"4",value:"4"},{label:"5",value:"5"},{label:"6",value:"6"},{label:"7",value:"7"},{label:"8",value:"8"},{label:"9",value:"9"},{label:"10",value:"10"}],onChange:e=>{r({flexShrink:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Flex Basis",value:i.flexBasis,options:[{label:"auto",value:"auto"},{label:"fill",value:"fill"},{label:"max-content",value:"max-content"},{label:"min-content",value:"min-content"},{label:"fit-content",value:"fit-content"},{label:"custom",value:"custom"}],onChange:e=>{r({flexBasis:e})}}))),"custom"===i.flexBasis&&(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Custom Flex Basis","flexitem")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.flexBasisCustom,onChange:e=>{r({flexBasisCustom:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:100},{value:"rem",label:"rem",default:0,step:.01},{value:"vw",label:"vw",default:0},{value:"vh",label:"vh",default:0}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.__experimentalInputControl,{label:"Z-Index",value:i.zIndex,onChange:e=>{r({zIndex:parseInt(e)})},type:"number"})))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Margin and Padding","flexitem"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)(n.__experimentalBoxControl,{label:"Margin",values:i.margin,onChange:e=>{r({margin:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:0},{value:"rem",label:"rem",default:0,step:.01}],inputProps:{onValidate:()=>null},resetValues:{top:"0rem",bottom:"0rem",right:"0rem",left:"0rem"}})),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)(n.__experimentalBoxControl,{label:"Padding",values:i.padding,onChange:e=>{r({padding:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:0},{value:"rem",label:"rem",default:0,step:.01}],inputProps:{onValidate:()=>null},resetValues:{top:"0rem",right:"0rem",bottom:"0rem",left:"0rem"}}))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Box Shadow","flextainer"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Enable Box Shadow?",checked:i.boxShadowEnabled,onChange:e=>{r({boxShadowEnabled:e})}}))),i.boxShadowEnabled&&(0,l.createElement)(l.Fragment,null,(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Box-Shadow Offset-X","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.boxShadowOffsetX,onChange:e=>{r({boxShadowOffsetX:e})},units:[{value:"px",label:"px",default:3}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Box-Shadow Offset-Y","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.boxShadowOffsetY,onChange:e=>{r({boxShadowOffsetY:e})},units:[{value:"px",label:"px",default:3}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Box-Shadow Blur-Radius","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.boxShadowBlurRadius,onChange:e=>{r({boxShadowBlurRadius:e})},units:[{value:"px",label:"px",default:3}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Box-Shadow Color","flextainer")),(0,l.createElement)(n.ColorPicker,{color:i.boxShadowColor,onChange:e=>{r({boxShadowColor:e})},enableAlpha:!0,defaultValue:"#000"}))))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Drop Shadow","flextainer"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Enable Drop Shadow?",checked:i.dropShadowEnabled,onChange:e=>{r({dropShadowEnabled:e})}}))),i.dropShadowEnabled&&(0,l.createElement)(l.Fragment,null,(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Drop-Shadow Offset-X","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.dropShadowOffsetX,onChange:e=>{r({dropShadowOffsetX:e})},units:[{value:"px",label:"px",default:3}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Drop-Shadow Offset-Y","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.dropShadowOffsetY,onChange:e=>{r({dropShadowOffsetY:e})},units:[{value:"px",label:"px",default:3}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Drop-Shadow Blur-Radius","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.dropShadowBlurRadius,onChange:e=>{r({dropShadowBlurRadius:e})},units:[{value:"px",label:"px",default:3}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Drop-Shadow Color","flextainer")),(0,l.createElement)(t.ColorPalette,{onChange:e=>{r({dropShadowColor:e})},value:i.dropShadowColor}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Drop-Shadow Color Opacity","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.dropShadowColorOpacity,onChange:e=>{r({dropShadowColorOpacity:e})},units:[{value:"%",label:"%",default:30}]}))))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Animation Settings","flexitem"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Disable For Mobile",checked:i.revealDisabledMobile,onChange:e=>{r({revealDisabledMobile:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Reveal Effect",value:i.revealType,options:[{label:"none",value:"none"},{label:"fade",value:"fade"},{label:"slide-up",value:"slide-up"},{label:"slide-down",value:"slide-down"},{label:"slide-left",value:"slide-left"},{label:"slide-right",value:"slide-right"},{label:"zoom-in",value:"zoom-in"},{label:"zoom-out",value:"zoom-out"},{label:"flip-up",value:"flip-up"},{label:"flip-down",value:"flip-down"},{label:"flip-left",value:"flip-left"},{label:"flip-right",value:"flip-right"}],onChange:e=>{r({revealType:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.RangeControl,{label:"Reveal Duration (in ms)",value:i.revealDuration,onChange:e=>{r({revealDuration:e})},initialPosition:200,min:200,max:2e3,step:100}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.RangeControl,{label:"Reveal Delay (in ms)",value:i.revealDelay,onChange:e=>{r({revealDelay:e})},initialPosition:0,min:0,max:1e3,step:100}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Reveal Easing Function",value:i.revealEasingFunction,options:[{label:"none",value:"none"},{label:"linear",value:"linear"},{label:"ease",value:"ease"},{label:"ease-in",value:"ease-in"},{label:"ease-out",value:"ease-out"},{label:"ease-in-out",value:"ease-in-out"},{label:"ease-in-cubic",value:"ease-in-cubic"},{label:"ease-out-cubic",value:"ease-out-cubic"},{label:"ease-in-out-cubic",value:"ease-in-out-cubic"},{label:"ease-in-circ",value:"ease-in-circ"},{label:"ease-out-circ",value:"ease-out-circ"},{label:"ease-in-out-circ",value:"ease-in-out-circ"},{label:"ease-in-expo",value:"ease-in-expo"},{label:"ease-out-expo",value:"ease-out-expo"},{label:"ease-in-out-expo",value:"ease-in-out-expo"},{label:"ease-in-quad",value:"ease-in-quad"},{label:"ease-out-quad",value:"ease-out-quad"},{label:"ease-in-out-quad",value:"ease-in-out-quad"},{label:"ease-in-quart",value:"ease-in-quart"},{label:"ease-out-quart",value:"ease-out-quart"},{label:"ease-in-out-quart",value:"ease-in-out-quart"},{label:"ease-in-quint",value:"ease-in-quint"},{label:"ease-out-quint",value:"ease-out-quint"},{label:"ease-in-out-quint",value:"ease-in-out-quint"},{label:"ease-in-sine",value:"ease-in-sine"},{label:"ease-out-sine",value:"ease-out-sine"},{label:"ease-in-out-sine",value:"ease-in-out-sine"},{label:"ease-in-back",value:"ease-in-back"},{label:"ease-out-back",value:"ease-out-back"},{label:"ease-in-out-back",value:"ease-in-out-back"}],onChange:e=>{r({revealEasingFunction:e})}})))))),(0,l.createElement)(l.Fragment,null,(0,l.createElement)("style",null,`\n            .cabezi-${i.uuid} {\n              align-items: ${i.alignItems};\n              flex-direction: ${i.flexDirection};\n              flex-wrap: ${i.flexWrap};\n              justify-content: ${i.justifyContent};\n              justify-self: ${i.justifySelf};\n              align-self: ${i.alignSelf};\n            }\n          `),i.enableBreakPoint&&(0,l.createElement)("style",null,`\n              @media(max-width: ${i.breakPoint}) {\n                .cabezi-${i.uuid} {\n                  align-items: ${i.alignItemsResponsive};\n                  flex-direction: ${i.flexDirectionResponsive};\n                  flex-wrap: ${i.flexWrapResponsive};\n                  justify-content: ${i.justifyContentResponsive};\n                  justify-self: ${i.justifySelfResponsive};\n                  align-self: ${i.alignSelfResponsive};\n                }\n              }\n            `),(0,l.createElement)("div",c)))},save:function(e){let{attributes:a}=e;const n={display:"flex",...a.bgColor&&{backgroundColor:a.bgColor},...a.backgroundBlurEnabled&&{backdropFilter:`blur(${a.backgroundBlurPixels})`},...a.borderStyle&&{borderStyle:a.borderStyle},...a.borderWidth&&{borderWidth:a.borderWidth},...a.borderColor&&{borderColor:a.borderColor},...a.borderRadius&&{borderRadius:a.borderRadius},...a.boxShadowEnabled&&{boxShadow:`${a.boxShadowOffsetX} ${a.boxShadowOffsetY} ${a.boxShadowBlurRadius} ${a.boxShadowColor||"#FFF"}`},...a.dropShadowEnabled&&{filter:`drop-shadow(${a.dropShadowOffsetX} ${a.dropShadowOffsetY} ${a.dropShadowBlurRadius} rgba(${o(a.dropShadowColor||"#FFF")} / ${a.dropShadowColorOpacity||"100%"}))`},...a.fontFamily&&{fontFamily:a.fontFamily},...a.gap&&{gap:a.gap},flex:`${a.flexGrow} ${a.flexShrink} ${"custom"===a.flexBasis?a.flexBasisCustom:a.flexBasis}`,...a.overflow&&{overflow:a.overflow},...a.inlineBgImage&&{backgroundImage:`url(${a.inlineBgImage})`,backgroundRepeat:`${a.backgroundRepeat}`,backgroundAttachment:`${a.backgroundAttachment}`,backgroundPosition:"50% 50%",backgroundSize:"repeat"===a.backgroundRepeat?"auto":"cover"},...a.minHeight&&{minHeight:a.minHeight},...a.maxHeight&&{maxHeight:a.maxHeight},...a.minWidth&&{minWidth:a.minWidth},...a.maxWidth&&{maxWidth:a.maxWidth},...a.margin.top&&{marginTop:a.margin.top},...a.margin.bottom&&{marginBottom:a.margin.bottom},...a.margin.right&&{marginRight:a.margin.right},...a.margin.left&&{marginLeft:a.margin.left},...a.padding.top&&{paddingTop:a.padding.top},...a.padding.right&&{paddingRight:a.padding.right},...a.padding.bottom&&{paddingBottom:a.padding.bottom},...a.padding.left&&{paddingLeft:a.padding.left},...a.position&&{position:a.position},...a.positionOverrides?.top&&{top:a.positionOverrides?.top},...a.positionOverrides?.bottom&&{bottom:a.positionOverrides?.bottom},...a.positionOverrides?.left&&{left:a.positionOverrides?.left},...a.positionOverrides?.right&&{right:a.positionOverrides?.right},...a.rotate&&{transform:`rotate(${a.rotate}deg)`},...a.zIndex&&{zIndex:a.zIndex}},r=t.useBlockProps.save({className:`cabezi-${a.uuid} ${a.eagerLoadImages?"cabezi-block no-lazy-cabezi":"cabezi-block"}`,style:n,"data-sal":a.revealType,"data-sal-duration":a.revealDuration,"data-sal-delay":a.revealDelay,"data-sal-easing":a.revealEasingFunction,"data-sal-mobile-disabled":a.revealDisabledMobile}),s=t.useInnerBlocksProps.save(r);return(0,l.createElement)(l.Fragment,null,(0,l.createElement)("style",null,`\n          .cabezi-${a.uuid} {\n            align-items: ${a.alignItems};\n            flex-direction: ${a.flexDirection};\n            flex-wrap: ${a.flexWrap};\n            justify-content: ${a.justifyContent};\n            ${a.dropShadowEnabled?`filter: drop-shadow(${a.dropShadowOffsetX} ${a.dropShadowOffsetY} ${a.dropShadowBlurRadius} rgba(${o(a.dropShadowColor)} / ${a.dropShadowColorOpacity}));`:""}\n            justify-self: ${a.justifySelf};\n            align-self: ${a.alignSelf};\n            ${a.hideAboveBreakPoint?"display: none !important;":""}\n          }\n        `),a.enableBreakPoint&&(0,l.createElement)("style",null,`\n            @media(max-width: ${a.breakPoint}) {\n              .cabezi-${a.uuid} {\n                align-items: ${a.alignItemsResponsive};\n                flex-direction: ${a.flexDirectionResponsive};\n                flex-wrap: ${a.flexWrapResponsive};\n                justify-content: ${a.justifyContentResponsive};\n                justify-self: ${a.justifySelfResponsive};\n                align-self: ${a.alignSelfResponsive};\n                ${a.hideAtBreakPoint?"display: none !important;":""}\n                ${a.hideAboveBreakPoint&&!a.hideAtBreakPoint?"display: flex !important;":""}\n              }\n            }\n          `),a.linkEnabled&&(0,l.createElement)("style",null,`\n            .cabezi-${a.uuid}:hover {\n              opacity: .8 !important;\n              cursor: pointer !important;\n            }\n          `),(0,l.createElement)("div",i({},s,{onClick:a.linkEnabled?`window.location.href='${a.link}'`:null})))}})}();
     1!function(){"use strict";var e=window.wp.blocks,l=window.wp.element,a=window.wp.i18n,t=window.wp.blockEditor,n=window.wp.components;function o(e){let l=arguments.length>1&&void 0!==arguments[1]&&arguments[1];const a=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;e=e.replace(a,(function(e,l,a,t){return l+l+a+a+t+t}));const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e),n=t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null;return n?l?`rgb(${n.r}, ${n.g}, ${n.b})`:`${n.r} ${n.g} ${n.b}`:null}function i(){return i=Object.assign||function(e){for(var l=1;l<arguments.length;l++){var a=arguments[l];for(var t in a)Object.prototype.hasOwnProperty.call(a,t)&&(e[t]=a[t])}return e},i.apply(this,arguments)}(0,e.registerBlockType)("cabezi/flexitem",{attributes:{alignItems:{type:"string",default:"normal"},alignItemsResponsive:{type:"string",default:"normal"},alignSelf:{type:"string",default:"auto"},alignSelfResponsive:{type:"string",default:"auto"},backgroundBlurEnabled:{type:"boolean",default:!1},backgroundBlurPixels:{type:"string",default:"0px"},backgroundAttachment:{type:"string",default:"scroll"},backgroundRepeat:{type:"string",default:"repeat"},bgColor:{type:"string",default:""},bgImage:{type:"object",default:null},bgFocalPoint:{type:"object",default:{x:.5,y:.5}},bgGradient:{type:"string",default:null},borderStyle:{type:"string",default:"none"},borderWidth:{type:"string",default:"1px"},borderColor:{type:"string",default:"initial"},borderRadius:{type:"string",default:"0px"},breakPoint:{type:"string",default:"768px"},boxShadowEnabled:{type:"boolean",default:!1},boxShadowOffsetX:{type:"string",default:"3px"},boxShadowOffsetY:{type:"string",default:"3px"},boxShadowBlurRadius:{type:"string",default:"3px"},boxShadowColor:{type:"string",default:"#000"},dropShadowEnabled:{type:"boolean",default:!1},dropShadowOffsetX:{type:"string",default:"3px"},dropShadowOffsetY:{type:"string",default:"3px"},dropShadowBlurRadius:{type:"string",default:"3px"},dropShadowColor:{type:"string",default:"#000"},dropShadowColorOpacity:{type:"string",default:"30%"},eagerLoadImages:{type:"boolean",default:!1},enableBreakPoint:{type:"boolean",default:!1},flexDirection:{type:"string",default:"row"},flexDirectionResponsive:{type:"string",default:"column"},flexGrow:{type:"string",default:"0"},flexShrink:{type:"string",default:"1"},flexBasis:{type:"string",default:"auto"},flexBasisCustom:{type:"string",default:"100%"},flexWrap:{type:"string",default:"nowrap"},flexWrapResponsive:{type:"string",default:"nowrap"},fontFamily:{type:"string"},gap:{type:"string",default:"0px"},overflow:{type:"string",default:"visible"},hideAtBreakPoint:{type:"boolean",default:!1},hideAboveBreakPoint:{type:"boolean",default:!1},inlineBgImage:{type:"string"},justifyContent:{type:"string",default:"normal"},justifyContentResponsive:{type:"string",default:"normal"},justifySelf:{type:"string",default:"auto"},justifySelfResponsive:{type:"string",default:"auto"},link:{type:"string",default:"/"},linkEnabled:{type:"boolean",default:!1},margin:{type:"object",default:{top:"0rem",right:"0rem",bottom:"0rem",left:"0rem"}},minHeight:{type:"string"},maxHeight:{type:"string"},minWidth:{type:"string"},maxWidth:{type:"string"},position:{type:"string",default:"relative"},positionOverrides:{type:"object"},padding:{type:"object",default:{top:"0rem",right:"0rem",bottom:"0rem",left:"0rem"}},revealDisabledMobile:{type:"boolean",default:!1},revealType:{type:"string",default:"none"},revealDuration:{type:"integer",default:200},revealDelay:{type:"integer",default:0},revealEasingFunction:{type:"string",default:"linear"},rotate:{type:"integer",default:0},uuid:{type:"string"},zIndex:{type:"integer",default:0}},edit:function(e){let{attributes:i,setAttributes:r,clientId:s}=e;i.uuid!==s&&r({uuid:s});const u=e=>{r({bgFocalPoint:e})},d={display:"flex",...i.bgColor&&{backgroundColor:i.bgColor},...i.backgroundBlurEnabled&&{backdropFilter:`blur(${i.backgroundBlurPixels})`},borderStyle:`${"none"===i.borderStyle?"solid":i.borderStyle}`,...i.borderWidth&&{borderWidth:i.borderWidth},borderColor:`${"none"===i.borderStyle?"lightgray":i.borderColor}`,...i.borderRadius&&{borderRadius:i.borderRadius},...i.boxShadowEnabled&&{boxShadow:`${i.boxShadowOffsetX} ${i.boxShadowOffsetY} ${i.boxShadowBlurRadius} ${i.boxShadowColor||"#FFF"}`},...i.dropShadowEnabled&&{filter:`drop-shadow(${i.dropShadowOffsetX} ${i.dropShadowOffsetY} ${i.dropShadowBlurRadius} rgba(${o(i.dropShadowColor||"#FFF")} / ${i.dropShadowColorOpacity||"100%"}))`},...i.fontFamily&&{fontFamily:i.fontFamily},...i.gap&&{gap:i.gap},...i.overflow&&{overflow:i.overflow},...i?.bgImage?.url&&{backgroundImage:`url(${i.bgImage.url})`,backgroundRepeat:`${i.backgroundRepeat}`,backgroundAttachment:`${i.backgroundAttachment}`,backgroundPosition:`${100*i.bgFocalPoint.x}% ${100*i.bgFocalPoint.y}%`,backgroundSize:"repeat"===i.backgroundRepeat?"auto":"cover"},...i?.bgGradient&&{backgroundImage:i.bgGradient},flex:`${i.flexGrow} ${i.flexShrink} ${"custom"===i.flexBasis?i.flexBasisCustom:i.flexBasis}`,...i.minHeight&&{minHeight:i.minHeight},...i.maxHeight&&{maxHeight:i.maxHeight},...i.minWidth&&{minWidth:i.minWidth},...i.maxWidth&&{maxWidth:i.maxWidth},marginTop:`calc(${i.margin.top} + 30px)`,marginBottom:`calc(${i.margin.bottom} + 30px)`,...i.margin.right&&{marginRight:i.margin.right},...i.margin.left&&{marginLeft:i.margin.left},...i.padding.top&&{paddingTop:i.padding.top},...i.padding.right&&{paddingRight:i.padding.right},paddingBottom:`calc(${i.padding.bottom} + 45px)`,...i.padding.left&&{paddingLeft:i.padding.left},...i.position&&{position:i.position},...i.positionOverrides?.top&&{top:i.positionOverrides?.top},...i.positionOverrides?.bottom&&{bottom:i.positionOverrides?.bottom},...i.positionOverrides?.left&&{left:i.positionOverrides?.left},...i.positionOverrides?.right&&{right:i.positionOverrides?.right},...i.rotate&&{transform:`rotate(${i.rotate}deg)`},...i.zIndex&&{zIndex:i.zIndex}},c=(0,t.useBlockProps)({className:`cabezi-block cabezi-${i.uuid}`,style:d}),b=(0,t.useInnerBlocksProps)(c,{__experimentalDirectInsert:!0,templateInsertUpdatesSelection:!0,renderAppender:e=>(0,l.createElement)("div",{style:{margin:".5rem"}},(0,l.createElement)(t.InnerBlocks.ButtonBlockAppender,e))});return(0,l.createElement)(l.Fragment,null,(0,l.createElement)(t.InspectorControls,{key:"setting"},(0,l.createElement)(n.Panel,null,(0,l.createElement)(n.PanelBody,{title:(0,a.__)("General Settings","flexitem"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Overflow",value:i.overflow,options:[{label:"Auto",value:"auto"},{label:"Hidden",value:"hidden"},{label:"Visible",value:"visible"},{label:"Scroll",value:"scroll"}],onChange:e=>{r({overflow:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.__experimentalInputControl,{label:(0,l.createElement)(l.Fragment,null,"Font Family ",(0,l.createElement)(n.Tooltip,{position:"top center",text:(0,a.__)("Font Family Must Be Loaded By Theme, Plugin, or Front End Framework!")},(0,l.createElement)(n.Dashicon,{icon:"editor-help"}))),value:i.fontFamily,onChange:e=>{r({fontFamily:e})},type:"text"}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Responsive Break Point?",checked:i.enableBreakPoint,onChange:e=>{r({enableBreakPoint:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Rotate Angle","flexitem")),(0,l.createElement)(n.AnglePickerControl,{value:i.rotate,onChange:e=>{r({rotate:e})}}))),i.enableBreakPoint&&(0,l.createElement)(l.Fragment,null,(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Hide Below Break Point",checked:i.hideAtBreakPoint,onChange:e=>{r({hideAtBreakPoint:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Hide Above Break Point",checked:i.hideAboveBreakPoint,onChange:e=>{r({hideAboveBreakPoint:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Responsive Break Point","flexitem")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.breakPoint,onChange:e=>{r({breakPoint:e})},units:[{value:"px",label:"px",default:768}]})))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Enable Link",checked:i.linkEnabled,onChange:e=>{r({linkEnabled:e})}}))),i.linkEnabled&&(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.__experimentalInputControl,{label:"Link URL",value:i.link,onChange:e=>{r({link:e})},type:"text"}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Eager Load Images",checked:i.eagerLoadImages,onChange:e=>{r({eagerLoadImages:e})}})))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Flex Options","flexitem"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Flex Direction",value:i.flexDirection,options:[{label:"row",value:"row"},{label:"row-reverse",value:"row-reverse"},{label:"column",value:"column"},{label:"column-reverse",value:"column-reverse"}],onChange:e=>{r({flexDirection:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Justify Content",value:i.justifyContent,options:[{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"left",value:"left"},{label:"right",value:"right"},{label:"space-between",value:"space-between"},{label:"space-around",value:"space-around"},{label:"space-evenly",value:"space-evenly"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{r({justifyContent:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Align Items",value:i.alignItems,options:[{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"start",value:"start"},{label:"end",value:"end"},{label:"self-start",value:"self-start"},{label:"self-end",value:"self-end"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{r({alignItems:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Justify Self",value:i.justifySelf,options:[{label:"auto",value:"auto"},{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"left",value:"left"},{label:"right",value:"right"},{label:"space-between",value:"space-between"},{label:"space-around",value:"space-around"},{label:"space-evenly",value:"space-evenly"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{r({justifySelf:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Align Self",value:i.alignSelf,options:[{label:"auto",value:"auto"},{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"start",value:"start"},{label:"end",value:"end"},{label:"self-start",value:"self-start"},{label:"self-end",value:"self-end"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{r({alignSelf:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Flex Wrap",value:i.flexWrap,options:[{label:"wrap",value:"wrap"},{label:"nowrap",value:"nowrap"},{label:"wrap-reverse",value:"wrap-reverse"}],onChange:e=>{r({flexWrap:e})}}))),i.enableBreakPoint&&(0,l.createElement)(l.Fragment,null,(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Flex Direction (Responsive)",value:i.flexDirectionResponsive,options:[{label:"row",value:"row"},{label:"row-reverse",value:"row-reverse"},{label:"column",value:"column"},{label:"column-reverse",value:"column-reverse"}],onChange:e=>{r({flexDirectionResponsive:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Justify Content (Responsive)",value:i.justifyContentResponsive,options:[{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"left",value:"left"},{label:"right",value:"right"},{label:"space-between",value:"space-between"},{label:"space-around",value:"space-around"},{label:"space-evenly",value:"space-evenly"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{r({justifyContentResponsive:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Align Items (Responsive)",value:i.alignItemsResponsive,options:[{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"start",value:"start"},{label:"end",value:"end"},{label:"self-start",value:"self-start"},{label:"self-end",value:"self-end"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{r({alignItemsResponsive:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Flex Wrap (Responsive)",value:i.flexWrapResponsive,options:[{label:"wrap",value:"wrap"},{label:"nowrap",value:"nowrap"},{label:"wrap-reverse",value:"wrap-reverse"}],onChange:e=>{r({flexWrapResponsive:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Justify Self (Responsive)",value:i.justifySelfResponsive,options:[{label:"auto",value:"auto"},{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"left",value:"left"},{label:"right",value:"right"},{label:"space-between",value:"space-between"},{label:"space-around",value:"space-around"},{label:"space-evenly",value:"space-evenly"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{r({justifySelfResponsive:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Align Self (Responsive)",value:i.alignSelfResponsive,options:[{label:"auto",value:"auto"},{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"start",value:"start"},{label:"end",value:"end"},{label:"self-start",value:"self-start"},{label:"self-end",value:"self-end"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{r({alignSelfResponsive:e})}}))))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Color Options","flexitem"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Background Color","flexitem")),(0,l.createElement)(n.ColorPicker,{color:i.bgColor,onChange:e=>{r({bgColor:e})},enableAlpha:!0}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Enable Background Blur",checked:i.backgroundBlurEnabled,onChange:e=>{r({backgroundBlurEnabled:e})}}))),i.backgroundBlurEnabled&&(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Background Blur Pixels","flexitem")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.backgroundBlurPixels,onChange:e=>{r({backgroundBlurPixels:e})},units:[{value:"px",label:"px",default:0}]})))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Border Options","flexitem"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Border Style",value:i.borderStyle,options:[{label:"dotted",value:"dotted"},{label:"dashed",value:"dashed"},{label:"solid",value:"solid"},{label:"double",value:"double"},{label:"groove",value:"groove"},{label:"ridge",value:"ridge"},{label:"inset",value:"inset"},{label:"outset",value:"outset"},{label:"none",value:"none"},{label:"hidden",value:"hidden"}],onChange:e=>{r({borderStyle:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Border Width","flexitem")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.borderWidth,onChange:e=>{r({borderWidth:e})},units:[{value:"px",label:"px",default:1},{value:"rem",label:"rem",default:.1}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Border Color","flexitem")),(0,l.createElement)(t.ColorPalette,{onChange:e=>{r({borderColor:e})},value:i.borderColor}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Border Radius","flexitem")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.borderRadius,onChange:e=>{r({borderRadius:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:0},{value:"rem",label:"rem",default:0,step:.01},{value:"vw",label:"vw",default:0},{value:"vh",label:"vh",default:0}]})))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Position","flexitem"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Position",value:i.position,options:[{label:"Relative",value:"relative"},{label:"Static",value:"static"},{label:"Absolute",value:"absolute"}],onChange:e=>{r({position:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.__experimentalBoxControl,{label:"Position Overrides",values:i.positionOverrides,onChange:e=>{r({positionOverrides:e})},units:[{value:"px",label:"px"},{value:"%",label:"%"},{value:"rem",label:"rem",step:.01}],inputProps:{onValidate:()=>null},resetValues:{top:null,bottom:null,right:null,left:null}})))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Dimensions","flexitem"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Min-Height","flexitem")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.minHeight,onChange:e=>{r({minHeight:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:100},{value:"rem",label:"rem",default:0,step:.01},{value:"vw",label:"vw",default:0},{value:"vh",label:"vh",default:0}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Max-Height","flexitem")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.maxHeight,onChange:e=>{r({maxHeight:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:100},{value:"rem",label:"rem",default:0,step:.01},{value:"vw",label:"vw",default:0},{value:"vh",label:"vh",default:0}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Min-Width","flexitem")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.minWidth,onChange:e=>{r({minWidth:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:0},{value:"rem",label:"rem",default:0,step:.01},{value:"vw",label:"vw",default:0},{value:"vh",label:"vh",default:0}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Max-Width","flexitem")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.maxWidth,onChange:e=>{r({maxWidth:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:0},{value:"rem",label:"rem",default:0,step:.01},{value:"vw",label:"vw",default:0},{value:"vh",label:"vh",default:0}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Gap","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.gap,onChange:e=>{r({gap:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:0},{value:"rem",label:"rem",default:0,step:.01},{value:"vw",label:"vw",default:0},{value:"vh",label:"vh",default:0}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Flex Grow",value:i.flexGrow,options:[{label:"0",value:"0"},{label:"1",value:"1"},{label:"2",value:"2"},{label:"3",value:"3"},{label:"4",value:"4"},{label:"5",value:"5"},{label:"6",value:"6"},{label:"7",value:"7"},{label:"8",value:"8"},{label:"9",value:"9"},{label:"10",value:"10"}],onChange:e=>{r({flexGrow:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Flex Shrink",value:i.flexShrink,options:[{label:"0",value:"0"},{label:"1",value:"1"},{label:"2",value:"2"},{label:"3",value:"3"},{label:"4",value:"4"},{label:"5",value:"5"},{label:"6",value:"6"},{label:"7",value:"7"},{label:"8",value:"8"},{label:"9",value:"9"},{label:"10",value:"10"}],onChange:e=>{r({flexShrink:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Flex Basis",value:i.flexBasis,options:[{label:"auto",value:"auto"},{label:"fill",value:"fill"},{label:"max-content",value:"max-content"},{label:"min-content",value:"min-content"},{label:"fit-content",value:"fit-content"},{label:"custom",value:"custom"}],onChange:e=>{r({flexBasis:e})}}))),"custom"===i.flexBasis&&(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Custom Flex Basis","flexitem")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.flexBasisCustom,onChange:e=>{r({flexBasisCustom:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:100},{value:"rem",label:"rem",default:0,step:.01},{value:"vw",label:"vw",default:0},{value:"vh",label:"vh",default:0}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.__experimentalInputControl,{label:"Z-Index",value:i.zIndex,onChange:e=>{r({zIndex:parseInt(e)})},type:"number"})))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Margin and Padding","flexitem"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)(n.__experimentalBoxControl,{label:"Margin",values:i.margin,onChange:e=>{r({margin:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:0},{value:"rem",label:"rem",default:0,step:.01}],inputProps:{onValidate:()=>null},resetValues:{top:"0rem",bottom:"0rem",right:"0rem",left:"0rem"}})),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)(n.__experimentalBoxControl,{label:"Padding",values:i.padding,onChange:e=>{r({padding:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:0},{value:"rem",label:"rem",default:0,step:.01}],inputProps:{onValidate:()=>null},resetValues:{top:"0rem",right:"0rem",bottom:"0rem",left:"0rem"}}))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Box Shadow","flextainer"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Enable Box Shadow?",checked:i.boxShadowEnabled,onChange:e=>{r({boxShadowEnabled:e})}}))),i.boxShadowEnabled&&(0,l.createElement)(l.Fragment,null,(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Box-Shadow Offset-X","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.boxShadowOffsetX,onChange:e=>{r({boxShadowOffsetX:e})},units:[{value:"px",label:"px",default:3}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Box-Shadow Offset-Y","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.boxShadowOffsetY,onChange:e=>{r({boxShadowOffsetY:e})},units:[{value:"px",label:"px",default:3}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Box-Shadow Blur-Radius","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.boxShadowBlurRadius,onChange:e=>{r({boxShadowBlurRadius:e})},units:[{value:"px",label:"px",default:3}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Box-Shadow Color","flextainer")),(0,l.createElement)(n.ColorPicker,{color:i.boxShadowColor,onChange:e=>{r({boxShadowColor:e})},enableAlpha:!0,defaultValue:"#000"}))))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Drop Shadow","flextainer"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Enable Drop Shadow?",checked:i.dropShadowEnabled,onChange:e=>{r({dropShadowEnabled:e})}}))),i.dropShadowEnabled&&(0,l.createElement)(l.Fragment,null,(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Drop-Shadow Offset-X","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.dropShadowOffsetX,onChange:e=>{r({dropShadowOffsetX:e})},units:[{value:"px",label:"px",default:3}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Drop-Shadow Offset-Y","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.dropShadowOffsetY,onChange:e=>{r({dropShadowOffsetY:e})},units:[{value:"px",label:"px",default:3}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Drop-Shadow Blur-Radius","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.dropShadowBlurRadius,onChange:e=>{r({dropShadowBlurRadius:e})},units:[{value:"px",label:"px",default:3}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Drop-Shadow Color","flextainer")),(0,l.createElement)(t.ColorPalette,{onChange:e=>{r({dropShadowColor:e})},value:i.dropShadowColor}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Drop-Shadow Color Opacity","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:i.dropShadowColorOpacity,onChange:e=>{r({dropShadowColorOpacity:e})},units:[{value:"%",label:"%",default:30}]}))))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Background Image & Gradient","flextainer"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)(t.MediaUpload,{onSelect:e=>{r({bgImage:{title:e.title,filename:e.filename,url:e.url,updated:""}})},multiple:!1,render:e=>{let{open:a}=e;return(0,l.createElement)("button",{style:{padding:".5rem 1rem"},onClick:a},"Upload Background Image")}})),(0,l.createElement)(n.PanelRow,null,i?.bgImage?.url&&(0,l.createElement)("button",{style:{padding:".5rem 1rem"},onClick:()=>{r({bgImage:null})}},"Remove Background Image")),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.__experimentalRadioGroup,{label:"Background Repeat",onChange:e=>{r({backgroundRepeat:e})},checked:i.backgroundRepeat},(0,l.createElement)(n.__experimentalRadio,{value:"repeat"},"Repeat"),(0,l.createElement)(n.__experimentalRadio,{value:"no-repeat"},"No Repeat")))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.__experimentalRadioGroup,{label:"Background Attachment",onChange:e=>{r({backgroundAttachment:e})},checked:i.backgroundAttachment},(0,l.createElement)(n.__experimentalRadio,{value:"scroll"},"Scroll"),(0,l.createElement)(n.__experimentalRadio,{value:"fixed"},"Fixed"),(0,l.createElement)(n.__experimentalRadio,{value:"local"},"Local")))),i?.bgImage?.url&&(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.FocalPointPicker,{url:i.bgImage.url,value:i.bgFocalPoint,onDragStart:u,onDrag:u,onChange:u}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)(n.BaseControl,{label:"Background Gradient (Overrides Background Image)"},(0,l.createElement)("br",null),(0,l.createElement)(n.GradientPicker,{__nextHasNoMargin:!0,value:i.bgGradient,onChange:e=>{r({bgGradient:e})}})))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Animation Settings","flexitem"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Disable For Mobile",checked:i.revealDisabledMobile,onChange:e=>{r({revealDisabledMobile:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Reveal Effect",value:i.revealType,options:[{label:"none",value:"none"},{label:"fade",value:"fade"},{label:"slide-up",value:"slide-up"},{label:"slide-down",value:"slide-down"},{label:"slide-left",value:"slide-left"},{label:"slide-right",value:"slide-right"},{label:"zoom-in",value:"zoom-in"},{label:"zoom-out",value:"zoom-out"},{label:"flip-up",value:"flip-up"},{label:"flip-down",value:"flip-down"},{label:"flip-left",value:"flip-left"},{label:"flip-right",value:"flip-right"}],onChange:e=>{r({revealType:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.RangeControl,{label:"Reveal Duration (in ms)",value:i.revealDuration,onChange:e=>{r({revealDuration:e})},initialPosition:200,min:200,max:2e3,step:100}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.RangeControl,{label:"Reveal Delay (in ms)",value:i.revealDelay,onChange:e=>{r({revealDelay:e})},initialPosition:0,min:0,max:1e3,step:100}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Reveal Easing Function",value:i.revealEasingFunction,options:[{label:"none",value:"none"},{label:"linear",value:"linear"},{label:"ease",value:"ease"},{label:"ease-in",value:"ease-in"},{label:"ease-out",value:"ease-out"},{label:"ease-in-out",value:"ease-in-out"},{label:"ease-in-cubic",value:"ease-in-cubic"},{label:"ease-out-cubic",value:"ease-out-cubic"},{label:"ease-in-out-cubic",value:"ease-in-out-cubic"},{label:"ease-in-circ",value:"ease-in-circ"},{label:"ease-out-circ",value:"ease-out-circ"},{label:"ease-in-out-circ",value:"ease-in-out-circ"},{label:"ease-in-expo",value:"ease-in-expo"},{label:"ease-out-expo",value:"ease-out-expo"},{label:"ease-in-out-expo",value:"ease-in-out-expo"},{label:"ease-in-quad",value:"ease-in-quad"},{label:"ease-out-quad",value:"ease-out-quad"},{label:"ease-in-out-quad",value:"ease-in-out-quad"},{label:"ease-in-quart",value:"ease-in-quart"},{label:"ease-out-quart",value:"ease-out-quart"},{label:"ease-in-out-quart",value:"ease-in-out-quart"},{label:"ease-in-quint",value:"ease-in-quint"},{label:"ease-out-quint",value:"ease-out-quint"},{label:"ease-in-out-quint",value:"ease-in-out-quint"},{label:"ease-in-sine",value:"ease-in-sine"},{label:"ease-out-sine",value:"ease-out-sine"},{label:"ease-in-out-sine",value:"ease-in-out-sine"},{label:"ease-in-back",value:"ease-in-back"},{label:"ease-out-back",value:"ease-out-back"},{label:"ease-in-out-back",value:"ease-in-out-back"}],onChange:e=>{r({revealEasingFunction:e})}})))))),(0,l.createElement)(l.Fragment,null,(0,l.createElement)("style",null,`\n            .cabezi-${i.uuid} {\n              align-items: ${i.alignItems};\n              flex-direction: ${i.flexDirection};\n              flex-wrap: ${i.flexWrap};\n              justify-content: ${i.justifyContent};\n              justify-self: ${i.justifySelf};\n              align-self: ${i.alignSelf};\n            }\n          `),i.enableBreakPoint&&(0,l.createElement)("style",null,`\n              @media(max-width: ${i.breakPoint}) {\n                .cabezi-${i.uuid} {\n                  align-items: ${i.alignItemsResponsive};\n                  flex-direction: ${i.flexDirectionResponsive};\n                  flex-wrap: ${i.flexWrapResponsive};\n                  justify-content: ${i.justifyContentResponsive};\n                  justify-self: ${i.justifySelfResponsive};\n                  align-self: ${i.alignSelfResponsive};\n                }\n              }\n            `),(0,l.createElement)("div",b)))},save:function(e){let{attributes:a}=e;const n={display:"flex",...a.bgColor&&{backgroundColor:a.bgColor},...a.backgroundBlurEnabled&&{backdropFilter:`blur(${a.backgroundBlurPixels})`},...a.borderStyle&&{borderStyle:a.borderStyle},...a.borderWidth&&{borderWidth:a.borderWidth},...a.borderColor&&{borderColor:a.borderColor},...a.borderRadius&&{borderRadius:a.borderRadius},...a.boxShadowEnabled&&{boxShadow:`${a.boxShadowOffsetX} ${a.boxShadowOffsetY} ${a.boxShadowBlurRadius} ${a.boxShadowColor||"#FFF"}`},...a.dropShadowEnabled&&{filter:`drop-shadow(${a.dropShadowOffsetX} ${a.dropShadowOffsetY} ${a.dropShadowBlurRadius} rgba(${o(a.dropShadowColor||"#FFF")} / ${a.dropShadowColorOpacity||"100%"}))`},...a.fontFamily&&{fontFamily:a.fontFamily},...a.gap&&{gap:a.gap},flex:`${a.flexGrow} ${a.flexShrink} ${"custom"===a.flexBasis?a.flexBasisCustom:a.flexBasis}`,...a.overflow&&{overflow:a.overflow},...a?.bgImage?.url&&{backgroundImage:`url(${a.bgImage.url})`,backgroundRepeat:`${a.backgroundRepeat}`,backgroundAttachment:`${a.backgroundAttachment}`,backgroundPosition:`${100*a.bgFocalPoint.x}% ${100*a.bgFocalPoint.y}%`,backgroundSize:"repeat"===a.backgroundRepeat?"auto":"cover"},...a?.bgGradient&&{backgroundImage:a.bgGradient},...a.minHeight&&{minHeight:a.minHeight},...a.maxHeight&&{maxHeight:a.maxHeight},...a.minWidth&&{minWidth:a.minWidth},...a.maxWidth&&{maxWidth:a.maxWidth},...a.margin.top&&{marginTop:a.margin.top},...a.margin.bottom&&{marginBottom:a.margin.bottom},...a.margin.right&&{marginRight:a.margin.right},...a.margin.left&&{marginLeft:a.margin.left},...a.padding.top&&{paddingTop:a.padding.top},...a.padding.right&&{paddingRight:a.padding.right},...a.padding.bottom&&{paddingBottom:a.padding.bottom},...a.padding.left&&{paddingLeft:a.padding.left},...a.position&&{position:a.position},...a.positionOverrides?.top&&{top:a.positionOverrides?.top},...a.positionOverrides?.bottom&&{bottom:a.positionOverrides?.bottom},...a.positionOverrides?.left&&{left:a.positionOverrides?.left},...a.positionOverrides?.right&&{right:a.positionOverrides?.right},...a.rotate&&{transform:`rotate(${a.rotate}deg)`},...a.zIndex&&{zIndex:a.zIndex}},r=t.useBlockProps.save({className:`cabezi-${a.uuid} ${a.eagerLoadImages?"cabezi-block no-lazy-cabezi":"cabezi-block"}`,style:n,"data-sal":a.revealType,"data-sal-duration":a.revealDuration,"data-sal-delay":a.revealDelay,"data-sal-easing":a.revealEasingFunction,"data-sal-mobile-disabled":a.revealDisabledMobile}),s=t.useInnerBlocksProps.save(r);return(0,l.createElement)(l.Fragment,null,(0,l.createElement)("style",null,`\n          .cabezi-${a.uuid} {\n            align-items: ${a.alignItems};\n            flex-direction: ${a.flexDirection};\n            flex-wrap: ${a.flexWrap};\n            justify-content: ${a.justifyContent};\n            ${a.dropShadowEnabled?`filter: drop-shadow(${a.dropShadowOffsetX} ${a.dropShadowOffsetY} ${a.dropShadowBlurRadius} rgba(${o(a.dropShadowColor)} / ${a.dropShadowColorOpacity}));`:""}\n            justify-self: ${a.justifySelf};\n            align-self: ${a.alignSelf};\n            ${a.hideAboveBreakPoint?"display: none !important;":""}\n          }\n        `),a.enableBreakPoint&&(0,l.createElement)("style",null,`\n            @media(max-width: ${a.breakPoint}) {\n              .cabezi-${a.uuid} {\n                align-items: ${a.alignItemsResponsive};\n                flex-direction: ${a.flexDirectionResponsive};\n                flex-wrap: ${a.flexWrapResponsive};\n                justify-content: ${a.justifyContentResponsive};\n                justify-self: ${a.justifySelfResponsive};\n                align-self: ${a.alignSelfResponsive};\n                ${a.hideAtBreakPoint?"display: none !important;":""}\n                ${a.hideAboveBreakPoint&&!a.hideAtBreakPoint?"display: flex !important;":""}\n              }\n            }\n          `),a.linkEnabled&&(0,l.createElement)("style",null,`\n            .cabezi-${a.uuid}:hover {\n              opacity: .8 !important;\n              cursor: pointer !important;\n            }\n          `),(0,l.createElement)("div",i({},s,{onClick:a.linkEnabled?`window.location.href='${a.link}'`:null})))}})}();

  • flexblocks/trunk/blocks/flexitem/src/edit.js

    r2872685 r2892984  
    1717  ColorPalette,
    1818  InspectorControls,
    19   useInnerBlocksProps
     19  useInnerBlocksProps,
     20  MediaUpload
    2021} from '@wordpress/block-editor'
    2122import {
    … …  
    2324  __experimentalUnitControl as UnitControl,
    2425  __experimentalInputControl as InputControl,
    25   // __experimentalRadio as Radio,
    26   // __experimentalRadioGroup as RadioGroup,
     26  __experimentalRadio as Radio,
     27  __experimentalRadioGroup as RadioGroup,
    2728  AnglePickerControl,
     29  BaseControl,
    2830  ColorPicker,
    2931  Dashicon,
     32  FocalPointPicker,
     33  GradientPicker,
    3034  Panel,
    3135  PanelBody,
    … …  
    6872    setAttributes({ overflow: value })
    6973  }
    70   // const onChangeBackgroundAttachment = (value) => {
    71   //   setAttributes({ backgroundAttachment: value })
    72   // }
    73   // const onChangeBackgroundRepeat = (value) => {
    74   //   setAttributes({ backgroundRepeat: value })
    75   // }
     74  const onChangeBackgroundAttachment = (value) => {
     75    setAttributes({ backgroundAttachment: value })
     76  }
     77  const onChangeBackgroundRepeat = (value) => {
     78    setAttributes({ backgroundRepeat: value })
     79  }
    7680  const onChangeBgColor = (newColor) => {
    7781    setAttributes({ bgColor: newColor })
    … …  
    238242  const onChangeZIndex = (value) => {
    239243    setAttributes({ zIndex: parseInt(value) })
     244  }
     245  const onChangeBgImage = (value) => {
     246    setAttributes({
     247      bgImage: {
     248        title: value.title,
     249        filename: value.filename,
     250        url: value.url,
     251        updated: ''
     252      }
     253    })
     254  }
     255  const clearBgImage = () => {
     256    setAttributes({ bgImage: null })
     257  }
     258  const setBGFocalPoint = (value) => {
     259    setAttributes({ bgFocalPoint: value })
     260  }
     261  const onChangeBgGradient = (value) => {
     262    setAttributes({ bgGradient: value })
    240263  }
    241264
    … …  
    253276    ...(attributes.gap && { gap: attributes.gap }),
    254277    ...(attributes.overflow && { overflow: attributes.overflow }),
    255     ...(attributes.inlineBgImage && { backgroundImage: `url(${attributes.inlineBgImage})`, backgroundRepeat: `${attributes.backgroundRepeat}`, backgroundAttachment: `${attributes.backgroundAttachment}`, backgroundPosition: '50% 50%', backgroundSize: `${attributes.backgroundRepeat === 'repeat' ? 'auto' : 'cover'}` }),
     278    ...(attributes?.bgImage?.url && { backgroundImage: `url(${attributes.bgImage.url})`, backgroundRepeat: `${attributes.backgroundRepeat}`, backgroundAttachment: `${attributes.backgroundAttachment}`, backgroundPosition: `${attributes.bgFocalPoint.x * 100}% ${attributes.bgFocalPoint.y * 100}%`, backgroundSize: `${attributes.backgroundRepeat === 'repeat' ? 'auto' : 'cover'}` }),
     279    ...(attributes?.bgGradient && { backgroundImage: attributes.bgGradient }),
    256280    flex: `${attributes.flexGrow} ${attributes.flexShrink} ${attributes.flexBasis === 'custom' ? attributes.flexBasisCustom : attributes.flexBasis}`,
    257281    ...(attributes.minHeight && { minHeight: attributes.minHeight }),
    … …  
    333357              </fieldset>
    334358            </PanelRow>
    335             {/* <PanelRow>
    336               <fieldset className='cabezi-fieldset'>
    337                 <TextareaControl
    338                   label='Inline Background Image'
    339                   value={attributes.inlineBgImage}
    340                   onChange={onChangeInlineBgImage}
    341                 />
    342               </fieldset>
    343             </PanelRow>
    344             <PanelRow>
    345               <fieldset className='cabezi-fieldset'>
    346                 <RadioGroup label='Background Repeat' onChange={onChangeBackgroundRepeat} checked={attributes.backgroundRepeat}>
    347                   <Radio value='repeat'>Repeat</Radio>
    348                   <Radio value='no-repeat'>No Repeat</Radio>
    349                 </RadioGroup>
    350               </fieldset>
    351             </PanelRow>
    352             <PanelRow>
    353               <fieldset className='cabezi-fieldset'>
    354                 <RadioGroup label='Background Attachment' onChange={onChangeBackgroundAttachment} checked={attributes.backgroundAttachment}>
    355                   <Radio value='scroll'>Scroll</Radio>
    356                   <Radio value='fixed'>Fixed</Radio>
    357                   <Radio value='local'>Local</Radio>
    358                 </RadioGroup>
    359               </fieldset>
    360             </PanelRow> */}
    361359            <PanelRow>
    362360              <fieldset className='cabezi-fieldset'>
    … …  
    12031201                </PanelRow>
    12041202              </>}
     1203          </PanelBody>
     1204          <PanelBody title={__('Background Image & Gradient', 'flextainer')} initialOpen={false}>
     1205            <PanelRow>
     1206              <MediaUpload
     1207                onSelect={onChangeBgImage}
     1208                multiple={false}
     1209                render={({ open }) => (
     1210                  <button style={{ padding: '.5rem 1rem' }} onClick={open}>
     1211                    Upload Background Image
     1212                  </button>
     1213                )}
     1214              />
     1215            </PanelRow>
     1216            <PanelRow>
     1217              {attributes?.bgImage?.url &&
     1218                <button style={{ padding: '.5rem 1rem' }} onClick={clearBgImage}>
     1219                  Remove Background Image
     1220                </button>}
     1221            </PanelRow>
     1222            <PanelRow>
     1223              <fieldset className='cabezi-fieldset'>
     1224                <RadioGroup label='Background Repeat' onChange={onChangeBackgroundRepeat} checked={attributes.backgroundRepeat}>
     1225                  <Radio value='repeat'>Repeat</Radio>
     1226                  <Radio value='no-repeat'>No Repeat</Radio>
     1227                </RadioGroup>
     1228              </fieldset>
     1229            </PanelRow>
     1230            <PanelRow>
     1231              <fieldset className='cabezi-fieldset'>
     1232                <RadioGroup label='Background Attachment' onChange={onChangeBackgroundAttachment} checked={attributes.backgroundAttachment}>
     1233                  <Radio value='scroll'>Scroll</Radio>
     1234                  <Radio value='fixed'>Fixed</Radio>
     1235                  <Radio value='local'>Local</Radio>
     1236                </RadioGroup>
     1237              </fieldset>
     1238            </PanelRow>
     1239            {attributes?.bgImage?.url &&
     1240              <PanelRow>
     1241                <fieldset className='cabezi-fieldset'>
     1242                  <FocalPointPicker
     1243                    url={attributes.bgImage.url}
     1244                    value={attributes.bgFocalPoint}
     1245                    onDragStart={setBGFocalPoint}
     1246                    onDrag={setBGFocalPoint}
     1247                    onChange={setBGFocalPoint}
     1248                  />
     1249                </fieldset>
     1250              </PanelRow>}
     1251            <PanelRow>
     1252              <BaseControl label='Background Gradient (Overrides Background Image)'>
     1253                <br />
     1254                <GradientPicker
     1255                  __nextHasNoMargin
     1256                  value={attributes.bgGradient}
     1257                  onChange={onChangeBgGradient}
     1258                />
     1259              </BaseControl>
     1260            </PanelRow>
    12051261          </PanelBody>
    12061262          <PanelBody title={__('Animation Settings', 'flexitem')} initialOpen={false}>

  • flexblocks/trunk/blocks/flexitem/src/index.js

    r2872685 r2892984  
    5555      default: ''
    5656    },
     57    bgImage: {
     58      type: 'object',
     59      default: null
     60    },
     61    bgFocalPoint: {
     62      type: 'object',
     63      default: { x: 0.5, y: 0.5 }
     64    },
     65    bgGradient: {
     66      type: 'string',
     67      default: null
     68    },
    5769    borderStyle: {
    5870      type: 'string',

  • flexblocks/trunk/blocks/flexitem/src/save.js

    r2872685 r2892984  
    3333    flex: `${attributes.flexGrow} ${attributes.flexShrink} ${attributes.flexBasis === 'custom' ? attributes.flexBasisCustom : attributes.flexBasis}`,
    3434    ...(attributes.overflow && { overflow: attributes.overflow }),
    35     ...(attributes.inlineBgImage && { backgroundImage: `url(${attributes.inlineBgImage})`, backgroundRepeat: `${attributes.backgroundRepeat}`, backgroundAttachment: `${attributes.backgroundAttachment}`, backgroundPosition: '50% 50%', backgroundSize: `${attributes.backgroundRepeat === 'repeat' ? 'auto' : 'cover'}` }),
     35    ...(attributes?.bgImage?.url && { backgroundImage: `url(${attributes.bgImage.url})`, backgroundRepeat: `${attributes.backgroundRepeat}`, backgroundAttachment: `${attributes.backgroundAttachment}`, backgroundPosition: `${attributes.bgFocalPoint.x * 100}% ${attributes.bgFocalPoint.y * 100}%`, backgroundSize: `${attributes.backgroundRepeat === 'repeat' ? 'auto' : 'cover'}` }),
     36    ...(attributes?.bgGradient && { backgroundImage: attributes.bgGradient }),
    3637    ...(attributes.minHeight && { minHeight: attributes.minHeight }),
    3738    ...(attributes.maxHeight && { maxHeight: attributes.maxHeight }),

  • flexblocks/trunk/blocks/flextainer/build/index.asset.php

    r2872685 r2892984  
    1 <?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '43a0cbe1112d83e1591f1a71d7964de2');
     1<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '0b01610d618bc10e48614f6291b1c6f9');

  • flexblocks/trunk/blocks/flextainer/build/index.js

    r2872685 r2892984  
    1 !function(){"use strict";var e=window.wp.blocks,l=window.wp.element,a=window.wp.i18n,t=window.wp.blockEditor,n=window.wp.components;function o(){return o=Object.assign||function(e){for(var l=1;l<arguments.length;l++){var a=arguments[l];for(var t in a)Object.prototype.hasOwnProperty.call(a,t)&&(e[t]=a[t])}return e},o.apply(this,arguments)}(0,e.registerBlockType)("cabezi/flextainer",{attributes:{alignItems:{type:"string",default:"normal"},alignItemsResponsive:{type:"string",default:"normal"},backgroundBlurEnabled:{type:"boolean",default:!1},backgroundBlurPixels:{type:"string",default:"0px"},backgroundAttachment:{type:"string",default:"scroll"},backgroundRepeat:{type:"string",default:"repeat"},bgColor:{type:"string",default:""},borderStyle:{type:"string",default:"none"},borderWidth:{type:"string",default:"1px"},borderColor:{type:"string",default:"initial"},borderRadius:{type:"string",default:"0px"},breakPoint:{type:"string",default:"768px"},cover:{type:"boolean",default:!1},boxShadowEnabled:{type:"boolean",default:!1},boxShadowOffsetX:{type:"string",default:"3px"},boxShadowOffsetY:{type:"string",default:"3px"},boxShadowBlurRadius:{type:"string",default:"3px"},boxShadowColor:{type:"string",default:"#000"},eagerLoadImages:{type:"boolean",default:!1},enableBreakPoint:{type:"boolean",default:!1},flexDirection:{type:"string",default:"row"},flexDirectionResponsive:{type:"string",default:"column"},flexWrap:{type:"string",default:"nowrap"},flexWrapResponsive:{type:"string",default:"nowrap"},fontFamily:{type:"string"},gap:{type:"string",default:"0px"},overflow:{type:"string",default:"visible"},hideAtBreakPoint:{type:"boolean",default:!1},hideAboveBreakPoint:{type:"boolean",default:!1},justifyContent:{type:"string",default:"normal"},justifyContentResponsive:{type:"string",default:"normal"},inlineBgImage:{type:"string"},link:{type:"string",default:"/"},linkEnabled:{type:"boolean",default:!1},margin:{type:"object",default:{top:"0rem",right:"0rem",bottom:"0rem",left:"0rem"}},minHeight:{type:"string",default:""},maxHeight:{type:"string"},maxWidth:{type:"string",default:""},padding:{type:"object",default:{top:"0rem",right:"0rem",bottom:"0rem",left:"0rem"}},revealDisabledMobile:{type:"boolean",default:!1},revealType:{type:"string",default:"none"},revealDuration:{type:"integer",default:200},revealDelay:{type:"integer",default:0},revealEasingFunction:{type:"string",default:"linear"},uuid:{type:"string"},zIndex:{type:"integer",default:0}},edit:function(e){let{attributes:o,setAttributes:i,clientId:r}=e;o.uuid!==r&&i({uuid:r});const s={display:"flex",...o.bgColor&&{backgroundColor:o.bgColor},...o.backgroundBlurEnabled&&{backdropFilter:`blur(${o.backgroundBlurPixels})`},borderStyle:`${"none"===o.borderStyle?"solid":o.borderStyle}`,...o.borderWidth&&{borderWidth:o.borderWidth},borderColor:`${"none"===o.borderStyle?"lightgray":o.borderColor}`,...o.borderRadius&&{borderRadius:o.borderRadius},...o.boxShadowEnabled&&{boxShadow:`${o.boxShadowOffsetX} ${o.boxShadowOffsetY} ${o.boxShadowBlurRadius} ${o.boxShadowColor||"#FFF"}`},...o.fontFamily&&{fontFamily:o.fontFamily},...o.gap&&{gap:o.gap},...o.overflow&&{overflow:o.overflow},...o.inlineBgImage&&{backgroundImage:`url(${o.inlineBgImage})`,backgroundRepeat:`${o.backgroundRepeat}`,backgroundAttachment:`${o.backgroundAttachment}`,backgroundPosition:"50% 50%",backgroundSize:"repeat"===o.backgroundRepeat?"auto":"cover"},...o.minHeight&&{minHeight:o.minHeight},...o.maxHeight&&{maxHeight:o.maxHeight},marginTop:`calc(${o.margin.top} + 30px)`,marginBottom:`calc(${o.margin.bottom} + 30px)`,marginRight:"auto",marginLeft:"auto",...o.padding.top&&{paddingTop:o.padding.top},...o.padding.right&&{paddingRight:o.padding.right},paddingBottom:`calc(${o.padding.bottom} + 45px)`,...o.padding.left&&{paddingLeft:o.padding.left},position:"relative",width:"100%",...o.maxWidth&&{maxWidth:o.maxWidth},...o.zIndex&&{zIndex:o.zIndex}},d=(0,t.useBlockProps)({className:`cabezi-block cabezi-${o.uuid}`,style:s}),u=(0,t.useInnerBlocksProps)(d,{__experimentalDirectInsert:!0,templateInsertUpdatesSelection:!0,renderAppender:e=>(0,l.createElement)("div",{style:{margin:".5rem"}},(0,l.createElement)(t.InnerBlocks.ButtonBlockAppender,e))});return(0,l.createElement)(l.Fragment,null,(0,l.createElement)(t.InspectorControls,{key:"setting"},(0,l.createElement)(n.Panel,null,(0,l.createElement)(n.PanelBody,{title:(0,a.__)("General Settings","flextainer"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Overflow",value:o.overflow,options:[{label:"Auto",value:"auto"},{label:"Hidden",value:"hidden"},{label:"Visible",value:"visible"},{label:"Scroll",value:"scroll"}],onChange:e=>{i({overflow:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.__experimentalInputControl,{label:(0,l.createElement)(l.Fragment,null,"Font Family ",(0,l.createElement)(n.Tooltip,{position:"top center",text:(0,a.__)("Font Family Must Be Loaded By Theme, Plugin, or Front End Framework!")},(0,l.createElement)(n.Dashicon,{icon:"editor-help"}))),value:o.fontFamily,onChange:e=>{i({fontFamily:e})},type:"text"}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Full Width?",checked:o.cover,onChange:e=>{i({cover:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Responsive Break Point?",checked:o.enableBreakPoint,onChange:e=>{i({enableBreakPoint:e})}}))),o.enableBreakPoint&&(0,l.createElement)(l.Fragment,null,(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Hide Below Break Point",checked:o.hideAtBreakPoint,onChange:e=>{i({hideAtBreakPoint:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Hide Above Break Point",checked:o.hideAboveBreakPoint,onChange:e=>{i({hideAboveBreakPoint:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Responsive Break Point","flexitem")),(0,l.createElement)(n.__experimentalUnitControl,{value:o.breakPoint,onChange:e=>{i({breakPoint:e})},units:[{value:"px",label:"px",default:768}]})))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Enable Link",checked:o.linkEnabled,onChange:e=>{i({linkEnabled:e})}}))),o.linkEnabled&&(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.__experimentalInputControl,{label:"Link URL",value:o.link,onChange:e=>{i({link:e})},type:"text"}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Eager Load Images",checked:o.eagerLoadImages,onChange:e=>{i({eagerLoadImages:e})}})))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Flex Options","flextainer"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Flex Direction",value:o.flexDirection,options:[{label:"row",value:"row"},{label:"row-reverse",value:"row-reverse"},{label:"column",value:"column"},{label:"column-reverse",value:"column-reverse"}],onChange:e=>{i({flexDirection:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Justify Content",value:o.justifyContent,options:[{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"left",value:"left"},{label:"right",value:"right"},{label:"space-between",value:"space-between"},{label:"space-around",value:"space-around"},{label:"space-evenly",value:"space-evenly"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{i({justifyContent:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Align Items",value:o.alignItems,options:[{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"start",value:"start"},{label:"end",value:"end"},{label:"self-start",value:"self-start"},{label:"self-end",value:"self-end"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{i({alignItems:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Flex Wrap",value:o.flexWrap,options:[{label:"wrap",value:"wrap"},{label:"nowrap",value:"nowrap"},{label:"wrap-reverse",value:"wrap-reverse"}],onChange:e=>{i({flexWrap:e})}}))),o.enableBreakPoint&&(0,l.createElement)(l.Fragment,null,(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Flex Direction (Responsive)",value:o.flexDirectionResponsive,options:[{label:"row",value:"row"},{label:"row-reverse",value:"row-reverse"},{label:"column",value:"column"},{label:"column-reverse",value:"column-reverse"}],onChange:e=>{i({flexDirectionResponsive:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Justify Content (Responsive)",value:o.justifyContentResponsive,options:[{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"left",value:"left"},{label:"right",value:"right"},{label:"space-between",value:"space-between"},{label:"space-around",value:"space-around"},{label:"space-evenly",value:"space-evenly"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{i({justifyContentResponsive:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Align Items (Responsive)",value:o.alignItemsResponsive,options:[{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"start",value:"start"},{label:"end",value:"end"},{label:"self-start",value:"self-start"},{label:"self-end",value:"self-end"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{i({alignItemsResponsive:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Flex Wrap (Responsive)",value:o.flexWrapResponsive,options:[{label:"wrap",value:"wrap"},{label:"nowrap",value:"nowrap"},{label:"wrap-reverse",value:"wrap-reverse"}],onChange:e=>{i({flexWrapResponsive:e})}}))))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Color Options","flextainer"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Background Color","flextainer")),(0,l.createElement)(n.ColorPicker,{color:o.bgColor,onChange:e=>{i({bgColor:e})},enableAlpha:!0}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Enable Background Blur",checked:o.backgroundBlurEnabled,onChange:e=>{i({backgroundBlurEnabled:e})}}))),o.backgroundBlurEnabled&&(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Background Blur Pixels","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:o.backgroundBlurPixels,onChange:e=>{i({backgroundBlurPixels:e})},units:[{value:"px",label:"px",default:0}]})))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Border Options","flextainer"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Border Style",value:o.borderStyle,options:[{label:"dotted",value:"dotted"},{label:"dashed",value:"dashed"},{label:"solid",value:"solid"},{label:"double",value:"double"},{label:"groove",value:"groove"},{label:"ridge",value:"ridge"},{label:"inset",value:"inset"},{label:"outset",value:"outset"},{label:"none",value:"none"},{label:"hidden",value:"hidden"}],onChange:e=>{i({borderStyle:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Border Width","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:o.borderWidth,onChange:e=>{i({borderWidth:e})},units:[{value:"px",label:"px",default:1},{value:"rem",label:"rem",default:.1}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Border Color","flextainer")),(0,l.createElement)(t.ColorPalette,{onChange:e=>{i({borderColor:e})},value:o.borderColor}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Border Radius","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:o.borderRadius,onChange:e=>{i({borderRadius:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:0},{value:"rem",label:"rem",default:0,step:.01}]})))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Dimensions","flextainer"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Min-Height","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:o.minHeight,onChange:e=>{i({minHeight:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:100},{value:"rem",label:"rem",default:0,step:.01},{value:"vw",label:"vw",default:0},{value:"vh",label:"vh",default:0}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Max-Height","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:o.maxHeight,onChange:e=>{i({maxHeight:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:100},{value:"rem",label:"rem",default:0,step:.01},{value:"vw",label:"vw",default:0},{value:"vh",label:"vh",default:0}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Max-Width","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:o.maxWidth,onChange:e=>{i({maxWidth:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:0},{value:"rem",label:"rem",default:0,step:.01},{value:"vw",label:"vw",default:0},{value:"vh",label:"vh",default:0}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Gap","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:o.gap,onChange:e=>{i({gap:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:0},{value:"rem",label:"rem",default:0,step:.01},{value:"vw",label:"vw",default:0},{value:"vh",label:"vh",default:0}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.__experimentalInputControl,{label:"Z-Index",value:o.zIndex,onChange:e=>{i({zIndex:parseInt(e)})},type:"number"})))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Margin and Padding","flextainer"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)(n.__experimentalBoxControl,{label:"Margin",values:o.margin,onChange:e=>{i({margin:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:0},{value:"rem",label:"rem",default:0,step:.01}],inputProps:{onValidate:()=>null},sides:["top","bottom"],resetValues:{top:"0rem",bottom:"0rem"}})),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)(n.__experimentalBoxControl,{label:"Padding",values:o.padding,onChange:e=>{i({padding:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:0},{value:"rem",label:"rem",default:0,step:.01}],inputProps:{onValidate:()=>null},resetValues:{top:"0rem",right:"0rem",bottom:"0rem",left:"0rem"}}))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Box Shadow","flextainer"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Enable Box Shadow?",checked:o.boxShadowEnabled,onChange:e=>{i({boxShadowEnabled:e})}}))),o.boxShadowEnabled&&(0,l.createElement)(l.Fragment,null,(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Box-Shadow Offset-X","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:o.boxShadowOffsetX,onChange:e=>{i({boxShadowOffsetX:e})},units:[{value:"px",label:"px",default:3}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Box-Shadow Offset-Y","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:o.boxShadowOffsetY,onChange:e=>{i({boxShadowOffsetY:e})},units:[{value:"px",label:"px",default:3}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Box-Shadow Blur-Radius","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:o.boxShadowBlurRadius,onChange:e=>{i({boxShadowBlurRadius:e})},units:[{value:"px",label:"px",default:3}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Box-Shadow Color","flextainer")),(0,l.createElement)(n.ColorPicker,{color:o.boxShadowColor,onChange:e=>{i({boxShadowColor:e})},enableAlpha:!0,defaultValue:"#000"}))))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Animation Settings","flextainer"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Disable For Mobile",checked:o.revealDisabledMobile,onChange:e=>{i({revealDisabledMobile:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Reveal Effect",value:o.revealType,options:[{label:"none",value:"none"},{label:"fade",value:"fade"},{label:"slide-up",value:"slide-up"},{label:"slide-down",value:"slide-down"},{label:"slide-left",value:"slide-left"},{label:"slide-right",value:"slide-right"},{label:"zoom-in",value:"zoom-in"},{label:"zoom-out",value:"zoom-out"},{label:"flip-up",value:"flip-up"},{label:"flip-down",value:"flip-down"},{label:"flip-left",value:"flip-left"},{label:"flip-right",value:"flip-right"}],onChange:e=>{i({revealType:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.RangeControl,{label:"Reveal Duration (in ms)",value:o.revealDuration,onChange:e=>{i({revealDuration:e})},initialPosition:200,min:200,max:2e3,step:100}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.RangeControl,{label:"Reveal Delay (in ms)",value:o.revealDelay,onChange:e=>{i({revealDelay:e})},initialPosition:0,min:0,max:1e3,step:100}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Reveal Easing Function",value:o.revealEasingFunction,options:[{label:"none",value:"none"},{label:"linear",value:"linear"},{label:"ease",value:"ease"},{label:"ease-in",value:"ease-in"},{label:"ease-out",value:"ease-out"},{label:"ease-in-out",value:"ease-in-out"},{label:"ease-in-cubic",value:"ease-in-cubic"},{label:"ease-out-cubic",value:"ease-out-cubic"},{label:"ease-in-out-cubic",value:"ease-in-out-cubic"},{label:"ease-in-circ",value:"ease-in-circ"},{label:"ease-out-circ",value:"ease-out-circ"},{label:"ease-in-out-circ",value:"ease-in-out-circ"},{label:"ease-in-expo",value:"ease-in-expo"},{label:"ease-out-expo",value:"ease-out-expo"},{label:"ease-in-out-expo",value:"ease-in-out-expo"},{label:"ease-in-quad",value:"ease-in-quad"},{label:"ease-out-quad",value:"ease-out-quad"},{label:"ease-in-out-quad",value:"ease-in-out-quad"},{label:"ease-in-quart",value:"ease-in-quart"},{label:"ease-out-quart",value:"ease-out-quart"},{label:"ease-in-out-quart",value:"ease-in-out-quart"},{label:"ease-in-quint",value:"ease-in-quint"},{label:"ease-out-quint",value:"ease-out-quint"},{label:"ease-in-out-quint",value:"ease-in-out-quint"},{label:"ease-in-sine",value:"ease-in-sine"},{label:"ease-out-sine",value:"ease-out-sine"},{label:"ease-in-out-sine",value:"ease-in-out-sine"},{label:"ease-in-back",value:"ease-in-back"},{label:"ease-out-back",value:"ease-out-back"},{label:"ease-in-out-back",value:"ease-in-out-back"}],onChange:e=>{i({revealEasingFunction:e})}})))))),(0,l.createElement)(l.Fragment,null,(0,l.createElement)("style",null,`\n            .cabezi-${o.uuid} {\n              align-items: ${o.alignItems};\n              flex-direction: ${o.flexDirection};\n              flex-wrap: ${o.flexWrap};\n              justify-content: ${o.justifyContent};\n            }\n          `),o.enableBreakPoint&&(0,l.createElement)("style",null,`\n              @media(max-width: ${o.breakPoint}) {\n                .cabezi-${o.uuid} {\n                  align-items: ${o.alignItemsResponsive};\n                  flex-direction: ${o.flexDirectionResponsive};\n                  flex-wrap: ${o.flexWrapResponsive};\n                  justify-content: ${o.justifyContentResponsive};\n                }\n              }\n            `),(0,l.createElement)("div",u)))},save:function(e){let{attributes:a}=e;const n={display:"flex",...a.bgColor&&{backgroundColor:a.bgColor},...a.backgroundBlurEnabled&&{backdropFilter:`blur(${a.backgroundBlurPixels})`},...a.borderStyle&&{borderStyle:a.borderStyle},...a.borderWidth&&{borderWidth:a.borderWidth},...a.borderColor&&{borderColor:a.borderColor},...a.borderRadius&&{borderRadius:a.borderRadius},...a.boxShadowEnabled&&{boxShadow:`${a.boxShadowOffsetX} ${a.boxShadowOffsetY} ${a.boxShadowBlurRadius} ${a.boxShadowColor||"#FFF"}`},...a.fontFamily&&{fontFamily:a.fontFamily},...a.gap&&{gap:a.gap},...a.overflow&&{overflow:a.overflow},...a.inlineBgImage&&{backgroundImage:`url(${a.inlineBgImage})`,backgroundRepeat:`${a.backgroundRepeat}`,backgroundAttachment:`${a.backgroundAttachment}`,backgroundPosition:"50% 50%",backgroundSize:"repeat"===a.backgroundRepeat?"auto":"cover"},...a.cover&&{left:"50%"},...a.minHeight&&{minHeight:a.minHeight},...a.maxHeight&&{maxHeight:a.maxHeight},...a.margin.top&&{marginTop:a.margin.top},...a.margin.bottom&&{marginBottom:a.margin.bottom},marginRight:a.cover?"-50vw !important":"auto",marginLeft:a.cover?"-50vw !important":"auto",...a.padding.top&&{paddingTop:a.padding.top},...a.padding.right&&{paddingRight:a.padding.right},...a.padding.bottom&&{paddingBottom:a.padding.bottom},...a.padding.left&&{paddingLeft:a.padding.left},...a.cover&&{right:"50%"},position:"relative",width:a.cover?"100vw":"100%",...a.cover&&{maxWidth:"initial"},...a.maxWidth&&{maxWidth:a.maxWidth},...a.zIndex&&{zIndex:a.zIndex}},i=t.useBlockProps.save({className:`cabezi-${a.uuid} ${a.eagerLoadImages?"cabezi-block no-lazy-cabezi":"cabezi-block"}`,style:n,"data-sal":a.revealType,"data-sal-duration":a.revealDuration,"data-sal-delay":a.revealDelay,"data-sal-easing":a.revealEasingFunction,"data-sal-mobile-disabled":a.revealDisabledMobile}),r=t.useInnerBlocksProps.save(i);return(0,l.createElement)(l.Fragment,null,(0,l.createElement)("style",null,`\n          .cabezi-${a.uuid} {\n            align-items: ${a.alignItems};\n            flex-direction: ${a.flexDirection};\n            flex-wrap: ${a.flexWrap};\n            justify-content: ${a.justifyContent};\n            ${a.dropShadowEnabled?`filter: drop-shadow(${a.dropShadowOffsetX} ${a.dropShadowOffsetY} ${a.dropShadowBlurRadius} rgba(${function(e){let l=arguments.length>1&&void 0!==arguments[1]&&arguments[1];const a=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;e=e.replace(a,(function(e,l,a,t){return l+l+a+a+t+t}));const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e),n=t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null;return n?l?`rgb(${n.r}, ${n.g}, ${n.b})`:`${n.r} ${n.g} ${n.b}`:null}(a.dropShadowColor)} / ${a.dropShadowColorOpacity}));`:""}\n            ${a.hideAboveBreakPoint?"display: none !important;":""}\n          }\n        `),a.enableBreakPoint&&(0,l.createElement)("style",null,`\n            @media(max-width: ${a.breakPoint}) {\n              .cabezi-${a.uuid} {\n                align-items: ${a.alignItemsResponsive};\n                flex-direction: ${a.flexDirectionResponsive};\n                flex-wrap: ${a.flexWrapResponsive};\n                justify-content: ${a.justifyContentResponsive};\n                ${a.hideAtBreakPoint?"display: none !important;":""}\n                ${a.hideAboveBreakPoint&&!a.hideAtBreakPoint?"display: flex !important;":""}\n              }\n            }\n          `),a.linkEnabled&&(0,l.createElement)("style",null,`\n            .cabezi-${a.uuid}:hover {\n              opacity: .8 !important;\n              cursor: pointer !important;\n            }\n          `),(0,l.createElement)("div",o({},r,{onClick:a.linkEnabled?`window.location.href='${a.link}'`:null})))}})}();
     1!function(){"use strict";var e=window.wp.blocks,l=window.wp.element,a=window.wp.i18n,t=window.wp.blockEditor,n=window.wp.components;function o(){return o=Object.assign||function(e){for(var l=1;l<arguments.length;l++){var a=arguments[l];for(var t in a)Object.prototype.hasOwnProperty.call(a,t)&&(e[t]=a[t])}return e},o.apply(this,arguments)}(0,e.registerBlockType)("cabezi/flextainer",{attributes:{alignItems:{type:"string",default:"normal"},alignItemsResponsive:{type:"string",default:"normal"},backgroundBlurEnabled:{type:"boolean",default:!1},backgroundBlurPixels:{type:"string",default:"0px"},backgroundAttachment:{type:"string",default:"scroll"},backgroundRepeat:{type:"string",default:"repeat"},bgColor:{type:"string",default:""},bgImage:{type:"object",default:null},bgFocalPoint:{type:"object",default:{x:.5,y:.5}},bgGradient:{type:"string",default:null},borderStyle:{type:"string",default:"none"},borderWidth:{type:"string",default:"1px"},borderColor:{type:"string",default:"initial"},borderRadius:{type:"string",default:"0px"},breakPoint:{type:"string",default:"768px"},cover:{type:"boolean",default:!1},boxShadowEnabled:{type:"boolean",default:!1},boxShadowOffsetX:{type:"string",default:"3px"},boxShadowOffsetY:{type:"string",default:"3px"},boxShadowBlurRadius:{type:"string",default:"3px"},boxShadowColor:{type:"string",default:"#000"},eagerLoadImages:{type:"boolean",default:!1},enableBreakPoint:{type:"boolean",default:!1},flexDirection:{type:"string",default:"row"},flexDirectionResponsive:{type:"string",default:"column"},flexWrap:{type:"string",default:"nowrap"},flexWrapResponsive:{type:"string",default:"nowrap"},fontFamily:{type:"string"},gap:{type:"string",default:"0px"},overflow:{type:"string",default:"visible"},hideAtBreakPoint:{type:"boolean",default:!1},hideAboveBreakPoint:{type:"boolean",default:!1},justifyContent:{type:"string",default:"normal"},justifyContentResponsive:{type:"string",default:"normal"},inlineBgImage:{type:"string"},link:{type:"string",default:"/"},linkEnabled:{type:"boolean",default:!1},margin:{type:"object",default:{top:"0rem",right:"0rem",bottom:"0rem",left:"0rem"}},minHeight:{type:"string",default:""},maxHeight:{type:"string"},maxWidth:{type:"string",default:""},padding:{type:"object",default:{top:"0rem",right:"0rem",bottom:"0rem",left:"0rem"}},revealDisabledMobile:{type:"boolean",default:!1},revealType:{type:"string",default:"none"},revealDuration:{type:"integer",default:200},revealDelay:{type:"integer",default:0},revealEasingFunction:{type:"string",default:"linear"},uuid:{type:"string"},zIndex:{type:"integer",default:0}},edit:function(e){let{attributes:o,setAttributes:r,clientId:i}=e;o.uuid!==i&&r({uuid:i});const s=e=>{r({bgFocalPoint:e})},d={display:"flex",...o.bgColor&&{backgroundColor:o.bgColor},...o.backgroundBlurEnabled&&{backdropFilter:`blur(${o.backgroundBlurPixels})`},borderStyle:`${"none"===o.borderStyle?"solid":o.borderStyle}`,...o.borderWidth&&{borderWidth:o.borderWidth},borderColor:`${"none"===o.borderStyle?"lightgray":o.borderColor}`,...o.borderRadius&&{borderRadius:o.borderRadius},...o.boxShadowEnabled&&{boxShadow:`${o.boxShadowOffsetX} ${o.boxShadowOffsetY} ${o.boxShadowBlurRadius} ${o.boxShadowColor||"#FFF"}`},...o.fontFamily&&{fontFamily:o.fontFamily},...o.gap&&{gap:o.gap},...o.overflow&&{overflow:o.overflow},...o?.bgImage?.url&&{backgroundImage:`url(${o.bgImage.url})`,backgroundRepeat:`${o.backgroundRepeat}`,backgroundAttachment:`${o.backgroundAttachment}`,backgroundPosition:`${100*o.bgFocalPoint.x}% ${100*o.bgFocalPoint.y}%`,backgroundSize:"repeat"===o.backgroundRepeat?"auto":"cover"},...o?.bgGradient&&{backgroundImage:o.bgGradient},...o.minHeight&&{minHeight:o.minHeight},...o.maxHeight&&{maxHeight:o.maxHeight},marginTop:`calc(${o.margin.top} + 30px)`,marginBottom:`calc(${o.margin.bottom} + 30px)`,marginRight:"auto",marginLeft:"auto",...o.padding.top&&{paddingTop:o.padding.top},...o.padding.right&&{paddingRight:o.padding.right},paddingBottom:`calc(${o.padding.bottom} + 45px)`,...o.padding.left&&{paddingLeft:o.padding.left},position:"relative",width:"100%",...o.maxWidth&&{maxWidth:o.maxWidth},...o.zIndex&&{zIndex:o.zIndex}},u=(0,t.useBlockProps)({className:`cabezi-block cabezi-${o.uuid}`,style:d}),c=(0,t.useInnerBlocksProps)(u,{__experimentalDirectInsert:!0,templateInsertUpdatesSelection:!0,renderAppender:e=>(0,l.createElement)("div",{style:{margin:".5rem"}},(0,l.createElement)(t.InnerBlocks.ButtonBlockAppender,e))});return(0,l.createElement)(l.Fragment,null,(0,l.createElement)(t.InspectorControls,{key:"setting"},(0,l.createElement)(n.Panel,null,(0,l.createElement)(n.PanelBody,{title:(0,a.__)("General Settings","flextainer"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Overflow",value:o.overflow,options:[{label:"Auto",value:"auto"},{label:"Hidden",value:"hidden"},{label:"Visible",value:"visible"},{label:"Scroll",value:"scroll"}],onChange:e=>{r({overflow:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.__experimentalInputControl,{label:(0,l.createElement)(l.Fragment,null,"Font Family ",(0,l.createElement)(n.Tooltip,{position:"top center",text:(0,a.__)("Font Family Must Be Loaded By Theme, Plugin, or Front End Framework!")},(0,l.createElement)(n.Dashicon,{icon:"editor-help"}))),value:o.fontFamily,onChange:e=>{r({fontFamily:e})},type:"text"}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Full Width?",checked:o.cover,onChange:e=>{r({cover:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Responsive Break Point?",checked:o.enableBreakPoint,onChange:e=>{r({enableBreakPoint:e})}}))),o.enableBreakPoint&&(0,l.createElement)(l.Fragment,null,(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Hide Below Break Point",checked:o.hideAtBreakPoint,onChange:e=>{r({hideAtBreakPoint:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Hide Above Break Point",checked:o.hideAboveBreakPoint,onChange:e=>{r({hideAboveBreakPoint:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Responsive Break Point","flexitem")),(0,l.createElement)(n.__experimentalUnitControl,{value:o.breakPoint,onChange:e=>{r({breakPoint:e})},units:[{value:"px",label:"px",default:768}]})))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Enable Link",checked:o.linkEnabled,onChange:e=>{r({linkEnabled:e})}}))),o.linkEnabled&&(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.__experimentalInputControl,{label:"Link URL",value:o.link,onChange:e=>{r({link:e})},type:"text"}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Eager Load Images",checked:o.eagerLoadImages,onChange:e=>{r({eagerLoadImages:e})}})))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Flex Options","flextainer"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Flex Direction",value:o.flexDirection,options:[{label:"row",value:"row"},{label:"row-reverse",value:"row-reverse"},{label:"column",value:"column"},{label:"column-reverse",value:"column-reverse"}],onChange:e=>{r({flexDirection:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Justify Content",value:o.justifyContent,options:[{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"left",value:"left"},{label:"right",value:"right"},{label:"space-between",value:"space-between"},{label:"space-around",value:"space-around"},{label:"space-evenly",value:"space-evenly"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{r({justifyContent:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Align Items",value:o.alignItems,options:[{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"start",value:"start"},{label:"end",value:"end"},{label:"self-start",value:"self-start"},{label:"self-end",value:"self-end"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{r({alignItems:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Flex Wrap",value:o.flexWrap,options:[{label:"wrap",value:"wrap"},{label:"nowrap",value:"nowrap"},{label:"wrap-reverse",value:"wrap-reverse"}],onChange:e=>{r({flexWrap:e})}}))),o.enableBreakPoint&&(0,l.createElement)(l.Fragment,null,(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Flex Direction (Responsive)",value:o.flexDirectionResponsive,options:[{label:"row",value:"row"},{label:"row-reverse",value:"row-reverse"},{label:"column",value:"column"},{label:"column-reverse",value:"column-reverse"}],onChange:e=>{r({flexDirectionResponsive:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Justify Content (Responsive)",value:o.justifyContentResponsive,options:[{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"left",value:"left"},{label:"right",value:"right"},{label:"space-between",value:"space-between"},{label:"space-around",value:"space-around"},{label:"space-evenly",value:"space-evenly"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{r({justifyContentResponsive:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Align Items (Responsive)",value:o.alignItemsResponsive,options:[{label:"normal",value:"normal"},{label:"flex-start",value:"flex-start"},{label:"flex-end",value:"flex-end"},{label:"center",value:"center"},{label:"start",value:"start"},{label:"end",value:"end"},{label:"self-start",value:"self-start"},{label:"self-end",value:"self-end"},{label:"baseline",value:"baseline"},{label:"stretch",value:"stretch"},{label:"safe",value:"safe"},{label:"unsafe",value:"unsafe"}],onChange:e=>{r({alignItemsResponsive:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Flex Wrap (Responsive)",value:o.flexWrapResponsive,options:[{label:"wrap",value:"wrap"},{label:"nowrap",value:"nowrap"},{label:"wrap-reverse",value:"wrap-reverse"}],onChange:e=>{r({flexWrapResponsive:e})}}))))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Color Options","flextainer"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Background Color","flextainer")),(0,l.createElement)(n.ColorPicker,{color:o.bgColor,onChange:e=>{r({bgColor:e})},enableAlpha:!0}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Enable Background Blur",checked:o.backgroundBlurEnabled,onChange:e=>{r({backgroundBlurEnabled:e})}}))),o.backgroundBlurEnabled&&(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Background Blur Pixels","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:o.backgroundBlurPixels,onChange:e=>{r({backgroundBlurPixels:e})},units:[{value:"px",label:"px",default:0}]})))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Border Options","flextainer"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Border Style",value:o.borderStyle,options:[{label:"dotted",value:"dotted"},{label:"dashed",value:"dashed"},{label:"solid",value:"solid"},{label:"double",value:"double"},{label:"groove",value:"groove"},{label:"ridge",value:"ridge"},{label:"inset",value:"inset"},{label:"outset",value:"outset"},{label:"none",value:"none"},{label:"hidden",value:"hidden"}],onChange:e=>{r({borderStyle:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Border Width","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:o.borderWidth,onChange:e=>{r({borderWidth:e})},units:[{value:"px",label:"px",default:1},{value:"rem",label:"rem",default:.1}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Border Color","flextainer")),(0,l.createElement)(t.ColorPalette,{onChange:e=>{r({borderColor:e})},value:o.borderColor}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Border Radius","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:o.borderRadius,onChange:e=>{r({borderRadius:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:0},{value:"rem",label:"rem",default:0,step:.01}]})))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Dimensions","flextainer"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Min-Height","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:o.minHeight,onChange:e=>{r({minHeight:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:100},{value:"rem",label:"rem",default:0,step:.01},{value:"vw",label:"vw",default:0},{value:"vh",label:"vh",default:0}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Max-Height","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:o.maxHeight,onChange:e=>{r({maxHeight:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:100},{value:"rem",label:"rem",default:0,step:.01},{value:"vw",label:"vw",default:0},{value:"vh",label:"vh",default:0}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Max-Width","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:o.maxWidth,onChange:e=>{r({maxWidth:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:0},{value:"rem",label:"rem",default:0,step:.01},{value:"vw",label:"vw",default:0},{value:"vh",label:"vh",default:0}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Gap","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:o.gap,onChange:e=>{r({gap:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:0},{value:"rem",label:"rem",default:0,step:.01},{value:"vw",label:"vw",default:0},{value:"vh",label:"vh",default:0}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.__experimentalInputControl,{label:"Z-Index",value:o.zIndex,onChange:e=>{r({zIndex:parseInt(e)})},type:"number"})))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Margin and Padding","flextainer"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)(n.__experimentalBoxControl,{label:"Margin",values:o.margin,onChange:e=>{r({margin:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:0},{value:"rem",label:"rem",default:0,step:.01}],inputProps:{onValidate:()=>null},sides:["top","bottom"],resetValues:{top:"0rem",bottom:"0rem"}})),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)(n.__experimentalBoxControl,{label:"Padding",values:o.padding,onChange:e=>{r({padding:e})},units:[{value:"px",label:"px",default:0},{value:"%",label:"%",default:0},{value:"rem",label:"rem",default:0,step:.01}],inputProps:{onValidate:()=>null},resetValues:{top:"0rem",right:"0rem",bottom:"0rem",left:"0rem"}}))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Box Shadow","flextainer"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Enable Box Shadow?",checked:o.boxShadowEnabled,onChange:e=>{r({boxShadowEnabled:e})}}))),o.boxShadowEnabled&&(0,l.createElement)(l.Fragment,null,(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Box-Shadow Offset-X","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:o.boxShadowOffsetX,onChange:e=>{r({boxShadowOffsetX:e})},units:[{value:"px",label:"px",default:3}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Box-Shadow Offset-Y","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:o.boxShadowOffsetY,onChange:e=>{r({boxShadowOffsetY:e})},units:[{value:"px",label:"px",default:3}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Box-Shadow Blur-Radius","flextainer")),(0,l.createElement)(n.__experimentalUnitControl,{value:o.boxShadowBlurRadius,onChange:e=>{r({boxShadowBlurRadius:e})},units:[{value:"px",label:"px",default:3}]}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)("legend",{className:"cabezi-legend"},(0,a.__)("Box-Shadow Color","flextainer")),(0,l.createElement)(n.ColorPicker,{color:o.boxShadowColor,onChange:e=>{r({boxShadowColor:e})},enableAlpha:!0,defaultValue:"#000"}))))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Background Image & Gradient","flextainer"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)(t.MediaUpload,{onSelect:e=>{r({bgImage:{title:e.title,filename:e.filename,url:e.url,updated:""}})},multiple:!1,render:e=>{let{open:a}=e;return(0,l.createElement)("button",{style:{padding:".5rem 1rem"},onClick:a},"Upload Background Image")}})),(0,l.createElement)(n.PanelRow,null,o?.bgImage?.url&&(0,l.createElement)("button",{style:{padding:".5rem 1rem"},onClick:()=>{r({bgImage:null})}},"Remove Background Image")),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.__experimentalRadioGroup,{label:"Background Repeat",onChange:e=>{r({backgroundRepeat:e})},checked:o.backgroundRepeat},(0,l.createElement)(n.__experimentalRadio,{value:"repeat"},"Repeat"),(0,l.createElement)(n.__experimentalRadio,{value:"no-repeat"},"No Repeat")))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.__experimentalRadioGroup,{label:"Background Attachment",onChange:e=>{r({backgroundAttachment:e})},checked:o.backgroundAttachment},(0,l.createElement)(n.__experimentalRadio,{value:"scroll"},"Scroll"),(0,l.createElement)(n.__experimentalRadio,{value:"fixed"},"Fixed"),(0,l.createElement)(n.__experimentalRadio,{value:"local"},"Local")))),o?.bgImage?.url&&(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.FocalPointPicker,{url:o.bgImage.url,value:o.bgFocalPoint,onDragStart:s,onDrag:s,onChange:s}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)(n.BaseControl,{label:"Background Gradient (Overrides Background Image)"},(0,l.createElement)("br",null),(0,l.createElement)(n.GradientPicker,{__nextHasNoMargin:!0,value:o.bgGradient,onChange:e=>{r({bgGradient:e})}})))),(0,l.createElement)(n.PanelBody,{title:(0,a.__)("Animation Settings","flextainer"),initialOpen:!1},(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.ToggleControl,{label:"Disable For Mobile",checked:o.revealDisabledMobile,onChange:e=>{r({revealDisabledMobile:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Reveal Effect",value:o.revealType,options:[{label:"none",value:"none"},{label:"fade",value:"fade"},{label:"slide-up",value:"slide-up"},{label:"slide-down",value:"slide-down"},{label:"slide-left",value:"slide-left"},{label:"slide-right",value:"slide-right"},{label:"zoom-in",value:"zoom-in"},{label:"zoom-out",value:"zoom-out"},{label:"flip-up",value:"flip-up"},{label:"flip-down",value:"flip-down"},{label:"flip-left",value:"flip-left"},{label:"flip-right",value:"flip-right"}],onChange:e=>{r({revealType:e})}}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.RangeControl,{label:"Reveal Duration (in ms)",value:o.revealDuration,onChange:e=>{r({revealDuration:e})},initialPosition:200,min:200,max:2e3,step:100}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.RangeControl,{label:"Reveal Delay (in ms)",value:o.revealDelay,onChange:e=>{r({revealDelay:e})},initialPosition:0,min:0,max:1e3,step:100}))),(0,l.createElement)(n.PanelRow,null,(0,l.createElement)("fieldset",{className:"cabezi-fieldset"},(0,l.createElement)(n.SelectControl,{label:"Reveal Easing Function",value:o.revealEasingFunction,options:[{label:"none",value:"none"},{label:"linear",value:"linear"},{label:"ease",value:"ease"},{label:"ease-in",value:"ease-in"},{label:"ease-out",value:"ease-out"},{label:"ease-in-out",value:"ease-in-out"},{label:"ease-in-cubic",value:"ease-in-cubic"},{label:"ease-out-cubic",value:"ease-out-cubic"},{label:"ease-in-out-cubic",value:"ease-in-out-cubic"},{label:"ease-in-circ",value:"ease-in-circ"},{label:"ease-out-circ",value:"ease-out-circ"},{label:"ease-in-out-circ",value:"ease-in-out-circ"},{label:"ease-in-expo",value:"ease-in-expo"},{label:"ease-out-expo",value:"ease-out-expo"},{label:"ease-in-out-expo",value:"ease-in-out-expo"},{label:"ease-in-quad",value:"ease-in-quad"},{label:"ease-out-quad",value:"ease-out-quad"},{label:"ease-in-out-quad",value:"ease-in-out-quad"},{label:"ease-in-quart",value:"ease-in-quart"},{label:"ease-out-quart",value:"ease-out-quart"},{label:"ease-in-out-quart",value:"ease-in-out-quart"},{label:"ease-in-quint",value:"ease-in-quint"},{label:"ease-out-quint",value:"ease-out-quint"},{label:"ease-in-out-quint",value:"ease-in-out-quint"},{label:"ease-in-sine",value:"ease-in-sine"},{label:"ease-out-sine",value:"ease-out-sine"},{label:"ease-in-out-sine",value:"ease-in-out-sine"},{label:"ease-in-back",value:"ease-in-back"},{label:"ease-out-back",value:"ease-out-back"},{label:"ease-in-out-back",value:"ease-in-out-back"}],onChange:e=>{r({revealEasingFunction:e})}})))))),(0,l.createElement)(l.Fragment,null,(0,l.createElement)("style",null,`\n            .cabezi-${o.uuid} {\n              align-items: ${o.alignItems};\n              flex-direction: ${o.flexDirection};\n              flex-wrap: ${o.flexWrap};\n              justify-content: ${o.justifyContent};\n            }\n          `),o.enableBreakPoint&&(0,l.createElement)("style",null,`\n              @media(max-width: ${o.breakPoint}) {\n                .cabezi-${o.uuid} {\n                  align-items: ${o.alignItemsResponsive};\n                  flex-direction: ${o.flexDirectionResponsive};\n                  flex-wrap: ${o.flexWrapResponsive};\n                  justify-content: ${o.justifyContentResponsive};\n                }\n              }\n            `),(0,l.createElement)("div",c)))},save:function(e){let{attributes:a}=e;const n={display:"flex",...a.bgColor&&{backgroundColor:a.bgColor},...a.backgroundBlurEnabled&&{backdropFilter:`blur(${a.backgroundBlurPixels})`},...a.borderStyle&&{borderStyle:a.borderStyle},...a.borderWidth&&{borderWidth:a.borderWidth},...a.borderColor&&{borderColor:a.borderColor},...a.borderRadius&&{borderRadius:a.borderRadius},...a.boxShadowEnabled&&{boxShadow:`${a.boxShadowOffsetX} ${a.boxShadowOffsetY} ${a.boxShadowBlurRadius} ${a.boxShadowColor||"#FFF"}`},...a.fontFamily&&{fontFamily:a.fontFamily},...a.gap&&{gap:a.gap},...a.overflow&&{overflow:a.overflow},...a?.bgImage?.url&&{backgroundImage:`url(${a.bgImage.url})`,backgroundRepeat:`${a.backgroundRepeat}`,backgroundAttachment:`${a.backgroundAttachment}`,backgroundPosition:`${100*a.bgFocalPoint.x}% ${100*a.bgFocalPoint.y}%`,backgroundSize:"repeat"===a.backgroundRepeat?"auto":"cover"},...a?.bgGradient&&{backgroundImage:a.bgGradient},...a.cover&&{left:"50%"},...a.minHeight&&{minHeight:a.minHeight},...a.maxHeight&&{maxHeight:a.maxHeight},...a.margin.top&&{marginTop:a.margin.top},...a.margin.bottom&&{marginBottom:a.margin.bottom},marginRight:a.cover?"-50vw !important":"auto",marginLeft:a.cover?"-50vw !important":"auto",...a.padding.top&&{paddingTop:a.padding.top},...a.padding.right&&{paddingRight:a.padding.right},...a.padding.bottom&&{paddingBottom:a.padding.bottom},...a.padding.left&&{paddingLeft:a.padding.left},...a.cover&&{right:"50%"},position:"relative",width:a.cover?"100vw":"100%",...a.cover&&{maxWidth:"initial"},...a.maxWidth&&{maxWidth:a.maxWidth},...a.zIndex&&{zIndex:a.zIndex}},r=t.useBlockProps.save({className:`cabezi-${a.uuid} ${a.eagerLoadImages?"cabezi-block no-lazy-cabezi":"cabezi-block"}`,style:n,"data-sal":a.revealType,"data-sal-duration":a.revealDuration,"data-sal-delay":a.revealDelay,"data-sal-easing":a.revealEasingFunction,"data-sal-mobile-disabled":a.revealDisabledMobile}),i=t.useInnerBlocksProps.save(r);return(0,l.createElement)(l.Fragment,null,(0,l.createElement)("style",null,`\n          .cabezi-${a.uuid} {\n            align-items: ${a.alignItems};\n            flex-direction: ${a.flexDirection};\n            flex-wrap: ${a.flexWrap};\n            justify-content: ${a.justifyContent};\n            ${a.dropShadowEnabled?`filter: drop-shadow(${a.dropShadowOffsetX} ${a.dropShadowOffsetY} ${a.dropShadowBlurRadius} rgba(${function(e){let l=arguments.length>1&&void 0!==arguments[1]&&arguments[1];const a=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;e=e.replace(a,(function(e,l,a,t){return l+l+a+a+t+t}));const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e),n=t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null;return n?l?`rgb(${n.r}, ${n.g}, ${n.b})`:`${n.r} ${n.g} ${n.b}`:null}(a.dropShadowColor)} / ${a.dropShadowColorOpacity}));`:""}\n            ${a.hideAboveBreakPoint?"display: none !important;":""}\n          }\n        `),a.enableBreakPoint&&(0,l.createElement)("style",null,`\n            @media(max-width: ${a.breakPoint}) {\n              .cabezi-${a.uuid} {\n                align-items: ${a.alignItemsResponsive};\n                flex-direction: ${a.flexDirectionResponsive};\n                flex-wrap: ${a.flexWrapResponsive};\n                justify-content: ${a.justifyContentResponsive};\n                ${a.hideAtBreakPoint?"display: none !important;":""}\n                ${a.hideAboveBreakPoint&&!a.hideAtBreakPoint?"display: flex !important;":""}\n              }\n            }\n          `),a.linkEnabled&&(0,l.createElement)("style",null,`\n            .cabezi-${a.uuid}:hover {\n              opacity: .8 !important;\n              cursor: pointer !important;\n            }\n          `),(0,l.createElement)("div",o({},i,{onClick:a.linkEnabled?`window.location.href='${a.link}'`:null})))}})}();

  • flexblocks/trunk/blocks/flextainer/src/edit.js

    r2872685 r2892984  
    1717  ColorPalette,
    1818  InspectorControls,
    19   useInnerBlocksProps
     19  useInnerBlocksProps,
     20  MediaUpload
    2021} from '@wordpress/block-editor'
    2122import {
    … …  
    2324  __experimentalUnitControl as UnitControl,
    2425  __experimentalInputControl as InputControl,
    25   // __experimentalRadio as Radio,
    26   // __experimentalRadioGroup as RadioGroup,
     26  __experimentalRadio as Radio,
     27  __experimentalRadioGroup as RadioGroup,
     28  BaseControl,
    2729  ColorPicker,
    2830  Dashicon,
     31  FocalPointPicker,
     32  GradientPicker,
    2933  Panel,
    3034  PanelBody,
    … …  
    6670    setAttributes({ bgColor: newColor })
    6771  }
    68   // const onChangeBackgroundAttachment = (value) => {
    69   //   setAttributes({ backgroundAttachment: value })
    70   // }
    71   // const onChangeBackgroundRepeat = (value) => {
    72   //   setAttributes({ backgroundRepeat: value })
    73   // }
     72  const onChangeBackgroundAttachment = (value) => {
     73    setAttributes({ backgroundAttachment: value })
     74  }
     75  const onChangeBackgroundRepeat = (value) => {
     76    setAttributes({ backgroundRepeat: value })
     77  }
    7478  const onChangeBorderStyle = (value) => {
    7579    setAttributes({ borderStyle: value })
    … …  
    185189  const onChangeZIndex = (value) => {
    186190    setAttributes({ zIndex: parseInt(value) })
     191  }
     192  const onChangeBgImage = (value) => {
     193    setAttributes({
     194      bgImage: {
     195        title: value.title,
     196        filename: value.filename,
     197        url: value.url,
     198        updated: ''
     199      }
     200    })
     201  }
     202  const clearBgImage = () => {
     203    setAttributes({ bgImage: null })
     204  }
     205  const setBGFocalPoint = (value) => {
     206    setAttributes({ bgFocalPoint: value })
     207  }
     208  const onChangeBgGradient = (value) => {
     209    setAttributes({ bgGradient: value })
    187210  }
    188211
    … …  
    199222    ...(attributes.gap && { gap: attributes.gap }),
    200223    ...(attributes.overflow && { overflow: attributes.overflow }),
    201     ...(attributes.inlineBgImage && { backgroundImage: `url(${attributes.inlineBgImage})`, backgroundRepeat: `${attributes.backgroundRepeat}`, backgroundAttachment: `${attributes.backgroundAttachment}`, backgroundPosition: '50% 50%', backgroundSize: `${attributes.backgroundRepeat === 'repeat' ? 'auto' : 'cover'}` }),
     224    ...(attributes?.bgImage?.url && { backgroundImage: `url(${attributes.bgImage.url})`, backgroundRepeat: `${attributes.backgroundRepeat}`, backgroundAttachment: `${attributes.backgroundAttachment}`, backgroundPosition: `${attributes.bgFocalPoint.x * 100}% ${attributes.bgFocalPoint.y * 100}%`, backgroundSize: `${attributes.backgroundRepeat === 'repeat' ? 'auto' : 'cover'}` }),
     225    ...(attributes?.bgGradient && { backgroundImage: attributes.bgGradient }),
    202226    ...(attributes.minHeight && { minHeight: attributes.minHeight }),
    203227    ...(attributes.maxHeight && { maxHeight: attributes.maxHeight }),
    … …  
    274298              </fieldset>
    275299            </PanelRow>
    276             {/* <PanelRow>
    277               <fieldset className='cabezi-fieldset'>
    278                 <TextareaControl
    279                   label='Inline Background Image'
    280                   value={attributes.inlineBgImage}
    281                   onChange={onChangeInlineBgImage}
    282                 />
    283               </fieldset>
    284             </PanelRow>
    285             <PanelRow>
    286               <fieldset className='cabezi-fieldset'>
    287                 <RadioGroup label='Background Repeat' onChange={onChangeBackgroundRepeat} checked={attributes.backgroundRepeat}>
    288                   <Radio value='repeat'>Repeat</Radio>
    289                   <Radio value='no-repeat'>No Repeat</Radio>
    290                 </RadioGroup>
    291               </fieldset>
    292             </PanelRow>
    293             <PanelRow>
    294               <fieldset className='cabezi-fieldset'>
    295                 <RadioGroup label='Background Attachment' onChange={onChangeBackgroundAttachment} checked={attributes.backgroundAttachment}>
    296                   <Radio value='scroll'>Scroll</Radio>
    297                   <Radio value='fixed'>Fixed</Radio>
    298                   <Radio value='local'>Local</Radio>
    299                 </RadioGroup>
    300               </fieldset>
    301             </PanelRow> */}
    302300            <PanelRow>
    303301              <fieldset className='cabezi-fieldset'>
    … …  
    832830              </>}
    833831          </PanelBody>
     832          <PanelBody title={__('Background Image & Gradient', 'flextainer')} initialOpen={false}>
     833            <PanelRow>
     834              <MediaUpload
     835                onSelect={onChangeBgImage}
     836                multiple={false}
     837                render={({ open }) => (
     838                  <button style={{ padding: '.5rem 1rem' }} onClick={open}>
     839                    Upload Background Image
     840                  </button>
     841                )}
     842              />
     843            </PanelRow>
     844            <PanelRow>
     845              {attributes?.bgImage?.url &&
     846                <button style={{ padding: '.5rem 1rem' }} onClick={clearBgImage}>
     847                  Remove Background Image
     848                </button>}
     849            </PanelRow>
     850            <PanelRow>
     851              <fieldset className='cabezi-fieldset'>
     852                <RadioGroup label='Background Repeat' onChange={onChangeBackgroundRepeat} checked={attributes.backgroundRepeat}>
     853                  <Radio value='repeat'>Repeat</Radio>
     854                  <Radio value='no-repeat'>No Repeat</Radio>
     855                </RadioGroup>
     856              </fieldset>
     857            </PanelRow>
     858            <PanelRow>
     859              <fieldset className='cabezi-fieldset'>
     860                <RadioGroup label='Background Attachment' onChange={onChangeBackgroundAttachment} checked={attributes.backgroundAttachment}>
     861                  <Radio value='scroll'>Scroll</Radio>
     862                  <Radio value='fixed'>Fixed</Radio>
     863                  <Radio value='local'>Local</Radio>
     864                </RadioGroup>
     865              </fieldset>
     866            </PanelRow>
     867            {attributes?.bgImage?.url &&
     868              <PanelRow>
     869                <fieldset className='cabezi-fieldset'>
     870                  <FocalPointPicker
     871                    url={attributes.bgImage.url}
     872                    value={attributes.bgFocalPoint}
     873                    onDragStart={setBGFocalPoint}
     874                    onDrag={setBGFocalPoint}
     875                    onChange={setBGFocalPoint}
     876                  />
     877                </fieldset>
     878              </PanelRow>}
     879            <PanelRow>
     880              <BaseControl label='Background Gradient (Overrides Background Image)'>
     881                <br />
     882                <GradientPicker
     883                  __nextHasNoMargin
     884                  value={attributes.bgGradient}
     885                  onChange={onChangeBgGradient}
     886                />
     887              </BaseControl>
     888            </PanelRow>
     889          </PanelBody>
    834890          <PanelBody title={__('Animation Settings', 'flextainer')} initialOpen={false}>
    835891            <PanelRow>

  • flexblocks/trunk/blocks/flextainer/src/index.js

    r2872685 r2892984  
    4747      default: ''
    4848    },
     49    bgImage: {
     50      type: 'object',
     51      default: null
     52    },
     53    bgFocalPoint: {
     54      type: 'object',
     55      default: { x: 0.5, y: 0.5 }
     56    },
     57    bgGradient: {
     58      type: 'string',
     59      default: null
     60    },
    4961    borderStyle: {
    5062      type: 'string',

  • flexblocks/trunk/blocks/flextainer/src/save.js

    r2872685 r2892984  
    3131    ...(attributes.gap && { gap: attributes.gap }),
    3232    ...(attributes.overflow && { overflow: attributes.overflow }),
    33     ...(attributes.inlineBgImage && { backgroundImage: `url(${attributes.inlineBgImage})`, backgroundRepeat: `${attributes.backgroundRepeat}`, backgroundAttachment: `${attributes.backgroundAttachment}`, backgroundPosition: '50% 50%', backgroundSize: `${attributes.backgroundRepeat === 'repeat' ? 'auto' : 'cover'}` }),
     33    ...(attributes?.bgImage?.url && { backgroundImage: `url(${attributes.bgImage.url})`, backgroundRepeat: `${attributes.backgroundRepeat}`, backgroundAttachment: `${attributes.backgroundAttachment}`, backgroundPosition: `${attributes.bgFocalPoint.x * 100}% ${attributes.bgFocalPoint.y * 100}%`, backgroundSize: `${attributes.backgroundRepeat === 'repeat' ? 'auto' : 'cover'}` }),
     34    ...(attributes?.bgGradient && { backgroundImage: attributes.bgGradient }),
    3435    ...(attributes.cover && { left: '50%' }),
    3536    ...(attributes.minHeight && { minHeight: attributes.minHeight }),

  • flexblocks/trunk/cabezi.php

    r2872705 r2892984  
    55 * Requires at least: 6.0
    66 * Requires PHP:      7.0
    7  * Version:           1.1.1
     7 * Version:           1.2
    88 * Author:            Cabezi
    99 * Plugin URI:              https://www.cabezi.com/flexblocks/

  • flexblocks/trunk/readme.txt

    r2872705 r2892984  
    44Donate link:       https://www.cabezi.com/flexblocks
    55Requires at least: 6.0
    6 Tested up to:      6.1
     6Tested up to:      6.2
    77Requires PHP:      7.0
    8 Stable tag:        1.1.1
     8Stable tag:        1.2
    99License:           GPL-2.0-or-later
    1010License URI:       https://www.gnu.org/licenses/gpl-2.0.html
    … …  
    5656== Changelog ==
    5757
     58= 1.2 =
     59*Release Date 4th April 2023*
     60
     61* Support for background images and gradients in Flexblock Container and Flexblock Item
     62
    5863= 1.1.1 =
    5964*Release Date 28th February 2023*
Note: See TracChangeset for help on using the changeset viewer.