# blockenberg/2.0.11/blocks/author-profile/index.js Blockenberg — 600+ Advanced Gutenberg Blocks & AI Agent for WordPress Block Editor, version 2.0.11. 202 lines. - Page: https://pluginprobe.com/plugins/blockenberg/2.0.11/code/blocks/author-profile/index.js - Raw: https://pluginprobe.com/plugins/blockenberg/2.0.11/raw/blocks/author-profile/index.js - Modified: 2026-07-22T02:13:48+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.11/code/blocks/author-profile/index.js#L10-L20`. ```javascript ( function () { const el = window.wp.element.createElement; const { registerBlockType } = window.wp.blocks; const { InspectorControls, useBlockProps, PanelColorSettings } = window.wp.blockEditor; const { PanelBody, RangeControl, ToggleControl, TextControl, Button, SelectControl } = window.wp.components; const { __ } = window.wp.i18n; var IP = function () { return window.bkbgIconPicker; }; function getTypographyControl() { return (typeof window.bkbgTypographyControl !== 'undefined') ? window.bkbgTypographyControl : null; } function getTypoCssVars() { return (typeof window.bkbgTypoCssVars !== 'undefined') ? window.bkbgTypoCssVars : function() { return {}; }; } function buildWrapStyle( a ) { var _tv = getTypoCssVars(); var s = { background: a.bgColor || undefined }; Object.assign( s, _tv( a.nameTypo || {}, '--bkbg-ap-name-' ) ); Object.assign( s, _tv( a.roleTypo || {}, '--bkbg-ap-role-' ) ); Object.assign( s, _tv( a.bioTypo || {}, '--bkbg-ap-bio-' ) ); Object.assign( s, _tv( a.statValueTypo || {}, '--bkbg-ap-stat-val-' ) ); Object.assign( s, _tv( a.statLabelTypo || {}, '--bkbg-ap-stat-lbl-' ) ); return s; } // ── Avatar ──────────────────────────────────────────────────────────────── function Avatar( { avatarUrl, avatarInitials, avatarColor, avatarSize } ) { const circle = { width: avatarSize, height: avatarSize, borderRadius: '50%', flexShrink: 0, overflow: 'hidden', background: avatarColor, display: 'flex', alignItems: 'center', justifyContent: 'center' }; if ( avatarUrl ) { return el( 'div', { style: circle }, el( 'img', { src: avatarUrl, alt: avatarInitials, style: { width: '100%', height: '100%', objectFit: 'cover' } } ) ); } return el( 'div', { style: circle }, el( 'span', { style: { color: '#fff', fontWeight: 700, fontSize: ( avatarSize * 0.35 ) + 'px', letterSpacing: 1 } }, avatarInitials ) ); } // ── Stats row ───────────────────────────────────────────────────────────── function StatsRow( { stats, statValueColor, statLabelColor, fontSize, borderColor } ) { return el( 'div', { className: 'bkbg-ap-stats', style: { display: 'flex', gap: 0, margin: '16px 0 0', borderTop: '1px solid ' + borderColor, paddingTop: 16 } }, ( stats || [] ).map( ( s, i ) => el( 'div', { key: i, style: { flex: 1, textAlign: 'center', borderRight: i < ( stats.length - 1 ) ? '1px solid ' + borderColor : 'none' } }, el( 'div', { className: 'bkbg-ap-stat-val', style: { color: statValueColor } }, s.value ), el( 'div', { className: 'bkbg-ap-stat-lbl', style: { color: statLabelColor, marginTop: 2 } }, s.label ), ) ), ); } // ── Social links ────────────────────────────────────────────────────────── function SocialLinks( { socialLinks, textColor, fontSize, forSave } ) { return el( 'div', { className: 'bkbg-ap-social', style: { display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 14 } }, ( socialLinks || [] ).map( ( link, i ) => el( 'a', { key: i, href: link.url || '#', style: { display: 'flex', alignItems: 'center', gap: 5, fontSize: fontSize + 'px', color: textColor, textDecoration: 'none', padding: '4px 10px', borderRadius: 99, background: 'rgba(0,0,0,0.05)' } }, el( 'span', { className: 'bkbg-ap-social-icon' }, (link.iconType || 'custom-char') !== 'custom-char' ? (forSave ? IP().buildSaveIcon(link.iconType, link.icon, link.iconDashicon, link.iconImageUrl, link.iconDashiconColor) : IP().buildEditorIcon(link.iconType, link.icon, link.iconDashicon, link.iconImageUrl, link.iconDashiconColor)) : link.icon ), el( 'span', {}, link.label ), ) ), ); } // ── Renderer ────────────────────────────────────────────────────────────── function renderAuthorProfile( a, forSave ) { const isHoriz = a.layout === 'horizontal'; return el( 'div', { className: 'bkbg-ap-card', style: { background: a.cardBg, border: '1px solid ' + a.borderColor, borderRadius: a.borderRadius + 'px', padding: a.padding + 'px', display: 'flex', flexDirection: isHoriz ? 'row' : 'column', alignItems: isHoriz ? 'flex-start' : 'center', gap: isHoriz ? 24 : 16, boxSizing: 'border-box', } }, // Avatar a.showAvatar && el( Avatar, { avatarUrl: a.avatarUrl, avatarInitials: a.avatarInitials, avatarColor: a.avatarColor, avatarSize: a.avatarSize } ), // Body column el( 'div', { style: { flex: 1, textAlign: isHoriz ? 'left' : 'center', minWidth: 0 } }, el( 'div', { className: 'bkbg-ap-name', style: { color: a.nameColor } }, a.name ), a.showRole && el( 'div', { className: 'bkbg-ap-role', style: { color: a.roleColor, marginTop: 4 } }, a.role ), a.showBio && el( 'p', { className: 'bkbg-ap-bio', style: { color: a.textColor, margin: '10px 0 0' } }, a.bio ), a.showSocial && el( SocialLinks, { socialLinks: a.socialLinks, textColor: a.textColor, fontSize: a.fontSize, forSave: forSave } ), a.showStats && el( StatsRow, { stats: a.stats, statValueColor: a.statValueColor, statLabelColor: a.statLabelColor, fontSize: a.fontSize, borderColor: a.borderColor } ), ), ); } // ── Helpers for array editing ───────────────────────────────────────────── function updItem( setAttributes, arr, key, idx, field, val ) { setAttributes( { [key]: arr.map( ( x, i ) => i === idx ? { ...x, [field]: val } : x ) } ); } // ── Block ───────────────────────────────────────────────────────────────── registerBlockType( 'blockenberg/author-profile', { edit: function ( props ) { const { attributes: a, setAttributes } = props; const blockProps = useBlockProps( { className: 'bkbg-ap-wrap', style: buildWrapStyle( a ) } ); return el( 'div', blockProps, el( InspectorControls, {}, el( PanelBody, { title: __( 'Author', 'blockenberg' ), initialOpen: true }, el( TextControl, { label: __( 'Name', 'blockenberg' ), value: a.name, onChange: v => setAttributes( { name: v } ) } ), el( TextControl, { label: __( 'Role', 'blockenberg' ), value: a.role, onChange: v => setAttributes( { role: v } ) } ), el( TextControl, { label: __( 'Bio', 'blockenberg' ), value: a.bio, onChange: v => setAttributes( { bio: v } ) } ), el( SelectControl, { label: __( 'Layout', 'blockenberg' ), value: a.layout, options: [ { label: 'Horizontal', value: 'horizontal' }, { label: 'Vertical', value: 'vertical' } ], onChange: v => setAttributes( { layout: v } ) } ), el( ToggleControl, { label: __( 'Show Avatar', 'blockenberg' ), checked: a.showAvatar, onChange: v => setAttributes( { showAvatar: v } ) } ), el( ToggleControl, { label: __( 'Show Role', 'blockenberg' ), checked: a.showRole, onChange: v => setAttributes( { showRole: v } ) } ), el( ToggleControl, { label: __( 'Show Bio', 'blockenberg' ), checked: a.showBio, onChange: v => setAttributes( { showBio: v } ) } ), el( ToggleControl, { label: __( 'Show Stats', 'blockenberg' ), checked: a.showStats, onChange: v => setAttributes( { showStats: v } ) } ), el( ToggleControl, { label: __( 'Show Social', 'blockenberg' ), checked: a.showSocial, onChange: v => setAttributes( { showSocial: v } ) } ), ), el( PanelBody, { title: __( 'Avatar', 'blockenberg' ), initialOpen: false }, el( TextControl, { label: __( 'Avatar URL (optional)', 'blockenberg' ), value: a.avatarUrl, onChange: v => setAttributes( { avatarUrl: v } ) } ), el( TextControl, { label: __( 'Initials', 'blockenberg' ), value: a.avatarInitials, onChange: v => setAttributes( { avatarInitials: v } ) } ), el( 'div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 } }, el( 'label', { style: { fontSize: 12 } }, __( 'Avatar Color', 'blockenberg' ) ), el( 'input', { type: 'color', value: a.avatarColor, style: { width: 40, height: 28, border: 'none', borderRadius: 4, cursor: 'pointer' }, onChange: e => setAttributes( { avatarColor: e.target.value } ) } ), ), el( RangeControl, { label: __( 'Avatar Size', 'blockenberg' ), value: a.avatarSize, onChange: v => setAttributes( { avatarSize: v } ), min: 40, max: 160 } ), ), el( PanelBody, { title: __( 'Style', 'blockenberg' ), initialOpen: false }, el( RangeControl, { label: __( 'Border Radius', 'blockenberg' ), value: a.borderRadius, onChange: v => setAttributes( { borderRadius: v } ), min: 0, max: 32 } ), el( RangeControl, { label: __( 'Padding', 'blockenberg' ), value: a.padding, onChange: v => setAttributes( { padding: v } ), min: 12, max: 60 } ), ), el( PanelBody, { title: __( 'Typography', 'blockenberg' ), initialOpen: false }, (function () { var TC = getTypographyControl(); if (!TC) return el('p', { style: { color: '#999', fontSize: '12px', padding: '8px 0' } }, __('Typography control loading…', 'blockenberg')); return el(window.wp.element.Fragment, {}, el(TC, { label: __('Name', 'blockenberg'), value: a.nameTypo || {}, onChange: function (v) { setAttributes({ nameTypo: v }); } }), el(TC, { label: __('Role', 'blockenberg'), value: a.roleTypo || {}, onChange: function (v) { setAttributes({ roleTypo: v }); } }), el(TC, { label: __('Bio', 'blockenberg'), value: a.bioTypo || {}, onChange: function (v) { setAttributes({ bioTypo: v }); } }), el(TC, { label: __('Stat Value', 'blockenberg'), value: a.statValueTypo || {}, onChange: function (v) { setAttributes({ statValueTypo: v }); } }), el(TC, { label: __('Stat Label', 'blockenberg'), value: a.statLabelTypo || {}, onChange: function (v) { setAttributes({ statLabelTypo: v }); } }) ); })() ), el( PanelColorSettings, { title: __( 'Colors', 'blockenberg' ), initialOpen: false, colorSettings: [ { label: __( 'Page Background', 'blockenberg' ), value: a.bgColor, onChange: v => setAttributes( { bgColor: v || '#ffffff' } ) }, { label: __( 'Card Background', 'blockenberg' ), value: a.cardBg, onChange: v => setAttributes( { cardBg: v || '#f9fafb' } ) }, { label: __( 'Border', 'blockenberg' ), value: a.borderColor, onChange: v => setAttributes( { borderColor: v || '#e5e7eb' } ) }, { label: __( 'Name', 'blockenberg' ), value: a.nameColor, onChange: v => setAttributes( { nameColor: v || '#111827' } ) }, { label: __( 'Role', 'blockenberg' ), value: a.roleColor, onChange: v => setAttributes( { roleColor: v || '#6366f1' } ) }, { label: __( 'Body Text', 'blockenberg' ), value: a.textColor, onChange: v => setAttributes( { textColor: v || '#374151' } ) }, { label: __( 'Stat Value', 'blockenberg' ), value: a.statValueColor, onChange: v => setAttributes( { statValueColor: v || '#111827' } ) }, { label: __( 'Stat Label', 'blockenberg' ), value: a.statLabelColor, onChange: v => setAttributes( { statLabelColor: v || '#6b7280' } ) }, ] } ), el( PanelBody, { title: __( 'Stats', 'blockenberg' ), initialOpen: false }, el( Button, { variant: 'secondary', style: { marginBottom: 8 }, onClick: () => setAttributes( { stats: [ ...( a.stats || [] ), { label: 'Label', value: '0' } ] } ) }, __( '+ Add Stat', 'blockenberg' ) ), a.stats.map( ( s, i ) => el( 'div', { key: i, style: { marginBottom: 12, padding: '10px', background: '#f3f4f6', borderRadius: 8 } }, el( TextControl, { label: __( 'Value', 'blockenberg' ), value: s.value, onChange: v => updItem( setAttributes, a.stats, 'stats', i, 'value', v ) } ), el( TextControl, { label: __( 'Label', 'blockenberg' ), value: s.label, onChange: v => updItem( setAttributes, a.stats, 'stats', i, 'label', v ) } ), el( Button, { isDestructive: true, isSmall: true, onClick: () => setAttributes( { stats: a.stats.filter( ( _, j ) => j !== i ) } ) }, __( 'Remove', 'blockenberg' ) ), ) ), ), el( PanelBody, { title: __( 'Social Links', 'blockenberg' ), initialOpen: false }, el( Button, { variant: 'secondary', style: { marginBottom: 8 }, onClick: () => setAttributes( { socialLinks: [ ...( a.socialLinks || [] ), { icon: '🔗', iconType: 'custom-char', iconDashicon: '', iconImageUrl: '', label: 'Link', url: '' } ] } ) }, __( '+ Add Link', 'blockenberg' ) ), a.socialLinks.map( ( link, i ) => el( 'div', { key: i, style: { marginBottom: 12, padding: '10px', background: '#f3f4f6', borderRadius: 8 } }, el(IP().IconPickerControl, { iconType: link.iconType, customChar: link.icon, dashicon: link.iconDashicon, imageUrl: link.iconImageUrl, onChangeType: function(v) { updItem(setAttributes, a.socialLinks, 'socialLinks', i, 'iconType', v); }, onChangeChar: function(v) { updItem(setAttributes, a.socialLinks, 'socialLinks', i, 'icon', v); }, onChangeDashicon: function(v) { updItem(setAttributes, a.socialLinks, 'socialLinks', i, 'iconDashicon', v); }, onChangeImageUrl: function(v) { updItem(setAttributes, a.socialLinks, 'socialLinks', i, 'iconImageUrl', v); } }), el( TextControl, { label: __( 'Label', 'blockenberg' ), value: link.label, onChange: v => updItem( setAttributes, a.socialLinks, 'socialLinks', i, 'label', v ) } ), el( TextControl, { label: __( 'URL', 'blockenberg' ), value: link.url, onChange: v => updItem( setAttributes, a.socialLinks, 'socialLinks', i, 'url', v ) } ), el( Button, { isDestructive: true, isSmall: true, onClick: () => setAttributes( { socialLinks: a.socialLinks.filter( ( _, j ) => j !== i ) } ) }, __( 'Remove', 'blockenberg' ) ), ) ), ), ), renderAuthorProfile( a ), ); }, save: function ( { attributes: a } ) { const blockProps = useBlockProps.save( { className: 'bkbg-ap-wrap', style: buildWrapStyle( a ) } ); return el( 'div', blockProps, renderAuthorProfile( a, true ) ); }, } ); }() ); ```