diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
index 58b93d61c45a65..152139870fa59f 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
@@ -20,6 +20,7 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
import { unlock } from '../../lock-unlock';
import { store as editSiteStore } from '../../store';
+import TemplatePartHint from './template-part-hint';
export default function SidebarNavigationScreenMain() {
const { location } = useNavigator();
@@ -42,46 +43,49 @@ export default function SidebarNavigationScreenMain() {
'Customize the appearance of your website using the block editor.'
) }
content={
-
-
- { __( 'Navigation' ) }
-
-
- { __( 'Styles' ) }
-
-
- { __( 'Pages' ) }
-
-
- { __( 'Templates' ) }
-
-
- { __( 'Patterns' ) }
-
-
+ <>
+
+
+ { __( 'Navigation' ) }
+
+
+ { __( 'Styles' ) }
+
+
+ { __( 'Pages' ) }
+
+
+ { __( 'Templates' ) }
+
+
+ { __( 'Patterns' ) }
+
+
+
+ >
}
/>
);
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/template-part-hint.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/template-part-hint.js
new file mode 100644
index 00000000000000..8fbe74f81bb4d9
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/template-part-hint.js
@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { Notice } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+const PREFERENCE_NAME = 'isTemplatePartMoveHintVisible';
+
+export default function TemplatePartHint() {
+ const showTemplatePartHint = useSelect(
+ ( select ) =>
+ select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true,
+ []
+ );
+
+ const { set: setPreference } = useDispatch( preferencesStore );
+ if ( ! showTemplatePartHint ) {
+ return null;
+ }
+
+ return (
+ {
+ setPreference( 'core', PREFERENCE_NAME, false );
+ } }
+ >
+ { __(
+ 'Looking for template parts? You can now find them in the new "Patterns" page.'
+ ) }
+
+ );
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
index dadee024b0eadd..664fce028952f9 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -98,6 +98,20 @@
border-top: 1px solid $gray-800;
}
+.edit-site-sidebar__notice {
+ background: $gray-800;
+ color: $gray-300;
+ margin: $grid-unit-30 0;
+ &.is-dismissible {
+ padding-right: $grid-unit-10;
+ }
+ .components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):focus,
+ .components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):active,
+ .components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover {
+ color: $gray-100;
+ }
+}
+
/* In general style overrides are discouraged.
* This is a temporary solution to override the InputControl component's styles.
* The `Theme` component will potentially be the more appropriate approach