← All changes | blocks/column/index.js +148 -21 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 useEffect = wp.element.useEffect;
4	4	var __ = wp.i18n.__;
5	5	var registerBlockType = wp.blocks.registerBlockType;
		@@ -13,8 +13,16 @@
13	13	var RangeControl = wp.components.RangeControl;
14	14	var BaseControl = wp.components.BaseControl;
15	15	var Button = wp.components.Button;
16	16
	17	+ function getTypographyControl() {
	18	+ return (window.bkbgTypographyControl || function () { return null; });
	19	+ }
	20	+ var _tv = (function () {
	21	+ var fn = window.bkbgTypoCssVars;
	22	+ return fn ? fn : function () { return {}; };
	23	+ })();
	24	+
17	25	// Custom Appender that opens sidebar inserter instead of popover
18	26	function SidebarInserterAppender(props) {
19	27	var rootClientId = props.rootClientId;
20	28
		@@ -87,8 +95,54 @@
87	95	{ label: __('L (32px)', 'blockenberg'), value: 'l' },
88	96	{ label: __('XL (48px)', 'blockenberg'), value: 'xl' }
89	97	];
90	98
	99	+ var vAlignOptions = [
	100	+ { label: __('Top', 'blockenberg'), value: 'top' },
	101	+ { label: __('Middle', 'blockenberg'), value: 'middle' },
	102	+ { label: __('Bottom', 'blockenberg'), value: 'bottom' }
	103	+ ];
	104	+
	105	+ var spacingUnitOptions = [
	106	+ { label: 'px', value: 'px' },
	107	+ { label: '%', value: '%' },
	108	+ { label: 'em', value: 'em' },
	109	+ { label: 'rem', value: 'rem' },
	110	+ { label: 'vw', value: 'vw' },
	111	+ { label: 'vh', value: 'vh' },
	112	+ { label: __('Custom', 'blockenberg'), value: 'custom' }
	113	+ ];
	114	+
	115	+ function getSpacingSideValue(attrs, type, side) {
	116	+ var cap = side.charAt(0).toUpperCase() + side.slice(1);
	117	+ var value = attrs[type + cap];
	118	+ var unit = attrs[type + cap + 'Unit'] || 'px';
	119	+ var customUnit = attrs[type + cap + 'CustomUnit'] || '';
	120	+
	121	+ if (value === undefined || value === null) return undefined;
	122	+ var raw = String(value).trim();
	123	+ if (!raw) return undefined;
	124	+
	125	+ if (unit === 'custom') {
	126	+ return customUnit ? raw + customUnit : raw;
	127	+ }
	128	+
	129	+ return raw + unit;
	130	+ }
	131	+
	132	+ function getSpacingStyles(attrs) {
	133	+ return {
	134	+ paddingTop: getSpacingSideValue(attrs, 'padding', 'top'),
	135	+ paddingRight: getSpacingSideValue(attrs, 'padding', 'right'),
	136	+ paddingBottom: getSpacingSideValue(attrs, 'padding', 'bottom'),
	137	+ paddingLeft: getSpacingSideValue(attrs, 'padding', 'left'),
	138	+ marginTop: getSpacingSideValue(attrs, 'margin', 'top'),
	139	+ marginRight: getSpacingSideValue(attrs, 'margin', 'right'),
	140	+ marginBottom: getSpacingSideValue(attrs, 'margin', 'bottom'),
	141	+ marginLeft: getSpacingSideValue(attrs, 'margin', 'left')
	142	+ };
	143	+ }
	144	+
91	145	// Column icon
92	146	var columnIcon = el('svg', {
93	147	width: 24,
94	148	height: 24,
		@@ -108,9 +162,9 @@
108	162
109	163	registerBlockType('blockenberg/column', {
110	164	title: __('Column', 'blockenberg'),
111	165	icon: columnIcon,
112		- category: 'blockenberg',
	166	+ category: 'bkbg-layout',
113	167	parent: ['blockenberg/row'],
114	168	description: __('A column container within a row for content.', 'blockenberg'),
115	169
116	170	edit: function (props) {
		@@ -195,8 +249,10 @@
195	249	uid: (existingCol.attributes && existingCol.attributes.uid) || ('col-' + Date.now() + '-' + newIndex),
196	250	paddingInner: (existingCol.attributes && existingCol.attributes.paddingInner) || 'none'
197	251	}, existingCol.innerBlocks);
198	252
	253	+ recreatedCol.attributes = Object.assign({}, existingCol.attributes || {}, recreatedCol.attributes || {});
	254	+
199	255	newColumns.push(recreatedCol);
200	256	newIndex++;
201	257	}
202	258
		@@ -228,14 +284,9 @@
228	284	newWidths[mode] = value;
229	285	setAttributes({ widths: newWidths });
230	286	}
231	287
232		- var blockProps = useBlockProps({
233		- className: [
234		- 'bkbg-column',
235		- 'bkbg-column--padding-' + a.paddingInner
236		- ].join(' '),
237		- style: {
	288	+ var colStyle = Object.assign({}, {
238	289	'--bkbg-col-desktop': (a.widths && a.widths.desktop || 50) + '%',
239	290	'--bkbg-col-tablet': (a.widths && a.widths.tablet || a.widths && a.widths.desktop || 50) + '%',
240	291	'--bkbg-col-mobile': (a.widths && a.widths.mobile || 100) + '%',
241	292	flexBasis: displayWidth + '%',
		@@ -240,12 +291,79 @@
240	291	'--bkbg-col-mobile': (a.widths && a.widths.mobile || 100) + '%',
241	292	flexBasis: displayWidth + '%',
242	293	maxWidth: displayWidth + '%',
243	294	width: displayWidth + '%'
244		- },
	295	+ }, getSpacingStyles(a));
	296	+ Object.assign(colStyle, _tv(a.typoContent, '--bkbg-col-cn'));
	297	+ var blockProps = useBlockProps({
	298	+ className: [
	299	+ 'bkbg-column',
	300	+ 'bkbg-column--padding-' + a.paddingInner,
	301	+ 'bkbg-column--valign-' + (a.vAlign || 'top')
	302	+ ].join(' '),
	303	+ style: colStyle,
245	304	'data-uid': a.uid
246	305	});
247	306
	307	+ function renderSpacingControl(type, label) {
	308	+ var sides = [
	309	+ { key: 'Top', label: __('Top', 'blockenberg') },
	310	+ { key: 'Left', label: __('Left', 'blockenberg') },
	311	+ { key: 'Bottom', label: __('Bottom', 'blockenberg') },
	312	+ { key: 'Right', label: __('Right', 'blockenberg') }
	313	+ ];
	314	+
	315	+ return el('div', { className: 'bkbg-spacing-control' },
	316	+ el('div', { className: 'bkbg-spacing-control__title' }, label),
	317	+ el('div', { className: 'bkbg-spacing-control__grid' },
	318	+ sides.map(function (side) {
	319	+ var valueKey = type + side.key;
	320	+ var unitKey = type + side.key + 'Unit';
	321	+ var customUnitKey = type + side.key + 'CustomUnit';
	322	+
	323	+ return el('div', { className: 'bkbg-spacing-control__item', key: valueKey },
	324	+ el('label', { className: 'bkbg-spacing-control__label' }, side.label),
	325	+ el('div', { className: 'bkbg-spacing-control__row' },
	326	+ el('input', {
	327	+ type: 'text',
	328	+ className: 'components-text-control__input',
	329	+ value: a[valueKey] || '',
	330	+ placeholder: '0',
	331	+ onChange: function (e) {
	332	+ var next = {};
	333	+ next[valueKey] = e.target.value;
	334	+ setAttributes(next);
	335	+ }
	336	+ }),
	337	+ el('select', {
	338	+ className: 'components-select-control__input',
	339	+ value: a[unitKey] || 'px',
	340	+ onChange: function (e) {
	341	+ var next = {};
	342	+ next[unitKey] = e.target.value;
	343	+ setAttributes(next);
	344	+ }
	345	+ }, spacingUnitOptions.map(function (opt) {
	346	+ return el('option', { key: opt.value, value: opt.value }, opt.label);
	347	+ }))
	348	+ ),
	349	+ (a[unitKey] || 'px') === 'custom' && el('input', {
	350	+ type: 'text',
	351	+ className: 'components-text-control__input bkbg-spacing-control__custom-unit',
	352	+ value: a[customUnitKey] || '',
	353	+ placeholder: __('unit, e.g. ch', 'blockenberg'),
	354	+ onChange: function (e) {
	355	+ var next = {};
	356	+ next[customUnitKey] = e.target.value;
	357	+ setAttributes(next);
	358	+ }
	359	+ })
	360	+ );
	361	+ })
	362	+ )
	363	+ );
	364	+ }
	365	+
248	366	// Inspector controls
249	367	var inspector = el(InspectorControls, {},
250	368	el(PanelBody, { title: __('Column Settings', 'blockenberg'), initialOpen: true },
251	369	el(BaseControl, {
		@@ -285,13 +403,13 @@
285	403	help: stackOnMobile ? __('Mobile width is overridden when "Stack on Mobile" is enabled in the row settings.', 'blockenberg') : ''
286	404	})
287	405	),
288	406	el(SelectControl, {
289		- label: __('Inner Padding', 'blockenberg'),
290		- value: a.paddingInner,
291		- options: paddingOptions,
292		- onChange: function (v) { setAttributes({ paddingInner: v }); }
293		- })
	407	+ label: __('Vertical Alignment', 'blockenberg'),
	408	+ value: a.vAlign || 'top',
	409	+ options: vAlignOptions,
	410	+ onChange: function (v) { setAttributes({ vAlign: v }); }
	411	+ }),
294	412	),
295	413	el(PanelBody, { title: __('Column Info', 'blockenberg'), initialOpen: false },
296	414	el('div', { className: 'bkbg-column-info' },
297	415	el('p', {},
		@@ -306,8 +424,14 @@
306	424	el('strong', {}, __('UID:', 'blockenberg')),
307	425	' ' + (a.uid || 'N/A')
308	426	)
309	427	)
	428	+ ),
	429	+ el(PanelBody, { title: __('Typography', 'blockenberg'), initialOpen: false },
	430	+ (function () {
	431	+ var TC = getTypographyControl();
	432	+ return el(TC, { label: __('Content', 'blockenberg'), value: a.typoContent || {}, onChange: function (v) { setAttributes({ typoContent: v }); } });
	433	+ })()
310	434	)
311	435	);
312	436
313	437	return el('div', blockProps,
		@@ -352,18 +476,21 @@
352	476	save: function (props) {
353	477	var a = props.attributes;
354	478	var widths = a.widths || { desktop: 50, tablet: 50, mobile: 100 };
355	479
	480	+ var saveStyle = Object.assign({}, {
	481	+ '--bkbg-col-desktop': widths.desktop + '%',
	482	+ '--bkbg-col-tablet': (widths.tablet || widths.desktop) + '%',
	483	+ '--bkbg-col-mobile': (widths.mobile || 100) + '%'
	484	+ }, getSpacingStyles(a));
	485	+ Object.assign(saveStyle, _tv(a.typoContent, '--bkbg-col-cn'));
356	486	var blockProps = useBlockProps.save({
357	487	className: [
358	488	'bkbg-column',
359		- 'bkbg-column--padding-' + a.paddingInner
	489	+ 'bkbg-column--padding-' + a.paddingInner,
	490	+ 'bkbg-column--valign-' + (a.vAlign || 'top')
360	491	].join(' '),
361		- style: {
362		- '--bkbg-col-desktop': widths.desktop + '%',
363		- '--bkbg-col-tablet': (widths.tablet || widths.desktop) + '%',
364		- '--bkbg-col-mobile': (widths.mobile || 100) + '%'
365		- },
	492	+ style: saveStyle,
366	493	'data-uid': a.uid
367	494	});
368	495
369	496	return el('div', blockProps,
		@@ -372,5 +499,5 @@
372	499	)
373	500	);
374	501	}
375	502	});
376		-});
	503	+}() );