@wordpress/editor 13.2.0 → 13.3.0

package/src/components/error-boundary/index.js

@@ -14,6 +14,18 @@ import { doAction } from '@wordpress/hooks';
  */
 import { store as editorStore } from '../../store';
 
+function getContent() {
+	try {
+		// While `select` in a component is generally discouraged, it is
+		// used here because it (a) reduces the chance of data loss in the
+		// case of additional errors by performing a direct retrieval and
+		// (b) avoids the performance cost associated with unnecessary
+		// content serialization throughout the lifetime of a non-erroring
+		// application.
+		return select( editorStore ).getEditedPostContent();
+	} catch ( error ) {}
+}
+
 function CopyButton( { text, children } ) {
 	const ref = useCopyToClipboard( text );
 	return (
@@ -27,34 +39,17 @@ class ErrorBoundary extends Component {
 	constructor() {
 		super( ...arguments );
 
-		this.reboot = this.reboot.bind( this );
-		this.getContent = this.getContent.bind( this );
-
 		this.state = {
 			error: null,
 		};
 	}
 
 	componentDidCatch( error ) {
-		this.setState( { error } );
-
 		doAction( 'editor.ErrorBoundary.errorLogged', error );
 	}
 
-	reboot() {
-		this.props.onError();
-	}
-
-	getContent() {
-		try {
-			// While `select` in a component is generally discouraged, it is
-			// used here because it (a) reduces the chance of data loss in the
-			// case of additional errors by performing a direct retrieval and
-			// (b) avoids the performance cost associated with unnecessary
-			// content serialization throughout the lifetime of a non-erroring
-			// application.
-			return select( editorStore ).getEditedPostContent();
-		} catch ( error ) {}
+	static getDerivedStateFromError( error ) {
+		return { error };
 	}
 
 	render() {
@@ -63,25 +58,17 @@ class ErrorBoundary extends Component {
 			return this.props.children;
 		}
 
+		const actions = [
+			<CopyButton key="copy-post" text={ getContent }>
+				{ __( 'Copy Post Text' ) }
+			</CopyButton>,
+			<CopyButton key="copy-error" text={ error.stack }>
+				{ __( 'Copy Error' ) }
+			</CopyButton>,
+		];
+
 		return (
-			<Warning
-				className="editor-error-boundary"
-				actions={ [
-					<Button
-						key="recovery"
-						onClick={ this.reboot }
-						variant="secondary"
-					>
-						{ __( 'Attempt Recovery' ) }
-					</Button>,
-					<CopyButton key="copy-post" text={ this.getContent }>
-						{ __( 'Copy Post Text' ) }
-					</CopyButton>,
-					<CopyButton key="copy-error" text={ error.stack }>
-						{ __( 'Copy Error' ) }
-					</CopyButton>,
-				] }
-			>
+			<Warning className="editor-error-boundary" actions={ actions }>
 				{ __( 'The editor has encountered an unexpected error.' ) }
 			</Warning>
 		);

package/src/components/media-categories/index.js

@@ -0,0 +1,247 @@
+/**
+ * The `editor` settings here need to be in sync with the corresponding ones in `editor` package.
+ * See `packages/editor/src/components/media-categories/index.js`.
+ *
+ * In the future we could consider creating an Openvese package that can be used in both `editor` and `site-editor`.
+ * The rest of the settings would still need to be in sync though.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf, _x } from '@wordpress/i18n';
+import { resolveSelect } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+
+/** @typedef {import('@wordpress/block-editor').InserterMediaRequest} InserterMediaRequest */
+/** @typedef {import('@wordpress/block-editor').InserterMediaItem} InserterMediaItem */
+/**
+ * Interface for inserter media category labels.
+ *
+ * @typedef {Object} InserterMediaCategoryLabels
+ * @property {string} name                    General name of the media category. It's used in the inserter media items list.
+ * @property {string} [search_items='Search'] Label for searching items. Default is ‘Search Posts’ / ‘Search Pages’.
+ */
+/**
+ * Interface for inserter media category.
+ *
+ * @typedef {Object} InserterMediaCategory
+ * @property {string}                                                 name                 The name of the media category, that should be unique among all media categories.
+ * @property {InserterMediaCategoryLabels}                            labels               Labels for the media category.
+ * @property {('image'|'audio'|'video')}                              mediaType            The media type of the media category.
+ * @property {(InserterMediaRequest) => Promise<InserterMediaItem[]>} fetch                The function to fetch media items for the category.
+ * @property {(InserterMediaItem) => string}                          [getReportUrl]       If the media category supports reporting media items, this function should return
+ *                                                                                         the report url for the media item. It accepts the `InserterMediaItem` as an argument.
+ * @property {boolean}                                                [isExternalResource] If the media category is an external resource, this should be set to true.
+ *                                                                                         This is used to avoid making a request to the external resource when the user
+ *                                                                                         opens the inserter for the first time.
+ */
+
+const getExternalLink = ( url, text ) =>
+	`<a ${ getExternalLinkAttributes( url ) }>${ text }</a>`;
+
+const getExternalLinkAttributes = ( url ) =>
+	`href="${ url }" target="_blank" rel="noreferrer noopener"`;
+
+const getOpenverseLicense = ( license, licenseVersion ) => {
+	let licenseName = license.trim();
+	// PDM has no abbreviation
+	if ( license !== 'pdm' ) {
+		licenseName = license.toUpperCase().replace( 'SAMPLING', 'Sampling' );
+	}
+	// If version is known, append version to the name.
+	// The license has to have a version to be valid. Only
+	// PDM (public domain mark) doesn't have a version.
+	if ( licenseVersion ) {
+		licenseName += ` ${ licenseVersion }`;
+	}
+	// For licenses other than public-domain marks, prepend 'CC' to the name.
+	if ( ! [ 'pdm', 'cc0' ].includes( license ) ) {
+		licenseName = `CC ${ licenseName }`;
+	}
+	return licenseName;
+};
+
+const getOpenverseCaption = ( item ) => {
+	const {
+		title,
+		foreign_landing_url: foreignLandingUrl,
+		creator,
+		creator_url: creatorUrl,
+		license,
+		license_version: licenseVersion,
+		license_url: licenseUrl,
+	} = item;
+	const fullLicense = getOpenverseLicense( license, licenseVersion );
+	const _creator = decodeEntities( creator );
+	let _caption;
+	if ( _creator ) {
+		_caption = title
+			? sprintf(
+					// translators: %1s: Title of a media work from Openverse; %2s: Name of the work's creator; %3s: Work's licence e.g: "CC0 1.0".
+					_x( '"%1$s" by %2$s/ %3$s', 'caption' ),
+					getExternalLink(
+						foreignLandingUrl,
+						decodeEntities( title )
+					),
+					creatorUrl
+						? getExternalLink( creatorUrl, _creator )
+						: _creator,
+					licenseUrl
+						? getExternalLink(
+								`${ licenseUrl }?ref=openverse`,
+								fullLicense
+						  )
+						: fullLicense
+			  )
+			: sprintf(
+					// translators: %1s: Link attributes for a given Openverse media work; %2s: Name of the work's creator; %3s: Works's licence e.g: "CC0 1.0".
+					_x( '<a %1$s>Work</a> by %2$s/ %3$s', 'caption' ),
+					getExternalLinkAttributes( foreignLandingUrl ),
+					creatorUrl
+						? getExternalLink( creatorUrl, _creator )
+						: _creator,
+					licenseUrl
+						? getExternalLink(
+								`${ licenseUrl }?ref=openverse`,
+								fullLicense
+						  )
+						: fullLicense
+			  );
+	} else {
+		_caption = title
+			? sprintf(
+					// translators: %1s: Title of a media work from Openverse; %2s: Work's licence e.g: "CC0 1.0".
+					_x( '"%1$s"/ %2$s', 'caption' ),
+					getExternalLink(
+						foreignLandingUrl,
+						decodeEntities( title )
+					),
+					licenseUrl
+						? getExternalLink(
+								`${ licenseUrl }?ref=openverse`,
+								fullLicense
+						  )
+						: fullLicense
+			  )
+			: sprintf(
+					// translators: %1s: Link attributes for a given Openverse media work; %2s: Works's licence e.g: "CC0 1.0".
+					_x( '<a %1$s>Work</a>/ %3$s', 'caption' ),
+					getExternalLinkAttributes( foreignLandingUrl ),
+					licenseUrl
+						? getExternalLink(
+								`${ licenseUrl }?ref=openverse`,
+								fullLicense
+						  )
+						: fullLicense
+			  );
+	}
+	return _caption.replace( /\s{2}/g, ' ' );
+};
+
+const coreMediaFetch = async ( query = {} ) => {
+	const mediaItems = await resolveSelect( coreStore ).getMediaItems( {
+		...query,
+		orderBy: !! query?.search ? 'relevance' : 'date',
+	} );
+	return mediaItems.map( ( mediaItem ) => ( {
+		...mediaItem,
+		alt: mediaItem.alt_text,
+		url: mediaItem.source_url,
+		previewUrl: mediaItem.media_details?.sizes?.medium?.source_url,
+		caption: mediaItem.caption?.raw,
+	} ) );
+};
+
+/** @type {InserterMediaCategory[]} */
+const inserterMediaCategories = [
+	{
+		name: 'images',
+		labels: {
+			name: __( 'Images' ),
+			search_items: __( 'Search images' ),
+		},
+		mediaType: 'image',
+		async fetch( query = {} ) {
+			return coreMediaFetch( { ...query, media_type: 'image' } );
+		},
+	},
+	{
+		name: 'videos',
+		labels: {
+			name: __( 'Videos' ),
+			search_items: __( 'Search videos' ),
+		},
+		mediaType: 'video',
+		async fetch( query = {} ) {
+			return coreMediaFetch( { ...query, media_type: 'video' } );
+		},
+	},
+	{
+		name: 'audio',
+		labels: {
+			name: __( 'Audio' ),
+			search_items: __( 'Search audio' ),
+		},
+		mediaType: 'audio',
+		async fetch( query = {} ) {
+			return coreMediaFetch( { ...query, media_type: 'audio' } );
+		},
+	},
+	{
+		name: 'openverse',
+		labels: {
+			name: __( 'Openverse' ),
+			search_items: __( 'Search Openverse' ),
+		},
+		mediaType: 'image',
+		async fetch( query = {} ) {
+			const defaultArgs = {
+				mature: false,
+				excluded_source: 'flickr,inaturalist,wikimedia',
+				license: 'pdm,cc0',
+			};
+			const finalQuery = { ...query, ...defaultArgs };
+			const mapFromInserterMediaRequest = {
+				per_page: 'page_size',
+				search: 'q',
+			};
+			const url = new URL(
+				'https://api.openverse.engineering/v1/images/'
+			);
+			Object.entries( finalQuery ).forEach( ( [ key, value ] ) => {
+				const queryKey = mapFromInserterMediaRequest[ key ] || key;
+				url.searchParams.set( queryKey, value );
+			} );
+			const response = await window.fetch( url, {
+				headers: {
+					'User-Agent': 'WordPress/inserter-media-fetch',
+				},
+			} );
+			const jsonResponse = await response.json();
+			const results = jsonResponse.results;
+			return results.map( ( result ) => ( {
+				...result,
+				// This is a temp solution for better titles, until Openverse API
+				// completes the cleaning up of some titles of their upstream data.
+				title: result.title?.toLowerCase().startsWith( 'file:' )
+					? result.title.slice( 5 )
+					: result.title,
+				sourceId: result.id,
+				id: undefined,
+				caption: getOpenverseCaption( result ),
+				previewUrl: result.thumbnail,
+			} ) );
+		},
+		getReportUrl: ( { sourceId } ) =>
+			`https://wordpress.org/openverse/image/${ sourceId }/report/`,
+		isExternalResource: true,
+	},
+];
+
+export default inserterMediaCategories;

package/src/components/page-attributes/parent.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, unescape as unescapeString } from 'lodash';
+import { get } from 'lodash';
 import removeAccents from 'remove-accents';
 
 /**
@@ -93,7 +93,7 @@ export function PageAttributesParent() {
 				{
 					value: treeNode.id,
 					label:
-						'— '.repeat( level ) + unescapeString( treeNode.name ),
+						'— '.repeat( level ) + decodeEntities( treeNode.name ),
 					rawName: treeNode.name,
 				},
 				...getOptionsFromTree( treeNode.children || [], level + 1 ),

package/src/components/page-attributes/test/order.js

@@ -9,8 +9,6 @@ import userEvent from '@testing-library/user-event';
  */
 import { PageAttributesOrder } from '../order';
 
-jest.useFakeTimers();
-
 describe( 'PageAttributesOrder', () => {
 	/**
 	 * When starting to type inside the spinbutton, select the current value
@@ -22,9 +20,7 @@ describe( 'PageAttributesOrder', () => {
 	};
 
 	it( 'should reject invalid input', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onUpdateOrder = jest.fn();
 
@@ -41,9 +37,7 @@ describe( 'PageAttributesOrder', () => {
 	} );
 
 	it( 'should update with zero input', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onUpdateOrder = jest.fn();
 
@@ -59,9 +53,7 @@ describe( 'PageAttributesOrder', () => {
 	} );
 
 	it( 'should update with valid positive input', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onUpdateOrder = jest.fn();
 
@@ -77,9 +69,7 @@ describe( 'PageAttributesOrder', () => {
 	} );
 
 	it( 'should update with valid negative input', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onUpdateOrder = jest.fn();
 

package/src/components/post-preview-button/test/index.js

@@ -9,8 +9,6 @@ import userEvent from '@testing-library/user-event';
  */
 import { PostPreviewButton } from '../';
 
-jest.useFakeTimers();
-
 describe( 'PostPreviewButton', () => {
 	const documentWrite = jest.fn();
 	const documentTitle = jest.fn();
@@ -175,9 +173,7 @@ describe( 'PostPreviewButton', () => {
 	} );
 
 	it( 'should save post if `isDraft` is `true`', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const url = 'https://wordpress.org';
 		const savePost = jest.fn();
 		const autosave = jest.fn();
@@ -203,9 +199,7 @@ describe( 'PostPreviewButton', () => {
 	} );
 
 	it( 'should autosave post if `isDraft` is `false`', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const url = 'https://wordpress.org';
 		const savePost = jest.fn();
 		const autosave = jest.fn();
@@ -231,9 +225,7 @@ describe( 'PostPreviewButton', () => {
 	} );
 
 	it( 'should open a window with the specified target', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const postId = 123;
 		const url = 'https://wordpress.org';
 
@@ -257,9 +249,7 @@ describe( 'PostPreviewButton', () => {
 	} );
 
 	it( 'should set the location in the window properly', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const postId = 123;
 		const url = 'https://wordpress.org';
 
@@ -290,9 +280,7 @@ describe( 'PostPreviewButton', () => {
 	} );
 
 	it( 'should display a `Generating preview` message while waiting for autosaving', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const previewText = 'Generating preview…';
 		const url = 'https://wordpress.org';
 		const savePost = jest.fn();

package/src/components/post-publish-button/test/index.js

@@ -9,8 +9,6 @@ import userEvent from '@testing-library/user-event';
  */
 import { PostPublishButton } from '../';
 
-jest.useFakeTimers();
-
 describe( 'PostPublishButton', () => {
 	describe( 'aria-disabled', () => {
 		it( 'should be true if post is currently saving', () => {
@@ -92,9 +90,7 @@ describe( 'PostPublishButton', () => {
 
 	describe( 'publish status', () => {
 		it( 'should be pending for contributor', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const onStatusChange = jest.fn();
 			const onSave = jest.fn();
 			render(
@@ -115,9 +111,7 @@ describe( 'PostPublishButton', () => {
 		} );
 
 		it( 'should be future for scheduled post', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const onStatusChange = jest.fn();
 			const onSave = jest.fn();
 			render(
@@ -139,9 +133,7 @@ describe( 'PostPublishButton', () => {
 		} );
 
 		it( 'should be private for private visibility', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const onStatusChange = jest.fn();
 			const onSave = jest.fn();
 			render(
@@ -163,9 +155,7 @@ describe( 'PostPublishButton', () => {
 		} );
 
 		it( 'should be publish otherwise', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const onStatusChange = jest.fn();
 			const onSave = jest.fn();
 			render(
@@ -188,9 +178,7 @@ describe( 'PostPublishButton', () => {
 
 	describe( 'click', () => {
 		it( 'should save with status', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const onStatusChange = jest.fn();
 			const onSave = jest.fn();
 			render(

package/src/components/post-publish-panel/postpublish.js

@@ -122,6 +122,7 @@ class PostPublishPanelPostpublish extends Component {
 					</p>
 					<div className="post-publish-panel__postpublish-post-address-container">
 						<TextControl
+							__nextHasNoMarginBottom
 							className="post-publish-panel__postpublish-post-address"
 							readOnly
 							label={ sprintf(

package/src/components/post-publish-panel/style.scss

@@ -4,7 +4,7 @@
 
 .editor-post-publish-panel__content {
 	// Ensure the post-publish panel accounts for the header and footer height.
-	min-height: calc(100% - #{ $header-height + 84px });
+	min-height: calc(100% - #{$header-height + 84px});
 
 	.components-spinner {
 		display: block;
@@ -157,10 +157,6 @@
 	align-items: flex-end;
 	margin-bottom: $grid-unit-20;
 
-	.components-base-control__field {
-		margin-bottom: 0;
-	}
-
 	.post-publish-panel__postpublish-post-address {
 		flex: 1;
 	}

package/src/components/post-publish-panel/test/__snapshots__/index.js.snap

@@ -13,10 +13,6 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -31,10 +27,6 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
   padding: 0;
 }
 
-.components-panel__row .emotion-8 {
-  margin-bottom: inherit;
-}
-
 <div>
   <div
     class="editor-post-publish-panel"
@@ -145,7 +137,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
         class="components-base-control components-checkbox-control emotion-0 emotion-1"
       >
         <div
-          class="components-base-control__field emotion-8 emotion-3"
+          class="components-base-control__field emotion-2 emotion-3"
         >
           <span
             class="components-checkbox-control__input-container"
@@ -183,10 +175,6 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -201,10 +189,6 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
   padding: 0;
 }
 
-.components-panel__row .emotion-8 {
-  margin-bottom: inherit;
-}
-
 <div>
   <div
     class="editor-post-publish-panel"
@@ -315,7 +299,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
         class="components-base-control components-checkbox-control emotion-0 emotion-1"
       >
         <div
-          class="components-base-control__field emotion-8 emotion-3"
+          class="components-base-control__field emotion-2 emotion-3"
         >
           <span
             class="components-checkbox-control__input-container"

package/src/components/post-saved-state/test/index.js

@@ -15,8 +15,6 @@ import { useSelect } from '@wordpress/data';
  */
 import PostSavedState from '../';
 
-jest.useFakeTimers();
-
 const mockSavePost = jest.fn();
 
 jest.mock( '@wordpress/data/src/components/use-dispatch', () => {
@@ -96,9 +94,7 @@ describe( 'PostSavedState', () => {
 	} );
 
 	it( 'should return Save button if edits to be saved', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		useSelect.mockImplementation( () => ( {
 			isDirty: true,

package/src/components/post-slug/index.js

@@ -46,6 +46,7 @@ export class PostSlug extends Component {
 		return (
 			<PostSlugCheck>
 				<TextControl
+					__nextHasNoMarginBottom
 					label={ __( 'Slug' ) }
 					autoComplete="off"
 					spellCheck="false"