Raw html to fix notice encoding

woocommerce · Mar 10, 2023 · 0b91d29 · 0b91d29
1 parent 3175eb3
commit 0b91d29
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/assets/js/base/components/notice-banner/stories/index.tsx b/assets/js/base/components/notice-banner/stories/index.tsx
@@ -22,11 +22,6 @@ export default {
 			control: 'boolean',
 			description: 'Determines whether the notice can be dismissed.',
 		},
-		children: {
-			description:
-				'The content of the notice; either text or a React node such as a list of errors.',
-			control: 'text',
-		},
 		summary: {
 			description:
 				'Optional summary text shown above notice content, used when several notices are listed together.',
@@ -47,6 +42,11 @@ export default {
 			description:
 				'Determines the level of politeness for the notice for assistive technology.',
 		},
+		children: {
+			description:
+				'The content of the notice; either text or a React node such as a list of errors.',
+			disable: true,
+		},
 		onRemove: {
 			description: 'Function called when dismissing the notice.',
 			disable: true,

diff --git a/assets/js/base/components/notice-banner/style.scss b/assets/js/base/components/notice-banner/style.scss
@@ -24,6 +24,14 @@
 		align-self: center;
 		white-space: normal;
 
+		> div *:first-child {
+			margin-top: 0;
+		}
+
+		> div *:last-child {
+			margin-bottom: 0;
+		}
+
 		&:last-child {
 			padding-right: 0;
 		}

diff --git a/packages/checkout/components/store-notices-container/store-notices.tsx b/packages/checkout/components/store-notices-container/store-notices.tsx
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
-import { useRef, useEffect } from '@wordpress/element';
+import { useRef, useEffect, RawHTML } from '@wordpress/element';
 import { sanitizeHTML } from '@woocommerce/utils';
 import { useDispatch } from '@wordpress/data';
 import { usePrevious } from '@woocommerce/base-hooks';
@@ -95,7 +95,9 @@ const StoreNotices = ( {
 					key={ notice.id + '-' + notice.context }
 					{ ...notice }
 				>
-					{ sanitizeHTML( decodeEntities( notice.content ) ) }
+					<RawHTML>
+						{ sanitizeHTML( decodeEntities( notice.content ) ) }
+					</RawHTML>
 				</StoreNotice>
 			) ) }
 			{ Object.entries( dismissibleNoticeGroups ).map(
@@ -134,7 +136,7 @@ const StoreNotices = ( {
 					};
 					return uniqueNotices.length === 1 ? (
 						<StoreNotice { ...noticeProps }>
-							{ noticeGroup[ 0 ].content }
+							<RawHTML>{ noticeGroup[ 0 ].content }</RawHTML>
 						</StoreNotice>
 					) : (
 						<StoreNotice
@@ -153,7 +155,7 @@ const StoreNotices = ( {
 									<li
 										key={ notice.id + '-' + notice.context }
 									>
-										{ notice.content }
+										<RawHTML>{ notice.content }</RawHTML>
 									</li>
 								) ) }
 							</ul>