@wordpress/edit-site 5.2.0 → 5.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.2.0",
+	"version": "5.3.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,40 +27,42 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.25.0",
-		"@wordpress/api-fetch": "^6.22.0",
-		"@wordpress/block-editor": "^11.2.0",
-		"@wordpress/block-library": "^8.2.0",
-		"@wordpress/blocks": "^12.2.0",
-		"@wordpress/components": "^23.2.0",
-		"@wordpress/compose": "^6.2.0",
-		"@wordpress/core-data": "^6.2.0",
-		"@wordpress/data": "^8.2.0",
-		"@wordpress/deprecated": "^3.25.0",
-		"@wordpress/editor": "^13.2.0",
-		"@wordpress/element": "^5.2.0",
-		"@wordpress/hooks": "^3.25.0",
-		"@wordpress/html-entities": "^3.25.0",
-		"@wordpress/i18n": "^4.25.0",
-		"@wordpress/icons": "^9.16.0",
-		"@wordpress/interface": "^5.2.0",
-		"@wordpress/keyboard-shortcuts": "^4.2.0",
-		"@wordpress/keycodes": "^3.25.0",
-		"@wordpress/media-utils": "^4.16.0",
-		"@wordpress/notices": "^3.25.0",
-		"@wordpress/plugins": "^5.2.0",
-		"@wordpress/preferences": "^3.2.0",
-		"@wordpress/reusable-blocks": "^4.2.0",
-		"@wordpress/style-engine": "^1.8.0",
-		"@wordpress/url": "^3.26.0",
-		"@wordpress/viewport": "^5.2.0",
-		"@wordpress/widgets": "^3.2.0",
+		"@wordpress/a11y": "^3.26.0",
+		"@wordpress/api-fetch": "^6.23.0",
+		"@wordpress/block-editor": "^11.3.0",
+		"@wordpress/block-library": "^8.3.0",
+		"@wordpress/blocks": "^12.3.0",
+		"@wordpress/components": "^23.3.0",
+		"@wordpress/compose": "^6.3.0",
+		"@wordpress/core-data": "^6.3.0",
+		"@wordpress/data": "^8.3.0",
+		"@wordpress/deprecated": "^3.26.0",
+		"@wordpress/editor": "^13.3.0",
+		"@wordpress/element": "^5.3.0",
+		"@wordpress/experiments": "^0.8.0",
+		"@wordpress/hooks": "^3.26.0",
+		"@wordpress/html-entities": "^3.26.0",
+		"@wordpress/i18n": "^4.26.0",
+		"@wordpress/icons": "^9.17.0",
+		"@wordpress/interface": "^5.3.0",
+		"@wordpress/keyboard-shortcuts": "^4.3.0",
+		"@wordpress/keycodes": "^3.26.0",
+		"@wordpress/media-utils": "^4.17.0",
+		"@wordpress/notices": "^3.26.0",
+		"@wordpress/plugins": "^5.3.0",
+		"@wordpress/preferences": "^3.3.0",
+		"@wordpress/reusable-blocks": "^4.3.0",
+		"@wordpress/style-engine": "^1.9.0",
+		"@wordpress/url": "^3.27.0",
+		"@wordpress/viewport": "^5.3.0",
+		"@wordpress/widgets": "^3.3.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
 		"downloadjs": "^1.4.7",
 		"fast-deep-equal": "^3.1.3",
 		"history": "^5.1.0",
 		"lodash": "^4.17.21",
+		"memize": "^1.1.0",
 		"react-autosize-textarea": "^7.1.0",
 		"rememo": "^4.0.0"
 	},
@@ -71,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "204c880ff65295768e9695dfee6c7a9fee1fdd05"
+	"gitHead": "cab6ebe2b4c5dbacfd753dcae4a2406559c4813c"
 }

package/src/components/add-new-template/add-custom-generic-template-modal.js

@@ -10,10 +10,10 @@ import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
 	Button,
-	Flex,
-	FlexItem,
 	Modal,
 	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
 /**
@@ -52,7 +52,6 @@ function AddCustomGenericTemplateModal( {
 	return (
 		<Modal
 			title={ __( 'Create custom template' ) }
-			closeLabel={ __( 'Close' ) }
 			onRequestClose={ () => {
 				onClose();
 			} }
@@ -60,27 +59,22 @@ function AddCustomGenericTemplateModal( {
 		>
 			{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }
 			<form onSubmit={ onCreateTemplate }>
-				<Flex align="flex-start" gap={ 8 }>
-					<FlexItem>
-						<TextControl
-							label={ __( 'Name' ) }
-							value={ title }
-							onChange={ setTitle }
-							placeholder={ defaultTitle }
-							disabled={ isBusy }
-							help={ __(
-								'Describe the template, e.g. "Post with sidebar".'
-							) }
-						/>
-					</FlexItem>
-				</Flex>
-
-				<Flex
-					className="edit-site-custom-generic-template__modal-actions"
-					justify="flex-end"
-					expanded={ false }
-				>
-					<FlexItem>
+				<VStack spacing={ 6 }>
+					<TextControl
+						__nextHasNoMarginBottom
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+						placeholder={ defaultTitle }
+						disabled={ isBusy }
+						help={ __(
+							'Describe the template, e.g. "Post with sidebar".'
+						) }
+					/>
+					<HStack
+						className="edit-site-custom-generic-template__modal-actions"
+						justify="right"
+					>
 						<Button
 							variant="tertiary"
 							onClick={ () => {
@@ -89,8 +83,6 @@ function AddCustomGenericTemplateModal( {
 						>
 							{ __( 'Cancel' ) }
 						</Button>
-					</FlexItem>
-					<FlexItem>
 						<Button
 							variant="primary"
 							type="submit"
@@ -99,8 +91,8 @@ function AddCustomGenericTemplateModal( {
 						>
 							{ __( 'Create' ) }
 						</Button>
-					</FlexItem>
-				</Flex>
+					</HStack>
+				</VStack>
 			</form>
 		</Modal>
 	);

package/src/components/add-new-template/add-custom-template-modal.js

@@ -184,7 +184,6 @@ function AddCustomTemplateModal( {
 				entityForSuggestions.labels.singular_name
 			) }
 			className={ baseCssClass }
-			closeLabel={ __( 'Close' ) }
 			onRequestClose={ onClose }
 		>
 			{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }

package/src/components/add-new-template/new-template-part.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { kebabCase } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -20,7 +15,11 @@ import { plus } from '@wordpress/icons';
 import { useHistory } from '../routes';
 import { store as editSiteStore } from '../../store';
 import CreateTemplatePartModal from '../create-template-part-modal';
-import { useExistingTemplateParts } from './utils';
+import {
+	useExistingTemplateParts,
+	getUniqueTemplatePartTitle,
+	getCleanTemplatePartSlug,
+} from '../../utils/template-part-create';
 
 export default function NewTemplatePart( {
 	postType,
@@ -42,39 +41,19 @@ export default function NewTemplatePart( {
 			return;
 		}
 
-		const uniqueTitle = () => {
-			const lowercaseTitle = title.toLowerCase();
-			const existingTitles = existingTemplateParts.map(
-				( templatePart ) => templatePart.title.rendered.toLowerCase()
-			);
-
-			if ( ! existingTitles.includes( lowercaseTitle ) ) {
-				return title;
-			}
-
-			let suffix = 2;
-			while (
-				existingTitles.includes( `${ lowercaseTitle } ${ suffix }` )
-			) {
-				suffix++;
-			}
-
-			return `${ title } ${ suffix }`;
-		};
-
 		try {
-			// Currently template parts only allow latin chars.
-			// Fallback slug will receive suffix by default.
-			const cleanSlug =
-				kebabCase( title ).replace( /[^\w-]+/g, '' ) ||
-				'wp-custom-part';
+			const uniqueTitle = getUniqueTemplatePartTitle(
+				title,
+				existingTemplateParts
+			);
+			const cleanSlug = getCleanTemplatePartSlug( uniqueTitle );
 
 			const templatePart = await saveEntityRecord(
 				'postType',
 				'wp_template_part',
 				{
 					slug: cleanSlug,
-					title: uniqueTitle(),
+					title: uniqueTitle,
 					content: '',
 					area,
 				},

package/src/components/add-new-template/style.scss

@@ -151,10 +151,6 @@
 	}
 }
 
-.edit-site-custom-generic-template__modal-actions {
-	margin-top: $grid-unit-15;
-}
-
 .edit-site-template-actions-loading-screen-modal {
 	backdrop-filter: none;
 	background-color: transparent;

package/src/components/add-new-template/utils.js

@@ -52,20 +52,6 @@ export const useExistingTemplates = () => {
 	);
 };
 
-export const useExistingTemplateParts = () => {
-	return useSelect(
-		( select ) =>
-			select( coreStore ).getEntityRecords(
-				'postType',
-				'wp_template_part',
-				{
-					per_page: -1,
-				}
-			),
-		[]
-	);
-};
-
 export const useDefaultTemplateTypes = () => {
 	return useSelect(
 		( select ) =>

package/src/components/app/index.js

@@ -15,7 +15,7 @@ import { PluginArea } from '@wordpress/plugins';
 import { Routes } from '../routes';
 import Layout from '../layout';
 
-export default function App( { reboot } ) {
+export default function App() {
 	const { createErrorNotice } = useDispatch( noticesStore );
 
 	function onPluginAreaError( name ) {
@@ -37,7 +37,7 @@ export default function App( { reboot } ) {
 				<UnsavedChangesWarning />
 
 				<Routes>
-					<Layout onError={ reboot } />
+					<Layout />
 					<PluginArea onError={ onPluginAreaError } />
 				</Routes>
 			</SlotFillProvider>

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

@@ -7,22 +7,17 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback, useMemo, useRef } from '@wordpress/element';
-import {
-	useEntityBlockEditor,
-	__experimentalFetchMedia as fetchMedia,
-	store as coreStore,
-} from '@wordpress/core-data';
+import { useMemo, useRef } from '@wordpress/element';
+import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data';
 import {
 	BlockList,
-	BlockEditorProvider,
-	__experimentalLinkControl,
 	BlockInspector,
 	BlockTools,
 	__unstableUseClipboardHandler as useClipboardHandler,
 	__unstableUseTypingObserver as useTypingObserver,
 	BlockEditorKeyboardShortcuts,
 	store as blockEditorStore,
+	experiments as blockEditorExperiments,
 } from '@wordpress/block-editor';
 import {
 	useMergeRefs,
@@ -34,14 +29,17 @@ import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
 /**
  * Internal dependencies
  */
+import inserterMediaCategories from './inserter-media-categories';
 import TemplatePartConverter from '../template-part-converter';
-import NavigateToLink from '../navigate-to-link';
 import { SidebarInspectorFill } from '../sidebar-edit-mode';
 import { store as editSiteStore } from '../../store';
 import BackButton from './back-button';
 import ResizableEditor from './resizable-editor';
 import EditorCanvas from './editor-canvas';
 import StyleBook from '../style-book';
+import { unlock } from '../../experiments';
+
+const { ExperimentalBlockEditorProvider } = unlock( blockEditorExperiments );
 
 const LAYOUT = {
 	type: 'default',
@@ -50,7 +48,7 @@ const LAYOUT = {
 };
 
 export default function BlockEditor() {
-	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
+	const { setIsInserterOpened } = useDispatch( editSiteStore );
 	const { storedSettings, templateType, canvasMode } = useSelect(
 		( select ) => {
 			const { getSettings, getEditedPostType, __unstableGetCanvasMode } =
@@ -122,7 +120,7 @@ export default function BlockEditor() {
 
 		return {
 			...restStoredSettings,
-			__unstableFetchMedia: fetchMedia,
+			inserterMediaCategories,
 			__experimentalBlockPatterns: blockPatterns,
 			__experimentalBlockPatternCategories: blockPatternCategories,
 		};
@@ -155,7 +153,7 @@ export default function BlockEditor() {
 		( isTemplatePart && hasBlocks ) || isViewMode ? false : undefined;
 
 	return (
-		<BlockEditorProvider
+		<ExperimentalBlockEditorProvider
 			settings={ settings }
 			value={ blocks }
 			onInput={ onInput }
@@ -163,17 +161,6 @@ export default function BlockEditor() {
 			useSubRegistry={ false }
 		>
 			<TemplatePartConverter />
-			<__experimentalLinkControl.ViewerFill>
-				{ useCallback(
-					( fillProps ) => (
-						<NavigateToLink
-							{ ...fillProps }
-							onActivePageChange={ setPage }
-						/>
-					),
-					[]
-				) }
-			</__experimentalLinkControl.ViewerFill>
 			<SidebarInspectorFill>
 				<BlockInspector />
 			</SidebarInspectorFill>
@@ -204,7 +191,7 @@ export default function BlockEditor() {
 							<BackButton />
 							<ResizableEditor
 								enableResizing={ enableResizing }
-								height={ sizes.height }
+								height={ sizes.height ?? '100%' }
 							>
 								<EditorCanvas
 									enableResizing={ enableResizing }
@@ -225,6 +212,6 @@ export default function BlockEditor() {
 				}
 			</StyleBook.Slot>
 			<ReusableBlocksMenuItems />
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 }

package/src/components/block-editor/inserter-media-categories.js

@@ -0,0 +1,247 @@
+/**
+ * The `edit-site` settings here need to be in sync with the corresponding ones in `site-editor` package.
+ * See `packages/edit-site/src/components/block-editor/inserter-media-categories.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;