@wordpress/edit-site 5.21.1-next.f8d8eceb.0 → 5.23.0

package/src/components/actions/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { external, trash } from '@wordpress/icons';
+import { external, trash, backup } from '@wordpress/icons';
 import { addQueryArgs } from '@wordpress/url';
 import { useDispatch } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -31,7 +31,7 @@ export function useTrashPostAction() {
 			isEligible( { status } ) {
 				return status !== 'trash';
 			},
-			async perform( post ) {
+			async callback( post ) {
 				try {
 					await deleteEntityRecord(
 						'postType',
@@ -67,6 +67,114 @@ export function useTrashPostAction() {
 	);
 }
 
+export function usePermanentlyDeletePostAction() {
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+	const { deleteEntityRecord } = useDispatch( coreStore );
+
+	return useMemo(
+		() => ( {
+			id: 'permanently-delete',
+			label: __( 'Permanently delete' ),
+			isPrimary: true,
+			icon: trash,
+			isEligible( { status } ) {
+				return status === 'trash';
+			},
+			async callback( post ) {
+				try {
+					await deleteEntityRecord(
+						'postType',
+						post.type,
+						post.id,
+						{ force: true },
+						{ throwOnError: true }
+					);
+					createSuccessNotice(
+						sprintf(
+							/* translators: The posts's title. */
+							__( '"%s" permanently deleted.' ),
+							decodeEntities( post.title.rendered )
+						),
+						{
+							type: 'snackbar',
+							id: 'edit-site-post-permanently-deleted',
+						}
+					);
+				} catch ( error ) {
+					const errorMessage =
+						error.message && error.code !== 'unknown_error'
+							? error.message
+							: __(
+									'An error occurred while permanently deleting the post.'
+							  );
+
+					createErrorNotice( errorMessage, { type: 'snackbar' } );
+				}
+			},
+		} ),
+		[ createSuccessNotice, createErrorNotice, deleteEntityRecord ]
+	);
+}
+
+export function useRestorePostAction() {
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+	const { editEntityRecord, saveEditedEntityRecord } =
+		useDispatch( coreStore );
+
+	return useMemo(
+		() => ( {
+			id: 'restore',
+			label: __( 'Restore' ),
+			isPrimary: true,
+			icon: backup,
+			isEligible( { status } ) {
+				return status === 'trash';
+			},
+			async callback( post ) {
+				await editEntityRecord( 'postType', post.type, post.id, {
+					status: 'draft',
+				} );
+				try {
+					await saveEditedEntityRecord(
+						'postType',
+						post.type,
+						post.id,
+						{ throwOnError: true }
+					);
+					createSuccessNotice(
+						sprintf(
+							/* translators: The posts's title. */
+							__( '"%s" has been restored.' ),
+							decodeEntities( post.title.rendered )
+						),
+						{
+							type: 'snackbar',
+							id: 'edit-site-post-restored',
+						}
+					);
+				} catch ( error ) {
+					const errorMessage =
+						error.message && error.code !== 'unknown_error'
+							? error.message
+							: __(
+									'An error occurred while restoring the post.'
+							  );
+
+					createErrorNotice( errorMessage, { type: 'snackbar' } );
+				}
+			},
+		} ),
+		[
+			createSuccessNotice,
+			createErrorNotice,
+			editEntityRecord,
+			saveEditedEntityRecord,
+		]
+	);
+}
+
 export const viewPostAction = {
 	id: 'view-post',
 	label: __( 'View' ),
@@ -75,7 +183,7 @@ export const viewPostAction = {
 	isEligible( post ) {
 		return post.status !== 'trash';
 	},
-	perform( post ) {
+	callback( post ) {
 		document.location.href = post.link;
 	},
 };
@@ -89,7 +197,7 @@ export function useEditPostAction() {
 			isEligible( { status } ) {
 				return status !== 'trash';
 			},
-			perform( post ) {
+			callback( post ) {
 				history.push( {
 					postId: post.id,
 					postType: post.type,
@@ -114,7 +222,7 @@ export const postRevisionsAction = {
 			post?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
 		return lastRevisionId && revisionsCount > 1;
 	},
-	perform( post ) {
+	callback( post ) {
 		const href = addQueryArgs( 'revision.php', {
 			revision: post?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id,
 		} );

package/src/components/add-new-template/new-template.js

@@ -61,7 +61,6 @@ import {
 } from './utils';
 import AddCustomGenericTemplateModalContent from './add-custom-generic-template-modal-content';
 import TemplateActionsLoadingScreen from './template-actions-loading-screen';
-import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 const { useHistory } = unlock( routerPrivateApis );
@@ -165,7 +164,6 @@ export default function NewTemplate( {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
-	const { setTemplate } = unlock( useDispatch( editSiteStore ) );
 
 	const { homeUrl } = useSelect( ( select ) => {
 		const {
@@ -208,9 +206,6 @@ export default function NewTemplate( {
 				{ throwOnError: true }
 			);
 
-			// Set template before navigating away to avoid initial stale value.
-			setTemplate( newTemplate.id, newTemplate.slug );
-
 			// Navigate to the created template editor.
 			history.push( {
 				postId: newTemplate.id,

package/src/components/block-editor/style.scss

@@ -172,90 +172,3 @@
 		box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
 	}
 }
-
-// Fixed contextual toolbar
-@include editor-left(".edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed");
-
-.edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-	position: sticky;
-	top: 0;
-	z-index: z-index(".block-editor-block-popover");
-	display: block;
-	width: 100%;
-
-	// on desktop and tablet viewports the toolbar is fixed
-	// on top of interface header
-	$toolbar-margin: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;
-
-	@include break-medium() {
-		// leave room for block inserter, undo and redo, list view
-		margin-left: $toolbar-margin;
-		// position on top of interface header
-		position: fixed;
-		top: $admin-bar-height;
-		// Don't fill up when empty
-		min-height: initial;
-		// has to be flex for collapse button to fit
-		display: flex;
-
-		// Mimic the height of the parent, vertically align center, and provide a max-height.
-		height: $header-height;
-		align-items: center;
-
-
-		// on tablet viewports the toolbar is fixed
-		// on top of interface header and covers the whole header
-		// except for the inserter on the left
-		width: calc(100% - #{$toolbar-margin});
-
-		&.is-collapsed {
-			width: initial;
-		}
-
-		&:empty {
-			width: initial;
-		}
-
-		.is-fullscreen-mode & {
-			// leave room for block inserter, undo and redo, list view
-			// and some margin left
-			margin-left: $grid-unit-80 * 4 - 2 * $grid-unit;
-
-			top: 0;
-
-			&.is-collapsed {
-				width: initial;
-			}
-
-			&:empty {
-				width: initial;
-			}
-		}
-
-		.show-icon-labels & {
-			margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin
-			width: calc(100% + 40px - #{$toolbar-margin}); //there are no undo, redo and list view buttons
-
-			.is-fullscreen-mode & {
-				margin-left: $grid-unit * 18; // site hub, inserter and margin
-			}
-		}
-	}
-
-	// on desktop viewports the toolbar is fixed
-	// on top of interface header and leaves room
-	// for the block inserter the publish button
-	@include break-large() {
-		width: auto;
-		.show-icon-labels & {
-			width: auto; //there are no undo, redo and list view buttons
-		}
-
-		.is-fullscreen-mode & {
-			// in full screen mode we need to account for
-			// the combined with of the tools at the right of the header and the margin left
-			// of the toolbar which includes four buttons
-			width: calc(100% - 280px - #{4 * $grid-unit-80});
-		}
-	}
-}

package/src/components/block-editor/use-site-editor-settings.js

@@ -4,12 +4,16 @@
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { store as preferencesStore } from '@wordpress/preferences';
+
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import inserterMediaCategories from './inserter-media-categories';
+
+const { useBlockEditorSettings } = unlock( editorPrivateApis );
 
 function useArchiveLabel( templateSlug ) {
 	const taxonomyMatches = templateSlug?.match(
@@ -83,42 +87,25 @@ function useArchiveLabel( templateSlug ) {
 	);
 }
 
-export default function useSiteEditorSettings() {
+export function useSpecificEditorSettings() {
 	const { setIsInserterOpened } = useDispatch( editSiteStore );
-	const { storedSettings, canvasMode, templateType, siteSettings } =
-		useSelect(
-			( select ) => {
-				const { canUser, getEntityRecord } = select( coreStore );
-				const { getSettings, getCanvasMode, getEditedPostType } =
-					unlock( select( editSiteStore ) );
-				return {
-					storedSettings: getSettings( setIsInserterOpened ),
-					canvasMode: getCanvasMode(),
-					templateType: getEditedPostType(),
-					siteSettings: canUser( 'read', 'settings' )
-						? getEntityRecord( 'root', 'site' )
-						: undefined,
-				};
-			},
-			[ setIsInserterOpened ]
-		);
-
-	const settingsBlockPatterns =
-		storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
-		storedSettings.__experimentalBlockPatterns; // WP 5.9
-	const settingsBlockPatternCategories =
-		storedSettings.__experimentalAdditionalBlockPatternCategories ?? // WP 6.0
-		storedSettings.__experimentalBlockPatternCategories; // WP 5.9
-
 	const {
-		restBlockPatterns,
-		restBlockPatternCategories,
 		templateSlug,
-		userPatternCategories,
+		focusMode,
+		isDistractionFree,
+		hasFixedToolbar,
+		keepCaretInsideBlock,
+		canvasMode,
+		settings,
 	} = useSelect( ( select ) => {
-		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
-		const { getEditedEntityRecord, getUserPatternCategories } =
-			select( coreStore );
+		const {
+			getEditedPostType,
+			getEditedPostId,
+			getCanvasMode,
+			getSettings,
+		} = unlock( select( editSiteStore ) );
+		const { get: getPreference } = select( preferencesStore );
+		const { getEditedEntityRecord } = select( coreStore );
 		const usedPostType = getEditedPostType();
 		const usedPostId = getEditedPostId();
 		const _record = getEditedEntityRecord(
@@ -127,75 +114,67 @@ export default function useSiteEditorSettings() {
 			usedPostId
 		);
 		return {
-			restBlockPatterns: select( coreStore ).getBlockPatterns(),
-			restBlockPatternCategories:
-				select( coreStore ).getBlockPatternCategories(),
 			templateSlug: _record.slug,
-			userPatternCategories: getUserPatternCategories(),
+			focusMode: !! getPreference( 'core/edit-site', 'focusMode' ),
+			isDistractionFree: !! getPreference(
+				'core/edit-site',
+				'distractionFree'
+			),
+			hasFixedToolbar: !! getPreference(
+				'core/edit-site',
+				'fixedToolbar'
+			),
+			keepCaretInsideBlock: !! getPreference(
+				'core/edit-site',
+				'keepCaretInsideBlock'
+			),
+			canvasMode: getCanvasMode(),
+			settings: getSettings(),
 		};
 	}, [] );
 	const archiveLabels = useArchiveLabel( templateSlug );
 
-	const blockPatterns = useMemo(
-		() =>
-			[
-				...( settingsBlockPatterns || [] ),
-				...( restBlockPatterns || [] ),
-			]
-				.filter(
-					( x, index, arr ) =>
-						index === arr.findIndex( ( y ) => x.name === y.name )
-				)
-				.filter( ( { postTypes } ) => {
-					return (
-						! postTypes ||
-						( Array.isArray( postTypes ) &&
-							postTypes.includes( templateType ) )
-					);
-				} ),
-		[ settingsBlockPatterns, restBlockPatterns, templateType ]
-	);
-
-	const blockPatternCategories = useMemo(
-		() =>
-			[
-				...( settingsBlockPatternCategories || [] ),
-				...( restBlockPatternCategories || [] ),
-			].filter(
-				( x, index, arr ) =>
-					index === arr.findIndex( ( y ) => x.name === y.name )
-			),
-		[ settingsBlockPatternCategories, restBlockPatternCategories ]
-	);
-	return useMemo( () => {
-		const {
-			__experimentalAdditionalBlockPatterns,
-			__experimentalAdditionalBlockPatternCategories,
-			focusMode,
-			...restStoredSettings
-		} = storedSettings;
-
+	const defaultEditorSettings = useMemo( () => {
 		return {
-			...restStoredSettings,
-			inserterMediaCategories,
-			__experimentalBlockPatterns: blockPatterns,
-			__experimentalBlockPatternCategories: blockPatternCategories,
-			__experimentalUserPatternCategories: userPatternCategories,
+			...settings,
+
+			__experimentalSetIsInserterOpened: setIsInserterOpened,
 			focusMode: canvasMode === 'view' && focusMode ? false : focusMode,
+			isDistractionFree,
+			hasFixedToolbar,
+			keepCaretInsideBlock,
+
+			// I wonder if they should be set in the post editor too
 			__experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel,
 			__experimentalArchiveTitleNameLabel: archiveLabels.archiveNameLabel,
-			pageOnFront: siteSettings?.page_on_front,
-			pageForPosts: siteSettings?.page_for_posts,
 		};
 	}, [
-		storedSettings,
-		blockPatterns,
-		blockPatternCategories,
-		userPatternCategories,
+		settings,
+		setIsInserterOpened,
+		focusMode,
+		isDistractionFree,
+		hasFixedToolbar,
+		keepCaretInsideBlock,
 		canvasMode,
 		archiveLabels.archiveTypeLabel,
 		archiveLabels.archiveNameLabel,
-		siteSettings?.page_on_front,
-		siteSettings?.page_for_posts,
 	] );
+
+	return defaultEditorSettings;
+}
+
+export default function useSiteEditorSettings() {
+	const defaultEditorSettings = useSpecificEditorSettings();
+	const { postType, postId } = useSelect( ( select ) => {
+		const { getEditedPostType, getEditedPostId } = unlock(
+			select( editSiteStore )
+		);
+		const usedPostType = getEditedPostType();
+		const usedPostId = getEditedPostId();
+		return {
+			postType: usedPostType,
+			postId: usedPostId,
+		};
+	}, [] );
+	return useBlockEditorSettings( defaultEditorSettings, postType, postId );
 }

package/src/components/dataviews/README.md

@@ -5,7 +5,7 @@ This file documents the DataViews UI component, which provides an API to render
 ```js
 <DataViews
 	data={ pages }
-	isLoading= { isLoadingPages }
+	isLoading={ isLoadingPages }
 	view={ view }
 	onChangeView={ onChangeView }
 	fields={ fields }
@@ -16,7 +16,7 @@ This file documents the DataViews UI component, which provides an API to render
 
 ## Data
 
-The dataset to work with, represented as a one-dimensional array. 
+The dataset to work with, represented as a one-dimensional array.
 
 Example:
 
@@ -43,50 +43,73 @@ Example:
 		direction: 'desc',
 	},
 	search: '',
-	filters: {
-		author: 2,
-		status: 'publish, draft'
-	},
-	visibleFilters: [ 'author', 'status' ],
+	filters: [
+		{ field: 'author', operator: 'in', value: 2 },
+		{ field: 'status', operator: 'in', value: 'publish,draft' }
+	],
 	hiddenFields: [ 'date', 'featured-image' ],
 	layout: {},
 }
 ```
 
-- `type`: view type, one of `list` or `grid`.
-- `perPage`: number of records to show per page.
-- `page`: the page that is visible.
-- `sort.field`: field used for sorting the dataset.
-- `sort.direction`: the direction to use for sorting, one of `asc` or `desc`.
-- `search`: the text search applied to the dataset.
-- `filters`: the filters applied to the dataset. See filters section.
-- `visibleFilters`: the `id` of the filters that are visible in the UI.
-- `hiddenFields`: the `id` of the fields that are hidden in the UI.
-- `layout`: ...
+-   `type`: view type, one of `list` or `grid`.
+-   `perPage`: number of records to show per page.
+-   `page`: the page that is visible.
+-   `sort.field`: field used for sorting the dataset.
+-   `sort.direction`: the direction to use for sorting, one of `asc` or `desc`.
+-   `search`: the text search applied to the dataset.
+-   `filters`: the filters applied to the dataset. Each item describes:
+    -   `field`: which field this filter is bound to.
+    -   `operator`: which type of filter it is. Only `in` available at the moment.
+    -   `value`: the actual value selected by the user.
+-   `hiddenFields`: the `id` of the fields that are hidden in the UI.
+-   `layout`: ...
 
-Note that it's the consumer's responsibility to provide the data and make sure the dataset corresponds to the view's config (sort, pagination, filters, etc.).
+### View <=> data
 
-Example:
+The view is a representation of the visible state of the dataset. Note, however, that it's the consumer's responsibility to work with the data provider to make sure the user options defined through the view's config (sort, pagination, filters, etc.) are respected.
+
+The following example shows how a view object is used to query the WordPress REST API via the entities abstraction. The same can be done with any other data provider.
 
 ```js
-function MyCustomPageList() { 
+function MyCustomPageList() {
 	const [ view, setView ] = useState( {
 		type: 'list',
+		perPage: 5,
 		page: 1,
-		"...": "..."
+		sort: {
+			field: 'date',
+			direction: 'desc',
+		},
+		search: '',
+		filters: [
+			{ field: 'author', operator: 'in', value: 2 },
+			{ field: 'status', operator: 'in', value: 'publish,draft' }
+		],
+		hiddenFields: [ 'date', 'featured-image' ],
+		layout: {},
 	} );
 
-	const queryArgs = useMemo(
-		() => ( {
+	const queryArgs = useMemo( () => {
+		const filters = {};
+		view.filters.forEach( ( filter ) => {
+			if ( filter.field === 'status' && filter.operator === 'in' ) {
+				filters.status = filter.value;
+			}
+			if ( filter.field === 'author' && filter.operator === 'in' ) {
+				filters.author = filter.value;
+			}
+		} );
+		return {
 			per_page: view.perPage,
 			page: view.page,
+			_embed: 'author',
 			order: view.sort?.direction,
-			orderby: view.sort?.field
+			orderby: view.sort?.field,
 			search: view.search,
-			...view.filters
-		} ),
-		[ view ]
-	);
+			...filters,
+		};
+	}, [ view ] );
 
 	const {
 		records
@@ -119,7 +142,8 @@ Example:
 			return (
 				<time>{ getFormattedDate( item.date ) }</time>
 			);
-		}
+		},
+		enableHiding: false
 	},
 	{
 		id: 'author',
@@ -134,61 +158,31 @@ Example:
 			{ value: 1, label: 'Admin' }
 			{ value: 2, label: 'User' }
 		]
-		filters: [ 'enumeration' ],
+		filters: [ 'in' ],
+		enableSorting: false
 	}
 ]
 ```
 
-- `id`: identifier for the field. Unique.
-- `header`: the field's name to be shown in the UI.
-- `getValue`: function that returns the value of the field.
-- `render`: function that renders the field.
-- `elements`: the set of valid values for the field's value.
-- `filters`: what filters are available for the user to use. See filters section.
-
-## Filters
-
-Filters describe the conditions a record should match to be listed as part of the dataset. Filters are provided per field.
-
-```js
-const field = [
-	{
-		id: 'author',
-		filters: [ 'enumeration' ],
-	}
-];
-
-<DataViews
-	fields={ fields }
-/>
-```
-
-A filter is an object that may contain the following properties:
-
-- `id`: unique identifier for the filter. Matches the entity query param. Field filters may omit it, in which case the field's `id` will be used.
-- `name`: nice looking name for the filter. Field filters may omit it, in which case the field's `header` will be used.
-- `type`: the type of filter. Only `enumeration` is supported at the moment.
-- `elements`: for filters of type `enumeration`, the list of options to show. A one-dimensional array of object with value/label keys, as in `[ { value: 1, label: "Value name" } ]`.
-	- `value`: what's serialized into the view's filters.
-	- `label`: nice-looking name for users.
-- `resetValue`: for filters of type `enumeration`, this is the value for the reset option. If none is provided, `''` will be used.
-- `resetLabel`: for filters of type `enumeration`, this is the label for the reset option. If none is provided, `All` will be used.
-
-As a convenience, field's filter can provide abbreviated versions for the filter. All of following examples result in the same filter:
-
-```js
-const field = [
-	{
-		id: 'author',
-		header: __( 'Author' ),
-		elements: authors,
-		filters: [
-			'enumeration',
-			{ type: 'enumeration' },
-			{ id: 'author', type: 'enumeration' },
-			{ id: 'author', type: 'enumeration', name: __( 'Author' ) },
-			{ id: 'author', type: 'enumeration', name: __( 'Author' ), elements: authors },
-		],
-	}
-];
-```
+-   `id`: identifier for the field. Unique.
+-   `header`: the field's name to be shown in the UI.
+-   `getValue`: function that returns the value of the field.
+-   `render`: function that renders the field.
+-   `elements`: the set of valid values for the field's value.
+-   `filters`: what filter operators are available for the user to use over this field. Only `in` available at the moment.
+-   `enableSorting`: whether the data can be sorted by the given field. True by default.
+-   `enableHiding`: whether the field can be hidden. True by default.
+
+## Actions
+
+Array of operations that can be performed upon each record. Each action is an object with the following properties:
+
+-   `id`: string, required. Unique identifier of the action. For example, `move-to-trash`.
+-   `label`: string, required. User facing description of the action. For example, `Move to Trash`.
+-   `isPrimary`: boolean, optional. Whether the action should be listed inline (primary) or in hidden in the more actions menu (secondary).
+-   `icon`: icon to show for primary actions. It's required for a primary action, otherwise the action would be considered secondary.
+-   `isEligible`: function, optional. Whether the action can be performed for a given record. If not present, the action is considered to be eligible for all items. It takes the given record as input.
+-   `isDestructive`: boolean, optional. Whether the action can delete data, in which case the UI would communicate it via red color.
+-   `callback`: function, required. Callback function that takes the record as input and performs the required action.
+-   `RenderModal`: ReactElement, optional. If an action requires to render contents in a modal, can provide a component which takes as input the record and a `closeModal` function. If this prop is provided, the `callback` property would be ignored.
+-   `hideModalHeader`: boolean, optional. This property is used in combination with `RenderModal` and controls the visibility of the modal's header. If the action renders a modal and doesn't hide the header, the action's label is going to be used in the modal's header.