Skip to content
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

TextareaAutosize: Refactor to TextareaControl with field-sizing #64208

Draft
wants to merge 5 commits into
base: trunk
Choose a base branch
from
Draft

TextareaAutosize: Refactor to TextareaControl with field-sizing #64208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
01df91a
Editor: Refactor PostTextEditor to use TextareaControl
tyxla Aug 2, 2024
ca6b1a7
Block Editor: Refactor PlainText to use TextareaControl
tyxla Aug 2, 2024
a5df914
Block Editor: Refactor BlockHTML to use TextareaControl
tyxla Aug 2, 2024
57588a1
Dependencies: Remove react-autosize-textarea
tyxla Aug 2, 2024
3b44b14
E2E: Update selector to fix failing annotation test
tyxla Aug 2, 2024
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
73 changes: 2 additions & 71 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion packages/block-editor/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,6 @@
"postcss": "^8.4.21",
"postcss-prefixwrap": "^1.41.0",
"postcss-urlrebase": "^1.4.0",
"react-autosize-textarea": "^7.1.0",
"react-easy-crop": "^5.0.6",
"remove-accents": "^0.5.0"
},
Expand Down
11 changes: 4 additions & 7 deletions packages/block-editor/src/components/block-list/block-html.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
/**
* External dependencies
*/
import TextareaAutosize from 'react-autosize-textarea';

/**
* WordPress dependencies
*/
import { TextareaControl } from '@wordpress/components';
import { useEffect, useState } from '@wordpress/element';
import { useSelect, useDispatch } from '@wordpress/data';
import {
Expand Down Expand Up @@ -68,11 +64,12 @@ function BlockHTML( { clientId } ) {
}, [ block ] );

return (
<TextareaAutosize
<TextareaControl
className="block-editor-block-list__block-html-textarea"
value={ html }
onBlur={ onChange }
onChange={ ( event ) => setHtml( event.target.value ) }
onChange={ setHtml }
__nextHasNoMarginBottom
Copy link
Member Author

Choose a reason for hiding this comment

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

TextareaControl's onChange works directly with the value.

/>
Copy link
Member Author

Choose a reason for hiding this comment

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

This is necessary for our effort to deprecate bottom margins - see #38730.

);
}
Expand Down
4 changes: 3 additions & 1 deletion packages/block-editor/src/components/block-list/content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Copy link
Member Author

Choose a reason for hiding this comment

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

This is necessary because TextareaControl has a couple of wrappers around the textarea element.

display: block;
margin: 0;
padding: $grid-unit-15;
Expand All @@ -432,6 +432,8 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
border-radius: 2px;
box-shadow: inset 0 0 0 $border-width $gray-900;
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 */
Copy link
Member Author

Choose a reason for hiding this comment

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

Introduced in known-css-properties@0.30.0. Our stylelint currently uses v0.24.0.

field-sizing: content;
overflow: hidden;
font-family: $editor-html-font;
font-size: $text-editor-font-size;
Expand Down
20 changes: 18 additions & 2 deletions packages/block-editor/src/components/plain-text/content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,27 @@
.block-editor-plain-text {
.block-library-html__edit .block-editor-plain-text.components-base-control {
padding: 0 !important;
}
Copy link
Member Author

Choose a reason for hiding this comment

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

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.


.block-editor-plain-text textarea {
box-shadow: none;
Copy link
Member Author

Choose a reason for hiding this comment

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

This is necessary because TextareaControl has a couple of wrappers around the textarea element.

font-family: inherit;
font-size: inherit;
color: inherit;
line-height: inherit;
border: none;
padding: 0;
padding: 12px;
margin: 0;
Copy link
Member Author

Choose a reason for hiding this comment

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

For consistency with the existing design.

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 */
Copy link
Member Author

Choose a reason for hiding this comment

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

The wrapper has 250px max-height declared somewhere else, so we're adapting the textarea element to match it.

field-sizing: content;
Copy link
Member Author

Choose a reason for hiding this comment

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

Introduced in known-css-properties@0.30.0. Our stylelint currently uses v0.24.0.


&: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;
}

Comment on lines +19 to +25
Copy link
Member Author

Choose a reason for hiding this comment

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

Needed to preserve the original focused field design.

}
8 changes: 4 additions & 4 deletions packages/block-editor/src/components/plain-text/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
/**
* External dependencies
*/
import TextareaAutosize from 'react-autosize-textarea';
import clsx from 'clsx';

/**
* WordPress dependencies
*/
import { TextareaControl } from '@wordpress/components';
import { forwardRef } from '@wordpress/element';

/**
Expand All @@ -22,13 +22,13 @@ const PlainText = forwardRef( ( { __experimentalVersion, ...props }, ref ) => {
return <EditableText ref={ ref } { ...props } />;
}

const { className, onChange, ...remainingProps } = props;
const { className, ...remainingProps } = props;

return (
<TextareaAutosize
<TextareaControl
ref={ ref }
className={ clsx( 'block-editor-plain-text', className ) }
onChange={ ( event ) => onChange( event.target.value ) }
Copy link
Member Author

Choose a reason for hiding this comment

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

TextareaControl's onChange works directly with the value. No need to provide this, prop, it's passed down as part of remainingProps now.

__nextHasNoMarginBottom
Copy link
Member Author

Choose a reason for hiding this comment

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

This is necessary for our effort to deprecate bottom margins - see #38730.

{ ...remainingProps }
/>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/plain-text/style.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@

.block-editor-plain-text {
.block-editor-plain-text textarea {
Copy link
Member Author

Choose a reason for hiding this comment

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

This is necessary because TextareaControl has a couple of wrappers around the textarea element.

font-family: $default-regular-font;
box-shadow: none;

Expand Down
3 changes: 1 addition & 2 deletions packages/edit-site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,7 @@
"clsx": "^2.1.1",
"colord": "^2.9.2",
"fast-deep-equal": "^3.1.3",
"memize": "^2.1.0",
"react-autosize-textarea": "^7.1.0"
"memize": "^2.1.0"
},
"peerDependencies": {
"react": "^18.0.0",
Expand Down
1 change: 0 additions & 1 deletion packages/editor/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,6 @@
"fast-deep-equal": "^3.1.3",
"is-plain-object": "^5.0.0",
"memize": "^2.1.0",
"react-autosize-textarea": "^7.1.0",
"remove-accents": "^0.5.0",
"uuid": "^9.0.1"
},
Expand Down
14 changes: 5 additions & 9 deletions packages/editor/src/components/post-text-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
/**
* External dependencies
*/
import Textarea from 'react-autosize-textarea';

/**
* WordPress dependencies
*/
Expand All @@ -12,7 +7,7 @@ import { useMemo } from '@wordpress/element';
import { __unstableSerializeAndClean } from '@wordpress/blocks';
import { useDispatch, useSelect } from '@wordpress/data';
import { useInstanceId } from '@wordpress/compose';
import { VisuallyHidden } from '@wordpress/components';
import { TextareaControl, VisuallyHidden } from '@wordpress/components';

/**
* Internal dependencies
Expand Down Expand Up @@ -62,20 +57,21 @@ export default function PostTextEditor() {
>
{ __( 'Type text or HTML' ) }
</VisuallyHidden>
<Textarea
<TextareaControl
autoComplete="off"
dir="auto"
value={ value }
onChange={ ( event ) => {
onChange={ ( newContent ) => {
editEntityRecord( 'postType', type, id, {
Copy link
Member Author

Choose a reason for hiding this comment

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

TextareaControl's onChange works directly with the value.

content: event.target.value,
content: newContent,
blocks: undefined,
selection: undefined,
} );
} }
className="editor-post-text-editor"
id={ `post-content-${ instanceId }` }
placeholder={ __( 'Start writing with text or HTML' ) }
__nextHasNoMarginBottom
/>
Copy link
Member Author

Choose a reason for hiding this comment

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

This is necessary for our effort to deprecate bottom margins - see #38730.

</>
);
Expand Down
4 changes: 3 additions & 1 deletion packages/editor/src/components/post-text-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
textarea.editor-post-text-editor {
.editor-post-text-editor textarea {
border: $border-width solid $gray-600;
Copy link
Member Author

Choose a reason for hiding this comment

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

This is necessary because TextareaControl has a couple of wrappers around the textarea element.

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 */
field-sizing: content;
Copy link
Member Author

Choose a reason for hiding this comment

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

Introduced in known-css-properties@0.30.0. Our stylelint currently uses v0.24.0.

overflow: hidden;
font-family: $editor-html-font;
line-height: 2.4;
Expand Down
10 changes: 0 additions & 10 deletions patches/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,6 @@ Existing patches should be described and justified here.

No notes.

### `patches/react-autosize-textarea+7.1.0.patch`

This package is unmaintained. It's incompatible with some recent versions of React types in ways
that are mostly harmless.

The `onPointerEnterCapture` and `onPointerLeaveCapture` events were removed. The package is patched
to remove those events as well.

See https://github.com/facebook/react/pull/17883.

### `patches/react-devtools-core+4.28.5.patch`

No notes.
Expand Down
Loading
Loading