diff --git a/includes/blocks/class-kadence-blocks-table-block.php b/includes/blocks/class-kadence-blocks-table-block.php
index fc7ea0fa0..946fbead5 100644
--- a/includes/blocks/class-kadence-blocks-table-block.php
+++ b/includes/blocks/class-kadence-blocks-table-block.php
@@ -95,13 +95,33 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
$has_fixed_columns = false;
foreach ( $attributes['columnSettings'] as $index => $settings ) {
- if ( ( empty( $settings['useAuto'] ) || !$settings['useAuto'] ) && isset( $settings['width'] ) && '' !== $settings['width'] ) {
+ if ( ( empty( $settings['useAuto'] ) || !$settings['useAuto'] ) ) {
$has_fixed_columns = true;
$width_unit = ! empty( $settings['unit'] ) ? $settings['unit'] : '%';
- $css->set_selector( '.kb-table' . esc_attr( $unique_id ) . ' td:nth-of-type(' . ( $index + 1 ) . '), ' .
- '.kb-table' . esc_attr( $unique_id ) . ' th:nth-of-type(' . ( $index + 1 ) . ')' );
- $css->add_property( 'width', $settings['width'] . $width_unit );
+ if( isset( $settings['width'] ) && '' !== $settings['width'] ) {
+ $css->set_selector('.kb-table' . esc_attr($unique_id) . ' td:nth-of-type(' . ($index + 1) . '), ' .
+ '.kb-table' . esc_attr($unique_id) . ' th:nth-of-type(' . ($index + 1) . ')');
+ $css->add_property('width', $settings['width'] . $width_unit);
+ }
+
+ if( isset( $settings['widthTablet'] ) && '' !== $settings['widthTablet'] ) {
+ if( ! empty( $settings['unitTablet'] ) ) {
+ $width_unit = $settings['unitTablet'];
+ }
+ $css->set_media_state( 'tablet' );
+ $css->add_property('width', $settings['widthTablet'] . $width_unit);
+ $css->set_media_state( 'desktop' );
+ }
+
+ if( isset( $settings['widthMobile'] ) && '' !== $settings['widthMobile'] ) {
+ if( ! empty( $settings['unitMobile'] ) ) {
+ $width_unit = $settings['unitMobile'];
+ }
+ $css->set_media_state( 'mobile' );
+ $css->add_property('width', $settings['widthMobile'] . $width_unit);
+ $css->set_media_state( 'desktop' );
+ }
}
}
diff --git a/src/blocks/table/components/backend-styles/index.js b/src/blocks/table/components/backend-styles/index.js
index b8d2373c3..9e0039e8b 100644
--- a/src/blocks/table/components/backend-styles/index.js
+++ b/src/blocks/table/components/backend-styles/index.js
@@ -66,6 +66,12 @@ export default function BackendStyles(props) {
const previewMaxHeight = getPreviewSize(previewDevice, maxHeight?.[0], maxHeight?.[1], maxHeight?.[2]);
const previewMaxWidth = getPreviewSize(previewDevice, maxWidth?.[0], maxWidth?.[1], maxWidth?.[2]);
const previewRowMinHeight = getPreviewSize(previewDevice, rowMinHeight, tabletRowMinHeight, mobileRowMinHeight);
+ const previewColumnSettingUnit = getPreviewSize(
+ previewDevice,
+ columnSettings?.[0]?.unit,
+ columnSettings?.[0]?.unitTablet,
+ columnSettings?.[0]?.unitMobile
+ );
css.set_selector(`.kb-table${uniqueID}`);
css.render_font(dataTypography ? dataTypography : [], previewDevice);
@@ -94,9 +100,9 @@ export default function BackendStyles(props) {
if (!settings?.useAuto && settings?.width) {
hasFixedColumns = true;
if (!fixedUnit) {
- fixedUnit = settings.unit;
+ fixedUnit = previewColumnSettingUnit;
}
- if (settings.unit === fixedUnit) {
+ if (previewColumnSettingUnit === fixedUnit) {
totalFixedWidth += parseFloat(settings.width);
}
}
@@ -104,9 +110,16 @@ export default function BackendStyles(props) {
// Apply widths
columnSettings.forEach((settings, index) => {
- if (!settings?.useAuto && settings?.width) {
+ if (!settings?.useAuto) {
+ const previewWidth = getPreviewSize(
+ previewDevice,
+ settings.width,
+ settings.widthTablet,
+ settings.widthMobile,
+ true
+ );
css.set_selector(`.kb-table${uniqueID} tr > *:nth-child(${index + 1})`);
- css.add_property('width', `${settings.width}${settings.unit}`);
+ css.add_property('width', `${previewWidth}${previewColumnSettingUnit}`);
} else if (settings?.useAuto && hasFixedColumns) {
// For auto columns, distribute remaining space evenly
const autoColumns = columnSettings.filter((s) => s?.useAuto).length;
diff --git a/src/blocks/table/edit.js b/src/blocks/table/edit.js
index dba76f119..1895d3339 100644
--- a/src/blocks/table/edit.js
+++ b/src/blocks/table/edit.js
@@ -36,7 +36,7 @@ import {
ResponsiveAlignControls,
} from '@kadence/components';
-import { setBlockDefaults, getUniqueId, getPostOrFseId } from '@kadence/helpers';
+import { setBlockDefaults, getUniqueId, getPostOrFseId, getPreviewSize } from '@kadence/helpers';
import BackendStyles from './components/backend-styles';
import { applyFilters } from '@wordpress/hooks';
import { plus } from '@wordpress/icons';
@@ -272,25 +272,26 @@ export function Edit(props) {
const currentSetting = getColumnSetting(index);
// If we're changing units, update all columns
- if (updates.unit && updates.unit !== currentSetting.unit) {
- const defaultWidth = updates.unit === '%' ? DEFAULT_PERCENT_WIDTH : DEFAULT_PIXEL_WIDTH;
-
+ if (updates.unit || updates.unitTablet || updates.unitMobile) {
newSettings.forEach((setting, idx) => {
if (setting) {
newSettings[idx] = {
...setting,
- unit: updates.unit,
- width: defaultWidth,
+ ...(updates.unit && { unit: updates.unit }),
+ ...(updates.unitTablet && { unitTablet: updates.unitTablet }),
+ ...(updates.unitMobile && { unitMobile: updates.unitMobile }),
};
}
});
+ // Fill in missing columns
for (let i = 0; i < columns; i++) {
if (!newSettings[i]) {
newSettings[i] = {
...getColumnDefaults(),
- unit: updates.unit,
- width: defaultWidth,
+ ...(updates.unit && { unit: updates.unit }),
+ ...(updates.unitTablet && { unitTablet: updates.unitTablet }),
+ ...(updates.unitMobile && { unitMobile: updates.unitMobile }),
};
}
}
@@ -327,6 +328,12 @@ export function Edit(props) {
headerTypography: [{ ...headerTypography[0], ...value }, ...headerTypography.slice(1)],
});
};
+ const previewColumnSettingUnit = getPreviewSize(
+ previewDevice,
+ columnSettings?.[0]?.unit,
+ columnSettings?.[0]?.unitTablet,
+ columnSettings?.[0]?.unitMobile
+ );
const StickyUpsell = (
<>
@@ -490,32 +497,69 @@ export function Edit(props) {
}}
>
-
- updateColumnSetting(index, { width: value })
+ onChange={(value) => {
+ value = value ? value : '';
+ updateColumnSetting(index, { width: value });
+ }}
+ tabletValue={
+ parseFloat(columnSetting.widthTablet) ||
+ (previewColumnSettingUnit === '%'
+ ? DEFAULT_PERCENT_WIDTH
+ : DEFAULT_PIXEL_WIDTH)
}
- min={columnSetting.unit === '%' ? 1 : 20}
- max={columnSetting.unit === '%' ? 100 : 1000}
+ onChangeTablet={(value) => {
+ value = value ? value : '';
+ updateColumnSetting(index, { widthTablet: value });
+ }}
+ mobileValue={
+ parseFloat(columnSetting.widthMobile) ||
+ (previewColumnSettingUnit === '%'
+ ? DEFAULT_PERCENT_WIDTH
+ : DEFAULT_PIXEL_WIDTH)
+ }
+ onChangeMobile={(value) => {
+ value = value ? value : '';
+ updateColumnSetting(index, { widthMobile: value });
+ }}
+ min={0}
+ max={previewColumnSettingUnit === 'px' ? 2000 : 100}
step={1}
+ reset={() =>
+ updateColumnSetting(index, {
+ width: '',
+ widthTablet: '',
+ widthMobile: '',
+ })
+ }
+ unit={
+ previewColumnSettingUnit
+ ? previewColumnSettingUnit
+ : '%'
+ }
+ allowResponsiveUnitChange={true}
+ onUnit={(value) => {
+ const device =
+ 'Desktop' === previewDevice
+ ? ''
+ : previewDevice;
+ console.log('Setting unit to: ', {
+ ['unit' + device]: value,
+ });
+ updateColumnSetting(index, {
+ ['unit' + device]: value,
+ });
+ }}
+ units={['px', '%']}
/>
-
- updateColumnSetting(index, { unit: value })
- }
- style={{ minWidth: '70px' }}
- />
)}
@@ -985,15 +1029,25 @@ export function Edit(props) {
);
}
+ const previewColumnWidth = getPreviewSize(
+ previewDevice,
+ columnSetting.width,
+ columnSetting.widthTablet,
+ columnSetting.widthMobile,
+ true
+ );
+
return (
{
setIsResizing(true);
// Ensure we have a valid initial width
- if (!columnSetting.width) {
+ if (!previewColumnWidth) {
updateColumnSetting(index, {
width:
- columnSetting.unit === '%'
+ previewColumnSettingUnit === '%'
? DEFAULT_PERCENT_WIDTH
: DEFAULT_PIXEL_WIDTH,
});
@@ -1019,19 +1073,21 @@ export function Edit(props) {
onResizeStop={(event, direction, elt, delta) => {
setIsResizing(false);
const currentWidth =
- parseFloat(columnSetting.width) ||
- (columnSetting.unit === '%' ? DEFAULT_PERCENT_WIDTH : DEFAULT_PIXEL_WIDTH);
+ parseFloat(previewColumnWidth) ||
+ (previewColumnSettingUnit === '%'
+ ? DEFAULT_PERCENT_WIDTH
+ : DEFAULT_PIXEL_WIDTH);
const newWidth =
- columnSetting.unit === '%'
+ previewColumnSettingUnit === '%'
? currentWidth + (delta.width / elt.parentElement.offsetWidth) * 100
: currentWidth + delta.width;
updateColumnSetting(index, {
width: Math.round(
Math.max(
- columnSetting.unit === '%' ? 1 : 20,
- Math.min(columnSetting.unit === '%' ? 100 : 1000, newWidth)
+ previewColumnSettingUnit === '%' ? 1 : 20,
+ Math.min(previewColumnSettingUnit === '%' ? 100 : 1000, newWidth)
)
),
});
@@ -1049,11 +1105,11 @@ export function Edit(props) {
}}
>
{`${Math.round(
- columnSetting.width ||
- (columnSetting.unit === '%'
+ previewColumnWidth ||
+ (previewColumnSettingUnit === '%'
? DEFAULT_PERCENT_WIDTH
: DEFAULT_PIXEL_WIDTH)
- )}${columnSetting.unit}`}
+ )}${previewColumnSettingUnit}`}
);