@wordpress/edit-site 5.1.0 → 5.3.0

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;

package/src/components/block-editor/resize-handle.js

@@ -7,7 +7,11 @@ import { VisuallyHidden } from '@wordpress/components';
 
 const DELTA_DISTANCE = 20; // The distance to resize per keydown in pixels.
 
-export default function ResizeHandle( { direction, resizeWidthBy } ) {
+export default function ResizeHandle( {
+	variation = 'default',
+	direction,
+	resizeWidthBy,
+} ) {
 	function handleKeyDown( event ) {
 		const { keyCode } = event;
 
@@ -27,7 +31,7 @@ export default function ResizeHandle( { direction, resizeWidthBy } ) {
 	return (
 		<>
 			<button
-				className={ `resizable-editor__drag-handle is-${ direction }` }
+				className={ `resizable-editor__drag-handle is-${ direction } is-variation-${ variation }` }
 				aria-label={ __( 'Drag to resize' ) }
 				aria-describedby={ `resizable-editor__resize-help-${ direction }` }
 				onKeyDown={ handleKeyDown }

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

@@ -27,6 +27,11 @@
 		height: 100%;
 	}
 
+	.edit-site-visual-editor__editor-canvas {
+		height: 100%;
+		background: $white;
+	}
+
 	&.is-focus-mode {
 		.edit-site-layout.is-full-canvas & {
 			padding: $grid-unit-60;
@@ -78,21 +83,53 @@
 }
 
 .resizable-editor__drag-handle {
-	$height: 100px;
 	position: absolute;
 	top: 0;
 	bottom: 0;
 	padding: 0;
 	margin: auto 0;
-	width: $grid-unit-05;
-	height: $height;
+	width: $grid-unit-15;
 	appearance: none;
 	cursor: ew-resize;
 	outline: none;
-	background: $gray-600;
-	border-radius: 2px;
+	background: none;
+	border-radius: $radius-block-ui;
 	border: 0;
 
+	&.is-variation-default {
+		height: 100px;
+	}
+
+	&.is-variation-separator {
+		height: 100%;
+		width: $grid-unit-30;
+		right: 0;
+
+		&::after {
+			width: 2px;
+			border-radius: 0;
+			background: transparent;
+			left: 50%;
+			transform: translateX(-1px);
+			right: 0;
+			transition: all ease 0.2s;
+			transition-delay: 0.1s;
+			@include reduce-motion;
+		}
+	}
+
+	&::after {
+		position: absolute;
+		top: $grid-unit-30;
+		left: $grid-unit-05;
+		right: 0;
+		bottom: $grid-unit-30;
+		content: "";
+		width: $grid-unit-05;
+		background: $gray-600;
+		border-radius: $radius-block-ui;
+	}
+
 	&.is-left {
 		left: -$grid-unit-20;
 	}
@@ -103,10 +140,21 @@
 
 	&:hover,
 	&:active {
-		background: $gray-400;
+		opacity: 1;
+		&.is-variation-default::after {
+			background: $gray-400;
+		}
+		&.is-variation-separator::after {
+			background: var(--wp-admin-theme-color);
+		}
 	}
 
-	&:focus {
+	&:focus::after {
 		box-shadow: 0 0 0 1px $gray-800, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
 	}
+
+	&.is-variation-separator:focus::after {
+		border-radius: $radius-block-ui;
+		box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
+	}
 }

package/src/components/canvas-spinner/index.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { Spinner } from '@wordpress/components';
+
+export default function CanvasSpinner() {
+	return (
+		<div className="edit-site-canvas-spinner">
+			<Spinner />
+		</div>
+	);
+}

package/src/components/canvas-spinner/style.scss

@@ -0,0 +1,7 @@
+.edit-site-canvas-spinner {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}

package/src/components/create-template-part-modal/index.js

@@ -13,6 +13,7 @@ import {
 	Modal,
 	__experimentalRadioGroup as RadioGroup,
 	__experimentalRadio as Radio,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
@@ -40,7 +41,6 @@ export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
 	return (
 		<Modal
 			title={ __( 'Create a template part' ) }
-			closeLabel={ __( 'Close' ) }
 			onRequestClose={ closeModal }
 			overlayClassName="edit-site-create-template-part-modal"
 		>
@@ -54,76 +54,84 @@ export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
 					await onCreate( { title, area } );
 				} }
 			>
-				<TextControl
-					label={ __( 'Name' ) }
-					value={ title }
-					onChange={ setTitle }
-					required
-				/>
-				<BaseControl
-					label={ __( 'Area' ) }
-					id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
-					className="edit-site-create-template-part-modal__area-base-control"
-				>
-					<RadioGroup
+				<VStack spacing="4">
+					<TextControl
+						__nextHasNoMarginBottom
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+						required
+					/>
+					<BaseControl
 						label={ __( 'Area' ) }
-						className="edit-site-create-template-part-modal__area-radio-group"
 						id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
-						onChange={ setArea }
-						checked={ area }
+						className="edit-site-create-template-part-modal__area-base-control"
 					>
-						{ templatePartAreas.map(
-							( { icon, label, area: value, description } ) => (
-								<Radio
-									key={ label }
-									value={ value }
-									className="edit-site-create-template-part-modal__area-radio"
-								>
-									<Flex align="start" justify="start">
-										<FlexItem>
-											<Icon icon={ icon } />
-										</FlexItem>
-										<FlexBlock className="edit-site-create-template-part-modal__option-label">
-											{ label }
-											<div>{ description }</div>
-										</FlexBlock>
-
-										<FlexItem className="edit-site-create-template-part-modal__checkbox">
-											{ area === value && (
-												<Icon icon={ check } />
-											) }
-										</FlexItem>
-									</Flex>
-								</Radio>
-							)
-						) }
-					</RadioGroup>
-				</BaseControl>
-				<Flex
-					className="edit-site-create-template-part-modal__modal-actions"
-					justify="flex-end"
-				>
-					<FlexItem>
-						<Button
-							variant="secondary"
-							onClick={ () => {
-								closeModal();
-							} }
-						>
-							{ __( 'Cancel' ) }
-						</Button>
-					</FlexItem>
-					<FlexItem>
-						<Button
-							variant="primary"
-							type="submit"
-							disabled={ ! title }
-							isBusy={ isSubmitting }
+						<RadioGroup
+							label={ __( 'Area' ) }
+							className="edit-site-create-template-part-modal__area-radio-group"
+							id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
+							onChange={ setArea }
+							checked={ area }
 						>
-							{ __( 'Create' ) }
-						</Button>
-					</FlexItem>
-				</Flex>
+							{ templatePartAreas.map(
+								( {
+									icon,
+									label,
+									area: value,
+									description,
+								} ) => (
+									<Radio
+										key={ label }
+										value={ value }
+										className="edit-site-create-template-part-modal__area-radio"
+									>
+										<Flex align="start" justify="start">
+											<FlexItem>
+												<Icon icon={ icon } />
+											</FlexItem>
+											<FlexBlock className="edit-site-create-template-part-modal__option-label">
+												{ label }
+												<div>{ description }</div>
+											</FlexBlock>
+
+											<FlexItem className="edit-site-create-template-part-modal__checkbox">
+												{ area === value && (
+													<Icon icon={ check } />
+												) }
+											</FlexItem>
+										</Flex>
+									</Radio>
+								)
+							) }
+						</RadioGroup>
+					</BaseControl>
+					<Flex
+						className="edit-site-create-template-part-modal__modal-actions"
+						justify="flex-end"
+					>
+						<FlexItem>
+							<Button
+								variant="secondary"
+								onClick={ () => {
+									closeModal();
+								} }
+							>
+								{ __( 'Cancel' ) }
+							</Button>
+						</FlexItem>
+						<FlexItem>
+							<Button
+								variant="primary"
+								type="submit"
+								disabled={ ! title }
+								isBusy={ isSubmitting }
+							>
+								{ __( 'Create' ) }
+							</Button>
+						</FlexItem>
+					</Flex>
+				</VStack>
 			</form>
 		</Modal>
 	);

package/src/components/create-template-part-modal/style.scss

@@ -8,16 +8,6 @@
 	}
 }
 
-
-.edit-site-create-template-part-modal__modal-actions {
-	padding-top: $grid-unit-15;
-}
-
-.edit-site-create-template-part-modal__area-base-control .components-base-control__label {
-	margin: $grid-unit-20 0 $grid-unit-10;
-	cursor: auto;
-}
-
 .edit-site-create-template-part-modal__area-radio-group {
 	width: 100%;
 	border: $border-width solid $gray-700;

package/src/components/editor/index.js

@@ -37,6 +37,7 @@ import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
 import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
 import useTitle from '../routes/use-title';
+import CanvasSpinner from '../canvas-spinner';
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor content landmark region. */
@@ -149,7 +150,7 @@ export default function Editor() {
 	useTitle( isReady && __( 'Editor (beta)' ) );
 
 	if ( ! isReady ) {
-		return null;
+		return <CanvasSpinner />;
 	}
 
 	return (
@@ -174,12 +175,13 @@ export default function Editor() {
 								content={
 									<>
 										<GlobalStylesRenderer />
-										<EditorNotices />
+										{ isEditMode && <EditorNotices /> }
 										{ showVisualEditor && editedPost && (
 											<BlockEditor />
 										) }
 										{ editorMode === 'text' &&
-											editedPost && <CodeEditor /> }
+											editedPost &&
+											isEditMode && <CodeEditor /> }
 										{ hasLoadedPost && ! editedPost && (
 											<Notice
 												status="warning"

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

@@ -14,8 +14,6 @@ export default class ErrorBoundary extends Component {
 	constructor() {
 		super( ...arguments );
 
-		this.reboot = this.reboot.bind( this );
-
 		this.state = {
 			error: null,
 		};
@@ -29,13 +27,8 @@ export default class ErrorBoundary extends Component {
 		return { error };
 	}
 
-	reboot() {
-		this.props.onError();
-	}
-
 	render() {
-		const { error } = this.state;
-		if ( ! error ) {
+		if ( ! this.state.error ) {
 			return this.props.children;
 		}
 
@@ -44,8 +37,7 @@ export default class ErrorBoundary extends Component {
 				message={ __(
 					'The editor has encountered an unexpected error.'
 				) }
-				error={ error }
-				reboot={ this.reboot }
+				error={ this.state.error }
 			/>
 		);
 	}

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

@@ -15,41 +15,12 @@ function CopyButton( { text, children } ) {
 	);
 }
 
-export default function ErrorBoundaryWarning( {
-	message,
-	error,
-	reboot,
-	dashboardLink,
-} ) {
-	const actions = [];
-
-	if ( reboot ) {
-		actions.push(
-			<Button key="recovery" onClick={ reboot } variant="secondary">
-				{ __( 'Attempt Recovery' ) }
-			</Button>
-		);
-	}
-
-	if ( error ) {
-		actions.push(
-			<CopyButton key="copy-error" text={ error.stack }>
-				{ __( 'Copy Error' ) }
-			</CopyButton>
-		);
-	}
-
-	if ( dashboardLink ) {
-		actions.push(
-			<Button
-				key="back-to-dashboard"
-				variant="secondary"
-				href={ dashboardLink }
-			>
-				{ __( 'Back to dashboard' ) }
-			</Button>
-		);
-	}
+export default function ErrorBoundaryWarning( { message, error } ) {
+	const actions = [
+		<CopyButton key="copy-error" text={ error.stack }>
+			{ __( 'Copy Error' ) }
+		</CopyButton>,
+	];
 
 	return (
 		<Warning className="editor-error-boundary" actions={ actions }>