Fix up rich text editor initial selection and add blocks #35286

joshuatf · 2022-10-24T22:35:53Z

All Submissions:

Have you followed the WooCommerce Contributing guideline?
Does your code follow the WordPress' coding standards?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Fixes initial block selection so the toolbar is shown on page load
Updates the rich text editor toolbar height
Adds a prop for placeholder text on initial block
Adds image and video block types

This PR is a very minor change/addition and does not require testing instructions (if checked you can ignore/remove the next section).

How to test the changes in this Pull Request:

Navigate to the new product experience at Products-> Add new (MVP)
Note that the description editor has the toolbar buttons initially shown
Check that the toolbar is 40px in height
Note that the placeholder text is initially shown (Describe this product...)
Type / and insert an image or video block
Note that you an insert images via the media library
Insert a couple of blocks and hover between blocks to see that the block inserter (+ sign and blue line) is shown between blocks

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your changes, as applicable?
Have you created a changelog file for each project being changed, ie pnpm changelog add --filter=<project>?

FOR PR REVIEWER ONLY:

I have reviewed that everything is sanitized/escaped appropriately for any SQL or XSS injection possibilities. I made sure Linting is not ignored or disabled.

github-actions · 2022-10-24T22:59:43Z

Test Results Summary

Commit SHA: 134b32e

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	232	0	0	3	0	235	0m 48s
E2E Tests	186	0	0	6	0	192	16m 12s

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.

louwie17

This tested well, and code changes look good!
Before approving, I was wondering if we could hide the Upload button on the image and video blocks for now? Given they don't work yet (just like the image library).

Also I wonder if we should increase the spacing between the blocks a little bit? The plus icon does show up, but it is a rather fine line to be hovering over. It's also very hard to notice as it appears GB added a delay, and you have be hovering for close to a second.

louwie17 · 2022-10-25T19:01:03Z

@joshuatf there also appears to be two broken tests.

louwie17 · 2022-10-25T19:14:30Z

One last issue I noticed, is that upon refresh the cursor is always active on the description field now, this feels a little odd.

joshuatf · 2022-10-25T23:16:35Z

Before approving, I was wondering if we could hide the Upload button on the image and video blocks for now? Given they don't work yet (just like the image library).

Good catch! I added an uploadMedia function. Seems to be working well on my end, but could you test to make sure?

Also I wonder if we should increase the spacing between the blocks a little bit? The plus icon does show up, but it is a rather fine line to be hovering over. It's also very hard to notice as it appears GB added a delay, and you have be hovering for close to a second.

Agreed. I'd opt for a follow-up on this if possible since that may require modifying the default block styling and open a new can of worms.

One last issue I noticed, is that upon refresh the cursor is always active on the description field now, this feels a little odd.

I posted about this somewhere, but this is an unfortunate side effect of Gutenberg's block selection. Selecting the block, which we need in order to show the toolbar, also causes Gutenberg to focus the input initially.

We'll either need to open a PR in Gutenberg to address this or come up with a hacky workaround. I have a feeling we might need to do the latter, since this will cause a cascade of required changes in Gutenberg if we change how selection/focus works.

joshuatf · 2022-10-25T23:17:44Z

packages/js/components/src/rich-text-editor/rich-text-editor.tsx

 					<ShortcutProvider>
-						<EditorWritingFlow />
+						<EditorWritingFlow
+							blocks={ blocksRef.current }


I don't love passing this down as opposed to getting it from the store, but there's a delay initially when setting blocks in the store that causes the editor to think it's empty when it's not.

louwie17

Thanks for adding the media upload function, this seemed to test well.

Agreed. I'd opt for a follow-up on this if possible since that may require modifying the default block styling and open a new can of worms.

I am fine with a follow up on the spacing. I just wasn't sure if this is something we specifically set to being narrower, given on P2 it's quite a bit bigger.

I posted about this somewhere, but this is an unfortunate side effect of Gutenberg's block selection. Selecting the block, which we need in order to show the toolbar, also causes Gutenberg to focus the input initially.
We'll either need to open a PR in Gutenberg to address this or come up with a hacky workaround. I have a feeling we might need to do the latter, since this will cause a cascade of required changes in Gutenberg if we change how selection/focus works.

That's unfortunate, I wonder if we set an auto focus to the name field if that will fix it, as that would be a relatively simple fix, although there is a high likely hood that the GB editor triggers it after.

louwie17

LGTM 🚀 Thanks for the rebase.

github-actions · 2022-10-31T21:37:09Z

Hi @joshuatf, thanks for merging this pull request. Please take a look at these follow-up tasks you may need to perform:

Add the release: add testing instructions label

joshuatf requested a review from a team October 24, 2022 22:35

joshuatf self-assigned this Oct 24, 2022

github-actions bot added focus: react admin package: @woocommerce/components issues related to @woocommerce/components plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Oct 24, 2022

louwie17 reviewed Oct 25, 2022

View reviewed changes

joshuatf commented Oct 25, 2022

View reviewed changes

louwie17 previously approved these changes Oct 26, 2022

View reviewed changes

joshuatf added 11 commits October 28, 2022 11:31

Fix double click toolbar behavior

26c7958

Fix initial block selection on editor load

9c7d4b0

Add placeholder option to RichTextEditor

262c294

Add image and video blocks

a9e81ba

Set toolbar height

bd26606

Allow inserter to be shown

25cdda6

Allow media uploads in rich text editor

527f2a4

Add changelog entries

7b8299a

Fix media upload

ec71c4a

Check for existence of selected blocks before checking length

20e3c40

Pass blocks to avoid race in detecting initially empty blocks

134b32e

joshuatf dismissed louwie17’s stale review via 134b32e October 28, 2022 18:31

joshuatf force-pushed the fix/rich-text-editor-selection branch from d6b93f5 to 134b32e Compare October 28, 2022 18:31

louwie17 approved these changes Oct 31, 2022

View reviewed changes

joshuatf merged commit e1ebabb into trunk Oct 31, 2022

joshuatf deleted the fix/rich-text-editor-selection branch October 31, 2022 21:36

github-actions bot added this to the 7.2.0 milestone Oct 31, 2022

joshuatf mentioned this pull request Nov 23, 2022

[Components] Rich text editor toolbar not initially shown #35135

Closed

2 tasks

github-actions bot mentioned this pull request Dec 15, 2022

Test WooCommerce 7.2 UVLabs/location-picker-at-checkout-for-woocommerce#57

Closed

github-actions bot mentioned this pull request Jan 25, 2023

Test WooCommerce 7.3 UVLabs/location-picker-at-checkout-for-woocommerce#59

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix up rich text editor initial selection and add blocks #35286

Fix up rich text editor initial selection and add blocks #35286

Uh oh!

joshuatf commented Oct 24, 2022

Uh oh!

github-actions bot commented Oct 24, 2022 •

edited

Loading

Uh oh!

louwie17 left a comment

Uh oh!

louwie17 commented Oct 25, 2022

Uh oh!

louwie17 commented Oct 25, 2022

Uh oh!

joshuatf commented Oct 25, 2022

Uh oh!

joshuatf Oct 25, 2022

Uh oh!

louwie17 left a comment

Uh oh!

louwie17 left a comment

Uh oh!

github-actions bot commented Oct 31, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Fix up rich text editor initial selection and add blocks #35286

Fix up rich text editor initial selection and add blocks #35286

Uh oh!

Conversation

joshuatf commented Oct 24, 2022

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

FOR PR REVIEWER ONLY:

Uh oh!

github-actions bot commented Oct 24, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test Results Summary

Uh oh!

louwie17 left a comment

Choose a reason for hiding this comment

Uh oh!

louwie17 commented Oct 25, 2022

Uh oh!

louwie17 commented Oct 25, 2022

Uh oh!

joshuatf commented Oct 25, 2022

Uh oh!

joshuatf Oct 25, 2022

Choose a reason for hiding this comment

Uh oh!

louwie17 left a comment

Choose a reason for hiding this comment

Uh oh!

louwie17 left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Oct 31, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions bot commented Oct 24, 2022 •

edited

Loading