@wordpress/editor 14.3.0 → 14.4.0

package/src/components/post-template/classic-theme.js

@@ -33,8 +33,10 @@ function PostTemplateToggle( { isOpen, onClick } ) {
 			return availableTemplates[ templateSlug ];
 		}
 		const template =
-			select( coreStore ).canUser( 'create', 'templates' ) &&
-			select( editorStore ).getCurrentTemplateId();
+			select( coreStore ).canUser( 'create', {
+				kind: 'postType',
+				name: 'wp_template',
+			} ) && select( editorStore ).getCurrentTemplateId();
 		return (
 			template?.title ||
 			template?.slug ||
@@ -78,7 +80,10 @@ function PostTemplateDropdownContent( { onClose } ) {
 		( select ) => {
 			const { canUser, getEntityRecords } = select( coreStore );
 			const editorSettings = select( editorStore ).getEditorSettings();
-			const canCreateTemplates = canUser( 'create', 'templates' );
+			const canCreateTemplates = canUser( 'create', {
+				kind: 'postType',
+				name: 'wp_template',
+			} );
 			const _currentTemplateId =
 				select( editorStore ).getCurrentTemplateId();
 			return {

package/src/components/post-template/create-new-template.js

@@ -17,7 +17,10 @@ export default function CreateNewTemplate( { onClick } ) {
 	const { canCreateTemplates } = useSelect( ( select ) => {
 		const { canUser } = select( coreStore );
 		return {
-			canCreateTemplates: canUser( 'create', 'templates' ),
+			canCreateTemplates: canUser( 'create', {
+				kind: 'postType',
+				name: 'wp_template',
+			} ),
 		};
 	}, [] );
 	const [ isCreateModalOpen, setIsCreateModalOpen ] = useState( false );

package/src/components/post-template/hooks.js

@@ -23,8 +23,14 @@ export function useAllowSwitchingTemplates() {
 	const { postType, postId } = useEditedPostContext();
 	return useSelect(
 		( select ) => {
-			const { getEntityRecord, getEntityRecords } = select( coreStore );
-			const siteSettings = getEntityRecord( 'root', 'site' );
+			const { canUser, getEntityRecord, getEntityRecords } =
+				select( coreStore );
+			const siteSettings = canUser( 'read', {
+				kind: 'root',
+				name: 'site',
+			} )
+				? getEntityRecord( 'root', 'site' )
+				: undefined;
 			const templates = getEntityRecords( 'postType', 'wp_template', {
 				per_page: -1,
 			} );

package/src/components/post-template/panel.js

@@ -48,12 +48,20 @@ export default function PostTemplatePanel() {
 		}
 
 		const canCreateTemplates =
-			select( coreStore ).canUser( 'create', 'templates' ) ?? false;
+			select( coreStore ).canUser( 'create', {
+				kind: 'postType',
+				name: 'wp_template',
+			} ) ?? false;
 		return canCreateTemplates;
 	}, [] );
 
 	const canViewTemplates = useSelect( ( select ) => {
-		return select( coreStore ).canUser( 'read', 'templates' ) ?? false;
+		return (
+			select( coreStore ).canUser( 'read', {
+				kind: 'postType',
+				name: 'wp_template',
+			} ) ?? false
+		);
 	}, [] );
 
 	if ( ( ! isBlockTheme || ! canViewTemplates ) && isVisible ) {

package/src/components/post-trash/check.js

@@ -21,13 +21,17 @@ export default function PostTrashCheck( { children } ) {
 	const { canTrashPost } = useSelect( ( select ) => {
 		const { isEditedPostNew, getCurrentPostId, getCurrentPostType } =
 			select( editorStore );
-		const { getPostType, canUser } = select( coreStore );
-		const postType = getPostType( getCurrentPostType() );
+		const { canUser } = select( coreStore );
+		const postType = getCurrentPostType();
 		const postId = getCurrentPostId();
 		const isNew = isEditedPostNew();
-		const resource = postType?.rest_base || ''; // eslint-disable-line camelcase
-		const canUserDelete =
-			postId && resource ? canUser( 'delete', resource, postId ) : false;
+		const canUserDelete = !! postId
+			? canUser( 'delete', {
+					kind: 'postType',
+					name: postType,
+					id: postId,
+			  } )
+			: false;
 
 		return {
 			canTrashPost: ( ! isNew || postId ) && canUserDelete,

package/src/components/post-url/panel.js

@@ -61,8 +61,13 @@ export default function PostURLPanel() {
 function PostURLToggle( { isOpen, onClick } ) {
 	const { slug, isFrontPage, postLink } = useSelect( ( select ) => {
 		const { getCurrentPostId, getCurrentPost } = select( editorStore );
-		const { getEditedEntityRecord } = select( coreStore );
-		const siteSettings = getEditedEntityRecord( 'root', 'site' );
+		const { getEditedEntityRecord, canUser } = select( coreStore );
+		const siteSettings = canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} )
+			? getEditedEntityRecord( 'root', 'site' )
+			: undefined;
 		const _id = getCurrentPostId();
 		return {
 			slug: select( editorStore ).getEditedPostSlug(),

package/src/components/posts-per-page/index.js

@@ -24,8 +24,13 @@ export default function PostsPerPage() {
 	const { postsPerPage, isTemplate, postSlug } = useSelect( ( select ) => {
 		const { getEditedPostAttribute, getCurrentPostType } =
 			select( editorStore );
-		const { getEditedEntityRecord } = select( coreStore );
-		const siteSettings = getEditedEntityRecord( 'root', 'site' );
+		const { getEditedEntityRecord, canUser } = select( coreStore );
+		const siteSettings = canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} )
+			? getEditedEntityRecord( 'root', 'site' )
+			: undefined;
 		return {
 			isTemplate: getCurrentPostType() === TEMPLATE_POST_TYPE,
 			postSlug: getEditedPostAttribute( 'slug' ),

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

@@ -83,8 +83,6 @@ const BLOCK_EDITOR_SETTINGS = [
 	'__unstableIsPreviewMode',
 	'__unstableResolvedAssets',
 	'__unstableIsBlockBasedTheme',
-	'__experimentalArchiveTitleTypeLabel',
-	'__experimentalArchiveTitleNameLabel',
 ];
 
 const {
@@ -135,7 +133,10 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			const { getBlockTypes } = select( blocksStore );
 			const { getBlocksByName, getBlockAttributes } =
 				select( blockEditorStore );
-			const siteSettings = canUser( 'read', 'settings' )
+			const siteSettings = canUser( 'read', {
+				kind: 'root',
+				name: 'site',
+			} )
 				? getEntityRecord( 'root', 'site' )
 				: undefined;
 
@@ -169,8 +170,15 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 				hiddenBlockTypes: get( 'core', 'hiddenBlockTypes' ),
 				isDistractionFree: get( 'core', 'distractionFree' ),
 				keepCaretInsideBlock: get( 'core', 'keepCaretInsideBlock' ),
-				hasUploadPermissions: canUser( 'create', 'media' ) ?? true,
-				userCanCreatePages: canUser( 'create', 'pages' ),
+				hasUploadPermissions:
+					canUser( 'create', {
+						kind: 'root',
+						name: 'media',
+					} ) ?? true,
+				userCanCreatePages: canUser( 'create', {
+					kind: 'postType',
+					name: 'page',
+				} ),
 				pageOnFront: siteSettings?.page_on_front,
 				pageForPosts: siteSettings?.page_for_posts,
 				userPatternCategories: getUserPatternCategories(),
@@ -303,7 +311,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			__experimentalUndo: undo,
 			// Check whether we want all site editor frames to have outlines
 			// including the navigation / pattern / parts editors.
-			outlineMode: postType === 'wp_template',
+			outlineMode: ! isDistractionFree && postType === 'wp_template',
 			// Check these two properties: they were not present in the site editor.
 			__experimentalCreatePageEntity: createPageEntity,
 			__experimentalUserCanCreatePages: userCanCreatePages,
@@ -345,6 +353,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		setIsInserterOpened,
 		sectionRootClientId,
 		globalStylesData,
+		globalStylesLinksData,
 	] );
 }
 

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

@@ -14,7 +14,6 @@ import PostPublishPanel from '../post-publish-panel';
 import PluginPrePublishPanel from '../plugin-pre-publish-panel';
 import PluginPostPublishPanel from '../plugin-post-publish-panel';
 import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
 
 const { Fill, Slot } = createSlotFill( 'ActionsPanel' );
 
@@ -41,9 +40,7 @@ export default function SavePublishPanels( {
 			isEditedPostDirty,
 			hasNonPostEntityChanges,
 		} = select( editorStore );
-		const _hasOtherEntitiesChanges =
-			hasNonPostEntityChanges() ||
-			unlock( select( editorStore ) ).hasPostMetaChanges();
+		const _hasOtherEntitiesChanges = hasNonPostEntityChanges();
 		return {
 			publishSidebarOpened: isPublishSidebarOpened(),
 			isPublishable:

package/src/components/sidebar/index.js

@@ -51,7 +51,6 @@ const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
 const SidebarContent = ( {
 	tabName,
 	keyboardShortcut,
-	renderingMode,
 	onActionPerformed,
 	extraPanels,
 } ) => {
@@ -112,7 +111,7 @@ const SidebarContent = ( {
 				<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
 					<PostSummary onActionPerformed={ onActionPerformed } />
 					<PluginDocumentSettingPanel.Slot />
-					<TemplateContentPanel renderingMode={ renderingMode } />
+					<TemplateContentPanel />
 					<TemplatePartContentPanel />
 					<PostTransformPanel />
 					<PostTaxonomiesPanel />
@@ -129,7 +128,7 @@ const SidebarContent = ( {
 
 const Sidebar = ( { extraPanels, onActionPerformed } ) => {
 	useAutoSwitchEditorSidebars();
-	const { tabName, keyboardShortcut, showSummary, renderingMode } = useSelect(
+	const { tabName, keyboardShortcut, showSummary } = useSelect(
 		( select ) => {
 			const shortcut = select(
 				keyboardShortcutsStore
@@ -158,7 +157,6 @@ const Sidebar = ( { extraPanels, onActionPerformed } ) => {
 					TEMPLATE_PART_POST_TYPE,
 					NAVIGATION_POST_TYPE,
 				].includes( select( editorStore ).getCurrentPostType() ),
-				renderingMode: select( editorStore ).getRenderingMode(),
 			};
 		},
 		[]
@@ -185,7 +183,6 @@ const Sidebar = ( { extraPanels, onActionPerformed } ) => {
 				tabName={ tabName }
 				keyboardShortcut={ keyboardShortcut }
 				showSummary={ showSummary }
-				renderingMode={ renderingMode }
 				onActionPerformed={ onActionPerformed }
 				extraPanels={ extraPanels }
 			/>

package/src/components/site-discussion/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import {
@@ -25,7 +25,7 @@ const COMMENT_OPTIONS = [
 	{
 		label: (
 			<>
-				{ __( 'Open' ) }
+				{ _x( 'Open', 'Adjective: e.g. "Comments are open"' ) }
 				<Text variant="muted" size={ 12 }>
 					{ __( 'Visitors can add new comments and replies.' ) }
 				</Text>
@@ -55,8 +55,13 @@ export default function SiteDiscussion() {
 		( select ) => {
 			const { getEditedPostAttribute, getCurrentPostType } =
 				select( editorStore );
-			const { getEditedEntityRecord } = select( coreStore );
-			const siteSettings = getEditedEntityRecord( 'root', 'site' );
+			const { getEditedEntityRecord, canUser } = select( coreStore );
+			const siteSettings = canUser( 'read', {
+				kind: 'root',
+				name: 'site',
+			} )
+				? getEditedEntityRecord( 'root', 'site' )
+				: undefined;
 			return {
 				isTemplate: getCurrentPostType() === TEMPLATE_POST_TYPE,
 				postSlug: getEditedPostAttribute( 'slug' ),

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

@@ -27,9 +27,9 @@ const PAGE_CONTENT_BLOCKS = [
 
 const TEMPLATE_PART_BLOCK = 'core/template-part';
 
-export default function TemplateContentPanel( { renderingMode } ) {
+export default function TemplateContentPanel() {
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
-	const { clientIds, postType } = useSelect( ( select ) => {
+	const { clientIds, postType, renderingMode } = useSelect( ( select ) => {
 		const { getBlocksByName } = select( blockEditorStore );
 		const { getCurrentPostType } = select( editorStore );
 		const _postType = getCurrentPostType();
@@ -40,6 +40,7 @@ export default function TemplateContentPanel( { renderingMode } ) {
 					? TEMPLATE_PART_BLOCK
 					: PAGE_CONTENT_BLOCKS
 			),
+			renderingMode: select( editorStore ).getRenderingMode(),
 		};
 	}, [] );
 

package/src/components/visual-editor/edit-template-blocks-notification.js

@@ -40,7 +40,11 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 
 	const canEditTemplate = useSelect(
 		( select ) =>
-			select( coreStore ).canUser( 'create', 'templates' ) ?? false
+			!! select( coreStore ).canUser( 'create', {
+				kind: 'postType',
+				name: 'wp_template',
+			} ),
+		[]
 	);
 
 	const [ isDialogOpen, setIsDialogOpen ] = useState( false );

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

@@ -34,7 +34,7 @@ import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import EditTemplateBlocksNotification from './edit-template-blocks-notification';
 import ResizableEditor from '../resizable-editor';
-import useSelectNearestEditableBlock from '../../hooks/use-select-nearest-editable-block';
+import useSelectNearestEditableBlock from './use-select-nearest-editable-block';
 import {
 	NAVIGATION_POST_TYPE,
 	PATTERN_POST_TYPE,
@@ -142,7 +142,10 @@ function VisualEditor( {
 		const editorSettings = getEditorSettings();
 		const supportsTemplateMode = editorSettings.supportsTemplateMode;
 		const postTypeObject = getPostType( postTypeSlug );
-		const canEditTemplate = canUser( 'create', 'templates' );
+		const canEditTemplate = canUser( 'create', {
+			kind: 'postType',
+			name: 'wp_template',
+		} );
 		const currentTemplateId = getCurrentTemplateId();
 		const template = currentTemplateId
 			? getEditedEntityRecord(

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

@@ -1,6 +1,5 @@
 .editor-visual-editor {
 	position: relative;
-	height: 100%;
 	display: block;
 	background-color: $gray-300;
 	// Make this a stacking context to contain the z-index of children elements.

package/src/{hooks → components/visual-editor}/use-select-nearest-editable-block.js

@@ -8,7 +8,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { unlock } from '../lock-unlock';
+import { unlock } from '../../lock-unlock';
 
 const DISTANCE_THRESHOLD = 500;
 

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

@@ -78,6 +78,7 @@ const deletePostAction: Action< Post > = {
 						onClick={ closeModal }
 						disabled={ isBusy }
 						accessibleWhenDisabled
+						__next40pxDefaultSize
 					>
 						{ __( 'Cancel' ) }
 					</Button>
@@ -95,6 +96,7 @@ const deletePostAction: Action< Post > = {
 						isBusy={ isBusy }
 						disabled={ isBusy }
 						accessibleWhenDisabled
+						__next40pxDefaultSize
 					>
 						{ __( 'Delete' ) }
 					</Button>

package/src/hooks/pattern-overrides.js

@@ -41,7 +41,7 @@ const withPatternOverrideControls = createHigherOrderComponent(
 
 		return (
 			<>
-				<BlockEdit { ...props } />
+				<BlockEdit key="edit" { ...props } />
 				{ props.isSelected && isSupportedBlock && (
 					<ControlsWithStoreSubscription { ...props } />
 				) }

package/src/index.js

@@ -1,7 +1,6 @@
 /**
  * Internal dependencies
  */
-import './bindings';
 import './hooks';
 
 export { storeConfig, store } from './store';

package/src/private-apis.js

@@ -24,6 +24,10 @@ import {
 	GlobalStylesProvider,
 } from './components/global-styles-provider';
 import registerDefaultActions from './dataviews/actions';
+import {
+	registerCoreBlockBindingsSources,
+	bootstrapBlockBindingsSourcesFromServer,
+} from './bindings/api';
 
 const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
 
@@ -43,6 +47,8 @@ lock( privateApis, {
 	ViewMoreMenuGroup,
 	ResizableEditor,
 	registerDefaultActions,
+	registerCoreBlockBindingsSources,
+	bootstrapBlockBindingsSourcesFromServer,
 
 	// This is a temporary private API while we're updating the site editor to use EditorProvider.
 	useBlockEditorSettings,

package/src/store/test/actions.js

@@ -90,7 +90,9 @@ describe( 'Post actions', () => {
 					method === 'GET' &&
 					path.startsWith( '/wp/v2/types/post' )
 				) {
-					return {};
+					return {
+						json: () => Promise.resolve( {} ),
+					};
 				}
 
 				throw {
@@ -178,7 +180,9 @@ describe( 'Post actions', () => {
 						path.startsWith( '/wp/v2/types/post' ) ||
 						path.startsWith( `/wp/v2/posts/${ postId }` )
 					) {
-						return {};
+						return {
+							json: () => Promise.resolve( {} ),
+						};
 					}
 				}
 
@@ -262,7 +266,9 @@ describe( 'Post actions', () => {
 					method === 'GET' &&
 					path.startsWith( '/wp/v2/types/post' )
 				) {
-					return {};
+					return {
+						json: () => Promise.resolve( {} ),
+					};
 				}
 
 				throw {

package/src/utils/media-upload/index.js

@@ -1,7 +1,12 @@
+/**
+ * External dependencies
+ */
+import { v4 as uuid } from 'uuid';
+
 /**
  * WordPress dependencies
  */
-import { select } from '@wordpress/data';
+import { select, dispatch } from '@wordpress/data';
 import { uploadMedia } from '@wordpress/media-utils';
 
 /**
@@ -32,7 +37,16 @@ export default function mediaUpload( {
 	onFileChange,
 } ) {
 	const { getCurrentPost, getEditorSettings } = select( editorStore );
+	const {
+		lockPostAutosaving,
+		unlockPostAutosaving,
+		lockPostSaving,
+		unlockPostSaving,
+	} = dispatch( editorStore );
+
 	const wpAllowedMimeTypes = getEditorSettings().allowedMimeTypes;
+	const lockKey = `image-upload-${ uuid() }`;
+	let imageIsUploading = false;
 	maxUploadFileSize =
 		maxUploadFileSize || getEditorSettings().maxUploadFileSize;
 	const currentPost = getCurrentPost();
@@ -41,18 +55,39 @@ export default function mediaUpload( {
 		typeof currentPost?.id === 'number'
 			? currentPost.id
 			: currentPost?.wp_id;
+	const setSaveLock = () => {
+		lockPostSaving( lockKey );
+		lockPostAutosaving( lockKey );
+		imageIsUploading = true;
+	};
+
 	const postData = currentPostId ? { post: currentPostId } : {};
+	const clearSaveLock = () => {
+		unlockPostSaving( lockKey );
+		unlockPostAutosaving( lockKey );
+		imageIsUploading = false;
+	};
 
 	uploadMedia( {
 		allowedTypes,
 		filesList,
-		onFileChange,
+		onFileChange: ( file ) => {
+			if ( ! imageIsUploading ) {
+				setSaveLock();
+			} else {
+				clearSaveLock();
+			}
+			onFileChange( file );
+		},
 		additionalData: {
 			...postData,
 			...additionalData,
 		},
 		maxUploadFileSize,
-		onError: ( { message } ) => onError( message ),
+		onError: ( { message } ) => {
+			clearSaveLock();
+			onError( message );
+		},
 		wpAllowedMimeTypes,
 	} );
 }