@wordpress/editor 13.12.0 → 13.12.1

package/src/components/post-publish-panel/maybe-upload-media.js

@@ -0,0 +1,167 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PanelBody,
+	Button,
+	Spinner,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { upload } from '@wordpress/icons';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+import { isBlobURL } from '@wordpress/blob';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+function flattenBlocks( blocks ) {
+	const result = [];
+
+	blocks.forEach( ( block ) => {
+		result.push( block );
+		result.push( ...flattenBlocks( block.innerBlocks ) );
+	} );
+
+	return result;
+}
+
+function Image( block ) {
+	const { selectBlock } = useDispatch( blockEditorStore );
+	return (
+		<motion.img
+			tabIndex={ 0 }
+			role="button"
+			aria-label={ __( 'Select image block.' ) }
+			onClick={ () => {
+				selectBlock( block.clientId );
+			} }
+			onKeyDown={ ( event ) => {
+				if ( event.key === 'Enter' || event.key === ' ' ) {
+					selectBlock( block.clientId );
+					event.preventDefault();
+				}
+			} }
+			key={ block.clientId }
+			alt={ block.attributes.alt }
+			src={ block.attributes.url }
+			animate={ { opacity: 1 } }
+			exit={ { opacity: 0, scale: 0 } }
+			style={ {
+				width: '36px',
+				height: '36px',
+				objectFit: 'cover',
+				borderRadius: '2px',
+				cursor: 'pointer',
+			} }
+			whileHover={ { scale: 1.08 } }
+		/>
+	);
+}
+
+export default function PostFormatPanel() {
+	const [ isUploading, setIsUploading ] = useState( false );
+	const { editorBlocks, mediaUpload } = useSelect(
+		( select ) => ( {
+			editorBlocks: select( editorStore ).getEditorBlocks(),
+			mediaUpload: select( blockEditorStore ).getSettings().mediaUpload,
+		} ),
+		[]
+	);
+	const externalImages = flattenBlocks( editorBlocks ).filter(
+		( block ) =>
+			block.name === 'core/image' &&
+			block.attributes.url &&
+			! block.attributes.id
+	);
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	if ( ! mediaUpload || ! externalImages.length ) {
+		return null;
+	}
+
+	const panelBodyTitle = [
+		__( 'Suggestion:' ),
+		<span className="editor-post-publish-panel__link" key="label">
+			{ __( 'External media' ) }
+		</span>,
+	];
+
+	function uploadImages() {
+		setIsUploading( true );
+		Promise.all(
+			externalImages.map( ( image ) =>
+				window
+					.fetch(
+						image.attributes.url.includes( '?' )
+							? image.attributes.url
+							: image.attributes.url + '?'
+					)
+					.then( ( response ) => response.blob() )
+					.then(
+						( blob ) =>
+							new Promise( ( resolve, reject ) => {
+								mediaUpload( {
+									filesList: [ blob ],
+									onFileChange: ( [ media ] ) => {
+										if ( isBlobURL( media.url ) ) {
+											return;
+										}
+
+										updateBlockAttributes( image.clientId, {
+											id: media.id,
+											url: media.url,
+										} );
+										resolve();
+									},
+									onError() {
+										reject();
+									},
+								} );
+							} )
+					)
+			)
+		).finally( () => {
+			setIsUploading( false );
+		} );
+	}
+
+	return (
+		<PanelBody initialOpen={ true } title={ panelBodyTitle }>
+			<p>
+				{ __(
+					'There are some external images in the post which can be uploaded to the media library. Images coming from different domains may not always display correctly, load slowly for visitors, or be removed unexpectedly.'
+				) }
+			</p>
+			<div
+				style={ {
+					display: 'inline-flex',
+					flexWrap: 'wrap',
+					gap: '8px',
+				} }
+			>
+				<AnimatePresence>
+					{ externalImages.map( ( image ) => {
+						return <Image key={ image.clientId } { ...image } />;
+					} ) }
+				</AnimatePresence>
+				{ isUploading ? (
+					<Spinner />
+				) : (
+					<Button
+						icon={ upload }
+						variant="primary"
+						onClick={ uploadImages }
+					>
+						{ __( 'Upload all' ) }
+					</Button>
+				) }
+			</div>
+		</PanelBody>
+	);
+}

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

@@ -20,6 +20,7 @@ import MaybeTagsPanel from './maybe-tags-panel';
 import MaybePostFormatPanel from './maybe-post-format-panel';
 import { store as editorStore } from '../../store';
 import MaybeCategoryPanel from './maybe-category-panel';
+import MaybeUploadMedia from './maybe-upload-media';
 
 function PostPublishPanelPrepublish( { children } ) {
 	const {
@@ -103,6 +104,7 @@ function PostPublishPanelPrepublish( { children } ) {
 					<span className="components-site-home">{ siteHome }</span>
 				</div>
 			</div>
+			<MaybeUploadMedia />
 			{ hasPublishAction && (
 				<>
 					<PanelBody

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

@@ -6,7 +6,7 @@
 	// Ensure the post-publish panel accounts for the header and footer height.
 	min-height: calc(100% - #{$header-height + 84px});
 
-	.components-spinner {
+	> .components-spinner {
 		display: block;
 		margin: 100px auto 0;
 	}

package/src/components/post-sync-status/index.js

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { ToggleControl, PanelRow } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+export default function PostSyncStatus() {
+	const { editPost } = useDispatch( editorStore );
+	const { meta, postType } = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		return {
+			meta: getEditedPostAttribute( 'meta' ),
+			postType: getEditedPostAttribute( 'type' ),
+		};
+	}, [] );
+	if ( postType !== 'wp_block' ) {
+		return null;
+	}
+	const onUpdateSync = ( syncStatus ) =>
+		editPost( {
+			meta: {
+				...meta,
+				wp_block:
+					syncStatus === 'unsynced'
+						? { sync_status: syncStatus }
+						: null,
+			},
+		} );
+	const syncStatus = meta?.wp_block?.sync_status;
+	const isFullySynced = ! syncStatus;
+
+	return (
+		<PanelRow className="edit-post-sync-status">
+			<span>{ __( 'Syncing' ) }</span>
+			<ToggleControl
+				__nextHasNoMarginBottom
+				label={
+					isFullySynced ? __( 'Fully synced' ) : __( 'Not synced' )
+				}
+				checked={ isFullySynced }
+				onChange={ () => {
+					onUpdateSync(
+						syncStatus === 'unsynced' ? 'fully' : 'unsynced'
+					);
+				} }
+			/>
+		</PanelRow>
+	);
+}

package/src/components/post-sync-status/style.scss

@@ -0,0 +1,16 @@
+.edit-post-sync-status {
+	width: 100%;
+	position: relative;
+	justify-content: flex-start;
+
+	> span {
+		display: block;
+		width: 45%;
+		flex-shrink: 0;
+	}
+
+	.components-base-control {
+		// Match padding on tertiary buttons for alignment.
+		padding-left: $grid-unit-15 * 0.5;
+	}
+}

package/src/components/post-taxonomies/flat-term-selector.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import escapeHtml from 'escape-html';
-
 /**
  * WordPress dependencies
  */
@@ -12,7 +7,6 @@ import { FormTokenField, withFilters } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useDebounce } from '@wordpress/compose';
-import apiFetch from '@wordpress/api-fetch';
 import { speak } from '@wordpress/a11y';
 
 /**
@@ -51,28 +45,6 @@ const termNamesToIds = ( names, terms ) => {
 	);
 };
 
-// Tries to create a term or fetch it if it already exists.
-function findOrCreateTerm( termName, restBase, namespace ) {
-	const escapedTermName = escapeHtml( termName );
-
-	return apiFetch( {
-		path: `/${ namespace }/${ restBase }`,
-		method: 'POST',
-		data: { name: escapedTermName },
-	} )
-		.catch( ( error ) => {
-			if ( error.code !== 'term_exists' ) {
-				return Promise.reject( error );
-			}
-
-			return Promise.resolve( {
-				id: error.data.term_id,
-				name: termName,
-			} );
-		} )
-		.then( unescapeTerm );
-}
-
 export function FlatTermSelector( { slug } ) {
 	const [ values, setValues ] = useState( [] );
 	const [ search, setSearch ] = useState( '' );
@@ -165,11 +137,30 @@ export function FlatTermSelector( { slug } ) {
 	}, [ searchResults ] );
 
 	const { editPost } = useDispatch( editorStore );
+	const { saveEntityRecord } = useDispatch( coreStore );
 
 	if ( ! hasAssignAction ) {
 		return null;
 	}
 
+	async function findOrCreateTerm( term ) {
+		try {
+			const newTerm = await saveEntityRecord( 'taxonomy', slug, term, {
+				throwOnError: true,
+			} );
+			return unescapeTerm( newTerm );
+		} catch ( error ) {
+			if ( error.code !== 'term_exists' ) {
+				throw error;
+			}
+
+			return {
+				id: error.data.term_id,
+				name: term.name,
+			};
+		}
+	}
+
 	function onUpdateTerms( newTermIds ) {
 		editPost( { [ taxonomy.rest_base ]: newTermIds } );
 	}
@@ -209,10 +200,9 @@ export function FlatTermSelector( { slug } ) {
 			return;
 		}
 
-		const namespace = taxonomy?.rest_namespace ?? 'wp/v2';
 		Promise.all(
 			newTermNames.map( ( termName ) =>
-				findOrCreateTerm( termName, taxonomy.rest_base, namespace )
+				findOrCreateTerm( { name: termName } )
 			)
 		).then( ( newTerms ) => {
 			const newAvailableTerms = availableTerms.concat( newTerms );

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

@@ -74,8 +74,10 @@ function PostTitle( _, forwardedRef ) {
 			return;
 		}
 
+		const { defaultView } = ref.current.ownerDocument;
+		const { name, parent } = defaultView;
 		const ownerDocument =
-			ref.current.ownerDocument.defaultView.top.document;
+			name === 'editor-canvas' ? parent.document : defaultView.document;
 		const { activeElement, body } = ownerDocument;
 
 		// Only autofocus the title when the post is entirely empty. This should

package/src/components/provider/index.js

@@ -19,7 +19,7 @@ import { store as noticesStore } from '@wordpress/notices';
 import withRegistryProvider from './with-registry-provider';
 import { store as editorStore } from '../../store';
 import useBlockEditorSettings from './use-block-editor-settings';
-import { unlock } from '../../lockUnlock';
+import { unlock } from '../../lock-unlock';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 

package/src/components/provider/index.native.js

@@ -319,8 +319,6 @@ class NativeEditorProvider extends Component {
 		const { mode, switchMode } = this.props;
 		// Refresh html content first.
 		this.serializeToNativeAction();
-		// Make sure to blur the selected block and dismiss the keyboard.
-		this.props.clearSelectedBlock();
 		switchMode( mode === 'visual' ? 'text' : 'visual' );
 	}
 
@@ -387,12 +385,8 @@ const ComposedNativeProvider = compose( [
 	withDispatch( ( dispatch ) => {
 		const { editPost, resetEditorBlocks, updateEditorSettings } =
 			dispatch( editorStore );
-		const {
-			updateSettings,
-			clearSelectedBlock,
-			insertBlock,
-			replaceBlock,
-		} = dispatch( blockEditorStore );
+		const { updateSettings, insertBlock, replaceBlock } =
+			dispatch( blockEditorStore );
 		const { switchEditorMode } = dispatch( editPostStore );
 		const { addEntities, receiveEntityRecords } = dispatch( coreStore );
 		const { createSuccessNotice } = dispatch( noticesStore );
@@ -401,7 +395,6 @@ const ComposedNativeProvider = compose( [
 			updateBlockEditorSettings: updateSettings,
 			updateEditorSettings,
 			addEntities,
-			clearSelectedBlock,
 			insertBlock,
 			createSuccessNotice,
 			editTitle( title ) {

package/src/private-apis.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { ExperimentalEditorProvider } from './components/provider';
-import { lock } from './lockUnlock';
+import { lock } from './lock-unlock';
 import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
 
 export const privateApis = {};

package/src/style.scss

@@ -11,6 +11,7 @@
 @import "./components/post-publish-button/style.scss";
 @import "./components/post-publish-panel/style.scss";
 @import "./components/post-saved-state/style.scss";
+@import "./components/post-sync-status/style.scss";
 @import "./components/post-taxonomies/style.scss";
 @import "./components/post-text-editor/style.scss";
 @import "./components/post-url/style.scss";

package/build/lockUnlock.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/editor/src/lockUnlock.js"],"names":["lock","unlock"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAEO,MAAM;AAAEA,EAAAA,IAAF;AAAQC,EAAAA;AAAR,IACZ,mEACC,8GADD,EAEC,mBAFD,CADM","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',\n\t\t'@wordpress/editor'\n\t);\n"]}

package/build-module/lockUnlock.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/editor/src/lockUnlock.js"],"names":["__dangerousOptInToUnstableAPIsOnlyForCoreModules","lock","unlock"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,gDAAT,QAAiE,yBAAjE;AACA,OAAO,MAAM;AAAEC,EAAAA,IAAF;AAAQC,EAAAA;AAAR,IACZF,gDAAgD,CAC/C,8GAD+C,EAE/C,mBAF+C,CAD1C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',\n\t\t'@wordpress/editor'\n\t);\n"]}