← All changes | blocks/alert/index.js +26 -35 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 useState = wp.element.useState;
5	5	var __ = wp.i18n.__;
		@@ -14,8 +14,16 @@
14	14	var ToggleControl = wp.components.ToggleControl;
15	15	var RangeControl = wp.components.RangeControl;
16	16	var SelectControl = wp.components.SelectControl;
17	17
	18	+ // Lazy lookup so the typography control is resolved at render time
	19	+ function getTypographyControl() {
	20	+ return (typeof window.bkbgTypographyControl !== 'undefined') ? window.bkbgTypographyControl : null;
	21	+ }
	22	+ function getTypoCssVars() {
	23	+ return (typeof window.bkbgTypoCssVars !== 'undefined') ? window.bkbgTypoCssVars : function() { return {}; };
	24	+ }
	25	+
18	26	// ── Preset palettes per alert type ──────────────────────────────────────────
19	27	var PRESETS = {
20	28	info: {
21	29	bg: '#eff6ff', border: '#3b82f6', icon: '#3b82f6',
		@@ -131,9 +139,9 @@
131	139
132	140	// ── CSS vars on wrapper ──────────────────────────────────────────────────────
133	141	function buildWrapStyle(a) {
134	142	var c = resolveColors(a);
135		- return {
	143	+ var s = {
136	144	'--bkbg-al-bg': c.bg,
137	145	'--bkbg-al-border': c.border,
138	146	'--bkbg-al-icon-color': c.icon,
139	147	'--bkbg-al-title': c.title,
		@@ -151,14 +159,18 @@
151	159	'--bkbg-al-body-size': a.bodySize + 'px',
152	160	'--bkbg-al-body-w': a.bodyWeight,
153	161	'--bkbg-al-body-lh': a.bodyLH
154	162	};
	163	+ var _tv = getTypoCssVars();
	164	+ Object.assign(s, _tv(a.titleTypo || {}, '--bkbg-al-title-'));
	165	+ Object.assign(s, _tv(a.bodyTypo || {}, '--bkbg-al-body-'));
	166	+ return s;
155	167	}
156	168
157	169	registerBlockType('blockenberg/alert', {
158	170	title: __('Alert / Notice', 'blockenberg'),
159	171	icon: 'warning',
160		- category: 'blockenberg',
	172	+ category: 'bkbg-content',
161	173	description: __('Info, success, warning or error notice with icon, title and body. Pure CSS.', 'blockenberg'),
162	174
163	175	edit: function (props) {
164	176	var a = props.attributes;
		@@ -333,10 +345,8 @@
333	345	__nextHasNoMarginBottom: true,
334	346	onChange: function (v) { setAttributes({ showTitle: v }); }
335	347	}),
336	348	a.showTitle && el(Fragment, {},
337		- el('p', { style: { margin: '4px 0 6px', fontWeight: 600, fontSize: '11px', textTransform: 'uppercase', color: '#888' } },
338		- __('Title', 'blockenberg')),
339	349	el(SelectControl, {
340	350	label: __('HTML Tag', 'blockenberg'),
341	351	value: a.titleTag,
342	352	options: titleTagOptions,
		@@ -341,39 +351,20 @@
341	351	value: a.titleTag,
342	352	options: titleTagOptions,
343	353	onChange: function (v) { setAttributes({ titleTag: v }); }
344	354	}),
345		- el(RangeControl, {
346		- label: __('Font Size (px)', 'blockenberg'),
347		- value: a.titleSize, min: 11, max: 36,
348		- onChange: function (v) { setAttributes({ titleSize: v }); }
349		- }),
350		- el(SelectControl, {
351		- label: __('Font Weight', 'blockenberg'),
352		- value: a.titleWeight,
353		- options: fontWeightOptions,
354		- onChange: function (v) { setAttributes({ titleWeight: parseInt(v, 10) }); }
355		- })
	355	+ (function () {
	356	+ var TC = getTypographyControl();
	357	+ if (!TC) return el('p', null, 'Typography control not loaded.');
	358	+ return el(TC, { label: __('Title Typography', 'blockenberg'), value: a.titleTypo || {}, onChange: function (v) { setAttributes({ titleTypo: v }); } });
	359	+ })()
356	360	),
357	361	el('hr', {}),
358		- el('p', { style: { margin: '4px 0 6px', fontWeight: 600, fontSize: '11px', textTransform: 'uppercase', color: '#888' } },
359		- __('Body Text', 'blockenberg')),
360		- el(RangeControl, {
361		- label: __('Font Size (px)', 'blockenberg'),
362		- value: a.bodySize, min: 11, max: 28,
363		- onChange: function (v) { setAttributes({ bodySize: v }); }
364		- }),
365		- el(SelectControl, {
366		- label: __('Font Weight', 'blockenberg'),
367		- value: a.bodyWeight,
368		- options: fontWeightOptions,
369		- onChange: function (v) { setAttributes({ bodyWeight: parseInt(v, 10) }); }
370		- }),
371		- el(RangeControl, {
372		- label: __('Line Height', 'blockenberg'),
373		- value: a.bodyLH, min: 1, max: 2.5, step: 0.05,
374		- onChange: function (v) { setAttributes({ bodyLH: v }); }
375		- }),
	362	+ (function () {
	363	+ var TC = getTypographyControl();
	364	+ if (!TC) return el('p', null, 'Typography control not loaded.');
	365	+ return el(TC, { label: __('Body Typography', 'blockenberg'), value: a.bodyTypo || {}, onChange: function (v) { setAttributes({ bodyTypo: v }); } });
	366	+ })(),
376	367	el('hr', {}),
377	368	el(RangeControl, {
378	369	label: __('Gap title → body (px)', 'blockenberg'),
379	370	value: a.gapTitleBody, min: 0, max: 32,
		@@ -489,5 +480,5 @@
489	480	)
490	481	);
491	482	}
492	483	});
493		-});
	484	+}() );