Add editor in reader behind a feature flag

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

@@ -0,0 +1,32 @@
+import { useMutation } from '@tanstack/react-query';
+import { Post } from '@wordpress/core-data';
+import { useCallback } from 'react';
+import wpcom from 'calypso/lib/wp';
+import { SiteId } from 'calypso/types';
+
+export default function useCreateNewPost( mutationOptions = {} ) {
+	const mutation = useMutation( {
+		mutationFn: 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

@@ -39,6 +39,7 @@
 		"@automattic/global-styles": "workspace:^",
 		"@automattic/help-center": "workspace:^",
 		"@automattic/i18n-utils": "workspace:^",
+		"@automattic/isolated-block-editor": "2.24.x",
 		"@automattic/js-utils": "workspace:^",
 		"@automattic/language-picker": "workspace:^",
 		"@automattic/languages": "workspace:^",
@@ -83,6 +84,7 @@
 		"@wordpress/blocks": "^12.0.0",
 		"@wordpress/components": "^23.0.0",
 		"@wordpress/compose": "^6.0.0",
+		"@wordpress/core-data": "^6.11.0",
 		"@wordpress/data": "^8.0.0",
 		"@wordpress/dom": "^3.23.0",
 		"@wordpress/edit-post": "^7.0.0",

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';
@@ -12,6 +13,9 @@ function FollowingStream( { ...props } ) {
 			<Stream
 				{ ...props }
 				className="following"
+				streamHeader={
+					config.isEnabled( 'reader/editor' ) && <AsyncLoad require="calypso/reader/post-editor" />
+				}
 				streamSidebar={ <ReaderListFollowedSites path={ window.location.pathname } /> }
 			>
 				<FollowingIntro />

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

@@ -159,6 +159,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

@@ -354,7 +354,7 @@
 		"@wordpress/jest-console": "6.6.0",
 		"@wordpress/jest-preset-default": "10.4.0",
 		"@wordpress/jest-puppeteer-axe": "5.6.0",
-		"@wordpress/keyboard-shortcuts": "4.0.0",
+		"@wordpress/keyboard-shortcuts": "4.9.0",
 		"@wordpress/keycodes": "3.23.0",
 		"@wordpress/lazy-import": "1.10.0",
 		"@wordpress/library-export-default-webpack-plugin": "2.9.0",
@@ -387,7 +387,8 @@
 		"@wordpress/viewport": "5.0.0",
 		"@wordpress/warning": "2.23.0",
 		"@wordpress/widgets": "3.0.0",
-		"@wordpress/wordcount": "3.23.0"
+		"@wordpress/wordcount": "3.23.0",
+		"framer-motion": "10.11.6"
 	},
 	"packageManager": "[email protected]",
 	"dependenciesMeta": {