@wordpress/editor 12.11.0 → 12.14.0

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/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( () => {

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(),
@@ -127,6 +129,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 				'disableCustomColors',
 				'disableCustomFontSizes',
 				'disableCustomGradients',
+				'disableLayoutStyles',
 				'enableCustomLineHeight',
 				'enableCustomSpacing',
 				'enableCustomUnits',
@@ -136,6 +139,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/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

package/src/store/test/selectors.js

@@ -1599,7 +1599,7 @@ describe( 'selectors', () => {
 
 			for ( const variantField of fields ) {
 				for ( const constantField of fields.filter(
-					( f ) => ! f === variantField
+					( f ) => f !== variantField
 				) ) {
 					const state = {
 						editor: {

package/src/style.scss

@@ -14,6 +14,7 @@
 @import "./components/post-saved-state/style.scss";
 @import "./components/post-taxonomies/style.scss";
 @import "./components/post-text-editor/style.scss";
+@import "./components/post-url/style.scss";
 @import "./components/post-visibility/style.scss";
 @import "./components/post-title/style.scss";
 @import "./components/post-trash/style.scss";