Widgets: Allow HTML tags in description (#33814)

* Widgets: Allow HTML tags in description * Use `dangerouslySetInnerHTML` Avoid `<div />` inside the `<p />` tag * Describe by dangerouslySetInnerHTML is used * Use safeHTML * Update comment
WordPress · Aug 9, 2021 · 07051aa · 07051aa
1 parent 4a6d006
commit 07051aa
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/edit-widgets/package.json b/packages/edit-widgets/package.json
@@ -37,6 +37,7 @@
 		"@wordpress/core-data": "file:../core-data",
 		"@wordpress/data": "file:../data",
 		"@wordpress/data-controls": "file:../data-controls",
+		"@wordpress/dom": "file:../dom",
 		"@wordpress/element": "file:../element",
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/i18n": "file:../i18n",

diff --git a/packages/edit-widgets/src/components/sidebar/widget-areas.js b/packages/edit-widgets/src/components/sidebar/widget-areas.js
@@ -8,6 +8,7 @@ import { BlockIcon } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
+import { safeHTML } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -47,7 +48,15 @@ export default function WidgetAreas( { selectedWidgetAreaId } ) {
 			<div className="edit-widgets-widget-areas__top-container">
 				<BlockIcon icon={ blockDefault } />
 				<div>
-					<p>{ description }</p>
+					<p
+						// Use `dangerouslySetInnerHTML` to keep backwards
+						// compatibility. Basic markup in the description is an
+						// established feature of WordPress.
+						// @see https://github.com/WordPress/gutenberg/issues/33106
+						dangerouslySetInnerHTML={ {
+							__html: safeHTML( description ),
+						} }
+					/>
 					{ widgetAreas?.length === 0 && (
 						<p>
 							{ __(