Reading Settings: Adding 'Blogs post' setting to the new Reading Settings page

client/my-sites/site-settings/reading-site-settings/BlogPostSetting.tsx

@@ -0,0 +1,50 @@
+import { useTranslate } from 'i18n-calypso';
+import FormFieldset from 'calypso/components/forms/form-fieldset';
+import FormLabel from 'calypso/components/forms/form-label';
+import FormSettingExplanation from 'calypso/components/forms/form-setting-explanation';
+import FormTextInput from 'calypso/components/forms/form-text-input';
+
+export const BLOGS_POST_OPTION = 'posts_per_page';
+
+type BlogsPostSettingProps = {
+	value?: number;
+	onChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+	disabled?: boolean;
+};
+
+export const BlogsPostsSetting = ( { value = 10, onChange, disabled }: BlogsPostSettingProps ) => {
+	const translate = useTranslate();
+	return (
+		<FormFieldset>
+			<FormLabel id={ `${ BLOGS_POST_OPTION }-label` } htmlFor={ BLOGS_POST_OPTION }>
+				{ translate( 'Blogs post' ) }
+			</FormLabel>
+			<div>
+				{ translate( 'Show at most {{field /}} posts', {
+					comment:
+						'The field value is a number that defines how many posts are shown on the posts, or the archive, page at a time.',
+					components: {
+						field: (
+							<FormTextInput
+								id={ BLOGS_POST_OPTION }
+								name={ BLOGS_POST_OPTION }
+								type="number"
+								step="1"
+								min="0"
+								aria-labelledby={ `${ BLOGS_POST_OPTION }-label` }
+								value={ value }
+								onChange={ onChange }
+								disabled={ disabled }
+							/>
+						),
+					},
+				} ) }
+			</div>
+			<FormSettingExplanation>
+				{ translate(
+					'The number of posts displayed on your selected posts page. Displaying 10 or less can improve usability, SEO, and page speed. May not apply to themes with infinite scrolling.'
+				) }
+			</FormSettingExplanation>
+		</FormFieldset>
+	);
+};

client/my-sites/site-settings/reading-site-settings/index.tsx

@@ -0,0 +1,44 @@
+import { Card } from '@automattic/components';
+import { useTranslate } from 'i18n-calypso';
+import SettingsSectionHeader from 'calypso/my-sites/site-settings/settings-section-header';
+import { BlogsPostsSetting, BLOGS_POST_OPTION } from './BlogPostSetting';
+
+type Fields = {
+	posts_per_page?: number;
+};
+
+type SiteSettingsSectionProps = {
+	fields: Fields;
+	onChangeField: ( field: string ) => ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+	handleSubmitForm: ( event: React.FormEvent< HTMLFormElement > ) => void;
+	disabled?: boolean;
+};
+
+export const SiteSettingsSection = ( {
+	fields,
+	onChangeField,
+	handleSubmitForm,
+	disabled,
+}: SiteSettingsSectionProps ) => {
+	const translate = useTranslate();
+	const { posts_per_page } = fields;
+
+	return (
+		<>
+			{ /* @ts-expect-error SettingsSectionHeader is not typed and is causing errors */ }
+			<SettingsSectionHeader
+				title={ translate( 'Site settings' ) }
+				showButton
+				onButtonClick={ handleSubmitForm }
+				disabled={ disabled }
+			/>
+			<Card>
+				<BlogsPostsSetting
+					value={ posts_per_page }
+					onChange={ onChangeField( BLOGS_POST_OPTION ) }
+					disabled={ disabled }
+				/>
+			</Card>
+		</>
+	);
+};

client/my-sites/site-settings/settings-reading/main.tsx

@@ -3,12 +3,63 @@ import { useTranslate } from 'i18n-calypso';
 import DocumentHead from 'calypso/components/data/document-head';
 import FormattedHeader from 'calypso/components/formatted-header';
 import Main from 'calypso/components/main';
+import { SiteSettingsSection } from '../reading-site-settings';
+import wrapSettingsForm from '../wrap-settings-form';
 import { NewsletterSettingsSection } from './newsletter-settings-section';
 import { RssFeedSettingsSection } from './rss-feed-settings-section';
-import { SiteSettingsSection } from './site-settings-section';
 
 const isEnabled = config.isEnabled( 'settings/modernize-reading-settings' );
 
+// Settings are not typed yet, so we need to use `unknown` for now.
+type Settings = unknown;
+
+const getFormSettings = ( settings: Settings = {} ) => {
+	if ( ! settings ) {
+		return {};
+	}
+
+	// @ts-expect-error Settings are not typed yet, so we need to use `unknown` for now.
+	const { posts_per_page } = settings;
+	return {
+		...( posts_per_page && { posts_per_page } ),
+	};
+};
+
+type Fields = {
+	posts_per_page?: number;
+};
+
+type ReadingSettingsFormProps = {
+	fields: Fields;
+	onChangeField: ( field: string ) => ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+	handleSubmitForm: ( event: React.FormEvent< HTMLFormElement > ) => void;
+	isRequestingSettings: boolean;
+	isSavingSettings: boolean;
+};
+
+const ReadingSettingsForm = wrapSettingsForm( getFormSettings )(
+	( {
+		fields,
+		onChangeField,
+		handleSubmitForm,
+		isRequestingSettings,
+		isSavingSettings,
+	}: ReadingSettingsFormProps ) => {
+		return (
+			<form onSubmit={ handleSubmitForm }>
+				<SiteSettingsSection
+					fields={ fields }
+					onChangeField={ onChangeField }
+					handleSubmitForm={ handleSubmitForm }
+					disabled={ isRequestingSettings || isSavingSettings }
+				/>
+				<RssFeedSettingsSection />
+				<NewsletterSettingsSection />
+			</form>
+		);
+	}
+);
+
 const ReadingSettings = () => {
 	const translate = useTranslate();
 
@@ -20,11 +71,7 @@ const ReadingSettings = () => {
 		<Main className="site-settings">
 			<DocumentHead title={ translate( 'Reading Settings' ) } />
 			<FormattedHeader brandFont headerText={ translate( 'Reading Settings' ) } align="left" />
-			<form>
-				<SiteSettingsSection />
-				<RssFeedSettingsSection />
-				<NewsletterSettingsSection />
-			</form>
+			<ReadingSettingsForm />
 		</Main>
 	);
 };