@wordpress/editor 13.12.0 → 13.12.2

package/build-style/style-rtl.css

@@ -418,7 +418,7 @@
 .editor-post-publish-panel__content {
   min-height: calc(100% - 144px);
 }
-.editor-post-publish-panel__content .components-spinner {
+.editor-post-publish-panel__content > .components-spinner {
   display: block;
   margin: 100px auto 0;
 }
@@ -627,6 +627,20 @@
   margin-left: 0;
 }
 
+.edit-post-sync-status {
+  width: 100%;
+  position: relative;
+  justify-content: flex-start;
+}
+.edit-post-sync-status > span {
+  display: block;
+  width: 45%;
+  flex-shrink: 0;
+}
+.edit-post-sync-status .components-base-control {
+  padding-right: 6px;
+}
+
 .editor-post-taxonomies__hierarchical-terms-list {
   max-height: 14em;
   overflow: auto;

package/build-style/style.css

@@ -418,7 +418,7 @@
 .editor-post-publish-panel__content {
   min-height: calc(100% - 144px);
 }
-.editor-post-publish-panel__content .components-spinner {
+.editor-post-publish-panel__content > .components-spinner {
   display: block;
   margin: 100px auto 0;
 }
@@ -627,6 +627,20 @@
   margin-right: 0;
 }
 
+.edit-post-sync-status {
+  width: 100%;
+  position: relative;
+  justify-content: flex-start;
+}
+.edit-post-sync-status > span {
+  display: block;
+  width: 45%;
+  flex-shrink: 0;
+}
+.edit-post-sync-status .components-base-control {
+  padding-left: 6px;
+}
+
 .editor-post-taxonomies__hierarchical-terms-list {
   max-height: 14em;
   overflow: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "13.12.0",
+	"version": "13.12.2",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,37 +31,36 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.35.0",
-		"@wordpress/api-fetch": "^6.32.0",
-		"@wordpress/blob": "^3.35.0",
-		"@wordpress/block-editor": "^12.3.0",
-		"@wordpress/blocks": "^12.12.0",
-		"@wordpress/components": "^25.1.0",
-		"@wordpress/compose": "^6.12.0",
-		"@wordpress/core-data": "^6.12.0",
-		"@wordpress/data": "^9.5.0",
-		"@wordpress/date": "^4.35.0",
-		"@wordpress/deprecated": "^3.35.0",
-		"@wordpress/dom": "^3.35.0",
-		"@wordpress/element": "^5.12.0",
-		"@wordpress/hooks": "^3.35.0",
-		"@wordpress/html-entities": "^3.35.0",
-		"@wordpress/i18n": "^4.35.0",
-		"@wordpress/icons": "^9.26.0",
-		"@wordpress/keyboard-shortcuts": "^4.12.0",
-		"@wordpress/keycodes": "^3.35.0",
-		"@wordpress/media-utils": "^4.26.0",
-		"@wordpress/notices": "^4.3.0",
-		"@wordpress/preferences": "^3.12.0",
-		"@wordpress/private-apis": "^0.17.0",
-		"@wordpress/reusable-blocks": "^4.12.0",
-		"@wordpress/rich-text": "^6.12.0",
-		"@wordpress/server-side-render": "^4.12.0",
-		"@wordpress/url": "^3.36.0",
-		"@wordpress/wordcount": "^3.35.0",
+		"@wordpress/a11y": "^3.35.1",
+		"@wordpress/api-fetch": "^6.32.1",
+		"@wordpress/blob": "^3.35.1",
+		"@wordpress/block-editor": "^12.3.2",
+		"@wordpress/blocks": "^12.12.1",
+		"@wordpress/components": "^25.1.2",
+		"@wordpress/compose": "^6.12.1",
+		"@wordpress/core-data": "^6.12.2",
+		"@wordpress/data": "^9.5.1",
+		"@wordpress/date": "^4.35.1",
+		"@wordpress/deprecated": "^3.35.1",
+		"@wordpress/dom": "^3.35.1",
+		"@wordpress/element": "^5.12.1",
+		"@wordpress/hooks": "^3.35.1",
+		"@wordpress/html-entities": "^3.35.1",
+		"@wordpress/i18n": "^4.35.1",
+		"@wordpress/icons": "^9.26.2",
+		"@wordpress/keyboard-shortcuts": "^4.12.1",
+		"@wordpress/keycodes": "^3.35.1",
+		"@wordpress/media-utils": "^4.26.1",
+		"@wordpress/notices": "^4.3.1",
+		"@wordpress/preferences": "^3.12.2",
+		"@wordpress/private-apis": "^0.17.1",
+		"@wordpress/reusable-blocks": "^4.12.2",
+		"@wordpress/rich-text": "^6.12.1",
+		"@wordpress/server-side-render": "^4.12.2",
+		"@wordpress/url": "^3.36.1",
+		"@wordpress/wordcount": "^3.35.1",
 		"classnames": "^2.3.1",
 		"date-fns": "^2.28.0",
-		"escape-html": "^1.0.3",
 		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0",
 		"rememo": "^4.0.2",
@@ -74,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a92f606309b1541b834ff9b0a76ed2a466fc45ed"
+	"gitHead": "a00463f06c90ae6705951861eb889e67a52bf448"
 }

package/src/components/editor-help/test/index.native.js

@@ -35,10 +35,11 @@ it( 'navigates back from help topic detail screen', async () => {
 	const backButton = screen.getAllByLabelText( 'Go back' );
 	fireEvent.press( backButton[ backButton.length - 1 ] );
 
-	// Currently logs `act` warning due to https://github.com/callstack/react-native-testing-library/issues/379
 	const text =
 		'Each block has its own settings. To find them, tap on a block. Its settings will appear on the toolbar at the bottom of the screen.';
-	await waitForElementToBeRemoved( () => screen.getByText( text ) );
+	await waitForElementToBeRemoved( () =>
+		screen.getByText( text, { hidden: true } )
+	);
 
 	expect( screen.queryByText( text ) ).toBeNull();
 } );

package/src/components/entities-saved-states/hooks/use-is-dirty.js

@@ -13,6 +13,8 @@ const TRANSLATED_SITE_PROPERTIES = {
 	site_icon: __( 'Icon' ),
 	show_on_front: __( 'Show on front' ),
 	page_on_front: __( 'Page on front' ),
+	posts_per_page: __( 'Maximum posts per page' ),
+	default_comment_status: __( 'Allow comments on new posts' ),
 };
 
 export const useIsDirty = () => {

package/src/components/index.js

@@ -51,6 +51,7 @@ export { default as PostSlugCheck } from './post-slug/check';
 export { default as PostSticky } from './post-sticky';
 export { default as PostStickyCheck } from './post-sticky/check';
 export { default as PostSwitchToDraftButton } from './post-switch-to-draft-button';
+export { default as PostSyncStatus } from './post-sync-status';
 export { default as PostTaxonomies } from './post-taxonomies';
 export { FlatTermSelector as PostTaxonomiesFlatTermSelector } from './post-taxonomies/flat-term-selector';
 export { HierarchicalTermSelector as PostTaxonomiesHierarchicalTermSelector } from './post-taxonomies/hierarchical-term-selector';

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/components/provider/use-block-editor-settings.js

@@ -47,6 +47,7 @@ const BLOCK_EDITOR_SETTINGS = [
 	'enableCustomUnits',
 	'enableOpenverseMediaCategory',
 	'focusMode',
+	'distractionFree',
 	'fontSizes',
 	'gradients',
 	'generateAnchors',

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"]}