@@ -49,25 +49,22 @@ export async function fetchContentGuidelines(): Promise< RestGuidelinesResponse
 }
 
 export async function saveContentGuidelines(): Promise< RestGuidelinesResponse > {
-	const { setFromResponse } = dispatch( STORE_NAME ) as {
-		setFromResponse: ( response: RestGuidelinesResponse ) => void;
-	};
+	// @ts-ignore
+	const { setFromResponse } = dispatch( STORE_NAME );
 
 	const guidelinesStore = select( STORE_NAME ) as {
 		getId: () => number | null;
 		getStatus: () => string | null;
 		getAllGuidelines: () => Partial< Record< string, string > >;
+		getGuideline: ( category: string ) => string;
 	};
 
 	const id = guidelinesStore.getId();
 	const status = guidelinesStore.getStatus() || 'draft';
 	const categories = guidelinesStore.getAllGuidelines();
 
-	const data: {
-		id?: number;
-		status: string;
-		guideline_categories: RestGuidelinesResponse[ 'guideline_categories' ];
-	} = {
+	const data = {
+		id: id && id > 0 ? id : undefined,
 		status,
 		guideline_categories: {
 			site: {
@@ -85,10 +82,6 @@ export async function saveContentGuidelines(): Promise< RestGuidelinesResponse >
 		},
 	};
 
-	if ( id && id > 0 ) {
-		data.id = id;
-	}
-
 	const { createSuccessNotice, createErrorNotice } = dispatch( noticesStore );
 
 	try {
 
@@ -39,6 +39,7 @@ export default function GuidelineAccordion( {
 	const headingId = useId();
 	const descriptionId = useId();
 
+	// @ts-ignore
 	const { setGuideline } = useDispatch( STORE_NAME );
 
 	const { value } = useSelect(
@@ -49,9 +50,12 @@ export default function GuidelineAccordion( {
 		[ slug ]
 	);
 
-	const handleSave = ( event: React.FormEvent< HTMLFormElement > ) => {
+	const [ draft, setDraft ] = useState( value );
+
+	const handleSave = ( event: SubmitEvent ) => {
 		event.preventDefault();
-		void saveContentGuidelines();
+		setGuideline( slug, draft );
+		saveContentGuidelines();
 	};
 
 	return (
@@ -116,10 +120,8 @@ export default function GuidelineAccordion( {
 						<TextareaControl
 							label={ __( 'Copy guidelines' ) }
 							hideLabelFromVision
-							value={ value }
-							onChange={ ( newValue: string ) => {
-								setGuideline( slug, newValue );
-							} }
+							value={ draft }
+							onChange={ setDraft }
 						/>
 						<Button
 							variant="primary"
 
@@ -8,7 +8,7 @@ export const STORE_NAME = 'core/content-guidelines';
 export interface ContentGuidelinesState {
 	id: number | null;
 	status: string | null;
-	categories: Partial< Record< string, string > >;
+	categories: Record< string, string >;
 }
 
 const DEFAULT_STATE: ContentGuidelinesState = {
@@ -17,6 +17,8 @@ const DEFAULT_STATE: ContentGuidelinesState = {
 	categories: {},
 };
 
+const CATEGORIES = [ 'site', 'copy', 'images', 'additional' ];
+
 const actions = {
 	setFromResponse( response: unknown ) {
 		return {
@@ -48,17 +50,16 @@ function parseResponse( response: unknown ): Partial< ContentGuidelinesState > {
 
 	const categoriesFromResponse = data.guideline_categories ?? {};
 
-	const result: Partial< ContentGuidelinesState > = {
-		id: typeof data.id === 'number' ? data.id : null,
-		status: typeof data.status === 'string' ? data.status : null,
+	const result = {
+		id: data.id as number | null,
+		status: data.status as string | null,
 		categories: {},
 	};
 
-	[ 'site', 'copy', 'images', 'additional' ].forEach( ( slug ) => {
-		const guidelines = categoriesFromResponse?.[ slug ]?.guidelines;
+	CATEGORIES.forEach( ( category ) => {
+		const guidelines = categoriesFromResponse?.[ category ]?.guidelines;
 		if ( typeof guidelines === 'string' ) {
-			( result.categories as Record< string, string > )[ slug ] =
-				guidelines;
+			result.categories[ category ] = guidelines;
 		}
 	} );
 
@@ -89,8 +90,8 @@ function reducer(
 }
 
 const selectors = {
-	getGuideline( state: ContentGuidelinesState, slug: string ): string {
-		return state.categories[ slug ] ?? '';
+	getGuideline( state: ContentGuidelinesState, category: string ): string {
+		return state.categories[ category ] ?? '';
 	},
 	getAllGuidelines(
 		state: ContentGuidelinesState