add hint to show template part move (#52395)

WordPress · Jul 7, 2023 · d222006 · d222006 · github-actions · Jul 7, 2023
1 parent bf8023a
commit d222006
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 40 deletions.
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
@@ -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={
-				<ItemGroup>
-					<NavigatorButton
-						as={ SidebarNavigationItem }
-						path="/navigation"
-						withChevron
-						icon={ navigation }
-					>
-						{ __( 'Navigation' ) }
-					</NavigatorButton>
-					<SidebarNavigationItemGlobalStyles
-						withChevron
-						icon={ styles }
-					>
-						{ __( 'Styles' ) }
-					</SidebarNavigationItemGlobalStyles>
-					<NavigatorButton
-						as={ SidebarNavigationItem }
-						path="/page"
-						withChevron
-						icon={ page }
-					>
-						{ __( 'Pages' ) }
-					</NavigatorButton>
-					<NavigatorButton
-						as={ SidebarNavigationItem }
-						path="/wp_template"
-						withChevron
-						icon={ layout }
-					>
-						{ __( 'Templates' ) }
-					</NavigatorButton>
-					<NavigatorButton
-						as={ SidebarNavigationItem }
-						path="/patterns"
-						withChevron
-						icon={ symbol }
-					>
-						{ __( 'Patterns' ) }
-					</NavigatorButton>
-				</ItemGroup>
+				<>
+					<ItemGroup>
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/navigation"
+							withChevron
+							icon={ navigation }
+						>
+							{ __( 'Navigation' ) }
+						</NavigatorButton>
+						<SidebarNavigationItemGlobalStyles
+							withChevron
+							icon={ styles }
+						>
+							{ __( 'Styles' ) }
+						</SidebarNavigationItemGlobalStyles>
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/page"
+							withChevron
+							icon={ page }
+						>
+							{ __( 'Pages' ) }
+						</NavigatorButton>
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/wp_template"
+							withChevron
+							icon={ layout }
+						>
+							{ __( 'Templates' ) }
+						</NavigatorButton>
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/patterns"
+							withChevron
+							icon={ symbol }
+						>
+							{ __( 'Patterns' ) }
+						</NavigatorButton>
+					</ItemGroup>
+					<TemplatePartHint />
+				</>
 			}
 		/>
 	);

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
@@ -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 (
+		<Notice
+			politeness="polite"
+			className="edit-site-sidebar__notice"
+			onRemove={ () => {
+				setPreference( 'core', PREFERENCE_NAME, false );
+			} }
+		>
+			{ __(
+				'Looking for template parts? You can now find them in the new "Patterns" page.'
+			) }
+		</Notice>
+	);
+}
diff --git 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