[Product Block Editor]: introduce TextArea field block #44104

retrofox · 2024-01-25T22:29:52Z

Submission Review Guidelines:

I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
I have checked to ensure there aren't other open Pull Requests for the same update/change.
I have reviewed my code for security best practices.
Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

This PR introduces a new Textarea block. This block is used for the Summary product field. In a follow-up were going to update the Description field too.

Part of #42736
Closes

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

Go to the Product Editor
Go to the General Tab
Take a look at the summary field
Confirm it looks as expected
Edit the summary content
Confirm it works as expected. Use the alignment and format options provided by the block toolbar

Use the React Dev Tool to inspect the block instance

Open the components tab
search instances by TextAreaBlockEdit, which is the react component used to represent the block in the editor dashboard
Confirm the props and attributes are okay

Changelog entry

Automatically create a changelog entry from the details below.

Significance

Patch
Minor
Major

Type

Fix - Fixes an existing bug
Add - Adds functionality
Update - Update existing functionality
Dev - Development related task
Tweak - A minor adjustment to the codebase
Performance - Address performance issues
Enhancement - Improvement to existing functionality

Message

Comment

github-actions · 2024-01-25T22:30:11Z

Hi , @woocommerce/mothra

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

github-actions · 2024-01-25T22:52:31Z

Test Results Summary

Commit SHA: 0e90a85

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 37s
E2E Tests	289	0	1	9	0	299	12m 26s

⚠️ Warning

Please address the following issues prior to merging this pull request:

FAILED/BROKEN TESTS. There were failed and/or broken API and E2E tests.

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

mattsherman

Nice work on this so far, @retrofox !

Is there a way to get the output to be plain text instead of HTML if no formatting is allowed? There are still <br> tags.

The toolbar doesn't hide if the focus goes outside of the editor:

Screen.Recording.2024-01-26.at.14.01.24.mov

packages/js/product-editor/src/blocks/generic/text-area/block.json

mattsherman · 2024-01-26T19:15:17Z

packages/js/product-editor/src/blocks/generic/text-area/block.json

+	"description": "A text-area field for use in the product editor.",
+	"keywords": [ "products", "description" ],
+	"textdomain": "default",
+	"attributes": {


placeholder isn't listed here, though it is supported.

We should also support (same as woocommerce/product-text-field):

tooltip

required

disabled

I've added the attributes and types, but probably we need to keep improving these attributes. Can we do it in a follow-up?

I'm cool with a follow-up, but we shouldn't consider the (sorely missing any details 😞) issue closed/fixed until they are added.

I have updated the pull request so that it doesnt close the issue when merged

packages/js/product-editor/src/blocks/generic/text-area/edit.tsx

mattsherman · 2024-01-26T19:17:51Z

packages/js/product-editor/src/blocks/generic/text-area/edit.tsx

+				<AligmentToolbarButton
+					align={ align }
+					setAlignment={ setAlignment }
+				/>


We should have a way to turn off the alignment toolbar, as for a plain text textarea, it isn't necessary.

We need to define this functionality a little bit. It isn't clear to me when/how the block should support rich text or plain text areas.

Is it the same block that changes its behavior depending on a parameter? (block attribute).

Could this block support both modes? It could be switchable from the block toolbar.

Or, should we create two different blocks? (text-area and rich-text, for instance)

Could we address this issue in a follow-up, Matt? I want to avoid increasing the PR size.

I'm good if this is addressed in a follow-up. I think we should allow block attributes that allow us to pick between using a plain textarea vs one with rich text.

I agree that it should be switchable between rich text and plain text via a block attribute. I don't think, for our purposes, it makes sense to have it be switchable from the block toolbar.

packages/js/product-editor/src/blocks/generic/text-area/edit.tsx

retrofox · 2024-01-26T20:29:18Z

The toolbar doesn't hide if the focus goes outside of the editor:

Can we address this issue in a follow-up? It isn't part of the implementation. Although it's possible to handle it from the Rich Text instance from the onBlur event I think that's a workaround.

retrofox · 2024-01-29T12:35:29Z

We should address #43128 form here. (PR reference #43186)

joshuatf · 2024-01-29T17:29:11Z

packages/js/product-editor/src/blocks/generic/text-area/edit.tsx

+				<AligmentToolbarButton
+					align={ align }
+					setAlignment={ setAlignment }
+				/>


I'm good if this is addressed in a follow-up. I think we should allow block attributes that allow us to pick between using a plain textarea vs one with rich text.

packages/js/product-editor/src/blocks/generic/text-area/block.json

mattsherman · 2024-01-29T20:03:28Z

We should address #43128 form here. PR created https://github.com/n2erjo00

I don't think that is the correct link. I also don't see why that should be addressed in this PR.

retrofox · 2024-01-29T20:11:02Z

We should address #43128 form here. PR created https://github.com/n2erjo00

I don't think that is the correct link. I also don't see why that should be addressed in this PR.

updated

mattsherman

Nice work. I'm okay with the remaining issues being tackled in follow up PR(s).

mattsherman · 2024-01-29T20:06:20Z

packages/js/product-editor/src/blocks/generic/text-area/editor.scss

+.wp-block-woocommerce-product-text-area-field {	
+	.rich-text {
+		width: 100%;
+		min-height: calc($gap-larger * 3);


Seems odd to base the min-height on the gap instead of something related to the font size.

How do you think we should define the minimum height? Maybe we can use a different var?

mattsherman · 2024-01-29T20:07:21Z

packages/js/product-editor/src/blocks/generic/text-area/editor.scss

+		min-height: calc($gap-larger * 3);
+		background-color: $white;
+		box-sizing: border-box;
+		border: 1px solid #757575;


Hardcoded color. It's a shame we don't have a variable for this.

Creating a new var, at least for now, sounds good for you?

ad88986 Here we are using the $gray-700 var.

retrofox requested a review from a team January 25, 2024 22:29

retrofox self-assigned this Jan 25, 2024

github-actions bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Jan 25, 2024

retrofox force-pushed the update/introduce-text-area-block branch from 2a73a8a to d49fd8c Compare January 26, 2024 16:56

retrofox added the team: Mothra label Jan 26, 2024

mattsherman requested changes Jan 26, 2024

View reviewed changes

retrofox added 15 commits January 29, 2024 08:55

introduce TextAreaBlockEdit block

b58159e

reglister text area block

979d331

use text-area block in the summary block

0b68513

changelog

ada5c04

changelog

3ea761f

fix whitespace lint issue

0b5c263

remove unused types

054e8f1

intrduce placehholder attribute

d06de61

property is the only required attribute

2ceb876

tidy block attributes

d58f79b

use useProductEntityProp()

b6eb079

define fallback value

0d9e3da

remove unused CSS class

c706812

organize attrs

1f5c7c5

do not implement tooltip yet

f1aef26

retrofox force-pushed the update/introduce-text-area-block branch from edf807a to f1aef26 Compare January 29, 2024 11:55

fix eslint error

92837fc

This was referenced Jan 29, 2024

[Product Block Editor]: use Textarea block in the variation description field #44151

Merged

Fix/optional label in variation details #43186

Open

joshuatf reviewed Jan 29, 2024

View reviewed changes

update text-area keywords

0e90a85

mattsherman approved these changes Jan 29, 2024

View reviewed changes

retrofox merged commit 74d0b39 into trunk Jan 29, 2024
41 of 43 checks passed

retrofox deleted the update/introduce-text-area-block branch January 29, 2024 20:14

github-actions bot added this to the 8.7.0 milestone Jan 29, 2024

github-actions bot added the needs: analysis Indicates if the PR requires a PR testing scrub session. label Jan 29, 2024

retrofox mentioned this pull request Jan 29, 2024

Initial approach #44164

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Product Block Editor]: introduce TextArea field block #44104

[Product Block Editor]: introduce TextArea field block #44104

retrofox commented Jan 25, 2024 •

edited

github-actions bot commented Jan 25, 2024

github-actions bot commented Jan 25, 2024 •

edited

mattsherman left a comment

mattsherman Jan 26, 2024

retrofox Jan 26, 2024

mattsherman Jan 29, 2024

retrofox Jan 29, 2024

mattsherman Jan 26, 2024

retrofox Jan 26, 2024

retrofox Jan 29, 2024

joshuatf Jan 29, 2024

mattsherman Jan 29, 2024

retrofox Jan 30, 2024

retrofox commented Jan 26, 2024

retrofox commented Jan 29, 2024 •

edited

joshuatf Jan 29, 2024

mattsherman commented Jan 29, 2024

retrofox commented Jan 29, 2024

mattsherman left a comment

mattsherman Jan 29, 2024

retrofox Jan 29, 2024

mattsherman Jan 29, 2024

retrofox Jan 29, 2024

retrofox Jan 29, 2024

[Product Block Editor]: introduce TextArea field block #44104

[Product Block Editor]: introduce TextArea field block #44104

Conversation

retrofox commented Jan 25, 2024 • edited

Submission Review Guidelines:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Use the React Dev Tool to inspect the block instance

Changelog entry

Significance

Type

Message

Comment

github-actions bot commented Jan 25, 2024

github-actions bot commented Jan 25, 2024 • edited

Test Results Summary

⚠️ Warning

mattsherman left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

retrofox commented Jan 26, 2024

retrofox commented Jan 29, 2024 • edited

Choose a reason for hiding this comment

mattsherman commented Jan 29, 2024

retrofox commented Jan 29, 2024

mattsherman left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

retrofox commented Jan 25, 2024 •

edited

github-actions bot commented Jan 25, 2024 •

edited

retrofox commented Jan 29, 2024 •

edited