← All changes | blocks/progress-bar/index.js +141 -78 2.0.2 → 2.0.14 View file →

		@@ -1,5 +1,5 @@
1		-wp.domReady(function () {
	1	+( function () {
2	2	var el = wp.element.createElement;
3	3	var Fragment = wp.element.Fragment;
4	4	var __ = wp.i18n.__;
5	5	var useState = wp.element.useState;
		@@ -18,19 +18,107 @@
18	18	var Popover = wp.components.Popover;
19	19	var ToolbarGroup = wp.components.ToolbarGroup;
20	20	var ToolbarButton = wp.components.ToolbarButton;
21	21
	22	+ var _tc; function getTypoControl() { return _tc || (_tc = window.bkbgTypographyControl); }
	23	+ var _tv; function getTypoCssVars() { return _tv || (_tv = window.bkbgTypoCssVars); }
	24	+
	25	+ var v1Attributes = {
	26	+ items: { type: 'array', default: [{ label: 'Web Design', percentage: 90, color: '#3b82f6' }, { label: 'Development', percentage: 85, color: '#10b981' }, { label: 'Marketing', percentage: 75, color: '#f59e0b' }] },
	27	+ layoutStyle: { type: 'string', default: 'default' },
	28	+ showPercentage: { type: 'boolean', default: true },
	29	+ showLabels: { type: 'boolean', default: true },
	30	+ animateOnScroll: { type: 'boolean', default: true },
	31	+ animationDuration: { type: 'number', default: 1000 },
	32	+ barHeight: { type: 'number', default: 20 },
	33	+ barSpacing: { type: 'number', default: 24 },
	34	+ barRadius: { type: 'number', default: 10 },
	35	+ trackColor: { type: 'string', default: '#e5e7eb' },
	36	+ labelColor: { type: 'string', default: '#1f2937' },
	37	+ percentageColor: { type: 'string', default: '#6b7280' },
	38	+ labelSize: { type: 'number', default: 16 },
	39	+ percentageSize: { type: 'number', default: 14 },
	40	+ labelWeight: { type: 'number', default: 500 },
	41	+ percentagePosition: { type: 'string', default: 'right' },
	42	+ stripes: { type: 'boolean', default: false },
	43	+ stripesAnimated: { type: 'boolean', default: false },
	44	+ glowEffect: { type: 'boolean', default: false },
	45	+ gradient: { type: 'boolean', default: false },
	46	+ gradientAngle: { type: 'number', default: 90 },
	47	+ title: { type: 'string', default: '' },
	48	+ showTitle: { type: 'boolean', default: false },
	49	+ titleColor: { type: 'string', default: '#1f2937' },
	50	+ titleSize: { type: 'number', default: 24 },
	51	+ titleFontWeight: { type: 'number', default: 600 },
	52	+ titleLineHeight: { type: 'number', default: 1.3 },
	53	+ labelLineHeight: { type: 'number', default: 1.4 }
	54	+ };
	55	+
22	56	registerBlockType('blockenberg/progress-bar', {
23	57	title: __('Progress Bar', 'blockenberg'),
24	58	icon: 'chart-bar',
25		- category: 'blockenberg',
	59	+ category: 'bkbg-content',
26	60	description: __('Display animated progress bars with customizable styles and labels.', 'blockenberg'),
27	61
	62	+ deprecated: [{
	63	+ attributes: v1Attributes,
	64	+ save: function (props) {
	65	+ var a = props.attributes;
	66	+ var wrapStyle = {
	67	+ '--bkbg-pb-bar-height': a.barHeight + 'px',
	68	+ '--bkbg-pb-bar-spacing': a.barSpacing + 'px',
	69	+ '--bkbg-pb-bar-radius': a.barRadius + 'px',
	70	+ '--bkbg-pb-track-color': a.trackColor,
	71	+ '--bkbg-pb-label-color': a.labelColor,
	72	+ '--bkbg-pb-label-size': a.labelSize + 'px',
	73	+ '--bkbg-pb-label-weight': a.labelWeight,
	74	+ '--bkbg-pb-label-line-height': a.labelLineHeight,
	75	+ '--bkbg-pb-percentage-color': a.percentageColor,
	76	+ '--bkbg-pb-percentage-size': a.percentageSize + 'px',
	77	+ '--bkbg-pb-title-color': a.titleColor,
	78	+ '--bkbg-pb-title-size': a.titleSize + 'px',
	79	+ '--bkbg-pb-title-font-weight': a.titleFontWeight,
	80	+ '--bkbg-pb-title-line-height': a.titleLineHeight,
	81	+ '--bkbg-pb-animation-duration': a.animationDuration + 'ms'
	82	+ };
	83	+ var itemsData = a.items.map(function (item) {
	84	+ return item.label + '|' + item.percentage + '|' + item.color;
	85	+ }).join(';;');
	86	+ var layoutClass = 'bkbg-pb-wrap';
	87	+ layoutClass += ' bkbg-pb-' + a.layoutStyle;
	88	+ if (a.stripes) layoutClass += ' bkbg-pb-striped';
	89	+ if (a.stripesAnimated) layoutClass += ' bkbg-pb-striped-animated';
	90	+ if (a.glowEffect) layoutClass += ' bkbg-pb-glow';
	91	+ if (a.gradient) layoutClass += ' bkbg-pb-gradient';
	92	+ var titleEl = null;
	93	+ if (a.showTitle && a.title) {
	94	+ titleEl = el('div', { className: 'bkbg-pb-title' }, a.title);
	95	+ }
	96	+ return el('div', {
	97	+ className: layoutClass,
	98	+ style: wrapStyle,
	99	+ 'data-layout': a.layoutStyle,
	100	+ 'data-items': itemsData,
	101	+ 'data-animate': a.animateOnScroll ? '1' : '0',
	102	+ 'data-show-labels': a.showLabels ? '1' : '0',
	103	+ 'data-show-percentage': a.showPercentage ? '1' : '0',
	104	+ 'data-percentage-position': a.percentagePosition,
	105	+ 'data-gradient': a.gradient ? '1' : '0',
	106	+ 'data-gradient-angle': a.gradientAngle,
	107	+ 'data-glow': a.glowEffect ? '1' : '0'
	108	+ },
	109	+ titleEl,
	110	+ el('div', { className: 'bkbg-pb-list' })
	111	+ );
	112	+ }
	113	+ }],
	114	+
28	115	edit: function (props) {
29	116	var attributes = props.attributes;
30	117	var setAttributes = props.setAttributes;
31	118	var isSelected = props.isSelected;
32	119	var a = attributes;
	120	+ var TC = getTypoControl();
33	121
34	122	// State for editing
35	123	var editingState = useState(null);
36	124	var editing = editingState[0];
		@@ -60,15 +148,8 @@
60	148	{ label: __('Above Bar', 'blockenberg'), value: 'above' },
61	149	{ label: __('Hidden', 'blockenberg'), value: 'hidden' }
62	150	];
63	151
64		- var fontWeightOptions = [
65		- { label: '400', value: 400 },
66		- { label: '500', value: 500 },
67		- { label: '600', value: 600 },
68		- { label: '700', value: 700 }
69		- ];
70		-
71	152	// Update item
72	153	function updateItem(index, key, value) {
73	154	var newItems = a.items.slice();
74	155	newItems[index] = Object.assign({}, newItems[index]);
		@@ -155,28 +236,8 @@
155	236	value: a.percentagePosition,
156	237	options: percentagePositionOptions,
157	238	onChange: function (v) { setAttributes({ percentagePosition: v }); }
158	239	}),
159		- a.showLabels && el(RangeControl, {
160		- label: __('Label Size', 'blockenberg'),
161		- value: a.labelSize,
162		- onChange: function (v) { setAttributes({ labelSize: v }); },
163		- min: 12,
164		- max: 24
165		- }),
166		- a.showLabels && el(SelectControl, {
167		- label: __('Label Weight', 'blockenberg'),
168		- value: a.labelWeight,
169		- options: fontWeightOptions,
170		- onChange: function (v) { setAttributes({ labelWeight: v }); }
171		- }),
172		- a.showPercentage && el(RangeControl, {
173		- label: __('Percentage Size', 'blockenberg'),
174		- value: a.percentageSize,
175		- onChange: function (v) { setAttributes({ percentageSize: v }); },
176		- min: 10,
177		- max: 20
178		- })
179	240	),
180	241
181	242	el(PanelBody, { title: __('Effects', 'blockenberg'), initialOpen: false },
182	243	el(ToggleControl, {
		@@ -232,16 +293,9 @@
232	293	checked: a.showTitle,
233	294	__nextHasNoMarginBottom: true,
234	295	onChange: function (v) { setAttributes({ showTitle: v }); }
235	296	}),
236		- a.showTitle && el(RangeControl, {
237		- label: __('Title Size', 'blockenberg'),
238		- value: a.titleSize,
239		- onChange: function (v) { setAttributes({ titleSize: v }); },
240		- min: 16,
241		- max: 48
242		- })
243		- ),
	297	+ ),
244	298
245	299	el(PanelBody, { title: __('Progress Items', 'blockenberg'), initialOpen: false },
246	300	a.items.map(function (item, index) {
247	301	return el('div', { key: index, className: 'bkbg-pb-item-control' },
		@@ -309,9 +363,15 @@
309	363	className: 'bkbg-pb-add-btn'
310	364	}, __('+ Add Progress Bar', 'blockenberg'))
311	365	),
312	366
313		- el(PanelColorSettings, {
	367	+
	368	+ el(PanelBody, { title: __('Typography', 'blockenberg'), initialOpen: false },
	369	+ TC && a.showTitle && el(TC, { label: __('Title', 'blockenberg'), value: a.titleTypo || {}, onChange: function(v) { setAttributes({ titleTypo: v }); } }),
	370	+ TC && a.showLabels && el(TC, { label: __('Label', 'blockenberg'), value: a.labelTypo || {}, onChange: function(v) { setAttributes({ labelTypo: v }); } }),
	371	+ TC && a.showPercentage && el(TC, { label: __('Percentage', 'blockenberg'), value: a.pctTypo || {}, onChange: function(v) { setAttributes({ pctTypo: v }); } })
	372	+ ),
	373	+el(PanelColorSettings, {
314	374	title: __('Colors', 'blockenberg'),
315	375	initialOpen: false,
316	376	colorSettings: [
317	377	{
		@@ -337,23 +397,8 @@
337	397	]
338	398	})
339	399	);
340	400
341		- // CSS variables
342		- var wrapStyle = {
343		- '--bkbg-pb-bar-height': a.barHeight + 'px',
344		- '--bkbg-pb-bar-spacing': a.barSpacing + 'px',
345		- '--bkbg-pb-bar-radius': a.barRadius + 'px',
346		- '--bkbg-pb-track-color': a.trackColor,
347		- '--bkbg-pb-label-color': a.labelColor,
348		- '--bkbg-pb-label-size': a.labelSize + 'px',
349		- '--bkbg-pb-label-weight': a.labelWeight,
350		- '--bkbg-pb-percentage-color': a.percentageColor,
351		- '--bkbg-pb-percentage-size': a.percentageSize + 'px',
352		- '--bkbg-pb-title-color': a.titleColor,
353		- '--bkbg-pb-title-size': a.titleSize + 'px'
354		- };
355		-
356	401	// Title element
357	402	var titleEl = null;
358	403	if (a.showTitle) {
359	404	if (editing === 'title') {
		@@ -539,14 +584,27 @@
539	584	layoutClass += ' bkbg-pb-' + a.layoutStyle;
540	585	if (isSelected) layoutClass += ' bkbg-block-selected';
541	586
542	587	// Block props for proper selection handling
543		- var blockProps = useBlockProps({
544		- className: layoutClass,
545		- style: wrapStyle,
546		- 'data-layout': a.layoutStyle,
547		- 'data-block-label': 'Progress Bar'
548		- });
	588	+ var blockProps = useBlockProps((function () {
	589	+ var _tv = getTypoCssVars();
	590	+ var s = {
	591	+ '--bkbg-pb-bar-height': a.barHeight + 'px',
	592	+ '--bkbg-pb-bar-spacing': a.barSpacing + 'px',
	593	+ '--bkbg-pb-bar-radius': a.barRadius + 'px',
	594	+ '--bkbg-pb-track-color': a.trackColor,
	595	+ '--bkbg-pb-label-color': a.labelColor,
	596	+ '--bkbg-pb-percentage-color': a.percentageColor,
	597	+ '--bkbg-pb-title-color': a.titleColor,
	598	+ '--bkbg-pb-animation-duration': a.animationDuration + 'ms'
	599	+ };
	600	+ if (_tv) {
	601	+ Object.assign(s, _tv(a.titleTypo || {}, '--bkbg-pb-tt-'));
	602	+ Object.assign(s, _tv(a.labelTypo || {}, '--bkbg-pb-lb-'));
	603	+ Object.assign(s, _tv(a.pctTypo || {}, '--bkbg-pb-pct-'));
	604	+ }
	605	+ return { className: layoutClass, style: s, 'data-layout': a.layoutStyle, 'data-block-label': 'Progress Bar' };
	606	+ })());
549	607
550	608	// Block toolbar
551	609	var blockToolbar = el(BlockControls, {},
552	610	el(ToolbarGroup, {},
		@@ -557,16 +615,16 @@
557	615	})
558	616	)
559	617	);
560	618
561		- // Add item button (floating)
562		- var addButton = isSelected ? el('div', { className: 'bkbg-pb-add-floating' },
	619	+ // Add item action bar (shared editor UI)
	620	+ var addButton = el('div', { className: 'bkbg-editor-actions' },
563	621	el(Button, {
564		- variant: 'primary',
	622	+ variant: 'secondary',
565	623	icon: 'plus-alt2',
566	624	onClick: addItem
567	625	}, __('Add Bar', 'blockenberg'))
568		- ) : null;
	626	+ );
569	627
570	628	return el(Fragment, {},
571	629	blockToolbar,
572	630	inspector,
		@@ -581,22 +639,27 @@
581	639	save: function (props) {
582	640	var a = props.attributes;
583	641
584	642	// CSS variables
585		- var wrapStyle = {
586		- '--bkbg-pb-bar-height': a.barHeight + 'px',
587		- '--bkbg-pb-bar-spacing': a.barSpacing + 'px',
588		- '--bkbg-pb-bar-radius': a.barRadius + 'px',
589		- '--bkbg-pb-track-color': a.trackColor,
590		- '--bkbg-pb-label-color': a.labelColor,
591		- '--bkbg-pb-label-size': a.labelSize + 'px',
592		- '--bkbg-pb-label-weight': a.labelWeight,
593		- '--bkbg-pb-percentage-color': a.percentageColor,
594		- '--bkbg-pb-percentage-size': a.percentageSize + 'px',
595		- '--bkbg-pb-title-color': a.titleColor,
596		- '--bkbg-pb-title-size': a.titleSize + 'px',
597		- '--bkbg-pb-animation-duration': a.animationDuration + 'ms'
598		- };
	643	+ var wrapStyle = (function () {
	644	+ var _tv = getTypoCssVars();
	645	+ var s = {
	646	+ '--bkbg-pb-bar-height': a.barHeight + 'px',
	647	+ '--bkbg-pb-bar-spacing': a.barSpacing + 'px',
	648	+ '--bkbg-pb-bar-radius': a.barRadius + 'px',
	649	+ '--bkbg-pb-track-color': a.trackColor,
	650	+ '--bkbg-pb-label-color': a.labelColor,
	651	+ '--bkbg-pb-percentage-color': a.percentageColor,
	652	+ '--bkbg-pb-title-color': a.titleColor,
	653	+ '--bkbg-pb-animation-duration': a.animationDuration + 'ms'
	654	+ };
	655	+ if (_tv) {
	656	+ Object.assign(s, _tv(a.titleTypo || {}, '--bkbg-pb-tt-'));
	657	+ Object.assign(s, _tv(a.labelTypo || {}, '--bkbg-pb-lb-'));
	658	+ Object.assign(s, _tv(a.pctTypo || {}, '--bkbg-pb-pct-'));
	659	+ }
	660	+ return s;
	661	+ })();
599	662
600	663	// Serialize items for frontend
601	664	var itemsData = a.items.map(function (item) {
602	665	return item.label + '|' + item.percentage + '|' + item.color;
		@@ -633,5 +696,5 @@
633	696	el('div', { className: 'bkbg-pb-list' })
634	697	);
635	698	}
636	699	});
637		-});
	700	+}() );