Adding page state in data view

lib/rest-api.php

@@ -36,3 +36,41 @@ function gutenberg_register_edit_site_export_controller_endpoints() {
 	$edit_site_export_controller->register_routes();
 }
 add_action( 'rest_api_init', 'gutenberg_register_edit_site_export_controller_endpoints' );
+add_action(
+	'rest_api_init',
+	function () {
+		register_rest_route(
+			'page-options/v1',
+			'/options',
+			array(
+				'methods'             => 'GET',
+				'callback'            => 'get_page_options',
+				'permission_callback' => '__return_true',
+			)
+		);
+	}
+);
+
+/**
+ * Returns an array of page IDs used in various parts of WordPress.
+ *
+ * The pages included are:
+ * - Privacy policy page ID
+ * - Cart page ID (from WooCommerce)
+ * - Checkout page ID (from WooCommerce)
+ * - Account page ID (from WooCommerce)
+ * - Shop page ID (from WooCommerce)
+ *
+ * @return array IDs of the pages in the format: array( 'privacyPolicyPageId' => int, ... )
+ */
+if ( ! function_exists( 'get_page_options' ) ) {
+	function get_page_options() {
+		return array(
+			'privacyPolicyPageId' => get_option( 'wp_page_for_privacy_policy' ),
+			'cartPageId'          => get_option( 'woocommerce_cart_page_id' ),
+			'checkoutPageId'      => get_option( 'woocommerce_checkout_page_id' ),
+			'accountPageId'       => get_option( 'woocommerce_myaccount_page_id' ),
+			'shopPageId'          => get_option( 'woocommerce_shop_page_id' ),
+		);
+	}
+}

packages/fields/src/fields/title/title-view.tsx

@@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import type { Settings } from '@wordpress/core-data';
+import { useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -26,6 +27,39 @@ const TitleView = ( { item }: { item: BasePost } ) => {
 			postsPageId: siteSettings?.page_for_posts,
 		};
 	}, [] );
+	const [ options, setOptions ] = useState< {
+		privacyPolicyPageId: number | null;
+		cartPageId: number | null;
+		shopPageId: number | null;
+		accountPageId: number | null;
+		checkoutPageId: number | null;
+	} | null >( null );
+
+	useEffect( () => {
+		const fetchOptions = async () => {
+			try {
+				const response = await fetch(
+					'/wp-json/page-options/v1/options'
+				);
+				const data = await response.json();
+				setOptions( data );
+			} catch ( error ) {}
+		};
+
+		fetchOptions();
+	}, [] );
+
+	if ( ! options ) {
+		return null; // Or a loader while options are being fetched
+	}
+
+	const {
+		privacyPolicyPageId,
+		cartPageId,
+		shopPageId,
+		accountPageId,
+		checkoutPageId,
+	} = options;
 
 	const renderedTitle = getItemTitle( item );
 
@@ -42,6 +76,38 @@ const TitleView = ( { item }: { item: BasePost } ) => {
 				{ __( 'Posts Page' ) }
 			</span>
 		);
+	} else if ( item.id === Number( privacyPolicyPageId ) ) {
+		suffix = (
+			<span className="edit-site-post-list__title-badge">
+				{ __( 'Privacy Policy' ) }
+			</span>
+		);
+	} else if ( item.id === Number( cartPageId ) ) {
+		suffix = (
+			<span className="edit-site-post-list__title-badge">
+				{ __( 'Cart' ) }
+			</span>
+		);
+	} else if ( item.id === Number( shopPageId ) ) {
+		suffix = (
+			<span className="edit-site-post-list__title-badge">
+				{ __( 'Shop' ) }
+			</span>
+		);
+	} else if ( item.id === Number( accountPageId ) ) {
+		suffix = (
+			<span className="edit-site-post-list__title-badge">
+				{ __( 'Account' ) }
+			</span>
+		);
+	} else if ( item.id === Number( checkoutPageId ) ) {
+		suffix = (
+			<span className="edit-site-post-list__title-badge">
+				{ __( 'Checkout' ) }
+			</span>
+		);
+	} else {
+		suffix = null;
 	}
 
 	return (