@wordpress/editor 12.10.0 → 12.13.0

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

@@ -4,8 +4,9 @@
 import { withDispatch, withSelect } from '@wordpress/data';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { withInstanceId, compose } from '@wordpress/compose';
+import { compose } from '@wordpress/compose';
 import { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url';
+import { TextControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -41,25 +42,19 @@ export class PostSlug extends Component {
 	}
 
 	render() {
-		const { instanceId } = this.props;
 		const { editedSlug } = this.state;
-
-		const inputId = 'editor-post-slug-' + instanceId;
-
 		return (
 			<PostSlugCheck>
-				<label htmlFor={ inputId }>{ __( 'Slug' ) }</label>
-				<input
+				<TextControl
+					label={ __( 'Slug' ) }
 					autoComplete="off"
 					spellCheck="false"
-					type="text"
-					id={ inputId }
 					value={ editedSlug }
-					onChange={ ( event ) =>
-						this.setState( { editedSlug: event.target.value } )
+					onChange={ ( slug ) =>
+						this.setState( { editedSlug: slug } )
 					}
 					onBlur={ this.setSlug }
-					className="editor-post-slug__input"
+					className="editor-post-slug"
 				/>
 			</PostSlugCheck>
 		);
@@ -86,5 +81,4 @@ export default compose( [
 			},
 		};
 	} ),
-	withInstanceId,
 ] )( PostSlug );

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

@@ -3,6 +3,11 @@
  */
 import { shallow } from 'enzyme';
 
+/**
+ * WordPress dependencies
+ */
+import { TextControl } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
@@ -13,11 +18,7 @@ describe( 'PostSlug', () => {
 		it( 'should update internal slug', () => {
 			const wrapper = shallow( <PostSlug postSlug="index" /> );
 
-			wrapper.find( 'input' ).simulate( 'change', {
-				target: {
-					value: 'single',
-				},
-			} );
+			wrapper.find( TextControl ).prop( 'onChange' )( 'single' );
 
 			expect( wrapper.state().editedSlug ).toEqual( 'single' );
 		} );
@@ -28,7 +29,7 @@ describe( 'PostSlug', () => {
 				<PostSlug postSlug="index" onUpdateSlug={ onUpdateSlug } />
 			);
 
-			wrapper.find( 'input' ).simulate( 'blur', {
+			wrapper.find( TextControl ).prop( 'onBlur' )( {
 				target: {
 					value: 'single',
 				},

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

@@ -55,11 +55,11 @@ const termNamesToIds = ( names, terms ) => {
 };
 
 // Tries to create a term or fetch it if it already exists.
-function findOrCreateTerm( termName, restBase ) {
+function findOrCreateTerm( termName, restBase, namespace ) {
 	const escapedTermName = escapeString( termName );
 
 	return apiFetch( {
-		path: `/wp/v2/${ restBase }`,
+		path: `/${ namespace }/${ restBase }`,
 		method: 'POST',
 		data: { name: escapedTermName },
 	} )
@@ -68,7 +68,7 @@ function findOrCreateTerm( termName, restBase ) {
 			if ( errorCode === 'term_exists' ) {
 				// If the terms exist, fetch it instead of creating a new one.
 				const addRequest = apiFetch( {
-					path: addQueryArgs( `/wp/v2/${ restBase }`, {
+					path: addQueryArgs( `/${ namespace }/${ restBase }`, {
 						...DEFAULT_QUERY,
 						search: escapedTermName,
 					} ),
@@ -86,7 +86,7 @@ function findOrCreateTerm( termName, restBase ) {
 		.then( unescapeTerm );
 }
 
-function FlatTermSelector( { slug } ) {
+export function FlatTermSelector( { slug } ) {
 	const [ values, setValues ] = useState( [] );
 	const [ search, setSearch ] = useState( '' );
 	const debouncedSearch = useDebounce( setSearch, 500 );
@@ -224,9 +224,10 @@ function FlatTermSelector( { slug } ) {
 			return;
 		}
 
+		const namespace = taxonomy?.rest_namespace ?? 'wp/v2';
 		Promise.all(
 			newTermNames.map( ( termName ) =>
-				findOrCreateTerm( termName, taxonomy.rest_base )
+				findOrCreateTerm( termName, taxonomy.rest_base, namespace )
 			)
 		).then( ( newTerms ) => {
 			const newAvailableTerms = availableTerms.concat( newTerms );

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

@@ -152,7 +152,7 @@ export function getFilterMatcher( filterValue ) {
  * @param {string} props.slug Taxonomy slug.
  * @return {WPElement}        Hierarchical term selector component.
  */
-function HierarchicalTermSelector( { slug } ) {
+export function HierarchicalTermSelector( { slug } ) {
 	const [ adding, setAdding ] = useState( false );
 	const [ formName, setFormName ] = useState( '' );
 	/**

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, identity, includes } from 'lodash';
+import { filter, includes } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -18,6 +18,8 @@ import HierarchicalTermSelector from './hierarchical-term-selector';
 import FlatTermSelector from './flat-term-selector';
 import { store as editorStore } from '../../store';
 
+const identity = ( x ) => x;
+
 export function PostTaxonomies( {
 	postType,
 	taxonomies,

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

@@ -16,7 +16,7 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
-export function PostTemplate( {} ) {
+export function PostTemplate() {
 	const { availableTemplates, selectedTemplate, isViewable } = useSelect(
 		( select ) => {
 			const {

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

@@ -149,9 +149,13 @@ function PostTitle( _, forwardedRef ) {
 			plainText,
 		} );
 
-		if ( typeof content !== 'string' && content.length ) {
-			event.preventDefault();
+		event.preventDefault();
+
+		if ( ! content.length ) {
+			return;
+		}
 
+		if ( typeof content !== 'string' ) {
 			const [ firstBlock ] = content;
 
 			if (
@@ -164,6 +168,8 @@ function PostTitle( _, forwardedRef ) {
 			} else {
 				onInsertBlockAfter( content );
 			}
+		} else {
+			onUpdate( content );
 		}
 	}
 

package/src/components/post-title/style.scss

@@ -2,7 +2,7 @@
 	position: relative;
 
 	&.is-focus-mode {
-		opacity: 0.5;
+		opacity: 0.2;
 		transition: opacity 0.1s linear;
 		@include reduce-motion("transition");
 

package/src/components/post-trash/style.scss

@@ -1,3 +1,6 @@
 .editor-post-trash.components-button {
+	display: flex;
+	justify-content: center;
 	margin-top: $grid-unit-05;
+	width: 100%;
 }

package/src/components/post-url/check.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+export default function PostURLCheck( { children } ) {
+	const isVisible = useSelect( ( select ) => {
+		const postTypeSlug = select( editorStore ).getCurrentPostType();
+		const postType = select( coreStore ).getPostType( postTypeSlug );
+		if ( ! postType?.viewable ) {
+			return false;
+		}
+
+		const post = select( editorStore ).getCurrentPost();
+		if ( ! post.link ) {
+			return false;
+		}
+
+		const permalinkParts = select( editorStore ).getPermalinkParts();
+		if ( ! permalinkParts ) {
+			return false;
+		}
+
+		return true;
+	}, [] );
+
+	if ( ! isVisible ) {
+		return null;
+	}
+
+	return children;
+}

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

@@ -0,0 +1,122 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url';
+import { useState } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { TextControl, ExternalLink } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+export default function PostURL( { onClose } ) {
+	const {
+		isEditable,
+		postSlug,
+		viewPostLabel,
+		postLink,
+		permalinkPrefix,
+		permalinkSuffix,
+	} = useSelect( ( select ) => {
+		const postTypeSlug = select( editorStore ).getCurrentPostType();
+		const postType = select( coreStore ).getPostType( postTypeSlug );
+		const permalinkParts = select( editorStore ).getPermalinkParts();
+		return {
+			isEditable: select( editorStore ).isPermalinkEditable(),
+			postSlug: safeDecodeURIComponent(
+				select( editorStore ).getEditedPostSlug()
+			),
+			viewPostLabel: postType?.labels.view_item,
+			postLink: select( editorStore ).getCurrentPost().link,
+			permalinkPrefix: permalinkParts?.prefix,
+			permalinkSuffix: permalinkParts?.suffix,
+		};
+	}, [] );
+
+	const { editPost } = useDispatch( editorStore );
+
+	const [ forceEmptyField, setForceEmptyField ] = useState( false );
+
+	return (
+		<div className="editor-post-url">
+			<InspectorPopoverHeader title={ __( 'URL' ) } onClose={ onClose } />
+			{ isEditable && (
+				<TextControl
+					label={ __( 'Permalink' ) }
+					value={ forceEmptyField ? '' : postSlug }
+					autoComplete="off"
+					spellCheck="false"
+					help={
+						<>
+							{ __( 'The last part of the URL.' ) }{ ' ' }
+							<ExternalLink
+								href={ __(
+									'https://wordpress.org/support/article/settings-sidebar/#permalink'
+								) }
+							>
+								{ __( 'Learn more.' ) }
+							</ExternalLink>
+						</>
+					}
+					onChange={ ( newValue ) => {
+						editPost( { slug: newValue } );
+						// When we delete the field the permalink gets
+						// reverted to the original value.
+						// The forceEmptyField logic allows the user to have
+						// the field temporarily empty while typing.
+						if ( ! newValue ) {
+							if ( ! forceEmptyField ) {
+								setForceEmptyField( true );
+							}
+							return;
+						}
+						if ( forceEmptyField ) {
+							setForceEmptyField( false );
+						}
+					} }
+					onBlur={ ( event ) => {
+						editPost( {
+							slug: cleanForSlug( event.target.value ),
+						} );
+						if ( forceEmptyField ) {
+							setForceEmptyField( false );
+						}
+					} }
+				/>
+			) }
+			{ isEditable && (
+				<h3 className="editor-post-url__link-label">
+					{ viewPostLabel ?? __( 'View post' ) }
+				</h3>
+			) }
+			<p>
+				<ExternalLink
+					className="editor-post-url__link"
+					href={ postLink }
+					target="_blank"
+				>
+					{ isEditable ? (
+						<>
+							<span className="editor-post-url__link-prefix">
+								{ permalinkPrefix }
+							</span>
+							<span className="editor-post-url__link-slug">
+								{ postSlug }
+							</span>
+							<span className="editor-post-url__link-suffix">
+								{ permalinkSuffix }
+							</span>
+						</>
+					) : (
+						postLink
+					) }
+				</ExternalLink>
+			</p>
+		</div>
+	);
+}

package/src/components/post-url/label.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { filterURLForDisplay } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+export default function PostURLLabel() {
+	return usePostURLLabel();
+}
+
+export function usePostURLLabel() {
+	const postLink = useSelect(
+		( select ) => select( editorStore ).getCurrentPost().link,
+		[]
+	);
+	return filterURLForDisplay( postLink );
+}

package/src/components/post-url/style.scss

@@ -0,0 +1,16 @@
+.editor-post-url__link-label {
+	font-size: $default-font-size;
+	font-weight: 400;
+	margin: 0;
+}
+
+/* rtl:begin:ignore */
+.editor-post-url__link {
+	direction: ltr;
+	word-break: break-word;
+}
+/* rtl:end:ignore */
+
+.editor-post-url__link-slug {
+	font-weight: 600;
+}

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

@@ -68,7 +68,7 @@ export default function PostVisibility( { onClose } ) {
 	};
 
 	return (
-		<>
+		<div className="editor-post-visibility">
 			<InspectorPopoverHeader
 				title={ __( 'Visibility' ) }
 				help={ __( 'Control how this post is viewed.' ) }
@@ -128,7 +128,7 @@ export default function PostVisibility( { onClose } ) {
 			>
 				{ __( 'Would you like to privately publish this post now?' ) }
 			</ConfirmDialog>
-		</>
+		</div>
 	);
 }
 

package/src/components/post-visibility/label.js

@@ -10,6 +10,10 @@ import { visibilityOptions } from './utils';
 import { store as editorStore } from '../../store';
 
 export default function PostVisibilityLabel() {
+	return usePostVisibilityLabel();
+}
+
+export function usePostVisibilityLabel() {
 	const visibility = useSelect( ( select ) =>
 		select( editorStore ).getEditedPostVisibility()
 	);

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

@@ -91,12 +91,14 @@ class NativeEditorProvider extends Component {
 	}
 
 	componentDidMount() {
-		const { capabilities, locale, updateSettings } = this.props;
+		const { capabilities, locale, hostAppNamespace, updateSettings } =
+			this.props;
 
 		updateSettings( {
 			...capabilities,
 			...this.getThemeColors( this.props ),
 			locale,
+			hostAppNamespace,
 		} );
 
 		this.subscriptionParentGetHtml = subscribeParentGetHtml( () => {
@@ -319,13 +321,7 @@ class NativeEditorProvider extends Component {
 	}
 
 	render() {
-		const {
-			children,
-			post, // eslint-disable-line no-unused-vars
-			capabilities,
-			settings,
-			...props
-		} = this.props;
+		const { children, post, capabilities, settings, ...props } = this.props;
 		const editorSettings = this.getEditorSettings( settings, capabilities );
 
 		return (

package/src/components/provider/use-block-editor-settings.js

@@ -41,7 +41,9 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 		const isWeb = Platform.OS === 'web';
 		const { canUser, getEntityRecord } = select( coreStore );
 
-		const siteSettings = getEntityRecord( 'root', 'site' );
+		const siteSettings = canUser( 'read', 'settings' )
+			? getEntityRecord( 'root', 'site' )
+			: undefined;
 
 		return {
 			canUseUnfilteredHTML: canUserUseUnfilteredHTML(),
@@ -136,6 +138,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 				'generateAnchors',
 				'hasFixedToolbar',
 				'hasReducedUI',
+				'hasInlineToolbar',
 				'imageDefaultSize',
 				'imageDimensions',
 				'imageEditing',

package/src/components/table-of-contents/panel.js

@@ -9,6 +9,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import WordCount from '../word-count';
+import TimeToRead from '../time-to-read';
 import DocumentOutline from '../document-outline';
 import CharacterCount from '../character-count';
 
@@ -38,6 +39,10 @@ function TableOfContentsPanel( { hasOutlineItemsDisabled, onRequestClose } ) {
 				tabIndex="0"
 			>
 				<ul role="list" className="table-of-contents__counts">
+					<li className="table-of-contents__count">
+						{ __( 'Words' ) }
+						<WordCount />
+					</li>
 					<li className="table-of-contents__count">
 						{ __( 'Characters' ) }
 						<span className="table-of-contents__number">
@@ -45,8 +50,8 @@ function TableOfContentsPanel( { hasOutlineItemsDisabled, onRequestClose } ) {
 						</span>
 					</li>
 					<li className="table-of-contents__count">
-						{ __( 'Words' ) }
-						<WordCount />
+						{ __( 'Time to read' ) }
+						<TimeToRead />
 					</li>
 					<li className="table-of-contents__count">
 						{ __( 'Headings' ) }

package/src/components/time-to-read/index.js

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { _x, _n, __, sprintf } from '@wordpress/i18n';
+import { count as wordCount } from '@wordpress/wordcount';
+import { createInterpolateElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+/**
+ * Average reading rate - based on average taken from
+ * https://irisreading.com/average-reading-speed-in-various-languages/
+ * (Characters/minute used for Chinese rather than words).
+ *
+ * @type {number} A rough estimate of the average reading rate across multiple languages.
+ */
+const AVERAGE_READING_RATE = 189;
+
+export default function TimeToRead() {
+	const content = useSelect(
+		( select ) => select( editorStore ).getEditedPostAttribute( 'content' ),
+		[]
+	);
+
+	/*
+	 * translators: If your word count is based on single characters (e.g. East Asian characters),
+	 * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.
+	 * Do not translate into your own language.
+	 */
+	const wordCountType = _x( 'words', 'Word count type. Do not translate!' );
+	const minutesToRead = Math.round(
+		wordCount( content, wordCountType ) / AVERAGE_READING_RATE
+	);
+	const minutesToReadString =
+		minutesToRead === 0
+			? createInterpolateElement( __( '<span>< 1</span> minute' ), {
+					span: <span className="table-of-contents__number" />,
+			  } )
+			: createInterpolateElement(
+					sprintf(
+						/* translators: %s is the number of minutes the post will take to read. */
+						_n(
+							'<span>%d</span> minute',
+							'<span>%d</span> minutes',
+							minutesToRead
+						),
+						minutesToRead
+					),
+					{
+						span: <span className="table-of-contents__number" />,
+					}
+			  );
+
+	return <span className="time-to-read">{ minutesToReadString }</span>;
+}

package/src/store/actions.js

@@ -250,10 +250,12 @@ export const trashPost =
 			.resolveSelect( coreStore )
 			.getPostType( postTypeSlug );
 		registry.dispatch( noticesStore ).removeNotice( TRASH_POST_NOTICE_ID );
+		const { rest_base: restBase, rest_namespace: restNamespace = 'wp/v2' } =
+			postType;
 		try {
 			const post = select.getCurrentPost();
 			await apiFetch( {
-				path: `/wp/v2/${ postType.rest_base }/${ post.id }`,
+				path: `/${ restNamespace }/${ restBase }/${ post.id }`,
 				method: 'DELETE',
 			} );
 

package/src/store/reducer.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { omit, keys, isEqual } from 'lodash';
+import { omit, isEqual } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -39,7 +39,7 @@ export function getPostRawValue( value ) {
  * @return {boolean} Whether the two objects have the same keys.
  */
 export function hasSameKeys( a, b ) {
-	return isEqual( keys( a ), keys( b ) );
+	return isEqual( Object.keys( a ), Object.keys( b ) );
 }
 
 /**

package/src/store/selectors.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, get, has, isString, includes, some } from 'lodash';
+import { find, get, has, includes, some } from 'lodash';
 import createSelector from 'rememo';
 
 /**
@@ -534,7 +534,7 @@ export function isEditedPostEmpty( state ) {
 
 	if ( blocks.length ) {
 		// Pierce the abstraction of the serializer in knowing that blocks are
-		// joined with with newlines such that even if every individual block
+		// joined with newlines such that even if every individual block
 		// produces an empty save result, the serialized content is non-empty.
 		if ( blocks.length > 1 ) {
 			return false;
@@ -1605,10 +1605,9 @@ export function __experimentalGetTemplateInfo( state, template ) {
 	const { title: defaultTitle, description: defaultDescription } =
 		__experimentalGetDefaultTemplateType( state, slug );
 
-	const templateTitle = isString( title ) ? title : title?.rendered;
-	const templateDescription = isString( description )
-		? description
-		: description?.raw;
+	const templateTitle = typeof title === 'string' ? title : title?.rendered;
+	const templateDescription =
+		typeof description === 'string' ? description : description?.raw;
 	const templateIcon =
 		__experimentalGetDefaultTemplatePartAreas( state ).find(
 			( item ) => area === item.area