@wordpress/editor 12.19.0 → 12.21.0

package/src/components/entities-saved-states/entity-type-list.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { some } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -67,8 +62,7 @@ export default function EntityTypeList( {
 						key={ record.key || record.property }
 						record={ record }
 						checked={
-							! some(
-								unselectedEntities,
+							! unselectedEntities.some(
 								( elt ) =>
 									elt.kind === record.kind &&
 									elt.name === record.name &&

package/src/components/entities-saved-states/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { some, groupBy } from 'lodash';
+import { groupBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -127,8 +127,7 @@ export default function EntitiesSavedStates( { close } ) {
 	const saveCheckedEntities = () => {
 		const entitiesToSave = dirtyEntityRecords.filter(
 			( { kind, name, key, property } ) => {
-				return ! some(
-					unselectedEntities,
+				return ! unselectedEntities.some(
 					( elt ) =>
 						elt.kind === kind &&
 						elt.name === name &&

package/src/components/index.js

@@ -72,6 +72,8 @@ export { default as TableOfContents } from './table-of-contents';
 export { default as ThemeSupportCheck } from './theme-support-check';
 export { default as UnsavedChangesWarning } from './unsaved-changes-warning';
 export { default as WordCount } from './word-count';
+export { default as TimeToRead } from './time-to-read';
+export { default as CharacterCount } from './character-count';
 
 // State Related Components.
 export { default as EditorProvider } from './provider';

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

@@ -19,6 +19,7 @@ function PostComments( { commentStatus = 'open', ...props } ) {
 
 	return (
 		<CheckboxControl
+			__nextHasNoMarginBottom
 			label={ __( 'Allow comments' ) }
 			checked={ commentStatus === 'open' }
 			onChange={ onToggleComments }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, includes } from 'lodash';
+import { find } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -66,7 +66,7 @@ export default function PostFormat() {
 		// Ensure current format is always in the set.
 		// The current format may not be a format supported by the theme.
 		return (
-			includes( supportedFormats, format.id ) || postFormat === format.id
+			supportedFormats?.includes( format.id ) || postFormat === format.id
 		);
 	} );
 	const suggestion = find(

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

@@ -21,6 +21,7 @@ export function PostPendingStatus( { status, onUpdateStatus } ) {
 	return (
 		<PostPendingStatusCheck>
 			<CheckboxControl
+				__nextHasNoMarginBottom
 				label={ __( 'Pending review' ) }
 				checked={ status === 'pending' }
 				onChange={ togglePendingStatus }

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

@@ -19,6 +19,7 @@ function PostPingbacks( { pingStatus = 'open', ...props } ) {
 
 	return (
 		<CheckboxControl
+			__nextHasNoMarginBottom
 			label={ __( 'Allow pingbacks & trackbacks' ) }
 			checked={ pingStatus === 'open' }
 			onChange={ onTogglePingback }

package/src/components/post-publish-button/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, some } from 'lodash';
+import { get } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -34,12 +34,22 @@ export class PostPublishButton extends Component {
 			entitiesSavedStatesCallback: false,
 		};
 	}
+
 	componentDidMount() {
 		if ( this.props.focusOnMount ) {
-			this.buttonNode.current.focus();
+			// This timeout is necessary to make sure the `useEffect` hook of
+			// `useFocusReturn` gets the correct element (the button that opens the
+			// PostPublishPanel) otherwise it will get this button.
+			this.timeoutID = setTimeout( () => {
+				this.buttonNode.current.focus();
+			}, 0 );
 		}
 	}
 
+	componentWillUnmount() {
+		clearTimeout( this.timeoutID );
+	}
+
 	createOnClick( callback ) {
 		return ( ...args ) => {
 			const { hasNonPostEntityChanges, setEntitiesSavedStatesCallback } =
@@ -77,8 +87,7 @@ export class PostPublishButton extends Component {
 		this.setState( { entitiesSavedStatesCallback: false }, () => {
 			if (
 				savedEntities &&
-				some(
-					savedEntities,
+				savedEntities.some(
 					( elt ) =>
 						elt.kind === 'postType' &&
 						elt.name === postType &&

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

@@ -125,6 +125,7 @@ export class PostPublishPanel extends Component {
 				</div>
 				<div className="editor-post-publish-panel__footer">
 					<CheckboxControl
+						__nextHasNoMarginBottom
 						label={ __( 'Always show pre-publish checks.' ) }
 						checked={ isPublishSidebarEnabled }
 						onChange={ onTogglePublishSidebar }

package/src/components/post-publish-panel/maybe-category-panel.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { some } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -34,7 +29,7 @@ function MaybeCategoryPanel() {
 		);
 		const postTypeSupportsCategories =
 			categoriesTaxonomy &&
-			some( categoriesTaxonomy.types, ( type ) => type === postType );
+			categoriesTaxonomy.types.some( ( type ) => type === postType );
 		const categories =
 			categoriesTaxonomy &&
 			select( editorStore ).getEditedPostAttribute(

package/src/components/post-publish-panel/maybe-post-format-panel.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, get, includes } from 'lodash';
+import { find, get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -19,7 +19,7 @@ import { store as editorStore } from '../../store';
 
 const getSuggestion = ( supportedFormats, suggestedPostFormat ) => {
 	const formats = POST_FORMATS.filter( ( format ) =>
-		includes( supportedFormats, format.id )
+		supportedFormats?.includes( format.id )
 	);
 	return find( formats, ( format ) => format.id === suggestedPostFormat );
 };

package/src/components/post-publish-panel/maybe-tags-panel.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { some } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -79,7 +74,7 @@ export default compose(
 			areTagsFetched: tagsTaxonomy !== undefined,
 			isPostTypeSupported:
 				tagsTaxonomy &&
-				some( tagsTaxonomy.types, ( type ) => type === postType ),
+				tagsTaxonomy.types.some( ( type ) => type === postType ),
 			hasTags: tags && tags.length,
 		};
 	} ),

package/src/components/post-publish-panel/test/__snapshots__/index.js.snap

@@ -31,6 +31,10 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
   padding: 0;
 }
 
+.components-panel__row .emotion-8 {
+  margin-bottom: inherit;
+}
+
 <div>
   <div
     class="editor-post-publish-panel"
@@ -141,7 +145,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
         class="components-base-control components-checkbox-control emotion-0 emotion-1"
       >
         <div
-          class="components-base-control__field emotion-2 emotion-3"
+          class="components-base-control__field emotion-8 emotion-3"
         >
           <span
             class="components-checkbox-control__input-container"
@@ -197,6 +201,10 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
   padding: 0;
 }
 
+.components-panel__row .emotion-8 {
+  margin-bottom: inherit;
+}
+
 <div>
   <div
     class="editor-post-publish-panel"
@@ -307,7 +315,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
         class="components-base-control components-checkbox-control emotion-0 emotion-1"
       >
         <div
-          class="components-base-control__field emotion-2 emotion-3"
+          class="components-base-control__field emotion-8 emotion-3"
         >
           <span
             class="components-checkbox-control__input-container"
@@ -345,10 +353,6 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -472,10 +476,6 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -609,7 +609,7 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
   display: inline-block;
   margin: 5px 11px 0;
   position: relative;
-  color: var( --wp-admin-theme-color );
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   overflow: visible;
 }
 
@@ -641,10 +641,6 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
   box-sizing: inherit;
 }
 
-.emotion-8 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-8 {
   margin-bottom: inherit;
 }

package/src/components/post-saved-state/index.js

@@ -151,10 +151,22 @@ export default function PostSavedState( {
 					: undefined
 			}
 			onClick={ isDisabled ? undefined : () => savePost() }
-			shortcut={ displayShortcut.primary( 's' ) }
-			variant={ isLargeViewport ? 'tertiary' : undefined }
+			/*
+			 * We want the tooltip to show the keyboard shortcut only when the
+			 * button does something, i.e. when it's not disabled.
+			 */
+			shortcut={ isDisabled ? undefined : displayShortcut.primary( 's' ) }
+			/*
+			 * Displaying the keyboard shortcut conditionally makes the tooltip
+			 * itself show conditionally. This would trigger a full-rerendering
+			 * of the button that we want to avoid. By setting `showTooltip`,
+			 & the tooltip is always rendered even when there's no keyboard shortcut.
+			 */
+			showTooltip
+			variant="tertiary"
 			icon={ isLargeViewport ? undefined : cloudUpload }
-			label={ showIconLabels ? undefined : label }
+			// Make sure the aria-label has always a value, as the default `text` is undefined on small screens.
+			label={ text || label }
 			aria-disabled={ isDisabled }
 		>
 			{ isSavedState && <Icon icon={ isSaved ? check : cloud } /> }

package/src/components/post-saved-state/style.scss

@@ -38,7 +38,3 @@
 .editor-post-save-draft.has-text.has-icon svg {
 	margin-right: 0;
 }
-
-:root[dir="rtl"] .editor-post-saved-state.has-text.has-icon {
-	justify-content: right;
-}

package/src/components/post-saved-state/test/__snapshots__/index.js.snap

@@ -4,7 +4,7 @@ exports[`PostSavedState returns a disabled button if the post is not saveable 1`
 <button
   aria-disabled="true"
   aria-label="Save draft"
-  class="components-button has-icon"
+  class="components-button is-tertiary has-icon"
   type="button"
 >
   <svg

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { parseISO, endOfMonth, startOfMonth } from 'date-fns';
+
 /**
  * WordPress dependencies
  */
@@ -12,15 +17,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
-function getDayOfTheMonth( date = new Date(), firstDay = true ) {
-	const d = new Date( date );
-	return new Date(
-		d.getFullYear(),
-		d.getMonth() + ( firstDay ? 0 : 1 ),
-		firstDay ? 1 : 0
-	).toISOString();
-}
-
 export default function PostSchedule( { onClose } ) {
 	const { postDate, postType } = useSelect(
 		( select ) => ( {
@@ -34,7 +30,7 @@ export default function PostSchedule( { onClose } ) {
 	const onUpdateDate = ( date ) => editPost( { date } );
 
 	const [ previewedMonth, setPreviewedMonth ] = useState(
-		getDayOfTheMonth( postDate )
+		startOfMonth( new Date( postDate ) )
 	);
 
 	// Pick up published and schduled site posts.
@@ -42,22 +38,20 @@ export default function PostSchedule( { onClose } ) {
 		( select ) =>
 			select( coreStore ).getEntityRecords( 'postType', postType, {
 				status: 'publish,future',
-				after: getDayOfTheMonth( previewedMonth ),
-				before: getDayOfTheMonth( previewedMonth, false ),
+				after: startOfMonth( previewedMonth ).toISOString(),
+				before: endOfMonth( previewedMonth ).toISOString(),
 				exclude: [ select( editorStore ).getCurrentPostId() ],
+				per_page: 100,
+				_fields: 'id,date',
 			} ),
 		[ previewedMonth, postType ]
 	);
 
 	const events = useMemo(
 		() =>
-			( eventsByPostType || [] ).map(
-				( { title, type, date: eventDate } ) => ( {
-					title: title?.rendered,
-					type,
-					date: new Date( eventDate ),
-				} )
-			),
+			( eventsByPostType || [] ).map( ( { date: eventDate } ) => ( {
+				date: new Date( eventDate ),
+			} ) ),
 		[ eventsByPostType ]
 	);
 
@@ -80,7 +74,9 @@ export default function PostSchedule( { onClose } ) {
 			onChange={ onUpdateDate }
 			is12Hour={ is12HourTime }
 			events={ events }
-			onMonthPreviewed={ setPreviewedMonth }
+			onMonthPreviewed={ ( date ) =>
+				setPreviewedMonth( parseISO( date ) )
+			}
 			onClose={ onClose }
 		/>
 	);

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

@@ -16,6 +16,7 @@ export function PostSticky( { onUpdateSticky, postSticky = false } ) {
 	return (
 		<PostStickyCheck>
 			<CheckboxControl
+				__nextHasNoMarginBottom
 				label={ __( 'Stick to the top of the blog' ) }
 				checked={ postSticky }
 				onChange={ () => onUpdateSticky( ! postSticky ) }

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { some, includes } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -16,8 +11,8 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '../../store';
 
 export function PostTaxonomiesCheck( { postType, taxonomies, children } ) {
-	const hasTaxonomies = some( taxonomies, ( taxonomy ) =>
-		includes( taxonomy.types, postType )
+	const hasTaxonomies = taxonomies?.some( ( taxonomy ) =>
+		taxonomy.types.includes( postType )
 	);
 	if ( ! hasTaxonomies ) {
 		return null;

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

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { escape as escapeString, find, get } from 'lodash';
+import { find, get } from 'lodash';
+import escapeHtml from 'escape-html';
 
 /**
  * WordPress dependencies
@@ -55,7 +56,7 @@ const termNamesToIds = ( names, terms ) => {
 
 // Tries to create a term or fetch it if it already exists.
 function findOrCreateTerm( termName, restBase, namespace ) {
-	const escapedTermName = escapeString( termName );
+	const escapedTermName = escapeHtml( termName );
 
 	return apiFetch( {
 		path: `/${ namespace }/${ restBase }`,

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, get, some, unescape as unescapeString, without } from 'lodash';
+import { find, get, unescape as unescapeString } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -258,7 +258,7 @@ export function HierarchicalTermSelector( { slug } ) {
 	const onChange = ( termId ) => {
 		const hasTerm = terms.includes( termId );
 		const newTerms = hasTerm
-			? without( terms, termId )
+			? terms.filter( ( id ) => id !== termId )
 			: [ ...terms, termId ];
 		onUpdateTerms( newTerms );
 	};
@@ -290,7 +290,7 @@ export function HierarchicalTermSelector( { slug } ) {
 		const existingTerm = findTerm( availableTerms, formParent, formName );
 		if ( existingTerm ) {
 			// If the term we are adding exists but is not selected select it.
-			if ( ! some( terms, ( term ) => term === existingTerm.id ) ) {
+			if ( ! terms.some( ( term ) => term === existingTerm.id ) ) {
 				onUpdateTerms( [ ...terms, existingTerm.id ] );
 			}
 
@@ -358,6 +358,7 @@ export function HierarchicalTermSelector( { slug } ) {
 					className="editor-post-taxonomies__hierarchical-terms-choice"
 				>
 					<CheckboxControl
+						__nextHasNoMarginBottom
 						checked={ terms.indexOf( term.id ) !== -1 }
 						onChange={ () => {
 							const termId = parseInt( term.id, 10 );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, includes } from 'lodash';
+import { filter } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -26,7 +26,7 @@ export function PostTaxonomies( {
 	taxonomyWrapper = identity,
 } ) {
 	const availableTaxonomies = filter( taxonomies, ( taxonomy ) =>
-		includes( taxonomy.types, postType )
+		taxonomy.types.includes( postType )
 	);
 	const visibleTaxonomies = filter(
 		availableTaxonomies,

package/src/components/post-text-editor/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -117,7 +117,9 @@ describe( 'PostTextEditor', () => {
 		await user.clear( textarea );
 
 		// Stop editing.
-		textarea.blur();
+		act( () => {
+			textarea.blur();
+		} );
 
 		expect( mockResetEditorBlocks ).toHaveBeenCalledWith( [] );
 	} );
@@ -147,7 +149,9 @@ describe( 'PostTextEditor', () => {
 
 		rerender( <PostTextEditor /> );
 
-		textarea.blur();
+		act( () => {
+			textarea.blur();
+		} );
 
 		expect( textarea ).toHaveValue( 'Goodbye World' );
 	} );

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

@@ -26,6 +26,7 @@ import {
 	insert,
 } from '@wordpress/rich-text';
 import { useMergeRefs } from '@wordpress/compose';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -166,7 +167,7 @@ function PostTitle( _, forwardedRef ) {
 				( firstBlock.name === 'core/heading' ||
 					firstBlock.name === 'core/paragraph' )
 			) {
-				onUpdate( firstBlock.attributes.content );
+				onUpdate( stripHTML( firstBlock.attributes.content ) );
 				onInsertBlockAfter( content.slice( 1 ) );
 			} else {
 				onInsertBlockAfter( content );
@@ -176,7 +177,10 @@ function PostTitle( _, forwardedRef ) {
 				...create( { html: title } ),
 				...selection,
 			};
-			const newValue = insert( value, create( { html: content } ) );
+			const newValue = insert(
+				value,
+				create( { html: stripHTML( content ) } )
+			);
 			onUpdate( toHTMLString( { value: newValue } ) );
 			setSelection( {
 				start: newValue.start,

package/src/components/post-type-support-check/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { some, castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -30,10 +25,9 @@ import { store as editorStore } from '../../store';
 export function PostTypeSupportCheck( { postType, children, supportKeys } ) {
 	let isSupported = true;
 	if ( postType ) {
-		isSupported = some(
-			castArray( supportKeys ),
-			( key ) => !! postType.supports[ key ]
-		);
+		isSupported = (
+			Array.isArray( supportKeys ) ? supportKeys : [ supportKeys ]
+		 ).some( ( key ) => !! postType.supports[ key ] );
 	}
 
 	if ( ! isSupported ) {

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray, includes, get, some } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -20,14 +20,16 @@ export function ThemeSupportCheck( {
 	postType,
 	supportKeys,
 } ) {
-	const isSupported = some( castArray( supportKeys ), ( key ) => {
+	const isSupported = (
+		Array.isArray( supportKeys ) ? supportKeys : [ supportKeys ]
+	 ).some( ( key ) => {
 		const supported = get( themeSupports, [ key ], false );
 		// 'post-thumbnails' can be boolean or an array of post types.
 		// 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 && Array.isArray( supported ) ) {
-			return includes( supported, postType );
+			return supported.includes( postType );
 		}
 		return supported;
 	} );

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

@@ -38,7 +38,7 @@ export default function TimeToRead() {
 	const minutesToReadString =
 		minutesToRead === 0
 			? createInterpolateElement( __( '<span>< 1</span> minute' ), {
-					span: <span className="table-of-contents__number" />,
+					span: <span />,
 			  } )
 			: createInterpolateElement(
 					sprintf(
@@ -51,7 +51,7 @@ export default function TimeToRead() {
 						minutesToRead
 					),
 					{
-						span: <span className="table-of-contents__number" />,
+						span: <span />,
 					}
 			  );
 

package/src/store/selectors.js

@@ -95,16 +95,7 @@ export function isEditedPostNew( state ) {
  */
 export function hasChangedContent( state ) {
 	const edits = getPostEdits( state );
-
-	return (
-		'blocks' in edits ||
-		// `edits` is intended to contain only values which are different from
-		// the saved post, so the mere presence of a property is an indicator
-		// that the value is different than what is known to be saved. While
-		// content in Visual mode is represented by the blocks state, in Text
-		// mode it is tracked by `edits.content`.
-		'content' in edits
-	);
+	return 'content' in edits;
 }
 
 /**