@wordpress/editor 12.21.0 → 13.1.0

package/src/components/editor-help/index.native.js

@@ -57,7 +57,7 @@ const HELP_TOPICS = [
 	},
 ];
 
-function EditorHelpTopics( { close, isVisible, onClose } ) {
+function EditorHelpTopics( { close, isVisible, onClose, showSupport } ) {
 	const { postType } = useSelect( ( select ) => ( {
 		postType: select( editorStore ).getEditedPostAttribute( 'type' ),
 	} ) );
@@ -67,6 +67,20 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 			? __( 'How to edit your page' )
 			: __( 'How to edit your post' );
 
+	const supportSection = (
+		<>
+			<HelpSectionTitle>{ __( 'Get support' ) }</HelpSectionTitle>
+			<HelpGetSupportButton
+				title={ __( 'Contact support' ) }
+				onPress={ requestContactCustomerSupport }
+			/>
+			<HelpGetSupportButton
+				title={ __( 'More support options' ) }
+				onPress={ requestGotoCustomerSupportOptions }
+			/>
+		</>
+	);
+
 	return (
 		<BottomSheet
 			isVisible={ isVisible }
@@ -153,31 +167,8 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 														);
 													}
 												) }
-												{
-													<HelpSectionTitle>
-														{ __( 'Get support' ) }
-													</HelpSectionTitle>
-												}
-												{
-													<HelpGetSupportButton
-														title={ __(
-															'Contact support'
-														) }
-														onPress={
-															requestContactCustomerSupport
-														}
-													/>
-												}
-												{
-													<HelpGetSupportButton
-														title={ __(
-															'More support options'
-														) }
-														onPress={
-															requestGotoCustomerSupportOptions
-														}
-													/>
-												}
+												{ showSupport &&
+													supportSection }
 											</PanelBody>
 										</ScrollView>
 									);

package/src/components/editor-notices/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -17,14 +12,12 @@ import { store as noticesStore } from '@wordpress/notices';
 import TemplateValidationNotice from '../template-validation-notice';
 
 export function EditorNotices( { notices, onRemove } ) {
-	const dismissibleNotices = filter( notices, {
-		isDismissible: true,
-		type: 'default',
-	} );
-	const nonDismissibleNotices = filter( notices, {
-		isDismissible: false,
-		type: 'default',
-	} );
+	const dismissibleNotices = notices.filter(
+		( { isDismissible, type } ) => isDismissible && type === 'default'
+	);
+	const nonDismissibleNotices = notices.filter(
+		( { isDismissible, type } ) => ! isDismissible && type === 'default'
+	);
 
 	return (
 		<>

package/src/components/editor-snackbars/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -16,9 +11,9 @@ export default function EditorSnackbars() {
 		[]
 	);
 	const { removeNotice } = useDispatch( noticesStore );
-	const snackbarNotices = filter( notices, {
-		type: 'snackbar',
-	} );
+	const snackbarNotices = notices.filter(
+		( { type } ) => type === 'snackbar'
+	);
 
 	return (
 		<SnackbarList

package/src/components/page-attributes/parent.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, unescape as unescapeString, find } from 'lodash';
+import { get, unescape as unescapeString } from 'lodash';
 import removeAccents from 'remove-accents';
 
 /**
@@ -122,8 +122,7 @@ export function PageAttributesParent() {
 		const opts = getOptionsFromTree( tree );
 
 		// Ensure the current parent is in the options list.
-		const optsHasParent = find(
-			opts,
+		const optsHasParent = opts.find(
 			( item ) => item.value === parentPostId
 		);
 		if ( parentPost && ! optsHasParent ) {
@@ -158,6 +157,7 @@ export function PageAttributesParent() {
 
 	return (
 		<ComboboxControl
+			__nextHasNoMarginBottom
 			className="editor-page-attributes__parent"
 			label={ parentPageLabel }
 			value={ parentPostId }

package/src/components/page-attributes/test/order.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { PageAttributesOrder } from '../order';
 
+jest.useFakeTimers();
+
 describe( 'PageAttributesOrder', () => {
 	/**
 	 * When starting to type inside the spinbutton, select the current value

package/src/components/post-author/combobox.js

@@ -95,6 +95,7 @@ function PostAuthorCombobox() {
 
 	return (
 		<ComboboxControl
+			__nextHasNoMarginBottom
 			label={ __( 'Author' ) }
 			options={ authorOptions }
 			value={ authorId }

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

@@ -15,6 +15,7 @@ function PostExcerpt( { excerpt, onUpdateExcerpt } ) {
 	return (
 		<div className="editor-post-excerpt">
 			<TextareaControl
+				__nextHasNoMarginBottom
 				label={ __( 'Write an excerpt (optional)' ) }
 				className="editor-post-excerpt__textarea"
 				onChange={ ( value ) => onUpdateExcerpt( value ) }

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -69,8 +64,7 @@ export default function PostFormat() {
 			supportedFormats?.includes( format.id ) || postFormat === format.id
 		);
 	} );
-	const suggestion = find(
-		formats,
+	const suggestion = formats.find(
 		( format ) => format.id === suggestedFormat
 	);
 

package/src/components/post-preview-button/test/index.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { PostPreviewButton } from '../';
 
+jest.useFakeTimers();
+
 describe( 'PostPreviewButton', () => {
 	const documentWrite = jest.fn();
 	const documentTitle = jest.fn();

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

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { PostPublishButton } from '../';
 
+jest.useFakeTimers();
+
 describe( 'PostPublishButton', () => {
 	describe( 'aria-disabled', () => {
 		it( 'should be true if post is currently saving', () => {

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

@@ -16,17 +16,14 @@ import { store as editorStore } from '../../store';
 function MaybeCategoryPanel() {
 	const hasNoCategory = useSelect( ( select ) => {
 		const postType = select( editorStore ).getCurrentPostType();
-		const categoriesTaxonomy =
-			select( coreStore ).getTaxonomy( 'category' );
-		const defaultCategoryId = select( coreStore ).getEntityRecord(
-			'root',
-			'site'
-		)?.default_category;
-		const defaultCategory = select( coreStore ).getEntityRecord(
-			'taxonomy',
-			'category',
-			defaultCategoryId
-		);
+		const { canUser, getEntityRecord, getTaxonomy } = select( coreStore );
+		const categoriesTaxonomy = getTaxonomy( 'category' );
+		const defaultCategoryId = canUser( 'read', 'settings' )
+			? getEntityRecord( 'root', 'site' )?.default_category
+			: undefined;
+		const defaultCategory = defaultCategoryId
+			? getEntityRecord( 'taxonomy', 'category', defaultCategoryId )
+			: undefined;
 		const postTypeSupportsCategories =
 			categoriesTaxonomy &&
 			categoriesTaxonomy.types.some( ( type ) => type === postType );
@@ -45,7 +42,7 @@ function MaybeCategoryPanel() {
 			postTypeSupportsCategories &&
 			( categories?.length === 0 ||
 				( categories?.length === 1 &&
-					defaultCategory.id === categories[ 0 ] ) )
+					defaultCategory?.id === categories[ 0 ] ) )
 		);
 	}, [] );
 	const [ shouldShowPanel, setShouldShowPanel ] = useState( false );

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

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

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

@@ -15,6 +15,8 @@ import { useSelect } from '@wordpress/data';
  */
 import PostSavedState from '../';
 
+jest.useFakeTimers();
+
 const mockSavePost = jest.fn();
 
 jest.mock( '@wordpress/data/src/components/use-dispatch', () => {

package/src/components/post-slug/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';
 
 /**
@@ -11,9 +11,7 @@ import { PostSlug } from '../';
 
 describe( 'PostSlug', () => {
 	it( 'should update slug with sanitized input', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const onUpdateSlug = jest.fn();
 
 		render( <PostSlug postSlug="index" onUpdateSlug={ onUpdateSlug } /> );
@@ -21,7 +19,7 @@ describe( 'PostSlug', () => {
 		const input = screen.getByRole( 'textbox', { name: 'Slug' } );
 		await user.clear( input );
 		await user.type( input, 'Foo Bar-Baz 9!' );
-		input.blur();
+		act( () => input.blur() );
 
 		expect( onUpdateSlug ).toHaveBeenCalledWith( 'foo-bar-baz-9' );
 	} );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, get } from 'lodash';
+import { get } from 'lodash';
 import escapeHtml from 'escape-html';
 
 /**
@@ -50,7 +50,7 @@ const isSameTermName = ( termA, termB ) =>
 const termNamesToIds = ( names, terms ) => {
 	return names.map(
 		( termName ) =>
-			find( terms, ( term ) => isSameTermName( term.name, termName ) ).id
+			terms.find( ( term ) => isSameTermName( term.name, termName ) ).id
 	);
 };
 
@@ -203,7 +203,7 @@ export function FlatTermSelector( { slug } ) {
 
 		const newTermNames = uniqueTerms.filter(
 			( termName ) =>
-				! find( availableTerms, ( term ) =>
+				! availableTerms.find( ( term ) =>
 					isSameTermName( term.name, termName )
 				)
 		);

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, get, unescape as unescapeString } from 'lodash';
+import { get, unescape as unescapeString } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -95,7 +95,7 @@ export function sortBySelected( termsTree, terms ) {
  * @return {Object} Term object.
  */
 export function findTerm( terms, parent, name ) {
-	return find( terms, ( term ) => {
+	return terms.find( ( term ) => {
 		return (
 			( ( ! term.parent && ! parent ) ||
 				parseInt( term.parent ) === parseInt( parent ) ) &&

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -25,11 +20,10 @@ export function PostTaxonomies( {
 	taxonomies,
 	taxonomyWrapper = identity,
 } ) {
-	const availableTaxonomies = filter( taxonomies, ( taxonomy ) =>
+	const availableTaxonomies = ( taxonomies ?? [] ).filter( ( taxonomy ) =>
 		taxonomy.types.includes( postType )
 	);
-	const visibleTaxonomies = filter(
-		availableTaxonomies,
+	const visibleTaxonomies = availableTaxonomies.filter(
 		// In some circumstances .visibility can end up as undefined so optional chaining operator required.
 		// https://github.com/WordPress/gutenberg/issues/40326
 		( taxonomy ) => taxonomy.visibility?.show_ui

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

@@ -85,7 +85,7 @@ describe( 'PostTaxonomies', () => {
 	} );
 
 	it( 'should render no children if taxonomy data not available', () => {
-		const taxonomies = {};
+		const taxonomies = null;
 
 		const { container } = render(
 			<PostTaxonomies postType="page" taxonomies={ taxonomies } />

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { View } from 'react-native';
-import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -80,7 +79,7 @@ class PostTitle extends Component {
 
 	getTitle( title, postType ) {
 		if ( 'page' === postType ) {
-			return isEmpty( title )
+			return ! title
 				? /* translators: accessibility text. empty page title. */
 				  __( 'Page title. Empty' )
 				: sprintf(
@@ -90,7 +89,7 @@ class PostTitle extends Component {
 				  );
 		}
 
-		return isEmpty( title )
+		return ! title
 			? /* translators: accessibility text. empty post title. */
 			  __( 'Post title. Empty' )
 			: sprintf(

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

@@ -23,16 +23,20 @@ export default function PostURL( { onClose } ) {
 		permalinkPrefix,
 		permalinkSuffix,
 	} = useSelect( ( select ) => {
+		const post = select( editorStore ).getCurrentPost();
 		const postTypeSlug = select( editorStore ).getCurrentPostType();
 		const postType = select( coreStore ).getPostType( postTypeSlug );
 		const permalinkParts = select( editorStore ).getPermalinkParts();
+		const hasPublishAction = post?._links?.[ 'wp:action-publish' ] ?? false;
+
 		return {
-			isEditable: select( editorStore ).isPermalinkEditable(),
+			isEditable:
+				select( editorStore ).isPermalinkEditable() && hasPublishAction,
 			postSlug: safeDecodeURIComponent(
 				select( editorStore ).getEditedPostSlug()
 			),
 			viewPostLabel: postType?.labels.view_item,
-			postLink: select( editorStore ).getCurrentPost().link,
+			postLink: post.link,
 			permalinkPrefix: permalinkParts?.prefix,
 			permalinkSuffix: permalinkParts?.suffix,
 		};

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

@@ -56,6 +56,7 @@ const postTypeEntities = [
 import { EditorHelpTopics, store as editorStore } from '@wordpress/editor';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
+// eslint-disable-next-line no-restricted-imports
 import { store as editPostStore } from '@wordpress/edit-post';
 
 /**
@@ -337,6 +338,7 @@ class NativeEditorProvider extends Component {
 					isVisible={ this.state.isHelpVisible }
 					onClose={ () => this.setState( { isHelpVisible: false } ) }
 					close={ () => this.setState( { isHelpVisible: false } ) }
+					showSupport={ capabilities?.supportSection === true }
 				/>
 			</>
 		);

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { pick } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -12,6 +7,7 @@ import {
 	store as coreStore,
 	__experimentalFetchLinkSuggestions as fetchLinkSuggestions,
 	__experimentalFetchUrlData as fetchUrlData,
+	__experimentalFetchMedia as fetchMedia,
 } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 
@@ -21,6 +17,8 @@ import { __ } from '@wordpress/i18n';
 import { mediaUpload } from '../../utils';
 import { store as editorStore } from '../../store';
 
+const EMPTY_BLOCKS_LIST = [];
+
 /**
  * React hook used to compute the block editor settings to use for the post editor.
  *
@@ -55,7 +53,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 						'wp_block',
 						{ per_page: -1 }
 				  )
-				: [], // Reusable blocks are fetched in the native version of this hook.
+				: EMPTY_BLOCKS_LIST, // Reusable blocks are fetched in the native version of this hook.
 			hasUploadPermissions: canUser( 'create', 'media' ) ?? true,
 			userCanCreatePages: canUser( 'create', 'pages' ),
 			pageOnFront: siteSettings?.page_on_front,
@@ -133,56 +131,64 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 
 	return useMemo(
 		() => ( {
-			...pick( settings, [
-				'__experimentalBlockDirectory',
-				'__experimentalDiscussionSettings',
-				'__experimentalFeatures',
-				'__experimentalPreferredStyleVariations',
-				'__experimentalSetIsInserterOpened',
-				'__unstableGalleryWithImageBlocks',
-				'alignWide',
-				'allowedBlockTypes',
-				'bodyPlaceholder',
-				'canLockBlocks',
-				'codeEditingEnabled',
-				'colors',
-				'disableCustomColors',
-				'disableCustomFontSizes',
-				'disableCustomSpacingSizes',
-				'disableCustomGradients',
-				'disableLayoutStyles',
-				'enableCustomLineHeight',
-				'enableCustomSpacing',
-				'enableCustomUnits',
-				'focusMode',
-				'fontSizes',
-				'gradients',
-				'generateAnchors',
-				'hasFixedToolbar',
-				'isDistractionFree',
-				'hasInlineToolbar',
-				'imageDefaultSize',
-				'imageDimensions',
-				'imageEditing',
-				'imageSizes',
-				'isRTL',
-				'keepCaretInsideBlock',
-				'maxWidth',
-				'onUpdateDefaultBlockStyles',
-				'styles',
-				'template',
-				'templateLock',
-				'titlePlaceholder',
-				'supportsLayout',
-				'widgetTypesToHideFromLegacyWidgetBlock',
-				'__unstableResolvedAssets',
-			] ),
+			...Object.fromEntries(
+				Object.entries( settings ).filter( ( [ key ] ) =>
+					[
+						'__experimentalBlockDirectory',
+						'__experimentalBlockInspectorTabs',
+						'__experimentalDiscussionSettings',
+						'__experimentalFeatures',
+						'__experimentalPreferredStyleVariations',
+						'__experimentalSetIsInserterOpened',
+						'__unstableGalleryWithImageBlocks',
+						'alignWide',
+						'allowedBlockTypes',
+						'bodyPlaceholder',
+						'canLockBlocks',
+						'codeEditingEnabled',
+						'colors',
+						'disableCustomColors',
+						'disableCustomFontSizes',
+						'disableCustomSpacingSizes',
+						'disableCustomGradients',
+						'disableLayoutStyles',
+						'enableCustomLineHeight',
+						'enableCustomSpacing',
+						'enableCustomUnits',
+						'focusMode',
+						'fontSizes',
+						'gradients',
+						'generateAnchors',
+						'hasFixedToolbar',
+						'isDistractionFree',
+						'hasInlineToolbar',
+						'imageDefaultSize',
+						'imageDimensions',
+						'imageEditing',
+						'imageSizes',
+						'isRTL',
+						'keepCaretInsideBlock',
+						'maxWidth',
+						'onUpdateDefaultBlockStyles',
+						'styles',
+						'template',
+						'templateLock',
+						'titlePlaceholder',
+						'supportsLayout',
+						'widgetTypesToHideFromLegacyWidgetBlock',
+						'__unstableResolvedAssets',
+					].includes( key )
+				)
+			),
 			mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
 			__experimentalReusableBlocks: reusableBlocks,
 			__experimentalBlockPatterns: blockPatterns,
 			__experimentalBlockPatternCategories: blockPatternCategories,
 			__experimentalFetchLinkSuggestions: ( search, searchOptions ) =>
 				fetchLinkSuggestions( search, searchOptions, settings ),
+			// TODO: We should find a proper way to consolidate similar cases
+			// like reusable blocks, fetch entities, etc.
+			__unstableFetchMedia: fetchMedia,
 			__experimentalFetchRichUrlData: fetchUrlData,
 			__experimentalCanUserUseUnfilteredHTML: canUseUnfilteredHTML,
 			__experimentalUndo: undo,

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

@@ -11,6 +11,8 @@ import { store as coreStore } from '@wordpress/core-data';
 import useBlockEditorSettings from './use-block-editor-settings.js';
 import { store as editorStore } from '../../store';
 
+const EMPTY_BLOCKS_LIST = [];
+
 function useNativeBlockEditorSettings( settings, hasTemplate ) {
 	const capabilities = settings.capabilities ?? {};
 	const editorSettings = useBlockEditorSettings( settings, hasTemplate );
@@ -27,7 +29,7 @@ function useNativeBlockEditorSettings( settings, hasTemplate ) {
 							// Related issue: https://github.com/wordpress-mobile/gutenberg-mobile/issues/2661
 							{ per_page: 100 }
 					  )
-					: [],
+					: EMPTY_BLOCKS_LIST,
 				isTitleSelected: select( editorStore ).isPostTitleSelected(),
 			};
 		},