Skip to content

Typography: Add column-width support for text columns#76450

Open
Shekhar0109 wants to merge 1 commit intoWordPress:trunkfrom
Shekhar0109:add-column-width-support
Open

Typography: Add column-width support for text columns#76450
Shekhar0109 wants to merge 1 commit intoWordPress:trunkfrom
Shekhar0109:add-column-width-support

Conversation

@Shekhar0109
Copy link
Copy Markdown
Contributor

@Shekhar0109 Shekhar0109 commented Mar 12, 2026

What?

Closes #76363

Adds support for setting a minimum column width for text columns in the Typography panel. This introduces a new control called "Column minimum width" that maps to the CSS column-width property.

Why?

Currently the text columns feature only supports the column-count CSS property through the Columns control. This forces a fixed number of columns regardless of available width, which can cause readability issues on smaller screens.

Supporting column-width allows the browser to automatically determine the number of columns based on the available container width while maintaining a minimum column width. This improves responsiveness and readability.

How?

This PR implements the feature in three areas:

1. Typography Panel UI

Added a new NumberControl labeled Column minimum width in:

packages/block-editor/src/components/global-styles/typography-panel.js

The value is stored in:

typography.textColumnMinWidth

2. Style Engine

Added a new style generator mapping:

typography.textColumnMinWidth → column-width

in:

packages/style-engine/src/styles/typography/index.ts

3. Type Definitions

Added the new property to the typography style interface:

textColumnMinWidth?: CSSProperties['columnWidth']

in:

packages/style-engine/src/types.ts

Testing Instructions

  1. Run Gutenberg locally.
  2. Open the Site Editor or Post Editor.
  3. Insert a block that supports typography settings.
  4. Open the Typography panel in the block settings.
  5. Set a value for Columns.
  6. Set a value for Column minimum width.
  7. Confirm that the generated CSS includes the column-width property and the layout updates accordingly.

Testing Instructions for Keyboard

  1. Navigate to the Typography panel using the keyboard.
  2. Use the Tab key to focus on the Column minimum width input.
  3. Change the value using keyboard input.
  4. Verify that the value updates and the column layout adjusts correctly.

@Shekhar0109 Shekhar0109 requested a review from ellatrix as a code owner March 12, 2026 14:27
@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 12, 2026

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Required label: Any label starting with [Type].
  • Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

@github-actions github-actions bot added [Package] Block editor /packages/block-editor [Package] Style Engine /packages/style-engine labels Mar 12, 2026
@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 12, 2026 •
edited
Loading

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Shekhar0109 <shekh0109@git.wordpress.org>
Co-authored-by: eric-michel <ytfeldrawkcab@git.wordpress.org>
Co-authored-by: sidhant-tomar-003 <sidhanttomar@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@Shekhar0109 Shekhar0109 mentioned this pull request Mar 12, 2026
Open
@eric-michel
Copy link
Copy Markdown

eric-michel commented Mar 13, 2026

@Shekhar0109 Thank you for addressing my issue so quickly! This would be such a great addition to the Columns feature.

I have one question: will this include a unit selector for the setting? I see that a NumberControl is being added but wasn't sure if that would be pixels, rem, etc.

@Shekhar0109
Copy link
Copy Markdown
Contributor Author

Shekhar0109 commented Mar 14, 2026

@eric-michel Thanks for the feedback!

Currently the control uses NumberControl, so it stores the value directly in typography.textColumnMinWidth and the style engine maps it to the CSS column-width property. In its current form it behaves similarly to other numeric typography controls and does not yet expose a unit selector in the UI.

That said, your point about units makes sense — supporting something like em, rem, or px (or even presets such as Small/Medium/Large) could make the feature more flexible and responsive. I'm happy to update the implementation if maintainers prefer adding unit support or presets instead of a plain numeric input.

Appreciate the suggestion and thanks again for raising the issue!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ellatrix ellatrix Awaiting requested review from ellatrix ellatrix is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

[Package] Block editor /packages/block-editor [Package] Style Engine /packages/style-engine

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Add column-width to text column support

2 participants

@Shekhar0109 @eric-michel