Add a page navigation dropdown to gutenberg

client/gutenberg/editor/calypsoify-iframe.tsx

@@ -43,6 +43,7 @@ import { protectForm, ProtectedFormProps } from 'lib/protect-form';
 import PageViewTracker from 'lib/analytics/page-view-tracker';
 import ConvertToBlocksDialog from 'components/convert-to-blocks';
 import config from 'config';
+import PageNavigation from './pageNavigation';
 
 /**
  * Types
@@ -538,7 +539,7 @@ class CalypsoifyIframe extends Component< Props & ConnectedProps & ProtectedForm
 	};
 
 	render() {
-		const { iframeUrl, siteId, shouldLoadIframe } = this.props;
+		const { editedPostId, iframeUrl, postType, siteId, shouldLoadIframe } = this.props;
 		const {
 			classicBlockEditorId,
 			isMediaModalVisible,
@@ -567,6 +568,9 @@ class CalypsoifyIframe extends Component< Props & ConnectedProps & ProtectedForm
 					showDialog={ isConversionPromptVisible }
 					handleResponse={ this.handleConversionResponse }
 				/>
+				{ isIframeLoaded && postType === 'page' && (
+					<PageNavigation siteId={ siteId } postId={ editedPostId } />
+				) }
 				{ /* eslint-disable-next-line wpcalypso/jsx-classname-namespace */ }
 				<div className="main main-column calypsoify is-iframe" role="main">
 					{ ! isIframeLoaded && <Placeholder /> }

client/gutenberg/editor/pageNavigation.jsx

@@ -0,0 +1,109 @@
+/**
+ * External dependencies
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+import { localize } from 'i18n-calypso';
+import { flowRight } from 'lodash';
+import page from 'page';
+
+/**
+ * Internal dependencies
+ */
+import QueryPosts from 'components/data/query-posts';
+import { getPostsForQuery } from 'state/posts/selectors';
+import SelectDropdown from 'components/select-dropdown';
+import Gridicon from 'components/gridicon';
+
+import getEditorUrl from 'state/selectors/get-editor-url';
+
+/**
+ * Style dependencies
+ */
+import './style.scss';
+
+class PageNavigation extends React.Component {
+	navigateToPage( event, destination ) {
+		if ( destination ) {
+			page( destination );
+		}
+		if ( this.state.destination ) {
+			page( this.state.destination );
+		}
+		this.setState( { visible: false } );
+	}
+
+	changeDestination( event ) {
+		this.setState( { destination: event.target.value } );
+	}
+
+	pageList() {
+		const pages = [];
+		let title = '';
+		this.props.pages.forEach( currentPage => {
+			if ( currentPage.ID === this.props.postId ) {
+				title = currentPage.title;
+			}
+			if ( currentPage.content !== '' ) {
+				// filtering out the synthetic pages
+				pages.push(
+					<SelectDropdown.Item
+						key={ currentPage.ID }
+						path={ currentPage.editorURL }
+						selected={ currentPage.ID === this.props.postId }
+					>
+						{ currentPage.title }
+					</SelectDropdown.Item>
+				);
+			}
+		} );
+		pages.push(
+			<SelectDropdown.Item
+				path={ this.props.newPageLink }
+				key="newpage"
+				icon={ <Gridicon icon="plus" size={ 18 } /> }
+			>
+				New Page
+			</SelectDropdown.Item>
+		);
+
+		return (
+			<div>
+				<SelectDropdown selectedText={ title } className="pageNavigation__page">
+					{ pages }
+				</SelectDropdown>
+			</div>
+		);
+	}
+
+	render() {
+		const siteId = this.props.siteId;
+		const query = {
+			page: 0,
+			number: 8,
+			search: '',
+			status: 'publish',
+			type: 'page',
+		};
+		return (
+			<div>
+				<QueryPosts siteId={ siteId } query={ query } />
+				<div className="pageNavigation">{ this.pageList() }</div>
+			</div>
+		);
+	}
+}
+
+const mapState = ( state, { query, siteId } ) => {
+	const pages = getPostsForQuery( state, siteId, query ) || [];
+	return {
+		pages: pages.map( currentPage => {
+			currentPage.editorURL = getEditorUrl( state, siteId, page.ID, 'page' );
+			return currentPage;
+		} ),
+		newPageLink: getEditorUrl( state, siteId, null, 'page' ),
+	};
+};
+
+export default flowRight( connect( mapState ), localize )( PageNavigation );

client/gutenberg/editor/style.scss

@@ -120,3 +120,44 @@ html.is-iframe {
 		max-width: 100%;
 	}
 }
+
+.pageNavigation {
+	max-width: 300px;
+	z-index: 99;
+	position: fixed;
+	top: 0;
+	left: 50%;
+    transform: translateX( -50% );
+	margin-top: 8px;
+	cursor: pointer;
+
+	@include breakpoint( '<1040px' ) {
+		display: block;
+		top: 64px;
+		left: 16px;
+		transform: none;
+	}
+}
+
+.pageNavigation svg {
+	color: #666;
+}
+
+.pageNavigation .select-dropdown__option,
+.pageNavigation .select-dropdown__item.is-selected {
+	background: white;
+	color: #333;
+}
+
+.pageNavigation__menu-item.hasSeparator {
+	border-top: 1px dotted #e1e1e1;
+}
+
+.pageNavigation .select-dropdown__header {
+	border: 0;
+	color: transparent;
+}
+
+.pageNavigation .select-dropdown__header-text {
+	color: #333;
+}