# blockenberg/2.0.7/blocks/about-section/index.js Blockenberg — 600+ Advanced Gutenberg Blocks & AI Agent for WordPress Block Editor, version 2.0.7. 201 lines. - Page: https://pluginprobe.com/plugins/blockenberg/2.0.7/code/blocks/about-section/index.js - Raw: https://pluginprobe.com/plugins/blockenberg/2.0.7/raw/blocks/about-section/index.js - Modified: 2026-03-06T12:32:40+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/blockenberg/2.0.7/code/blocks/about-section/index.js#L10-L20`. ```javascript ( function () { var el = wp.element.createElement; var Fragment = wp.element.Fragment; var useState = wp.element.useState; var __ = wp.i18n.__; var registerBlockType = wp.blocks.registerBlockType; var InspectorControls = wp.blockEditor.InspectorControls; var MediaUpload = wp.blockEditor.MediaUpload; var MediaUploadCheck = wp.blockEditor.MediaUploadCheck; var useBlockProps = wp.blockEditor.useBlockProps; var RichText = wp.blockEditor.RichText; var PanelBody = wp.components.PanelBody; var PanelColorSettings = wp.blockEditor.PanelColorSettings; var ToggleControl = wp.components.ToggleControl; var RangeControl = wp.components.RangeControl; var SelectControl = wp.components.SelectControl; var TextControl = wp.components.TextControl; var Button = wp.components.Button; /* ── lazy typography helpers ── */ function _tc() { return window.bkbgTypographyControl || null; } Object.defineProperty(window, '__bkAS_tvf', { get: function () { delete window.__bkAS_tvf; return (window.__bkAS_tvf = window.bkbgTypoCssVars || function () { return {}; }); } }); function getTypoCssVars(a) { var o = {}; Object.assign(o, window.__bkAS_tvf(a.headingTypo || {}, '--bkas-hd-')); Object.assign(o, window.__bkAS_tvf(a.bodyTypo || {}, '--bkas-bd-')); Object.assign(o, window.__bkAS_tvf(a.labelTypo || {}, '--bkas-lb-')); Object.assign(o, window.__bkAS_tvf(a.statValueTypo || {}, '--bkas-sv-')); Object.assign(o, window.__bkAS_tvf(a.statLabelTypo || {}, '--bkas-sl-')); return o; } registerBlockType('blockenberg/about-section', { title: __('About Section', 'blockenberg'), icon: 'admin-home', description: __('Ready-made About Us section with split image/video + text layout, optional company stats row, badge label, CTA buttons, and full background/color controls.', 'blockenberg'), category: 'bkbg-business', edit: function (props) { var attr = props.attributes; var setAttr = props.setAttributes; function updateStat(idx, key, val) { var next = attr.stats.map(function (s, i) { return i === idx ? Object.assign({}, s, { [key]: val }) : s; }); setAttr({ stats: next }); } function addStat() { setAttr({ stats: attr.stats.concat([{ value: '100+', label: 'New stat' }]) }); } function removeStat(idx) { setAttr({ stats: attr.stats.filter(function (_, i) { return i !== idx; }) }); } var blockProps = useBlockProps((function () { var s = getTypoCssVars(attr); return { className: 'bkbg-about-section-editor', style: s }; })()); var previewStyle = { background: attr.bgColor, padding: attr.paddingTop + 'px 40px ' + attr.paddingBottom + 'px', fontFamily: 'inherit' }; var innerStyle = { maxWidth: attr.maxWidth + 'px', margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: attr.colGap + 'px', alignItems: attr.verticalAlign }; var imgCol = { order: attr.imageLayout === 'left' ? 0 : 1 }; var txtCol = { order: attr.imageLayout === 'left' ? 1 : 0 }; return el(Fragment, null, el(InspectorControls, null, el(PanelBody, { title: __('Content', 'blockenberg'), initialOpen: true }, el(ToggleControl, { label: __('Show Label', 'blockenberg'), __nextHasNoMarginBottom: true, checked: attr.showLabel, onChange: function (v) { setAttr({ showLabel: v }); } }), el(ToggleControl, { label: __('Show Stats Row', 'blockenberg'), __nextHasNoMarginBottom: true, checked: attr.showStats, onChange: function (v) { setAttr({ showStats: v }); } }), el(ToggleControl, { label: __('Show Primary CTA', 'blockenberg'), __nextHasNoMarginBottom: true, checked: attr.showCta, onChange: function (v) { setAttr({ showCta: v }); } }), attr.showCta && el(TextControl, { label: __('CTA Label', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.ctaLabel, onChange: function (v) { setAttr({ ctaLabel: v }); } }), attr.showCta && el(TextControl, { label: __('CTA URL', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.ctaUrl, onChange: function (v) { setAttr({ ctaUrl: v }); } }), attr.showCta && el(SelectControl, { label: __('CTA Style', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.ctaStyle, options: [{ label: 'Filled', value: 'filled' }, { label: 'Outline', value: 'outline' }, { label: 'Ghost', value: 'ghost' }], onChange: function (v) { setAttr({ ctaStyle: v }); } }), el(ToggleControl, { label: __('Show Second CTA', 'blockenberg'), __nextHasNoMarginBottom: true, checked: attr.showCta2, onChange: function (v) { setAttr({ showCta2: v }); } }), attr.showCta2 && el(TextControl, { label: __('CTA 2 Label', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.cta2Label, onChange: function (v) { setAttr({ cta2Label: v }); } }), attr.showCta2 && el(TextControl, { label: __('CTA 2 URL', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.cta2Url, onChange: function (v) { setAttr({ cta2Url: v }); } }), el(ToggleControl, { label: __('Show Signature', 'blockenberg'), __nextHasNoMarginBottom: true, checked: attr.showSignature, onChange: function (v) { setAttr({ showSignature: v }); } }), attr.showSignature && el(TextControl, { label: __('Signature / Author', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.signatureName, onChange: function (v) { setAttr({ signatureName: v }); } }) ), el(PanelBody, { title: __('Image', 'blockenberg'), initialOpen: false }, el(MediaUploadCheck, null, el(MediaUpload, { onSelect: function (m) { setAttr({ imageUrl: m.url, imageId: m.id, imageAlt: m.alt || '' }); }, allowedTypes: ['image'], value: attr.imageId, render: function (r) { return el(Fragment, null, attr.imageUrl && el('img', { src: attr.imageUrl, style: { width: '100%', borderRadius: 8, marginBottom: 8 } }), el(Button, { onClick: r.open, variant: 'secondary', __nextHasNoMarginBottom: true }, attr.imageUrl ? __('Change Image', 'blockenberg') : __('Select Image', 'blockenberg')), attr.imageUrl && el(Button, { onClick: function () { setAttr({ imageUrl: '', imageId: 0 }); }, variant: 'link', isDestructive: true, __nextHasNoMarginBottom: true, style: { marginLeft: 8 } }, __('Remove', 'blockenberg')) ); } }) ), el(SelectControl, { label: __('Image Side', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.imageLayout, options: [{ label: 'Left', value: 'left' }, { label: 'Right', value: 'right' }], onChange: function (v) { setAttr({ imageLayout: v }); } }), el(SelectControl, { label: __('Image Shape', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.imageStyle, options: [{ label: 'Rounded', value: 'rounded' }, { label: 'Square', value: 'square' }, { label: 'Circle', value: 'circle' }, { label: 'Clipped', value: 'clipped' }], onChange: function (v) { setAttr({ imageStyle: v }); } }), el(ToggleControl, { label: __('Image Shadow', 'blockenberg'), __nextHasNoMarginBottom: true, checked: attr.imageShadow, onChange: function (v) { setAttr({ imageShadow: v }); } }) ), attr.showStats && el(PanelBody, { title: __('Stats', 'blockenberg'), initialOpen: false }, attr.stats.map(function (s, i) { return el('div', { key: i, style: { borderLeft: '3px solid #7c3aed', paddingLeft: 8, marginBottom: 12 } }, el(TextControl, { label: __('Value', 'blockenberg') + ' ' + (i + 1), __nextHasNoMarginBottom: true, value: s.value, onChange: function (v) { updateStat(i, 'value', v); } }), el(TextControl, { label: __('Label', 'blockenberg') + ' ' + (i + 1), __nextHasNoMarginBottom: true, value: s.label, onChange: function (v) { updateStat(i, 'label', v); } }), attr.stats.length > 1 && el(Button, { onClick: function () { removeStat(i); }, variant: 'link', isDestructive: true, __nextHasNoMarginBottom: true }, __('Remove', 'blockenberg')) ); }), el(Button, { onClick: addStat, variant: 'secondary', __nextHasNoMarginBottom: true }, __('+ Add Stat', 'blockenberg')) ), el(PanelBody, { title: __('Layout', 'blockenberg'), initialOpen: false }, el(SelectControl, { label: __('Vertical Align', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.verticalAlign, options: [{ label: 'Center', value: 'center' }, { label: 'Top', value: 'start' }, { label: 'Bottom', value: 'end' }], onChange: function (v) { setAttr({ verticalAlign: v }); } }), el(RangeControl, { label: __('Column Gap (px)', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.colGap, min: 16, max: 128, onChange: function (v) { setAttr({ colGap: v }); } }), el(RangeControl, { label: __('Max Width (px)', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.maxWidth, min: 600, max: 1600, step: 10, onChange: function (v) { setAttr({ maxWidth: v }); } }), el(RangeControl, { label: __('Padding Top (px)', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.paddingTop, min: 0, max: 200, onChange: function (v) { setAttr({ paddingTop: v }); } }), el(RangeControl, { label: __('Padding Bottom (px)', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.paddingBottom, min: 0, max: 200, onChange: function (v) { setAttr({ paddingBottom: v }); } }) ), el(PanelBody, { title: __('Typography', 'blockenberg'), initialOpen: false }, _tc() && el(_tc(), { label: __('Heading', 'blockenberg'), value: attr.headingTypo || {}, onChange: function (v) { setAttr({ headingTypo: v }); } }), _tc() && el(_tc(), { label: __('Body Text', 'blockenberg'), value: attr.bodyTypo || {}, onChange: function (v) { setAttr({ bodyTypo: v }); } }), _tc() && el(_tc(), { label: __('Label', 'blockenberg'), value: attr.labelTypo || {}, onChange: function (v) { setAttr({ labelTypo: v }); } }), _tc() && el(_tc(), { label: __('Stat Value', 'blockenberg'), value: attr.statValueTypo || {}, onChange: function (v) { setAttr({ statValueTypo: v }); } }), _tc() && el(_tc(), { label: __('Stat Label', 'blockenberg'), value: attr.statLabelTypo || {}, onChange: function (v) { setAttr({ statLabelTypo: v }); } }) ), el(PanelColorSettings, { title: __('Colors', 'blockenberg'), initialOpen: false, colorSettings: [ { value: attr.bgColor, onChange: function (v) { setAttr({ bgColor: v || '#ffffff' }); }, label: __('Background', 'blockenberg') }, { value: attr.accentColor, onChange: function (v) { setAttr({ accentColor: v || '#7c3aed' }); }, label: __('Accent', 'blockenberg') }, { value: attr.headingColor, onChange: function (v) { setAttr({ headingColor: v || '#111827' }); }, label: __('Heading', 'blockenberg') }, { value: attr.textColor, onChange: function (v) { setAttr({ textColor: v || '#6b7280' }); }, label: __('Body Text', 'blockenberg') }, { value: attr.statValueColor, onChange: function (v) { setAttr({ statValueColor: v || '#111827' }); }, label: __('Stat Value', 'blockenberg') }, { value: attr.statLabelColor, onChange: function (v) { setAttr({ statLabelColor: v || '#6b7280' }); }, label: __('Stat Label', 'blockenberg') }, { value: attr.ctaBg, onChange: function (v) { setAttr({ ctaBg: v || '#7c3aed' }); }, label: __('CTA Background', 'blockenberg') }, { value: attr.ctaColor, onChange: function (v) { setAttr({ ctaColor: v || '#ffffff' }); }, label: __('CTA Text', 'blockenberg') }, { value: attr.labelBg, onChange: function (v) { setAttr({ labelBg: v || '#ede9fe' }); }, label: __('Label Background', 'blockenberg') }, { value: attr.labelColor, onChange: function (v) { setAttr({ labelColor: v || '#7c3aed' }); }, label: __('Label Text', 'blockenberg') } ] }) ), el('div', blockProps, el('div', { style: previewStyle }, el('div', { style: innerStyle }, el('div', { className: 'bkbg-as-image-col', style: imgCol }, attr.imageUrl ? el('img', { src: attr.imageUrl, alt: attr.imageAlt, style: { width: '100%', display: 'block', borderRadius: attr.imageStyle === 'rounded' ? 16 : attr.imageStyle === 'circle' ? '50%' : 0, boxShadow: attr.imageShadow ? '0 20px 60px rgba(0,0,0,.15)' : 'none' } }) : el('div', { style: { background: '#e5e7eb', borderRadius: 16, height: 360, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#9ca3af', fontSize: 14 } }, __('Select an image in the panel', 'blockenberg')) ), el('div', { className: 'bkbg-as-text-col', style: Object.assign({}, txtCol, { display: 'flex', flexDirection: 'column', gap: 24 }) }, attr.showLabel && el('span', { className: 'bkbg-as-label', style: { background: attr.labelBg, color: attr.labelColor, alignSelf: 'flex-start' } }, attr.label), el(RichText, { tagName: 'h2', className: 'bkbg-as-heading', value: attr.heading, onChange: function (v) { setAttr({ heading: v }); }, style: { color: attr.headingColor, margin: 0 }, placeholder: __('Heading…', 'blockenberg') }), el(RichText, { tagName: 'p', className: 'bkbg-as-body', value: attr.subtext, onChange: function (v) { setAttr({ subtext: v }); }, style: { color: attr.textColor, margin: 0 }, placeholder: __('Describe your company or story…', 'blockenberg') }), attr.showStats && attr.stats.length > 0 && el('div', { style: { display: 'flex', gap: 32, flexWrap: 'wrap', paddingTop: 8 } }, attr.stats.map(function (s, i) { return el('div', { key: i }, el('div', { className: 'bkbg-as-stat-value', style: { color: attr.statValueColor } }, s.value), el('div', { className: 'bkbg-as-stat-label', style: { color: attr.statLabelColor } }, s.label) ); }) ), (attr.showCta || attr.showCta2 || attr.showSignature) && el('div', { style: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 16 } }, attr.showCta && el('a', { href: '#', style: { display: 'inline-flex', alignItems: 'center', gap: 8, padding: '12px 28px', borderRadius: 8, fontWeight: 600, fontSize: 15, background: attr.ctaStyle === 'filled' ? attr.ctaBg : 'transparent', color: attr.ctaStyle === 'filled' ? attr.ctaColor : attr.accentColor, border: attr.ctaStyle === 'filled' ? 'none' : '2px solid ' + attr.accentColor, textDecoration: 'none' } }, attr.ctaLabel, el('span', null, '→')), attr.showCta2 && el('a', { href: '#', style: { display: 'inline-flex', alignItems: 'center', gap: 8, padding: '12px 28px', borderRadius: 8, fontWeight: 600, fontSize: 15, background: 'transparent', color: attr.headingColor, textDecoration: 'none' } }, attr.cta2Label), attr.showSignature && el('span', { style: { fontSize: 14, color: attr.textColor, fontStyle: 'italic' } }, '— ' + attr.signatureName) ) ) ) ) ) ); }, save: function (props) { var attr = props.attributes; var sv = getTypoCssVars(attr); return el('div', useBlockProps.save(), el('div', { className: 'bkbg-about-section-app', 'data-opts': JSON.stringify(attr), style: sv }) ); } }); }() ); ```