JS: columnLayouts

File: tests/js/unit/page-builder/columnLayouts.test.js Tests: getLayoutById in admin/assets/js/src/page-builder/config/columnLayouts.js

---

What this function does

getLayoutById takes a layout template ID string and returns the layout config object for that column split — or null if the ID is not registered.

The page builder uses it in two places:

1. When a user picks a column layout for a new row — to know how many columns to create and at what widths.
2. When createRow is called from the store — it calls getLayoutById internally to seed the row with the right number of empty columns.

---

Why this needs a test

The layout IDs are also stored in the sanilwb_data post meta as the layoutId field on each row. If an ID is renamed in the config, existing saved pages would silently receive a null layout — rows would no longer render their columns correctly. The test locks down the contract between the stored ID string and the config.

---

Tests

Returns the correct columns array for a known layout

const layout = getLayoutById( 'six_six-column-template' );

expect( layout ).not.toBeNull();
expect( layout.columns ).toEqual( [ 6, 6 ] );

Why [6, 6]? The plugin uses a 12-column Bootstrap grid. A 50/50 split is two columns of width 6 each. The columns array is what createRow uses to know how many empty column objects to create.

---

Returns null for an unknown layout ID

expect( getLayoutById( 'nonexistent-layout' ) ).toBeNull();

Confirms the function fails safely rather than throwing when given a bad ID. Callers check for null before using the result.

---

Registered layout IDs

These are all the valid IDs — the ones stored in sanilwb_data and recognised by getLayoutById:

ID	Bootstrap columns
single-column-template	[12]
three_nine-column-template	[3, 9]
four_eight-column-template	[4, 8]
five_seven-column-template	[5, 7]
six_six-column-template	[6, 6]
seven_five-column-template	[7, 5]
eight_four-column-template	[8, 4]
nine_three-column-template	[9, 3]