| 1 |
/* Native, typed Gutenberg template blocks. No Elementor runtime or HTML block. */ |
| 2 |
(function () { |
| 3 |
'use strict'; |
| 4 |
var el=wp.element.createElement, Fragment=wp.element.Fragment, be=wp.blockEditor, co=wp.components; |
| 5 |
var RichText=be.RichText, InspectorControls=be.InspectorControls; |
| 6 |
function typography(a,set){return el(co.PanelBody,{title:'Typography overrides',initialOpen:false},['','Tablet','Mobile'].map(function(s){return el('div',{key:s},el('strong',{},s||'Desktop'),['fontSize','lineHeight','letterSpacing','fontWeight','textColor'].map(function(k){return el(co.TextControl,{key:k,label:k.replace(/([A-Z])/g,' $1')+(k==='fontSize'||k==='letterSpacing'?' (px)':''),value:a[k+s]||'',onChange:function(v){var next={};next[k+s]=v;set(next);},help:'Leave empty to preserve the imported design.'});}),el(co.SelectControl,{label:'Text alignment',value:a['textAlign'+s]||'',options:[{label:'Original',value:''},{label:'Left',value:'left'},{label:'Center',value:'center'},{label:'Right',value:'right'}],onChange:function(v){var next={};next['textAlign'+s]=v;set(next);}}));}));} |
| 7 |
function shapeDividers(a){return (a.shapeDividers||[]).filter(function(s){return !s.disabled;}).map(function(s,i){return el('div',{key:'shape-'+i,className:'bkbg-tpl-shape bkbg-tpl-shape-'+s.position,'data-negative':s.negative,'aria-hidden':true},el('svg',{viewBox:s.viewBox,preserveAspectRatio:'none',style:s.height?{height:Number(s.height)+'px'}:undefined},(s.paths||[]).map(function(p,j){return el('path',{key:j,className:p.classes,d:p.d,style:s.color?{fill:s.color}:undefined});})));});} |
| 8 |
function inlineStyle(a){var s={};['fontSize','lineHeight','letterSpacing','fontWeight','textAlign'].forEach(function(k){if(a[k])s[k]=(k==='fontSize'||k==='letterSpacing')?Number(a[k]):a[k];});if(a.textColor)s.color=a.textColor;return s;} |
| 9 |
function ImageEdit(a,set,field,controlOnly){var image=field?a.segments[field.index].image:(a.image||{});function change(im){if(field){var seg=a.segments.slice();seg[field.index]=Object.assign({},seg[field.index],{image:im});set({segments:seg});}else set({image:im});} |
| 10 |
if(!controlOnly){var imProps={};['src','alt','width','height','loading','decoding','sizes','class','srcset','fetchpriority'].forEach(function(k){if(image[k]!==undefined)imProps[({class:'className',srcset:'srcSet',fetchpriority:'fetchPriority'})[k]||k]=image[k];});if(a.imageWidth)imProps.style={width:a.imageWidth};return el('img',imProps);} |
| 11 |
return el(be.MediaUploadCheck,{},el(be.MediaUpload,{allowedTypes:['image'],value:image.id||0,onSelect:function(m){change({id:m.id,src:m.url,alt:m.alt||'',width:m.width,height:m.height,loading:image.loading||'lazy',decoding:'async'});},render:function(o){return el(co.Button,{variant:'secondary',onClick:o.open},'Replace image');}})); |
| 12 |
} |
| 13 |
function edit(props){var a=props.attributes,set=props.setAttributes,kind=props.name.replace('blockenberg/template-',''); |
| 14 |
var classes=a.classes||'';var outer=be.useBlockProps({className:kind==='page'?'bkbg-template-page':classes,'data-bkbg-id':a.uid,'data-bkbg-type':a.kind,'data-bkbg-template':kind==='page'?a.templateKey:undefined,style:kind==='page'?undefined:inlineStyle(a)}); |
| 15 |
// Hook order must stay consistent while selecting a block. |
| 16 |
var inner=be.useInnerBlocksProps({className:kind==='page'?a.sourceClasses:a.boxClasses},{renderAppender:false,templateLock:false}); |
| 17 |
var settings=[],background=null; |
| 18 |
if(kind==='layout'){ |
| 19 |
var bs=a.settings||{}; |
| 20 |
function updateBackground(patch){set({settings:Object.assign({},bs,patch)});} |
| 21 |
if(bs.background_background==='slideshow'){ |
| 22 |
var gallery=bs.background_slideshow_gallery||[]; |
| 23 |
settings.push(el('p',{key:'gallery-count'},gallery.length+' slideshow images'),el(be.MediaUploadCheck,{key:'background-gallery'},el(be.MediaUpload,{allowedTypes:['image'],multiple:true,gallery:true,value:gallery.filter(function(im){return im.url&&im.url.indexOf(location.origin)===0;}).map(function(im){return im.id;}),onSelect:function(images){updateBackground({background_slideshow_gallery:images.map(function(im){return {id:im.id,url:im.url};})});},render:function(o){return el(co.Button,{variant:'secondary',onClick:o.open},'Edit background slideshow');}})),el(co.TextControl,{key:'background-duration',label:'Slideshow duration (ms)',type:'number',value:bs.background_slideshow_slide_duration||5000,onChange:function(v){updateBackground({background_slideshow_slide_duration:Math.max(1000,Number(v)||5000)});}}),el(co.TextControl,{key:'background-transition',label:'Slideshow transition (ms)',type:'number',value:bs.background_slideshow_transition_duration??500,onChange:function(v){updateBackground({background_slideshow_transition_duration:Math.max(0,Math.min(5000,Number(v)||0))});}}),el(co.ToggleControl,{key:'background-loop',label:'Loop background slideshow',checked:bs.background_slideshow_loop!=='no',onChange:function(v){updateBackground({background_slideshow_loop:v?'yes':'no'});}}),el(co.ToggleControl,{key:'background-kenburns',label:'Ken Burns motion',checked:bs.background_slideshow_ken_burns==='yes',onChange:function(v){updateBackground({background_slideshow_ken_burns:v?'yes':'no'});}})); |
| 24 |
if(gallery[0]?.url)background=el('div',{className:'bkbg-tpl-background-slideshow bkbg-template-background-slides','aria-hidden':true},el('div',{className:'bkbg-template-background-slide is-active'},el('div',{className:'bkbg-tpl-background-slideshow__slide__image',style:{backgroundImage:'url("'+gallery[0].url.replace(/["\\]/g,'')+'")'}}))); |
| 25 |
}else if(bs.background_background==='video'){ |
| 26 |
settings.push(el(co.TextControl,{key:'background-video',label:'Background video URL (MP4 / WebM)',type:'url',value:bs.background_video_link||'',onChange:function(v){updateBackground({background_video_link:v});}})); |
| 27 |
if(/\.(mp4|webm|ogg)(?:\?|$)/i.test(bs.background_video_link||''))background=el('div',{className:'bkbg-tpl-background-video-container','aria-hidden':true},el('video',{className:'bkbg-tpl-background-video-hosted bkbg-template-background-video',src:bs.background_video_link,muted:true,playsInline:true,preload:'metadata'})); |
| 28 |
} |
| 29 |
} |
| 30 |
if(kind==='layout')(a.shapeDividers||[]).forEach(function(s,i){function update(v){var shapes=a.shapeDividers.map(function(x,j){return j===i?Object.assign({},x,v):x;});set({shapeDividers:shapes});}settings.push(el(co.ToggleControl,{key:'shape-'+i,label:s.position+' shape divider',checked:!s.disabled,onChange:function(v){update({disabled:!v});}}),el(co.TextControl,{key:'shape-color-'+i,label:s.position+' divider color (hex; empty = original)',value:s.color||'',onChange:function(v){update({color:v});}}),el(co.RangeControl,{key:'shape-height-'+i,label:s.position+' divider height (0 = original)',value:s.height||0,min:0,max:400,onChange:function(v){update({height:v||0});}}));}); |
| 31 |
if(kind==='heading')settings.push(el(co.SelectControl,{key:'tag',label:'Heading tag',value:a.headingTag,options:['h1','h2','h3','h4','h5','h6','p','div'].map(function(t){return {label:t,value:t};}),onChange:function(v){set({headingTag:v});}})); |
| 32 |
if(kind==='button')settings.push(el(co.TextControl,{key:'url',label:'Button URL',value:a.url,onChange:function(v){set({url:v});}}),el(co.ToggleControl,{key:'target',label:'Open in new tab',checked:a.target==='_blank',onChange:function(v){set({target:v?'_blank':''});}})); |
| 33 |
if(kind==='image')settings.push(ImageEdit(a,set,null,true),el(co.TextControl,{key:'alt',label:'Alternative text',value:(a.image||{}).alt||'',onChange:function(v){set({image:Object.assign({},a.image,{alt:v})});}}),el(co.TextControl,{key:'link',label:'Image link',value:a.link||'',onChange:function(v){set({link:v});}}),el(co.RangeControl,{key:'width',label:'Image width override (0 = original)',value:a.imageWidth||0,min:0,max:2000,onChange:function(v){set({imageWidth:v||0});}})); |
| 34 |
if(kind==='marquee')settings.push(el(co.RangeControl,{key:'speed',label:'Scrolling speed (px/sec)',value:a.speed,min:1,max:200,onChange:function(v){set({speed:v});}}),el(co.ToggleControl,{key:'pause',label:'Pause on hover',checked:a.pauseOnHover,onChange:function(v){set({pauseOnHover:v});}})); |
| 35 |
if(kind==='marquee'||kind==='styled-text')(a.segments||[]).forEach(function(seg,i){if(seg.image)settings.push(ImageEdit(a,set,{index:i},true));}); |
| 36 |
var controls=el(InspectorControls,{},el(co.PanelBody,{title:kind==='layout'?'Layout':'Content',initialOpen:true},settings.length?settings:el('p',{},kind==='layout'?'Select a nested block to edit its content. Use Advanced settings to adjust spacing, background and motion.':'Edit text directly on the canvas.')),kind!=='layout'&&kind!=='page'&&kind!=='image'?typography(a,set):null); |
| 37 |
if(kind==='page')return el(Fragment,{},controls,el('main',outer,el('div',inner))); |
| 38 |
if(kind==='layout')return el(Fragment,{},controls,el(a.tag==='section'?'section':'div',outer,a.kind!=='column'?background:null,a.overlay&&a.kind!=='column'?el('div',{className:'bkbg-tpl-background-overlay'}):null,el('div',inner,a.kind==='column'?background:null,a.kind==='column'&&a.overlay?el('div',{className:'bkbg-tpl-background-overlay'}):null,inner.children),shapeDividers(a))); |
| 39 |
var body; |
| 40 |
if(kind==='text'||kind==='heading')body=el(RichText,{tagName:kind==='heading'?a.headingTag:'div',className:kind==='heading'?a.contentClasses:'',value:a.content,onChange:function(v){set({content:v});},style:inlineStyle(a),allowedFormats:['core/bold','core/italic','core/link','core/text-color'],placeholder:'Text…'}); |
| 41 |
if(kind==='button')body=el('div',{className:'bkbg-tpl-button-wrapper'},el('span',{className:a.buttonClasses},el('span',{className:'bkbg-tpl-button-content-wrapper'},a.buttonIcon==='play'?el('span',{className:'bkbg-tpl-button-icon','aria-hidden':true},el('svg',{viewBox:'0 0 448 512',width:'1em',height:'1em',fill:'currentColor'},el('path',{d:'M0 0L448 256L0 512Z'}))):null,el(RichText,{tagName:'span',className:'bkbg-tpl-button-text',value:a.content,onChange:function(v){set({content:v});},allowedFormats:['core/bold','core/italic']})))); |
| 42 |
if(kind==='image')body=ImageEdit(a,set); |
| 43 |
if(kind==='styled-text'||kind==='marquee'){ |
| 44 |
var items=(a.segments||[]).map(function(seg,i){return el('span',{key:seg.id||i,className:seg.classes},el('span',{className:'bkbg-catalog-'+(kind==='marquee'?'auto-scrolling-text':'styled-text')+'-inner'},seg.image?ImageEdit(a,set,{index:i}):el(RichText,{tagName:'span',value:seg.text,onChange:function(v){var next=a.segments.slice();next[i]=Object.assign({},next[i],{text:v});set({segments:next});},allowedFormats:['core/bold','core/italic','core/link']})));}); |
| 45 |
body=kind==='styled-text'?el('div',{className:'bkbg-catalog-styled-text-builder-items'},items):el('div',{className:'bkbg-catalog-auto-scrolling-text-items-wrapper'},el('div',{className:'bkbg-catalog-auto-scrolling-text-items bkbg-catalog-auto-scrolling-text-items-'+a.uid},el('div',{className:'bkbg-catalog-auto-scrolling-text-wrapper bkbg-catalog-auto-scrolling-text-wrapper-'+a.uid,style:{animation:'none'}},items))); |
| 46 |
} |
| 47 |
return el(Fragment,{},controls,el('div',outer,el('div',{className:'bkbg-tpl-widget-container',style:inlineStyle(a)},body),el('style',{},window.bkbgTemplateEditorCSS(a,props.clientId)))); |
| 48 |
} |
| 49 |
Object.keys(window.bkbgTemplateBlocks||{}).forEach(function(name){var meta=window.bkbgTemplateBlocks[name];wp.blocks.registerBlockType(name,{apiVersion:3,title:meta.title,description:meta.description,category:meta.category,icon:meta.icon,attributes:meta.attributes,supports:meta.supports,edit:edit,save:name==='blockenberg/template-page'||name==='blockenberg/template-layout'?function(){return el(be.InnerBlocks.Content);}:function(){return null;}});}); |
| 50 |
})(); |
| 51 |
|
