Editor loads at the top of feed

client/data/posts/use-create-new-post.ts

@@ -0,0 +1,33 @@
+import { Post } from '@wordpress/core-data';
+import { useCallback } from 'react';
+import { useMutation } from 'react-query';
+import wpcom from 'calypso/lib/wp';
+import { SiteId } from 'calypso/types';
+
+export default function useCreateNewPost( mutationOptions = {} ) {
+	const mutation = useMutation(
+		async ( { siteId, post }: { siteId: SiteId; post: Post } ) =>
+			wpcom.req.post(
+				`/sites/${ siteId }/posts`,
+				{
+					apiNamespace: 'wp/v2',
+				},
+				{
+					...post,
+					status: 'publish',
+				}
+			),
+		{
+			...mutationOptions,
+		}
+	);
+
+	const { mutate } = mutation;
+
+	const createNewPost = useCallback(
+		( siteId: SiteId, post: Post ) => mutate( { siteId, post } ),
+		[ mutate ]
+	);
+
+	return { createNewPost, ...mutation };
+}

client/package.json

@@ -40,6 +40,7 @@
 		"@automattic/happychat-connection": "workspace:^",
 		"@automattic/help-center": "workspace:^",
 		"@automattic/i18n-utils": "workspace:^",
+		"@automattic/isolated-block-editor": "2.22.x",
 		"@automattic/js-utils": "workspace:^",
 		"@automattic/language-picker": "workspace:^",
 		"@automattic/languages": "workspace:^",

client/reader/following/main.jsx

@@ -1,3 +1,4 @@
+import config from '@automattic/calypso-config';
 import AsyncLoad from 'calypso/components/async-load';
 import SuggestionProvider from 'calypso/reader/search-stream/suggestion-provider';
 import Stream from 'calypso/reader/stream';
@@ -8,6 +9,7 @@ function FollowingStream( { ...props } ) {
 	/* eslint-disable wpcalypso/jsx-classname-namespace */
 	return (
 		<>
+			{ config.isEnabled( 'reader/editor' ) && <AsyncLoad require="calypso/reader/post-editor" /> }
 			<Stream { ...props }>
 				<FollowingIntro />
 			</Stream>

client/reader/post-editor/index.jsx

@@ -0,0 +1,79 @@
+import IsoloatedEditor, { ToolbarSlot } from '@automattic/isolated-block-editor';
+import { serialize } from '@wordpress/blocks';
+import { Button } from '@wordpress/components';
+import { select, useDispatch } from '@wordpress/data';
+import { useTranslate } from 'i18n-calypso';
+import { useSelector, useDispatch as useReduxDispatch } from 'react-redux';
+import useCreateNewPost from 'calypso/data/posts/use-create-new-post';
+import { successNotice, errorNotice } from 'calypso/state/notices/actions';
+import getPrimarySiteId from 'calypso/state/selectors/get-primary-site-id';
+import '@automattic/isolated-block-editor/build-browser/core.css';
+import './style.scss';
+
+const noticeOptions = {
+	duration: 5000,
+	id: 'reader-post-editor-create-post-notice',
+	isDismissible: true,
+};
+
+function ReaderPostEditor() {
+	const dispatch = useDispatch();
+	const translate = useTranslate();
+
+	// Use global redux store for Calypso state and actions
+	const reduxDispatch = useReduxDispatch();
+	const primarySiteId = useSelector( getPrimarySiteId );
+
+	const { createNewPost, isLoading } = useCreateNewPost( {
+		onSuccess: () => {
+			reduxDispatch( successNotice( translate( 'Post published!' ), noticeOptions ) );
+			dispatch( 'core/block-editor' ).resetBlocks( [] );
+		},
+		onError: ( error ) => {
+			const errorMessage = error?.message || translate( 'Something went wrong, please try again.' );
+			reduxDispatch( errorNotice( errorMessage, noticeOptions ) );
+		},
+	} );
+
+	const editorSettings = {
+		iso: {
+			moreMenu: false,
+			footer: true,
+		},
+		editor: {
+			bodyPlaceholder: translate( "What's on your mind?" ),
+			hasFixedToolbar: true,
+		},
+	};
+
+	function publishPost() {
+		const blocks = select( 'core/block-editor' ).getBlocks();
+
+		if ( blocks && blocks.length > 0 ) {
+			createNewPost( primarySiteId, {
+				content: serialize( blocks ),
+			} );
+		}
+	}
+
+	return (
+		<div className="reader-post-editor">
+			<div className="reader-post-editor__editor">
+				<IsoloatedEditor settings={ editorSettings }>
+					<ToolbarSlot>
+						<Button
+							className="reader-post-editor__publish-button"
+							isPrimary
+							onClick={ publishPost }
+							disabled={ isLoading }
+						>
+							{ isLoading ? translate( 'Publishing…' ) : translate( 'Publish' ) }
+						</Button>
+					</ToolbarSlot>
+				</IsoloatedEditor>
+			</div>
+		</div>
+	);
+}
+
+export default ReaderPostEditor;

client/reader/post-editor/style.scss

@@ -0,0 +1,18 @@
+.reader-post-editor {
+	margin-bottom: 80px;
+
+	.components-menu-items__item-icon {
+		// Make sure menu icons display at the intended size.
+		height: 24px;
+		width: 24px;
+	}
+}
+
+.reader-post-editor__editor {
+	margin-bottom: 12px;
+	width: 100%;
+}
+
+.reader-post-editor__publish-button {
+	float: right;
+}

config/development.json

@@ -154,6 +154,7 @@
 		"push-notifications": true,
 		"reader": true,
 		"reader/comment-polling": false,
+		"reader/editor": true,
 		"reader/full-errors": true,
 		"reader/list-management": true,
 		"reader/public-tag-pages": true,

package.json

@@ -172,6 +172,7 @@
 		"@types/wordpress__data-controls": "^2.30.0",
 		"@wordpress/base-styles": "^4.13.0",
 		"@wordpress/components": "^22.1.0",
+		"@wordpress/core-data": "^6.8.0",
 		"@wordpress/data": "^7.6.0",
 		"@wordpress/element": "^4.20.0",
 		"@wordpress/i18n": "^4.22.0",
@@ -304,7 +305,11 @@
 		"@wordpress/base-styles": "4.13.0",
 		"@wordpress/interface@^4.8.0": "patch:@wordpress/interface@npm%3A4.8.0#./.yarn/patches/@wordpress-interface-npm-4.8.0-8a39ad37cf.patch",
 		"@wordpress/data-controls": "2.22.0",
-		"@wordpress/element": "4.20.0"
+		"@wordpress/element": "4.20.0",
+		"@wordpress/block-editor": "10.4.0",
+		"@wordpress/block-library": "7.17.0",
+		"@wordpress/components": "22.1.0",
+		"@wordpress/keyboard-shortcuts": "3.20.0"
 	},
 	"packageManager": "[email protected]",
 	"dependenciesMeta": {