← All changes | blocks/testimonials/index.js +38 -64 2.0.6 → 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;
		@@ -21,8 +21,11 @@
21	21	var Button = wp.components.Button;
22	22	var ToolbarGroup = wp.components.ToolbarGroup;
23	23	var ToolbarButton = wp.components.ToolbarButton;
24	24
	25	+ var _tc; function getTypoControl() { return _tc || (_tc = window.bkbgTypographyControl); }
	26	+ var _tv; function getTypoCssVars() { return _tv || (_tv = window.bkbgTypoCssVars); }
	27	+
25	28	function clone(obj) {
26	29	var out = {};
27	30	for (var k in obj) out[k] = obj[k];
28	31	return out;
		@@ -85,9 +88,9 @@
85	88
86	89	registerBlockType('blockenberg/testimonials', {
87	90	title: __('Testimonials', 'blockenberg'),
88	91	icon: 'testimonial',
89		- category: 'blockenberg',
	92	+ category: 'bkbg-marketing',
90	93	description: __('Customer testimonials with avatars, ratings, and beautiful layouts.', 'blockenberg'),
91	94
92	95	edit: function (props) {
93	96	var attributes = props.attributes;
		@@ -290,15 +293,8 @@
290	293	min: 2,
291	294	max: 14,
292	295	onChange: function (v) { setAttributes({ carouselProgressHeight: v }); }
293	296	}),
294		- a.layoutStyle === 'carousel' && a.carouselIndicators === 'fraction' && el(RangeControl, {
295		- label: __('Fraction Text Size', 'blockenberg'),
296		- value: a.carouselFractionSize,
297		- min: 10,
298		- max: 18,
299		- onChange: function (v) { setAttributes({ carouselFractionSize: v }); }
300		- }),
301	297	a.layoutStyle === 'carousel' && a.carouselIndicators !== 'none' && el(SelectControl, {
302	298	label: __('Indicators Position', 'blockenberg'),
303	299	value: a.carouselIndicatorsPosition,
304	300	options: [
		@@ -432,54 +428,37 @@
432	428	})
433	429	),
434	430
435	431	el(PanelBody, { title: __('Typography', 'blockenberg'), initialOpen: false },
436		- el(RangeControl, {
437		- label: __('Quote Size', 'blockenberg'),
438		- value: a.quoteSize,
439		- min: 12,
440		- max: 24,
441		- onChange: function (v) { setAttributes({ quoteSize: v }); }
	432	+ getTypoControl() && getTypoControl()({
	433	+ label: __('Quote', 'blockenberg'),
	434	+ value: a.quoteTypo || {},
	435	+ onChange: function (v) { setAttributes({ quoteTypo: v }); }
442	436	}),
443		- el(SelectControl, {
444		- label: __('Quote Weight', 'blockenberg'),
445		- value: a.quoteWeight,
446		- options: fontWeightOptions,
447		- onChange: function (v) { setAttributes({ quoteWeight: parseInt(v, 10) }); }
	437	+ getTypoControl() && getTypoControl()({
	438	+ label: __('Name', 'blockenberg'),
	439	+ value: a.nameTypo || {},
	440	+ onChange: function (v) { setAttributes({ nameTypo: v }); }
448	441	}),
449		- el(RangeControl, {
450		- label: __('Name Size', 'blockenberg'),
451		- value: a.nameSize,
452		- min: 12,
453		- max: 28,
454		- onChange: function (v) { setAttributes({ nameSize: v }); }
	442	+ getTypoControl() && getTypoControl()({
	443	+ label: __('Role', 'blockenberg'),
	444	+ value: a.roleTypo || {},
	445	+ onChange: function (v) { setAttributes({ roleTypo: v }); }
455	446	}),
456		- el(SelectControl, {
457		- label: __('Name Weight', 'blockenberg'),
458		- value: a.nameWeight,
459		- options: fontWeightOptions,
460		- onChange: function (v) { setAttributes({ nameWeight: parseInt(v, 10) }); }
461		- }),
462	447	el(RangeControl, {
463		- label: __('Role Size', 'blockenberg'),
464		- value: a.roleSize,
465		- min: 10,
466		- max: 20,
467		- onChange: function (v) { setAttributes({ roleSize: v }); }
468		- }),
469		- el(SelectControl, {
470		- label: __('Role Weight', 'blockenberg'),
471		- value: a.roleWeight,
472		- options: fontWeightOptions,
473		- onChange: function (v) { setAttributes({ roleWeight: parseInt(v, 10) }); }
474		- }),
475		- el(RangeControl, {
476	448	label: __('Rating Size', 'blockenberg'),
477	449	value: a.ratingSize,
478	450	min: 12,
479	451	max: 24,
480	452	onChange: function (v) { setAttributes({ ratingSize: v }); }
481		- })
	453	+ }),
	454	+ a.layoutStyle === 'carousel' && a.carouselIndicators === 'fraction' && el(RangeControl, {
	455	+ label: __('Fraction Text Size', 'blockenberg'),
	456	+ value: a.carouselFractionSize,
	457	+ min: 10,
	458	+ max: 18,
	459	+ onChange: function (v) { setAttributes({ carouselFractionSize: v }); }
	460	+ })
482	461	),
483	462
484	463	el(PanelColorSettings, {
485	464	title: __('Colors', 'blockenberg'),
		@@ -567,16 +546,10 @@
567	546	'--bkbg-ts-featured-border-color': a.featuredBorderColor,
568	547	'--bkbg-ts-quote-icon-color': a.quoteIconColor,
569	548	'--bkbg-ts-quote-icon-size': a.quoteIconSize + 'px',
570	549	'--bkbg-ts-quote-color': a.quoteColor,
571		- '--bkbg-ts-quote-size': a.quoteSize + 'px',
572		- '--bkbg-ts-quote-weight': String(a.quoteWeight),
573	550	'--bkbg-ts-name-color': a.nameColor,
574		- '--bkbg-ts-name-size': a.nameSize + 'px',
575		- '--bkbg-ts-name-weight': String(a.nameWeight),
576	551	'--bkbg-ts-role-color': a.roleColor,
577		- '--bkbg-ts-role-size': a.roleSize + 'px',
578		- '--bkbg-ts-role-weight': String(a.roleWeight),
579	552	'--bkbg-ts-company-color': a.companyColor,
580	553	'--bkbg-ts-rating-color': a.ratingColor,
581	554	'--bkbg-ts-rating-size': a.ratingSize + 'px',
582	555	'--bkbg-ts-avatar-size': a.avatarSize + 'px',
		@@ -607,12 +580,17 @@
607	580	classes.push('bkbg-ts-progress-style-' + (a.carouselProgressStyle || 'default'));
608	581	}
609	582	}
610	583
611		- var blockProps = useBlockProps({
612		- className: 'bkbg-editor-wrap ' + classes.join(' '),
613		- 'data-block-label': 'Testimonials'
614		- });
	584	+ var blockProps = (function () {
	585	+ var _tvf = getTypoCssVars();
	586	+ if (_tvf) { Object.assign(styleVars, _tvf(a.quoteTypo, '--bkts-qt-'), _tvf(a.nameTypo, '--bkts-nm-'), _tvf(a.roleTypo, '--bkts-rl-')); }
	587	+ return useBlockProps({
	588	+ className: 'bkbg-editor-wrap ' + classes.join(' '),
	589	+ style: styleVars,
	590	+ 'data-block-label': 'Testimonials'
	591	+ });
	592	+ })();
615	593
616	594	function renderAvatar(item, index) {
617	595	if (!a.showAvatar) return null;
618	596	var hasImg = item.avatar && item.avatar.url;
		@@ -917,9 +895,9 @@
917	895
918	896	return el(Fragment, {},
919	897	inspector,
920	898	blockControls,
921		- el('div', Object.assign({}, blockProps, { style: styleVars }),
	899	+ el('div', blockProps,
922	900	content,
923	901
924	902	el('div', { className: 'bkbg-editor-actions' },
925	903	el(Button, { variant: 'secondary', icon: 'plus-alt2', onClick: addItem }, __('Add Testimonial', 'blockenberg'))
		@@ -949,8 +927,9 @@
949	927	}
950	928	return stars;
951	929	}
952	930
	931	+ var _tvf = getTypoCssVars();
953	932	var styleVars = {
954	933	'--bkbg-ts-columns': String(a.columns),
955	934	'--bkbg-ts-gap': a.gap + 'px',
956	935	'--bkbg-ts-card-bg': a.cardBg,
		@@ -962,16 +941,10 @@
962	941	'--bkbg-ts-featured-border-color': a.featuredBorderColor,
963	942	'--bkbg-ts-quote-icon-color': a.quoteIconColor,
964	943	'--bkbg-ts-quote-icon-size': a.quoteIconSize + 'px',
965	944	'--bkbg-ts-quote-color': a.quoteColor,
966		- '--bkbg-ts-quote-size': a.quoteSize + 'px',
967		- '--bkbg-ts-quote-weight': String(a.quoteWeight),
968	945	'--bkbg-ts-name-color': a.nameColor,
969		- '--bkbg-ts-name-size': a.nameSize + 'px',
970		- '--bkbg-ts-name-weight': String(a.nameWeight),
971	946	'--bkbg-ts-role-color': a.roleColor,
972		- '--bkbg-ts-role-size': a.roleSize + 'px',
973		- '--bkbg-ts-role-weight': String(a.roleWeight),
974	947	'--bkbg-ts-company-color': a.companyColor,
975	948	'--bkbg-ts-rating-color': a.ratingColor,
976	949	'--bkbg-ts-rating-size': a.ratingSize + 'px',
977	950	'--bkbg-ts-avatar-size': a.avatarSize + 'px',
		@@ -985,8 +958,9 @@
985	958	'--bkbg-ts-progress-fg': a.carouselProgressFg,
986	959	'--bkbg-ts-fraction-color': a.carouselFractionColor,
987	960	'--bkbg-ts-fraction-size': (a.carouselFractionSize || 13) + 'px'
988	961	};
	962	+ if (_tvf) { Object.assign(styleVars, _tvf(a.quoteTypo, '--bkts-qt-'), _tvf(a.nameTypo, '--bkts-nm-'), _tvf(a.roleTypo, '--bkts-rl-')); }
989	963
990	964	var classes = ['bkbg-ts-wrap', 'bkbg-ts-align-' + a.textAlign];
991	965	if (a.layoutStyle === 'carousel') {
992	966	classes.push('bkbg-ts-carousel');
		@@ -1121,5 +1095,5 @@
1121	1095
1122	1096	return el('div', blockProps, content);
1123	1097	}
1124	1098	});
1125		-});
	1099	+}() );