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