@wordpress/editor 14.49.1 → 14.51.1-next.v.202607070741.0

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

@@ -37,6 +37,8 @@ import {
 	templateTitleField,
 	pageTitleField,
 	patternTitleField,
+	patternDescriptionField,
+	patternSyncStatusField,
 	notesField,
 	scheduledDateField,
 	lastEditedDateField,
@@ -265,59 +267,59 @@ export const registerPostTypeSchema =
 		if ( postType === ATTACHMENT_POST_TYPE ) {
 			fields = ORDERED_MEDIA_FIELDS;
 		} else {
+			const postTypeSlug = postTypeConfig.slug;
+			const isDesignPostType = DESIGN_POST_TYPES.includes( postTypeSlug );
+			const isPattern = postTypeSlug === 'wp_block';
+
 			fields = [
 				postTypeConfig.supports?.thumbnail &&
 					currentTheme?.theme_supports?.[ 'post-thumbnails' ] &&
 					featuredImageField,
-				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
+				! isDesignPostType &&
 					postTypeConfig.supports?.author &&
 					authorField,
-				postTypeConfig.slug === 'wp_template' && templateAuthorField,
-				postTypeConfig.slug === 'wp_template_part' &&
-					templatePartAuthorField,
-				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
-					statusField,
-				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
-					dateField,
-				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
-					scheduledDateField,
+				postTypeSlug === 'wp_template' && templateAuthorField,
+				postTypeSlug === 'wp_template_part' && templatePartAuthorField,
+				! isDesignPostType && statusField,
+				! isDesignPostType && dateField,
+				! isDesignPostType && scheduledDateField,
 				lastEditedDateField,
-				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
-					slugField,
-				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
+				! isDesignPostType && slugField,
+				! isDesignPostType &&
 					postTypeConfig.supports?.excerpt &&
 					excerptField,
+				isPattern &&
+					postTypeConfig.supports?.excerpt &&
+					patternDescriptionField,
 				postTypeConfig.supports?.[ 'page-attributes' ] && parentField,
 				postTypeConfig.supports?.comments && commentStatusField,
 				postTypeConfig.supports?.trackbacks && pingStatusField,
 				( postTypeConfig.supports?.comments ||
 					postTypeConfig.supports?.trackbacks ) &&
 					discussionField,
-				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
-					templateField,
+				! isDesignPostType && templateField,
 				postTypeConfig.supports?.[ 'post-formats' ] &&
 					! disablePostFormats &&
 					formatField,
-				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
+				( ! isDesignPostType || isPattern ) &&
 					postTypeConfig.supports?.editor &&
 					postContentInfoField,
-				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
-					passwordField,
-				postTypeConfig.slug === 'post' && stickyField,
-				postTypeConfig.slug === 'wp_template' && descriptionField,
-				postTypeConfig.slug === 'wp_template' &&
-					readOnlyDescriptionField,
+				! isDesignPostType && passwordField,
+				postTypeSlug === 'post' && stickyField,
+				postTypeSlug === 'wp_template' && descriptionField,
+				postTypeSlug === 'wp_template' && readOnlyDescriptionField,
 				// The `home`/`index` template summary exposes a few fields that
 				// target other entities (`root/site` and the posts page).
 				// `DataFormPostSummary` overrides them to read/write the right
 				// entity and to control their visibility.
-				postTypeConfig.slug === 'wp_template' && postsPageTitleField,
-				postTypeConfig.slug === 'wp_template' && postsPerPageField,
-				postTypeConfig.slug === 'wp_template' && siteDiscussionField,
+				postTypeSlug === 'wp_template' && postsPageTitleField,
+				postTypeSlug === 'wp_template' && postsPerPageField,
+				postTypeSlug === 'wp_template' && siteDiscussionField,
 				postTypeConfig.supports?.editor &&
 					postTypeConfig.viewable &&
 					postPreviewField,
 				hasEditorNotesSupport( postTypeConfig.supports ) && notesField,
+				isPattern && patternSyncStatusField,
 			].filter( Boolean );
 			if ( postTypeConfig.supports?.title ) {
 				let _titleField;
@@ -325,7 +327,9 @@ export const registerPostTypeSchema =
 					_titleField = pageTitleField;
 				} else if ( postType === 'wp_template' ) {
 					_titleField = templateTitleField;
-				} else if ( postType === 'wp_block' ) {
+				} else if (
+					[ 'wp_block', 'wp_template_part' ].includes( postType )
+				) {
 					_titleField = patternTitleField;
 				} else {
 					_titleField = titleField;

package/src/store/actions.js

@@ -30,6 +30,9 @@ import {
 	getNotificationArgumentsForTrashFail,
 } from './utils/notice-builder';
 import { unlock } from '../lock-unlock';
+import { setCanvasWidth } from './private-actions';
+import { getCanvasWidthByDeviceType } from '../utils/device-type';
+
 /**
  * Returns an action generator used in signalling that editor has initialized with
  * the specified post object and editor settings.
@@ -757,9 +760,9 @@ export const setRenderingMode =
  * @return {Object} Action object.
  */
 export function setDeviceType( deviceType ) {
-	return {
-		type: 'SET_DEVICE_TYPE',
-		deviceType,
+	return ( { dispatch } ) => {
+		const width = getCanvasWidthByDeviceType( deviceType );
+		dispatch( setCanvasWidth( width ) );
 	};
 }
 

package/src/store/constants.ts

@@ -1,3 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { desktop, tablet, mobile } from '@wordpress/icons';
+
 /**
  * Set of post properties for which edits should assume a merging behavior,
  * assuming an object value.
@@ -37,3 +43,42 @@ export const DESIGN_POST_TYPES = [
 	PATTERN_POST_TYPE,
 	NAVIGATION_POST_TYPE,
 ];
+
+/*
+ * Contains the device types and their corresponding canvas width.
+ * Matches the breakpoints in packages/base-styles/_breakpoints.scss,
+ * and breakpoints in packages/compose/src/hooks/use-viewport-match/index.js.
+ * minus 1 to trigger the media query for device preview.
+ *
+ * These breakpoints are currently hardcoded, but are expected to become
+ * customizable via the `settings.viewport` values in theme.json in the future.
+ * See https://github.com/WordPress/gutenberg/pull/79104.
+ */
+export const DEVICE_TYPES: Record<
+	string,
+	{
+		value: string;
+		label: string;
+		icon: React.JSX.Element;
+		canvasWidth: number | undefined;
+	}
+> = {
+	Desktop: {
+		value: 'Desktop',
+		label: __( 'Desktop' ),
+		icon: desktop,
+		canvasWidth: undefined,
+	},
+	Tablet: {
+		value: 'Tablet',
+		label: __( 'Tablet' ),
+		icon: tablet,
+		canvasWidth: 782 - 1, // preview for useViewportMatch( 'medium', '<' )
+	},
+	Mobile: {
+		value: 'Mobile',
+		label: __( 'Mobile' ),
+		icon: mobile,
+		canvasWidth: 480 - 1, // preview for useViewportMatch( 'mobile', '<' )
+	},
+};

package/src/store/private-actions.js

@@ -17,35 +17,13 @@ import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
  */
 import isTemplateRevertable from './utils/is-template-revertable';
 import { buildRevisionsPageQuery } from './private-selectors';
+import {
+	getDeviceTypeByCanvasWidth,
+	VIEWPORT_STATE_BY_DEVICE_TYPE,
+} from '../utils/device-type';
 import { unlock } from '../lock-unlock';
 export * from '../dataviews/store/private-actions';
 
-const DEVICE_TYPE_BY_VIEWPORT_STATE = {
-	'@mobile': 'Mobile',
-	'@tablet': 'Tablet',
-};
-
-/**
- * Updates the editor preview device in response to a block-editor viewport
- * state signal.
- *
- * @param {Object}  options                   Viewport state change options.
- * @param {string}  options.viewport          Selected viewport state.
- * @param {boolean} options.showStateOnCanvas Whether canvas preview is enabled.
- */
-export const updateDeviceTypeForViewportState =
-	( { viewport = 'default', showStateOnCanvas = true } = {} ) =>
-	( { dispatch, registry } ) => {
-		if ( ! showStateOnCanvas ) {
-			return;
-		}
-
-		dispatch.setDeviceType(
-			DEVICE_TYPE_BY_VIEWPORT_STATE[ viewport ] ?? 'Desktop'
-		);
-		unlock( registry.dispatch( blockEditorStore ) ).resetZoomLevel();
-	};
-
 /**
  * Returns an action object used to set which template is currently being used/edited.
  *
@@ -231,9 +209,13 @@ export const saveDirtyEntities =
 		registry
 			.dispatch( blockEditorStore )
 			.__unstableMarkLastChangeAsPersistent();
+
 		Promise.all( pendingSavedRecords )
-			.then( ( values ) => {
-				return onSave ? onSave( values ) : values;
+			.then( async ( values ) => {
+				if ( onSave ) {
+					await onSave();
+				}
+				return values;
 			} )
 			.then( ( values ) => {
 				if (
@@ -603,6 +585,34 @@ export function resetStylesNavigation() {
 	};
 }
 
+/**
+ * Set the width of the canvas.
+ *
+ * @param {number} width The width of the canvas in pixels.
+ */
+export function setCanvasWidth( width ) {
+	return ( { dispatch, registry } ) => {
+		dispatch( {
+			type: 'SET_CANVAS_WIDTH',
+			width,
+		} );
+
+		// While Responsive editing is enabled, the canvas width also drives the
+		// viewport style state, whether changed via the device preview or by
+		// manually resizing the canvas.
+		if (
+			unlock( registry.select( blockEditorStore ) ).isResponsiveEditing()
+		) {
+			const deviceType = getDeviceTypeByCanvasWidth( width );
+			unlock(
+				registry.dispatch( blockEditorStore )
+			).setStyleStateViewport(
+				VIEWPORT_STATE_BY_DEVICE_TYPE[ deviceType ] ?? 'default'
+			);
+		}
+	};
+}
+
 /**
  * Set the current revision ID for revisions preview mode.
  * Pass a revision ID to enter revisions mode, or null to exit.

package/src/store/private-selectors.js

@@ -353,6 +353,16 @@ export function getShowStylebook( state ) {
 	return state.showStylebook ?? false;
 }
 
+/**
+ * Get the canvas width.
+ *
+ * @param {Object} state Global application state.
+ * @return {number} The canvas width in pixels.
+ */
+export function getCanvasWidth( state ) {
+	return state.canvasWidth;
+}
+
 /**
  * Returns the current revisions page number.
  *

package/src/store/reducer.js

@@ -277,19 +277,17 @@ export function renderingMode( state = 'post-only', action ) {
 }
 
 /**
- * Reducer returning the editing canvas device type.
+ * Reducer for the canvas width.
  *
- * @param {Object} state  Current state.
+ * @param {number} state  Current state.
  * @param {Object} action Dispatched action.
- *
- * @return {Object} Updated state.
+ * @return {number} Updated state.
  */
-export function deviceType( state = 'Desktop', action ) {
+export function canvasWidth( state = undefined, action ) {
 	switch ( action.type ) {
-		case 'SET_DEVICE_TYPE':
-			return action.deviceType;
+		case 'SET_CANVAS_WIDTH':
+			return action.width;
 	}
-
 	return state;
 }
 
@@ -500,7 +498,7 @@ export default combineReducers( {
 	editorSettings,
 	postAutosavingLock,
 	renderingMode,
-	deviceType,
+	canvasWidth,
 	removedPanels,
 	blockInserterPanel,
 	inserterSidebarToggleRef,

package/src/store/selectors.js

@@ -29,6 +29,7 @@ import { getPostRawValue } from './reducer';
 import { getTemplatePartIcon } from '../utils/get-template-part-icon';
 import { unlock } from '../lock-unlock';
 import { getTemplateInfo } from '../utils/get-template-info';
+import { getDeviceTypeByCanvasWidth } from '../utils/device-type';
 
 /**
  * Shared reference to an empty object for cases where it is important to avoid
@@ -1352,7 +1353,8 @@ export const getDeviceType = createRegistrySelector(
 		if ( isZoomOut ) {
 			return 'Desktop';
 		}
-		return state.deviceType;
+		const canvasWidth = state.canvasWidth;
+		return getDeviceTypeByCanvasWidth( canvasWidth );
 	}
 );
 

package/src/store/test/actions.js

@@ -12,8 +12,8 @@ import { store as preferencesStore } from '@wordpress/preferences';
  * Internal dependencies
  */
 
-import * as actions from '../actions';
 import { store as editorStore } from '..';
+import * as actions from '../actions';
 import { unlock } from '../../lock-unlock';
 
 const postId = 44;
@@ -64,36 +64,45 @@ const getMethod = ( options ) =>
 	options.headers?.[ 'X-HTTP-Method-Override' ] || options.method || 'GET';
 
 describe( 'Post actions', () => {
-	describe( 'updateDeviceTypeForViewportState', () => {
-		it( 'updates the editor device type for a viewport state', () => {
+	describe( 'setCanvasWidth', () => {
+		it( 'syncs the viewport style state while Responsive editing is enabled', () => {
 			const registry = createRegistryWithStores();
+			const getViewport = () =>
+				unlock(
+					registry.select( blockEditorStore )
+				).getStyleStateViewport();
+			const setCanvasWidth = ( width ) =>
+				unlock( registry.dispatch( editorStore ) ).setCanvasWidth(
+					width
+				);
 
 			unlock(
-				registry.dispatch( editorStore )
-			).updateDeviceTypeForViewportState( {
-				viewport: '@mobile',
-				showStateOnCanvas: true,
-			} );
+				registry.dispatch( blockEditorStore )
+			).setResponsiveEditing( true );
 
-			expect( registry.select( editorStore ).getDeviceType() ).toBe(
-				'Mobile'
-			);
+			// A tablet-sized canvas selects the tablet viewport.
+			setCanvasWidth( 600 );
+			expect( getViewport() ).toBe( '@tablet' );
+
+			// A mobile-sized canvas selects the mobile viewport.
+			setCanvasWidth( 400 );
+			expect( getViewport() ).toBe( '@mobile' );
+
+			// A full-width (desktop) canvas resets to the default viewport.
+			setCanvasWidth( undefined );
+			expect( getViewport() ).toBe( 'default' );
 		} );
 
-		it( 'keeps the editor device type when canvas preview is disabled', () => {
+		it( 'leaves the viewport style state untouched while Responsive editing is disabled', () => {
 			const registry = createRegistryWithStores();
-			registry.dispatch( editorStore ).setDeviceType( 'Tablet' );
+			const getViewport = () =>
+				unlock(
+					registry.select( blockEditorStore )
+				).getStyleStateViewport();
 
-			unlock(
-				registry.dispatch( editorStore )
-			).updateDeviceTypeForViewportState( {
-				viewport: '@mobile',
-				showStateOnCanvas: false,
-			} );
+			unlock( registry.dispatch( editorStore ) ).setCanvasWidth( 400 );
 
-			expect( registry.select( editorStore ).getDeviceType() ).toBe(
-				'Tablet'
-			);
+			expect( getViewport() ).toBe( 'default' );
 		} );
 	} );
 

package/src/utils/device-type.js

@@ -0,0 +1,46 @@
+/**
+ * Internal dependencies
+ */
+import { DEVICE_TYPES } from '../store/constants';
+
+/**
+ * Maps a device preview type to its corresponding viewport style state. Used
+ * when Responsive editing is enabled so the device preview drives which
+ * viewport block style edits are applied to.
+ *
+ * @type {Object}
+ */
+export const VIEWPORT_STATE_BY_DEVICE_TYPE = {
+	Desktop: 'default',
+	Tablet: '@tablet',
+	Mobile: '@mobile',
+};
+
+/**
+ * Gets the most appropriate device type based on the canvas width.
+ *
+ * @param {number} canvasWidth The canvas width in pixels.
+ * @return {string} The device type.
+ */
+export function getDeviceTypeByCanvasWidth( canvasWidth ) {
+	// Mobile
+	if ( canvasWidth && canvasWidth <= DEVICE_TYPES.Mobile.canvasWidth ) {
+		return DEVICE_TYPES.Mobile.value;
+	}
+	// Tablet
+	if ( canvasWidth && canvasWidth <= DEVICE_TYPES.Tablet.canvasWidth ) {
+		return DEVICE_TYPES.Tablet.value;
+	}
+	// Desktop
+	return DEVICE_TYPES.Desktop.value;
+}
+
+/**
+ * Get the canvas width by device type.
+ *
+ * @param {string} deviceType The device type.
+ * @return {number|undefined} The canvas width in pixels.
+ */
+export function getCanvasWidthByDeviceType( deviceType ) {
+	return DEVICE_TYPES[ deviceType ]?.canvasWidth;
+}

package/src/utils/media-sideload-from-url/index.js

@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { select } from '@wordpress/data';
+import { transformAttachment } from '@wordpress/media-utils';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+const noop = () => {};
+
+/**
+ * Sideloads an external image into the media library from its URL.
+ *
+ * The server downloads the remote file, which avoids a cross-origin browser
+ * fetch that fails when the editor is cross-origin isolated. Since the server
+ * owns the upload it also generates sub-sizes, as with a regular upload.
+ *
+ * @param {Object}   $0           Parameters object.
+ * @param {string}   $0.url       URL of the external image to sideload.
+ * @param {Function} $0.onSuccess Function called with the new attachment on success.
+ * @param {Function} $0.onError   Function called with an error message on failure.
+ */
+export default function mediaSideloadFromUrl( {
+	url,
+	onSuccess,
+	onError = noop,
+} ) {
+	const currentPost = select( editorStore ).getCurrentPost();
+	// Templates and template parts store their numerical ID in `wp_id`.
+	const currentPostId =
+		typeof currentPost?.id === 'number'
+			? currentPost.id
+			: currentPost?.wp_id;
+	const postData = currentPostId ? { post: currentPostId } : {};
+
+	apiFetch( {
+		path: '/wp/v2/media',
+		method: 'POST',
+		data: {
+			url,
+			...postData,
+		},
+	} )
+		.then( ( attachment ) => {
+			onSuccess?.( transformAttachment( attachment ) );
+		} )
+		.catch( ( error ) => {
+			onError( error?.message || error );
+		} );
+}

package/src/utils/media-sideload-from-url/test/index.js

@@ -0,0 +1,162 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { select } from '@wordpress/data';
+import { transformAttachment } from '@wordpress/media-utils';
+
+/**
+ * Internal dependencies
+ */
+import mediaSideloadFromUrl from '..';
+
+jest.mock( '@wordpress/api-fetch', () => jest.fn() );
+jest.mock( '@wordpress/data', () => ( {
+	select: jest.fn(),
+} ) );
+/*
+ * The store and transformAttachment are mocked so this unit test does not pull
+ * in the full @wordpress/media-utils / core-data import chain (which needs the
+ * real @wordpress/data). transformAttachment's mapping is covered in
+ * @wordpress/media-utils; here we only verify mediaSideloadFromUrl forwards
+ * whatever it returns.
+ */
+jest.mock( '../../../store', () => ( { store: 'core/editor' } ) );
+jest.mock( '@wordpress/media-utils', () => ( {
+	transformAttachment: jest.fn( ( attachment ) => ( {
+		id: attachment.id,
+		url: attachment.source_url,
+		alt: attachment.alt_text,
+	} ) ),
+} ) );
+
+const mockRestAttachment = {
+	id: 123,
+	alt_text: 'An external photo.',
+	caption: { raw: '' },
+	title: { raw: 'photo' },
+	source_url: 'https://example.com/wp-content/uploads/photo.jpg',
+};
+
+/**
+ * Sets the post returned by `getCurrentPost()` for a test.
+ *
+ * @param {Object|undefined} post The post object, or undefined for no post.
+ */
+function mockCurrentPost( post ) {
+	select.mockReturnValue( {
+		getCurrentPost: () => post,
+	} );
+}
+
+describe( 'mediaSideloadFromUrl', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+		mockCurrentPost( { id: 42 } );
+	} );
+
+	it( 'should POST to /wp/v2/media with the url, leaving sub-size generation to the server', async () => {
+		apiFetch.mockResolvedValue( mockRestAttachment );
+
+		await new Promise( ( resolve ) => {
+			mediaSideloadFromUrl( {
+				url: 'https://example.com/photo.jpg',
+				onSuccess: resolve,
+			} );
+		} );
+
+		expect( apiFetch ).toHaveBeenCalledWith( {
+			path: '/wp/v2/media',
+			method: 'POST',
+			data: {
+				url: 'https://example.com/photo.jpg',
+				post: 42,
+			},
+		} );
+	} );
+
+	it( 'should pass the transformed attachment to onSuccess', async () => {
+		apiFetch.mockResolvedValue( mockRestAttachment );
+
+		const media = await new Promise( ( resolve ) => {
+			mediaSideloadFromUrl( {
+				url: 'https://example.com/photo.jpg',
+				onSuccess: resolve,
+			} );
+		} );
+
+		/*
+		 * The raw REST attachment is run through transformAttachment, which maps
+		 * it to the editor shape the image block expects (url, alt).
+		 */
+		expect( transformAttachment ).toHaveBeenCalledWith(
+			mockRestAttachment
+		);
+		expect( media ).toMatchObject( {
+			id: 123,
+			url: 'https://example.com/wp-content/uploads/photo.jpg',
+			alt: 'An external photo.',
+		} );
+	} );
+
+	it( 'should fall back to wp_id when the post id is not numeric', async () => {
+		apiFetch.mockResolvedValue( mockRestAttachment );
+		// Templates and template parts expose their numeric id as `wp_id`.
+		mockCurrentPost( { id: 'my-theme//header', wp_id: 99 } );
+
+		await new Promise( ( resolve ) => {
+			mediaSideloadFromUrl( {
+				url: 'https://example.com/photo.jpg',
+				onSuccess: resolve,
+			} );
+		} );
+
+		expect( apiFetch ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				data: expect.objectContaining( { post: 99 } ),
+			} )
+		);
+	} );
+
+	it( 'should omit the post param when there is no current post', async () => {
+		apiFetch.mockResolvedValue( mockRestAttachment );
+		mockCurrentPost( undefined );
+
+		await new Promise( ( resolve ) => {
+			mediaSideloadFromUrl( {
+				url: 'https://example.com/photo.jpg',
+				onSuccess: resolve,
+			} );
+		} );
+
+		const { data } = apiFetch.mock.calls[ 0 ][ 0 ];
+		expect( data ).not.toHaveProperty( 'post' );
+	} );
+
+	it( 'should pass the error message to onError on failure', async () => {
+		apiFetch.mockRejectedValue(
+			new Error( 'Could not download the image.' )
+		);
+
+		const message = await new Promise( ( resolve ) => {
+			mediaSideloadFromUrl( {
+				url: 'https://example.com/photo.jpg',
+				onSuccess: () => {},
+				onError: resolve,
+			} );
+		} );
+
+		expect( message ).toBe( 'Could not download the image.' );
+	} );
+
+	it( 'should not throw when onError is omitted and the request fails', async () => {
+		apiFetch.mockRejectedValue( new Error( 'Network error' ) );
+
+		expect( () =>
+			mediaSideloadFromUrl( { url: 'https://example.com/photo.jpg' } )
+		).not.toThrow();
+
+		// Let the rejected promise settle so the default noop onError runs.
+		await Promise.resolve();
+	} );
+} );