@wordpress/editor 14.2.0 → 14.3.0

package/src/components/preview-dropdown/index.js

@@ -50,7 +50,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 		size: 'compact',
 		showTooltip: ! showIconLabels,
 		disabled,
-		__experimentalIsFocusable: disabled,
+		accessibleWhenDisabled: disabled,
 	};
 	const menuProps = {
 		'aria-label': __( 'View options' ),

package/src/components/provider/index.native.js

@@ -171,17 +171,9 @@ class NativeEditorProvider extends Component {
 		);
 
 		this.subscriptionParentUpdateEditorSettings =
-			subscribeUpdateEditorSettings(
-				( { galleryWithImageBlocks, ...editorSettings } ) => {
-					if ( typeof galleryWithImageBlocks === 'boolean' ) {
-						window.wp.galleryBlockV2Enabled =
-							galleryWithImageBlocks;
-					}
-					updateEditorSettings(
-						this.getThemeColors( editorSettings )
-					);
-				}
-			);
+			subscribeUpdateEditorSettings( ( { ...editorSettings } ) => {
+				updateEditorSettings( this.getThemeColors( editorSettings ) );
+			} );
 
 		this.subscriptionParentUpdateCapabilities = subscribeUpdateCapabilities(
 			( payload ) => {

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

@@ -27,7 +27,7 @@ import { lock, unlock } from '../../lock-unlock';
 import { useGlobalStylesContext } from '../global-styles-provider';
 
 const EMPTY_BLOCKS_LIST = [];
-const DEFAULT_STYLES = {};
+const EMPTY_OBJECT = {};
 
 function __experimentalReusableBlocksSelect( select ) {
 	return (
@@ -42,7 +42,6 @@ const BLOCK_EDITOR_SETTINGS = [
 	'__experimentalDiscussionSettings',
 	'__experimentalFeatures',
 	'__experimentalGlobalStylesBaseStyles',
-	'__unstableGalleryWithImageBlocks',
 	'alignWide',
 	'blockInspectorTabs',
 	'allowedMimeTypes',
@@ -88,8 +87,12 @@ const BLOCK_EDITOR_SETTINGS = [
 	'__experimentalArchiveTitleNameLabel',
 ];
 
-const { globalStylesDataKey, selectBlockPatternsKey, reusableBlocksSelectKey } =
-	unlock( privateApis );
+const {
+	globalStylesDataKey,
+	globalStylesLinksDataKey,
+	selectBlockPatternsKey,
+	reusableBlocksSelectKey,
+} = unlock( privateApis );
 
 /**
  * React hook used to compute the block editor settings to use for the post editor.
@@ -179,7 +182,8 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 	);
 
 	const { merged: mergedGlobalStyles } = useGlobalStylesContext();
-	const globalStylesData = mergedGlobalStyles.styles ?? DEFAULT_STYLES;
+	const globalStylesData = mergedGlobalStyles.styles ?? EMPTY_OBJECT;
+	const globalStylesLinksData = mergedGlobalStyles._links ?? EMPTY_OBJECT;
 
 	const settingsBlockPatterns =
 		settings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
@@ -268,6 +272,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 				)
 			),
 			[ globalStylesDataKey ]: globalStylesData,
+			[ globalStylesLinksDataKey ]: globalStylesLinksData,
 			allowedBlockTypes,
 			allowRightClickOverrides,
 			focusMode: focusMode && ! forceDisableFocusMode,

package/src/components/save-publish-panels/index.js

@@ -30,20 +30,28 @@ export default function SavePublishPanels( {
 		useDispatch( editorStore );
 	const {
 		publishSidebarOpened,
-		hasNonPostEntityChanges,
-		hasPostMetaChanges,
-	} = useSelect(
-		( select ) => ( {
-			publishSidebarOpened:
-				select( editorStore ).isPublishSidebarOpened(),
-			hasNonPostEntityChanges:
-				select( editorStore ).hasNonPostEntityChanges(),
-			hasPostMetaChanges: unlock(
-				select( editorStore )
-			).hasPostMetaChanges(),
-		} ),
-		[]
-	);
+		isPublishable,
+		isDirty,
+		hasOtherEntitiesChanges,
+	} = useSelect( ( select ) => {
+		const {
+			isPublishSidebarOpened,
+			isEditedPostPublishable,
+			isCurrentPostPublished,
+			isEditedPostDirty,
+			hasNonPostEntityChanges,
+		} = select( editorStore );
+		const _hasOtherEntitiesChanges =
+			hasNonPostEntityChanges() ||
+			unlock( select( editorStore ) ).hasPostMetaChanges();
+		return {
+			publishSidebarOpened: isPublishSidebarOpened(),
+			isPublishable:
+				! isCurrentPostPublished() && isEditedPostPublishable(),
+			isDirty: _hasOtherEntitiesChanges || isEditedPostDirty(),
+			hasOtherEntitiesChanges: _hasOtherEntitiesChanges,
+		};
+	}, [] );
 
 	const openEntitiesSavedStates = useCallback(
 		() => setEntitiesSavedStatesCallback( true ),
@@ -62,29 +70,31 @@ export default function SavePublishPanels( {
 				PostPublishExtension={ PluginPostPublishPanel.Slot }
 			/>
 		);
-	} else if ( hasNonPostEntityChanges || hasPostMetaChanges ) {
+	} else if ( isPublishable && ! hasOtherEntitiesChanges ) {
 		unmountableContent = (
-			<div className="editor-layout__toggle-entities-saved-states-panel">
+			<div className="editor-layout__toggle-publish-panel">
 				<Button
 					variant="secondary"
-					className="editor-layout__toggle-entities-saved-states-panel-button"
-					onClick={ openEntitiesSavedStates }
+					className="editor-layout__toggle-publish-panel-button"
+					onClick={ togglePublishSidebar }
 					aria-expanded={ false }
 				>
-					{ __( 'Open save panel' ) }
+					{ __( 'Open publish panel' ) }
 				</Button>
 			</div>
 		);
 	} else {
 		unmountableContent = (
-			<div className="editor-layout__toggle-publish-panel">
+			<div className="editor-layout__toggle-entities-saved-states-panel">
 				<Button
 					variant="secondary"
-					className="editor-layout__toggle-publish-panel-button"
-					onClick={ togglePublishSidebar }
+					className="editor-layout__toggle-entities-saved-states-panel-button"
+					onClick={ openEntitiesSavedStates }
 					aria-expanded={ false }
+					disabled={ ! isDirty }
+					accessibleWhenDisabled
 				>
-					{ __( 'Open publish panel' ) }
+					{ __( 'Open save panel' ) }
 				</Button>
 			</div>
 		);

package/src/components/sidebar/index.js

@@ -112,9 +112,7 @@ const SidebarContent = ( {
 				<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
 					<PostSummary onActionPerformed={ onActionPerformed } />
 					<PluginDocumentSettingPanel.Slot />
-					{ renderingMode !== 'post-only' && (
-						<TemplateContentPanel />
-					) }
+					<TemplateContentPanel renderingMode={ renderingMode } />
 					<TemplatePartContentPanel />
 					<PostTransformPanel />
 					<PostTaxonomiesPanel />

package/src/components/sidebar/post-summary.js

@@ -28,7 +28,6 @@ import BlogTitle from '../blog-title';
 import PostsPerPage from '../posts-per-page';
 import SiteDiscussion from '../site-discussion';
 import { store as editorStore } from '../../store';
-import TemplateAreas from '../template-areas';
 import { PrivatePostLastRevision } from '../post-last-revision';
 
 /**
@@ -84,7 +83,6 @@ export default function PostSummary( { onActionPerformed } ) {
 										<SiteDiscussion />
 										<PostFormatPanel />
 									</VStack>
-									<TemplateAreas />
 									{ fills }
 								</VStack>
 							) }

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

@@ -1,18 +1,21 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
+import { store as editorStore } from '../../store';
 
 const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
 
@@ -22,15 +25,36 @@ const PAGE_CONTENT_BLOCKS = [
 	'core/post-title',
 ];
 
-export default function TemplateContentPanel() {
-	const clientIds = useSelect( ( select ) => {
+const TEMPLATE_PART_BLOCK = 'core/template-part';
+
+export default function TemplateContentPanel( { renderingMode } ) {
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
+	const { clientIds, postType } = useSelect( ( select ) => {
 		const { getBlocksByName } = select( blockEditorStore );
-		return getBlocksByName( PAGE_CONTENT_BLOCKS );
+		const { getCurrentPostType } = select( editorStore );
+		const _postType = getCurrentPostType();
+		return {
+			postType: _postType,
+			clientIds: getBlocksByName(
+				TEMPLATE_POST_TYPE === _postType
+					? TEMPLATE_PART_BLOCK
+					: PAGE_CONTENT_BLOCKS
+			),
+		};
 	}, [] );
 
+	if ( renderingMode === 'post-only' && postType !== TEMPLATE_POST_TYPE ) {
+		return null;
+	}
+
 	return (
 		<PanelBody title={ __( 'Content' ) }>
-			<BlockQuickNavigation clientIds={ clientIds } />
+			<BlockQuickNavigation
+				clientIds={ clientIds }
+				onSelect={ () => {
+					enableComplementaryArea( 'core', 'edit-post/document' );
+				} }
+			/>
 		</PanelBody>
 	);
 }

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

@@ -19,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
+	);
+}