@wordpress/editor 13.35.0 → 14.0.1

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

@@ -21,37 +21,54 @@ import { useCopyToClipboard } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { usePostURLLabel } from './label';
 import { store as editorStore } from '../../store';
 
+/**
+ * Renders the `PostURL` component.
+ *
+ * @example
+ * ```jsx
+ * <PostURL />
+ * ```
+ *
+ * @param {Function} onClose Callback function to be executed when the popover is closed.
+ *
+ * @return {Component} The rendered PostURL component.
+ */
 export default function PostURL( { onClose } ) {
-	const { isEditable, postSlug, postLink, 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;
+	const {
+		isEditable,
+		postSlug,
+		postLink,
+		permalinkPrefix,
+		permalinkSuffix,
+		permalink,
+	} = 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() &&
-					hasPublishAction,
-				postSlug: safeDecodeURIComponent(
-					select( editorStore ).getEditedPostSlug()
-				),
-				viewPostLabel: postType?.labels.view_item,
-				postLink: post.link,
-				permalinkPrefix: permalinkParts?.prefix,
-				permalinkSuffix: permalinkParts?.suffix,
-			};
-		}, [] );
+		return {
+			isEditable:
+				select( editorStore ).isPermalinkEditable() && hasPublishAction,
+			postSlug: safeDecodeURIComponent(
+				select( editorStore ).getEditedPostSlug()
+			),
+			viewPostLabel: postType?.labels.view_item,
+			postLink: post.link,
+			permalinkPrefix: permalinkParts?.prefix,
+			permalinkSuffix: permalinkParts?.suffix,
+			permalink: safeDecodeURIComponent(
+				select( editorStore ).getPermalink()
+			),
+		};
+	}, [] );
 	const { editPost } = useDispatch( editorStore );
 	const { createNotice } = useDispatch( noticesStore );
 	const [ forceEmptyField, setForceEmptyField ] = useState( false );
-	const postUrlLabel = usePostURLLabel();
-	const copyButtonRef = useCopyToClipboard( postUrlLabel, () => {
+	const copyButtonRef = useCopyToClipboard( permalink, () => {
 		createNotice( 'info', __( 'Copied URL to clipboard.' ), {
 			isDismissible: true,
 			type: 'snackbar',

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

@@ -9,10 +9,20 @@ import { filterURLForDisplay, safeDecodeURIComponent } from '@wordpress/url';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Represents a label component for a post URL.
+ *
+ * @return {Component} The PostURLLabel component.
+ */
 export default function PostURLLabel() {
 	return usePostURLLabel();
 }
 
+/**
+ * Custom hook to get the label for the post URL.
+ *
+ * @return {string} The filtered and decoded post URL label.
+ */
 export function usePostURLLabel() {
 	const postLink = useSelect(
 		( select ) => select( editorStore ).getPermalink(),

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

@@ -6,6 +6,7 @@ import { useSelect } from '@wordpress/data';
 import { Dropdown, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { safeDecodeURIComponent } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -15,6 +16,11 @@ import PostURL from './index';
 import PostPanelRow from '../post-panel-row';
 import { store as editorStore } from '../../store';
 
+/**
+ * Renders the `PostURLPanel` component.
+ *
+ * @return {JSX.Element} The rendered PostURLPanel component.
+ */
 export default function PostURLPanel() {
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
@@ -53,10 +59,17 @@ export default function PostURLPanel() {
 }
 
 function PostURLToggle( { isOpen, onClick } ) {
-	const slug = useSelect(
-		( select ) => select( editorStore ).getEditedPostSlug(),
-		[]
-	);
+	const { slug, isFrontPage, postLink } = useSelect( ( select ) => {
+		const { getCurrentPostId, getCurrentPost } = select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const siteSettings = getEditedEntityRecord( 'root', 'site' );
+		const _id = getCurrentPostId();
+		return {
+			slug: select( editorStore ).getEditedPostSlug(),
+			isFrontPage: siteSettings?.page_on_front === _id,
+			postLink: getCurrentPost()?.link,
+		};
+	}, [] );
 	const decodedSlug = safeDecodeURIComponent( slug );
 	return (
 		<Button
@@ -68,7 +81,7 @@ function PostURLToggle( { isOpen, onClick } ) {
 			aria-label={ sprintf( __( 'Change link: %s' ), decodedSlug ) }
 			onClick={ onClick }
 		>
-			{ decodedSlug }
+			{ isFrontPage ? postLink : <>/{ decodedSlug }</> }
 		</Button>
 	);
 }

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

@@ -2,15 +2,6 @@
 	width: 100%;
 }
 
-.components-button.editor-post-url__panel-toggle {
-	display: block;
-	max-width: 100%;
-	overflow: hidden;
-	text-align: left;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
 .editor-post-url__panel-dialog .editor-post-url {
 	// sidebar width - popover padding - form margin
 	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;

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

@@ -8,6 +8,15 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Determines if the current post can be edited (published)
+ * and passes this information to the provided render function.
+ *
+ * @param {Object}   props        The component props.
+ * @param {Function} props.render Function to render the component.
+ *                                Receives an object with a `canEdit` property.
+ * @return {JSX.Element} The rendered component.
+ */
 export default function PostVisibilityCheck( { render } ) {
 	const canEdit = useSelect( ( select ) => {
 		return (

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

@@ -17,6 +17,13 @@ import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '
 import { visibilityOptions } from './utils';
 import { store as editorStore } from '../../store';
 
+/**
+ * Allows users to set the visibility of a post.
+ *
+ * @param {Object}   props         The component props.
+ * @param {Function} props.onClose Function to call when the popover is closed.
+ * @return {JSX.Element} The rendered component.
+ */
 export default function PostVisibility( { onClose } ) {
 	const instanceId = useInstanceId( PostVisibility );
 

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

@@ -9,10 +9,20 @@ import { useSelect } from '@wordpress/data';
 import { visibilityOptions } from './utils';
 import { store as editorStore } from '../../store';
 
+/**
+ * Returns the label for the current post visibility setting.
+ *
+ * @return {string} Post visibility label.
+ */
 export default function PostVisibilityLabel() {
 	return usePostVisibilityLabel();
 }
 
+/**
+ * Get the label for the current post visibility setting.
+ *
+ * @return {string} Post visibility label.
+ */
 export function usePostVisibilityLabel() {
 	const visibility = useSelect( ( select ) =>
 		select( editorStore ).getEditedPostVisibility()

package/src/components/posts-per-page/index.js

@@ -0,0 +1,101 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	Button,
+	Dropdown,
+	__experimentalNumberControl as NumberControl,
+} from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
+import { store as editorStore } from '../../store';
+import PostPanelRow from '../post-panel-row';
+
+export default function PostsPerPage() {
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { postsPerPage, isTemplate, postSlug } = useSelect( ( select ) => {
+		const { getEditedPostAttribute, getCurrentPostType } =
+			select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const siteSettings = getEditedEntityRecord( 'root', 'site' );
+		return {
+			isTemplate: getCurrentPostType() === TEMPLATE_POST_TYPE,
+			postSlug: getEditedPostAttribute( 'slug' ),
+			postsPerPage: siteSettings?.posts_per_page || 1,
+		};
+	}, [] );
+	// 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 );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
+	if ( ! isTemplate || ! [ 'home', 'index' ].includes( postSlug ) ) {
+		return null;
+	}
+	const setPostsPerPage = ( newValue ) => {
+		editEntityRecord( 'root', 'site', undefined, {
+			posts_per_page: newValue,
+		} );
+	};
+	return (
+		<PostPanelRow label={ __( 'Posts per page' ) } ref={ setPopoverAnchor }>
+			<Dropdown
+				popoverProps={ popoverProps }
+				contentClassName="editor-posts-per-page-dropdown__content"
+				focusOnMount
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<Button
+						size="compact"
+						variant="tertiary"
+						aria-expanded={ isOpen }
+						aria-label={ __( 'Change posts per page' ) }
+						onClick={ onToggle }
+					>
+						{ postsPerPage }
+					</Button>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<>
+						<InspectorPopoverHeader
+							title={ __( 'Posts per page' ) }
+							onClose={ onClose }
+						/>
+						<NumberControl
+							placeholder={ 0 }
+							value={ postsPerPage }
+							size="__unstable-large"
+							spinControls="custom"
+							step="1"
+							min="1"
+							onChange={ setPostsPerPage }
+							label={ __( 'Posts per page' ) }
+							help={ __(
+								'Set the default number of posts to display on blog pages, including categories and tags. Some templates may override this setting.'
+							) }
+							hideLabelFromVision
+						/>
+					</>
+				) }
+			/>
+		</PostPanelRow>
+	);
+}

package/src/components/posts-per-page/style.scss

@@ -0,0 +1,4 @@
+.editor-posts-per-page-dropdown__content .components-popover__content {
+	min-width: 320px;
+	padding: $grid-unit-20;
+}

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

@@ -6,31 +6,36 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 
-const CONTENT_ONLY_BLOCKS = applyFilters( 'editor.postContentBlockTypes', [
+const DEFAULT_CONTENT_ONLY_BLOCKS = [
 	'core/post-title',
 	'core/post-featured-image',
 	'core/post-content',
 	'core/template-part',
-] );
+];
 
 /**
  * Component that when rendered, makes it so that the site editor allows only
  * page content to be edited.
  */
 export default function DisableNonPageContentBlocks() {
+	const contentOnlyBlocks = applyFilters(
+		'editor.postContentBlockTypes',
+		DEFAULT_CONTENT_ONLY_BLOCKS
+	);
+
 	// Note that there are two separate subscription because the result for each
 	// returns a new array.
 	const contentOnlyIds = useSelect( ( select ) => {
 		const { getBlocksByName, getBlockParents, getBlockName } =
 			select( blockEditorStore );
-		return getBlocksByName( CONTENT_ONLY_BLOCKS ).filter( ( clientId ) =>
+		return getBlocksByName( contentOnlyBlocks ).filter( ( clientId ) =>
 			getBlockParents( clientId ).every( ( parentClientId ) => {
 				const parentBlockName = getBlockName( parentClientId );
 				return (
 					// Ignore descendents of the query block.
 					parentBlockName !== 'core/query' &&
 					// Enable only the top-most block.
-					! CONTENT_ONLY_BLOCKS.includes( parentBlockName )
+					! contentOnlyBlocks.includes( parentBlockName )
 				);
 			} )
 		);

package/src/components/provider/index.js

@@ -30,6 +30,9 @@ import StartPageOptions from '../start-page-options';
 import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
 import ContentOnlySettingsMenu from '../block-settings-menu/content-only-settings-menu';
 import StartTemplateOptions from '../start-template-options';
+import EditorKeyboardShortcuts from '../global-keyboard-shortcuts';
+import PatternRenameModal from '../pattern-rename-modal';
+import PatternDuplicateModal from '../pattern-duplicate-modal';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
@@ -56,6 +59,12 @@ const NON_CONTEXTUAL_POST_TYPES = [
  * @param {Array}   post     Block list.
  * @param {boolean} template Whether the page content has focus (and the surrounding template is inert). If `true` return page content blocks. Default `false`.
  * @param {string}  mode     Rendering mode.
+ *
+ * @example
+ * ```jsx
+ * const [ blocks, onInput, onChange ] = useBlockEditorProps( post, template, mode );
+ * ```
+ *
  * @return {Array} Block editor props.
  */
 function useBlockEditorProps( post, template, mode ) {
@@ -115,6 +124,32 @@ function useBlockEditorProps( post, template, mode ) {
 	];
 }
 
+/**
+ * This component provides the editor context and manages the state of the block editor.
+ *
+ * @param {Object}  props                                The component props.
+ * @param {Object}  props.post                           The post object.
+ * @param {Object}  props.settings                       The editor settings.
+ * @param {boolean} props.recovery                       Indicates if the editor is in recovery mode.
+ * @param {Array}   props.initialEdits                   The initial edits for the editor.
+ * @param {Object}  props.children                       The child components.
+ * @param {Object}  [props.BlockEditorProviderComponent] The block editor provider component to use. Defaults to ExperimentalBlockEditorProvider.
+ * @param {Object}  [props.__unstableTemplate]           The template object.
+ *
+ * @example
+ * ```jsx
+ * <ExperimentalEditorProvider
+ *   post={ post }
+ *   settings={ settings }
+ *   recovery={ recovery }
+ *   initialEdits={ initialEdits }
+ *   __unstableTemplate={ template }
+ * >
+ *   { children }
+ * </ExperimentalEditorProvider>
+ *
+ * @return {Object} The rendered ExperimentalEditorProvider component.
+ */
 export const ExperimentalEditorProvider = withRegistryProvider(
 	( {
 		post,
@@ -273,10 +308,13 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 									{ type === 'wp_navigation' && (
 										<NavigationBlockEditingMode />
 									) }
+									<EditorKeyboardShortcuts />
 									<KeyboardShortcutHelpModal />
 									<BlockRemovalWarnings />
 									<StartPageOptions />
 									<StartTemplateOptions />
+									<PatternRenameModal />
+									<PatternDuplicateModal />
 								</>
 							) }
 						</BlockEditorProviderComponent>
@@ -287,6 +325,36 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 	}
 );
 
+/**
+ * This component establishes a new post editing context, and serves as the entry point for a new post editor (or post with template editor).
+ *
+ * It supports a large number of post types, including post, page, templates,
+ * custom post types, patterns, template parts.
+ *
+ * All modification and changes are performed to the `@wordpress/core-data` store.
+ *
+ * @param {Object}  props                      The component props.
+ * @param {Object}  [props.post]               The post object to edit. This is required.
+ * @param {Object}  [props.__unstableTemplate] The template object wrapper the edited post.
+ *                                             This is optional and can only be used when the post type supports templates (like posts and pages).
+ * @param {Object}  [props.settings]           The settings object to use for the editor.
+ *                                             This is optional and can be used to override the default settings.
+ * @param {Element} [props.children]           Children elements for which the BlockEditorProvider context should apply.
+ *                                             This is optional.
+ *
+ * @example
+ * ```jsx
+ * <EditorProvider
+ *   post={ post }
+ *   settings={ settings }
+ *   __unstableTemplate={ template }
+ * >
+ *   { children }
+ * </EditorProvider>
+ * ```
+ *
+ * @return {JSX.Element} The rendered EditorProvider component.
+ */
 export function EditorProvider( props ) {
 	return (
 		<ExperimentalEditorProvider

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

@@ -21,6 +21,7 @@ import RNReactNativeGutenbergBridge, {
 	subscribeUpdateCapabilities,
 	subscribeShowNotice,
 	subscribeShowEditorHelp,
+	subscribeToContentUpdate,
 } from '@wordpress/react-native-bridge';
 import { Component } from '@wordpress/element';
 import { count as wordCount } from '@wordpress/wordcount';
@@ -30,12 +31,16 @@ import {
 	getUnregisteredTypeHandlerName,
 	getBlockType,
 	createBlock,
+	pasteHandler,
 } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { applyFilters } from '@wordpress/hooks';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { getGlobalStyles, getColorsAndGradients } from '@wordpress/components';
+import {
+	store as blockEditorStore,
+	getGlobalStyles,
+	getColorsAndGradients,
+} from '@wordpress/block-editor';
 import { NEW_BLOCK_TYPES } from '@wordpress/block-library';
 import { __ } from '@wordpress/i18n';
 
@@ -64,6 +69,7 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import EditorProvider from './index.js';
+import { insertContentWithTitle } from '../post-title';
 
 class NativeEditorProvider extends Component {
 	constructor() {
@@ -79,6 +85,7 @@ class NativeEditorProvider extends Component {
 		);
 
 		this.onHardwareBackPress = this.onHardwareBackPress.bind( this );
+		this.onContentUpdate = this.onContentUpdate.bind( this );
 
 		this.getEditorSettings = memize(
 			( settings, capabilities ) => ( {
@@ -197,6 +204,12 @@ class NativeEditorProvider extends Component {
 			this.onHardwareBackPress
 		);
 
+		this.subscriptionOnContentUpdate = subscribeToContentUpdate(
+			( data ) => {
+				this.onContentUpdate( data );
+			}
+		);
+
 		// Request current block impressions from native app.
 		requestBlockTypeImpressions( ( storedImpressions ) => {
 			const impressions = { ...NEW_BLOCK_TYPES, ...storedImpressions };
@@ -260,6 +273,10 @@ class NativeEditorProvider extends Component {
 		if ( this.hardwareBackPressListener ) {
 			this.hardwareBackPressListener.remove();
 		}
+
+		if ( this.subscriptionOnContentUpdate ) {
+			this.subscriptionOnContentUpdate.remove();
+		}
 	}
 
 	getThemeColors( { rawStyles, rawFeatures } ) {
@@ -300,6 +317,21 @@ class NativeEditorProvider extends Component {
 		return false;
 	}
 
+	onContentUpdate( { content: rawContent } ) {
+		const {
+			editTitle,
+			onClearPostTitleSelection,
+			onInsertBlockAfter: onInsertBlocks,
+			title,
+		} = this.props;
+		const content = pasteHandler( {
+			plainText: rawContent,
+		} );
+
+		insertContentWithTitle( title, content, editTitle, onInsertBlocks );
+		onClearPostTitleSelection();
+	}
+
 	serializeToNativeAction() {
 		const title = this.props.title;
 		let html;
@@ -420,11 +452,13 @@ const ComposedNativeProvider = compose( [
 			resetEditorBlocks,
 			updateEditorSettings,
 			switchEditorMode,
+			togglePostTitleSelection,
 		} = dispatch( editorStore );
 		const {
 			clearSelectedBlock,
 			updateSettings,
 			insertBlock,
+			insertBlocks,
 			replaceBlock,
 		} = dispatch( blockEditorStore );
 		const { addEntities, receiveEntityRecords } = dispatch( coreStore );
@@ -436,6 +470,7 @@ const ComposedNativeProvider = compose( [
 			updateEditorSettings,
 			addEntities,
 			insertBlock,
+			insertBlocks,
 			createSuccessNotice,
 			createErrorNotice,
 			clearSelectedBlock,
@@ -451,6 +486,12 @@ const ComposedNativeProvider = compose( [
 			switchMode( mode ) {
 				switchEditorMode( mode );
 			},
+			onInsertBlockAfter( blocks ) {
+				insertBlocks( blocks, undefined, undefined, false );
+			},
+			onClearPostTitleSelection() {
+				togglePostTitleSelection( false );
+			},
 			replaceBlock,
 		};
 	} ),

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

@@ -88,6 +88,9 @@ const BLOCK_EDITOR_SETTINGS = [
 	'__experimentalArchiveTitleNameLabel',
 ];
 
+const { globalStylesDataKey, selectBlockPatternsKey, reusableBlocksSelectKey } =
+	unlock( privateApis );
+
 /**
  * React hook used to compute the block editor settings to use for the post editor.
  *
@@ -256,8 +259,6 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 	}, [ settings.allowedBlockTypes, hiddenBlockTypes, blockTypes ] );
 
 	const forceDisableFocusMode = settings.focusMode === false;
-	const { globalStylesDataKey, selectBlockPatternsKey } =
-		unlock( privateApis );
 
 	return useMemo( () => {
 		const blockEditorSettings = {
@@ -283,8 +284,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 					? patterns
 					: undefined;
 			},
-			[ unlock( privateApis ).reusableBlocksSelectKey ]:
-				__experimentalReusableBlocksSelect,
+			[ reusableBlocksSelectKey ]: __experimentalReusableBlocksSelect,
 			__experimentalBlockPatternCategories: blockPatternCategories,
 			__experimentalUserPatternCategories: userPatternCategories,
 			__experimentalFetchLinkSuggestions: ( search, searchOptions ) =>
@@ -340,8 +340,6 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		setIsInserterOpened,
 		sectionRootClientId,
 		globalStylesData,
-		globalStylesDataKey,
-		selectBlockPatternsKey,
 	] );
 }