Skip to content

Add transform to Row for Columns block #81802

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tellthemachines merged 3 commits into from
Aug 20, 2026
Merged

Add transform to Row for Columns block #81802

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4712500
Add transform to Row for Columns block
tellthemachines Aug 19, 2026
ae84077
deal with equally sized cols
tellthemachines Aug 19, 2026
0b19e93
Allow transforming from Row to Column
tellthemachines Aug 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/block-library/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@

- Heading: Declare the heading level and paragraph keyboard shortcuts on the block's variations and transforms, rather than in a `BlockKeyboardShortcuts` component that every editor had to render. The `BlockKeyboardShortcuts` private export has been removed ([#81588](https://github.com/WordPress/gutenberg/pull/81588)).

### Enhancements

- Columns: Add transforms between Columns and the Row variation that preserve column widths through flex child sizing controls.

### Bug Fixes

- Icon: Apply only padding to the inner SVG in the editor, so margin is no longer applied twice compared to the front end ([#81292](https://github.com/WordPress/gutenberg/pull/81292)).
Expand Down
262 changes: 262 additions & 0 deletions packages/block-library/src/columns/test/transforms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,268 @@ describe( 'transforms', () => {
} );
} );

it( 'transforms Columns to the Row variation of Group with one child for each column', () => {
const block = createBlock(
'core/columns',
{
align: 'wide',
isStackedOnMobile: true,
verticalAlignment: 'center',
},
[
createBlock( 'core/column', {}, [
createBlock( 'core/paragraph', { content: 'One' } ),
] ),
createBlock( 'core/column', {}, [
createBlock( 'core/paragraph', { content: 'Two' } ),
createBlock( 'core/paragraph', { content: 'Three' } ),
] ),
createBlock( 'core/column' ),
]
);

const transformedBlocks = switchToBlockType(
block,
'core/group',
'group-row'
);

expect( transformedBlocks[ 0 ] ).toMatchObject( {
name: 'core/group',
attributes: {
align: 'wide',
layout: {
type: 'flex',
flexWrap: 'nowrap',
verticalAlignment: 'center',
},
},
} );
expect( transformedBlocks[ 0 ].attributes ).not.toHaveProperty(
'isStackedOnMobile'
);
expect( transformedBlocks[ 0 ].attributes ).not.toHaveProperty(
'verticalAlignment'
);
expect( transformedBlocks[ 0 ].innerBlocks ).toHaveLength( 3 );
expect( transformedBlocks[ 0 ].innerBlocks[ 0 ] ).toMatchObject( {
name: 'core/paragraph',
attributes: { content: 'One' },
} );
expect( transformedBlocks[ 0 ].innerBlocks[ 1 ] ).toMatchObject( {
name: 'core/group',
attributes: { layout: { type: 'constrained' } },
innerBlocks: [
expect.objectContaining( {
name: 'core/paragraph',
attributes: { content: 'Two' },
} ),
expect.objectContaining( {
name: 'core/paragraph',
attributes: { content: 'Three' },
} ),
],
} );
expect( transformedBlocks[ 0 ].innerBlocks[ 2 ] ).toMatchObject( {
name: 'core/group',
attributes: { layout: { type: 'constrained' } },
innerBlocks: [],
} );
} );

it( 'migrates Column widths to Row child sizing controls', () => {
const block = createBlock( 'core/columns', {}, [
createBlock( 'core/column', { width: '320px' }, [
createBlock( 'core/paragraph', {
content: 'One',
style: {
color: { text: '#123456' },
layout: { columnSpan: 2 },
},
} ),
] ),
createBlock( 'core/column', { width: '50%' }, [
createBlock( 'core/paragraph', { content: 'Two' } ),
] ),
createBlock( 'core/column', {}, [
createBlock( 'core/paragraph', { content: 'Three' } ),
] ),
] );

const transformedBlocks = switchToBlockType(
block,
'core/group',
'group-row'
);

expect(
transformedBlocks[ 0 ].innerBlocks.map(
( innerBlock ) => innerBlock.attributes.style.layout
)
).toEqual( [
{
columnSpan: 2,
selfStretch: 'fixed',
flexSize: '320px',
},
{ selfStretch: 'fixed', flexSize: '50%' },
{ selfStretch: 'fill' },
] );
expect(
transformedBlocks[ 0 ].innerBlocks[ 0 ].attributes.style.color
).toEqual( { text: '#123456' } );
} );

it( 'sets equal fixed widths when no Column widths are set', () => {
const block = createBlock( 'core/columns', {}, [
createBlock( 'core/column', {}, [
createBlock( 'core/paragraph', { content: 'One' } ),
] ),
createBlock( 'core/column', {}, [
createBlock( 'core/paragraph', { content: 'Two' } ),
] ),
createBlock( 'core/column', {}, [
createBlock( 'core/paragraph', { content: 'Three' } ),
] ),
] );

const transformedBlocks = switchToBlockType(
block,
'core/group',
'group-row'
);

expect(
transformedBlocks[ 0 ].innerBlocks.map(
( innerBlock ) => innerBlock.attributes.style.layout
)
).toEqual( [
{ selfStretch: 'fixed', flexSize: '33.33%' },
{ selfStretch: 'fixed', flexSize: '33.33%' },
{ selfStretch: 'fixed', flexSize: '33.33%' },
] );
} );

it( 'transforms the Row variation of Group to Columns with one Column per Row child', () => {
const block = createBlock(
'core/group',
{
align: 'wide',
layout: {
type: 'flex',
flexWrap: 'nowrap',
verticalAlignment: 'center',
},
},
[
createBlock( 'core/paragraph', { content: 'One' } ),
createBlock(
'core/group',
{ layout: { type: 'constrained' } },
[
createBlock( 'core/paragraph', { content: 'Two' } ),
createBlock( 'core/paragraph', { content: 'Three' } ),
]
),
]
);

const transformedBlocks = switchToBlockType( block, 'core/columns' );

expect( transformedBlocks[ 0 ] ).toMatchObject( {
name: 'core/columns',
attributes: {
align: 'wide',
verticalAlignment: 'center',
},
} );
expect( transformedBlocks[ 0 ].attributes ).not.toHaveProperty(
'layout'
);
expect( transformedBlocks[ 0 ].innerBlocks ).toHaveLength( 2 );
expect( transformedBlocks[ 0 ].innerBlocks[ 0 ] ).toMatchObject( {
name: 'core/column',
innerBlocks: [
{
name: 'core/paragraph',
attributes: { content: 'One' },
},
],
} );
expect( transformedBlocks[ 0 ].innerBlocks[ 1 ] ).toMatchObject( {
name: 'core/column',
innerBlocks: [
{
name: 'core/group',
attributes: { layout: { type: 'constrained' } },
innerBlocks: [
{ attributes: { content: 'Two' } },
{ attributes: { content: 'Three' } },
],
},
],
} );
} );

it( 'migrates fixed Row child sizes to Column widths', () => {

@ramonjd ramonjd Aug 19, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is working well for me. I was wondering if other styles (like background color in the example below) should also migrate?

Kapture.2026-08-20.at.09.36.16.mp4

@tellthemachines tellthemachines Aug 19, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah that currently doesn't happen for the grid transform either so I'm planning to do it in a follow-up!

@ramonjd ramonjd Aug 20, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah no worries. Follow up sounds good!

const block = createBlock(
'core/group',
{ layout: { type: 'flex', flexWrap: 'nowrap' } },
[
createBlock( 'core/paragraph', {
content: 'One',
style: {
color: { text: '#123456' },
layout: {
columnSpan: 2,
selfStretch: 'fixed',
flexSize: '320px',
},
},
} ),
createBlock( 'core/paragraph', {
content: 'Two',
style: {
layout: {
selfStretch: 'fixedNoShrink',
flexSize: '50%',
},
},
} ),
createBlock( 'core/paragraph', {
content: 'Three',
style: {
layout: {
selfStretch: 'fill',
flexSize: '25%',
},
},
} ),
]
);

const transformedBlocks = switchToBlockType( block, 'core/columns' );

expect(
transformedBlocks[ 0 ].innerBlocks.map(
( column ) => column.attributes.width
)
).toEqual( [ '320px', '50%', undefined ] );
expect(
transformedBlocks[ 0 ].innerBlocks[ 0 ].innerBlocks[ 0 ].attributes
.style
).toEqual( {
color: { text: '#123456' },
layout: { columnSpan: 2 },
} );
expect(
transformedBlocks[ 0 ].innerBlocks[ 1 ].innerBlocks[ 0 ].attributes
).not.toHaveProperty( 'style' );
expect(
transformedBlocks[ 0 ].innerBlocks[ 2 ].innerBlocks[ 0 ].attributes
).not.toHaveProperty( 'style' );
} );

it( 'transforms Grid variation of Group to Columns using the explicit grid column count', () => {
const block = createBlock(
'core/group',
Expand Down
Loading
Loading