@wordpress/editor 12.18.0 → 12.20.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-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-preview-button/test/index.js

@@ -111,7 +111,7 @@ describe( 'PostPreviewButton', () => {
 	it( 'should not be disabled if post is saveable.', async () => {
 		render( <PostPreviewButton isSaveable postId={ 123 } /> );
 
-		expect( screen.getByRole( 'button' ) ).not.toBeDisabled();
+		expect( screen.getByRole( 'button' ) ).toBeEnabled();
 	} );
 
 	it( 'should set `href` to `previewLink` if `previewLink` is specified.', async () => {

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';
 
 /**
@@ -77,8 +77,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/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-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-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-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 ] );
 			}
 

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-taxonomies/most-used-terms.js

@@ -6,7 +6,7 @@ import { get } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import { BaseControl, Button } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -47,9 +47,12 @@ export default function MostUsedTerms( { onSelect, taxonomy } ) {
 
 	return (
 		<div className="editor-post-taxonomies__flat-term-most-used">
-			<h3 className="editor-post-taxonomies__flat-term-most-used-label">
+			<BaseControl.VisualLabel
+				as="h3"
+				className="editor-post-taxonomies__flat-term-most-used-label"
+			>
 				{ label }
-			</h3>
+			</BaseControl.VisualLabel>
 			{ /*
 			 * Disable reason: The `list` ARIA role is redundant but
 			 * Safari+VoiceOver won't announce the list otherwise.

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

@@ -38,8 +38,7 @@
 
 .editor-post-taxonomies__flat-term-most-used {
 	.editor-post-taxonomies__flat-term-most-used-label {
-		font-weight: 400;
-		margin-bottom: $grid-unit-15;
+		margin-bottom: $grid-unit-05;
 	}
 }
 

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

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import { act, create } from 'react-test-renderer';
-import Textarea from 'react-autosize-textarea';
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -38,6 +38,8 @@ jest.mock( '@wordpress/data/src/components/use-dispatch', () => {
 	};
 } );
 
+jest.useRealTimers();
+
 describe( 'PostTextEditor', () => {
 	beforeEach( () => {
 		useSelect.mockImplementation( () => 'Hello World' );
@@ -47,132 +49,110 @@ describe( 'PostTextEditor', () => {
 	} );
 
 	it( 'should render via the value from useSelect', () => {
-		let wrapper;
-
-		act( () => {
-			wrapper = create( <PostTextEditor /> );
-		} );
+		render( <PostTextEditor /> );
 
-		const textarea = wrapper.root.findByType( Textarea );
-		expect( textarea.props.value ).toBe( 'Hello World' );
+		expect( screen.getByLabelText( 'Type text or HTML' ) ).toHaveValue(
+			'Hello World'
+		);
 	} );
 
-	it( 'should render via the state value when edits made', () => {
-		let wrapper;
+	it( 'should render via the state value when edits made', async () => {
+		const user = userEvent.setup();
+		render( <PostTextEditor /> );
 
-		act( () => {
-			wrapper = create( <PostTextEditor /> );
-		} );
+		const textarea = screen.getByLabelText( 'Type text or HTML' );
 
-		const textarea = wrapper.root.findByType( Textarea );
+		await user.clear( textarea );
+		await user.type( textarea, 'Hello Chicken' );
 
-		act( () =>
-			textarea.props.onChange( { target: { value: 'Hello Chicken' } } )
-		);
-
-		expect( textarea.props.value ).toBe( 'Hello Chicken' );
+		expect( textarea ).toHaveValue( 'Hello Chicken' );
 		expect( mockEditPost ).toHaveBeenCalledWith( {
 			content: 'Hello Chicken',
 		} );
 	} );
 
-	it( 'should render via the state value when edits made, even if prop value changes', () => {
-		let wrapper;
+	it( 'should render via the state value when edits made, even if prop value changes', async () => {
+		const user = userEvent.setup();
+		const { rerender } = render( <PostTextEditor /> );
 
-		act( () => {
-			wrapper = create( <PostTextEditor /> );
-		} );
+		const textarea = screen.getByLabelText( 'Type text or HTML' );
 
-		const textarea = wrapper.root.findByType( Textarea );
-
-		act( () =>
-			textarea.props.onChange( { target: { value: 'Hello Chicken' } } )
-		);
+		await user.clear( textarea );
+		await user.type( textarea, 'Hello Chicken' );
 
 		useSelect.mockImplementation( () => 'Goodbye World' );
 
-		act( () => {
-			wrapper.update( <PostTextEditor /> );
-		} );
+		rerender( <PostTextEditor /> );
 
-		expect( textarea.props.value ).toBe( 'Hello Chicken' );
+		expect( textarea ).toHaveValue( 'Hello Chicken' );
 		expect( mockEditPost ).toHaveBeenCalledWith( {
 			content: 'Hello Chicken',
 		} );
 	} );
 
-	it( 'should render via the state value when edits made, even if prop value changes and state value empty', () => {
-		let wrapper;
+	it( 'should render via the state value when edits made, even if prop value changes and state value empty', async () => {
+		const user = userEvent.setup();
+		const { rerender } = render( <PostTextEditor /> );
 
-		act( () => {
-			wrapper = create( <PostTextEditor /> );
-		} );
+		const textarea = screen.getByLabelText( 'Type text or HTML' );
 
-		const textarea = wrapper.root.findByType( Textarea );
-		act( () => textarea.props.onChange( { target: { value: '' } } ) );
+		await user.clear( textarea );
 
 		useSelect.mockImplementation( () => 'Goodbye World' );
 
-		act( () => {
-			wrapper.update( <PostTextEditor /> );
-		} );
+		rerender( <PostTextEditor /> );
 
-		expect( textarea.props.value ).toBe( '' );
+		expect( textarea ).toHaveValue( '' );
 		expect( mockEditPost ).toHaveBeenCalledWith( {
 			content: '',
 		} );
 	} );
 
-	it( 'calls onPersist after changes made and user stops editing', () => {
-		let wrapper;
+	it( 'calls onPersist after changes made and user stops editing', async () => {
+		const user = userEvent.setup();
+		render( <PostTextEditor /> );
 
-		act( () => {
-			wrapper = create( <PostTextEditor /> );
-		} );
+		const textarea = screen.getByLabelText( 'Type text or HTML' );
 
-		const textarea = wrapper.root.findByType( Textarea );
+		await user.clear( textarea );
 
-		act( () => textarea.props.onChange( { target: { value: '' } } ) );
-		act( () => textarea.props.onBlur() );
+		// Stop editing.
+		act( () => {
+			textarea.blur();
+		} );
 
 		expect( mockResetEditorBlocks ).toHaveBeenCalledWith( [] );
 	} );
 
 	it( 'does not call onPersist after user stops editing without changes', () => {
-		let wrapper;
+		render( <PostTextEditor /> );
 
-		act( () => {
-			wrapper = create( <PostTextEditor /> );
-		} );
-
-		const textarea = wrapper.root.findByType( Textarea );
-		act( () => textarea.props.onBlur() );
+		// Stop editing.
+		screen.getByLabelText( 'Type text or HTML' ).blur();
 
 		expect( mockResetEditorBlocks ).not.toHaveBeenCalled();
 	} );
 
-	it( 'resets to prop value after user stops editing', () => {
+	it( 'resets to prop value after user stops editing', async () => {
 		// This isn't the most realistic case, since typically we'd assume the
 		// parent renderer to pass the value as it had received onPersist. The
 		// test here is more an edge case to stress that it's intentionally
 		// differentiating between state and prop values.
-		let wrapper;
+		const user = userEvent.setup();
+		const { rerender } = render( <PostTextEditor /> );
 
-		act( () => {
-			wrapper = create( <PostTextEditor /> );
-		} );
+		const textarea = screen.getByLabelText( 'Type text or HTML' );
 
-		const textarea = wrapper.root.findByType( Textarea );
-		act( () => textarea.props.onChange( { target: { value: '' } } ) );
+		await user.clear( textarea );
 
 		useSelect.mockImplementation( () => 'Goodbye World' );
 
+		rerender( <PostTextEditor /> );
+
 		act( () => {
-			wrapper.update( <PostTextEditor /> );
+			textarea.blur();
 		} );
 
-		act( () => textarea.props.onBlur() );
-
-		expect( textarea.props.value ).toBe( 'Goodbye World' );
+		expect( textarea ).toHaveValue( 'Goodbye World' );
 	} );
 } );

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/post-type-support-check/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { create } from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,27 +10,26 @@ import { PostTypeSupportCheck } from '../';
 
 describe( 'PostTypeSupportCheck', () => {
 	it( 'renders its children when post type is not known', () => {
-		let postType;
-		const tree = create(
-			<PostTypeSupportCheck postType={ postType } supportKeys="title">
+		const { container } = render(
+			<PostTypeSupportCheck postType={ undefined } supportKeys="title">
 				Supported
 			</PostTypeSupportCheck>
 		);
 
-		expect( tree.toJSON() ).toBe( 'Supported' );
+		expect( container ).toHaveTextContent( 'Supported' );
 	} );
 
 	it( 'does not render its children when post type is known and not supports', () => {
 		const postType = {
 			supports: {},
 		};
-		const tree = create(
+		const { container } = render(
 			<PostTypeSupportCheck postType={ postType } supportKeys="title">
 				Supported
 			</PostTypeSupportCheck>
 		);
 
-		expect( tree.toJSON() ).toBe( null );
+		expect( container ).not.toHaveTextContent( 'Supported' );
 	} );
 
 	it( 'renders its children when post type is known and supports', () => {
@@ -39,13 +38,13 @@ describe( 'PostTypeSupportCheck', () => {
 				title: true,
 			},
 		};
-		const tree = create(
+		const { container } = render(
 			<PostTypeSupportCheck postType={ postType } supportKeys="title">
 				Supported
 			</PostTypeSupportCheck>
 		);
 
-		expect( tree.toJSON() ).toBe( 'Supported' );
+		expect( container ).toHaveTextContent( 'Supported' );
 	} );
 
 	it( 'renders its children if some of keys supported', () => {
@@ -54,7 +53,7 @@ describe( 'PostTypeSupportCheck', () => {
 				title: true,
 			},
 		};
-		const tree = create(
+		const { container } = render(
 			<PostTypeSupportCheck
 				postType={ postType }
 				supportKeys={ [ 'title', 'thumbnail' ] }
@@ -63,14 +62,14 @@ describe( 'PostTypeSupportCheck', () => {
 			</PostTypeSupportCheck>
 		);
 
-		expect( tree.toJSON() ).toBe( 'Supported' );
+		expect( container ).toHaveTextContent( 'Supported' );
 	} );
 
 	it( 'does not render its children if none of keys supported', () => {
 		const postType = {
 			supports: {},
 		};
-		const tree = create(
+		const { container } = render(
 			<PostTypeSupportCheck
 				postType={ postType }
 				supportKeys={ [ 'title', 'thumbnail' ] }
@@ -79,6 +78,6 @@ describe( 'PostTypeSupportCheck', () => {
 			</PostTypeSupportCheck>
 		);
 
-		expect( tree.toJSON() ).toBe( null );
+		expect( container ).not.toHaveTextContent( 'Supported' );
 	} );
 } );