Add a blank space between the emoji and the message within a notice popup #35698

mdperez86 · 2022-11-23T19:22:46Z

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:

What happened here was that anytime we want to use an emoji as part of a text message inside of a notice the following happends:
We expect the message to looks like 🎉 Product successfully updated.
but that string is converted to:

<>
  <image src="..." class="emoji" />
  "Product successfully updated."
</>

so any blank space between the image and the string literal is trimmed, resulting in 🎉Product successfully updated..

To avoid this behaviour my suggestions here is to add an invisible charater + the blank space at the begining of the string literal 🎉[U+200E] Product successfully updated. to prevent the trimming process. So the rendered result should looks like:

<>
  <image src="..." class="emoji" />
  "[U+200E] Product successfully updated."
</>

Note: [U+200E] is an invisible unicode character and not a blank space.

Closes #35541
Closes #35716

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:

Go to Products -> Add New (MVP) page
Create, update, save as draft a product and a notice should be shown.
If the notice message contains an emoji, it should has a visible blank space between the emoji and the message.
Like: 🎉 Product successfully updated.

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 --filter=<project> changelog add?

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.

mdperez86 · 2022-11-23T19:28:25Z

plugins/woocommerce-admin/client/products/use-product-helper.ts

-								),
-							}
-						);
+						createNotice( 'success', `🎉‎ ${ noticeContent }`, {


Github does not show the unicode character here which is ‎[U+200E] and should be represented like 🎉‎[U+200E] ${ noticeContent }.

mdperez86 · 2022-11-23T19:28:50Z

plugins/woocommerce-admin/client/products/use-product-helper.ts

-								),
-							}
-						);
+						createNotice( 'success', `🎉‎ ${ noticeContent }`, {


Same as previous comment

@mdperez86 there is a related issue that removes the duplicated copy Product published. View in store.. Could we handle it here? ( Remove the View in store.).

Sure, so we can close this one

mdperez86 · 2022-11-23T19:29:11Z

plugins/woocommerce-admin/client/products/use-product-helper.ts

+					'Successfully moved product to Trash.',
+					'woocommerce'
 				);
+				createNotice( 'success', `🎉‎ ${ noticeContent }` );


Same as previous comment

github-actions · 2022-11-23T19:45:46Z

Test Results Summary

Commit SHA: d8eeed3

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 50s
E2E Tests	186	0	0	6	0	192	14m 17s

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.

octaedro · 2022-11-24T17:28:19Z

plugins/woocommerce-admin/client/products/use-product-helper.ts

 				status,
 			} ).then(
 				( newProduct ) => {
+					const noticeContent =


Nitpick, if we move this inside the conditional (if ( ! skipNotice ) {) we will set the const noticeContent knowing that we will use it, otherwise, we could set it without using it later.

Right!!! thanks

octaedro

Good job @mdperez86, this is testing well and code looks good. I just left a small suggestion, not a blocker at all, so I'll approve this PR.

AnnaMag

Thanks @mdperez86. I left a small request from a related issue (copy removal).

LGTM

AnnaMag · 2022-11-24T18:46:42Z

plugins/woocommerce-admin/client/products/use-product-helper.ts

-								),
-							}
-						);
+						createNotice( 'success', `🎉‎ ${ noticeContent }`, {


@mdperez86 there is a related issue that removes the duplicated copy Product published. View in store.. Could we handle it here? ( Remove the View in store.).

…opup

…duct

AnnaMag

LGTM. Thanks!

mdperez86 added focus: product management labels Nov 23, 2022

mdperez86 requested review from joshuatf, mattsherman and octaedro November 23, 2022 19:22

mdperez86 self-assigned this Nov 23, 2022

github-actions bot added focus: react admin plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Nov 23, 2022

mdperez86 commented Nov 23, 2022

View reviewed changes

mdperez86 force-pushed the fix/35541 branch from 7bb2389 to 77e3931 Compare November 23, 2022 20:58

octaedro reviewed Nov 24, 2022

View reviewed changes

octaedro previously approved these changes Nov 24, 2022

View reviewed changes

AnnaMag previously approved these changes Nov 24, 2022

View reviewed changes

mdperez86 dismissed stale reviews from AnnaMag and octaedro via 7655641 November 24, 2022 19:19

mdperez86 added 2 commits November 24, 2022 16:20

Add a blank space between the emoji and the message within a notice p…

7c50a59

…opup

Apply comment suggestions

f874f16

mdperez86 force-pushed the fix/35541 branch from 7655641 to f874f16 Compare November 24, 2022 19:20

Remove duplicated text in the snackbar message after publishing a pro…

d8eeed3

…duct

mdperez86 requested review from AnnaMag and octaedro November 24, 2022 19:30

AnnaMag approved these changes Nov 25, 2022

View reviewed changes

mdperez86 merged commit 410f06b into trunk Nov 25, 2022

mdperez86 deleted the fix/35541 branch November 25, 2022 13:21

github-actions bot added this to the 7.3.0 milestone Nov 25, 2022

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

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

Closed

Add a blank space between the emoji and the message within a notice popup #35698

Add a blank space between the emoji and the message within a notice popup #35698

Uh oh!

Conversation

mdperez86 commented Nov 23, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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!

mdperez86 Nov 23, 2022

Choose a reason for hiding this comment

Uh oh!

mdperez86 Nov 23, 2022

Choose a reason for hiding this comment

Uh oh!

AnnaMag Nov 24, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mdperez86 Nov 24, 2022

Choose a reason for hiding this comment

Uh oh!

mdperez86 Nov 23, 2022

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Test Results Summary

Uh oh!

octaedro Nov 24, 2022

Choose a reason for hiding this comment

Uh oh!

mdperez86 Nov 24, 2022

Choose a reason for hiding this comment

Uh oh!

octaedro left a comment

Choose a reason for hiding this comment

Uh oh!

AnnaMag left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AnnaMag Nov 24, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AnnaMag left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mdperez86 commented Nov 23, 2022 •

edited

Loading

AnnaMag Nov 24, 2022 •

edited

Loading

github-actions bot commented Nov 23, 2022 •

edited

Loading

AnnaMag left a comment •

edited

Loading

AnnaMag Nov 24, 2022 •

edited

Loading