Content Guidelines: Rename route and use the right Notice component

lib/experimental/content-guidelines/load.php

@@ -18,8 +18,8 @@ function gutenberg_register_content_guidelines_settings_submenu() {
 		__( 'Guidelines', 'gutenberg' ),
 		__( 'Guidelines', 'gutenberg' ),
 		'manage_options',
-		'content-guidelines-wp-admin',
-		'gutenberg_content_guidelines_wp_admin_render_page'
+		'guidelines-wp-admin',
+		'gutenberg_guidelines_wp_admin_render_page'
 	);
 }
 
@@ -35,7 +35,7 @@ function gutenberg_content_guidelines_enqueue_block_registry_scripts( $hook_suff
 		return;
 	}
 
-	if ( 'settings_page_content-guidelines-wp-admin' !== $hook_suffix ) {
+	if ( 'settings_page_guidelines-wp-admin' !== $hook_suffix ) {
 		return;
 	}
 

package.json

@@ -33,7 +33,7 @@
 			},
 			"font-library",
 			"options-connectors",
-			"content-guidelines"
+			"guidelines"
 		]
 	},
 	"config": {

routes/content-guidelines/components/actions-section.tsx

@@ -1,21 +1,21 @@
+/* @jsx createElement */
+
 /**
  * WordPress dependencies
  */
 import {
 	Button,
 	Card,
 	Modal,
+	Notice,
 	useNavigator,
 	__experimentalText as Text,
 	__experimentalHeading as Heading,
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useRef, useState } from '@wordpress/element';
-// TODO: Revert to the `Notice` in `@wordpress/components` for now.
-// eslint-disable-next-line @wordpress/use-recommended-components
-import { Notice } from '@wordpress/ui';
+import { createElement, useRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -146,15 +146,13 @@ export default function ActionsSection() {
 				style={ { display: 'none' } }
 			/>
 			{ error && (
-				<Notice.Root
-					intent="warning"
-					className="content-guidelines__actions-notice"
+				<Notice
+					status="error"
+					onRemove={ () => setError( null ) }
+					isDismissible
 				>
-					<Notice.Title className="content-guidelines__actions-notice-title">
-						{ error }
-					</Notice.Title>
-					<Notice.CloseIcon onClick={ () => setError( null ) } />
-				</Notice.Root>
+					{ error }
+				</Notice>
 			) }
 			<Card className="content-guidelines__actions-card">
 				{ /*

routes/content-guidelines/components/block-guideline-modal.tsx

@@ -7,15 +7,13 @@ import {
 	Button,
 	ComboboxControl,
 	Modal,
+	Notice,
 	TextControl,
 	TextareaControl,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-// TODO: Revert to the `Notice` in `@wordpress/components` for now.
-// eslint-disable-next-line @wordpress/use-recommended-components
-import { Notice } from '@wordpress/ui';
 import { createElement, useMemo, useState } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
@@ -174,15 +172,13 @@ export default function BlockGuidelineModal( {
 					rows={ 6 }
 				/>
 				{ error && (
-					<Notice.Root intent="error">
-						<Notice.Title>
-							{ sprintf(
-								/* translators: %s: Error message. */
-								__( 'Error: %s' ),
-								error
-							) }
-						</Notice.Title>
-					</Notice.Root>
+					<Notice status="error" onRemove={ () => setError( null ) }>
+						{ sprintf(
+							/* translators: %s: Error message. */
+							__( 'Error: %s' ),
+							error
+						) }
+					</Notice>
 				) }
 				<HStack
 					justify="flex-end"

routes/content-guidelines/components/block-guidelines.tsx

@@ -7,13 +7,11 @@ import {
 	Button,
 	Icon,
 	Modal,
+	Notice,
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 	__experimentalText as Text,
 } from '@wordpress/components';
-// TODO: Revert to the `Notice` in `@wordpress/components` for now.
-// eslint-disable-next-line @wordpress/use-recommended-components
-import { Notice } from '@wordpress/ui';
 import {
 	DataViews,
 	filterSortAndPaginate,
@@ -207,15 +205,13 @@ export default function BlockGuidelines() {
 	return (
 		<VStack spacing={ 4 } className="block-guidelines">
 			{ error && (
-				<Notice.Root intent="error">
-					<Notice.Title>
-						{ sprintf(
-							/* translators: %s: Error message. */
-							__( 'Error: %s' ),
-							error
-						) }
-					</Notice.Title>
-				</Notice.Root>
+				<Notice status="error" onRemove={ () => setError( null ) }>
+					{ sprintf(
+						/* translators: %s: Error message. */
+						__( 'Error: %s' ),
+						error
+					) }
+				</Notice>
 			) }
 			{ rows.length > 0 && (
 				<DataViews

routes/content-guidelines/components/guideline-accordion-form.tsx

@@ -3,12 +3,13 @@
 /**
  * WordPress dependencies
  */
-import { Button, __experimentalVStack as VStack } from '@wordpress/components';
+import {
+	Button,
+	Notice,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { DataForm } from '@wordpress/dataviews';
 import type { Field, Form } from '@wordpress/dataviews';
-// TODO: Revert to the `Notice` in `@wordpress/components` for now.
-// eslint-disable-next-line @wordpress/use-recommended-components
-import { Notice } from '@wordpress/ui';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	createElement,
@@ -108,15 +109,13 @@ export default function GuidelineAccordionForm( {
 					}
 				/>
 				{ error && (
-					<Notice.Root intent="error">
-						<Notice.Title>
-							{ sprintf(
-								/* translators: %s: Error message. */
-								__( 'Error saving guidelines: %s' ),
-								error
-							) }
-						</Notice.Title>
-					</Notice.Root>
+					<Notice status="error" onRemove={ () => setError( null ) }>
+						{ sprintf(
+							/* translators: %s: Error message. */
+							__( 'Error saving guidelines: %s' ),
+							error
+						) }
+					</Notice>
 				) }
 				<Button
 					variant="primary"

routes/content-guidelines/package.json

@@ -5,7 +5,7 @@
 	"route": {
 		"path": "/",
 		"page": [
-			"content-guidelines"
+			"guidelines"
 		]
 	},
 	"dependencies": {
@@ -21,7 +21,6 @@
 		"@wordpress/icons": "file:../../packages/icons",
 		"@wordpress/dataviews": "file:../../packages/dataviews",
 		"@wordpress/notices": "file:../../packages/notices",
-		"@wordpress/ui": "file:../../packages/ui",
 		"@wordpress/block-library": "file:../../packages/block-library",
 		"@wordpress/blocks": "file:../../packages/blocks"
 	}

routes/content-guidelines/stage.tsx

@@ -9,11 +9,9 @@ import { createElement, useEffect, useState } from '@wordpress/element';
 import {
 	Spinner,
 	Navigator,
+	Notice,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-// TODO: Revert to the `Notice` in `@wordpress/components` for now.
-// eslint-disable-next-line @wordpress/use-recommended-components
-import { Notice } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -87,20 +85,20 @@ function ContentGuidelinesPage() {
 		>
 			{ error && (
 				<div className="content-guidelines__content">
-					<Notice.Root intent="error">
-						<Notice.Title>
+					<Notice status="error" isDismissible={ false }>
+						<strong>
 							{ sprintf(
 								/* translators: %s: Error message. */
 								__( 'Error loading guidelines: %s' ),
 								error
 							) }
-						</Notice.Title>
-						<Notice.Description>
+						</strong>
+						<p className="content-guidelines__error-description">
 							{ __(
 								'Please try again. If the problem persists, contact support.'
 							) }
-						</Notice.Description>
-					</Notice.Root>
+						</p>
+					</Notice>
 				</div>
 			) }
 			{ loading ? (

routes/content-guidelines/style.scss

@@ -29,18 +29,6 @@
 	margin-top: $grid-unit-20;
 }
 
-.content-guidelines__actions-notice {
-	border: none;
-	border-left: 4px solid $alert-yellow;
-	background-color: color.adjust($alert-yellow, $lightness: +35%);
-	border-radius: 0;
-}
-
-.content-guidelines__actions-notice-title {
-	font-size: 13px;
-	font-weight: 400;
-}
-
 .content-guidelines__actions {
 	width: min(680px, 100%);
 	margin: $grid-unit-20 auto 0;
@@ -131,6 +119,11 @@
 	color: $gray-900;
 }
 
+.content-guidelines__error-description {
+	margin: 0;
+	margin-top: $grid-unit-10;
+}
+
 .content-guidelines__revision-description {
 	padding-left: $grid-unit-10;
 }