WIP: Gutenberg in Calypso

client/gutenberg/editor/controller.js

@@ -13,8 +13,9 @@ import { shouldRedirectGutenberg } from 'state/selectors/should-redirect-gutenbe
 import { EDITOR_START, POST_EDIT } from 'state/action-types';
 import { getSelectedSiteId, getSelectedSiteSlug } from 'state/ui/selectors';
 import CalypsoifyIframe from './calypsoify-iframe';
+import WithoutIframe from './without-iframe';
 import getGutenbergEditorUrl from 'state/selectors/get-gutenberg-editor-url';
-import { addQueryArgs } from 'lib/route';
+import { addQueryArgs, getSiteFragment, sectionify } from 'lib/route';
 import { getSelectedEditor } from 'state/selectors/get-selected-editor';
 import { requestSelectedEditor } from 'state/selected-editor/actions';
 import {
@@ -32,6 +33,7 @@ import isSiteUsingCoreSiteEditor from 'state/selectors/is-site-using-core-site-e
 import getSiteEditorUrl from 'state/selectors/get-site-editor-url';
 import { REASON_BLOCK_EDITOR_JETPACK_REQUIRES_SSO } from 'state/desktop/window-events';
 import { notifyDesktopCannotOpenEditor } from 'state/desktop/actions';
+import NavigationComponent from 'my-sites/navigation';
 
 function determinePostType( context ) {
 	if ( context.path.startsWith( '/block-editor/post/' ) ) {
@@ -229,6 +231,63 @@ export const post = ( context, next ) => {
 	return next();
 };
 
+function createNavigation( context ) {
+	const siteFragment = getSiteFragment( context.pathname );
+	let basePath = context.pathname;
+
+	if ( siteFragment ) {
+		basePath = sectionify( context.pathname );
+	}
+
+	return (
+		<NavigationComponent
+			path={ context.path }
+			allSitesPath={ basePath }
+			siteBasePath={ basePath }
+		/>
+	);
+}
+
+export const gutenbergWithoutIframe = ( context, next ) => {
+	// See post-editor/controller.js for reference.
+
+	const postId = getPostID( context );
+	const postType = determinePostType( context );
+	const jetpackCopy = parseInt( get( context, 'query.jetpack-copy', null ) );
+
+	// Check if this value is an integer.
+	const duplicatePostId = isInteger( jetpackCopy ) ? jetpackCopy : null;
+
+	const state = context.store.getState();
+	const siteId = getSelectedSiteId( state );
+	const pressThis = getPressThisData( context.query );
+	const fseParentPageId = parseInt( context.query.fse_parent_post, 10 ) || null;
+	const parentPostId = parseInt( context.query.parent_post, 10 ) || null;
+
+	// Set postId on state.editor.postId, so components like editor revisions can read from it.
+	context.store.dispatch( { type: EDITOR_START, siteId, postId } );
+
+	// Set post type on state.posts.[ id ].type, so components like document head can read from it.
+	context.store.dispatch( { type: POST_EDIT, post: { type: postType }, siteId, postId } );
+
+	context.secondary = createNavigation( context );
+	context.primary = (
+		<WithoutIframe
+			key={ postId }
+			siteId={ siteId }
+			postId={ postId }
+			postType={ postType }
+			duplicatePostId={ duplicatePostId }
+			pressThis={ pressThis }
+			fseParentPageId={ fseParentPageId }
+			parentPostId={ parentPostId }
+			creatingNewHomepage={ postType === 'page' && has( context, 'query.new-homepage' ) }
+		/>
+	);
+
+	return next();
+};
+
 export const siteEditor = ( context, next ) => {
 	const state = context.store.getState();
 	const siteId = getSelectedSiteId( state );

client/gutenberg/editor/editor-styles.scss

@@ -0,0 +1,53 @@
+.without-iframe__styles-wrapper {
+	font-family: $editor-font;
+	font-size: $editor-font-size;
+	line-height: $editor-line-height;
+	color: $gray-900;
+
+	p {
+		font-size: inherit;
+		line-height: inherit;
+	}
+
+	ul,
+	ol {
+		margin: 0;
+		padding: 0;
+	}
+
+	ul li,
+	ol li {
+		// This overrides a bottom margin globally applied to list items in wp-admin.
+		margin-bottom: initial;
+	}
+
+	ul {
+		list-style-type: disc;
+	}
+
+	ol {
+		list-style-type: decimal;
+	}
+
+	ul ul,
+	ol ul {
+		list-style-type: circle;
+	}
+
+	// These are default editor styles
+	.wp-block {
+		max-width: 700px;
+
+		// TODO: the default padding/margin of the block editor content are not set properly
+		margin-left: auto;
+		margin-right: auto;
+	}
+	.wp-block[data-align="wide"],
+	.wp-block.alignwide {
+		max-width: 1100px;
+	}
+	.wp-block[data-align="full"],
+	.wp-block.alignfull {
+		max-width: none;
+	}
+}

client/gutenberg/editor/index.js

@@ -7,7 +7,7 @@ import page from 'page';
  * Internal dependencies
  */
 import { siteSelection, sites } from 'my-sites/controller';
-import { authenticate, post, redirect, siteEditor } from './controller';
+import { authenticate, post, redirect, siteEditor, gutenbergWithoutIframe } from './controller';
 import config from 'config';
 import { makeLayout, render as clientRender } from 'controller';
 
@@ -36,6 +36,16 @@ export default function () {
 	);
 	page( '/block-editor/post/:site?', siteSelection, redirect, makeLayout, clientRender );
 
+	page(
+		'/block-editor/without-iframe/post/:site/:post?',
+		siteSelection,
+		redirect,
+		authenticate,
+		gutenbergWithoutIframe,
+		makeLayout,
+		clientRender
+	);
+
 	page( '/block-editor/page', siteSelection, sites, makeLayout, clientRender );
 	page(
 		'/block-editor/page/:site/:post?',
@@ -46,6 +56,17 @@ export default function () {
 		makeLayout,
 		clientRender
 	);
+
+	page(
+		'/block-editor/without-iframe/page/:site/:post?',
+		siteSelection,
+		redirect,
+		authenticate,
+		gutenbergWithoutIframe,
+		makeLayout,
+		clientRender
+	);
+
 	page( '/block-editor/page/:site?', siteSelection, redirect, makeLayout, clientRender );
 
 	if ( config.isEnabled( 'manage/custom-post-types' ) ) {

client/gutenberg/editor/reset.scss

@@ -0,0 +1,12 @@
+// html,
+// body {
+// 	margin: 0;
+// 	padding: 0;
+// 	font-family: $default-font;
+// 	font-size: $default-font-size;
+// }
+
+// a,
+// div {
+// 	outline: 0;
+// }

client/gutenberg/editor/without-iframe.js

@@ -0,0 +1,140 @@
+/**
+ * External dependencies
+ */
+import React, { useState, useEffect } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+
+/**
+ * WordPress dependencies
+ */
+import '@wordpress/core-data';
+import '@wordpress/viewport';
+import '@wordpress/notices';
+
+import {
+	BlockEditorKeyboardShortcuts,
+	BlockEditorProvider,
+	BlockList,
+	BlockInspector,
+	WritingFlow,
+	ObserveTyping,
+} from '@wordpress/block-editor';
+import { Popover, SlotFillProvider, DropZoneProvider } from '@wordpress/components';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import { parse } from '@wordpress/blocks';
+import '@wordpress/format-library';
+
+import '@wordpress/components/build-style/style.css';
+import '@wordpress/block-editor/build-style/style.css';
+import '@wordpress/block-library/build-style/style.css';
+import '@wordpress/block-library/build-style/editor.css';
+import '@wordpress/block-library/build-style/theme.css';
+import '@wordpress/format-library/build-style/style.css';
+
+/**
+ * Internal dependencies
+ */
+import wpcom from 'lib/wp';
+import PageViewTracker from 'lib/analytics/page-view-tracker';
+import EditorDocumentHead from 'post-editor/editor-document-head';
+import { Placeholder } from './placeholder';
+import './without-iframe.scss';
+
+const getStatsPath = ( { postId } ) =>
+	postId
+		? '/block-editor/without-iframe/:post_type/:site/:post_id'
+		: '/block-editor/without-iframe/:post_type/:site';
+
+const getStatsTitle = ( { postId, postType } ) => {
+	let postTypeText;
+
+	switch ( postType ) {
+		case 'post':
+			postTypeText = 'Post';
+			break;
+		case 'page':
+			postTypeText = 'Page';
+			break;
+		default:
+			postTypeText = 'Custom Post Type';
+			break;
+	}
+
+	return postId
+		? `Block Editor > ${ postTypeText } > Edit`
+		: `Block Editor > ${ postTypeText } > New`;
+};
+
+const getStatsProps = ( { postId, postType } ) =>
+	postId ? { post_type: postType, post_id: postId } : { post_type: postType };
+
+function Gutenberg( props ) {
+	const { postId, siteId } = props;
+	const [ post, setPost ] = useState( null );
+	const [ blocks, updateBlocks ] = useState( null );
+
+	useEffect( () => {
+		registerCoreBlocks();
+	}, [] );
+
+	useEffect( () => {
+		// retrieve the full post description including "raw" content to access block markup
+		wpcom.site( siteId ).post( postId ).get( { context: 'edit' } ).then( setPost );
+	}, [ postId, siteId ] );
+
+	useEffect( () => {
+		if ( ! post ) {
+			return;
+		}
+
+		const parsedBlocks = parse( post.content );
+		// give the blocks and initial fake clientId of their starting index.
+		updateBlocks( parsedBlocks );
+	}, [ post ] );
+
+	if ( ! post || ! blocks ) {
+		return <Placeholder />;
+	}
+
+	return (
+		<>
+			<PageViewTracker
+				path={ getStatsPath( props ) }
+				title={ getStatsTitle( props ) }
+				properties={ getStatsProps( props ) }
+			/>
+			<EditorDocumentHead />
+
+			<div className="editor__without-iframe" role="main">
+				<h1>Gutenberg In Calypso</h1>
+
+				<SlotFillProvider>
+					<DropZoneProvider>
+						<BlockEditorProvider
+							// clientId="gutenberg-in-calypso"
+							value={ blocks }
+							onInput={ updateBlocks }
+							onChange={ updateBlocks }
+						>
+							<div className="without-iframe__sidebar">
+								<BlockInspector />
+							</div>
+							<div className="without-iframe__styles-wrapper">
+								<Popover.Slot name="block-toolbar" />
+								<BlockEditorKeyboardShortcuts />
+								<WritingFlow>
+									<ObserveTyping>
+										<BlockList />
+									</ObserveTyping>
+								</WritingFlow>
+							</div>
+							<Popover.Slot />
+						</BlockEditorProvider>
+					</DropZoneProvider>
+				</SlotFillProvider>
+			</div>
+		</>
+	);
+}
+
+export default Gutenberg;

client/gutenberg/editor/without-iframe.scss

@@ -0,0 +1,62 @@
+// @import "~@wordpress/base-styles/colors";
+@import "~@wordpress/base-styles/variables";
+@import "~@wordpress/base-styles/mixins";
+@import "~@wordpress/base-styles/breakpoints";
+@import "~@wordpress/base-styles/animations";
+// @import "~@wordpress/base-styles/z-index";
+
+@import "./editor-styles";
+
+.editor__without-iframe {
+	@include break-small() {
+		width: calc(100% - #{$sidebar-width});
+	}
+	padding-top: 20px;
+
+	img {
+		max-width: 100%;
+		height: auto;
+	}
+
+	iframe {
+		width: 100%;
+	}
+
+	.components-navigate-regions {
+		height: 100%;
+	}
+}
+
+.without-iframe__sidebar {
+	position: fixed;
+	top: 46px;
+	right: 0;
+	bottom: 0;
+	width: $sidebar-width;
+	border-left: $border-width solid $gray-200;
+	height: auto;
+	overflow: auto;
+	-webkit-overflow-scrolling: touch;
+
+	// Temporarily disable the sidebar on mobile
+	display: none;
+	@include break-small() {
+		display: block;
+	}
+}
+
+/**
+ * Animations
+ */
+
+// These keyframes should not be part of the _animations.scss mixins file.
+// Because keyframe animations can't be defined as mixins properly, they are duplicated.
+// Since hey are intended only for the editor, we add them here instead.
+@keyframes edit-post__fade-in-animation {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}