@wordpress/editor 12.9.0 → 12.12.0

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

@@ -37,37 +37,27 @@ function PostTitle( _, forwardedRef ) {
 	const ref = useRef();
 	const [ isSelected, setIsSelected ] = useState( false );
 	const { editPost } = useDispatch( editorStore );
-	const {
-		insertDefaultBlock,
-		clearSelectedBlock,
-		insertBlocks,
-	} = useDispatch( blockEditorStore );
-	const {
-		isCleanNewPost,
-		title,
-		placeholder,
-		isFocusMode,
-		hasFixedToolbar,
-	} = useSelect( ( select ) => {
-		const {
-			getEditedPostAttribute,
-			isCleanNewPost: _isCleanNewPost,
-		} = select( editorStore );
-		const { getSettings } = select( blockEditorStore );
-		const {
-			titlePlaceholder,
-			focusMode,
-			hasFixedToolbar: _hasFixedToolbar,
-		} = getSettings();
-
-		return {
-			isCleanNewPost: _isCleanNewPost(),
-			title: getEditedPostAttribute( 'title' ),
-			placeholder: titlePlaceholder,
-			isFocusMode: focusMode,
-			hasFixedToolbar: _hasFixedToolbar,
-		};
-	}, [] );
+	const { insertDefaultBlock, clearSelectedBlock, insertBlocks } =
+		useDispatch( blockEditorStore );
+	const { isCleanNewPost, title, placeholder, isFocusMode, hasFixedToolbar } =
+		useSelect( ( select ) => {
+			const { getEditedPostAttribute, isCleanNewPost: _isCleanNewPost } =
+				select( editorStore );
+			const { getSettings } = select( blockEditorStore );
+			const {
+				titlePlaceholder,
+				focusMode,
+				hasFixedToolbar: _hasFixedToolbar,
+			} = getSettings();
+
+			return {
+				isCleanNewPost: _isCleanNewPost(),
+				title: getEditedPostAttribute( 'title' ),
+				placeholder: titlePlaceholder,
+				isFocusMode: focusMode,
+				hasFixedToolbar: _hasFixedToolbar,
+			};
+		}, [] );
 
 	useImperativeHandle( forwardedRef, () => ( {
 		focus: () => {

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

@@ -169,19 +169,15 @@ class PostTitle extends Component {
 
 export default compose(
 	withSelect( ( select ) => {
-		const { isPostTitleSelected, getEditedPostAttribute } = select(
-			editorStore
-		);
-		const {
-			getSelectedBlockClientId,
-			getBlockRootClientId,
-			getSettings,
-		} = select( blockEditorStore );
+		const { isPostTitleSelected, getEditedPostAttribute } =
+			select( editorStore );
+		const { getSelectedBlockClientId, getBlockRootClientId, getSettings } =
+			select( blockEditorStore );
 
 		const selectedId = getSelectedBlockClientId();
 		const selectionIsNested = !! getBlockRootClientId( selectedId );
-		const globalStyles = getSettings()?.__experimentalGlobalStylesBaseStyles
-			?.color;
+		const globalStyles =
+			getSettings()?.__experimentalGlobalStylesBaseStyles?.color;
 
 		return {
 			postType: getEditedPostAttribute( 'type' ),
@@ -192,13 +188,11 @@ export default compose(
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
-		const { undo, redo, togglePostTitleSelection } = dispatch(
-			editorStore
-		);
+		const { undo, redo, togglePostTitleSelection } =
+			dispatch( editorStore );
 
-		const { clearSelectedBlock, insertDefaultBlock } = dispatch(
-			blockEditorStore
-		);
+		const { clearSelectedBlock, insertDefaultBlock } =
+			dispatch( blockEditorStore );
 
 		return {
 			onEnterPress() {

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/check.js

@@ -18,9 +18,8 @@ function PostTrashCheck( { isNew, postId, canUserDelete, children } ) {
 }
 
 export default withSelect( ( select ) => {
-	const { isEditedPostNew, getCurrentPostId, getCurrentPostType } = select(
-		editorStore
-	);
+	const { isEditedPostNew, getCurrentPostId, getCurrentPostType } =
+		select( editorStore );
 	const { getPostType, canUser } = select( coreStore );
 	const postId = getCurrentPostId();
 	const postType = getPostType( getCurrentPostType() );

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

@@ -6,11 +6,10 @@ import { useState } from '@wordpress/element';
 import {
 	VisuallyHidden,
 	__experimentalConfirmDialog as ConfirmDialog,
-	Button,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { close as closeIcon } from '@wordpress/icons';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -30,9 +29,8 @@ export default function PostVisibility( { onClose } ) {
 	const { editPost, savePost } = useDispatch( editorStore );
 
 	const [ hasPassword, setHasPassword ] = useState( !! password );
-	const [ showPrivateConfirmDialog, setShowPrivateConfirmDialog ] = useState(
-		false
-	);
+	const [ showPrivateConfirmDialog, setShowPrivateConfirmDialog ] =
+		useState( false );
 
 	const setPublic = () => {
 		editPost( {
@@ -70,20 +68,16 @@ export default function PostVisibility( { onClose } ) {
 	};
 
 	return (
-		<>
-			<Button
-				className="editor-post-visibility__close"
-				isSmall
-				icon={ closeIcon }
-				onClick={ onClose }
+		<div className="editor-post-visibility">
+			<InspectorPopoverHeader
+				title={ __( 'Visibility' ) }
+				help={ __( 'Control how this post is viewed.' ) }
+				onClose={ onClose }
 			/>
 			<fieldset className="editor-post-visibility__fieldset">
-				<legend className="editor-post-visibility__legend">
+				<VisuallyHidden as="legend">
 					{ __( 'Visibility' ) }
-				</legend>
-				<p className="editor-post-visibility__description">
-					{ __( 'Control how this post is viewed.' ) }
-				</p>
+				</VisuallyHidden>
 				<PostVisibilityChoice
 					instanceId={ instanceId }
 					value="public"
@@ -134,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/post-visibility/style.scss

@@ -1,21 +1,4 @@
-.editor-post-visibility__close {
-	position: absolute;
-	right: $grid-unit-20;
-	top: $grid-unit-20;
-}
-
 .editor-post-visibility__fieldset {
-	padding: $grid-unit-10;
-
-	.editor-post-visibility__legend {
-		font-weight: 600;
-		padding: 1em 0 0 0;
-	}
-
-	.editor-post-visibility__description {
-		margin-top: 0.5em;
-	}
-
 	.editor-post-visibility__radio[type="radio"] {
 		@include radio-control;
 		margin-top: 2px;

package/src/components/provider/index.js

@@ -34,9 +34,8 @@ function EditorProvider( {
 		return { postId: post.id, postType: post.type };
 	}, [ post.id, post.type ] );
 	const { selection, isReady } = useSelect( ( select ) => {
-		const { getEditorSelection, __unstableIsEditorReady } = select(
-			editorStore
-		);
+		const { getEditorSelection, __unstableIsEditorReady } =
+			select( editorStore );
 		return {
 			isReady: __unstableIsEditorReady(),
 			selection: getEditorSelection(),

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

@@ -130,9 +130,8 @@ class NativeEditorProvider extends Component {
 				const blockName = 'core/' + payload.mediaType;
 				const newBlock = createBlock( blockName, {
 					id: payload.mediaId,
-					[ payload.mediaType === 'image'
-						? 'url'
-						: 'src' ]: payload.mediaUrl,
+					[ payload.mediaType === 'image' ? 'url' : 'src' ]:
+						payload.mediaUrl,
 				} );
 
 				const indexAfterSelected = this.props.selectedBlockIndex + 1;
@@ -143,14 +142,16 @@ class NativeEditorProvider extends Component {
 			}
 		);
 
-		this.subscriptionParentUpdateEditorSettings = subscribeUpdateEditorSettings(
-			( { galleryWithImageBlocks, ...editorSettings } ) => {
-				if ( typeof galleryWithImageBlocks === 'boolean' ) {
-					window.wp.galleryBlockV2Enabled = galleryWithImageBlocks;
+		this.subscriptionParentUpdateEditorSettings =
+			subscribeUpdateEditorSettings(
+				( { galleryWithImageBlocks, ...editorSettings } ) => {
+					if ( typeof galleryWithImageBlocks === 'boolean' ) {
+						window.wp.galleryBlockV2Enabled =
+							galleryWithImageBlocks;
+					}
+					updateSettings( this.getThemeColors( editorSettings ) );
 				}
-				updateSettings( this.getThemeColors( editorSettings ) );
-			}
-		);
+			);
 
 		this.subscriptionParentUpdateCapabilities = subscribeUpdateCapabilities(
 			( payload ) => {
@@ -318,13 +319,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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { pick, defaultTo, unionBy } from 'lodash';
+import { pick, unionBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -52,10 +52,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 						{ per_page: -1 }
 				  )
 				: [], // Reusable blocks are fetched in the native version of this hook.
-			hasUploadPermissions: defaultTo(
-				canUser( 'create', 'media' ),
-				true
-			),
+			hasUploadPermissions: canUser( 'create', 'media' ) ?? true,
 			userCanCreatePages: canUser( 'create', 'pages' ),
 			pageOnFront: siteSettings?.page_on_front,
 		};
@@ -71,9 +68,8 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 	const { restBlockPatterns, restBlockPatternCategories } = useSelect(
 		( select ) => ( {
 			restBlockPatterns: select( coreStore ).getBlockPatterns(),
-			restBlockPatternCategories: select(
-				coreStore
-			).getBlockPatternCategories(),
+			restBlockPatternCategories:
+				select( coreStore ).getBlockPatternCategories(),
 		} ),
 		[]
 	);

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/template-validation-notice/index.js

@@ -53,9 +53,8 @@ export default compose( [
 		isValid: select( blockEditorStore ).isValidTemplate(),
 	} ) ),
 	withDispatch( ( dispatch ) => {
-		const { setTemplateValidity, synchronizeTemplate } = dispatch(
-			blockEditorStore
-		);
+		const { setTemplateValidity, synchronizeTemplate } =
+			dispatch( blockEditorStore );
 		return {
 			resetTemplateValidity: () => setTemplateValidity( true ),
 			synchronizeTemplate,

package/src/components/theme-support-check/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray, includes, isArray, get, some } from 'lodash';
+import { castArray, includes, get, some } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -26,7 +26,7 @@ export function ThemeSupportCheck( {
 		// In the latter case, we need to verify `postType` exists
 		// within `supported`. If `postType` isn't passed, then the check
 		// should fail.
-		if ( 'post-thumbnails' === key && isArray( supported ) ) {
+		if ( 'post-thumbnails' === key && Array.isArray( supported ) ) {
 			return includes( supported, postType );
 		}
 		return supported;

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>;
+}