@wordpress/editor 14.8.8 → 14.10.0

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

@@ -411,6 +411,7 @@ export function HierarchicalTermSelector( { slug } ) {
 					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ filterLabel }
+					placeholder={ filterLabel }
 					value={ filterValue }
 					onChange={ setFilter }
 				/>

package/src/components/post-template/classic-theme.js

@@ -177,8 +177,7 @@ function PostTemplateDropdownContent( { onClose } ) {
 			{ canEdit && onNavigateToEntityRecord && (
 				<p>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="link"
 						onClick={ () => {
 							onNavigateToEntityRecord( {

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

@@ -17,7 +17,7 @@ import {
 import { store as noticesStore } from '@wordpress/notices';
 import { copySmall } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
-import { useCopyToClipboard } from '@wordpress/compose';
+import { useCopyToClipboard, useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -70,25 +70,29 @@ export default function PostURL( { onClose } ) {
 	const { createNotice } = useDispatch( noticesStore );
 	const [ forceEmptyField, setForceEmptyField ] = useState( false );
 	const copyButtonRef = useCopyToClipboard( permalink, () => {
-		createNotice( 'info', __( 'Copied URL to clipboard.' ), {
+		createNotice( 'info', __( 'Copied Permalink to clipboard.' ), {
 			isDismissible: true,
 			type: 'snackbar',
 		} );
 	} );
+	const postUrlSlugDescriptionId =
+		'editor-post-url__slug-descriotion-' + useInstanceId( PostURL );
+
 	return (
 		<div className="editor-post-url">
 			<InspectorPopoverHeader
-				title={ __( 'Link' ) }
+				title={ __( 'Slug' ) }
 				onClose={ onClose }
 			/>
 			<VStack spacing={ 3 }>
 				{ isEditable && (
-					<div>
+					<p className="editor-post-url__intro">
 						{ createInterpolateElement(
 							__(
-								'Customize the last part of the URL. <a>Learn more.</a>'
+								'<span>Customize the last part of the Permalink.</span> <a>Learn more.</a>'
 							),
 							{
+								span: <span id={ postUrlSlugDescriptionId } />,
 								a: (
 									<ExternalLink
 										href={ __(
@@ -98,59 +102,67 @@ export default function PostURL( { onClose } ) {
 								),
 							}
 						) }
-					</div>
+					</p>
 				) }
 				<div>
 					{ isEditable && (
-						<InputControl
-							__next40pxDefaultSize
-							prefix={
-								<InputControlPrefixWrapper>
-									/
-								</InputControlPrefixWrapper>
-							}
-							suffix={
-								<InputControlSuffixWrapper variant="control">
-									<Button
-										icon={ copySmall }
-										ref={ copyButtonRef }
-										size="small"
-										label="Copy"
-									/>
-								</InputControlSuffixWrapper>
-							}
-							label={ __( 'Link' ) }
-							hideLabelFromVision
-							value={ forceEmptyField ? '' : postSlug }
-							autoComplete="off"
-							spellCheck="false"
-							type="text"
-							className="editor-post-url__input"
-							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;
+						<>
+							<InputControl
+								__next40pxDefaultSize
+								prefix={
+									<InputControlPrefixWrapper>
+										/
+									</InputControlPrefixWrapper>
 								}
-								if ( forceEmptyField ) {
-									setForceEmptyField( false );
+								suffix={
+									<InputControlSuffixWrapper variant="control">
+										<Button
+											icon={ copySmall }
+											ref={ copyButtonRef }
+											size="small"
+											label="Copy"
+										/>
+									</InputControlSuffixWrapper>
 								}
-							} }
-							onBlur={ ( event ) => {
-								editPost( {
-									slug: cleanForSlug( event.target.value ),
-								} );
-								if ( forceEmptyField ) {
-									setForceEmptyField( false );
-								}
-							} }
-							help={
+								label={ __( 'Slug' ) }
+								hideLabelFromVision
+								value={ forceEmptyField ? '' : postSlug }
+								autoComplete="off"
+								spellCheck="false"
+								type="text"
+								className="editor-post-url__input"
+								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 );
+									}
+								} }
+								aria-describedby={ postUrlSlugDescriptionId }
+							/>
+							<p className="editor-post-url__permalink">
+								<span className="editor-post-url__permalink-visual-label">
+									{ __( 'Permalink:' ) }
+								</span>
 								<ExternalLink
 									className="editor-post-url__link"
 									href={ postLink }
@@ -166,8 +178,8 @@ export default function PostURL( { onClose } ) {
 										{ permalinkSuffix }
 									</span>
 								</ExternalLink>
-							}
-						/>
+							</p>
+						</>
 					) }
 					{ ! isEditable && (
 						<ExternalLink

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

@@ -3,11 +3,7 @@
  */
 import { useMemo, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import {
-	Dropdown,
-	Button,
-	__experimentalTruncate as Truncate,
-} from '@wordpress/components';
+import { Dropdown, Button, ExternalLink } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { safeDecodeURIComponent } from '@wordpress/url';
 import { store as coreStore } from '@wordpress/core-data';
@@ -26,6 +22,20 @@ import { store as editorStore } from '../../store';
  * @return {JSX.Element} The rendered PostURLPanel component.
  */
 export default function PostURLPanel() {
+	const { isFrontPage } = useSelect( ( select ) => {
+		const { getCurrentPostId } = select( editorStore );
+		const { getEditedEntityRecord, canUser } = select( coreStore );
+		const siteSettings = canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} )
+			? getEditedEntityRecord( 'root', 'site' )
+			: undefined;
+		const _id = getCurrentPostId();
+		return {
+			isFrontPage: siteSettings?.page_on_front === _id,
+		};
+	}, [] );
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
@@ -42,41 +52,38 @@ export default function PostURLPanel() {
 		[ popoverAnchor ]
 	);
 
+	const label = isFrontPage ? __( 'Link' ) : __( 'Slug' );
+
 	return (
 		<PostURLCheck>
-			<PostPanelRow label={ __( 'Link' ) } ref={ setPopoverAnchor }>
-				<Dropdown
-					popoverProps={ popoverProps }
-					className="editor-post-url__panel-dropdown"
-					contentClassName="editor-post-url__panel-dialog"
-					focusOnMount
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<PostURLToggle isOpen={ isOpen } onClick={ onToggle } />
-					) }
-					renderContent={ ( { onClose } ) => (
-						<PostURL onClose={ onClose } />
-					) }
-				/>
+			<PostPanelRow label={ label } ref={ setPopoverAnchor }>
+				{ ! isFrontPage && (
+					<Dropdown
+						popoverProps={ popoverProps }
+						className="editor-post-url__panel-dropdown"
+						contentClassName="editor-post-url__panel-dialog"
+						focusOnMount
+						renderToggle={ ( { isOpen, onToggle } ) => (
+							<PostURLToggle
+								isOpen={ isOpen }
+								onClick={ onToggle }
+							/>
+						) }
+						renderContent={ ( { onClose } ) => (
+							<PostURL onClose={ onClose } />
+						) }
+					/>
+				) }
+				{ isFrontPage && <FrontPageLink /> }
 			</PostPanelRow>
 		</PostURLCheck>
 	);
 }
 
 function PostURLToggle( { isOpen, onClick } ) {
-	const { slug, isFrontPage, postLink } = useSelect( ( select ) => {
-		const { getCurrentPostId, getCurrentPost } = select( editorStore );
-		const { getEditedEntityRecord, canUser } = select( coreStore );
-		const siteSettings = canUser( 'read', {
-			kind: 'root',
-			name: 'site',
-		} )
-			? getEditedEntityRecord( 'root', 'site' )
-			: undefined;
-		const _id = getCurrentPostId();
+	const { slug } = useSelect( ( select ) => {
 		return {
 			slug: select( editorStore ).getEditedPostSlug(),
-			isFrontPage: siteSettings?.page_on_front === _id,
-			postLink: getCurrentPost()?.link,
 		};
 	}, [] );
 	const decodedSlug = safeDecodeURIComponent( slug );
@@ -90,9 +97,26 @@ function PostURLToggle( { isOpen, onClick } ) {
 			aria-label={ sprintf( __( 'Change link: %s' ), decodedSlug ) }
 			onClick={ onClick }
 		>
-			<Truncate numberOfLines={ 1 }>
-				{ isFrontPage ? postLink : `/${ decodedSlug }` }
-			</Truncate>
+			<>{ decodedSlug }</>
 		</Button>
 	);
 }
+
+function FrontPageLink() {
+	const { postLink } = useSelect( ( select ) => {
+		const { getCurrentPost } = select( editorStore );
+		return {
+			postLink: getCurrentPost()?.link,
+		};
+	}, [] );
+
+	return (
+		<ExternalLink
+			className="editor-post-url__front-page-link"
+			href={ postLink }
+			target="_blank"
+		>
+			{ postLink }
+		</ExternalLink>
+	);
+}

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

@@ -9,14 +9,19 @@
 }
 
 /* rtl:begin:ignore */
-.editor-post-url__link {
+.editor-post-url__link,
+.editor-post-url__front-page-link {
 	direction: ltr;
 	word-break: break-word;
-	margin-top: $grid-unit-05;
-	color: $gray-700;
 }
 /* rtl:end:ignore */
 
+.editor-post-url__front-page-link {
+	// Match padding on tertiary buttons for alignment.
+	padding: $grid-unit-15 * 0.5 0 $grid-unit-15 * 0.5 $grid-unit-15;
+}
+
+
 .editor-post-url__link-slug {
 	font-weight: 600;
 }
@@ -30,3 +35,16 @@
 .editor-post-url__panel-toggle {
 	word-break: break-word;
 }
+
+.editor-post-url__intro {
+	margin: 0;
+}
+
+.editor-post-url__permalink {
+	margin-top: $grid-unit-10;
+	margin-bottom: 0;
+
+	&-visual-label {
+		display: block;
+	}
+}

package/src/components/provider/disable-non-page-content-blocks.js

@@ -3,52 +3,32 @@
  */
 import { useSelect, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useEffect, useMemo } from '@wordpress/element';
-import { applyFilters } from '@wordpress/hooks';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-
-const POST_CONTENT_BLOCK_TYPES = [
-	'core/post-title',
-	'core/post-featured-image',
-	'core/post-content',
-];
+import usePostContentBlocks from './use-post-content-blocks';
 
 /**
  * Component that when rendered, makes it so that the site editor allows only
  * page content to be edited.
  */
 export default function DisableNonPageContentBlocks() {
-	const contentOnlyBlockTypes = useMemo(
-		() => [
-			...applyFilters(
-				'editor.postContentBlockTypes',
-				POST_CONTENT_BLOCK_TYPES
-			),
-			'core/template-part',
-		],
-		[]
-	);
-
-	// Note that there are two separate subscriptions because the result for each
-	// returns a new array.
-	const contentOnlyIds = useSelect(
+	const contentOnlyIds = usePostContentBlocks();
+	const templateParts = useSelect( ( select ) => {
+		const { getBlocksByName } = select( blockEditorStore );
+		return getBlocksByName( 'core/template-part' );
+	}, [] );
+	const disabledIds = useSelect(
 		( select ) => {
-			const { getPostBlocksByName } = unlock( select( editorStore ) );
-			return getPostBlocksByName( contentOnlyBlockTypes );
+			const { getBlockOrder } = select( blockEditorStore );
+			return templateParts.flatMap( ( clientId ) =>
+				getBlockOrder( clientId )
+			);
 		},
-		[ contentOnlyBlockTypes ]
+		[ templateParts ]
 	);
-	const disabledIds = useSelect( ( select ) => {
-		const { getBlocksByName, getBlockOrder } = select( blockEditorStore );
-		return getBlocksByName( 'core/template-part' ).flatMap( ( clientId ) =>
-			getBlockOrder( clientId )
-		);
-	}, [] );
 
 	const registry = useRegistry();
 
@@ -61,6 +41,9 @@ export default function DisableNonPageContentBlocks() {
 			for ( const clientId of contentOnlyIds ) {
 				setBlockEditingMode( clientId, 'contentOnly' );
 			}
+			for ( const clientId of templateParts ) {
+				setBlockEditingMode( clientId, 'contentOnly' );
+			}
 			for ( const clientId of disabledIds ) {
 				setBlockEditingMode( clientId, 'disabled' );
 			}
@@ -72,12 +55,15 @@ export default function DisableNonPageContentBlocks() {
 				for ( const clientId of contentOnlyIds ) {
 					unsetBlockEditingMode( clientId );
 				}
+				for ( const clientId of templateParts ) {
+					unsetBlockEditingMode( clientId );
+				}
 				for ( const clientId of disabledIds ) {
 					unsetBlockEditingMode( clientId );
 				}
 			} );
 		};
-	}, [ contentOnlyIds, disabledIds, registry ] );
+	}, [ templateParts, contentOnlyIds, disabledIds, registry ] );
 
 	return null;
 }

package/src/components/provider/index.js

@@ -222,6 +222,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			shouldRenderTemplate,
 			post.id,
 			post.type,
+			post.slug,
 			rootLevelPost.type,
 			rootLevelPost.slug,
 			postTypes,

package/src/components/provider/use-post-content-blocks.js

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const POST_CONTENT_BLOCK_TYPES = [
+	'core/post-title',
+	'core/post-featured-image',
+	'core/post-content',
+];
+
+export default function usePostContentBlocks() {
+	const contentOnlyBlockTypes = useMemo(
+		() => [
+			...applyFilters(
+				'editor.postContentBlockTypes',
+				POST_CONTENT_BLOCK_TYPES
+			),
+		],
+		[]
+	);
+
+	// Note that there are two separate subscriptions because the result for each
+	// returns a new array.
+	const contentOnlyIds = useSelect(
+		( select ) => {
+			const { getPostBlocksByName } = unlock( select( editorStore ) );
+			return getPostBlocksByName( contentOnlyBlockTypes );
+		},
+		[ contentOnlyBlockTypes ]
+	);
+
+	return contentOnlyIds;
+}

package/src/components/resizable-editor/resize-handle.js

@@ -15,6 +15,11 @@ export default function ResizeHandle( { direction, resizeWidthBy } ) {
 	function handleKeyDown( event ) {
 		const { keyCode } = event;
 
+		if ( keyCode !== LEFT && keyCode !== RIGHT ) {
+			return;
+		}
+		event.preventDefault();
+
 		if (
 			( direction === 'left' && keyCode === LEFT ) ||
 			( direction === 'right' && keyCode === RIGHT )

package/src/components/zoom-out-toggle/index.js

@@ -40,7 +40,7 @@ const ZoomOutToggle = () => {
 		<Button
 			onClick={ handleZoomOut }
 			icon={ zoomOutIcon }
-			label={ __( 'Toggle Zoom Out' ) }
+			label={ __( 'Zoom Out' ) }
 			isPressed={ isZoomOut }
 			size="compact"
 			showTooltip={ ! showIconLabels }

package/src/dataviews/store/private-actions.ts

@@ -8,11 +8,6 @@ import { doAction } from '@wordpress/hooks';
 /**
  * Internal dependencies
  */
-import duplicateTemplatePart from '../actions/duplicate-template-part';
-import resetPost from '../actions/reset-post';
-import trashPost from '../actions/trash-post';
-import renamePost from '../actions/rename-post';
-import restorePost from '../actions/restore-post';
 import type { PostType } from '../types';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
@@ -24,8 +19,13 @@ import {
 	reorderPage,
 	exportPattern,
 	permanentlyDeletePost,
+	restorePost,
+	trashPost,
+	renamePost,
+	resetPost,
+	deletePost,
 } from '@wordpress/fields';
-import deletePost from '../actions/delete-post';
+import duplicateTemplatePart from '../actions/duplicate-template-part';
 
 export function registerEntityAction< Item >(
 	kind: string,
@@ -117,8 +117,8 @@ export const registerPostTypeActions =
 				? reorderPage
 				: undefined,
 			postTypeConfig.slug === 'wp_block' ? exportPattern : undefined,
-			resetPost,
 			restorePost,
+			resetPost,
 			deletePost,
 			trashPost,
 			permanentlyDeletePost,

package/src/private-apis.js

@@ -23,10 +23,7 @@ import {
 	mergeBaseAndUserConfigs,
 	GlobalStylesProvider,
 } from './components/global-styles-provider';
-import {
-	registerCoreBlockBindingsSources,
-	bootstrapBlockBindingsSourcesFromServer,
-} from './bindings/api';
+import { registerCoreBlockBindingsSources } from './bindings/api';
 
 const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
 
@@ -47,7 +44,6 @@ lock( privateApis, {
 	ViewMoreMenuGroup,
 	ResizableEditor,
 	registerCoreBlockBindingsSources,
-	bootstrapBlockBindingsSourcesFromServer,
 
 	// This is a temporary private API while we're updating the site editor to use EditorProvider.
 	interfaceStore,

package/src/store/actions.js

@@ -30,7 +30,7 @@ import {
 	getNotificationArgumentsForSaveFail,
 	getNotificationArgumentsForTrashFail,
 } from './utils/notice-builder';
-
+import { unlock } from '../lock-unlock';
 /**
  * Returns an action generator used in signalling that editor has initialized with
  * the specified post object and editor settings.
@@ -159,6 +159,29 @@ export function setEditedPost( postType, postId ) {
  *
  * @param {Object} edits   Post attributes to edit.
  * @param {Object} options Options for the edit.
+ *
+ * @example
+ * ```js
+ * // Update the post title
+ * wp.data.dispatch( 'core/editor' ).editPost( { title: `${ newTitle }` } );
+ * ```
+ *
+ * @example
+ *```js
+ * 	// Get specific media size based on the featured media ID
+ * 	// Note: change sizes?.large for any registered size
+ * 	const getFeaturedMediaUrl = useSelect( ( select ) => {
+ * 		const getFeaturedMediaId =
+ * 			select( 'core/editor' ).getEditedPostAttribute( 'featured_media' );
+ * 		const getMedia = select( 'core' ).getMedia( getFeaturedMediaId );
+ *
+ * 		return (
+ * 			getMedia?.media_details?.sizes?.large?.source_url || getMedia?.source_url || ''
+ * 		);
+ * }, [] );
+ * ```
+ *
+ * @return {Object} Action object
  */
 export const editPost =
 	( edits, options ) =>
@@ -255,7 +278,11 @@ export const savePost =
 
 		if ( ! error ) {
 			try {
-				await doActionAsync( 'editor.savePost', options );
+				await doActionAsync(
+					'editor.savePost',
+					{ id: previousRecord.id },
+					options
+				);
 			} catch ( err ) {
 				error = err;
 			}
@@ -741,15 +768,32 @@ export function removeEditorPanel( panelName ) {
  *                                              use an object.
  * @param {string}         value.rootClientId   The root client ID to insert at.
  * @param {number}         value.insertionIndex The index to insert at.
+ * @param {string}         value.filterValue    A query to filter the inserter results.
+ * @param {Function}       value.onSelect       A callback when an item is selected.
+ * @param {string}         value.tab            The tab to open in the inserter.
+ * @param {string}         value.category       The category to initialize in the inserter.
  *
  * @return {Object} Action object.
  */
-export function setIsInserterOpened( value ) {
-	return {
-		type: 'SET_IS_INSERTER_OPENED',
-		value,
+export const setIsInserterOpened =
+	( value ) =>
+	( { dispatch, registry } ) => {
+		if (
+			typeof value === 'object' &&
+			value.hasOwnProperty( 'rootClientId' ) &&
+			value.hasOwnProperty( 'insertionIndex' )
+		) {
+			unlock( registry.dispatch( blockEditorStore ) ).setInsertionPoint( {
+				rootClientId: value.rootClientId,
+				index: value.insertionIndex,
+			} );
+		}
+
+		dispatch( {
+			type: 'SET_IS_INSERTER_OPENED',
+			value,
+		} );
 	};
-}
 
 /**
  * Returns an action object used to open/close the list view.

package/src/store/private-selectors.js

@@ -37,13 +37,13 @@ const EMPTY_INSERTION_POINT = {
 };
 
 /**
- * Get the insertion point for the inserter.
+ * Get the inserter.
  *
  * @param {Object} state Global application state.
  *
  * @return {Object} The root client ID, index to insert at and starting filter value.
  */
-export const getInsertionPoint = createRegistrySelector( ( select ) =>
+export const getInserter = createRegistrySelector( ( select ) =>
 	createSelector(
 		( state ) => {
 			if ( typeof state.blockInserterPanel === 'object' ) {