# b-blocks/2.0.39/build/flip-boxes/view.js

bBlocks – Essential Gutenberg Blocks & Patterns Collection, version 2.0.39. 1 lines.

- Page: https://pluginprobe.com/plugins/b-blocks/2.0.39/code/build/flip-boxes/view.js
- Raw: https://pluginprobe.com/plugins/b-blocks/2.0.39/raw/build/flip-boxes/view.js
- Modified: 2026-04-27T12:46:42+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/b-blocks/2.0.39/code/build/flip-boxes/view.js#L10-L20`.

```javascript
(()=>{"use strict";var t={5795:t=>{t.exports=window.ReactDOM},8744:(t,n,e)=>{var o=e(5795);n.H=o.createRoot,o.hydrateRoot}},n={};const e=window.React;var o=function e(o){var r=n[o];if(void 0!==r)return r.exports;var l=n[o]={exports:{}};return t[o](l,l.exports,e),l.exports}(8744);const r=t=>{try{const n=new URL(t);return["http:","https:"].includes(n.protocol)?n.toString():null}catch(n){return"string"==typeof t&&t.startsWith("/")&&!t.startsWith("//")?t:null}},l="linear-gradient(135deg, #0040E3, #18D4FD)",i=(t,n,e=!1)=>{return null==(o=n)||""===o||Array.isArray(o)&&0===o.length||"object"==typeof o&&0===Object.keys(o).length||"string"==typeof o&&""===o.trim()||"number"==typeof o&&0===o?"":`${t}: ${n}${e?" !important":""};`;var o},a=(t,n=!0,e=!0,o=!0)=>{const{type:r="solid",color:a="",gradient:c=l,image:s={},position:$="center center",attachment:p="",repeat:d="no-repeat",size:m="",overlayColor:b=""}=t||{};return"gradient"===r&&e?i("background",c):"image"===r&&o?`background: url(${s?.url});\n\t\t\t\t${i("background-color",b)}\n\t\t\t\t${i("background-position",$)}\n\t\t\t\t${i("background-size",m)}\n\t\t\t\t${i("background-repeat",d)}\n\t\t\t\t${i("background-attachment",p)}\n\t\t\t\t${i("background-repeat",d)}\n\t\t\t\tbackground-blend-mode: overlay;`:n&&i("background",a)},c=t=>{const{width:n="",style:e="solid",color:o="",side:r="all",radius:l=""}=t||{},a=t=>{const n=r?.toLowerCase();return n?.includes("all")||n?.includes(t)},c=`${n} ${e} ${o}`,s=`\n\t\t${n&&0!==parseInt(n)?["top","right","bottom","left"].map((t=>a(t)?`border-${t}: ${c};`:"")).join(""):""}\n\t\t${i("border-radius",l)}\n\t`;return s},s=t=>{const{color:n="",bgType:e="solid",bg:o="",gradient:r=l}=t||{};return`\n\t\t${i("color",n)}\n\t\t${r||o?i("background","gradient"===e?r:o):""}\n\t`},$=(t,n=!0,e=!0)=>{const{fontSize:o=16,colorType:r="solid",color:a="inherit",gradient:c=l}=t||{},s="gradient"===r?`color: transparent; background-image: ${c}; -webkit-background-clip: text; background-clip: text;`:i("color",a);return`\n\t\t${o&&n?i("font-size",o?`${o}px`:""):""}\n\t\t${e?s:""}\n\t`},p=t=>{const{side:n=2,vertical:e="0px",horizontal:o="0px",top:r="0px",right:l="0px",bottom:i="0px",left:a="0px"}=t||{};return 2===n?`${e} ${o}`:`${r} ${l} ${i} ${a}`},d=(t,n,e=!0)=>{const{fontFamily:o="Default",fontCategory:r="sans-serif",fontVariant:l=400,fontWeight:a,isUploadFont:c=!0,fontSize:s={desktop:null,tablet:null,mobile:null},fontStyle:$,textTransform:p,textDecoration:d,lineHeight:m,letterSpace:b}=n||{},f=!e||!o||"Default"===o,g=s?.desktop||s,u=s?.tablet||g,x=s?.mobile||u,k=t=>{const n=String(t);return["px","em","rem","%","vh","vw"].some((t=>n.endsWith(t)))?n:"number"==typeof t?`${n}px`:""},h=`\n\t\t${f?"":`font-family: '${o}', ${r};`}\n\t\t${i("font-weight",a)}\n\t\t${i("font-size",k(g))}\n\t\t${i("font-style",$)}\n\t\t${i("text-transform",p)}\n\t\t${i("text-decoration",d)}\n\t\t${i("line-height",m)}\n\t\t${i("letter-spacing",b)}\n\t`,y=l&&400!==l?"400i"===l?":ital@1":l?.includes("00i")?`: ital, wght@1, ${l?.replace("00i","00")} `:`: wght@${l} `:"",I=f?"":`https://fonts.googleapis.com/css2?family=${o?.split(" ").join("+")}${y.replace(/ /g,"")}&display=swap`;return{googleFontLink:!c||f?"":`@import url(${I});`,styles:`${t}{\n\t\t\t${h}\n\t\t}\n\t\t@media only screen and (max-width: 1024px) {\n\t\t\t${t}{\n\t\t\t\t${i("font-size",k(u))}\n\t\t\t}\n\t\t}\n\t\t@media only screen and (max-width: 640px) {\n\t\t\t${t}{\n\t\t\t\t${i("font-size",k(x))}\n\t\t\t}\n\t\t}`.replace(/\s+/g," ").trim()}},m="bBlocksFlipBoxes",b=({attributes:t,id:n})=>{const{boxes:o,columnGap:r,rowGap:l,boxHeight:i,textAlign:b,boxPadding:f,iconMargin:g,titleTypo:u,titleMargin:x,descTypo:k,btnTypo:h,btnPadding:y}=t,I=`#${n}`,v=`${I} .flipBox`;return(0,e.createElement)("style",{dangerouslySetInnerHTML:{__html:`\n\t\t${d("",u)?.googleFontLink}\n\t\t${d("",k)?.googleFontLink}\n\t\t${d("",h)?.googleFontLink}\n\t\t${d(`${v} .flipTitle`,u)?.styles}\n\t\t${d(`${v} .flipDescription`,k)?.styles}\n\t\t${d(`${v} .flipBtn`,h)?.styles}\n\n\t\t${I} .${m}{ grid-gap: ${l} ${r}; }\n\t\t${v}{\n\t\t\theight: ${i};\n\t\t}\n\t\t${v} .box{\n\t\t\ttext-align: ${b};\n\t\t\tpadding: ${p(f)};\n\t\t}\n\t\t${v} i.flipIcon{\n\t\t\tmargin: ${p(g)};\n\t\t}\n\t\t${v} .flipTitle{\n\t\t\tmargin: ${p(x)};\n\t\t}\n\t\t${v} .flipBtn{\n\t\t\tpadding: ${p(y)};\n\t\t}\n\t\t\t\n\t\t${o.map(((t,n)=>{const{frontBG:e,backBG:o,border:r,shadow:l,frontIcon:i={},frontIconWidth:p="70px",backIcon:d={},backIconWidth:m="70px",frontTitleColor:b,backTitleColor:f,descColor:g,btnBorder:u,btnColors:x,btnHovColors:k}=t,h=`${I} #flipBox-${n}`;return`\n\t\t\t\t${h} .box{\n\t\t\t\t\t${c(r)}\n\t\t\t\t\tbox-shadow: ${((t,n="box")=>{const{hOffset:e="0px",vOffset:o="0px",blur:r="0px",spreed:l="0px",color:i="#7090b0",isInset:a=!1}=t||{},c=`${e} ${o} ${r}`;return("text"===n?`${c} ${i}`:`${c} ${l} ${i} ${a?"inset":""}`)||"none"})(l)};\n\t\t\t\t}\n\t\t\t\t${h} .box.front{\n\t\t\t\t\t${a(e)}\n\t\t\t\t}\n\t\t\t\t${h} .box.back{\n\t\t\t\t\t${a(o)}\n\t\t\t\t}\n\t\t\t\t${h} img.flipIcon.frontIcon{\n\t\t\t\t\twidth: ${p};\n\t\t\t\t}\n\t\t\t\t${h} i.flipIcon.frontIcon{\n\t\t\t\t\t${$(i)}\n\t\t\t\t}\n\t\t\t\t${h} img.flipIcon.backIcon{\n\t\t\t\t\twidth: ${m};\n\t\t\t\t}\n\t\t\t\t${h} i.flipIcon.backIcon{\n\t\t\t\t\t${$(d)}\n\t\t\t\t}\n\t\t\t\t${h} .flipTitle.flipFrontTitle{\n\t\t\t\t\tcolor: ${b};\n\t\t\t\t}\n\t\t\t\t${h} .flipTitle.flipBackTitle{\n\t\t\t\t\tcolor: ${f};\n\t\t\t\t}\n\t\t\t\t${h} .flipDescription{\n\t\t\t\t\tcolor: ${g};\n\t\t\t\t}\n\t\t\t\t${h} .flipBtn{\n\t\t\t\t\t${s(x)}\n\t\t\t\t\t${c(u)}\n\t\t\t\t}\n\t\t\t\t${h} .flipBtn:hover{\n\t\t\t\t\t${s(k)}\n\t\t\t\t}\n\t\t\t`})).join(" ")}\n\t\t`.replace(/\s+/g," ")}})},f=({attributes:t,isBackend:n=!1,custom:o})=>{const{boxes:l,columns:i,isIcon:a,isDesc:c,isBtn:s,isLinkNewTab:$}=t;return(0,e.createElement)("div",{className:`${m} columns-${i.desktop} columns-tablet-${i.tablet} columns-mobile-${i.mobile}`},l.map(((t,l)=>{const{isFrontUpIcon:i=!1,frontIcon:p={},upFrontIcon:d={},isBackUpIcon:m=!1,backIcon:b={},upBackIcon:f={},frontTitle:g,backTitle:u,desc:x,btn:k,btnLink:h}=t;return(0,e.createElement)("div",{key:l,onClick:()=>n&&o.setActiveIndex(l),className:"flipBox "+(n&&l===o.activeIndex?"bPlNowEditing":""),id:`flipBox-${l}`},(0,e.createElement)("div",{className:"box front"},(0,e.createElement)("div",{className:"frontContent"},a&&(0,e.createElement)(e.Fragment,null,i?(0,e.createElement)("img",{className:d?.id?"flipIcon frontIcon":null,src:d?.url,alt:d?.alt}):p?.class&&(0,e.createElement)("i",{className:`flipIcon frontIcon ${p?.class}`})),g&&(0,e.createElement)("h3",{className:"flipTitle flipFrontTitle"},g),c&&x&&(0,e.createElement)("p",{className:"flipDescription"},x))),(0,e.createElement)("div",{className:"box back"},(0,e.createElement)("div",{className:"backContent"},a&&(0,e.createElement)(e.Fragment,null,m?(0,e.createElement)("img",{className:f?.id?"flipIcon backIcon":null,src:f?.url,alt:f?.alt}):b?.class&&(0,e.createElement)("i",{className:`flipIcon backIcon ${b?.class}`})),u&&(0,e.createElement)("h3",{className:"flipTitle flipBackTitle"},u),s&&k&&(0,e.createElement)("a",{href:r(h),className:"flipBtn",target:$?"_blank":"_self",rel:"noreferrer noopener"},k))))})))};document.addEventListener("DOMContentLoaded",(()=>{document.querySelectorAll(".wp-block-b-blocks-flip-boxes").forEach((t=>{const n=JSON.parse(t.dataset.attributes);(0,o.H)(t).render((0,e.createElement)(e.Fragment,null,(0,e.createElement)(b,{attributes:n,id:t.id}),(0,e.createElement)(f,{attributes:n}))),t?.removeAttribute("data-attributes")}))}))})();
```