# blockenberg/2.0.7/blocks/creative-button/index.js Blockenberg — 600+ Advanced Gutenberg Blocks & AI Agent for WordPress Block Editor, version 2.0.7. 152 lines. - Page: https://pluginprobe.com/plugins/blockenberg/2.0.7/code/blocks/creative-button/index.js - Raw: https://pluginprobe.com/plugins/blockenberg/2.0.7/raw/blocks/creative-button/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/creative-button/index.js#L10-L20`. ```javascript ( function () { var el = wp.element.createElement; var Fragment = wp.element.Fragment; var __ = wp.i18n.__; var registerBlockType = wp.blocks.registerBlockType; var InspectorControls = wp.blockEditor.InspectorControls; 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 _cbTC, _cbTV; function _tc() { return _cbTC || (_cbTC = window.bkbgTypographyControl); } function _tv(obj, prefix) { var fn = _cbTV || (_cbTV = window.bkbgTypoCssVars); return fn ? fn(obj, prefix) : {}; } var IP = function () { return window.bkbgIconPicker; }; function cornerRadius(corners) { return corners === 'pill' ? 999 : corners === 'rounded' ? 8 : 0; } function getButtonStyle(attr) { var r = cornerRadius(attr.corners) + 'px'; var base = { display: 'inline-flex', alignItems: 'center', gap: 8, justifyContent: 'center', padding: attr.paddingV + 'px ' + attr.paddingH + 'px', borderRadius: r, cursor: 'pointer', textDecoration: 'none', position: 'relative', overflow: 'hidden', border: attr.borderWidth + 'px solid ' + attr.borderColor, transition: 'all 0.25s ease' }; if (attr.buttonStyle === 'outline') { base.background = 'transparent'; base.color = attr.bgColor; } else if (attr.buttonStyle === 'ghost') { base.background = 'transparent'; base.color = attr.bgColor; base.border = 'none'; } else if (attr.buttonStyle === 'gradient') { base.background = 'linear-gradient(to right, ' + attr.gradientFrom + ', ' + attr.gradientTo + ')'; base.color = attr.textColor; base.border = 'none'; } else { base.background = attr.bgColor; base.color = attr.textColor; } return base; } registerBlockType('blockenberg/creative-button', { edit: function (props) { var attr = props.attributes; var setAttr = props.setAttributes; var blockProps = useBlockProps({ className: 'bkbg-cb2-editor', style: Object.assign({}, _tv(attr.typoBtn, '--bkbg-cb2-btn-')) }); var btnStyle = getButtonStyle(attr); var wrapStyle = { textAlign: attr.centered ? 'center' : 'left', padding: '20px 0' }; return el(Fragment, null, el(InspectorControls, null, el(PanelBody, { title: __('Button', 'blockenberg'), initialOpen: true }, el(TextControl, { label: __('URL', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.url, onChange: function (v) { setAttr({ url: v }); } }), el(ToggleControl, { label: __('Open in New Tab', 'blockenberg'), __nextHasNoMarginBottom: true, checked: attr.openNewTab, onChange: function (v) { setAttr({ openNewTab: v }); } }), el(ToggleControl, { label: __('Centered', 'blockenberg'), __nextHasNoMarginBottom: true, checked: attr.centered, onChange: function (v) { setAttr({ centered: v }); } }), el(ToggleControl, { label: __('Full Width', 'blockenberg'), __nextHasNoMarginBottom: true, checked: attr.fullWidth, onChange: function (v) { setAttr({ fullWidth: v }); } }) ), el(PanelBody, { title: __('Style & Effect', 'blockenberg'), initialOpen: false }, el(SelectControl, { label: __('Button Style', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.buttonStyle, options: [ { label: __('Filled (solid)', 'blockenberg'), value: 'filled' }, { label: __('Outline', 'blockenberg'), value: 'outline' }, { label: __('Ghost (no border)', 'blockenberg'), value: 'ghost' }, { label: __('Gradient', 'blockenberg'), value: 'gradient' } ], onChange: function (v) { setAttr({ buttonStyle: v }); } }), el(SelectControl, { label: __('Hover Effect', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.hoverEffect, options: [ { label: __('Slide — background wipes in', 'blockenberg'), value: 'slide' }, { label: __('Fill — expands from center', 'blockenberg'), value: 'fill' }, { label: __('Outline — inverts on hover', 'blockenberg'), value: 'outline' }, { label: __('3D Press — button depresses', 'blockenberg'), value: 'press3d' }, { label: __('Arrow — arrow slides in', 'blockenberg'), value: 'arrow' }, { label: __('Ripple — click wave effect', 'blockenberg'), value: 'ripple' } ], onChange: function (v) { setAttr({ hoverEffect: v }); } }), el(SelectControl, { label: __('Corners', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.corners, options: [{ label: __('Sharp', 'blockenberg'), value: 'sharp' }, { label: __('Rounded', 'blockenberg'), value: 'rounded' }, { label: __('Pill', 'blockenberg'), value: 'pill' }], onChange: function (v) { setAttr({ corners: v }); } }) ), el(PanelBody, { title: __('Icon', 'blockenberg'), initialOpen: false }, el(ToggleControl, { label: __('Show Icon', 'blockenberg'), __nextHasNoMarginBottom: true, checked: attr.showIcon, onChange: function (v) { setAttr({ showIcon: v }); } }), attr.showIcon && el('p', { style: { fontSize: '11px', fontWeight: 600, marginTop: '12px' } }, __('Icon', 'blockenberg')), attr.showIcon && el(IP().IconPickerControl, IP().iconPickerProps(attr, setAttr)), attr.showIcon && el(SelectControl, { label: __('Icon Position', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.iconPosition, options: [{ label: __('Left', 'blockenberg'), value: 'left' }, { label: __('Right', 'blockenberg'), value: 'right' }], onChange: function (v) { setAttr({ iconPosition: v }); } }), attr.showIcon && el(RangeControl, { label: __('Icon Size (px)', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.iconSize, min: 10, max: 32, onChange: function (v) { setAttr({ iconSize: v }); } }) ), el(PanelBody, { title: __('Sizing', 'blockenberg'), initialOpen: false }, el(RangeControl, { label: __('Horizontal Padding (px)', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.paddingH, min: 8, max: 80, onChange: function (v) { setAttr({ paddingH: v }); } }), el(RangeControl, { label: __('Vertical Padding (px)', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.paddingV, min: 4, max: 40, onChange: function (v) { setAttr({ paddingV: v }); } }), el(RangeControl, { label: __('Border Width (px)', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.borderWidth, min: 0, max: 6, onChange: function (v) { setAttr({ borderWidth: v }); } }) ), el( PanelBody, { title: __( 'Typography', 'blockenberg' ), initialOpen: false }, _tc() && el(_tc(), { label: __('Button', 'blockenberg'), value: attr.typoBtn, onChange: function (v) { setAttr({ typoBtn: v }); } }) ), el(PanelColorSettings, { title: __('Colors', 'blockenberg'), initialOpen: false, colorSettings: [ { value: attr.bgColor, onChange: function (v) { setAttr({ bgColor: v || '#7c3aed' }); }, label: __('Button BG', 'blockenberg') }, { value: attr.textColor, onChange: function (v) { setAttr({ textColor: v || '#ffffff' }); }, label: __('Button Text', 'blockenberg') }, { value: attr.hoverBg, onChange: function (v) { setAttr({ hoverBg: v || '#4f46e5' }); }, label: __('Hover BG', 'blockenberg') }, { value: attr.hoverColor, onChange: function (v) { setAttr({ hoverColor: v || '#ffffff' }); }, label: __('Hover Text', 'blockenberg') }, { value: attr.borderColor, onChange: function (v) { setAttr({ borderColor: v || '#7c3aed' }); }, label: __('Border', 'blockenberg') }, { value: attr.gradientFrom, onChange: function (v) { setAttr({ gradientFrom: v || '#7c3aed' }); }, label: __('Gradient Start', 'blockenberg') }, { value: attr.gradientTo, onChange: function (v) { setAttr({ gradientTo: v || '#2563eb' }); }, label: __('Gradient End', 'blockenberg') } ] }) ), el('div', blockProps, el('div', { style: wrapStyle }, el('span', { className: 'bkbg-cb2-btn', style: Object.assign({}, btnStyle, { width: attr.fullWidth ? '100%' : 'auto' }) }, attr.showIcon && attr.iconPosition === 'left' && el('span', { className: 'bkbg-cb2-icon', style: { fontSize: attr.iconSize + 'px' } }, (!attr.iconType || attr.iconType === 'custom-char') ? attr.icon : IP().buildEditorIcon(attr.iconType, attr.icon, attr.iconDashicon, attr.iconImageUrl, attr.iconDashiconColor) ), el(RichText, { tagName: 'span', value: attr.label, onChange: function (v) { setAttr({ label: v }); }, placeholder: 'Button label…' }), attr.showIcon && attr.iconPosition === 'right' && el('span', { className: 'bkbg-cb2-icon', style: { fontSize: attr.iconSize + 'px' } }, (!attr.iconType || attr.iconType === 'custom-char') ? attr.icon : IP().buildEditorIcon(attr.iconType, attr.icon, attr.iconDashicon, attr.iconImageUrl, attr.iconDashiconColor) ) ), el('div', { style: { marginTop: 8, fontSize: 11, color: '#888', textAlign: 'center' } }, __('Effect: ', 'blockenberg') + attr.hoverEffect + ' — visible on frontend') ) ) ); }, save: function (props) { var attr = props.attributes; return el('div', useBlockProps.save({ style: Object.assign({}, _tv(attr.typoBtn, '--bkbg-cb2-btn-')) }), el('div', { className: 'bkbg-creative-button-app', 'data-opts': JSON.stringify(attr) }) ); } }); }() ); ```