Skip to content

Row Layout left-third (and other asymmetric layouts) render as 50/50 in 3.7.0 #983

Description

@mistercohen1

Summary

After updating Kadence Blocks from 3.6.7 to 3.7.0, Row Layout blocks with colLayout: "left-third" (and likely other asymmetric presets) no longer render with their intended 1fr 2fr (or equivalent) grid-template-columns. Instead, they render as repeat(2, minmax(0, 1fr)) (50/50 equal columns).

The block's stored attributes still contain colLayout: "left-third" — Gutenberg shows this correctly. But the dynamic CSS generated by the plugin (output in <style id="kadence_blocks_css-inline-css">) ignores this value and falls back to equal-width columns.

This affects all rows where the asymmetric layout was set via the preset selector (without explicitly defining firstColumnWidth).

Environment

  • WordPress: 6.9.4
  • Kadence Blocks: 3.7.0 (regressed from 3.6.7)
  • Kadence Theme: 1.4.5
  • Kadence Theme Kit Pro: 1.1.19
  • Kadence Blocks PRO Extension: 2.8.14
  • Other plugins: Polylang Free 3.8.3, Rank Math Free, WP Rocket 3.21.2
  • PHP 7.4+, Apache/Linux
  • Browser tested: Chrome 146

Affected layouts

  • left-thirdconfirmed broken (renders as repeat(2, 1fr) instead of 1fr 2fr)
  • right-third, left-half, right-half, left-golden, right-golden — not tested, suspected affected

Layouts that work correctly in 3.7.0:

  • equal 2/3/4-col → repeat(N, minmax(0, 1fr))
  • Mobile single-col → minmax(0, 1fr)

Steps to reproduce

  1. Install Kadence Blocks 3.7.0
  2. Create a Page, insert a Row Layout with 2 columns
  3. Select preset "Left Third" (or any asymmetric preset)
  4. Do NOT manually drag the column-width slider — leave at preset default
  5. Save and view frontend
  6. Inspect: wrapper has class kt-row-layout-left-third but grid-template-columns: repeat(2, minmax(0, 1fr))

Expected: grid-template-columns: 1fr 2fr (or equivalent like 33fr 67fr)
Actual: repeat(2, minmax(0, 1fr)) — equal 50/50 columns

Empirical evidence

Block attributes (read via wp.data.select('core/block-editor').getBlockAttributes())

uniqueID: "632_tlv_0"
colLayout: "left-third"
columns: 2
kbVersion: 2
mobileLayout: "row"
tabletLayout: "inherit"
firstColumnWidth: undefined

Note: firstColumnWidth is undefined. In 3.6.7 the plugin derived column width from colLayout when this was empty. In 3.7.0 that derivation appears to be missing.

Rendered HTML

<div class="wp-block-kadence-rowlayout kb-row-layout-wrap kb-row-layout-id632_tlv_0 alignnone kt-row-has-bg">
  <div class="kt-row-column-wrap kt-has-2-columns kt-row-layout-left-third kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top">
    ...
  </div>
</div>

Class kt-row-layout-left-third is correctly applied.

Generated CSS in <style id="kadence_blocks_css-inline-css">

.kb-row-layout-id632_tlv_0 > .kt-row-column-wrap {
  padding-top: var( --global-kb-row-default-top, var(--global-kb-spacing-sm, 1.5rem) );
  padding-bottom: var( --global-kb-row-default-bottom, var(--global-kb-spacing-sm, 1.5rem) );
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* ← Should be 1fr 2fr */
}

Computed style on frontend (Chrome 146)

display: grid;
grid-template-columns: 427px 427px;  /* 50/50 from repeat(2, 1fr) */
gap: 32px;

Aggregate analysis on affected page

38 grid-template-columns declarations in <style id="kadence_blocks_css-inline-css">:

  • minmax(0, 1fr) → 26 (mobile single-col) ✓
  • repeat(2, minmax(0, 1fr)) → 12 (intended for equal 2-col, but also generated for asymmetric presets) ❌
  • Zero occurrences of 1fr 2fr, 2fr 1fr, or any other asymmetric value

The affected page has 10 Row Layout blocks with colLayout: "left-third" — all 10 generate repeat(2, 1fr).

Suspected root cause (for dev team to validate)

The dynamic CSS generator in 3.7.0 appears to read firstColumnWidth directly to build grid-template-columns. When that attribute is undefined/empty, it falls back to repeat(columns, 1fr).

In 3.6.7 the generator had a fallback that derived from colLayout preset ("left-third" → 33, "right-third" → 67, "left-half" → 50, etc.). That derivation seems to be missing or broken in the 3.7.0 CSS refactor.

Workaround (for users, not a fix)

Open each affected Row Layout in the editor, drag the column-width slider 1px and back, then save. This forces firstColumnWidth to be written to attributes explicitly, which the 3.7.0 generator can then use.

Not viable for sites with many rows already built with the preset.

Impact severity

Visual regression on every site that used asymmetric layout presets without explicitly setting column widths. Timeline layouts, sidebars, image-text splits, and many other common patterns silently collapse to equal columns after the update.

No console errors, no broken functionality — purely visual. Users may not notice immediately, especially without screenshot comparison.

Site for verification

  • URL where bug is reproducible: https://tresal.com/empresa/
  • Block uniqueIDs affected: 632_tlv_0 through 632_tlv_7, 632_tlv_outer, 632_2832cd-48, 632_5da369-4a (10 blocks on that page alone)
  • WP admin access available on request for debugging
  • Kadence Plus license active

Request

  1. Confirm whether this is a known regression in the 3.7.0 CSS refactor
  2. Patch in 3.7.1 if confirmed
  3. In the meantime, recommended path: rollback to 3.6.7, wait for patch, or bulk-update firstColumnWidth via wp-cli?

Thanks for the team's responsiveness.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions