@wordpress/editor 12.11.0 → 12.14.0

package/src/components/document-outline/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { countBy, flatMap, get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -50,7 +45,7 @@ const multipleH1Headings = [
  * @return {Array} An array of heading blocks enhanced with the properties described above.
  */
 const computeOutlineHeadings = ( blocks = [] ) => {
-	return flatMap( blocks, ( block = {} ) => {
+	return blocks.flatMap( ( block = {} ) => {
 		if ( block.name === 'core/heading' ) {
 			return {
 				...block,
@@ -83,7 +78,13 @@ export const DocumentOutline = ( {
 	// Not great but it's the simplest way to locate the title right now.
 	const titleNode = document.querySelector( '.editor-post-title__input' );
 	const hasTitle = isTitleSupported && title && titleNode;
-	const countByLevel = countBy( headings, 'level' );
+	const countByLevel = headings.reduce(
+		( acc, heading ) => ( {
+			...acc,
+			[ heading.level ]: ( acc[ heading.level ] || 0 ) + 1,
+		} ),
+		{}
+	);
 	const hasMultipleH1 = countByLevel[ 1 ] > 1;
 
 	return (
@@ -155,7 +156,7 @@ export default compose(
 		return {
 			title: getEditedPostAttribute( 'title' ),
 			blocks: getBlocks(),
-			isTitleSupported: get( postType, [ 'supports', 'title' ], false ),
+			isTitleSupported: postType?.supports?.title ?? false,
 		};
 	} )
 )( DocumentOutline );

package/src/components/editor-history/redo.js

@@ -4,7 +4,7 @@
 import { __, isRTL } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { displayShortcut } from '@wordpress/keycodes';
+import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
 import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
 import { forwardRef } from '@wordpress/element';
 
@@ -14,6 +14,10 @@ import { forwardRef } from '@wordpress/element';
 import { store as editorStore } from '../../store';
 
 function EditorHistoryRedo( props, ref ) {
+	const shortcut = isAppleOS()
+		? displayShortcut.primaryShift( 'z' )
+		: displayShortcut.primary( 'y' );
+
 	const hasRedo = useSelect(
 		( select ) => select( editorStore ).hasEditorRedo(),
 		[]
@@ -26,7 +30,7 @@ function EditorHistoryRedo( props, ref ) {
 			icon={ ! isRTL() ? redoIcon : undoIcon }
 			/* translators: button label text should, if possible, be under 16 characters. */
 			label={ __( 'Redo' ) }
-			shortcut={ displayShortcut.primaryShift( 'z' ) }
+			shortcut={ shortcut }
 			// If there are no redo levels we don't want to actually disable this
 			// button, because it will remove focus for keyboard users.
 			// See: https://github.com/WordPress/gutenberg/issues/3486

package/src/components/error-boundary/index.js

@@ -7,6 +7,7 @@ import { Button } from '@wordpress/components';
 import { select } from '@wordpress/data';
 import { Warning } from '@wordpress/block-editor';
 import { useCopyToClipboard } from '@wordpress/compose';
+import { doAction } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
@@ -36,6 +37,8 @@ class ErrorBoundary extends Component {
 
 	componentDidCatch( error ) {
 		this.setState( { error } );
+
+		doAction( 'editor.ErrorBoundary.errorLogged', error );
 	}
 
 	reboot() {

package/src/components/global-keyboard-shortcuts/register-shortcuts.js

@@ -6,6 +6,7 @@ import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { BlockEditorKeyboardShortcuts } from '@wordpress/block-editor';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { isAppleOS } from '@wordpress/keycodes';
 
 function EditorKeyboardShortcutsRegister() {
 	// Registering the shortcuts.
@@ -39,6 +40,18 @@ function EditorKeyboardShortcutsRegister() {
 				modifier: 'primaryShift',
 				character: 'z',
 			},
+			// Disable on Apple OS because it conflicts with the browser's
+			// history shortcut. It's a fine alias for both Windows and Linux.
+			// Since there's no conflict for Ctrl+Shift+Z on both Windows and
+			// Linux, we keep it as the default for consistency.
+			aliases: isAppleOS()
+				? []
+				: [
+						{
+							modifier: 'primary',
+							character: 'y',
+						},
+				  ],
 		} );
 	}, [ registerShortcut ] );
 

package/src/components/index.js

@@ -51,16 +51,22 @@ export { default as PostSticky } from './post-sticky';
 export { default as PostStickyCheck } from './post-sticky/check';
 export { default as PostSwitchToDraftButton } from './post-switch-to-draft-button';
 export { default as PostTaxonomies } from './post-taxonomies';
-export { default as PostTaxonomiesFlatTermSelector } from './post-taxonomies/flat-term-selector';
-export { default as PostTaxonomiesHierarchicalTermSelector } from './post-taxonomies/hierarchical-term-selector';
+export { FlatTermSelector as PostTaxonomiesFlatTermSelector } from './post-taxonomies/flat-term-selector';
+export { HierarchicalTermSelector as PostTaxonomiesHierarchicalTermSelector } from './post-taxonomies/hierarchical-term-selector';
 export { default as PostTaxonomiesCheck } from './post-taxonomies/check';
 export { default as PostTextEditor } from './post-text-editor';
 export { default as PostTitle } from './post-title';
 export { default as PostTrash } from './post-trash';
 export { default as PostTrashCheck } from './post-trash/check';
 export { default as PostTypeSupportCheck } from './post-type-support-check';
+export { default as PostURL } from './post-url';
+export { default as PostURLCheck } from './post-url/check';
+export { default as PostURLLabel, usePostURLLabel } from './post-url/label';
 export { default as PostVisibility } from './post-visibility';
-export { default as PostVisibilityLabel } from './post-visibility/label';
+export {
+	default as PostVisibilityLabel,
+	usePostVisibilityLabel,
+} from './post-visibility/label';
 export { default as PostVisibilityCheck } from './post-visibility/check';
 export { default as TableOfContents } from './table-of-contents';
 export { default as ThemeSupportCheck } from './theme-support-check';

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { invoke } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -24,10 +19,7 @@ export const PageAttributesOrder = ( { onUpdateOrder, order = 0 } ) => {
 	const setUpdatedOrder = ( value ) => {
 		setOrderInput( value );
 		const newOrder = Number( value );
-		if (
-			Number.isInteger( newOrder ) &&
-			invoke( value, [ 'trim' ] ) !== ''
-		) {
+		if ( Number.isInteger( newOrder ) && value.trim?.() !== '' ) {
 			onUpdateOrder( Number( value ) );
 		}
 	};

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

@@ -1,14 +1,8 @@
 /**
  * External dependencies
  */
-import {
-	get,
-	unescape as unescapeString,
-	debounce,
-	repeat,
-	find,
-	deburr,
-} from 'lodash';
+import { get, unescape as unescapeString, debounce, find } from 'lodash';
+import removeAccents from 'remove-accents';
 
 /**
  * WordPress dependencies
@@ -33,8 +27,8 @@ function getTitle( post ) {
 }
 
 export const getItemPriority = ( name, searchValue ) => {
-	const normalizedName = deburr( name ).toLowerCase();
-	const normalizedSearch = deburr( searchValue ).toLowerCase();
+	const normalizedName = removeAccents( name || '' ).toLowerCase();
+	const normalizedSearch = removeAccents( searchValue || '' ).toLowerCase();
 	if ( normalizedName === normalizedSearch ) {
 		return 0;
 	}
@@ -98,7 +92,7 @@ export function PageAttributesParent() {
 				{
 					value: treeNode.id,
 					label:
-						repeat( '— ', level ) + unescapeString( treeNode.name ),
+						'— '.repeat( level ) + unescapeString( treeNode.name ),
 					rawName: treeNode.name,
 				},
 				...getOptionsFromTree( treeNode.children || [], level + 1 ),

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

@@ -81,24 +81,18 @@ export default function PostFormat() {
 	return (
 		<PostFormatCheck>
 			<div className="editor-post-format">
-				<div className="editor-post-format__content">
-					<label htmlFor={ postFormatSelectorId }>
-						{ __( 'Post Format' ) }
-					</label>
-					<SelectControl
-						value={ postFormat }
-						onChange={ ( format ) => onUpdatePostFormat( format ) }
-						id={ postFormatSelectorId }
-						options={ formats.map( ( format ) => ( {
-							label: format.caption,
-							value: format.id,
-						} ) ) }
-					/>
-				</div>
-
+				<SelectControl
+					label={ __( 'Post Format' ) }
+					value={ postFormat }
+					onChange={ ( format ) => onUpdatePostFormat( format ) }
+					id={ postFormatSelectorId }
+					options={ formats.map( ( format ) => ( {
+						label: format.caption,
+						value: format.id,
+					} ) ) }
+				/>
 				{ suggestion && suggestion.id !== postFormat && (
-					<div className="editor-post-format__suggestion">
-						{ __( 'Suggestion:' ) }{ ' ' }
+					<p className="editor-post-format__suggestion">
 						<Button
 							variant="link"
 							onClick={ () =>
@@ -107,11 +101,11 @@ export default function PostFormat() {
 						>
 							{ sprintf(
 								/* translators: %s: post format */
-								__( 'Apply format: %s' ),
+								__( 'Apply suggested format: %s' ),
 								suggestion.caption
 							) }
 						</Button>
-					</div>
+					</p>
 				) }
 			</div>
 		</PostFormatCheck>

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

@@ -1,18 +1,3 @@
-.editor-post-format {
-	flex-direction: column;
-	align-items: stretch;
-	width: 100%;
-}
-
-.editor-post-format__content {
-	display: inline-flex;
-	justify-content: space-between;
-	align-items: center;
-	width: 100%;
-}
-
-.editor-post-format__suggestion {
-	padding: $grid-unit-15 * 0.5;
-	text-align: right;
-	font-size: $default-font-size;
+[class].editor-post-format__suggestion {
+	margin: $grid-unit-05 0 0 0;
 }

package/src/components/post-locked-modal/index.js

@@ -197,7 +197,7 @@ export default function PostLockedModal() {
 								? sprintf(
 										/* translators: %s: user's display name */
 										__(
-											'<strong>%s</strong> now has editing control of this posts (<PreviewLink />). Don’t worry, your changes up to this moment have been saved.'
+											'<strong>%s</strong> now has editing control of this post (<PreviewLink />). Don’t worry, your changes up to this moment have been saved.'
 										),
 										userDisplayName
 								  )

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

@@ -27,13 +27,11 @@ function MaybeCategoryPanel() {
 			'root',
 			'site'
 		)?.default_category;
-		const defaultCategory = select( coreStore ).getEntityRecords(
+		const defaultCategory = select( coreStore ).getEntityRecord(
 			'taxonomy',
 			'category',
-			{
-				id: defaultCategoryId,
-			}
-		)?.[ 0 ];
+			defaultCategoryId
+		);
 		const postTypeSupportsCategories =
 			categoriesTaxonomy &&
 			some( categoriesTaxonomy.types, ( type ) => type === postType );

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

@@ -14,7 +14,7 @@ export default function PostScheduleLabel( props ) {
 	return usePostScheduleLabel( props );
 }
 
-export function usePostScheduleLabel( { full } ) {
+export function usePostScheduleLabel( { full = false } = {} ) {
 	const { date, isFloating } = useSelect(
 		( select ) => ( {
 			date: select( editorStore ).getEditedPostAttribute( 'date' ),

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

@@ -4,8 +4,9 @@
 import { withDispatch, withSelect } from '@wordpress/data';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { withInstanceId, compose } from '@wordpress/compose';
+import { compose } from '@wordpress/compose';
 import { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url';
+import { TextControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -41,25 +42,19 @@ export class PostSlug extends Component {
 	}
 
 	render() {
-		const { instanceId } = this.props;
 		const { editedSlug } = this.state;
-
-		const inputId = 'editor-post-slug-' + instanceId;
-
 		return (
 			<PostSlugCheck>
-				<label htmlFor={ inputId }>{ __( 'Slug' ) }</label>
-				<input
+				<TextControl
+					label={ __( 'Slug' ) }
 					autoComplete="off"
 					spellCheck="false"
-					type="text"
-					id={ inputId }
 					value={ editedSlug }
-					onChange={ ( event ) =>
-						this.setState( { editedSlug: event.target.value } )
+					onChange={ ( slug ) =>
+						this.setState( { editedSlug: slug } )
 					}
 					onBlur={ this.setSlug }
-					className="editor-post-slug__input"
+					className="editor-post-slug"
 				/>
 			</PostSlugCheck>
 		);
@@ -86,5 +81,4 @@ export default compose( [
 			},
 		};
 	} ),
-	withInstanceId,
 ] )( PostSlug );

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

@@ -3,6 +3,11 @@
  */
 import { shallow } from 'enzyme';
 
+/**
+ * WordPress dependencies
+ */
+import { TextControl } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
@@ -13,11 +18,7 @@ describe( 'PostSlug', () => {
 		it( 'should update internal slug', () => {
 			const wrapper = shallow( <PostSlug postSlug="index" /> );
 
-			wrapper.find( 'input' ).simulate( 'change', {
-				target: {
-					value: 'single',
-				},
-			} );
+			wrapper.find( TextControl ).prop( 'onChange' )( 'single' );
 
 			expect( wrapper.state().editedSlug ).toEqual( 'single' );
 		} );
@@ -28,7 +29,7 @@ describe( 'PostSlug', () => {
 				<PostSlug postSlug="index" onUpdateSlug={ onUpdateSlug } />
 			);
 
-			wrapper.find( 'input' ).simulate( 'blur', {
+			wrapper.find( TextControl ).prop( 'onBlur' )( {
 				target: {
 					value: 'single',
 				},

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

@@ -86,7 +86,7 @@ function findOrCreateTerm( termName, restBase, namespace ) {
 		.then( unescapeTerm );
 }
 
-function FlatTermSelector( { slug } ) {
+export function FlatTermSelector( { slug } ) {
 	const [ values, setValues ] = useState( [] );
 	const [ search, setSearch ] = useState( '' );
 	const debouncedSearch = useDebounce( setSearch, 500 );

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

@@ -152,7 +152,7 @@ export function getFilterMatcher( filterValue ) {
  * @param {string} props.slug Taxonomy slug.
  * @return {WPElement}        Hierarchical term selector component.
  */
-function HierarchicalTermSelector( { slug } ) {
+export function HierarchicalTermSelector( { slug } ) {
 	const [ adding, setAdding ] = useState( false );
 	const [ formName, setFormName ] = useState( '' );
 	/**

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, identity, includes } from 'lodash';
+import { filter, includes } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -18,6 +18,8 @@ import HierarchicalTermSelector from './hierarchical-term-selector';
 import FlatTermSelector from './flat-term-selector';
 import { store as editorStore } from '../../store';
 
+const identity = ( x ) => x;
+
 export function PostTaxonomies( {
 	postType,
 	taxonomies,

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

@@ -16,7 +16,7 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
-export function PostTemplate( {} ) {
+export function PostTemplate() {
 	const { availableTemplates, selectedTemplate, isViewable } = useSelect(
 		( select ) => {
 			const {

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

@@ -149,9 +149,13 @@ function PostTitle( _, forwardedRef ) {
 			plainText,
 		} );
 
-		if ( typeof content !== 'string' && content.length ) {
-			event.preventDefault();
+		event.preventDefault();
+
+		if ( ! content.length ) {
+			return;
+		}
 
+		if ( typeof content !== 'string' ) {
 			const [ firstBlock ] = content;
 
 			if (
@@ -164,6 +168,8 @@ function PostTitle( _, forwardedRef ) {
 			} else {
 				onInsertBlockAfter( content );
 			}
+		} else {
+			onUpdate( content );
 		}
 	}
 

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

@@ -1,3 +1,6 @@
 .editor-post-trash.components-button {
+	display: flex;
+	justify-content: center;
 	margin-top: $grid-unit-05;
+	width: 100%;
 }

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, safeDecodeURIComponent } 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( safeDecodeURIComponent( postLink ) );
+}