Commit 4512eca6f77 for woocommerce

commit 4512eca6f77b5a4df820665cce5845792b33adcc
Author: Jill Q. <jill.quek@automattic.com>
Date:   Mon Apr 27 13:43:31 2026 +0800

    Drop default icon from CES feedback snackbars (#64357)

    * Fix CES snackbar icon rendering and alignment

    The CES feedback snackbar's default pencil icon used the text codepoint
    U+270F, which renders as a tiny text glyph on most systems instead of
    a proper emoji. The wrapper also hardcoded a 21x21 size that fought
    Gutenberg's own Snackbar icon placement.

    For the first-product snackbar specifically, the celebration emoji
    was baked into the title string, resulting in two icons rendered
    side by side (pencil + party popper + text).

    - Add emoji variation selector to the pencil fallback so it renders
      as an emoji instead of a text glyph.
    - Drop the hardcoded 21x21 wrapper so Gutenberg's
      .components-snackbar__icon CSS handles positioning.
    - Treat the icon as decorative (aria-hidden), since the title carries
      the meaning for screen readers.
    - Move the party-popper emoji out of the first-product title into
      the icon slot so the snackbar shows one properly-aligned icon.

    * Drop CES snackbar default icon instead of fighting Gutenberg's layout

    The earlier attempt moved the celebration emoji into the Snackbar's
    icon slot and kept a fallback pencil emoji for other CES surveys.
    Visual preview against Gutenberg's own Snackbar CSS showed that an
    emoji character in the icon slot floats too high because
    .components-snackbar__icon uses absolute positioning math tuned for
    SVG icons that fill their bounding box.

    The cleaner fix is to not use the icon slot at all. Emoji in the
    title text sits on the baseline and aligns naturally. The first-product
    snackbar keeps its inline celebration emoji (reverting the PHP change),
    and the other six CES snackbars simply render without the decorative
    pencil. No cross-platform glyph issues, no alignment quirks, no
    Gutenberg CSS to fight.

    - Revert the PHP change so 'title' keeps the inline 🎉 emoji; no net
      change to plugins/woocommerce.
    - JS: only render the icon span when an icon is explicitly passed;
      drop the pencil fallback and the hardcoded 21x21 wrapper.
    - README: simplify example to reflect the new default (no icon).
    - Remove the now-unused plugins/woocommerce changelog entry; rewrite
      the customer-effort-score changelog entry to match the new scope.

diff --git a/packages/js/customer-effort-score/README.md b/packages/js/customer-effort-score/README.md
index 6d5ec81a3d5..de551a6f7a2 100644
--- a/packages/js/customer-effort-score/README.md
+++ b/packages/js/customer-effort-score/README.md
@@ -40,15 +40,6 @@ export function CustomerEffortScoreConsole( { label } ) {
 			onNoticeShownCallback={ onNoticeShown }
 			onNoticeDismissedCallback={ onNoticeDismissed }
 			onModalShownCallback={ onModalShown }
-			icon={
-				<span
-					style={ { height: 21, width: 21 } }
-					role="img"
-					aria-label="Pencil icon"
-				>
-					✏️
-				</span>
-			}
         />
     );
 };
diff --git a/packages/js/customer-effort-score/changelog/fix-ces-snackbar-icon-alignment b/packages/js/customer-effort-score/changelog/fix-ces-snackbar-icon-alignment
new file mode 100644
index 00000000000..5107f4f933a
--- /dev/null
+++ b/packages/js/customer-effort-score/changelog/fix-ces-snackbar-icon-alignment
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Drop the default pencil icon from CES snackbars so they render without cross-platform glyph rendering issues and alignment quirks; callers can still pass an explicit icon when needed.
diff --git a/packages/js/customer-effort-score/src/components/customer-effort-score-tracks/index.js b/packages/js/customer-effort-score/src/components/customer-effort-score-tracks/index.js
index 4515d424a60..980cf6bbcc2 100644
--- a/packages/js/customer-effort-score/src/components/customer-effort-score-tracks/index.js
+++ b/packages/js/customer-effort-score/src/components/customer-effort-score-tracks/index.js
@@ -164,15 +164,7 @@ function _CustomerEffortScoreTracks( {
 			onNoticeDismissedCallback={ onNoticeDismissed }
 			onModalShownCallback={ onModalShown }
 			onModalDismissedCallback={ onModalDismissed }
-			icon={
-				<span
-					style={ { height: 21, width: 21 } }
-					role="img"
-					aria-label={ __( 'Pencil icon', 'woocommerce' ) }
-				>
-					{ icon || '✏' }
-				</span>
-			}
+			icon={ icon ? <span aria-hidden="true">{ icon }</span> : undefined }
 		/>
 	);
 }