@wordpress/editor 14.1.0 → 14.3.0

package/src/components/template-part-content-panel/index.js

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { store as blocksStore } from '@wordpress/blocks';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { TEMPLATE_PART_POST_TYPE } from '../../store/constants';
+import { store as editorStore } from '../../store';
+
+const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
+
+function TemplatePartContentPanelInner() {
+	const blockTypes = useSelect( ( select ) => {
+		const { getBlockTypes } = select( blocksStore );
+		return getBlockTypes();
+	}, [] );
+	const themeBlockNames = useMemo( () => {
+		return blockTypes
+			.filter( ( blockType ) => {
+				return blockType.category === 'theme';
+			} )
+			.map( ( { name } ) => name );
+	}, [ blockTypes ] );
+	const themeBlocks = useSelect(
+		( select ) => {
+			const { getBlocksByName } = select( blockEditorStore );
+			return getBlocksByName( themeBlockNames );
+		},
+		[ themeBlockNames ]
+	);
+	if ( themeBlocks.length === 0 ) {
+		return null;
+	}
+	return (
+		<PanelBody title={ __( 'Content' ) }>
+			<BlockQuickNavigation clientIds={ themeBlocks } />
+		</PanelBody>
+	);
+}
+
+export default function TemplatePartContentPanel() {
+	const postType = useSelect( ( select ) => {
+		const { getCurrentPostType } = select( editorStore );
+		return getCurrentPostType();
+	}, [] );
+	if ( postType !== TEMPLATE_PART_POST_TYPE ) {
+		return null;
+	}
+
+	return <TemplatePartContentPanelInner />;
+}

package/src/components/visual-editor/index.js

@@ -341,7 +341,7 @@ function VisualEditor( {
 	const zoomOutProps = isZoomOutMode
 		? {
 				scale: 'default',
-				frameSize: '20px',
+				frameSize: '48px',
 		  }
 		: {};
 

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

@@ -3,6 +3,8 @@
 	height: 100%;
 	display: block;
 	background-color: $gray-300;
+	// Make this a stacking context to contain the z-index of children elements.
+	isolation: isolate;
 
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
@@ -17,7 +19,7 @@
 
 	// In the iframed canvas this keeps extra scrollbars from appearing (when block toolbars overflow). In the
 	// legacy (non-iframed) canvas, overflow must not be hidden in order to maintain support for sticky positioning.
-	.is-iframed {
+	&.is-iframed {
 		overflow: hidden;
 	}
 

package/src/dataviews/actions/delete-post.tsx

@@ -0,0 +1,107 @@
+/**
+ * WordPress dependencies
+ */
+import { trash } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import {
+	Button,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+// @ts-ignore
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import type { Action } from '@wordpress/dataviews';
+import type { StoreDescriptor } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import {
+	isTemplateRemovable,
+	getItemTitle,
+	isTemplateOrTemplatePart,
+} from './utils';
+// @ts-ignore
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import type { Post } from '../types';
+
+const { PATTERN_TYPES } = unlock( patternsPrivateApis );
+
+// This action is used for templates, patterns and template parts.
+// Every other post type uses the similar `trashPostAction` which
+// moves the post to trash.
+const deletePostAction: Action< Post > = {
+	id: 'delete-post',
+	label: __( 'Delete' ),
+	isPrimary: true,
+	icon: trash,
+	isEligible( post ) {
+		if ( isTemplateOrTemplatePart( post ) ) {
+			return isTemplateRemovable( post );
+		}
+		// We can only remove user patterns.
+		return post.type === PATTERN_TYPES.user;
+	},
+	supportsBulk: true,
+	hideModalHeader: true,
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+		const [ isBusy, setIsBusy ] = useState( false );
+		const { removeTemplates } = unlock(
+			useDispatch( editorStore as StoreDescriptor )
+		);
+		return (
+			<VStack spacing="5">
+				<Text>
+					{ items.length > 1
+						? sprintf(
+								// translators: %d: number of items to delete.
+								_n(
+									'Delete %d item?',
+									'Delete %d items?',
+									items.length
+								),
+								items.length
+						  )
+						: sprintf(
+								// translators: %s: The template or template part's titles
+								__( 'Delete "%s"?' ),
+								getItemTitle( items[ 0 ] )
+						  ) }
+				</Text>
+				<HStack justify="right">
+					<Button
+						variant="tertiary"
+						onClick={ closeModal }
+						disabled={ isBusy }
+						accessibleWhenDisabled
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						variant="primary"
+						onClick={ async () => {
+							setIsBusy( true );
+							await removeTemplates( items, {
+								allowUndo: false,
+							} );
+							onActionPerformed?.( items );
+							setIsBusy( false );
+							closeModal?.();
+						} }
+						isBusy={ isBusy }
+						disabled={ isBusy }
+						accessibleWhenDisabled
+					>
+						{ __( 'Delete' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		);
+	},
+};
+
+export default deletePostAction;

package/src/{components/post-actions/export-pattern-action.js → dataviews/actions/export-pattern.tsx}

@@ -9,50 +9,48 @@ import { downloadZip } from 'client-zip';
  */
 import { downloadBlob } from '@wordpress/blob';
 import { __ } from '@wordpress/i18n';
-import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import type { Action } from '@wordpress/dataviews';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
+import type { Pattern } from '../types';
+import { getItemTitle } from './utils';
 
-// Patterns.
-const { PATTERN_TYPES } = unlock( patternsPrivateApis );
-
-function getJsonFromItem( item ) {
+function getJsonFromItem( item: Pattern ) {
 	return JSON.stringify(
 		{
 			__file: item.type,
-			title: item.title || item.name,
-			content: item.patternPost.content.raw,
-			syncStatus: item.patternPost.wp_pattern_sync_status,
+			title: getItemTitle( item ),
+			content:
+				typeof item.content === 'string'
+					? item.content
+					: item.content?.raw,
+			syncStatus: item.wp_pattern_sync_status,
 		},
 		null,
 		2
 	);
 }
 
-export const exportPatternAsJSONAction = {
+const exportPattern: Action< Pattern > = {
 	id: 'export-pattern',
 	label: __( 'Export as JSON' ),
 	supportsBulk: true,
-	isEligible: ( item ) => {
-		if ( ! item.type ) {
-			return false;
-		}
-		return item.type === PATTERN_TYPES.user;
-	},
+	isEligible: ( item ) => item.type === 'wp_block',
 	callback: async ( items ) => {
 		if ( items.length === 1 ) {
 			return downloadBlob(
-				`${ kebabCase( items[ 0 ].title || items[ 0 ].name ) }.json`,
+				`${ kebabCase(
+					getItemTitle( items[ 0 ] ) || items[ 0 ].slug
+				) }.json`,
 				getJsonFromItem( items[ 0 ] ),
 				'application/json'
 			);
 		}
-		const nameCount = {};
+		const nameCount: Record< string, number > = {};
 		const filesToZip = items.map( ( item ) => {
-			const name = kebabCase( item.title || item.name );
+			const name = kebabCase( getItemTitle( item ) || item.slug );
 			nameCount[ name ] = ( nameCount[ name ] || 0 ) + 1;
 			return {
 				name: `${
@@ -72,3 +70,5 @@ export const exportPatternAsJSONAction = {
 		);
 	},
 };
+
+export default exportPattern;

package/src/dataviews/actions/index.ts

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { type StoreDescriptor, dispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import deletePost from './delete-post';
+import exportPattern from './export-pattern';
+import resetPost from './reset-post';
+
+// @ts-ignore
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+export default function registerDefaultActions() {
+	const { registerEntityAction } = unlock(
+		dispatch( editorStore as StoreDescriptor )
+	);
+
+	registerEntityAction( 'postType', 'wp_block', exportPattern );
+	registerEntityAction( 'postType', '*', resetPost );
+	registerEntityAction( 'postType', '*', deletePost );
+}

package/src/dataviews/actions/reset-post.tsx

@@ -0,0 +1,144 @@
+/**
+ * WordPress dependencies
+ */
+import { backup } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useState } from '@wordpress/element';
+import {
+	Button,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import type { Action } from '@wordpress/dataviews';
+import type { StoreDescriptor } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE, TEMPLATE_ORIGINS } from '../../store/constants';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import type { Post, CoreDataError } from '../types';
+import { isTemplateOrTemplatePart, getItemTitle } from './utils';
+
+const resetPost: Action< Post > = {
+	id: 'reset-post',
+	label: __( 'Reset' ),
+	isEligible: ( item ) => {
+		return (
+			isTemplateOrTemplatePart( item ) &&
+			item?.source === TEMPLATE_ORIGINS.custom &&
+			item?.has_theme_file
+		);
+	},
+	icon: backup,
+	supportsBulk: true,
+	hideModalHeader: true,
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+		const [ isBusy, setIsBusy ] = useState( false );
+		const { revertTemplate } = unlock(
+			useDispatch( editorStore as StoreDescriptor )
+		);
+		const { saveEditedEntityRecord } = useDispatch( coreStore );
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+		const onConfirm = async () => {
+			try {
+				for ( const template of items ) {
+					await revertTemplate( template, {
+						allowUndo: false,
+					} );
+					await saveEditedEntityRecord(
+						'postType',
+						template.type,
+						template.id
+					);
+				}
+				createSuccessNotice(
+					items.length > 1
+						? sprintf(
+								/* translators: The number of items. */
+								__( '%s items reset.' ),
+								items.length
+						  )
+						: sprintf(
+								/* translators: The template/part's name. */
+								__( '"%s" reset.' ),
+								getItemTitle( items[ 0 ] )
+						  ),
+					{
+						type: 'snackbar',
+						id: 'revert-template-action',
+					}
+				);
+			} catch ( error ) {
+				let fallbackErrorMessage;
+				if ( items[ 0 ].type === TEMPLATE_POST_TYPE ) {
+					fallbackErrorMessage =
+						items.length === 1
+							? __(
+									'An error occurred while reverting the template.'
+							  )
+							: __(
+									'An error occurred while reverting the templates.'
+							  );
+				} else {
+					fallbackErrorMessage =
+						items.length === 1
+							? __(
+									'An error occurred while reverting the template part.'
+							  )
+							: __(
+									'An error occurred while reverting the template parts.'
+							  );
+				}
+
+				const typedError = error as CoreDataError;
+				const errorMessage =
+					typedError.message && typedError.code !== 'unknown_error'
+						? typedError.message
+						: fallbackErrorMessage;
+
+				createErrorNotice( errorMessage, { type: 'snackbar' } );
+			}
+		};
+		return (
+			<VStack spacing="5">
+				<Text>
+					{ __( 'Reset to default and clear all customizations?' ) }
+				</Text>
+				<HStack justify="right">
+					<Button
+						variant="tertiary"
+						onClick={ closeModal }
+						disabled={ isBusy }
+						accessibleWhenDisabled
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						variant="primary"
+						onClick={ async () => {
+							setIsBusy( true );
+							await onConfirm();
+							onActionPerformed?.( items );
+							setIsBusy( false );
+							closeModal?.();
+						} }
+						isBusy={ isBusy }
+						disabled={ isBusy }
+						accessibleWhenDisabled
+					>
+						{ __( 'Reset' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		);
+	},
+};
+
+export default resetPost;

package/src/dataviews/actions/utils.ts

@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import {
+	TEMPLATE_ORIGINS,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_POST_TYPE,
+} from '../../store/constants';
+
+import type { Post, TemplateOrTemplatePart } from '../types';
+
+export function isTemplateOrTemplatePart(
+	p: Post
+): p is TemplateOrTemplatePart {
+	return p.type === TEMPLATE_POST_TYPE || p.type === TEMPLATE_PART_POST_TYPE;
+}
+
+export function getItemTitle( item: Post ) {
+	if ( typeof item.title === 'string' ) {
+		return decodeEntities( item.title );
+	}
+	if ( 'rendered' in item.title ) {
+		return decodeEntities( item.title.rendered );
+	}
+	if ( 'raw' in item.title ) {
+		return decodeEntities( item.title.raw );
+	}
+	return '';
+}
+
+/**
+ * Check if a template is removable.
+ *
+ * @param template The template entity to check.
+ * @return Whether the template is removable.
+ */
+export function isTemplateRemovable( template: TemplateOrTemplatePart ) {
+	if ( ! template ) {
+		return false;
+	}
+	// In patterns list page we map the templates parts to a different object
+	// than the one returned from the endpoint. This is why we need to check for
+	// two props whether is custom or has a theme file.
+	return (
+		[ template.source, template.source ].includes(
+			TEMPLATE_ORIGINS.custom
+		) && ! template.has_theme_file
+	);
+}

package/src/dataviews/store/private-actions.ts

@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-import type { Action, AnyItem } from '@wordpress/dataviews';
+import type { Action } from '@wordpress/dataviews';
 
-export function registerEntityAction< Item extends AnyItem >(
+export function registerEntityAction< Item >(
 	kind: string,
 	name: string,
 	config: Action< Item >

package/src/dataviews/store/private-selectors.ts

@@ -1,15 +1,22 @@
 /**
  * WordPress dependencies
  */
-import type { Action } from '@wordpress/dataviews';
+import { createSelector } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import type { State } from './reducer';
 
-const EMPTY_ARRAY: Action< any >[] = [];
-
-export function getEntityActions( state: State, kind: string, name: string ) {
-	return state.actions[ kind ]?.[ name ] ?? EMPTY_ARRAY;
-}
+export const getEntityActions = createSelector(
+	( state: State, kind: string, name: string ) => {
+		return [
+			...( state.actions[ kind ]?.[ name ] ?? [] ),
+			...( state.actions[ kind ]?.[ '*' ] ?? [] ),
+		];
+	},
+	( state: State, kind: string, name: string ) => [
+		state.actions[ kind ]?.[ name ],
+		state.actions[ kind ]?.[ '*' ],
+	]
+);

package/src/dataviews/store/reducer.ts

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { combineReducers } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
 import type { Action } from '@wordpress/dataviews';
 
 type ReduxAction =
@@ -20,8 +19,13 @@ function actions( state: ActionState = {}, action: ReduxAction ) {
 			return {
 				...state,
 				[ action.kind ]: {
+					...state[ action.kind ],
 					[ action.name ]: [
-						...( state[ action.kind ]?.[ action.name ] ?? [] ),
+						...(
+							state[ action.kind ]?.[ action.name ] ?? []
+						).filter(
+							( _action ) => _action.id !== action.config.id
+						),
 						action.config,
 					],
 				},
@@ -29,9 +33,12 @@ function actions( state: ActionState = {}, action: ReduxAction ) {
 		case 'UNREGISTER_ENTITY_ACTION': {
 			return {
 				...state,
-				[ action.kind ]: (
-					state[ action.kind ]?.[ action.name ] ?? []
-				).filter( ( _action ) => _action.id !== action.actionId ),
+				[ action.kind ]: {
+					...state[ action.kind ],
+					[ action.name ]: (
+						state[ action.kind ]?.[ action.name ] ?? []
+					).filter( ( _action ) => _action.id !== action.actionId ),
+				},
 			};
 		}
 	}

package/src/dataviews/types.ts

@@ -0,0 +1,33 @@
+type PostStatus =
+	| 'published'
+	| 'draft'
+	| 'pending'
+	| 'private'
+	| 'future'
+	| 'auto-draft'
+	| 'trash';
+
+export interface BasePost {
+	status?: PostStatus;
+	title: string | { rendered: string } | { raw: string };
+	type: string;
+	id: string | number;
+}
+export interface TemplateOrTemplatePart extends BasePost {
+	type: 'wp_template' | 'wp_template_part';
+	source: string;
+	has_theme_file: boolean;
+	id: string;
+}
+
+export interface Pattern extends BasePost {
+	slug: string;
+	title: { raw: string };
+	content: { raw: string } | string;
+	wp_pattern_sync_status: string;
+}
+
+export type Post = TemplateOrTemplatePart | Pattern | BasePost;
+
+// Will be unnecessary after typescript 5.0 upgrade.
+export type CoreDataError = { message?: string; code?: string };

package/src/hooks/pattern-overrides.js

@@ -14,6 +14,8 @@ import { store as blocksStore } from '@wordpress/blocks';
 import { store as editorStore } from '../store';
 import { unlock } from '../lock-unlock';
 
+/** @typedef {import('@wordpress/blocks').WPBlockSettings} WPBlockSettings */
+
 const {
 	PatternOverridesControls,
 	ResetOverridesControl,
@@ -34,9 +36,8 @@ const {
  */
 const withPatternOverrideControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const isSupportedBlock = Object.keys(
-			PARTIAL_SYNCING_SUPPORTED_BLOCKS
-		).includes( props.name );
+		const isSupportedBlock =
+			!! PARTIAL_SYNCING_SUPPORTED_BLOCKS[ props.name ];
 
 		return (
 			<>
@@ -47,7 +48,8 @@ const withPatternOverrideControls = createHigherOrderComponent(
 				{ isSupportedBlock && <PatternOverridesBlockControls /> }
 			</>
 		);
-	}
+	},
+	'withPatternOverrideControls'
 );
 
 // Split into a separate component to avoid a store subscription

package/src/lock-unlock.js

@@ -4,6 +4,6 @@
 import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
 		'@wordpress/editor'
 	);

package/src/private-apis.js

@@ -23,6 +23,7 @@ import {
 	mergeBaseAndUserConfigs,
 	GlobalStylesProvider,
 } from './components/global-styles-provider';
+import registerDefaultActions from './dataviews/actions';
 
 const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
 
@@ -41,6 +42,7 @@ lock( privateApis, {
 	ToolsMoreMenuGroup,
 	ViewMoreMenuGroup,
 	ResizableEditor,
+	registerDefaultActions,
 
 	// This is a temporary private API while we're updating the site editor to use EditorProvider.
 	useBlockEditorSettings,

package/src/private-apis.native.js

@@ -12,7 +12,6 @@ import { EntitiesSavedStatesExtensible } from './components/entities-saved-state
 import useBlockEditorSettings from './components/provider/use-block-editor-settings';
 import PluginPostExcerpt from './components/post-excerpt/plugin';
 import PreferencesModal from './components/preferences-modal';
-import { usePostActions } from './components/post-actions/actions';
 import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group';
 import ViewMoreMenuGroup from './components/more-menu/view-more-menu-group';
 
@@ -24,7 +23,6 @@ lock( privateApis, {
 	EntitiesSavedStatesExtensible,
 	PluginPostExcerpt,
 	PreferencesModal,
-	usePostActions,
 	ToolsMoreMenuGroup,
 	ViewMoreMenuGroup,