[Settings] Add Sidebar Items (#52691)

packages/js/settings-editor/changelog/52691-add-settings-sidebar-items

@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+Comment: Updates unreleased feature
+

packages/js/settings-editor/changelog/add-settings-route

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Create a route file to handle populating Settings

packages/js/settings-editor/package.json

@@ -50,12 +50,12 @@
 		"@wordpress/deprecated": "wp-6.0",
 		"@wordpress/edit-post": "wp-6.0",
 		"@wordpress/editor": "wp-6.0",
-		"@wordpress/edit-site": "6.11.0",
+		"@wordpress/edit-site": "6.10.0",
 		"@wordpress/element": "wp-6.0",
 		"@wordpress/hooks": "wp-6.0",
 		"@wordpress/html-entities": "wp-6.0",
 		"@wordpress/i18n": "wp-6.0",
-		"@wordpress/icons": "wp-6.0",
+		"@wordpress/icons": "10.11.0",
 		"@wordpress/interface": "wp-6.0",
 		"@wordpress/keyboard-shortcuts": "wp-6.0",
 		"@wordpress/keycodes": "wp-6.0",
@@ -63,6 +63,7 @@
 		"@wordpress/plugins": "wp-6.0",
 		"@wordpress/preferences": "wp-6.0",
 		"@wordpress/private-apis": "^1.6.0",
+		"@wordpress/router": "1.11.0",
 		"@wordpress/url": "wp-6.0",
 		"classnames": "^2.3.2",
 		"dompurify": "^2.4.7",

packages/js/settings-editor/src/index.tsx

@@ -3,14 +3,32 @@
  */
 import { createElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+/* eslint-disable @woocommerce/dependency-group */
+// @ts-ignore No types for this exist yet.
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+// @ts-ignore No types for this exist yet.
+import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
+import {
+	// @ts-expect-error No types for this exist yet.
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
+/* eslint-enable @woocommerce/dependency-group */
 
 /**
  * Internal dependencies
  */
 import { isGutenbergVersionAtLeast } from './utils';
 import { Layout } from './layout';
+import { useActiveRoute } from './route';
 
-const Sidebar = <div>Sidebar content goes here</div>;
+const { RouterProvider } = unlock( routerPrivateApis );
+const { GlobalStylesProvider } = unlock( editorPrivateApis );
+
+const SettingsLayout = () => {
+	const activeRoute = useActiveRoute();
+
+	return <Layout route={ activeRoute } />;
+};
 
 export const SettingsEditor = () => {
 	const isRequiredGutenbergVersion = isGutenbergVersionAtLeast( 19.0 );
@@ -28,12 +46,10 @@ export const SettingsEditor = () => {
 	}
 
 	return (
-		<Layout
-			route={ {
-				key: 'settings',
-				areas: { sidebar: Sidebar },
-				widths: {},
-			} }
-		/>
+		<GlobalStylesProvider>
+			<RouterProvider>
+				<SettingsLayout />
+			</RouterProvider>
+		</GlobalStylesProvider>
 	);
 };

packages/js/settings-editor/src/layout.tsx

@@ -31,21 +31,10 @@ import SiteHub from '@wordpress/edit-site/build-module/components/site-hub';
 import SidebarContent from '@wordpress/edit-site/build-module/components/sidebar';
 /* eslint-enable @woocommerce/dependency-group */
 
-type Route = {
-	key: string;
-	areas: {
-		sidebar: React.JSX.Element | React.FunctionComponent;
-		content?: React.JSX.Element | React.FunctionComponent;
-		edit?: React.JSX.Element | React.FunctionComponent;
-		mobile?: React.JSX.Element | React.FunctionComponent | boolean;
-		preview?: boolean;
-	};
-	widths?: {
-		content?: number;
-		edit?: number;
-		sidebar?: number;
-	};
-};
+/**
+ * Internal dependencies
+ */
+import { Route } from './types';
 
 const { NavigableRegion } = unlock( editorPrivateApis );
 

packages/js/settings-editor/src/route.tsx

@@ -0,0 +1,157 @@
+/**
+ * External dependencies
+ */
+import {
+	createElement,
+	useEffect,
+	useMemo,
+	useState,
+} from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	addAction,
+	applyFilters,
+	didFilter,
+	removeAction,
+} from '@wordpress/hooks';
+/* eslint-disable @woocommerce/dependency-group */
+// @ts-ignore No types for this exist yet.
+import SidebarNavigationScreen from '@wordpress/edit-site/build-module/components/sidebar-navigation-screen';
+// @ts-ignore No types for this exist yet.
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+// @ts-ignore No types for this exist yet.
+import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
+/* eslint-enable @woocommerce/dependency-group */
+
+/**
+ * Internal dependencies
+ */
+import { Sidebar } from './sidebar';
+import { Route, Location } from './types';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+const NotFound = () => {
+	return (
+		<h1 style={ { color: 'white' } }>
+			{ __( 'Page not found', 'woocommerce' ) }
+		</h1>
+	);
+};
+
+/**
+ * Default route when a page is not found.
+ *
+ */
+const getNotFoundRoute = ( page: string ): Route => ( {
+	key: page,
+	areas: {
+		sidebar: null,
+		content: <NotFound />,
+		edit: null,
+	},
+	widths: {
+		content: undefined,
+		edit: undefined,
+	},
+} );
+
+/**
+ * Creates a route configuration for legacy settings pages.
+ *
+ * @param {string} page - The page identifier.
+ */
+const getLegacyRoute = (
+	page: string,
+	pages: typeof window.wcSettings.admin.settingsPages
+): Route => ( {
+	key: page,
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ 'Settings Title TBD' }
+				isRoot
+				content={ <Sidebar pages={ pages } /> }
+			/>
+		),
+		content: <div>Content Placeholder: current tab: { page }</div>,
+		edit: null,
+	},
+	widths: {
+		content: undefined,
+		edit: undefined,
+	},
+} );
+
+const PAGES_FILTER = 'woocommerce_admin_settings_pages';
+
+const getPages = () => {
+	/**
+	 * Get the modern settings pages.
+	 *
+	 * @return {Record<string, Route>} The pages.
+	 */
+	return applyFilters( PAGES_FILTER, {} ) as Record< string, Route >;
+};
+
+/**
+ * Hook to get the modern settings pages.
+ *
+ * @return {Record<string, Route>} The pages.
+ */
+export function useModernRoutes() {
+	const [ routes, setRoutes ] = useState( getPages() );
+
+	/*
+	 * Handler for new pages being added after the initial filter has been run,
+	 * so that if any routing pages are added later, they can still be rendered
+	 * instead of falling back to the `NoMatch` page.
+	 */
+	useEffect( () => {
+		const handleHookAdded = ( hookName: string ) => {
+			if ( hookName !== PAGES_FILTER ) {
+				return;
+			}
+
+			const filterCount = didFilter( PAGES_FILTER );
+			if ( filterCount && filterCount > 0 ) {
+				setRoutes( getPages() );
+			}
+		};
+
+		const namespace = `woocommerce/woocommerce/watch_${ PAGES_FILTER }`;
+		addAction( 'hookAdded', namespace, handleHookAdded );
+
+		return () => {
+			removeAction( 'hookAdded', namespace );
+		};
+	}, [] );
+
+	return routes;
+}
+
+/**
+ * Hook to determine and return the active route based on the current path.
+ */
+export const useActiveRoute = () => {
+	const settingsPages = window.wcSettings?.admin?.settingsPages;
+	const location = useLocation() as Location;
+	const modernRoutes = useModernRoutes();
+
+	return useMemo( () => {
+		const { tab: page = 'general' } = location.params;
+		const pageSettings = settingsPages?.[ page ];
+
+		if ( ! pageSettings ) {
+			return getNotFoundRoute( page );
+		}
+
+		// Handle legacy pages.
+		if ( ! pageSettings.is_modern ) {
+			return getLegacyRoute( page, settingsPages );
+		}
+
+		// Handle modern pages.
+		return modernRoutes[ page ] || getNotFoundRoute( page );
+	}, [ settingsPages, location, modernRoutes ] );
+};

packages/js/settings-editor/src/sidebar/index.tsx

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+/* eslint-disable @woocommerce/dependency-group */
+// @ts-expect-error missing type.
+// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+import * as IconPackage from '@wordpress/icons';
+/* eslint-enable @woocommerce/dependency-group */
+
+/**
+ * Internal dependencies
+ */
+import { SettingItem } from './setting-item';
+
+const { Icon, ...icons } = IconPackage;
+
+export const Sidebar = ( {
+	pages,
+}: {
+	pages: typeof window.wcSettings.admin.settingsPages;
+} ) => {
+	return (
+		<ItemGroup>
+			{ Object.keys( pages ).map( ( slug ) => {
+				const { label, icon } = pages[ slug ];
+				return (
+					<SettingItem
+						key={ slug }
+						slug={ slug }
+						label={ label }
+						isActive={ false }
+						icon={
+							<Icon
+								icon={
+									icons[ icon as keyof typeof icons ] ||
+									icons.settings
+								}
+							/>
+						}
+					/>
+				);
+			} ) }
+		</ItemGroup>
+	);
+};

packages/js/settings-editor/src/sidebar/setting-item.tsx

@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+import classNames from 'classnames';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { addQueryArgs, getQueryArgs, removeQueryArgs } from '@wordpress/url';
+/* eslint-disable @woocommerce/dependency-group */
+// @ts-expect-error missing type.
+import { __experimentalHStack as HStack } from '@wordpress/components';
+// @ts-ignore No types for this exist yet.
+import SidebarNavigationItem from '@wordpress/edit-site/build-module/components/sidebar-navigation-item';
+// @ts-ignore No types for this exist yet.
+import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
+/* eslint-enable @woocommerce/dependency-group */
+
+const { useHistory, useLocation } = unlock( routerPrivateApis );
+
+type SettingItemProps = {
+	label: string;
+	slug: string;
+	icon: React.JSX.Element;
+	isActive: boolean;
+};
+
+function useLink(
+	params: Record< string, string | undefined >,
+	state?: Record< string, string | undefined >,
+	shouldReplace = false
+) {
+	const history = useHistory();
+	function onClick( event: Event ) {
+		event?.preventDefault();
+
+		if ( shouldReplace ) {
+			history.replace( params, state );
+		} else {
+			history.push( params, state );
+		}
+	}
+
+	const currentArgs = getQueryArgs( window.location.href );
+	const currentUrlWithoutArgs = removeQueryArgs(
+		window.location.href,
+		...Object.keys( currentArgs )
+	);
+
+	const newUrl = addQueryArgs( currentUrlWithoutArgs, params );
+
+	return {
+		href: newUrl,
+		onClick,
+	};
+}
+
+export function SettingItem( {
+	label,
+	slug,
+	icon,
+	isActive,
+}: SettingItemProps ) {
+	const {
+		params: { postType, page },
+	} = useLocation();
+
+	const linkInfo = useLink( {
+		page,
+		postType,
+		slug,
+	} );
+	return (
+		<HStack
+			justify="flex-start"
+			className={ classNames( 'edit-site-sidebar-setting-item', {
+				'is-selected': isActive,
+			} ) }
+		>
+			<SidebarNavigationItem
+				icon={ icon }
+				{ ...linkInfo }
+				aria-current={ isActive ? 'true' : undefined }
+			>
+				{ label }
+			</SidebarNavigationItem>
+		</HStack>
+	);
+}

packages/js/settings-editor/src/tests/route.test.tsx

@@ -0,0 +1,196 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+import { renderHook } from '@testing-library/react-hooks';
+import { screen, render } from '@testing-library/react';
+import { addAction, applyFilters, didFilter } from '@wordpress/hooks';
+/* eslint-disable @woocommerce/dependency-group */
+// @ts-ignore No types for this exist yet.
+import { privateApis } from '@wordpress/router';
+/* eslint-enable @woocommerce/dependency-group */
+
+/**
+ * Internal dependencies
+ */
+import { useActiveRoute, useModernRoutes } from '../route';
+
+// Mock external dependencies
+jest.mock( '@wordpress/hooks', () => ( {
+	addAction: jest.fn(),
+	removeAction: jest.fn(),
+	applyFilters: jest.fn(),
+	didFilter: jest.fn(),
+} ) );
+
+jest.mock( '@wordpress/router', () => ( {
+	privateApis: {
+		useLocation: jest.fn(),
+	},
+} ) );
+
+jest.mock( '@wordpress/edit-site/build-module/lock-unlock', () => ( {
+	unlock: jest.fn( ( apis ) => apis ),
+} ) );
+
+jest.mock(
+	'@wordpress/edit-site/build-module/components/sidebar-navigation-screen',
+	() => ( {
+		__esModule: true,
+		default: ( { children }: { children: React.ReactNode } ) => (
+			<div data-testid="sidebar-navigation-screen">{ children }</div>
+		),
+	} )
+);
+
+jest.mock( '../sidebar', () => ( {
+	__esModule: true,
+	Sidebar: jest.fn(),
+} ) );
+
+const mockSettingsPages = {
+	general: {
+		label: 'General',
+		icon: 'settings',
+		slug: 'general',
+		sections: [
+			{
+				label: 'General',
+				settings: [
+					{
+						title: 'Store Address',
+						type: 'title',
+						desc: 'This is where your business is located.',
+						id: 'store_address',
+						value: false,
+					},
+				],
+			},
+		],
+		is_modern: false,
+	},
+};
+
+describe( 'route.tsx', () => {
+	beforeEach( () => {
+		// Reset all mocks
+		jest.clearAllMocks();
+
+		// Mock window.wcSettings
+		window.wcSettings = {
+			admin: {
+				settingsPages: mockSettingsPages,
+			},
+		};
+
+		// Mock default location
+		(
+			privateApis as {
+				useLocation: jest.Mock;
+			}
+		 ).useLocation.mockReturnValue( {
+			params: { tab: 'general' },
+		} );
+	} );
+
+	describe( 'useActiveRoute', () => {
+		it( 'should return legacy route for non-modern pages', () => {
+			const { result } = renderHook( () => useActiveRoute() );
+
+			expect( result.current.key ).toBe( 'general' );
+			expect( result.current.areas.content ).toBeDefined();
+			expect( result.current.areas.sidebar ).toBeDefined();
+
+			render( result.current.areas.sidebar as JSX.Element );
+			expect(
+				screen.getByTestId( 'sidebar-navigation-screen' )
+			).toBeInTheDocument();
+
+			expect( result.current.areas.edit ).toBeNull();
+		} );
+
+		it( 'should return not found route for non-existent pages', () => {
+			// Mock location for non-existent page
+			(
+				privateApis as {
+					useLocation: jest.Mock;
+				}
+			 ).useLocation.mockReturnValue( {
+				params: { tab: 'non-existent' },
+			} );
+
+			const { result } = renderHook( () => useActiveRoute() );
+
+			expect( result.current.key ).toBe( 'non-existent' );
+			render( result.current.areas.content as JSX.Element );
+			expect( screen.getByText( 'Page not found' ) ).toBeInTheDocument();
+			expect( result.current.areas.sidebar ).toBeDefined();
+		} );
+
+		it( 'should return modern route for modern pages', () => {
+			(
+				privateApis as {
+					useLocation: jest.Mock;
+				}
+			 ).useLocation.mockReturnValue( {
+				params: { tab: 'modern' },
+			} );
+
+			// Mock a modern page
+			window.wcSettings = {
+				admin: {
+					settingsPages: {
+						modern: {
+							is_modern: true,
+							label: 'Modern',
+							slug: 'modern',
+							icon: 'settings',
+							sections: [],
+						},
+					},
+				},
+			};
+
+			( applyFilters as jest.Mock ).mockReturnValue( {
+				modern: {
+					key: 'modern',
+					areas: {
+						sidebar: null,
+						content: <div>Modern Page</div>,
+					},
+				},
+			} );
+
+			const { result } = renderHook( () => useActiveRoute() );
+			expect( result.current.key ).toBe( 'modern' );
+		} );
+	} );
+
+	describe( 'useModernRoutes', () => {
+		it( 'should update routes when new hooks are added', () => {
+			renderHook( () => useModernRoutes() );
+
+			// Simulate hook added
+			( didFilter as jest.Mock ).mockReturnValue( 1 );
+			const hookAddedCallback = ( addAction as jest.Mock ).mock
+				.calls[ 0 ][ 2 ];
+			hookAddedCallback( 'woocommerce_admin_settings_pages' );
+
+			expect( applyFilters ).toHaveBeenCalledWith(
+				'woocommerce_admin_settings_pages',
+				{}
+			);
+		} );
+
+		it( 'should not update routes for unrelated hooks', () => {
+			renderHook( () => useModernRoutes() );
+
+			// Simulate unrelated hook added
+			const hookAddedCallback = ( addAction as jest.Mock ).mock
+				.calls[ 0 ][ 2 ];
+			hookAddedCallback( 'unrelated_hook' );
+
+			expect( applyFilters ).toHaveBeenCalledTimes( 1 ); // Only initial call
+		} );
+	} );
+} );

packages/js/settings-editor/src/types.ts

@@ -0,0 +1,51 @@
+export type Route = {
+	/**
+	 * The page id.
+	 */
+	key: string;
+	areas: {
+		/**
+		 * The sidebar component.
+		 */
+		sidebar: React.JSX.Element | React.ComponentType | null;
+		/**
+		 * The content component.
+		 */
+		content?: React.JSX.Element | React.ComponentType;
+		/**
+		 * The edit component.
+		 */
+		edit?: React.JSX.Element | React.ComponentType | null;
+		/**
+		 * The mobile component.
+		 */
+		mobile?: React.JSX.Element | React.ComponentType | boolean;
+		/**
+		 * Whether the page can be previewed.
+		 */
+		preview?: boolean;
+	};
+	widths?: {
+		/**
+		 * The sidebar width.
+		 */
+		sidebar?: number;
+		/**
+		 * The main content width.
+		 */
+		content?: number;
+		/**
+		 * The edit component width.
+		 */
+		edit?: number;
+	};
+};
+
+export type Location = {
+	pathname: string;
+	search: string;
+	hash: string;
+	state: null;
+	key: string;
+	params: Record< string, string >;
+};

packages/js/settings-editor/typings/global.d.ts

@@ -0,0 +1,58 @@
+type SettingField = {
+	title?: string;
+	type: string;
+	id?: string;
+	desc?: string;
+	desc_tip?: boolean | string;
+	default?: string | number | boolean | object;
+	value: string | number | boolean | object;
+	placeholder?: string;
+	custom_attributes?: {
+		[key: string]: string | number;
+	};
+	options?: {
+		[key: string]: string;
+	};
+	css?: string;
+	class?: string;
+	checkboxgroup?: 'start' | 'end' | '';
+	autoload?: boolean;
+	show_if_checked?: string;
+	content?: string;
+	[key: string]: any;
+};
+
+type SettingsSection = {
+	label: string;
+	settings: SettingField[];
+};
+
+type SettingsPage = {
+	label: string;
+	slug: string;
+	icon: string;
+	sections: SettingsSection[];
+	is_modern: boolean;
+};
+
+type SettingsData = {
+	[key: string]: SettingsPage;
+};
+
+declare global {
+	interface Window {
+		wcSettings: {
+			admin: {
+				settingsPages: SettingsData;
+			};
+		};
+		wcTracks: {
+			isEnabled: boolean;
+			validateEvent: ( name: string, properties: unknown ) => void;
+			recordEvent: ( name: string, properties: unknown ) => void;
+		};
+	}
+}
+
+/*~ If your module exports nothing, you'll need this line. Otherwise, delete it */
+export {};

plugins/woocommerce/changelog/52691-add-settings-sidebar-items

@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+Comment: Updates unreleased feature
+

plugins/woocommerce/client/admin/client/settings/settings.scss

@@ -5,7 +5,7 @@ body.woocommerce_page_wc-settings {
 		margin-left: 0 !important;
 	}
 	#wpadminbar {
-		display: block;
+		display: none;
 	}
 
 	#adminmenumain,
@@ -19,8 +19,8 @@ body.woocommerce_page_wc-settings {
 
 	#wc-settings-page {
 		// Because this uses negative margins, we have to compensate for the height.
-		margin-top: -14px;
-		min-height: calc(100vh - #{$admin-bar-height});
+		margin-top: -46px;
+		min-height: 100vh;
 		position: absolute;
 		top: 0;
 		right: 0;
@@ -28,19 +28,23 @@ body.woocommerce_page_wc-settings {
 		left: 0;
 		display: flex !important;
 
-		@media (max-width: 782px) {
-			margin-top: 0;
-			min-height: calc(100vh - 46px);
-		}
-
 		.edit-site-layout {
-			background: #1d2327;
+			background: #1e1e1e;
 			flex: 1 1 0;
 			min-height: 100%;
 			height: auto;
 		}
 	}
 
+	.edit-site-layout__area {
+		background: #f0f0f1;
+		color: #1e1e1e;
+	}
+
+	.edit-site-site-hub_toggle-command-center {
+		display: none;
+	}
+
 	@media (min-width: 782px) {
 		.edit-site-layout__area {
 			border-radius: 8px;

plugins/woocommerce/includes/admin/settings/class-wc-settings-accounts.php

@@ -28,6 +28,13 @@ class WC_Settings_Accounts extends WC_Settings_Page {
 		parent::__construct();
 	}
 
+	/**
+	 * Setting page icon.
+	 *
+	 * @var string
+	 */
+	public $icon = 'people';
+
 	/**
 	 * Get settings array.
 	 *

plugins/woocommerce/includes/admin/settings/class-wc-settings-advanced.php

@@ -32,6 +32,13 @@ class WC_Settings_Advanced extends WC_Settings_Page {
 		$this->notices();
 	}
 
+	/**
+	 * Setting page icon.
+	 *
+	 * @var string
+	 */
+	public $icon = 'more';
+
 	/**
 	 * Get own sections.
 	 *

plugins/woocommerce/includes/admin/settings/class-wc-settings-emails.php

@@ -29,6 +29,13 @@ class WC_Settings_Emails extends WC_Settings_Page {
 		parent::__construct();
 	}
 
+	/**
+	 * Setting page icon.
+	 *
+	 * @var string
+	 */
+	public $icon = 'atSymbol';
+
 	/**
 	 * Get own sections.
 	 *

plugins/woocommerce/includes/admin/settings/class-wc-settings-general.php

@@ -26,6 +26,13 @@ class WC_Settings_General extends WC_Settings_Page {
 		parent::__construct();
 	}
 
+	/**
+	 * Setting page icon.
+	 *
+	 * @var string
+	 */
+	public $icon = 'cog';
+
 	/**
 	 * Get settings or the default section.
 	 *

plugins/woocommerce/includes/admin/settings/class-wc-settings-integrations.php

@@ -29,6 +29,13 @@ if ( ! class_exists( 'WC_Settings_Integrations', false ) ) :
 			}
 		}
 
+		/**
+		 * Setting page icon.
+		 *
+		 * @var string
+		 */
+		public $icon = 'plugins';
+
 		/**
 		 * Get own sections.
 		 *

plugins/woocommerce/includes/admin/settings/class-wc-settings-page.php

@@ -24,6 +24,13 @@ if ( ! class_exists( 'WC_Settings_Page', false ) ) :
 		 */
 		protected $id = '';
 
+		/**
+		 * Setting page icon.
+		 *
+		 * @var string
+		 */
+		public $icon = 'settings';
+
 		/**
 		 * Setting page label.
 		 *
@@ -101,6 +108,8 @@ if ( ! class_exists( 'WC_Settings_Page', false ) ) :
 					? $this->get_settings_for_section( $section_id )
 					: $this->get_settings();
 
+				$section_settings_data = array();
+
 				// Loop through each setting in the section and add the value to the settings data.
 				foreach ( $section_settings as $section_setting ) {
 					if ( isset( $section_setting['id'] ) ) {
@@ -111,11 +120,21 @@ if ( ! class_exists( 'WC_Settings_Page', false ) ) :
 							: get_option( $section_setting['id'] );
 					}
 
-					$sections_data[] = $section_setting;
+					$section_settings_data[] = $section_setting;
+
+					$sections_data[ $section_id ] = array(
+						'label'    => html_entity_decode( $section_label ),
+						'settings' => $section_settings_data,
+					);
 				}
 			}
 
-			$pages[ $this->id ] = $sections_data;
+			$pages[ $this->id ] = array(
+				'label'    => html_entity_decode( $this->label ),
+				'slug'     => $this->id,
+				'icon'     => $this->icon,
+				'sections' => $sections_data,
+			);
 
 			return $pages;
 		}

plugins/woocommerce/includes/admin/settings/class-wc-settings-payment-gateways.php

@@ -32,6 +32,13 @@ class WC_Settings_Payment_Gateways extends WC_Settings_Page {
 		parent::__construct();
 	}
 
+	/**
+	 * Setting page icon.
+	 *
+	 * @var string
+	 */
+	public $icon = 'payment';
+
 	/**
 	 * Get own sections.
 	 *

plugins/woocommerce/includes/admin/settings/class-wc-settings-products.php

@@ -31,6 +31,13 @@ class WC_Settings_Products extends WC_Settings_Page {
 		parent::__construct();
 	}
 
+	/**
+	 * Setting page icon.
+	 *
+	 * @var string
+	 */
+	public $icon = 'box';
+
 	/**
 	 * Get own sections.
 	 *

plugins/woocommerce/includes/admin/settings/class-wc-settings-shipping.php

@@ -30,6 +30,13 @@ class WC_Settings_Shipping extends WC_Settings_Page {
 		parent::__construct();
 	}
 
+	/**
+	 * Setting page icon.
+	 *
+	 * @var string
+	 */
+	public $icon = 'shipping';
+
 	/**
 	 * Add this page to settings.
 	 *

plugins/woocommerce/includes/admin/settings/class-wc-settings-tax.php

@@ -35,6 +35,13 @@ class WC_Settings_Tax extends WC_Settings_Page {
 		}
 	}
 
+	/**
+	 * Setting page icon.
+	 *
+	 * @var string
+	 */
+	public $icon = 'percent';
+
 	/**
 	 * Creates the React mount point for the embedded banner.
 	 */

plugins/woocommerce/src/Admin/Features/Settings.php

@@ -89,6 +89,15 @@ class Settings {
 			);
 			// phpcs:enable WordPress.WP.EnqueuedResourceParameters.MissingVersion
 			wp_enqueue_style( 'wp-gutenberg-posts-dashboard' );
+
+			// phpcs:disable WordPress.WP.EnqueuedResourceParameters.MissingVersion
+			wp_register_style(
+				'wp-gutenberg-edit-site',
+				gutenberg_url( 'build/edit-site/style.css', __FILE__ ),
+				array( 'wp-components' ),
+			);
+			// phpcs:enable WordPress.WP.EnqueuedResourceParameters.MissingVersion
+			wp_enqueue_style( 'wp-gutenberg-edit-site' );
 		}
 	}
 

plugins/woocommerce/tests/php/includes/settings/class-wc-settings-page-test.php

@@ -342,13 +342,14 @@ HTML;
 	 * Test for add_settings_page_data.
 	 */
 	public function test_add_settings_page_data() {
-		$migration           = new WC_Settings_Migration_Test();
-		$setting_data        = $migration->add_settings_page_data( array() );
-		$migration_page_data = $setting_data[ $migration->get_id() ];
+		$migration               = new WC_Settings_Migration_Test();
+		$setting_data            = $migration->add_settings_page_data( array() );
+		$migration_page_data     = $setting_data[ $migration->get_id() ];
+		$migration_sections_data = $migration_page_data['sections'];
 
 		$this->assertTrue( isset( $migration_page_data ) );
-		$this->assertEquals( count( $migration->get_sections() ), count( $migration_page_data ) );
-		$this->assertEquals( $migration_page_data[0]['title'], 'Default Section' );
-		$this->assertEquals( $migration_page_data[1]['title'], 'Foobar Section' );
+		$this->assertEquals( count( $migration->get_sections() ), count( $migration_sections_data ) );
+		$this->assertEquals( $migration_sections_data['']['settings'][0]['title'], 'Default Section' );
+		$this->assertEquals( $migration_sections_data['foobar']['settings'][0]['title'], 'Foobar Section' );
 	}
 }

pnpm-lock.yaml

@@ -1043,7 +1043,7 @@ importers:
         version: link:../experimental
       '@wordpress/components':
         specifier: wp-6.0
-        version: 19.8.5(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
+        version: 19.8.5(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
       '@wordpress/compose':
         specifier: wp-6.0
         version: 5.4.1(react@17.0.2)
@@ -1722,7 +1722,7 @@ importers:
         version: link:../components
       '@wordpress/components':
         specifier: ^19.17.0
-        version: 19.17.0(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
+        version: 19.17.0(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
       '@wordpress/element':
         specifier: ^4.20.0
         version: 4.20.0
@@ -2226,7 +2226,7 @@ importers:
         version: 6.3.1
       '@wordpress/components':
         specifier: wp-6.0
-        version: 19.8.5(@types/react@17.0.71)(react-dom@18.3.1(react@17.0.2))(react-with-direction@1.4.0(react-dom@18.3.1(react@17.0.2))(react@17.0.2))(react@17.0.2)
+        version: 19.8.5(react-dom@18.3.1(react@17.0.2))(react-with-direction@1.4.0(react-dom@18.3.1(react@17.0.2))(react@17.0.2))(react@17.0.2)
       '@wordpress/compose':
         specifier: wp-6.0
         version: 5.4.1(react@17.0.2)
@@ -2918,8 +2918,8 @@ importers:
         specifier: wp-6.0
         version: 6.3.19(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
       '@wordpress/edit-site':
-        specifier: 6.11.0
-        version: 6.11.0(@babel/helper-module-imports@7.24.7)(@babel/types@7.25.2)(@emotion/is-prop-valid@1.2.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(babel-plugin-macros@3.1.0)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
+        specifier: 6.10.0
+        version: 6.10.0(@emotion/is-prop-valid@1.2.1)(@preact/signals-core@1.5.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
       '@wordpress/editor':
         specifier: wp-6.0
         version: 12.5.11(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
@@ -2936,8 +2936,8 @@ importers:
         specifier: wp-6.0
         version: 4.6.1
       '@wordpress/icons':
-        specifier: wp-6.0
-        version: 8.2.3
+        specifier: 10.11.0
+        version: 10.11.0
       '@wordpress/interface':
         specifier: wp-6.0
         version: 4.5.7(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
@@ -2959,6 +2959,9 @@ importers:
       '@wordpress/private-apis':
         specifier: ^1.6.0
         version: 1.10.0
+      '@wordpress/router':
+        specifier: 1.11.0
+        version: 1.11.0(react@17.0.2)
       '@wordpress/url':
         specifier: wp-6.0
         version: 3.7.1
@@ -11105,6 +11108,13 @@ packages:
       react: ^18.0.0
       react-dom: ^18.0.0
 
+  '@wordpress/block-library@9.11.0':
+    resolution: {integrity: sha512-7DBiw/OuBrPwDWlHj4Co5lQynhHAz/D4c+0jnb4hsH0Kdxh45B3BXvMzE5wVq8Tv03tJMBIptuZ1qMC7LHNRJg==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+
   '@wordpress/block-serialization-default-parser@4.47.0':
     resolution: {integrity: sha512-4y8Gb+m1CDNlfflbpxrFPHeug94NFQABlbFOJZfo2/XOzMuG31mijskk8H1SlTrqwVgoUs6rejFEMXKagdcI0w==}
     engines: {node: '>=12'}
@@ -11344,6 +11354,13 @@ packages:
     peerDependencies:
       react: ^18.0.0
 
+  '@wordpress/core-commands@1.11.0':
+    resolution: {integrity: sha512-gUrx4RkoPbO5bAaIqjqk0USpDTRLz9gyjtoUUtw2bbzCjkBkA2QeFKDrZbSRrlZysXCw5GH/fsybll8nCDIdLQ==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+
   '@wordpress/core-data@4.4.5':
     resolution: {integrity: sha512-vhMbz/Q3xEMWTSFMs0D6n93qFSOhUZr/EgtRhLGRHdjskfgegFTlx13HrhDZ+U3xzkv1b8mH1klk4aZX+f0B8Q==}
     engines: {node: '>=12'}
@@ -11695,8 +11712,8 @@ packages:
       react: ^18.0.0
       react-dom: ^18.0.0
 
-  '@wordpress/edit-site@6.11.0':
-    resolution: {integrity: sha512-IHRaOOY/hC6avtjf8AkPcA3HkHPg8aDDfDKGfDHMfFIt5cRf6SXaNe0qrV1g+LLryG+MPjiLVpQB3M/C7UxDTg==}
+  '@wordpress/edit-site@6.10.0':
+    resolution: {integrity: sha512-rc8yczDTyonUOTCt+4gUWeFeTlf9wd9UxHOK7/3nvqsgZPcnnSB9khPWuZn4SYKnYkIi1BCCVr3EFvN5n9bbQg==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
     peerDependencies:
       react: ^18.0.0
@@ -11723,6 +11740,13 @@ packages:
       react: ^18.0.0
       react-dom: ^18.0.0
 
+  '@wordpress/editor@14.11.0':
+    resolution: {integrity: sha512-XNwBZ54yQrZszum7OW4wAbFFs7lKlwTkj9ILnbc+a6fuCE9Pg6On/vbtDmRJVXi0TrRb+mY2VhNrsXJybdleQQ==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+
   '@wordpress/editor@14.8.12':
     resolution: {integrity: sha512-TSdtaGUTXaj57un5ckOeFXRvRXHCfsmesPwhgPevOyoG2zamWfvy8Gl2h0jsyFxX0kM3sCkxcdlI7W/bih/i6g==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -11963,6 +11987,10 @@ packages:
     resolution: {integrity: sha512-41HaxMtq0WZF37mpZ1RQ1s1J3ia5gHFUd/uGhP9p1dhzEFYALxKVTB0Gy3cJhT0CslKeEwYx2XQIP1ZaCKNakQ==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
 
+  '@wordpress/icons@10.11.0':
+    resolution: {integrity: sha512-RMetpFwUIeh3sVj2+p6+QX5AW8pF7DvQzxH9jUr8YjaF2iLE64vy6m0cZz/X8xkSktHrXMuPJIr7YIVF20TEyw==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
   '@wordpress/icons@10.6.0':
     resolution: {integrity: sha512-dy58bQFVee2izXA65Ptar1f8mVhL1hilOJI3BWbLWmxHr9H4VjI0ohjW4ZkAhahBG2yIvKZja/HaFMTs5O/7Xg==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -11999,6 +12027,10 @@ packages:
     resolution: {integrity: sha512-Z8F+ledkfkcKDuS1c/RkM0dEWdfv2AXs6bCgey89p0atJSscf7qYbMJR9zE5rZ5aqXyFfV0DAFKJEgayNqneNQ==}
     engines: {node: '>=12'}
 
+  '@wordpress/interactivity-router@2.11.0':
+    resolution: {integrity: sha512-p+PTsIpqiLU0+C8eqJYDBYF3fDBK1Ud8dagoBw/hpYZRFLgipWPeitQ6rGF1p85gJWQGeiZ3ENg5v621kFcNQQ==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+
   '@wordpress/interactivity@3.0.1':
     resolution: {integrity: sha512-UCZvDUJ1AB9IQHjjPHqSDDzj4Y8/BaQruzfJe5II86FruZXBHZXx1DAZb5sAe4GCOAfatbHsIFnoUAEhLDJdjg==}
     engines: {node: '>=12'}
@@ -12591,6 +12623,12 @@ packages:
     peerDependencies:
       react: ^18.0.0
 
+  '@wordpress/router@1.11.0':
+    resolution: {integrity: sha512-sPcJ0uLXNmMW0hi+zpzvZkOXHbh//U32ZbZs6EHVmpjOk4CD2QNXkEPctFiU8UwOucMOZdkdB2WJcLE4GRkGCA==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+    peerDependencies:
+      react: ^18.0.0
+
   '@wordpress/scripts@12.6.1':
     resolution: {integrity: sha512-pDLtACFrP5gUA414qrE49dUrR7yMy40+//1e/5Nx821lnmDb7GAGWGo1gX4lJ2gbfSjePwmRoZe6Mph87vSnLQ==}
     engines: {node: '>=10', npm: '>=6.9'}
@@ -12838,6 +12876,13 @@ packages:
       react: ^18.0.0
       react-dom: ^18.0.0
 
+  '@wordpress/widgets@4.11.0':
+    resolution: {integrity: sha512-tMx/QnUEfaJ3X6TdKG5ojuvHQ/DlxGIOAnWDU1b8tF7JKkk8aGnG1Fzfwjwfqkc07V3RNA50p+9eYCfqMgEMug==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+
   '@wordpress/wordcount@3.47.0':
     resolution: {integrity: sha512-s+zDLgdU4YuyguBOJ0PLEJLr5g/vFgYb0c2HPhh6eRCcyPAhyMPV6pDD9ME8cTwddTCxnVtucrx9c1sFn9n00g==}
     engines: {node: '>=12'}
@@ -26352,7 +26397,7 @@ snapshots:
       '@wordpress/base-styles': 4.48.0
       '@wordpress/components': 27.5.0(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
       '@wordpress/data': 10.6.0(react@17.0.2)
-      '@wordpress/icons': 9.48.0
+      '@wordpress/icons': 9.49.0
       '@wordpress/react-i18n': 3.55.0
       canvas-confetti: 1.9.2
       classnames: 2.3.2
@@ -26383,7 +26428,7 @@ snapshots:
       '@wordpress/base-styles': 4.48.0
       '@wordpress/components': 27.5.0(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
       '@wordpress/data': 6.6.1(react@17.0.2)
-      '@wordpress/icons': 9.48.0
+      '@wordpress/icons': 9.49.0
       '@wordpress/react-i18n': 3.55.0
       canvas-confetti: 1.9.2
       classnames: 2.3.2
@@ -30861,7 +30906,7 @@ snapshots:
 
   '@emotion/react@11.11.1(@types/react@17.0.71)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
+      '@babel/runtime': 7.25.7
       '@emotion/babel-plugin': 11.11.0
       '@emotion/cache': 11.11.0
       '@emotion/serialize': 1.1.2
@@ -30875,6 +30920,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@emotion/react@11.11.1(react@17.0.2)':
+    dependencies:
+      '@babel/runtime': 7.25.7
+      '@emotion/babel-plugin': 11.11.0
+      '@emotion/cache': 11.11.0
+      '@emotion/serialize': 1.1.2
+      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@17.0.2)
+      '@emotion/utils': 1.2.1
+      '@emotion/weak-memoize': 0.3.1
+      hoist-non-react-statics: 3.3.2
+      react: 17.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   '@emotion/serialize@1.1.2':
     dependencies:
       '@emotion/hash': 0.9.1
@@ -30915,6 +30974,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@emotion/styled@11.11.0(@emotion/react@11.11.1(react@17.0.2))(react@17.0.2)':
+    dependencies:
+      '@babel/runtime': 7.25.7
+      '@emotion/babel-plugin': 11.11.0
+      '@emotion/is-prop-valid': 1.2.1
+      '@emotion/react': 11.11.1(react@17.0.2)
+      '@emotion/serialize': 1.1.2
+      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@17.0.2)
+      '@emotion/utils': 1.2.1
+      react: 17.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   '@emotion/unitless@0.8.1': {}
 
   '@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@17.0.2)':
@@ -39850,7 +39922,7 @@ snapshots:
       '@wordpress/hooks': 3.57.0
       '@wordpress/html-entities': 3.57.0
       '@wordpress/i18n': 4.57.0
-      '@wordpress/icons': 9.48.0
+      '@wordpress/icons': 9.49.0
       '@wordpress/is-shallow-equal': 4.57.0
       '@wordpress/keyboard-shortcuts': 4.24.0(react@17.0.2)
       '@wordpress/keycodes': 3.57.0
@@ -39911,7 +39983,7 @@ snapshots:
       '@wordpress/hooks': 3.57.0
       '@wordpress/html-entities': 3.57.0
       '@wordpress/i18n': 4.57.0
-      '@wordpress/icons': 9.48.0
+      '@wordpress/icons': 9.49.0
       '@wordpress/is-shallow-equal': 4.57.0
       '@wordpress/keyboard-shortcuts': 4.24.0(react@18.3.1)
       '@wordpress/keycodes': 3.57.0
@@ -40028,7 +40100,7 @@ snapshots:
       '@wordpress/hooks': 4.10.0
       '@wordpress/html-entities': 4.10.0
       '@wordpress/i18n': 5.10.0
-      '@wordpress/icons': 10.10.0(react@18.3.1)
+      '@wordpress/icons': 10.11.0
       '@wordpress/is-shallow-equal': 5.10.0
       '@wordpress/keyboard-shortcuts': 5.10.0(react@18.3.1)
       '@wordpress/keycodes': 4.10.0
@@ -40086,7 +40158,7 @@ snapshots:
       '@wordpress/hooks': 4.10.0
       '@wordpress/html-entities': 4.10.0
       '@wordpress/i18n': 5.10.0
-      '@wordpress/icons': 10.10.0(react@17.0.2)
+      '@wordpress/icons': 10.11.0
       '@wordpress/is-shallow-equal': 5.10.0
       '@wordpress/keyboard-shortcuts': 5.10.0(react@17.0.2)
       '@wordpress/keycodes': 4.10.0
@@ -40327,7 +40399,7 @@ snapshots:
       '@wordpress/hooks': 3.57.0
       '@wordpress/html-entities': 3.57.0
       '@wordpress/i18n': 4.57.0
-      '@wordpress/icons': 9.48.0
+      '@wordpress/icons': 9.49.0
       '@wordpress/interactivity': 3.0.1(@preact/signals-core@1.5.1)
       '@wordpress/keycodes': 3.57.0
       '@wordpress/notices': 4.15.0(react@17.0.2)
@@ -40363,6 +40435,64 @@ snapshots:
       - utf-8-validate
       - vite
 
+  '@wordpress/block-library@9.11.0(@emotion/is-prop-valid@1.2.1)(@preact/signals-core@1.5.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)':
+    dependencies:
+      '@babel/runtime': 7.25.7
+      '@wordpress/a11y': 3.6.1
+      '@wordpress/api-fetch': 6.3.1
+      '@wordpress/autop': 3.16.0
+      '@wordpress/blob': 3.6.1
+      '@wordpress/block-editor': 9.8.0(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@wordpress/blocks': 12.35.0(react@17.0.2)
+      '@wordpress/components': 19.17.0(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
+      '@wordpress/compose': 5.4.2(react@17.0.2)
+      '@wordpress/core-data': 4.4.6(react@17.0.2)
+      '@wordpress/data': 6.6.2(react@17.0.2)
+      '@wordpress/date': 4.6.1
+      '@wordpress/deprecated': 3.6.1
+      '@wordpress/dom': 3.6.1
+      '@wordpress/element': 4.20.0
+      '@wordpress/escape-html': 3.10.0
+      '@wordpress/hooks': 3.6.1
+      '@wordpress/html-entities': 3.6.1
+      '@wordpress/i18n': 4.58.0
+      '@wordpress/icons': 8.4.0
+      '@wordpress/interactivity': 3.0.1(@preact/signals-core@1.5.1)
+      '@wordpress/interactivity-router': 2.11.0(@preact/signals-core@1.5.1)
+      '@wordpress/keyboard-shortcuts': 3.4.2(react@17.0.2)
+      '@wordpress/keycodes': 3.58.0
+      '@wordpress/notices': 3.12.0(react@17.0.2)
+      '@wordpress/patterns': 2.10.0(@emotion/is-prop-valid@1.2.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@wordpress/primitives': 3.4.1
+      '@wordpress/private-apis': 1.10.0
+      '@wordpress/reusable-blocks': 5.10.0(@emotion/is-prop-valid@1.2.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@wordpress/rich-text': 5.4.3(react@17.0.2)
+      '@wordpress/server-side-render': 3.10.0(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
+      '@wordpress/url': 3.7.1
+      '@wordpress/viewport': 4.20.0(react@17.0.2)
+      '@wordpress/wordcount': 3.47.0
+      change-case: 4.1.2
+      clsx: 2.1.1
+      colord: 2.9.3
+      escape-html: 1.0.3
+      fast-average-color: 9.4.0
+      fast-deep-equal: 3.1.3
+      memize: 2.1.0
+      react: 17.0.2
+      react-dom: 17.0.2(react@17.0.2)
+      remove-accents: 0.5.0
+      uuid: 9.0.1
+    transitivePeerDependencies:
+      - '@emotion/is-prop-valid'
+      - '@preact/signals-core'
+      - '@preact/signals-react'
+      - '@types/react'
+      - '@types/react-dom'
+      - bufferutil
+      - react-with-direction
+      - supports-color
+      - utf-8-validate
+
   '@wordpress/block-serialization-default-parser@4.47.0':
     dependencies:
       '@babel/runtime': 7.25.7
@@ -40717,7 +40847,7 @@ snapshots:
       '@wordpress/data': 10.10.0(react@18.3.1)
       '@wordpress/element': 6.10.0
       '@wordpress/i18n': 5.10.0
-      '@wordpress/icons': 10.10.0(react@18.3.1)
+      '@wordpress/icons': 10.11.0
       '@wordpress/keyboard-shortcuts': 5.10.0(react@18.3.1)
       '@wordpress/private-apis': 1.10.0
       clsx: 2.1.1
@@ -40737,7 +40867,7 @@ snapshots:
       '@wordpress/data': 10.10.0(react@17.0.2)
       '@wordpress/element': 6.10.0
       '@wordpress/i18n': 5.10.0
-      '@wordpress/icons': 10.10.0(react@17.0.2)
+      '@wordpress/icons': 10.11.0
       '@wordpress/keyboard-shortcuts': 5.10.0(react@17.0.2)
       '@wordpress/private-apis': 1.10.0
       clsx: 2.1.1
@@ -40896,6 +41026,55 @@ snapshots:
       - react-with-direction
       - supports-color
 
+  '@wordpress/components@19.17.0(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)':
+    dependencies:
+      '@babel/runtime': 7.23.5
+      '@emotion/cache': 11.11.0
+      '@emotion/css': 11.11.2
+      '@emotion/react': 11.11.1(react@17.0.2)
+      '@emotion/serialize': 1.1.2
+      '@emotion/styled': 11.11.0(@emotion/react@11.11.1(react@17.0.2))(react@17.0.2)
+      '@emotion/utils': 1.0.0
+      '@floating-ui/react-dom': 0.6.3(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@use-gesture/react': 10.3.0(react@17.0.2)
+      '@wordpress/a11y': 3.47.0
+      '@wordpress/compose': 5.20.0(react@17.0.2)
+      '@wordpress/date': 4.44.0
+      '@wordpress/deprecated': 3.41.0
+      '@wordpress/dom': 3.27.0
+      '@wordpress/element': 4.20.0
+      '@wordpress/escape-html': 2.47.0
+      '@wordpress/hooks': 3.57.0
+      '@wordpress/i18n': 4.47.0
+      '@wordpress/icons': 9.36.0
+      '@wordpress/is-shallow-equal': 4.24.0
+      '@wordpress/keycodes': 3.47.0
+      '@wordpress/primitives': 3.56.0
+      '@wordpress/rich-text': 5.20.0(react@17.0.2)
+      '@wordpress/warning': 2.47.0
+      classnames: 2.3.2
+      colord: 2.9.3
+      dom-scroll-into-view: 1.2.1
+      downshift: 6.1.12(react@17.0.2)
+      framer-motion: 6.5.1(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      gradient-parser: 0.1.5
+      highlight-words-core: 1.2.2
+      lodash: 4.17.21
+      memize: 1.1.0
+      moment: 2.29.4
+      re-resizable: 6.9.11(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      react: 17.0.2
+      react-colorful: 5.6.1(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      react-dates: 21.8.0(@babel/runtime@7.23.5)(moment@2.29.4)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
+      react-dom: 17.0.2(react@17.0.2)
+      reakit: 1.3.11(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      remove-accents: 0.4.4
+      uuid: 8.3.2
+    transitivePeerDependencies:
+      - '@types/react'
+      - react-with-direction
+      - supports-color
+
   '@wordpress/components@19.8.5(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)':
     dependencies:
       '@babel/runtime': 7.23.5
@@ -40992,6 +41171,102 @@ snapshots:
       - react-with-direction
       - supports-color
 
+  '@wordpress/components@19.8.5(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)':
+    dependencies:
+      '@babel/runtime': 7.23.5
+      '@emotion/cache': 11.11.0
+      '@emotion/css': 11.11.2
+      '@emotion/react': 11.11.1(react@17.0.2)
+      '@emotion/serialize': 1.1.2
+      '@emotion/styled': 11.11.0(@emotion/react@11.11.1(react@17.0.2))(react@17.0.2)
+      '@emotion/utils': 1.0.0
+      '@use-gesture/react': 10.3.0(react@17.0.2)
+      '@wordpress/a11y': 3.6.1
+      '@wordpress/compose': 5.4.1(react@17.0.2)
+      '@wordpress/date': 4.44.0
+      '@wordpress/deprecated': 3.41.0
+      '@wordpress/dom': 3.6.1
+      '@wordpress/element': 4.4.1
+      '@wordpress/escape-html': 2.47.0
+      '@wordpress/hooks': 3.6.1
+      '@wordpress/i18n': 4.6.1
+      '@wordpress/icons': 8.4.0
+      '@wordpress/is-shallow-equal': 4.24.0
+      '@wordpress/keycodes': 3.47.0
+      '@wordpress/primitives': 3.4.1
+      '@wordpress/rich-text': 5.4.2(react@17.0.2)
+      '@wordpress/warning': 2.6.1
+      classnames: 2.3.2
+      colord: 2.9.3
+      dom-scroll-into-view: 1.2.1
+      downshift: 6.1.12(react@17.0.2)
+      framer-motion: 6.5.1(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      gradient-parser: 0.1.5
+      highlight-words-core: 1.2.2
+      lodash: 4.17.21
+      memize: 1.1.0
+      moment: 2.29.4
+      re-resizable: 6.9.11(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      react: 17.0.2
+      react-colorful: 5.6.1(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      react-dates: 17.2.0(moment@2.29.4)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
+      react-dom: 17.0.2(react@17.0.2)
+      react-resize-aware: 3.1.1(react@17.0.2)
+      reakit: 1.3.11(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      uuid: 8.3.2
+    transitivePeerDependencies:
+      - '@types/react'
+      - react-with-direction
+      - supports-color
+
+  '@wordpress/components@19.8.5(react-dom@18.3.1(react@17.0.2))(react-with-direction@1.4.0(react-dom@18.3.1(react@17.0.2))(react@17.0.2))(react@17.0.2)':
+    dependencies:
+      '@babel/runtime': 7.23.5
+      '@emotion/cache': 11.11.0
+      '@emotion/css': 11.11.2
+      '@emotion/react': 11.11.1(react@17.0.2)
+      '@emotion/serialize': 1.1.2
+      '@emotion/styled': 11.11.0(@emotion/react@11.11.1(react@17.0.2))(react@17.0.2)
+      '@emotion/utils': 1.0.0
+      '@use-gesture/react': 10.3.0(react@17.0.2)
+      '@wordpress/a11y': 3.6.1
+      '@wordpress/compose': 5.4.1(react@17.0.2)
+      '@wordpress/date': 4.44.0
+      '@wordpress/deprecated': 3.41.0
+      '@wordpress/dom': 3.6.1
+      '@wordpress/element': 4.4.1
+      '@wordpress/escape-html': 2.47.0
+      '@wordpress/hooks': 3.6.1
+      '@wordpress/i18n': 4.6.1
+      '@wordpress/icons': 8.4.0
+      '@wordpress/is-shallow-equal': 4.24.0
+      '@wordpress/keycodes': 3.47.0
+      '@wordpress/primitives': 3.4.1
+      '@wordpress/rich-text': 5.4.2(react@17.0.2)
+      '@wordpress/warning': 2.6.1
+      classnames: 2.3.2
+      colord: 2.9.3
+      dom-scroll-into-view: 1.2.1
+      downshift: 6.1.12(react@17.0.2)
+      framer-motion: 6.5.1(react-dom@18.3.1(react@17.0.2))(react@17.0.2)
+      gradient-parser: 0.1.5
+      highlight-words-core: 1.2.2
+      lodash: 4.17.21
+      memize: 1.1.0
+      moment: 2.29.4
+      re-resizable: 6.9.11(react-dom@18.3.1(react@17.0.2))(react@17.0.2)
+      react: 17.0.2
+      react-colorful: 5.6.1(react-dom@18.3.1(react@17.0.2))(react@17.0.2)
+      react-dates: 17.2.0(moment@2.29.4)(react-dom@18.3.1(react@17.0.2))(react-with-direction@1.4.0(react-dom@18.3.1(react@17.0.2))(react@17.0.2))(react@17.0.2)
+      react-dom: 18.3.1(react@17.0.2)
+      react-resize-aware: 3.1.1(react@17.0.2)
+      reakit: 1.3.11(react-dom@18.3.1(react@17.0.2))(react@17.0.2)
+      uuid: 8.3.2
+    transitivePeerDependencies:
+      - '@types/react'
+      - react-with-direction
+      - supports-color
+
   '@wordpress/components@19.8.6(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)':
     dependencies:
       '@babel/runtime': 7.25.0
@@ -41351,7 +41626,7 @@ snapshots:
       '@wordpress/hooks': 3.57.0
       '@wordpress/html-entities': 3.57.0
       '@wordpress/i18n': 4.57.0
-      '@wordpress/icons': 9.48.0
+      '@wordpress/icons': 9.49.0
       '@wordpress/is-shallow-equal': 4.57.0
       '@wordpress/keycodes': 3.57.0
       '@wordpress/primitives': 3.56.0
@@ -41462,7 +41737,7 @@ snapshots:
       '@wordpress/hooks': 4.10.0
       '@wordpress/html-entities': 4.10.0
       '@wordpress/i18n': 5.10.0
-      '@wordpress/icons': 10.10.0(react@17.0.2)
+      '@wordpress/icons': 10.11.0
       '@wordpress/is-shallow-equal': 5.10.0
       '@wordpress/keycodes': 4.10.0
       '@wordpress/primitives': 4.11.0(react@17.0.2)
@@ -41516,7 +41791,7 @@ snapshots:
       '@wordpress/hooks': 4.10.0
       '@wordpress/html-entities': 4.10.0
       '@wordpress/i18n': 5.10.0
-      '@wordpress/icons': 10.10.0(react@18.3.1)
+      '@wordpress/icons': 10.11.0
       '@wordpress/is-shallow-equal': 5.10.0
       '@wordpress/keycodes': 4.10.0
       '@wordpress/primitives': 4.11.0(react@18.3.1)
@@ -41570,7 +41845,7 @@ snapshots:
       '@wordpress/hooks': 4.8.1
       '@wordpress/html-entities': 4.8.1
       '@wordpress/i18n': 5.8.1
-      '@wordpress/icons': 10.8.1(react@17.0.2)
+      '@wordpress/icons': 10.11.0
       '@wordpress/is-shallow-equal': 5.8.1
       '@wordpress/keycodes': 4.8.1
       '@wordpress/primitives': 4.11.0(react@17.0.2)
@@ -41937,6 +42212,30 @@ snapshots:
       - utf-8-validate
       - vite
 
+  '@wordpress/core-commands@1.11.0(@emotion/is-prop-valid@1.2.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+    dependencies:
+      '@babel/runtime': 7.25.7
+      '@wordpress/block-editor': 9.8.0(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@wordpress/commands': 1.10.0(@emotion/is-prop-valid@1.2.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@wordpress/compose': 5.4.2(react@17.0.2)
+      '@wordpress/core-data': 4.4.6(react@17.0.2)
+      '@wordpress/data': 6.6.2(react@17.0.2)
+      '@wordpress/element': 4.20.0
+      '@wordpress/html-entities': 3.6.1
+      '@wordpress/i18n': 4.58.0
+      '@wordpress/icons': 8.4.0
+      '@wordpress/notices': 3.12.0(react@17.0.2)
+      '@wordpress/private-apis': 1.10.0
+      '@wordpress/router': 1.11.0(react@17.0.2)
+      '@wordpress/url': 3.7.1
+      react: 17.0.2
+      react-dom: 17.0.2(react@17.0.2)
+    transitivePeerDependencies:
+      - '@emotion/is-prop-valid'
+      - '@types/react'
+      - '@types/react-dom'
+      - supports-color
+
   '@wordpress/core-data@4.4.5(react@17.0.2)':
     dependencies:
       '@babel/runtime': 7.23.5
@@ -41977,7 +42276,7 @@ snapshots:
 
   '@wordpress/core-data@5.5.0(react@17.0.2)':
     dependencies:
-      '@babel/runtime': 7.23.5
+      '@babel/runtime': 7.25.7
       '@wordpress/api-fetch': 6.21.0
       '@wordpress/blocks': 11.21.0(react@17.0.2)
       '@wordpress/compose': 5.20.0(react@17.0.2)
@@ -42604,7 +42903,7 @@ snapshots:
       '@wordpress/data': 10.10.0(react@17.0.2)
       '@wordpress/element': 6.10.0
       '@wordpress/i18n': 5.10.0
-      '@wordpress/icons': 10.10.0(react@17.0.2)
+      '@wordpress/icons': 10.11.0
       '@wordpress/primitives': 4.11.0(react@17.0.2)
       '@wordpress/private-apis': 1.10.0
       '@wordpress/warning': 3.10.0
@@ -42626,7 +42925,7 @@ snapshots:
       '@wordpress/data': 10.10.0(react@18.3.1)
       '@wordpress/element': 6.10.0
       '@wordpress/i18n': 5.10.0
-      '@wordpress/icons': 10.10.0(react@18.3.1)
+      '@wordpress/icons': 10.11.0
       '@wordpress/primitives': 4.11.0(react@18.3.1)
       '@wordpress/private-apis': 1.10.0
       '@wordpress/warning': 3.10.0
@@ -43146,50 +43445,49 @@ snapshots:
       - utf-8-validate
       - vite
 
-  '@wordpress/edit-site@6.11.0(@babel/helper-module-imports@7.24.7)(@babel/types@7.25.2)(@emotion/is-prop-valid@1.2.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(babel-plugin-macros@3.1.0)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)':
+  '@wordpress/edit-site@6.10.0(@emotion/is-prop-valid@1.2.1)(@preact/signals-core@1.5.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)':
     dependencies:
       '@babel/runtime': 7.25.7
       '@react-spring/web': 9.7.3(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@wordpress/a11y': 3.6.1
-      '@wordpress/api-fetch': 6.3.1
-      '@wordpress/blob': 3.6.1
-      '@wordpress/block-editor': 9.8.0(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@wordpress/block-library': 7.19.0(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@wordpress/blocks': 12.35.0(react@17.0.2)
+      '@wordpress/a11y': 4.10.0
+      '@wordpress/api-fetch': 7.10.0
+      '@wordpress/blob': 4.10.0
+      '@wordpress/block-editor': 14.5.0(@emotion/is-prop-valid@1.2.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@wordpress/block-library': 9.11.0(@emotion/is-prop-valid@1.2.1)(@preact/signals-core@1.5.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
+      '@wordpress/blocks': 13.10.0(react@17.0.2)
       '@wordpress/commands': 1.10.0(@emotion/is-prop-valid@1.2.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@wordpress/components': 19.17.0(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
-      '@wordpress/compose': 5.4.2(react@17.0.2)
-      '@wordpress/core-commands': 0.7.0(@babel/helper-module-imports@7.24.7)(@babel/types@7.25.2)(@emotion/is-prop-valid@1.2.1)(@types/react@17.0.71)(babel-plugin-macros@3.1.0)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@wordpress/core-data': 4.4.6(react@17.0.2)
-      '@wordpress/data': 6.6.2(react@17.0.2)
+      '@wordpress/components': 28.10.0(@emotion/is-prop-valid@1.2.1)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@wordpress/compose': 7.10.0(react@17.0.2)
+      '@wordpress/core-commands': 1.11.0(@emotion/is-prop-valid@1.2.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@wordpress/core-data': 7.10.0(@emotion/is-prop-valid@1.2.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@wordpress/data': 10.10.0(react@17.0.2)
       '@wordpress/dataviews': 4.6.0(@emotion/is-prop-valid@1.2.1)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@wordpress/date': 4.6.1
-      '@wordpress/deprecated': 3.6.1
-      '@wordpress/dom': 3.6.1
-      '@wordpress/editor': 12.5.11(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
-      '@wordpress/element': 4.20.0
+      '@wordpress/date': 5.10.0
+      '@wordpress/deprecated': 4.10.0
+      '@wordpress/dom': 4.10.0
+      '@wordpress/editor': 14.11.0(@emotion/is-prop-valid@1.2.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
+      '@wordpress/element': 6.10.0
       '@wordpress/escape-html': 3.10.0
-      '@wordpress/fields': 0.0.11(@emotion/is-prop-valid@1.2.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@wordpress/hooks': 3.6.1
-      '@wordpress/html-entities': 3.6.1
-      '@wordpress/i18n': 4.58.0
-      '@wordpress/icons': 8.4.0
-      '@wordpress/keyboard-shortcuts': 3.4.2(react@17.0.2)
-      '@wordpress/keycodes': 3.58.0
-      '@wordpress/notices': 3.12.0(react@17.0.2)
+      '@wordpress/hooks': 4.10.0
+      '@wordpress/html-entities': 4.10.0
+      '@wordpress/i18n': 5.10.0
+      '@wordpress/icons': 10.11.0
+      '@wordpress/keyboard-shortcuts': 5.10.0(react@17.0.2)
+      '@wordpress/keycodes': 4.10.0
+      '@wordpress/notices': 5.10.0(react@17.0.2)
       '@wordpress/patterns': 2.10.0(@emotion/is-prop-valid@1.2.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@wordpress/plugins': 4.4.4(react@17.0.2)
-      '@wordpress/preferences': 1.2.6(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
-      '@wordpress/primitives': 3.4.1
+      '@wordpress/plugins': 7.10.0(@emotion/is-prop-valid@1.2.1)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@wordpress/preferences': 4.10.0(@emotion/is-prop-valid@1.2.1)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@wordpress/primitives': 4.11.0(react@17.0.2)
       '@wordpress/priority-queue': 3.10.0
       '@wordpress/private-apis': 1.10.0
       '@wordpress/reusable-blocks': 5.10.0(@emotion/is-prop-valid@1.2.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@wordpress/router': 0.7.0(react@17.0.2)
-      '@wordpress/style-engine': 1.41.0
-      '@wordpress/url': 3.7.1
-      '@wordpress/viewport': 4.20.0(react@17.0.2)
-      '@wordpress/widgets': 3.24.0(@babel/helper-module-imports@7.24.7)(@babel/types@7.25.2)(@emotion/is-prop-valid@1.2.1)(@types/react@17.0.71)(babel-plugin-macros@3.1.0)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
-      '@wordpress/wordcount': 3.47.0
+      '@wordpress/router': 1.11.0(react@17.0.2)
+      '@wordpress/style-engine': 2.10.0
+      '@wordpress/url': 4.10.0
+      '@wordpress/viewport': 6.10.0(react@17.0.2)
+      '@wordpress/widgets': 4.11.0(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
+      '@wordpress/wordcount': 4.10.0
       change-case: 4.1.2
       clsx: 2.1.1
       colord: 2.9.3
@@ -43202,6 +43500,8 @@ snapshots:
       - '@babel/helper-module-imports'
       - '@babel/types'
       - '@emotion/is-prop-valid'
+      - '@preact/signals-core'
+      - '@preact/signals-react'
       - '@types/react'
       - '@types/react-dom'
       - aslemammad-vite-plugin-macro
@@ -43344,6 +43644,71 @@ snapshots:
       - utf-8-validate
       - vite
 
+  '@wordpress/editor@14.11.0(@emotion/is-prop-valid@1.2.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)':
+    dependencies:
+      '@babel/runtime': 7.25.7
+      '@wordpress/a11y': 3.6.1
+      '@wordpress/api-fetch': 6.3.1
+      '@wordpress/blob': 3.6.1
+      '@wordpress/block-editor': 9.8.0(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@wordpress/blocks': 12.35.0(react@17.0.2)
+      '@wordpress/commands': 1.10.0(@emotion/is-prop-valid@1.2.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@wordpress/components': 19.17.0(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
+      '@wordpress/compose': 5.4.2(react@17.0.2)
+      '@wordpress/core-data': 4.4.6(react@17.0.2)
+      '@wordpress/data': 6.6.2(react@17.0.2)
+      '@wordpress/dataviews': 4.6.0(@emotion/is-prop-valid@1.2.1)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@wordpress/date': 4.6.1
+      '@wordpress/deprecated': 3.6.1
+      '@wordpress/dom': 3.6.1
+      '@wordpress/element': 4.20.0
+      '@wordpress/fields': 0.0.11(@emotion/is-prop-valid@1.2.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@wordpress/hooks': 3.6.1
+      '@wordpress/html-entities': 3.6.1
+      '@wordpress/i18n': 4.58.0
+      '@wordpress/icons': 8.4.0
+      '@wordpress/interface': 5.24.0(@babel/helper-module-imports@7.24.7)(@babel/types@7.25.2)(@types/react@17.0.71)(babel-plugin-macros@3.1.0)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@wordpress/keyboard-shortcuts': 3.4.2(react@17.0.2)
+      '@wordpress/keycodes': 3.58.0
+      '@wordpress/media-utils': 3.4.1
+      '@wordpress/notices': 3.12.0(react@17.0.2)
+      '@wordpress/patterns': 2.10.0(@emotion/is-prop-valid@1.2.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@wordpress/plugins': 4.4.4(react@17.0.2)
+      '@wordpress/preferences': 1.2.6(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
+      '@wordpress/private-apis': 1.10.0
+      '@wordpress/reusable-blocks': 5.10.0(@emotion/is-prop-valid@1.2.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@wordpress/rich-text': 5.4.3(react@17.0.2)
+      '@wordpress/server-side-render': 3.10.0(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
+      '@wordpress/url': 3.7.1
+      '@wordpress/warning': 2.6.1
+      '@wordpress/wordcount': 3.47.0
+      change-case: 4.1.2
+      client-zip: 2.4.5
+      clsx: 2.1.1
+      date-fns: 3.6.0
+      deepmerge: 4.3.1
+      fast-deep-equal: 3.1.3
+      is-plain-object: 5.0.0
+      memize: 2.1.0
+      react: 17.0.2
+      react-autosize-textarea: 7.1.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      react-dom: 17.0.2(react@17.0.2)
+      remove-accents: 0.5.0
+      uuid: 9.0.1
+    transitivePeerDependencies:
+      - '@babel/helper-module-imports'
+      - '@babel/types'
+      - '@emotion/is-prop-valid'
+      - '@types/react'
+      - '@types/react-dom'
+      - aslemammad-vite-plugin-macro
+      - babel-plugin-macros
+      - bufferutil
+      - react-with-direction
+      - supports-color
+      - utf-8-validate
+      - vite
+
   '@wordpress/editor@14.8.12(@emotion/is-prop-valid@1.2.1)(@types/react-dom@18.0.10)(@types/react@17.0.71)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.25.7
@@ -43743,7 +44108,7 @@ snapshots:
       '@wordpress/hooks': 4.10.0
       '@wordpress/html-entities': 4.10.0
       '@wordpress/i18n': 5.10.0
-      '@wordpress/icons': 10.10.0(react@18.3.1)
+      '@wordpress/icons': 10.11.0
       '@wordpress/notices': 5.10.0(react@18.3.1)
       '@wordpress/patterns': 2.10.0(@emotion/is-prop-valid@1.2.1)(@types/react-dom@18.0.10)(@types/react@17.0.71)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@wordpress/primitives': 4.11.0(react@18.3.1)
@@ -43776,7 +44141,7 @@ snapshots:
       '@wordpress/hooks': 4.10.0
       '@wordpress/html-entities': 4.10.0
       '@wordpress/i18n': 5.10.0
-      '@wordpress/icons': 10.10.0(react@17.0.2)
+      '@wordpress/icons': 10.11.0
       '@wordpress/notices': 5.10.0(react@17.0.2)
       '@wordpress/patterns': 2.10.0(@emotion/is-prop-valid@1.2.1)(@types/react-dom@18.3.0)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
       '@wordpress/primitives': 4.11.0(react@17.0.2)
@@ -43921,14 +44286,6 @@ snapshots:
       sprintf-js: 1.1.3
       tannin: 1.2.0
 
-  '@wordpress/icons@10.10.0(react@17.0.2)':
-    dependencies:
-      '@babel/runtime': 7.25.7
-      '@wordpress/element': 6.10.0
-      '@wordpress/primitives': 4.11.0(react@17.0.2)
-    transitivePeerDependencies:
-      - react
-
   '@wordpress/icons@10.10.0(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.25.7
@@ -43937,6 +44294,12 @@ snapshots:
     transitivePeerDependencies:
       - react
 
+  '@wordpress/icons@10.11.0':
+    dependencies:
+      '@babel/runtime': 7.25.7
+      '@wordpress/element': 4.20.0
+      '@wordpress/primitives': 3.4.1
+
   '@wordpress/icons@10.6.0(react@17.0.2)':
     dependencies:
       '@babel/runtime': 7.25.0
@@ -43995,6 +44358,14 @@ snapshots:
       '@wordpress/element': 5.35.0
       '@wordpress/primitives': 3.56.0
 
+  '@wordpress/interactivity-router@2.11.0(@preact/signals-core@1.5.1)':
+    dependencies:
+      '@wordpress/a11y': 3.6.1
+      '@wordpress/interactivity': 3.0.1(@preact/signals-core@1.5.1)
+    transitivePeerDependencies:
+      - '@preact/signals-core'
+      - '@preact/signals-react'
+
   '@wordpress/interactivity@3.0.1(@preact/signals-core@1.5.1)':
     dependencies:
       '@preact/signals': 1.2.2(preact@10.19.3)
@@ -44060,7 +44431,7 @@ snapshots:
       '@wordpress/deprecated': 3.57.0
       '@wordpress/element': 5.34.0
       '@wordpress/i18n': 4.57.0
-      '@wordpress/icons': 9.48.0
+      '@wordpress/icons': 9.49.0
       '@wordpress/plugins': 6.15.0(@babel/helper-module-imports@7.24.7)(@babel/types@7.25.2)(@types/react@17.0.71)(babel-plugin-macros@3.1.0)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
       '@wordpress/preferences': 3.24.0(@babel/helper-module-imports@7.24.7)(@babel/types@7.25.2)(@types/react@17.0.71)(babel-plugin-macros@3.1.0)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
       '@wordpress/viewport': 5.24.0(react@17.0.2)
@@ -44086,7 +44457,7 @@ snapshots:
       '@wordpress/deprecated': 4.10.0
       '@wordpress/element': 6.10.0
       '@wordpress/i18n': 5.10.0
-      '@wordpress/icons': 10.10.0(react@18.3.1)
+      '@wordpress/icons': 10.11.0
       '@wordpress/plugins': 7.10.0(@emotion/is-prop-valid@1.2.1)(@types/react@17.0.71)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@wordpress/preferences': 4.10.0(@emotion/is-prop-valid@1.2.1)(@types/react@17.0.71)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@wordpress/private-apis': 1.10.0
@@ -44568,7 +44939,7 @@ snapshots:
       '@wordpress/element': 6.10.0
       '@wordpress/html-entities': 4.10.0
       '@wordpress/i18n': 5.10.0
-      '@wordpress/icons': 10.10.0(react@18.3.1)
+      '@wordpress/icons': 10.11.0
       '@wordpress/notices': 5.10.0(react@18.3.1)
       '@wordpress/private-apis': 1.10.0
       '@wordpress/url': 4.10.0
@@ -44595,7 +44966,7 @@ snapshots:
       '@wordpress/element': 6.10.0
       '@wordpress/html-entities': 4.10.0
       '@wordpress/i18n': 5.10.0
-      '@wordpress/icons': 10.10.0(react@17.0.2)
+      '@wordpress/icons': 10.11.0
       '@wordpress/notices': 5.10.0(react@17.0.2)
       '@wordpress/private-apis': 1.10.0
       '@wordpress/url': 4.10.0
@@ -44658,7 +45029,7 @@ snapshots:
       '@wordpress/compose': 6.34.0(react@17.0.2)
       '@wordpress/element': 5.35.0
       '@wordpress/hooks': 3.57.0
-      '@wordpress/icons': 9.48.0
+      '@wordpress/icons': 9.49.0
       '@wordpress/is-shallow-equal': 4.57.0
       memize: 2.1.0
       react: 17.0.2
@@ -44672,6 +45043,23 @@ snapshots:
       - supports-color
       - vite
 
+  '@wordpress/plugins@7.10.0(@emotion/is-prop-valid@1.2.1)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+    dependencies:
+      '@babel/runtime': 7.25.7
+      '@wordpress/components': 28.10.0(@emotion/is-prop-valid@1.2.1)(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@wordpress/compose': 7.10.0(react@17.0.2)
+      '@wordpress/element': 6.10.0
+      '@wordpress/hooks': 4.10.0
+      '@wordpress/icons': 10.11.0
+      '@wordpress/is-shallow-equal': 5.10.0
+      memize: 2.1.0
+      react: 17.0.2
+      react-dom: 17.0.2(react@17.0.2)
+    transitivePeerDependencies:
+      - '@emotion/is-prop-valid'
+      - '@types/react'
+      - supports-color
+
   '@wordpress/plugins@7.10.0(@emotion/is-prop-valid@1.2.1)(@types/react@17.0.71)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.25.7
@@ -44679,7 +45067,7 @@ snapshots:
       '@wordpress/compose': 7.10.0(react@18.3.1)
       '@wordpress/element': 6.10.0
       '@wordpress/hooks': 4.10.0
-      '@wordpress/icons': 10.10.0(react@18.3.1)
+      '@wordpress/icons': 10.11.0
       '@wordpress/is-shallow-equal': 5.10.0
       memize: 2.1.0
       react: 18.3.1
@@ -44831,7 +45219,7 @@ snapshots:
       '@wordpress/deprecated': 4.10.0
       '@wordpress/element': 6.10.0
       '@wordpress/i18n': 5.10.0
-      '@wordpress/icons': 10.10.0(react@17.0.2)
+      '@wordpress/icons': 10.11.0
       '@wordpress/private-apis': 1.10.0
       clsx: 2.1.1
       react: 17.0.2
@@ -44851,7 +45239,7 @@ snapshots:
       '@wordpress/deprecated': 4.10.0
       '@wordpress/element': 6.10.0
       '@wordpress/i18n': 5.10.0
-      '@wordpress/icons': 10.10.0(react@18.3.1)
+      '@wordpress/icons': 10.11.0
       '@wordpress/private-apis': 1.10.0
       clsx: 2.1.1
       react: 18.3.1
@@ -45081,7 +45469,7 @@ snapshots:
       '@wordpress/data': 9.27.0(react@17.0.2)
       '@wordpress/element': 5.35.0
       '@wordpress/i18n': 4.57.0
-      '@wordpress/icons': 9.48.0
+      '@wordpress/icons': 9.49.0
       '@wordpress/notices': 4.15.0(react@17.0.2)
       '@wordpress/private-apis': 0.29.0
       '@wordpress/url': 3.48.0
@@ -45131,7 +45519,7 @@ snapshots:
       '@wordpress/data': 10.10.0(react@18.3.1)
       '@wordpress/element': 6.10.0
       '@wordpress/i18n': 5.10.0
-      '@wordpress/icons': 10.10.0(react@18.3.1)
+      '@wordpress/icons': 10.11.0
       '@wordpress/notices': 5.10.0(react@18.3.1)
       '@wordpress/private-apis': 1.10.0
       '@wordpress/url': 4.10.0
@@ -45155,7 +45543,7 @@ snapshots:
       '@wordpress/data': 10.10.0(react@17.0.2)
       '@wordpress/element': 6.10.0
       '@wordpress/i18n': 5.10.0
-      '@wordpress/icons': 10.10.0(react@17.0.2)
+      '@wordpress/icons': 10.11.0
       '@wordpress/notices': 5.10.0(react@17.0.2)
       '@wordpress/private-apis': 1.10.0
       '@wordpress/url': 4.10.0
@@ -45369,6 +45757,15 @@ snapshots:
       history: 5.3.0
       react: 17.0.2
 
+  '@wordpress/router@1.11.0(react@17.0.2)':
+    dependencies:
+      '@babel/runtime': 7.25.7
+      '@wordpress/element': 4.20.0
+      '@wordpress/private-apis': 1.10.0
+      '@wordpress/url': 3.7.1
+      history: 5.3.0
+      react: 17.0.2
+
   '@wordpress/scripts@12.6.1(@babel/core@7.23.5)(file-loader@6.2.0(webpack@5.89.0(webpack-cli@4.10.0)))(react-dom@17.0.2(react@17.0.2))(react@17.0.2)(typescript@5.3.3)':
     dependencies:
       '@svgr/webpack': 5.5.0
@@ -46043,6 +46440,14 @@ snapshots:
       '@wordpress/element': 5.35.0
       react: 17.0.2
 
+  '@wordpress/viewport@6.10.0(react@17.0.2)':
+    dependencies:
+      '@babel/runtime': 7.25.7
+      '@wordpress/compose': 7.10.0(react@17.0.2)
+      '@wordpress/data': 10.10.0(react@17.0.2)
+      '@wordpress/element': 6.10.0
+      react: 17.0.2
+
   '@wordpress/viewport@6.10.0(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.25.7
@@ -46094,6 +46499,28 @@ snapshots:
       - utf-8-validate
       - vite
 
+  '@wordpress/widgets@4.11.0(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)':
+    dependencies:
+      '@babel/runtime': 7.25.7
+      '@wordpress/api-fetch': 6.3.1
+      '@wordpress/block-editor': 9.8.0(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@wordpress/blocks': 12.35.0(react@17.0.2)
+      '@wordpress/components': 19.17.0(@types/react@17.0.71)(react-dom@17.0.2(react@17.0.2))(react-with-direction@1.4.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2))(react@17.0.2)
+      '@wordpress/compose': 5.4.2(react@17.0.2)
+      '@wordpress/core-data': 4.4.6(react@17.0.2)
+      '@wordpress/data': 6.6.2(react@17.0.2)
+      '@wordpress/element': 4.20.0
+      '@wordpress/i18n': 4.58.0
+      '@wordpress/icons': 8.4.0
+      '@wordpress/notices': 3.12.0(react@17.0.2)
+      clsx: 2.1.1
+      react: 17.0.2
+      react-dom: 17.0.2(react@17.0.2)
+    transitivePeerDependencies:
+      - '@types/react'
+      - react-with-direction
+      - supports-color
+
   '@wordpress/wordcount@3.47.0':
     dependencies:
       '@babel/runtime': 7.23.5