Skip to content

Textarea Component: Add default resize vertical rule #71736

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

Jump to bottom
Merged
merged 3 commits into from
Sep 21, 2025
Merged

Textarea Component: Add default resize vertical rule #71736

merged 3 commits into from
Sep 21, 2025

Conversation

@andrewserong
Copy link
Contributor

@andrewserong andrewserong commented Sep 19, 2025

What?

Alternative to:

Add a default resize: vertical rule to the textarea component.

Why?

Currently within Gutenberg / the block editor, there's a default resize: vertical rule supplied by WordPress' forms.css file. So, for example, when we use the TextareaControl component within the Image block for alt text, the resize is restricted to vertical only:

image

However, for folks using the component outside of the block editor (or WordPress) context, this rule might not always be present. A good example is when we use DataForm's textarea control within Storybook, where the story examples for textareas can be resized horizontally, which is unexpected.

So, if we update the component to provide this default, we can ensure that consumers using textarea either via the component, or DataForm, have a more reliable default to work from.

How?

  • One-line code change to include a default resize: vertical rule with the TextareaControl component.

Testing Instructions

Screenshots or screencast

Before

2025-09-19.10.22.16.mp4

After

2025-09-19.10.22.45.mp4

@andrewserong andrewserong self-assigned this Sep 19, 2025
@andrewserong andrewserong added [Feature] UI Components Impacts or related to the UI component system [Package] Components /packages/components [Type] Enhancement A suggestion for improvement. labels Sep 19, 2025
@andrewserong andrewserong mentioned this pull request Sep 19, 2025
Closed
@andrewserong andrewserong marked this pull request as ready for review September 19, 2025 00:48
@andrewserong andrewserong requested a review from mirka September 19, 2025 00:48
@github-actions
Copy link

github-actions bot commented Sep 19, 2025 •
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: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

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

@github-actions
Copy link

github-actions bot commented Sep 19, 2025

Flaky tests detected in 215ad9d.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/17845175493
📝 Reported issues:

oandregal
oandregal approved these changes Sep 19, 2025
View reviewed changes
Copy link
Member

@oandregal oandregal left a comment

Choose a reason for hiding this comment

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

This makes sense to me. Though if we wanted to scope the change to just DataForm controls we could also configure it there.

mirka
mirka approved these changes Sep 19, 2025
View reviewed changes
Copy link
Member

@mirka mirka left a comment

Choose a reason for hiding this comment

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

Oh, so it was already set in forms.css! That makes sense, because when I first noticed it was allowing horizontal resize in the Storybook, I was wondering why this never surfaced as a problem in Gutenberg 😂

More reason to deem these component styles safe to update! Thanks.

@andrewserong
Copy link
Contributor Author

andrewserong commented Sep 21, 2025

Thanks for the reviews, folks!

@andrewserong andrewserong merged commit 141e56a into trunk Sep 21, 2025
111 of 112 checks passed
@andrewserong andrewserong deleted the fix/textarea-control-provide-default-vertical-resize branch September 21, 2025 22:46
@github-actions github-actions bot added this to the Gutenberg 21.8 milestone Sep 21, 2025
adamsilverstein pushed a commit to adamsilverstein/gutenberg that referenced this pull request Sep 22, 2025
@andrewserong @oandregal
@mirka @adamsilverstein
Textarea Component: Add default resize vertical rule (WordPress#71736)
d3714a1 
* Textarea Component: Add default resize vertical rule

* Add changelog entry

* Fix changelog entry

Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mirka mirka mirka approved these changes

@oandregal oandregal oandregal approved these changes

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

Assignees

@andrewserong andrewserong

Labels

[Feature] UI Components Impacts or related to the UI component system [Package] Components /packages/components [Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

Gutenberg 21.8

Development

Successfully merging this pull request may close these issues.

4 participants

@andrewserong @mirka @oandregal