From 70aee31a1c4367222d025bd13cb8f2e273f0f96d Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 5 Dec 2019 14:33:57 +0000
Subject: [PATCH] Adds upgrade nudge UI

---
 .../blocks/navigation-menu/edit.js            | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/navigation-menu/edit.js b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/navigation-menu/edit.js
index 8c95b6258ba5a0..161889b59fd414 100644
--- a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/navigation-menu/edit.js
+++ b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/navigation-menu/edit.js
@@ -4,7 +4,7 @@
  * WordPress dependencies
  */
 import ServerSideRender from '@wordpress/server-side-render';
-import { Fragment } from '@wordpress/element';
+import { Fragment, useState } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import {
@@ -17,7 +17,7 @@ import {
 	withColors,
 	withFontSizes,
 } from '@wordpress/block-editor';
-import { PanelBody } from '@wordpress/components';
+import { PanelBody, Notice } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 
 /**
@@ -35,12 +35,36 @@ const NavigationMenuEdit = ( {
 	textColor,
 	isPublished,
 } ) => {
+	const [ upgradeNudgeVisible, setUpgradeNudgeVisible ] = useState( true );
+
 	const { customFontSize, textAlign } = attributes;
 
 	const actualFontSize = customFontSize || fontSize.size;
 
+	const upgradeBlock = () => {};
+
 	return (
 		<Fragment>
+			{ upgradeNudgeVisible && (
+				<Notice
+					onRemove={ () => setUpgradeNudgeVisible( false ) }
+					actions={ [
+						{
+							label: __( 'Upgrade Block', 'full-site-editing' ),
+							onClick: upgradeBlock,
+						},
+					] }
+				>
+					<p>
+						<span className="posts-list__message">
+							{ __(
+								'An improved version of the Navigation block is available. Upgrade for a better, more natural way to manage your Navigation.',
+								'full-site-editing'
+							) }
+						</span>
+					</p>
+				</Notice>
+			) }
 			<BlockControls>
 				<AlignmentToolbar
 					value={ textAlign }