← All changes | blocks/separator/index.js +65 -21 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 useEffect = wp.element.useEffect;
		@@ -15,8 +15,12 @@
15	15	var ToggleControl = wp.components.ToggleControl;
16	16	var RangeControl = wp.components.RangeControl;
17	17	var SelectControl = wp.components.SelectControl;
18	18
	19	+ var _TC, _tv;
	20	+ function getTC() { return _TC || (_TC = window.bkbgTypographyControl); }
	21	+ function getTV() { return _tv || (_tv = window.bkbgTypoCssVars); }
	22	+
19	23	// ── SVG icon paths (24×24 viewBox) ──────────────────────────────────────────
20	24	var ICONS = {
21	25	star: 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z',
22	26	heart: 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z',
		@@ -237,9 +241,9 @@
237	241
238	242	registerBlockType('blockenberg/separator', {
239	243	title: __('Separator / Divider', 'blockenberg'),
240	244	icon: 'minus',
241		- category: 'blockenberg',
	245	+ category: 'bkbg-layout',
242	246	description: __('Decorative divider: line, wave, zigzag or dot pattern — optionally with an icon or text in the centre.', 'blockenberg'),
243	247
244	248	edit: function (props) {
245	249	var a = props.attributes;
		@@ -487,21 +491,8 @@
487	491	el('p', { style: { margin: '4px 0 6px', fontWeight: 600, fontSize: '11px', textTransform: 'uppercase', color: '#888' } },
488	492	__('Text Style', 'blockenberg')
489	493	),
490	494	el(RangeControl, {
491		- label: __('Font Size (px)', 'blockenberg'),
492		- value: a.textSize,
493		- min: 10,
494		- max: 48,
495		- onChange: function (v) { setAttributes({ textSize: v }); }
496		- }),
497		- el(SelectControl, {
498		- label: __('Font Weight', 'blockenberg'),
499		- value: a.textWeight,
500		- options: fontWeightOptions,
501		- onChange: function (v) { setAttributes({ textWeight: parseInt(v, 10) }); }
502		- }),
503		- el(RangeControl, {
504	495	label: __('Padding Horizontal (px)', 'blockenberg'),
505	496	value: a.textPaddingH,
506	497	min: 0,
507	498	max: 48,
		@@ -558,8 +549,13 @@
558	549	renderColorControl('textBgColor', __('Text background', 'blockenberg'), a.textBgColor,
559	550	function (c) { setAttributes({ textBgColor: c }); }
560	551	)
561	552	)
	553	+ ),
	554	+
	555	+ // ── Typography ───────────────────────────────────────────────
	556	+ el(PanelBody, { title: __('Typography', 'blockenberg'), initialOpen: false },
	557	+ el(getTC(), { label: __('Centrepiece Text', 'blockenberg'), value: a.textTypo, onChange: function (v) { setAttributes({ textTypo: v }); } })
562	558	)
563	559	);
564	560
565	561	// ── Build line segments ───────────────────────────────────────────
		@@ -599,12 +595,18 @@
599	595	segments = [leftSeg, middleEl, rightSeg];
600	596	}
601	597
602	598	// ── Edit render ───────────────────────────────────────────────────
603		- var blockProps = useBlockProps({
604		- className: 'bkbg-editor-wrap',
605		- 'data-block-label': 'Separator'
606		- });
	599	+ var blockProps = useBlockProps((function () {
	600	+ var _tvFn = getTV();
	601	+ var s = {};
	602	+ Object.assign(s, _tvFn(a.textTypo, '--bkdv-tt-'));
	603	+ return {
	604	+ className: 'bkbg-editor-wrap',
	605	+ 'data-block-label': 'Separator',
	606	+ style: s
	607	+ };
	608	+ })());
607	609
608	610	return el('div', blockProps,
609	611	inspector,
610	612	el('div', {
		@@ -618,8 +620,44 @@
618	620	)
619	621	);
620	622	},
621	623
	624	+ deprecated: [{
	625	+ attributes: {"blockId":{"type":"string","default":""},"dividerType":{"type":"string","default":"line"},"lineColor":{"type":"string","default":"#d1d5db"},"lineThickness":{"type":"number","default":1},"svgHeight":{"type":"number","default":24},"dotSpacing":{"type":"number","default":14},"marginTop":{"type":"number","default":24},"marginBottom":{"type":"number","default":24},"widthPercent":{"type":"number","default":100},"middleType":{"type":"string","default":"none"},"middlePosition":{"type":"string","default":"center"},"gapAroundMiddle":{"type":"number","default":16},"iconName":{"type":"string","default":"star"},"iconSize":{"type":"number","default":20},"iconColor":{"type":"string","default":"#9ca3af"},"iconBgColor":{"type":"string","default":"transparent"},"iconBgShape":{"type":"string","default":"none"},"iconBgSize":{"type":"number","default":36},"middleText":{"type":"string","default":"§"},"textSize":{"type":"number","default":14},"textWeight":{"type":"number","default":400},"textColor":{"type":"string","default":"#9ca3af"},"textBgColor":{"type":"string","default":"transparent"},"textPaddingH":{"type":"number","default":12},"textPaddingV":{"type":"number","default":4},"textRadius":{"type":"number","default":4}},
	626	+ save: function (props) {
	627	+ var a = props.attributes;
	628	+ var RichTextContent = wp.blockEditor.RichText.Content;
	629	+ var hasMiddle = a.middleType !== 'none';
	630	+ var segLFlex = !hasMiddle ? '1' : a.middlePosition === 'left' ? '0 0 20px' : '1';
	631	+ var segRFlex = !hasMiddle ? '0 0 0px' : a.middlePosition === 'right' ? '0 0 20px' : '1';
	632	+ var segments;
	633	+ if (!hasMiddle) {
	634	+ segments = [buildLineSeg(a, 'full', '1')];
	635	+ } else {
	636	+ var leftSeg = buildLineSeg(a, 'l', segLFlex);
	637	+ var rightSeg = buildLineSeg(a, 'r', segRFlex);
	638	+ var middleEl;
	639	+ if (a.middleType === 'icon') {
	640	+ middleEl = el('span', { key: 'middle', className: 'bkbg-div-middle' }, buildIconMiddle(a));
	641	+ } else {
	642	+ middleEl = el('span', { key: 'middle', className: 'bkbg-div-middle' },
	643	+ el(RichTextContent, { tagName: 'span', className: 'bkbg-div-mid-text', value: a.middleText })
	644	+ );
	645	+ }
	646	+ segments = [leftSeg, middleEl, rightSeg];
	647	+ }
	648	+ return el('div', {
	649	+ className: 'bkbg-div-outer',
	650	+ style: { marginTop: a.marginTop + 'px', marginBottom: a.marginBottom + 'px' }
	651	+ },
	652	+ el('div', Object.assign(
	653	+ { className: 'bkbg-div-wrap', style: buildWrapStyle(a) },
	654	+ { 'data-type': a.dividerType, 'data-middle': a.middleType }
	655	+ ), segments)
	656	+ );
	657	+ }
	658	+ }],
	659	+
622	660	// ── Save ─────────────────────────────────────────────────────────────────
623	661	save: function (props) {
624	662	var a = props.attributes;
625	663	var RichTextContent = wp.blockEditor.RichText.Content;
		@@ -656,16 +694,22 @@
656	694	}
657	695	segments = [leftSeg, middleEl, rightSeg];
658	696	}
659	697
	698	+ var wStyle = buildWrapStyle(a);
	699	+ var _tvFn = window.bkbgTypoCssVars;
	700	+ if (_tvFn) {
	701	+ Object.assign(wStyle, _tvFn(a.textTypo || {}, '--bkdv-tt-'));
	702	+ }
	703	+
660	704	return el('div', {
661	705	className: 'bkbg-div-outer',
662	706	style: { marginTop: a.marginTop + 'px', marginBottom: a.marginBottom + 'px' }
663	707	},
664	708	el('div', Object.assign(
665		- { className: 'bkbg-div-wrap', style: buildWrapStyle(a) },
	709	+ { className: 'bkbg-div-wrap', style: wStyle },
666	710	{ 'data-type': a.dividerType, 'data-middle': a.middleType }
667	711	), segments)
668	712	);
669	713	}
670	714	});
671		-});
	715	+}() );