Experiment: Content types single route and package (#78059)

Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>

Author: ntsekouras

lib/experimental/content-types/load.php

@@ -1,37 +1,26 @@
 <?php
 /**
- * Bootstraps the Content Types pages (Taxonomies, Post Types) in wp-admin
- * under Settings.
+ * Bootstraps the Content Types page in wp-admin under Settings.
  *
  * @package gutenberg
  */
 
 add_action( 'admin_menu', '_gutenberg_content_types_add_settings_menu_items', 11 );
 
 /**
- * Registers "Taxonomies" and "Post Types" submenu items under Settings.
+ * Registers the "Content Types" submenu item under Settings.
  *
  * @access private
  */
 function _gutenberg_content_types_add_settings_menu_items() {
-	if ( function_exists( 'gutenberg_taxonomies_wp_admin_render_page' ) ) {
+	if ( function_exists( 'gutenberg_content_types_wp_admin_render_page' ) ) {
 		add_submenu_page(
 			'options-general.php',
-			__( 'Taxonomies', 'gutenberg' ),
-			__( 'Taxonomies', 'gutenberg' ),
+			__( 'Content Types', 'gutenberg' ),
+			__( 'Content Types', 'gutenberg' ),
 			'manage_options',
-			'taxonomies-wp-admin',
-			'gutenberg_taxonomies_wp_admin_render_page'
-		);
-	}
-	if ( function_exists( 'gutenberg_post_types_wp_admin_render_page' ) ) {
-		add_submenu_page(
-			'options-general.php',
-			__( 'Post Types', 'gutenberg' ),
-			__( 'Post Types', 'gutenberg' ),
-			'manage_options',
-			'post-types-wp-admin',
-			'gutenberg_post_types_wp_admin_render_page'
+			'content-types-wp-admin',
+			'gutenberg_content_types_wp_admin_render_page'
 		);
 	}
 }

package-lock.json

@@ -35,8 +35,7 @@
 			"options-connectors",
 			"guidelines",
 			"experiments",
-			"taxonomies",
-			"post-types",
+			"content-types",
 			"dashboard"
 		]
 	},

package.json

@@ -1,20 +1,22 @@
 {
-	"name": "@wordpress/user-taxonomies",
+	"name": "@wordpress/content-types",
 	"version": "1.0.0",
 	"private": true,
-	"description": "User-defined taxonomies editor components and data model.",
+	"description": "User-defined content types (post types and taxonomies) editor components and data model.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
 	"keywords": [
 		"wordpress",
 		"gutenberg",
+		"content-types",
+		"post-types",
 		"taxonomies"
 	],
-	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/user-taxonomies/README.md",
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/content-types/README.md",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/WordPress/gutenberg.git",
-		"directory": "packages/user-taxonomies"
+		"directory": "packages/content-types"
 	},
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
@@ -25,12 +27,15 @@
 			"types": "./build-types/index.d.ts",
 			"import": "./build-module/index.mjs"
 		},
+		"./build-style/": "./build-style/",
 		"./package.json": "./package.json"
 	},
 	"wpScriptModuleExports": "./build-module/index.mjs",
 	"types": "build-types",
 	"dependencies": {
+		"@wordpress/admin-ui": "file:../admin-ui",
 		"@wordpress/components": "file:../components",
+		"@wordpress/compose": "file:../compose",
 		"@wordpress/core-data": "file:../core-data",
 		"@wordpress/data": "file:../data",
 		"@wordpress/dataviews": "file:../dataviews",
@@ -39,6 +44,7 @@
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/notices": "file:../notices",
 		"@wordpress/private-apis": "file:../private-apis",
+		"@wordpress/route": "file:../route",
 		"@wordpress/ui": "file:../ui",
 		"@wordpress/url": "file:../url"
 	},

packages/user-taxonomies/package.json packages/content-types/package.jsonpackages/user-taxonomies/package.json renamed to packages/content-types/package.json

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { Page } from '@wordpress/admin-ui';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useNavigate } from '@wordpress/route';
+import type { ReactNode } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+interface LayoutProps {
+	activeTab: 'post-types' | 'taxonomies';
+	children: ReactNode;
+}
+
+export function Layout( { activeTab, children }: LayoutProps ) {
+	const navigate = useNavigate();
+
+	return (
+		<Page
+			ariaLabel={ __( 'Content Types' ) }
+			className="content-types-page"
+		>
+			<Tabs
+				selectedTabId={ activeTab }
+				onSelect={ ( tabId: string ) =>
+					navigate( { to: `/${ tabId }` } )
+				}
+			>
+				<div className="content-types-tabs-wrapper">
+					<Tabs.TabList>
+						<Tabs.Tab tabId="post-types">
+							{ __( 'Post Types' ) }
+						</Tabs.Tab>
+						<Tabs.Tab tabId="taxonomies">
+							{ __( 'Taxonomies' ) }
+						</Tabs.Tab>
+					</Tabs.TabList>
+				</div>
+			</Tabs>
+			{ children }
+		</Page>
+	);
+}

packages/content-types/src/components/layout/index.tsx

@@ -0,0 +1,23 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/mixins" as *;
+
+// Size the stage to the viewport so DataViews owns its own scroll and
+// the sticky footer stays visible. Note: when the wp-admin sidebar
+// (#adminmenu) is taller than the viewport, #wpwrap still grows to
+// fit it, so empty space may appear below DataViews.
+.boot-layout__stage:has(.content-types-page) {
+	height: calc(100vh - #{$admin-bar-height-big});
+
+	@include break-medium {
+		height: calc(100vh - #{$admin-bar-height});
+	}
+}
+
+.content-types-page {
+	padding: var(--wpds-dimension-padding-lg);
+}
+
+.content-types-tabs-wrapper {
+	border-bottom: 1px solid $gray-100;
+}

packages/content-types/src/components/layout/style.scss

@@ -0,0 +1,10 @@
+// URL path segments for the top-level tabs / list pages.
+export const POST_TYPES_PATH = '/post-types';
+export const TAXONOMIES_PATH = '/taxonomies';
+
+// Core-data postType names that store the user-defined records.
+export const POST_TYPE_ENTITY = 'wp_user_post_type';
+export const TAXONOMY_ENTITY = 'wp_user_taxonomy';
+
+// Sentinel for the edit-route param when creating a new record.
+export const NEW_ID = 'new';