# b-blocks/trunk/build/service/view.js

bBlocks – Essential Gutenberg Blocks & Patterns Collection, version trunk. 2 lines.

- Page: https://pluginprobe.com/plugins/b-blocks/trunk/code/build/service/view.js
- Raw: https://pluginprobe.com/plugins/b-blocks/trunk/raw/build/service/view.js
- Modified: 2026-09-27T05:06:58+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/trunk/code/build/service/view.js#L10-L20`.

```javascript
(()=>{"use strict";const t=window.ReactDOM,e=t=>{try{const e=new URL(t);return["http:","https:"].includes(e.protocol)?e.toString():null}catch(e){return"string"==typeof t&&t.startsWith("/")&&!t.startsWith("//")?t:null}},r=t=>{const r=(new DOMParser).parseFromString(t,"text/html"),i=["b","strong","i","em","span","a","br"],s=["style","href","target","rel","class"];return r.body.querySelectorAll("*").forEach((t=>{i.includes(t.tagName.toLowerCase())?[...t.attributes].forEach((r=>{if(s.includes(r.name)||t.removeAttribute(r.name),"href"===r.name){const i=e(r.value);i?t.setAttribute("href",i):t.removeAttribute("href")}})):t.remove()})),r.body.innerHTML};new class{constructor(t={}){this.defaultOptions={allowedTags:["svg","g","path","rect","circle","ellipse","line","polyline","polygon","text","tspan","defs","clipPath","mask","linearGradient","radialGradient","stop","style","title","desc"],allowedAttributes:["id","class","style","transform","xmlns","xmlns:xlink","version","baseProfile","xml:space","d","x","y","width","height","cx","cy","r","rx","ry","points","x1","y1","x2","y2","viewBox","preserveAspectRatio","overflow","fill","fill-opacity","fill-rule","stroke","stroke-width","stroke-linecap","stroke-linejoin","stroke-opacity","stroke-dasharray","stroke-dashoffset","stroke-miterlimit","opacity","color","paint-order","vector-effect","shape-rendering","display","visibility","clip-path","clip-rule","clipPathUnits","mask","maskUnits","maskContentUnits","offset","stop-color","stop-opacity","gradientUnits","gradientTransform","spreadMethod","fx","fy","fr","dx","dy","text-anchor","dominant-baseline","alignment-baseline","font-family","font-size","font-style","font-weight","letter-spacing","word-spacing","textLength","lengthAdjust","role","focusable","aria-hidden","aria-label","aria-labelledby","aria-describedby"],allowedProtocols:["http","https","data"],removeScripts:!0,removeEvents:!0,removeExternalResources:!0,sanitizeStyle:!0},this.options={...this.defaultOptions,...t},this.allowedTagSet=new Set(this.options.allowedTags.map((t=>t.toLowerCase()))),this.allowedAttributeSet=new Set(this.options.allowedAttributes.map((t=>t.toLowerCase())))}sanitize(t){if("string"!=typeof t||""===t.trim())return"";const e=(new DOMParser).parseFromString(t,"image/svg+xml"),r=e.documentElement;return!r||"svg"!==r.localName.toLowerCase()||e.getElementsByTagName("parsererror").length?"":(this.removeScripts(e),this.sanitizeElements(e),(new XMLSerializer).serializeToString(e.documentElement))}async sanitizeFile(t){const e=await fetch(t),r=await e.text();return this.sanitize(`${r}`)}removeScripts(t){this.options.removeScripts&&Array.from(t.querySelectorAll("*")).forEach((t=>{t.localName.toLowerCase().includes("script")&&t.remove()}))}sanitizeElements(t){Array.from(t.querySelectorAll("*")).forEach((t=>{const e=t.localName.toLowerCase();this.allowedTagSet.has(e)?("style"===e&&this.options.sanitizeStyle&&(t.textContent=this.sanitizeCss(t.textContent)),this.sanitizeAttributes(t)):t.remove()}))}sanitizeAttributes(t){Array.from(t.attributes).forEach((e=>{const r=e.name,i=r.toLowerCase(),s=e.value;if(this.options.removeEvents&&i.startsWith("on"))return void t.removeAttribute(r);if(this.options.removeExternalResources&&("href"===i||i.endsWith(":href"))&&!this.isAllowedUrl(s))return void t.removeAttribute(r);const n=i.replace("xlink:","");this.allowedAttributeSet.has(i)||this.allowedAttributeSet.has(n)?this.options.removeExternalResources&&this.hasExternalUrl(s)?t.removeAttribute(r):"style"===i&&this.options.sanitizeStyle&&t.setAttribute(r,this.sanitizeCss(s)):t.removeAttribute(r)}))}hasExternalUrl(t){return!("string"!=typeof t||!/url\s*\(/i.test(t))&&Array.from(t.matchAll(/url\s*\(\s*['"]?([^'")]*)/gi)).some((([,t])=>!t.trim().startsWith("#")))}isAllowedUrl(t){const e=String(t||"").trim();if(e.startsWith("#"))return!0;if(/^data:/i.test(e))return this.options.allowedProtocols.includes("data")&&/^data:image\/(png|jpe?g|gif|webp);base64,/i.test(e);try{return this.options.allowedProtocols.includes(new URL(e).protocol.replace(":",""))}catch{return!1}}sanitizeCss(t){return String(t||"").replace(/expression\s*\(/gi,"").replace(/javascript:/gi,"").replace(/behavior\s*:/gi,"").replace(/binding\s*:/gi,"").replace(/@import[^;]*;?/gi,"").replace(/url\s*\(\s*(['"]?)(?!#)[^)]*\)/gi,"none")}},window.React;const i="linear-gradient(135deg, #0040E3, #18D4FD)",s=(t,e)=>{return null==(r=e)||""===r||Array.isArray(r)&&0===r.length||"object"==typeof r&&0===Object.keys(r).length||"string"==typeof r&&""===r.trim()||"number"==typeof r&&0===r?"":`${t}: ${e};`;var r},n=(t,r=!0,n=!0,o=!0)=>{const{type:a="solid",color:l="",gradient:c=i,image:d={},position:h="center center",attachment:u="",repeat:p="no-repeat",size:m="",overlayColor:g=""}=t||{};return"gradient"===a&&n?s("background",c):"image"===a&&o?`background: ${(t=>{const r=e(t);return r?`url('${r.replace(/['"()]/g,"")}')`:"none"})(d?.url)};\n\t\t\t\t${s("background-color",g)}\n\t\t\t\t${s("background-position",h)}\n\t\t\t\t${s("background-size",m)}\n\t\t\t\t${s("background-repeat",p)}\n\t\t\t\t${s("background-attachment",u)}\n\t\t\t\t${s("background-repeat",p)}\n\t\t\t\tbackground-blend-mode: overlay;`:r&&s("background",l)},o=t=>{const{width:e="",style:r="solid",color:i="",side:n="all",radius:o=""}=t||{},a=t=>{const e=n?.toLowerCase();return e?.includes("all")||e?.includes(t)},l=`${e} ${r} ${i}`,c=`\n\t\t${e&&0!==parseInt(e)?["top","right","bottom","left"].map((t=>a(t)?`border-${t}: ${l};`:"")).join(""):""}\n\t\t${s("border-radius",o)}\n\t`;return c},a=(t,e=!0,r=!0)=>{const{fontSize:n=16,colorType:o="solid",color:a="inherit",gradient:l=i}=t||{},c="gradient"===o?`color: transparent; background-image: ${l}; -webkit-background-clip: text; background-clip: text;`:s("color",a);return`\n\t\t${n&&e?s("font-size",n?`${n}px`:""):""}\n\t\t${r?c:""}\n\t`},l="bBlocksService",c=window.ReactJSXRuntime,d=({attributes:t,id:e})=>{const{background:r,hoverBG:i,icon:s,iconWidth:d,iconBorder:h,titleColor:u,descColor:p,linkIconColor:m,linkBGColor:g,linkBGHovColor:b}=t,y=`#${e}`,f=`${y} .${l}`,v=`${f} .icon`;return(0,c.jsx)("style",{dangerouslySetInnerHTML:{__html:`\n\t\t${f}{\n\t\t\t${n(r)}\n\t\t}\n\t\t${f} .bgLayer{\n\t\t\t${n(i)}\n\t\t}\n\n\t\t${f} .title{\n\t\t\tcolor: ${u};\n\t\t}\n\t\t${v}{\n\t\t\t${o(h)}\n\t\t}\n\t\t${v} i{\n\t\t\t${a(s)}\n\t\t}\n\t\t${v} img{\n\t\t\twidth: ${d};\n\t\t}\n\t\t${f} .description{\n\t\t\tcolor: ${p};\n\t\t}\n\t\t${f} .link a{\n\t\t\tbackground-color: ${g};\n\t\t}\n\t\t${y}:hover .ssbService .link a{\n\t\t\tbackground-color: ${b};\n\t\t}\n\t\t${f} .link a svg{\n\t\t\tfill: ${m};\n\t\t}\n\t\t`.replace(/\s+/g," ")}})},h=(t="Service")=>(0,c.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 493.356 493.356",role:"img","aria-label":t.replace(/(<([^>]+)>)/gi,""),children:(0,c.jsx)("path",{d:"M490.498,239.278l-109.632-99.929c-3.046-2.474-6.376-2.95-9.993-1.427c-3.613,1.525-5.427,4.283-5.427,8.282v63.954H9.136 c-2.666,0-4.856,0.855-6.567,2.568C0.859,214.438,0,216.628,0,219.292v54.816c0,2.663,0.855,4.853,2.568,6.563 c1.715,1.712,3.905,2.567,6.567,2.567h356.313v63.953c0,3.812,1.817,6.57,5.428,8.278c3.62,1.529,6.95,0.951,9.996-1.708 l109.632-101.077c1.903-1.902,2.852-4.182,2.852-6.849C493.356,243.367,492.401,241.181,490.498,239.278z"})}),u=({attributes:t,children:r})=>{const{title:i,isIcon:s,isUpIcon:n,icon:o,upIcon:a,isLink:d,link:u,linkIn:p}=t;return(0,c.jsxs)("div",{className:l,children:["service"===p&&(0,c.jsx)("a",{className:"serviceLink",href:e(u)}),(0,c.jsx)("div",{className:"bgLayer"}),s&&(0,c.jsx)("div",{className:"icon",children:n?(0,c.jsx)("img",{src:a?.url,alt:a?.alt}):o?.class&&(0,c.jsx)("i",{className:o?.class})}),r,d&&"button"===p&&(0,c.jsx)("div",{className:"link",children:u?(0,c.jsx)("a",{href:e(u),children:h(i)}):(0,c.jsx)("a",{children:h(i)})})]})};document.addEventListener("DOMContentLoaded",(()=>{document.querySelectorAll(".wp-block-b-blocks-service").forEach((i=>{
const s=JSON.parse(i.dataset.attributes),{isTitle:n,title:o,isDesc:a,desc:l,link:h,linkIn:p}=s;(0,t.createRoot)(i).render((0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(d,{attributes:s,id:i.id}),(0,c.jsxs)(u,{attributes:s,children:[n&&o&&(0,c.jsx)(c.Fragment,{children:"title"===p&&h?(0,c.jsx)("a",{href:e(h),children:(0,c.jsx)("h3",{className:"title",dangerouslySetInnerHTML:{__html:r(o)}})}):(0,c.jsx)("h3",{className:"title",dangerouslySetInnerHTML:{__html:r(o)}})}),a&&l&&(0,c.jsx)("p",{className:"description",dangerouslySetInnerHTML:{__html:r(l)}})]})]})),i?.removeAttribute("data-attributes")}))}))})();
```