QuickEdit: Add slug field control

docs/manifest.json

@@ -1697,6 +1697,12 @@
 		"markdown_source": "../packages/eslint-plugin/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/fields",
+		"slug": "packages-fields",
+		"markdown_source": "../packages/fields/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/format-library",
 		"slug": "packages-format-library",

package.json

@@ -52,6 +52,7 @@
 		"@wordpress/editor": "file:packages/editor",
 		"@wordpress/element": "file:packages/element",
 		"@wordpress/escape-html": "file:packages/escape-html",
+		"@wordpress/fields": "file:packages/fields",
 		"@wordpress/format-library": "file:packages/format-library",
 		"@wordpress/hooks": "file:packages/hooks",
 		"@wordpress/html-entities": "file:packages/html-entities",

packages/dependency-extraction-webpack-plugin/lib/util.js

@@ -9,6 +9,7 @@ const BUNDLED_PACKAGES = [
 	'@wordpress/interface',
 	'@wordpress/sync',
 	'@wordpress/undo-manager',
+	'@wordpress/fields',
 ];
 
 /**

packages/edit-site/package.json

@@ -48,6 +48,7 @@
 		"@wordpress/editor": "file:../editor",
 		"@wordpress/element": "file:../element",
 		"@wordpress/escape-html": "file:../escape-html",
+		"@wordpress/fields": "file:../fields",
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",

packages/edit-site/src/components/post-edit/index.js

@@ -60,7 +60,14 @@ function PostEditForm( { postType, postId } ) {
 	);
 	const form = {
 		type: 'panel',
-		fields: [ 'title', 'status', 'date', 'author', 'comment_status' ],
+		fields: [
+			'title',
+			'status',
+			'date',
+			'author',
+			'slug',
+			'comment_status',
+		],
 	};
 	const onChange = ( edits ) => {
 		for ( const id of ids ) {

packages/edit-site/src/components/post-fields/index.js

@@ -26,6 +26,7 @@ import {
 import { __experimentalHStack as HStack, Icon } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
+import { SlugView, SlugEdit } from '@wordpress/fields';
 
 /**
  * Internal dependencies
@@ -369,6 +370,13 @@ function usePostFields( viewType ) {
 					return <time>{ getFormattedDate( item.date ) }</time>;
 				},
 			},
+			{
+				label: __( 'Link' ),
+				id: 'slug',
+				getValue: ( { item } ) => item.slug,
+				render: SlugView,
+				Edit: SlugEdit,
+			},
 			{
 				id: 'comment_status',
 				label: __( 'Discussion' ),

packages/edit-site/src/style.scss

@@ -1,4 +1,5 @@
 @import "../../dataviews/src/style.scss";
+@import "../../fields/src/styles.scss";
 
 @import "./components/add-new-template/style.scss";
 @import "./components/block-editor/style.scss";

packages/fields/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/fields/CHANGELOG.md

@@ -0,0 +1,5 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+Initial release.

packages/fields/README.md

@@ -0,0 +1,33 @@
+# Fields
+
+This package provides core elements for the DataView library, designed to simplify the creation and management of data display elements in WordPress.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/fields --save
+```
+
+## Usage
+
+<!-- START TOKEN(Autogenerated API docs) -->
+
+### SlugEdit
+
+Undocumented declaration.
+
+### SlugView
+
+Undocumented declaration.
+
+<!-- END TOKEN(Autogenerated API docs) -->
+
+## Contributing to this package
+
+This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.
+
+To find out more about contributing to this package or Gutenberg as a whole, please read the project's main [contributor guide](https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md).
+
+<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

packages/fields/package.json

@@ -0,0 +1,52 @@
+{
+	"name": "@wordpress/fields",
+	"version": "0.0.1",
+	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"dataviews"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/fields/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/fields"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"types": "build-types",
+	"sideEffects": [
+		"build-style/**",
+		"src/**/*.scss"
+	],
+	"dependencies": {
+		"@babel/runtime": "^7.16.0",
+		"@wordpress/components": "file:../components",
+		"@wordpress/compose": "file:../compose",
+		"@wordpress/data": "file:../data",
+		"@wordpress/element": "file:../element",
+		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/icons": "file:../icons",
+		"@wordpress/notices": "file:../notices",
+		"@wordpress/primitives": "file:../primitives",
+		"@wordpress/private-apis": "file:../private-apis",
+		"@wordpress/url": "file:../url",
+		"@wordpress/warning": "file:../warning"
+	},
+	"peerDependencies": {
+		"react": "^18.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/fields/src/fields/index.ts

@@ -0,0 +1,2 @@
+export { default as SlugEdit } from './slug/slug.edit';
+export { default as SlugView } from './slug/slug.view';