← All changes | blocks/timeline/index.js +21 -58 2.0.3 → 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;
		@@ -20,8 +20,12 @@
20	20	var Popover = wp.components.Popover;
21	21	var TabPanel = wp.components.TabPanel;
22	22	var TextControl = wp.components.TextControl;
23	23
	24	+ var _tc; function getTypoControl() { return _tc || (_tc = window.bkbgTypographyControl); }
	25	+ var _tv; function getTypoCssVars() { return _tv || (_tv = window.bkbgTypoCssVars); }
	26	+ var _tvf = function (typo, prefix) { var fn = getTypoCssVars(); return fn ? fn(typo, prefix) : {}; };
	27	+
24	28	// Full Dashicons list (300+ icons)
25	29	var dashicons = [
26	30	// Admin Menu
27	31	'menu', 'admin-site', 'admin-site-alt', 'admin-site-alt2', 'admin-site-alt3', 'dashboard',
		@@ -122,9 +126,9 @@
122	126
123	127	registerBlockType('blockenberg/timeline', {
124	128	title: __('Timeline', 'blockenberg'),
125	129	icon: 'backup',
126		- category: 'blockenberg',
	130	+ category: 'bkbg-business',
127	131	description: __('Display events, milestones, or steps in a beautiful timeline layout.', 'blockenberg'),
128	132
129	133	edit: function (props) {
130	134	var attributes = props.attributes;
		@@ -347,55 +351,22 @@
347	351	),
348	352
349	353	// Typography Panel
350	354	el(PanelBody, { title: __('Typography', 'blockenberg'), initialOpen: false },
351		- el('p', { style: { marginBottom: '8px', fontWeight: '600' } }, __('Date', 'blockenberg')),
352		- el(RangeControl, {
353		- label: __('Font Size', 'blockenberg'),
354		- value: a.dateFontSize,
355		- onChange: function (v) { setAttributes({ dateFontSize: v }); },
356		- min: 10,
357		- max: 24
	355	+ getTypoControl() && el(getTypoControl(), {
	356	+ label: __('Date Typography', 'blockenberg'),
	357	+ value: a.dateTypo || {},
	358	+ onChange: function (v) { setAttributes({ dateTypo: v }); }
358	359	}),
359		- el(SelectControl, {
360		- label: __('Font Weight', 'blockenberg'),
361		- value: a.dateFontWeight,
362		- options: [
363		- { label: '400', value: '400' },
364		- { label: '500', value: '500' },
365		- { label: '600', value: '600' },
366		- { label: '700', value: '700' }
367		- ],
368		- onChange: function (v) { setAttributes({ dateFontWeight: v }); }
	360	+ getTypoControl() && el(getTypoControl(), {
	361	+ label: __('Title Typography', 'blockenberg'),
	362	+ value: a.titleTypo || {},
	363	+ onChange: function (v) { setAttributes({ titleTypo: v }); }
369	364	}),
370		- el('hr'),
371		- el('p', { style: { marginBottom: '8px', fontWeight: '600' } }, __('Title', 'blockenberg')),
372		- el(RangeControl, {
373		- label: __('Font Size', 'blockenberg'),
374		- value: a.titleFontSize,
375		- onChange: function (v) { setAttributes({ titleFontSize: v }); },
376		- min: 14,
377		- max: 36
378		- }),
379		- el(SelectControl, {
380		- label: __('Font Weight', 'blockenberg'),
381		- value: a.titleFontWeight,
382		- options: [
383		- { label: '400', value: '400' },
384		- { label: '500', value: '500' },
385		- { label: '600', value: '600' },
386		- { label: '700', value: '700' }
387		- ],
388		- onChange: function (v) { setAttributes({ titleFontWeight: v }); }
389		- }),
390		- el('hr'),
391		- el('p', { style: { marginBottom: '8px', fontWeight: '600' } }, __('Content', 'blockenberg')),
392		- el(RangeControl, {
393		- label: __('Font Size', 'blockenberg'),
394		- value: a.contentFontSize,
395		- onChange: function (v) { setAttributes({ contentFontSize: v }); },
396		- min: 12,
397		- max: 24
	365	+ getTypoControl() && el(getTypoControl(), {
	366	+ label: __('Content Typography', 'blockenberg'),
	367	+ value: a.contentTypo || {},
	368	+ onChange: function (v) { setAttributes({ contentTypo: v }); }
398	369	})
399	370	),
400	371
401	372	// Colors Panel
		@@ -459,17 +430,13 @@
459	430	'--bkbg-tl-card-border-w': a.cardBorderWidth + 'px',
460	431	'--bkbg-tl-card-radius': a.cardBorderRadius + 'px',
461	432	'--bkbg-tl-card-padding': a.cardPadding + 'px',
462	433	'--bkbg-tl-date-color': a.dateColor,
463		- '--bkbg-tl-date-size': a.dateFontSize + 'px',
464		- '--bkbg-tl-date-weight': a.dateFontWeight,
465	434	'--bkbg-tl-title-color': a.titleColor,
466		- '--bkbg-tl-title-size': a.titleFontSize + 'px',
467		- '--bkbg-tl-title-weight': a.titleFontWeight,
468	435	'--bkbg-tl-content-color': a.contentColor,
469		- '--bkbg-tl-content-size': a.contentFontSize + 'px',
470	436	'--bkbg-tl-spacing': a.itemSpacing + 'px'
471	437	};
	438	+ Object.assign(wrapStyle, _tvf(a.dateTypo, '--bktl-dt-'), _tvf(a.titleTypo, '--bktl-tt-'), _tvf(a.contentTypo, '--bktl-ct-'));
472	439
473	440	// Render full icon picker popover with tabs
474	441	function renderIconPicker(index) {
475	442	var currentIcon = parseIcon(a.items[index].icon);
		@@ -766,17 +733,13 @@
766	733	'--bkbg-tl-card-border-w': a.cardBorderWidth + 'px',
767	734	'--bkbg-tl-card-radius': a.cardBorderRadius + 'px',
768	735	'--bkbg-tl-card-padding': a.cardPadding + 'px',
769	736	'--bkbg-tl-date-color': a.dateColor,
770		- '--bkbg-tl-date-size': a.dateFontSize + 'px',
771		- '--bkbg-tl-date-weight': a.dateFontWeight,
772	737	'--bkbg-tl-title-color': a.titleColor,
773		- '--bkbg-tl-title-size': a.titleFontSize + 'px',
774		- '--bkbg-tl-title-weight': a.titleFontWeight,
775	738	'--bkbg-tl-content-color': a.contentColor,
776		- '--bkbg-tl-content-size': a.contentFontSize + 'px',
777	739	'--bkbg-tl-spacing': a.itemSpacing + 'px'
778	740	};
	741	+ Object.assign(wrapStyle, _tvf(a.dateTypo, '--bktl-dt-'), _tvf(a.titleTypo, '--bktl-tt-'), _tvf(a.contentTypo, '--bktl-ct-'));
779	742
780	743	// Helper: parse icon value (supports legacy string or new object format)
781	744	function parseSaveIcon(iconValue) {
782	745	if (!iconValue) return { type: 'dashicon', value: 'flag' };
		@@ -839,5 +802,5 @@
839	802	el('div', { className: 'bkbg-tl-items' }, itemsEl)
840	803	);
841	804	}
842	805	});
843		-});
	806	+}() );