| 1 |
(function () { |
| 2 |
var el = wp.element.createElement; |
| 3 |
var Fragment = wp.element.Fragment; |
| 4 |
var registerBlockType = wp.blocks.registerBlockType; |
| 5 |
var __ = wp.i18n.__; |
| 6 |
var InspectorControls = wp.blockEditor.InspectorControls; |
| 7 |
var PanelColorSettings = wp.blockEditor.PanelColorSettings; |
| 8 |
var useBlockProps = wp.blockEditor.useBlockProps; |
| 9 |
var PanelBody = wp.components.PanelBody; |
| 10 |
var RangeControl = wp.components.RangeControl; |
| 11 |
var ToggleControl = wp.components.ToggleControl; |
| 12 |
var TextControl = wp.components.TextControl; |
| 13 |
var SelectControl = wp.components.SelectControl; |
| 14 |
var Notice = wp.components.Notice; |
| 15 |
|
| 16 |
var ASPECT_OPTIONS = [ |
| 17 |
{ label: '16:9 (Widescreen video)', value: '16:9' }, |
| 18 |
{ label: '4:3 (Classic video)', value: '4:3' }, |
| 19 |
{ label: '1:1 (Square)', value: '1:1' }, |
| 20 |
{ label: 'Custom height', value: 'custom' }, |
| 21 |
]; |
| 22 |
|
| 23 |
var SCROLLING_OPTIONS = [ |
| 24 |
{ label: 'Auto', value: 'auto' }, |
| 25 |
{ label: 'Yes', value: 'yes' }, |
| 26 |
{ label: 'No', value: 'no' }, |
| 27 |
]; |
| 28 |
|
| 29 |
var LOADING_OPTIONS = [ |
| 30 |
{ label: 'Lazy (recommended)', value: 'lazy' }, |
| 31 |
{ label: 'Eager (load immediately)', value: 'eager' }, |
| 32 |
]; |
| 33 |
|
| 34 |
function getPaddingPercent(ratio) { |
| 35 |
if (ratio === '16:9') return 56.25; |
| 36 |
if (ratio === '4:3') return 75; |
| 37 |
if (ratio === '1:1') return 100; |
| 38 |
return null; |
| 39 |
} |
| 40 |
|
| 41 |
registerBlockType('blockenberg/embed', { |
| 42 |
edit: function (props) { |
| 43 |
var attributes = props.attributes; |
| 44 |
var setAttributes = props.setAttributes; |
| 45 |
|
| 46 |
var blockProps = useBlockProps({ |
| 47 |
style: { paddingTop: attributes.paddingTop + 'px', paddingBottom: attributes.paddingBottom + 'px', backgroundColor: attributes.bgColor || undefined } |
| 48 |
}); |
| 49 |
|
| 50 |
var hasUrl = attributes.url && attributes.url.trim().length > 0; |
| 51 |
var isCustom = attributes.aspectRatio === 'custom'; |
| 52 |
var paddingPct = getPaddingPercent(attributes.aspectRatio); |
| 53 |
var wrapStyle = { |
| 54 |
maxWidth: attributes.maxWidth > 0 ? attributes.maxWidth + 'px' : '100%', |
| 55 |
margin: '0 auto', |
| 56 |
borderRadius: attributes.borderRadius + 'px', |
| 57 |
overflow: 'hidden', |
| 58 |
border: attributes.showBorder ? attributes.borderWidth + 'px solid ' + attributes.borderColor : 'none', |
| 59 |
boxSizing: 'border-box', |
| 60 |
}; |
| 61 |
var ratioWrapStyle = isCustom |
| 62 |
? { height: attributes.customHeight + 'px', position: 'relative' } |
| 63 |
: { position: 'relative', paddingBottom: paddingPct + '%', height: 0 }; |
| 64 |
var iframeStyle = { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', border: 'none' }; |
| 65 |
|
| 66 |
return el(Fragment, null, |
| 67 |
el(InspectorControls, null, |
| 68 |
el(PanelBody, { title: __('Embed URL', 'blockenberg'), initialOpen: true }, |
| 69 |
el(TextControl, { |
| 70 |
label: __('URL to embed', 'blockenberg'), |
| 71 |
value: attributes.url, |
| 72 |
type: 'url', |
| 73 |
placeholder: 'https://calendly.com/your-link', |
| 74 |
help: __('Paste a Calendly, Typeform, Google Form, YouTube, or any iframe-embeddable URL.', 'blockenberg'), |
| 75 |
onChange: function (v) { setAttributes({ url: v }); } |
| 76 |
}), |
| 77 |
el(TextControl, { label: __('Accessible title', 'blockenberg'), value: attributes.title, onChange: function (v) { setAttributes({ title: v }); } }) |
| 78 |
), |
| 79 |
el(PanelBody, { title: __('Dimensions', 'blockenberg'), initialOpen: true }, |
| 80 |
el(SelectControl, { label: __('Aspect ratio', 'blockenberg'), value: attributes.aspectRatio, options: ASPECT_OPTIONS, onChange: function (v) { setAttributes({ aspectRatio: v }); } }), |
| 81 |
isCustom && el(RangeControl, { label: __('Height (px)', 'blockenberg'), value: attributes.customHeight, min: 200, max: 2000, onChange: function (v) { setAttributes({ customHeight: v }); } }), |
| 82 |
el(RangeControl, { label: __('Max width (px, 0 = full)', 'blockenberg'), value: attributes.maxWidth, min: 0, max: 1600, onChange: function (v) { setAttributes({ maxWidth: v }); } }), |
| 83 |
el(RangeControl, { label: __('Border radius (px)', 'blockenberg'), value: attributes.borderRadius, min: 0, max: 32, onChange: function (v) { setAttributes({ borderRadius: v }); } }) |
| 84 |
), |
| 85 |
el(PanelBody, { title: __('Iframe Settings', 'blockenberg'), initialOpen: false }, |
| 86 |
el(SelectControl, { label: __('Scrolling', 'blockenberg'), value: attributes.scrolling, options: SCROLLING_OPTIONS, onChange: function (v) { setAttributes({ scrolling: v }); } }), |
| 87 |
el(SelectControl, { label: __('Loading', 'blockenberg'), value: attributes.loading, options: LOADING_OPTIONS, onChange: function (v) { setAttributes({ loading: v }); } }), |
| 88 |
el(ToggleControl, { label: __('Allow fullscreen', 'blockenberg'), checked: attributes.allowFullscreen, onChange: function (v) { setAttributes({ allowFullscreen: v }); }, __nextHasNoMarginBottom: true }), |
| 89 |
el(TextControl, { label: __('Sandbox permissions', 'blockenberg'), value: attributes.sandbox, placeholder: 'allow-forms allow-scripts allow-same-origin', help: __('Leave blank for no sandbox restriction. Common values: allow-forms allow-scripts allow-same-origin allow-popups', 'blockenberg'), onChange: function (v) { setAttributes({ sandbox: v }); } }) |
| 90 |
), |
| 91 |
el(PanelBody, { title: __('Border', 'blockenberg'), initialOpen: false }, |
| 92 |
el(ToggleControl, { label: __('Show border', 'blockenberg'), checked: attributes.showBorder, onChange: function (v) { setAttributes({ showBorder: v }); }, __nextHasNoMarginBottom: true }), |
| 93 |
attributes.showBorder && el(RangeControl, { label: __('Border width (px)', 'blockenberg'), value: attributes.borderWidth, min: 1, max: 8, onChange: function (v) { setAttributes({ borderWidth: v }); } }) |
| 94 |
), |
| 95 |
el(PanelColorSettings, { |
| 96 |
title: __('Colors', 'blockenberg'), |
| 97 |
initialOpen: false, |
| 98 |
colorSettings: [ |
| 99 |
attributes.showBorder && { value: attributes.borderColor, onChange: function (v) { setAttributes({ borderColor: v || '' }); }, label: __('Border color', 'blockenberg') }, |
| 100 |
{ value: attributes.bgColor, onChange: function (v) { setAttributes({ bgColor: v || '' }); }, label: __('Section background', 'blockenberg') }, |
| 101 |
].filter(Boolean) |
| 102 |
}), |
| 103 |
el(PanelBody, { title: __('Spacing', 'blockenberg'), initialOpen: false }, |
| 104 |
el(RangeControl, { label: __('Padding top (px)', 'blockenberg'), value: attributes.paddingTop, min: 0, max: 200, onChange: function (v) { setAttributes({ paddingTop: v }); } }), |
| 105 |
el(RangeControl, { label: __('Padding bottom (px)', 'blockenberg'), value: attributes.paddingBottom, min: 0, max: 200, onChange: function (v) { setAttributes({ paddingBottom: v }); } }) |
| 106 |
) |
| 107 |
), |
| 108 |
el('div', blockProps, |
| 109 |
el('div', { className: 'bkbg-embed-wrap', style: wrapStyle }, |
| 110 |
!hasUrl && el('div', { style: { background: '#f9fafb', borderRadius: attributes.borderRadius + 'px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '60px 24px', gap: '12px', border: '2px dashed #d1d5db', color: '#6b7280', textAlign: 'center', minHeight: isCustom ? attributes.customHeight + 'px' : undefined, aspectRatio: !isCustom ? attributes.aspectRatio.replace(':', '/') : undefined } }, |
| 111 |
el('svg', { width: 40, height: 40, viewBox: '0 0 24 24', fill: 'none', stroke: '#9ca3af', strokeWidth: 1.5 }, |
| 112 |
el('rect', { x: 3, y: 3, width: 18, height: 18, rx: 2 }), |
| 113 |
el('path', { d: 'M3 9h18' }), |
| 114 |
el('path', { d: 'M9 21V9' }) |
| 115 |
), |
| 116 |
el('p', { style: { margin: 0, fontWeight: 600 } }, __('iFrame / Embed', 'blockenberg')), |
| 117 |
el('p', { style: { margin: 0, fontSize: '13px' } }, attributes.placeholderText) |
| 118 |
), |
| 119 |
hasUrl && el('div', { className: 'bkbg-embed-ratio', style: ratioWrapStyle }, |
| 120 |
el('iframe', { |
| 121 |
src: attributes.url, |
| 122 |
title: attributes.title, |
| 123 |
style: iframeStyle, |
| 124 |
loading: attributes.loading, |
| 125 |
scrolling: attributes.scrolling, |
| 126 |
allowFullScreen: attributes.allowFullscreen, |
| 127 |
sandbox: attributes.sandbox || undefined, |
| 128 |
}) |
| 129 |
) |
| 130 |
) |
| 131 |
) |
| 132 |
); |
| 133 |
}, |
| 134 |
|
| 135 |
save: function (props) { |
| 136 |
var attributes = props.attributes; |
| 137 |
var isCustom = attributes.aspectRatio === 'custom'; |
| 138 |
var paddingPct = getPaddingPercent(attributes.aspectRatio); |
| 139 |
var blockProps = wp.blockEditor.useBlockProps.save({ className: 'bkbg-embed-block-wrap' }); |
| 140 |
|
| 141 |
if (!attributes.url) return el('div', blockProps); |
| 142 |
|
| 143 |
var wrapStyle = { |
| 144 |
maxWidth: attributes.maxWidth > 0 ? attributes.maxWidth + 'px' : '100%', |
| 145 |
margin: '0 auto', |
| 146 |
borderRadius: attributes.borderRadius + 'px', |
| 147 |
overflow: 'hidden', |
| 148 |
border: attributes.showBorder ? attributes.borderWidth + 'px solid ' + attributes.borderColor : 'none', |
| 149 |
boxSizing: 'border-box', |
| 150 |
}; |
| 151 |
var ratioWrapStyle = isCustom |
| 152 |
? { height: attributes.customHeight + 'px', position: 'relative' } |
| 153 |
: { position: 'relative', paddingBottom: paddingPct + '%', height: 0 }; |
| 154 |
var iframeStyle = { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', border: 'none' }; |
| 155 |
|
| 156 |
return el('div', Object.assign({}, blockProps, { style: { paddingTop: attributes.paddingTop + 'px', paddingBottom: attributes.paddingBottom + 'px', backgroundColor: attributes.bgColor || undefined } }), |
| 157 |
el('div', { className: 'bkbg-embed-wrap', style: wrapStyle }, |
| 158 |
el('div', { className: 'bkbg-embed-ratio', 'data-aspect': attributes.aspectRatio, style: ratioWrapStyle }, |
| 159 |
el('iframe', { |
| 160 |
src: attributes.url, |
| 161 |
title: attributes.title, |
| 162 |
style: iframeStyle, |
| 163 |
loading: attributes.loading, |
| 164 |
scrolling: attributes.scrolling, |
| 165 |
allowFullScreen: attributes.allowFullscreen, |
| 166 |
sandbox: attributes.sandbox || undefined, |
| 167 |
className: 'bkbg-embed-iframe', |
| 168 |
}) |
| 169 |
) |
| 170 |
) |
| 171 |
); |
| 172 |
} |
| 173 |
}); |
| 174 |
}()); |
| 175 |
|
