PD-260 Scroll new notices into view on edit snippet page.

CHANGELOG.md

@@ -11,6 +11,8 @@
 * Added: Deploy snippets to plugin from Code Snippets Cloud app. (PRO)
 * Added: Bundles of Joy! Search and download Snippet Bundles in one go direct from Code Snippets Cloud. (PRO)
 * Fixed: Error when attempting to update network shared snippets after saving. [[#](https://wordpress.org/support/topic/activating-snippets-breaks-on-wordpress-6-3/)]
+* Improved: Redirect to snippets table when deleting snippet from the edit menu.
+* Improved: Scroll new notices into view on edit menu.
 
 ## 3.4.2 (05 Jul 2023)
 * Fixed: Issue causing export process to fail with fatal error. [[#](https://wordpress.org/support/topic/critical-error-on-exporting-snippets/)]

css/edit.scss

@@ -133,6 +133,10 @@ p.snippet-scope, .snippet-scope p {
 	color: inherit;
 }
 
+.wrap .notice {
+	scroll-margin: 0.75em;
+}
+
 @import 'edit/tooltips';
 @import 'edit/types';
 @import 'edit/tags';

js/Edit/components/Notices.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames'
-import React, { Dispatch, MouseEventHandler, ReactNode, SetStateAction } from 'react'
+import React, { Dispatch, MouseEventHandler, ReactNode, SetStateAction, useEffect, useRef } from 'react'
 import { __, sprintf } from '@wordpress/i18n'
 import { SnippetInputProps } from '../../types/SnippetInputProps'
 import { Notice } from '../../types/Notice'
@@ -10,17 +10,23 @@ interface DismissibleNoticeProps {
 	children?: ReactNode
 }
 
-const DismissibleNotice: React.FC<DismissibleNoticeProps> = ({ classNames, onRemove, children }) =>
-	<div id="message" className={classnames('notice fade is-dismissible', classNames)}>
-		<>{children}</>
-
-		<button type="button" className="notice-dismiss" onClick={event => {
-			event.preventDefault()
-			onRemove(event)
-		}}>
-			<span className="screen-reader-text">{__('Dismiss notice.', 'code-snippets')}</span>
-		</button>
-	</div>
+const DismissibleNotice: React.FC<DismissibleNoticeProps> = ({ classNames, onRemove, children }) => {
+	const ref = useRef<HTMLDivElement>(null)
+	useEffect(() => ref?.current?.scrollIntoView({ behavior: 'smooth' }), [ref])
+
+	return (
+		<div id="message" className={classnames('notice fade is-dismissible', classNames)} ref={ref}>
+			<>{children}</>
+
+			<button type="button" className="notice-dismiss" onClick={event => {
+				event.preventDefault()
+				onRemove(event)
+			}}>
+				<span className="screen-reader-text">{__('Dismiss notice.', 'code-snippets')}</span>
+			</button>
+		</div>
+	)
+}
 
 export interface NoticesProps extends SnippetInputProps {
 	notice: Notice | undefined