@wordpress/fields 0.1.0 → 0.3.0

package/build-types/fields/parent/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/fields/parent/utils.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,wBAAgB,wBAAwB,CAAE,IAAI,EAAE,QAAQ,UAMvD"}

package/build-types/fields/slug/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+declare const slugField: Field<BasePost>;
+export default slugField;
+//# sourceMappingURL=index.d.ts.map

package/build-types/fields/slug/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/slug/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAElD;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAK5C,QAAA,MAAM,SAAS,EAAE,KAAK,CAAE,QAAQ,CAO/B,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/build-types/fields/slug/slug-edit.d.ts

@@ -0,0 +1,8 @@
+import type { DataFormControlProps } from '@wordpress/dataviews';
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+declare const SlugEdit: ({ field, onChange, data, }: DataFormControlProps<BasePost>) => import("react").JSX.Element;
+export default SlugEdit;
+//# sourceMappingURL=slug-edit.d.ts.map

package/build-types/fields/slug/slug-edit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slug-edit.d.ts","sourceRoot":"","sources":["../../../src/fields/slug/slug-edit.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAGjE;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,QAAA,MAAM,QAAQ,+BAIX,oBAAoB,CAAE,QAAQ,CAAE,gCA6HlC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/build-types/fields/slug/slug-view.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+declare const SlugView: ({ item }: {
+    item: BasePost;
+}) => string;
+export default SlugView;
+//# sourceMappingURL=slug-view.d.ts.map

package/build-types/fields/slug/slug-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slug-view.d.ts","sourceRoot":"","sources":["../../../src/fields/slug/slug-view.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,QAAA,MAAM,QAAQ,aAAe;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,WAa9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/build-types/types.d.ts

@@ -43,6 +43,8 @@ export interface BasePost extends CommonPost {
     menu_order?: number;
     ping_status?: 'open' | 'closed';
     link?: string;
+    slug?: string;
+    permalink_template?: string;
 }
 export interface Template extends CommonPost {
     type: 'wp_template';

package/build-types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/fields",
-	"version": "0.1.0",
+	"version": "0.3.0",
 	"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",
@@ -31,28 +31,31 @@
 		"src/**/*.scss"
 	],
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/api-fetch": "^7.9.0",
-		"@wordpress/blob": "^4.9.0",
-		"@wordpress/blocks": "^13.9.0",
-		"@wordpress/components": "^28.9.0",
-		"@wordpress/compose": "^7.9.0",
-		"@wordpress/core-data": "^7.9.0",
-		"@wordpress/data": "^10.9.0",
-		"@wordpress/dataviews": "^4.5.0",
-		"@wordpress/element": "^6.9.0",
-		"@wordpress/hooks": "^4.9.0",
-		"@wordpress/html-entities": "^4.9.0",
-		"@wordpress/i18n": "^5.9.0",
-		"@wordpress/icons": "^10.9.0",
-		"@wordpress/notices": "^5.9.0",
-		"@wordpress/patterns": "^2.9.0",
-		"@wordpress/primitives": "^4.9.0",
-		"@wordpress/private-apis": "^1.9.0",
-		"@wordpress/url": "^4.9.0",
-		"@wordpress/warning": "^3.9.0",
+		"@babel/runtime": "7.25.7",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/blob": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/core-data": "*",
+		"@wordpress/data": "*",
+		"@wordpress/dataviews": "*",
+		"@wordpress/element": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/html-entities": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/media-utils": "*",
+		"@wordpress/notices": "*",
+		"@wordpress/patterns": "*",
+		"@wordpress/primitives": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/router": "*",
+		"@wordpress/url": "*",
+		"@wordpress/warning": "*",
 		"change-case": "4.1.2",
-		"client-zip": "^2.4.5"
+		"client-zip": "^2.4.5",
+		"remove-accents": "^0.5.0"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0"
@@ -60,5 +63,6 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2e5495c635910cb34bfaca3c6258d2e989f66214"
+	"wpScript": true,
+	"gitHead": "dcf4613b33b0eda14e203ac30f700ed0db70347f"
 }

package/src/actions/delete-post.tsx

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { trash } from '@wordpress/icons';
-import { __, _n, sprintf } from '@wordpress/i18n';
+import { __, _x, _n, sprintf } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import {
 	Button,
@@ -66,8 +66,8 @@ const deletePostAction: Action< Template | TemplatePart | Pattern > = {
 								items.length
 						  )
 						: sprintf(
-								// translators: %s: The template or template part's titles
-								__( 'Delete "%s"?' ),
+								// translators: %s: The template or template part's title
+								_x( 'Delete "%s"?', 'template part' ),
 								getItemTitle( items[ 0 ] )
 						  ) }
 				</Text>
@@ -100,8 +100,11 @@ const deletePostAction: Action< Template | TemplatePart | Pattern > = {
 														)
 												  )
 												: sprintf(
-														/* translators: The template/part's name. */
-														__( '"%s" deleted.' ),
+														/* translators: %s: The template/part's name. */
+														_x(
+															'"%s" deleted.',
+															'template part'
+														),
 														decodeEntities(
 															getItemTitle( item )
 														)

package/src/actions/duplicate-post.tsx

@@ -38,7 +38,7 @@ const duplicatePost: Action< BasePost > = {
 			...items[ 0 ],
 			title: sprintf(
 				/* translators: %s: Existing template title */
-				__( '%s (Copy)' ),
+				_x( '%s (Copy)', 'template' ),
 				getItemTitle( items[ 0 ] )
 			),
 		} );
@@ -104,7 +104,7 @@ const duplicatePost: Action< BasePost > = {
 
 				createSuccessNotice(
 					sprintf(
-						// translators: %s: Title of the created template e.g: "Category".
+						// translators: %s: Title of the created post or template, e.g: "Hello world".
 						__( '"%s" successfully created.' ),
 						decodeEntities( newItem.title?.rendered || item.title )
 					),

package/src/actions/view-post-revisions.tsx

@@ -17,7 +17,7 @@ const viewPostRevisions: Action< Post > = {
 		const revisionsCount =
 			items[ 0 ]._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
 		return sprintf(
-			/* translators: %s: number of revisions */
+			/* translators: %s: number of revisions. */
 			__( 'View revisions (%s)' ),
 			revisionsCount
 		);

package/src/fields/featured-image/featured-image-edit.tsx

@@ -0,0 +1,122 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, __experimentalGrid as Grid } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useCallback, useRef } from '@wordpress/element';
+// @ts-ignore
+import { MediaUpload } from '@wordpress/media-utils';
+import { lineSolid } from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
+import type { DataFormControlProps } from '@wordpress/dataviews';
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { __ } from '@wordpress/i18n';
+
+export const FeaturedImageEdit = ( {
+	data,
+	field,
+	onChange,
+}: DataFormControlProps< BasePost > ) => {
+	const { id } = field;
+
+	const value = field.getValue( { item: data } );
+
+	const media = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreStore );
+			return getEntityRecord( 'root', 'media', value );
+		},
+		[ value ]
+	);
+
+	const onChangeControl = useCallback(
+		( newValue: number ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	const url = media?.source_url;
+	const title = media?.title?.rendered;
+	const ref = useRef( null );
+
+	return (
+		<fieldset className="fields-controls__featured-image">
+			<div className="fields-controls__featured-image-container">
+				<MediaUpload
+					onSelect={ ( selectedMedia: { id: number } ) => {
+						onChangeControl( selectedMedia.id );
+					} }
+					allowedTypes={ [ 'image' ] }
+					render={ ( { open }: { open: () => void } ) => {
+						return (
+							<div
+								ref={ ref }
+								role="button"
+								tabIndex={ -1 }
+								onClick={ () => {
+									open();
+								} }
+								onKeyDown={ open }
+							>
+								<Grid
+									rowGap={ 0 }
+									columnGap={ 8 }
+									templateColumns="24px 1fr 24px"
+								>
+									{ url && (
+										<>
+											<img
+												className="fields-controls__featured-image-image"
+												alt=""
+												width={ 24 }
+												height={ 24 }
+												src={ url }
+											/>
+											<span className="fields-controls__featured-image-title">
+												{ title }
+											</span>
+										</>
+									) }
+									{ ! url && (
+										<>
+											<span
+												className="fields-controls__featured-image-placeholder"
+												style={ {
+													width: '24px',
+													height: '24px',
+												} }
+											/>
+											<span className="fields-controls__featured-image-title">
+												{ __( 'Choose an image…' ) }
+											</span>
+										</>
+									) }
+									{ url && (
+										<>
+											<Button
+												size="small"
+												className="fields-controls__featured-image-remove-button"
+												icon={ lineSolid }
+												onClick={ (
+													event: React.MouseEvent< HTMLButtonElement >
+												) => {
+													event.stopPropagation();
+													onChangeControl( 0 );
+												} }
+											/>
+										</>
+									) }
+								</Grid>
+							</div>
+						);
+					} }
+				/>
+			</div>
+		</fieldset>
+	);
+};

package/src/fields/featured-image/featured-image-view.tsx

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import type { DataViewRenderFieldProps } from '@wordpress/dataviews';
+
+export const FeaturedImageView = ( {
+	item,
+}: DataViewRenderFieldProps< BasePost > ) => {
+	const mediaId = item.featured_media;
+
+	const media = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreStore );
+			return mediaId ? getEntityRecord( 'root', 'media', mediaId ) : null;
+		},
+		[ mediaId ]
+	);
+	const url = media?.source_url;
+
+	if ( url ) {
+		return (
+			<img
+				className="fields-controls__featured-image-image"
+				src={ url }
+				alt=""
+			/>
+		);
+	}
+
+	return <span className="fields-controls__featured-image-placeholder" />;
+};

package/src/fields/featured-image/index.ts

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { __ } from '@wordpress/i18n';
+import { FeaturedImageEdit } from './featured-image-edit';
+import { FeaturedImageView } from './featured-image-view';
+
+const featuredImageField: Field< BasePost > = {
+	id: 'featured_media',
+	type: 'text',
+	label: __( 'Featured Image' ),
+	getValue: ( { item } ) => item.featured_media,
+	Edit: FeaturedImageEdit,
+	render: FeaturedImageView,
+	enableSorting: false,
+};
+
+export default featuredImageField;

package/src/fields/featured-image/style.scss

@@ -0,0 +1,95 @@
+.fields-controls__featured-image-placeholder {
+	border-radius: $radius-small;
+	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+	display: inline-block;
+	padding: 0;
+	background:
+		$white
+		linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
+}
+
+.fields-controls__featured-image-title {
+	width: 100%;
+	color: $gray-900;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.fields-controls__featured-image-image {
+	width: 100%;
+	height: 100%;
+	border-radius: $radius-small;
+	align-self: center;
+}
+
+.fields-controls__featured-image-container {
+	.fields-controls__featured-image-placeholder {
+		margin: 0;
+	}
+
+	span {
+		margin-right: auto;
+	}
+}
+
+fieldset.fields-controls__featured-image {
+	.fields-controls__featured-image-container {
+		border: $border-width solid $gray-300;
+		border-radius: $radius-small;
+		padding: 8px 12px;
+		cursor: pointer;
+		&:hover {
+			background-color: $gray-100;
+		}
+	}
+
+	.fields-controls__featured-image-placeholder {
+		width: 24px;
+		height: 24px;
+	}
+
+	span {
+		align-self: center;
+		text-align: start;
+		white-space: nowrap;
+	}
+
+	.fields-controls__featured-image-upload-button {
+		padding: 0;
+		height: fit-content;
+		&:hover,
+		&:focus {
+			border: 0;
+			color: unset;
+		}
+	}
+
+	.fields-controls__featured-image-remove-button {
+		place-self: end;
+	}
+}
+
+.dataforms-layouts-panel__field-control {
+	.fields-controls__featured-image-image {
+		width: 16px;
+		height: 16px;
+	}
+
+	.fields-controls__featured-image-placeholder {
+		width: 16px;
+		height: 16px;
+	}
+}
+
+.dataviews-view-table__cell-content-wrapper {
+	.fields-controls__featured-image-image {
+		width: 32px;
+		height: 32px;
+	}
+
+	.fields-controls__featured-image-placeholder {
+		width: 32px;
+		height: 32px;
+	}
+}

package/src/fields/index.ts

@@ -1,2 +1,5 @@
+export { default as slugField } from './slug';
 export { default as titleField } from './title';
 export { default as orderField } from './order';
+export { default as featuredImageField } from './featured-image';
+export { default as parentField } from './parent';

package/src/fields/parent/index.ts

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { __ } from '@wordpress/i18n';
+import { ParentEdit } from './parent-edit';
+import { ParentView } from './parent-view';
+
+const parentField: Field< BasePost > = {
+	id: 'parent',
+	type: 'text',
+	label: __( 'Parent' ),
+	getValue: ( { item } ) => item.parent,
+	Edit: ParentEdit,
+	render: ParentView,
+	enableSorting: true,
+};
+
+/**
+ * This field is used to display the post parent.
+ */
+export default parentField;