diff --git a/package-lock.json b/package-lock.json index 283127c1861b3f..2e5d5c96c96fe6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18834,11 +18834,6 @@ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "dev": true }, - "node_modules/autosize": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/autosize/-/autosize-4.0.2.tgz", - "integrity": "sha512-jnSyH2d+qdfPGpWlcuhGiHmqBJ6g3X+8T+iRwFrHPLVcdoGJE/x6Qicm6aDHfTsbgZKxyV8UU/YB2p4cjKDRRA==" - }, "node_modules/available-typed-arrays": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", @@ -21352,11 +21347,6 @@ "ms": "2.0.0" } }, - "node_modules/computed-style": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/computed-style/-/computed-style-0.1.4.tgz", - "integrity": "sha512-WpAmaKbMNmS3OProfHIdJiNleNJdgUrJfbKArXua28QF7+0CoZjlLn0lp6vlc+dl5r2/X9GQiQRQQU4BzSa69w==" - }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -34084,17 +34074,6 @@ "node": ">=10" } }, - "node_modules/line-height": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/line-height/-/line-height-0.3.1.tgz", - "integrity": "sha512-YExecgqPwnp5gplD2+Y8e8A5+jKpr25+DzMbFdI1/1UAr0FJrTFv4VkHLf8/6B590i1wUPJWMKKldkd/bdQ//w==", - "dependencies": { - "computed-style": "~0.1.3" - }, - "engines": { - "node": ">= 4.0.0" - } - }, "node_modules/lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", @@ -42682,20 +42661,6 @@ "node": ">=0.10.0" } }, - "node_modules/react-autosize-textarea": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/react-autosize-textarea/-/react-autosize-textarea-7.1.0.tgz", - "integrity": "sha512-BHpjCDkuOlllZn3nLazY2F8oYO1tS2jHnWhcjTWQdcKiiMU6gHLNt/fzmqMSyerR0eTdKtfSIqtSeTtghNwS+g==", - "dependencies": { - "autosize": "^4.0.2", - "line-height": "^0.3.1", - "prop-types": "^15.5.6" - }, - "peerDependencies": { - "react": "^0.14.0 || ^15.0.0 || ^16.0.0", - "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0" - } - }, "node_modules/react-colorful": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.3.1.tgz", @@ -52239,7 +52204,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" }, @@ -53315,8 +53279,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" }, "engines": { "node": ">=18.12.0", @@ -53418,7 +53381,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" }, @@ -67279,7 +67241,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" }, @@ -68003,8 +67964,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" } }, "@wordpress/edit-widgets": { @@ -68086,7 +68046,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" } @@ -70392,11 +70351,6 @@ } } }, - "autosize": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/autosize/-/autosize-4.0.2.tgz", - "integrity": "sha512-jnSyH2d+qdfPGpWlcuhGiHmqBJ6g3X+8T+iRwFrHPLVcdoGJE/x6Qicm6aDHfTsbgZKxyV8UU/YB2p4cjKDRRA==" - }, "available-typed-arrays": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", @@ -72377,11 +72331,6 @@ } } }, - "computed-style": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/computed-style/-/computed-style-0.1.4.tgz", - "integrity": "sha512-WpAmaKbMNmS3OProfHIdJiNleNJdgUrJfbKArXua28QF7+0CoZjlLn0lp6vlc+dl5r2/X9GQiQRQQU4BzSa69w==" - }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -81978,14 +81927,6 @@ "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==", "dev": true }, - "line-height": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/line-height/-/line-height-0.3.1.tgz", - "integrity": "sha512-YExecgqPwnp5gplD2+Y8e8A5+jKpr25+DzMbFdI1/1UAr0FJrTFv4VkHLf8/6B590i1wUPJWMKKldkd/bdQ//w==", - "requires": { - "computed-style": "~0.1.3" - } - }, "lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", @@ -88533,16 +88474,6 @@ "loose-envify": "^1.1.0" } }, - "react-autosize-textarea": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/react-autosize-textarea/-/react-autosize-textarea-7.1.0.tgz", - "integrity": "sha512-BHpjCDkuOlllZn3nLazY2F8oYO1tS2jHnWhcjTWQdcKiiMU6gHLNt/fzmqMSyerR0eTdKtfSIqtSeTtghNwS+g==", - "requires": { - "autosize": "^4.0.2", - "line-height": "^0.3.1", - "prop-types": "^15.5.6" - } - }, "react-colorful": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.3.1.tgz", diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json index aadf192f3016ec..4f6d105ff52214 100644 --- a/packages/block-editor/package.json +++ b/packages/block-editor/package.json @@ -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" }, diff --git a/packages/block-editor/src/components/block-list/block-html.js b/packages/block-editor/src/components/block-list/block-html.js index 5d9e7bfeb7bf77..9c49841df4218b 100644 --- a/packages/block-editor/src/components/block-list/block-html.js +++ b/packages/block-editor/src/components/block-list/block-html.js @@ -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 { @@ -68,11 +64,12 @@ function BlockHTML( { clientId } ) { }, [ block ] ); return ( - setHtml( event.target.value ) } + onChange={ setHtml } + __nextHasNoMarginBottom /> ); } diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index 17ebad06c4d78e..dc5c610a0903c0 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -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 { display: block; margin: 0; padding: $grid-unit-15; @@ -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 */ + field-sizing: content; overflow: hidden; font-family: $editor-html-font; font-size: $text-editor-font-size; diff --git a/packages/block-editor/src/components/plain-text/content.scss b/packages/block-editor/src/components/plain-text/content.scss index 0a070ac91e9e9c..444129a71530fc 100644 --- a/packages/block-editor/src/components/plain-text/content.scss +++ b/packages/block-editor/src/components/plain-text/content.scss @@ -1,11 +1,27 @@ -.block-editor-plain-text { +.block-library-html__edit .block-editor-plain-text.components-base-control { + padding: 0 !important; +} + +.block-editor-plain-text textarea { box-shadow: none; font-family: inherit; font-size: inherit; color: inherit; line-height: inherit; border: none; - padding: 0; + padding: 12px; 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 */ + field-sizing: content; + + &: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; + } + } diff --git a/packages/block-editor/src/components/plain-text/index.js b/packages/block-editor/src/components/plain-text/index.js index 4bd6681f4eb079..c624397848ed8f 100644 --- a/packages/block-editor/src/components/plain-text/index.js +++ b/packages/block-editor/src/components/plain-text/index.js @@ -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'; /** @@ -22,13 +22,13 @@ const PlainText = forwardRef( ( { __experimentalVersion, ...props }, ref ) => { return ; } - const { className, onChange, ...remainingProps } = props; + const { className, ...remainingProps } = props; return ( - onChange( event.target.value ) } + __nextHasNoMarginBottom { ...remainingProps } /> ); diff --git a/packages/block-editor/src/components/plain-text/style.native.scss b/packages/block-editor/src/components/plain-text/style.native.scss index 5a9dcaa7445b1f..5f0386f97b3810 100644 --- a/packages/block-editor/src/components/plain-text/style.native.scss +++ b/packages/block-editor/src/components/plain-text/style.native.scss @@ -1,5 +1,5 @@ -.block-editor-plain-text { +.block-editor-plain-text textarea { font-family: $default-regular-font; box-shadow: none; diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json index f034b853c2cae1..e524dea5ce5338 100644 --- a/packages/edit-site/package.json +++ b/packages/edit-site/package.json @@ -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", diff --git a/packages/editor/package.json b/packages/editor/package.json index 6c6a22cbbcd8c7..6c66e9994e81b3 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -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" }, diff --git a/packages/editor/src/components/post-text-editor/index.js b/packages/editor/src/components/post-text-editor/index.js index c3dc61a0b4a2ef..edc0a405396d30 100644 --- a/packages/editor/src/components/post-text-editor/index.js +++ b/packages/editor/src/components/post-text-editor/index.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import Textarea from 'react-autosize-textarea'; - /** * WordPress dependencies */ @@ -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 @@ -62,13 +57,13 @@ export default function PostTextEditor() { > { __( 'Type text or HTML' ) } -