@wordpress/editor 13.34.0 → 14.0.0

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

@@ -15,6 +15,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.
@@ -68,7 +73,7 @@ function PostURLToggle( { isOpen, onClick } ) {
 			aria-label={ sprintf( __( 'Change link: %s' ), decodedSlug ) }
 			onClick={ onClick }
 		>
-			{ decodedSlug }
+			/{ 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/preferences-modal/index.js

@@ -70,9 +70,9 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
 								scope="core"
 								featureName="showListViewByDefault"
 								help={ __(
-									'Opens the block list view sidebar by default.'
+									'Opens the List View sidebar by default.'
 								) }
-								label={ __( 'Always open list view' ) }
+								label={ __( 'Always open List View' ) }
 							/>
 							{ showBlockBreadcrumbsOption && (
 								<PreferenceToggleControl
@@ -88,7 +88,7 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
 								scope="core"
 								featureName="allowRightClickOverrides"
 								help={ __(
-									'Allows contextual list view menus via right-click, overriding browser defaults.'
+									'Allows contextual List View menus via right-click, overriding browser defaults.'
 								) }
 								label={ __(
 									'Allow right-click contextual menus'

package/src/components/provider/index.js

@@ -28,6 +28,11 @@ import useCommands from '../commands';
 import BlockRemovalWarnings from '../block-removal-warnings';
 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 );
@@ -54,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 ) {
@@ -113,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,
@@ -264,15 +301,20 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 							{ ! settings.__unstableIsPreviewMode && (
 								<>
 									<PatternsMenuItems />
+									<ContentOnlySettingsMenu />
 									{ mode === 'template-locked' && (
 										<DisableNonPageContentBlocks />
 									) }
 									{ type === 'wp_navigation' && (
 										<NavigationBlockEditingMode />
 									) }
+									<EditorKeyboardShortcuts />
 									<KeyboardShortcutHelpModal />
 									<BlockRemovalWarnings />
 									<StartPageOptions />
+									<StartTemplateOptions />
+									<PatternRenameModal />
+									<PatternDuplicateModal />
 								</>
 							) }
 						</BlockEditorProviderComponent>
@@ -283,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

@@ -24,8 +24,10 @@ import inserterMediaCategories from '../media-categories';
 import { mediaUpload } from '../../utils';
 import { store as editorStore } from '../../store';
 import { lock, unlock } from '../../lock-unlock';
+import { useGlobalStylesContext } from '../global-styles-provider';
 
 const EMPTY_BLOCKS_LIST = [];
+const DEFAULT_STYLES = {};
 
 function __experimentalReusableBlocksSelect( select ) {
 	return (
@@ -86,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.
  *
@@ -173,6 +178,9 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		[ postType, postId, isLargeViewport, renderingMode ]
 	);
 
+	const { merged: mergedGlobalStyles } = useGlobalStylesContext();
+	const globalStylesData = mergedGlobalStyles.styles ?? DEFAULT_STYLES;
+
 	const settingsBlockPatterns =
 		settings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
 		settings.__experimentalBlockPatterns; // WP 5.9
@@ -259,6 +267,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 					BLOCK_EDITOR_SETTINGS.includes( key )
 				)
 			),
+			[ globalStylesDataKey ]: globalStylesData,
 			allowedBlockTypes,
 			allowRightClickOverrides,
 			focusMode: focusMode && ! forceDisableFocusMode,
@@ -267,12 +276,15 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			keepCaretInsideBlock,
 			mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
 			__experimentalBlockPatterns: blockPatterns,
-			[ unlock( privateApis ).selectBlockPatternsKey ]: ( select ) =>
-				unlock( select( coreStore ) ).getBlockPatternsForPostType(
-					postType
-				),
-			[ unlock( privateApis ).reusableBlocksSelectKey ]:
-				__experimentalReusableBlocksSelect,
+			[ selectBlockPatternsKey ]: ( select ) => {
+				const { hasFinishedResolution, getBlockPatternsForPostType } =
+					unlock( select( coreStore ) );
+				const patterns = getBlockPatternsForPostType( postType );
+				return hasFinishedResolution( 'getBlockPatterns' )
+					? patterns
+					: undefined;
+			},
+			[ reusableBlocksSelectKey ]: __experimentalReusableBlocksSelect,
 			__experimentalBlockPatternCategories: blockPatternCategories,
 			__experimentalUserPatternCategories: userPatternCategories,
 			__experimentalFetchLinkSuggestions: ( search, searchOptions ) =>
@@ -327,6 +339,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		postType,
 		setIsInserterOpened,
 		sectionRootClientId,
+		globalStylesData,
 	] );
 }
 

package/src/components/provider/with-registry-provider.js

@@ -1,12 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
-import {
-	withRegistry,
-	createRegistry,
-	RegistryProvider,
-} from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { useRegistry, createRegistry, RegistryProvider } from '@wordpress/data';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { storeConfig as blockEditorStoreConfig } from '@wordpress/block-editor';
 
@@ -15,41 +11,46 @@ import { storeConfig as blockEditorStoreConfig } from '@wordpress/block-editor';
  */
 import { storeConfig } from '../../store';
 
+function getSubRegistry( subRegistries, registry, useSubRegistry ) {
+	if ( ! useSubRegistry ) {
+		return registry;
+	}
+	let subRegistry = subRegistries.get( registry );
+	if ( ! subRegistry ) {
+		subRegistry = createRegistry(
+			{
+				'core/block-editor': blockEditorStoreConfig,
+			},
+			registry
+		);
+		// Todo: The interface store should also be created per instance.
+		subRegistry.registerStore( 'core/editor', storeConfig );
+		subRegistries.set( registry, subRegistry );
+	}
+	return subRegistry;
+}
+
 const withRegistryProvider = createHigherOrderComponent(
 	( WrappedComponent ) =>
-		withRegistry( ( props ) => {
-			const {
-				useSubRegistry = true,
+		( { useSubRegistry = true, ...props } ) => {
+			const registry = useRegistry();
+			const [ subRegistries ] = useState( () => new WeakMap() );
+			const subRegistry = getSubRegistry(
+				subRegistries,
 				registry,
-				...additionalProps
-			} = props;
-			if ( ! useSubRegistry ) {
-				return <WrappedComponent { ...additionalProps } />;
-			}
-
-			const [ subRegistry, setSubRegistry ] = useState( null );
-			useEffect( () => {
-				const newRegistry = createRegistry(
-					{
-						'core/block-editor': blockEditorStoreConfig,
-					},
-					registry
-				);
-				// Todo: The interface store should also be created per instance.
-				newRegistry.registerStore( 'core/editor', storeConfig );
-				setSubRegistry( newRegistry );
-			}, [ registry ] );
+				useSubRegistry
+			);
 
-			if ( ! subRegistry ) {
-				return null;
+			if ( subRegistry === registry ) {
+				return <WrappedComponent registry={ registry } { ...props } />;
 			}
 
 			return (
 				<RegistryProvider value={ subRegistry }>
-					<WrappedComponent { ...additionalProps } />
+					<WrappedComponent registry={ subRegistry } { ...props } />
 				</RegistryProvider>
 			);
-		} ),
+		},
 	'withRegistryProvider'
 );