# b-blocks/2.1.2/build/advanced-tabs/view.js

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

- Page: https://pluginprobe.com/plugins/b-blocks/2.1.2/code/build/advanced-tabs/view.js
- Raw: https://pluginprobe.com/plugins/b-blocks/2.1.2/raw/build/advanced-tabs/view.js
- Modified: 2026-08-24T10:46:44+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.1.2/code/build/advanced-tabs/view.js#L10-L20`.

```javascript
(()=>{"use strict";const t=window.ReactDOM,n=t=>!(null==t||""===t||Array.isArray(t)&&0===t.length||"object"==typeof t&&0===Object.keys(t).length||"string"==typeof t&&""===t.trim()||"number"==typeof t&&0===t),e="@media only screen and (max-width: 1024px)",o="@media only screen and (max-width: 640px)",a="linear-gradient(135deg, #0040E3, #18D4FD)",r=window.React,l=t=>{const n=(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}})(t);return n?`url('${n.replace(/['"()]/g,"")}')`:"none"},i=(t,e)=>n(e)?`${t}: ${e};`:"",s=(t,n=!0,e=!0,o=!0)=>{const{type:r="solid",color:s="",gradient:c=a,image:d={},position:b="center center",attachment:$="",repeat:u="no-repeat",size:v="",overlayColor:p=""}=t||{};return"gradient"===r&&e?i("background",c):"image"===r&&o?`background: ${l(d?.url)};\n\t\t\t\t${i("background-color",p)}\n\t\t\t\t${i("background-position",b)}\n\t\t\t\t${i("background-size",v)}\n\t\t\t\t${i("background-repeat",u)}\n\t\t\t\t${i("background-attachment",$)}\n\t\t\t\t${i("background-repeat",u)}\n\t\t\t\tbackground-blend-mode: overlay;`:n&&i("background",s)},c=t=>{if(!t)return"";const n=t=>{const{color:n="#000000",style:e="solid",width:o="0px"}=t;return`${o} ${e} ${n}`};return"object"!=typeof t||Array.isArray(t)?"":t.hasOwnProperty("top")||t.hasOwnProperty("right")||t.hasOwnProperty("bottom")||t.hasOwnProperty("left")?["top","right","bottom","left"].map((e=>t[e]?`border-${e}: ${n(t[e])};`:"")).join(" ").trim():i("border",n(t))},d=(t,n,a=!0)=>{const{fontFamily:r="Default",fontCategory:l="sans-serif",fontVariant:s=400,fontWeight:c,isUploadFont:d=!0,fontSize:b={desktop:null,tablet:null,mobile:null},fontStyle:$,textTransform:u,textDecoration:v,lineHeight:p,letterSpace:h}=n||{},m=!a||!r||"Default"===r,g=b?.desktop||b,k=b?.tablet||g,f=b?.mobile||k,y=t=>{const n=String(t);return["px","em","rem","%","vh","vw"].some((t=>n.endsWith(t)))?n:"number"==typeof t?`${n}px`:""},w=`\n\t\t${m?"":`font-family: '${r}', ${l};`}\n\t\t${i("font-weight",c)}\n\t\t${i("font-size",y(g))}\n\t\t${i("font-style",$)}\n\t\t${i("text-transform",u)}\n\t\t${i("text-decoration",v)}\n\t\t${i("line-height",p)}\n\t\t${i("letter-spacing",h)}\n\t`,x=s&&400!==s?"400i"===s?":ital@1":s?.includes("00i")?`: ital, wght@1, ${s?.replace("00i","00")} `:`: wght@${s} `:"",S=m?"":`https://fonts.googleapis.com/css2?family=${r?.split(" ").join("+")}${x.replace(/ /g,"")}&display=swap`;return{googleFontLink:!d||m?"":`@import url(${S});`,styles:`${t}{\n\t\t\t${w}\n\t\t}\n\t\t${e} {\n\t\t\t${t}{\n\t\t\t\t${i("font-size",y(k))}\n\t\t\t}\n\t\t}\n\t\t${o} {\n\t\t\t${t}{\n\t\t\t\t${i("font-size",y(f))}\n\t\t\t}\n\t\t}`.replace(/\s+/g," ").trim()}},b=t=>{if(!t)return"";if("string"==typeof t)return t;if("object"==typeof t&&!Array.isArray(t)){const n=["top","right","bottom","left"];return n.map((n=>t[n]||"")).every((t=>!t))?"":n.map((n=>t[n]||"0")).join(" ")}return""},$=(t,a)=>{const{tabs:r,styles:l}=t,{tabContainer:$,tabs:u,tabTitle:v,tabSubTitle:p,icon:h,content:m}=l,g=`#${a} .b-blocks-advanced-tabs-main-wrapper`,k=`${g} .b-blocks-advanced-tabs-wrapper`,f=`${k} .b-blocks-advanced-tabs-button-lists`,y=`${f} .b-blocks-advanced-tabs-button`,w=`${y}.b-blocks-advanced-tabs-button-active`,x=`${y}.b-blocks-advanced-tabs-button-normal`,S=`${y} .b-blocks-advanced-tabs-button-title-container`,j=`${S} .b-blocks-advanced-tabs-button-title`,A=`${w} .b-blocks-advanced-tabs-button-title`,T=`${S} .b-blocks-advanced-tabs-button-subTitle`,J=`${w} .b-blocks-advanced-tabs-button-subTitle`,z=`${y} .b-blocks-advanced-tabs-button-icon`,L=`${g} .b-blocks-advanced-tabs-contents`,N=(t="desktop")=>"row-reverse"===r?.[t].direction||"row"===r?.[t].direction,C=(t="desktop")=>"column"===r?.[t].direction||"column-reverse"===r?.[t].direction,D=(t="normal",n="normal",e="desktop")=>`\n\t\t\t\t\t${i("margin",b(u[t][n][e].margin))}\n\t\t\t\t\t${i("padding",b(u[t][n][e].padding))}\n\t\t\t\t\t${i("border-radius",b(u[t][n][e].radius))}\n\t\t\t\t\t${"desktop"===e?s(u[t][n].bg):""}\n\t\t\t\t\t${"desktop"===e?c(u[t][n].border):""}\n\t\t\t\t`,O=(t="normal",n="normal",e="desktop")=>`\n\t\t\t\t${i("margin",b(h[t][n][e].margin))}\n\t\t\t\t${i("padding",b(h[t][n][e].padding))}\n\t\t\t\t${i("border-radius",b(h[t][n][e].radius))}\n\t\t\t\t${"desktop"===e?s(h[t][n].bg):""}\n\t\t\t\t${"desktop"===e?c(h[t][n].border):""}\n\t`,E=["row","row-reverse"],F=["column","column-reverse"];return`\n\n\t\t\t${d("",v.typography).googleFontLink}\n\t\t\t${d("",p.typography).googleFontLink}\n\n\t\t\t${d(j,v.typography).styles}\n\t\t\t${d(T,p.typography).styles}\n\n\t\t\t${k}{\n\t\t\t\t${i("flex-direction",r.desktop.direction)}\n\t\t\t}\n\n\t\t\t${f}{\n\t\t\t\t${i("justify-content",C("desktop")?r.desktop.columnJustify:r.desktop.rowJustify)}\n\t\t\t\t${i("flex-direction",N("desktop")?"column":"")}\n\t\t\t\t${i("gap",u.desktop.gap)}\n\t\t\t\t${i("padding",b($.desktop.padding))}\n\t\t\t\t${i("margin",b($.desktop.margin))}\n\t\t\t\t${i("border-radius",b($.desktop.radius))}\n\t\t\t\t${c($.border)}\n\t\t\t\t${s($.bg)}\n\t\t\t\t${E.includes(r?.desktop?.direction)?i("width",u.desktop.width):""}\n\t\t\t\t${F.includes(r.desktop.direction)?i("flex-wrap",r.desktop.wrap):""}\n\t\t\t}\n\n\t\t\t${y}{\n\t\t\t\t${i("width",C("desktop")&&"stretch"===r.desktop.columnJustify?"100%":"")}\n\t\t\t\t${i("height",N("desktop")&&"stretch"===r.desktop.rowJustify?"100%":"")}\n\t\t\t\t${i("justify-content",r.desktop.contentAlign)}\n\t\t\t\t${i("flex-direction",h.desktop.position)}\n\t\t\t\t${D("normal","normal")}\n\t\t\t\ttransition:all ${u.normal.hover.transition}s ease-in-out; \n\t\t\t}\n\n\t\t\t${x}:hover{\n\t\t\t\t${D("normal","hover")}\n\t\t\t}\n\t\t\t\n\t\t\t${w}{\n\t\t\t\t${D("active","normal")}\n\t\t\t}\n\t\t\t${w}:hover{\n\t\t\t\t${D("active","hover")}\n\t\t\t}\n\n\t\t\t${S}{\n\t\t\t\t${i("text-align",r.desktop.contentAlign)}\n\t\t\t}\n\n\t\t\t${y}:hover .b-blocks-advanced-tabs-button-title{\n\t\t\t\t${i("color",v.normal.hover.color)}\n\t\t\t}\n\n\t\t\t${w}:hover .b-blocks-advanced-tabs-button-title{\n\t\t\t\t${i("color",v.active.hover.color)}\n\t\t\t}\n\n\t\t\t${j}{\n\t\t\t\t${i("color",v.normal.normal.color)}\n\t\t\t\ttransition:all ${u.normal.hover.transition}s ease-in-out; \n\t\t\t}\n\n\t\t\t${A}{\n\t\t\t\t${i("color",v.active.normal.color)}\n\t\t\t}\n\n\t\t\t${T}{\n\t\t\t  ${i("color",p.normal.normal.color)}\n\t\t\t\ttransition:all ${u.normal.hover.transition}s ease-in-out;\n\t\t\t\t${r.isShowActiveSubTitle?i("display","none"):""}\n\t\t\t}\n\n\t\t\t${y}:hover .b-blocks-advanced-tabs-button-subTitle{\n\t\t\t\t${i("color",p.normal.hover.color)}\n\t\t\t}\n\n\t\t\t${J}{\n\t\t\t\t${i("color",p.active.normal.color)}\n\t\t\t\t${r.isShowActiveSubTitle?i("display","block"):""}\n\t\t\t}\n\n\t\t\t${w}:hover .b-blocks-advanced-tabs-button-subTitle{\n\t\t\t\t${i("color",n(p.active.hover.color)?p.active.hover.color:p.normal.hover.color)}\n\t\t\t}\n\n\t\t\t${z}{\n\t\t\t\t${O("normal","normal")}\n\t\t\t\ttransition:all ${u.normal.hover.transition}s ease-in-out;\n\t\t\t}\n\n\t\t\t${y}:hover .b-blocks-advanced-tabs-button-icon{\n\t\t\t\t${O("normal","hover")}\n\t\t\t}\n\n\t\t\t${z}>svg{\n\t\t\t\t${i("height",h.desktop.size)}\n\t\t\t\t${i("width",h.desktop.size)}\n\t\t\t\t${i("fill",h.normal.normal.color)}\n\t\t\t\t${i("color",h.normal.normal.color)}\n\t\t\t\ttransition:all ${u.normal.hover.transition}s ease-in-out;\n\t\t\t}\n\n\t\t\t${y}:hover .b-blocks-advanced-tabs-button-icon>svg{\n\t\t\t\t${i("fill",h.normal.hover.color)}\n\t\t\t\t${i("color",h.normal.hover.color)}\n\t\t\t}\n\n\t\t\t${w} .b-blocks-advanced-tabs-button-icon{\n\t\t\t\t${O("active","normal")}\n\t\t\t}\n\n\t\t\t${w} .b-blocks-advanced-tabs-button-icon>svg{\n\t\t\t\t${i("fill",h.active.normal.color)}\n\t\t\t\t${i("color",h.active.normal.color)}\n\t\t\t}\n\n\t\t\t${w}:hover .b-blocks-advanced-tabs-button-icon{\n\t\t\t\t\t${O("active","hover")}\n\t\t\t}\n\n\t\t\t${w}:hover .b-blocks-advanced-tabs-button-icon>svg{\n\t\t\t\t${i("fill",n(h.active.hover.color)?h.active.hover.color:h.normal.hover.color)}\n\t\t\t\t${i("color",n(h.active.hover.color)?h.active.hover.color:h.normal.hover.color)}\n\t\t\t}\n\n\t\t\t${L}{\n\t\t\t\t${E.includes(r?.desktop?.direction)&&i("max-width",m.desktop.width)}\n\t\t\t}\n\n\t\t\t${e}{\n\t\t\t\t${k}{\n\t\t\t\t\t${i("flex-direction",r?.tablet?.direction)}\n\t\t\t\t}\n\t\t\t\t\t${f}{\n\t\t\t\t\t${i("justify-content",C("tablet")?r?.tablet?.columnJustify:r?.tablet?.rowJustify)}\n\t\t\t\t\t${i("flex-direction",N("tablet")?"column":"")}\n\t\t\t\t\t${i("gap",u?.tablet?.gap)}\n\t\t\t\t\t${i("padding",b($?.tablet?.padding))}\n\t\t\t\t\t${i("margin",b($?.tablet?.margin))}\n\t\t\t\t\t${i("border-radius",b($?.tablet?.radius))}\n\t\t\t\t\t${E.includes(r?.tablet?.direction)?i("width",u?.tablet?.width):""}\n\t\t\t\t\t${F.includes(r?.tablet?.direction)?i("flex-wrap",r?.tablet?.wrap):""}\n\t\t\t\t}\n\n\t\t\t\t${y}{\n\t\t\t\t\t${i("width",C("tablet")&&"stretch"===r?.tablet.columnJustify?"100%":"")}\n\t\t\t\t\t${i("height",N("tablet")&&"stretch"===r?.tablet.rowJustify?"100%":"")}\n\t\t\t\t\t${i("justify-content",r?.tablet.contentAlign)}\n\t\t\t\t\t${i("flex-direction",h?.tablet.position)}\n\t\t\t\t\t${D("normal","normal","tablet")}\n\t\t\t\t}\n\t\t\t\t${x}:hover{\n\t\t\t\t\t${D("normal","hover","tablet")}\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t${w}{\n\t\t\t\t\t${D("active","normal","tablet")}\n\t\t\t\t}\n\t\t\t\t${w}:hover{\n\t\t\t\t\t${D("active","hover","tablet")}\n\t\t\t\t}\n\n\t\t\t\t${S}{\n\t\t\t\t\t${i("text-align",r?.tablet.contentAlign)}\n\t\t\t\t}\n\n\t\t\t\t${y}:hover .b-blocks-advanced-tabs-button-icon{\n\t\t\t\t\t${O("normal","hover","tablet")}\n\t\t\t\t}\n\n\t\t\t\t${z}>svg{\n\t\t\t\t\t${i("height",h?.tablet.size)}\n\t\t\t\t\t${i("width",h?.tablet.size)}\n\t\t\t\t}\n\n\t\t\t\t${w} .b-blocks-advanced-tabs-button-icon{\n\t\t\t\t\t${O("active","normal","tablet")}\n\t\t\t\t}\n\n\t\t\t\t${w}:hover .b-blocks-advanced-tabs-button-icon{\n\t\t\t\t\t\t${O("active","hover","tablet")}\n\t\t\t\t}\n\n\t\t\t\t${L}{\n\t\t\t\t\t${E.includes(r?.tablet?.direction)&&i("max-width",m?.tablet.width)}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t${o}{\n\t\t\t\t${k}{\n\t\t\t\t\t${i("flex-direction",r?.tablet?.direction)}\n\t\t\t\t}\n\t\t\t\t\t${f}{\n\t\t\t\t\t${i("justify-content",C("tablet")?r?.tablet?.columnJustify:r?.tablet?.rowJustify)}\n\t\t\t\t\t${i("flex-direction",N("tablet")?"column":"")}\n\t\t\t\t\t${i("gap",u?.tablet?.gap)}\n\t\t\t\t\t${i("padding",b($?.tablet?.padding))}\n\t\t\t\t\t${i("margin",b($?.tablet?.margin))}\n\t\t\t\t\t${i("border-radius",b($?.tablet?.radius))}\n\t\t\t\t\t${E.includes(r?.tablet?.direction)?i("width",u?.tablet?.width):""}\n\t\t\t\t\t${F.includes(r?.tablet?.direction)?i("flex-wrap",r?.tablet?.wrap):""}\n\t\t\t\t}\n\n\t\t\t\t${y}{\n\t\t\t\t\t${i("width",C("tablet")&&"stretch"===r?.tablet.columnJustify?"100%":"")}\n\t\t\t\t\t${i("height",N("tablet")&&"stretch"===r?.tablet.rowJustify?"100%":"")}\n\t\t\t\t\t${i("justify-content",r?.tablet.contentAlign)}\n\t\t\t\t\t${i("flex-direction",h?.tablet.position)}\n\t\t\t\t\t${D("normal","normal","tablet")}\n\t\t\t\t}\n\t\t\t\t${x}:hover{\n\t\t\t\t\t${D("normal","hover","tablet")}\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t${w}{\n\t\t\t\t\t${D("active","normal","tablet")}\n\t\t\t\t}\n\t\t\t\t${w}:hover{\n\t\t\t\t\t${D("active","hover","tablet")}\n\t\t\t\t}\n\n\t\t\t\t${S}{\n\t\t\t\t\t${i("text-align",r?.tablet.contentAlign)}\n\t\t\t\t}\n\n\t\t\t\t${y}:hover .b-blocks-advanced-tabs-button-icon{\n\t\t\t\t\t${O("normal","hover","tablet")}\n\t\t\t\t}\n\n\t\t\t\t${z}>svg{\n\t\t\t\t\t${i("height",h?.tablet.size)}\n\t\t\t\t\t${i("width",h?.tablet.size)}\n\t\t\t\t}\n\n\t\t\t\t${w} .b-blocks-advanced-tabs-button-icon{\n\t\t\t\t\t${O("active","normal","tablet")}\n\t\t\t\t}\n\n\t\t\t\t${w}:hover .b-blocks-advanced-tabs-button-icon{\n\t\t\t\t\t\t${O("active","hover","tablet")}\n\t\t\t\t}\n\n\t\t\t\t${L}{\n\t\t\t\t\t${E.includes(r?.tablet?.direction)&&i("max-width",m?.tablet.width)}\n\t\t\t\t}\n\t\t\t}\n\n\t`},u=window.ReactJSXRuntime,v=({attributes:t,templateContent:n})=>{const{tabLists:e=[],tabs:o}=t,a=(0,r.useRef)(null),[l,i]=(0,r.useState)(!1),[s,c]=(0,r.useState)(null);(0,r.useEffect)((()=>{if(!a.current||!n)return;if("1"===n.dataset.moved)return void i(!0);const t=Array.from(n.children);a.current.append(...t),n.dataset.moved="1",i(!0)}),[a.current,n]);const d=t=>{c(String(t));const n=a?.current,e=n.querySelectorAll(".b-blocks-advanced-tabs-panel");(Array.from(e)||[]).forEach((n=>{n.classList.contains(`b-blocks-advanced-tabs-panel-${t}`)?n.style.display="block":n.style.display="none"}))};return(0,r.useEffect)((()=>{const t=a?.current,n=t.querySelectorAll(".b-blocks-advanced-tabs-panel");if(l)if(s)d(s);else{const t=(e||[]).find((t=>t.isDefault));if(c(o.isCloseAllTab?"":(t||{id:1})?.id),o.isCloseAllTab)return;(Array.from(n)||[]).forEach((n=>{n.classList.contains(`b-blocks-advanced-tabs-panel-${t.id}`)?n.style.display="block":n.style.display="none"}))}}),[l]),(0,u.jsx)("div",{children:(0,u.jsx)("div",{className:"b-blocks-advanced-tabs-main-wrapper",children:(0,u.jsxs)("div",{className:"b-blocks-advanced-tabs-wrapper","data-close-all":o?.isCloseAllTab,children:[(0,u.jsx)("div",{className:"b-blocks-advanced-tabs-button-lists",children:(e||[]).map(((t,n)=>(0,u.jsxs)("button",{"data-title-tab-id":t.id,className:"b-blocks-advanced-tabs-button "+(s==t.id?"b-blocks-advanced-tabs-button-active":"b-blocks-advanced-tabs-button-normal"),"data-active-tab":t.isDefault,onClick:()=>d(t.id),children:[o.isShowIcon&&"none"!==t.iconType&&(0,u.jsx)("p",{className:"b-blocks-advanced-tabs-button-icon",dangerouslySetInnerHTML:{__html:t?.[t.iconType]}}),(0,u.jsxs)("div",{className:"b-blocks-advanced-tabs-button-title-container",children:[o.isShowTitle&&(0,u.jsx)("span",{className:"b-blocks-advanced-tabs-button-title",placeholder:"Tab Title",dangerouslySetInnerHTML:{__html:t.title}}),o.isShowSubTitle&&(0,u.jsx)("p",{className:"b-blocks-advanced-tabs-button-subTitle",children:t.subTitle})]})]},`${n}-${t.id}`)))}),(0,u.jsx)("div",{className:"b-blocks-advanced-tabs-contents",ref:a})]})})})};document.addEventListener("DOMContentLoaded",(()=>{document.querySelectorAll(".wp-block-b-blocks-advanced-tabs[data-attributes]").forEach((n=>{let e={};try{const t=n.dataset.attributes;t&&"undefined"!==t&&""!==t&&(e=JSON.parse(t))}catch(t){console.warn("tab: Invalid attributes JSON",t)}const o=n.querySelector(".b-blocks-advanced-tabs-innerBlocks-contents");o&&((0,t.createRoot)(n).render((0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)("style",{dangerouslySetInnerHTML:{__html:$(e,n.id)}}),(0,u.jsx)(v,{attributes:e,templateContent:o})]})),n.removeAttribute("data-attributes"))}))}))})();
```