TextareaAutosize: Refactor to TextareaControl with field-sizing
#64208
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
tyxla
added
[Type] Enhancement
|
Size Change: -5.15 kB (-0.29%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
tyxla
commented
Aug 2, 2024
| className="block-editor-block-list__block-html-textarea" | ||
| value={ html } | ||
| onBlur={ onChange } | ||
| onChange={ ( event ) => setHtml( event.target.value ) } | ||
| onChange={ setHtml } | ||
| __nextHasNoMarginBottom |
There was a problem hiding this comment.
This is necessary for our effort to deprecate bottom margins - see #38730.
| ref={ ref } | ||
| className={ clsx( 'block-editor-plain-text', className ) } | ||
| onChange={ ( event ) => onChange( event.target.value ) } | ||
| __nextHasNoMarginBottom |
There was a problem hiding this comment.
This is necessary for our effort to deprecate bottom margins - see #38730.
| blocks: undefined, | ||
| selection: undefined, | ||
| } ); | ||
| } } | ||
| className="editor-post-text-editor" | ||
| id={ `post-content-${ instanceId }` } | ||
| placeholder={ __( 'Start writing with text or HTML' ) } | ||
| __nextHasNoMarginBottom |
There was a problem hiding this comment.
This is necessary for our effort to deprecate bottom margins - see #38730.
| border: $border-width solid $gray-600; | ||
| border-radius: 0; | ||
| display: block; | ||
| margin: 0; | ||
| width: 100%; | ||
| box-shadow: none; | ||
| resize: none; | ||
| /* stylelint-disable-next-line property-no-unknown -- TODO: Update stylelint to support a fresh list of https://github.com/known-css/known-css-properties */ |
There was a problem hiding this comment.
Introduced in known-css-properties@0.30.0. Our stylelint currently uses v0.24.0.
| margin: 0; | ||
| width: 100%; | ||
| max-height: 248px; // 250, minus the top and bottom border (1px each) | ||
| /* stylelint-disable-next-line property-no-unknown -- TODO: Update stylelint to support a fresh list of https://github.com/known-css/known-css-properties */ |
There was a problem hiding this comment.
Introduced in known-css-properties@0.30.0. Our stylelint currently uses v0.24.0.
| @@ -1,11 +1,27 @@ | |||
| .block-editor-plain-text { | |||
| .block-library-html__edit .block-editor-plain-text.components-base-control { | |||
| padding: 0 !important; | |||
There was a problem hiding this comment.
There's an unfortunate padding: 12px !important that we're trying to override here. Ideally, it wouldn't be there in the first place, but that might be work for another PR.
| margin: 0; | ||
| width: 100%; | ||
| max-height: 248px; // 250, minus the top and bottom border (1px each) |
There was a problem hiding this comment.
The wrapper has 250px max-height declared somewhere else, so we're adapting the textarea element to match it.
| box-shadow: none; | ||
| font-family: inherit; | ||
| font-size: inherit; | ||
| color: inherit; | ||
| line-height: inherit; | ||
| border: none; | ||
| padding: 0; | ||
| padding: 12px; |
There was a problem hiding this comment.
For consistency with the existing design.
Comment on lines
+19
to
+25
| &:focus { | ||
| border-color: var(--wp-admin-theme-color); | ||
| box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); | ||
|
|
||
| // Elevate the z-index on focus so the focus style is uncropped. | ||
| position: relative; | ||
| } |
There was a problem hiding this comment.
Needed to preserve the original focused field design.
| @@ -422,7 +422,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b | |||
| } | |||
| } | |||
|
|
|||
| .block-editor-block-list__block .block-editor-block-list__block-html-textarea { | |||
| .block-editor-block-list__block .block-editor-block-list__block-html-textarea textarea { | |||
There was a problem hiding this comment.
This is necessary because TextareaControl has a couple of wrappers around the textarea element.
This was referenced Aug 2, 2024
|
FWIW, it looks like it's been implemented in Webkit (WebKit/WebKit#24195) and like there is some activity on the Firefox side. Let's keep an eye on release notes and on the Google baseline recap site |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Remove the
react-autosize-textareapackage in favor of our built-inTextareaControlcomponent with the help of thefield-sizingCSS property.DO NOT MERGE - unfortunately,
field-sizingis still not supported on Firefox and Safari, so this PR is blocked for the time being. I just wanted to get it working so we have it ready for whenfield-sizingis widely supported.Why?
The
react-autosize-textareapackage is abandoned and requires additional patching. Using a CSS alternative results in lighter and less code to maintain and ship.It also causes some issues, see the related issues:
Fixes #39619
Fixes #59728
Fixes #61568
Related to #48009 and might potentially be the last one to fix it.
How?
We're using
field-sizing: content;, which does the magic of auto-resizing the textarea fields.There are a few little implementation details - see my self-review for more information.
Testing Instructions
Testing Instructions for Keyboard
None
Screenshots or screencast
HTML block
Post editor - "Code editor" view.
Edit block as HTML