Skip to content

Block HTML: Add box-sizing property to prevent overflow #70014

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 1 commit into from
Apr 30, 2025
Merged

Block HTML: Add box-sizing property to prevent overflow #70014

merged 1 commit into from
Apr 30, 2025

Conversation

yogeshbhutkar
Copy link
Contributor

@yogeshbhutkar yogeshbhutkar commented Apr 29, 2025 •
edited
Loading

What?

Closes #70013

This PR addresses a bug where the colored outline (which marks selection) renders inside the block content's border for the Block HTML component.

Why?

Happens because of a missing box-sizing: border-box property.

How?

Added missing box-sizing: border-box property to Block HTML's Textarea.

Testing Instructions

  1. Create a new post.
  2. Create a paragraph and try editing it as HTML.
  3. Toggle List View and confirm that the colored outline matches the block's border.

Testing Instructions for Keyboard

Same.

Screenshots

Before After
before after

@yogeshbhutkar yogeshbhutkar marked this pull request as ready for review April 29, 2025 14:53
@yogeshbhutkar yogeshbhutkar requested a review from ellatrix as a code owner April 29, 2025 14:53
@github-actions GitHub Actions
Copy link

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: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

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

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Package] Block editor /packages/block-editor labels Apr 30, 2025
t-hamano
t-hamano approved these changes Apr 30, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

LGTM 👍

@t-hamano t-hamano merged commit 59a230c into WordPress:trunk Apr 30, 2025
68 of 70 checks passed
@github-actions github-actions bot added this to the Gutenberg 20.8 milestone Apr 30, 2025
@yogeshbhutkar yogeshbhutkar deleted the fix-70013/add-box-sizing branch April 30, 2025 13:31
chriszarate pushed a commit to chriszarate/gutenberg that referenced this pull request Jul 1, 2025
@yogeshbhutkar @t-hamano @chriszarate
Block HTML: Add box-sizing property to prevent overflow (WordPress#…
5d89579 
…70014)

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@t-hamano t-hamano t-hamano approved these changes

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

Assignees
No one assigned
Labels
[Package] Block editor /packages/block-editor [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
Gutenberg 20.8
Development

Successfully merging this pull request may close these issues.

Block HTML component may overflow
2 participants
@yogeshbhutkar @t-hamano