@wordpress/editor 13.25.0 → 13.26.0

package/src/components/post-title/test/__snapshots__/index.native.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PostTitle does not update title with existing content when pasting HTML 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">Howdy</h2>
+<!-- /wp:heading -->
+
+<!-- wp:heading -->
+<h2 class="wp-block-heading">This is a heading.</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>This is a paragraph.</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`PostTitle populates empty title with first block content when pasting HTML 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">This is a heading.</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>This is a paragraph.</p>
+<!-- /wp:paragraph -->"
+`;

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

@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	getEditorTitle,
+	initializeEditor,
+	pasteIntoRichText,
+	selectRangeInRichText,
+	screen,
+	setupCoreBlocks,
+	within,
+} from 'test/helpers';
+
+setupCoreBlocks();
+
+const HTML_MULTIPLE_TAGS = `<h2>Howdy</h2>
+<h2>This is a heading.</h2>
+<p>This is a paragraph.</p>`;
+
+describe( 'PostTitle', () => {
+	it( 'populates empty title with first block content when pasting HTML', async () => {
+		await initializeEditor( { initialTitle: '' } );
+
+		const postTitle = within(
+			screen.getByTestId( 'post-title' )
+		).getByPlaceholderText( 'Add title' );
+		pasteIntoRichText( postTitle, { html: HTML_MULTIPLE_TAGS } );
+
+		expect( console ).toHaveLogged();
+		expect( getEditorTitle() ).toBe( 'Howdy' );
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'does not update title with existing content when pasting HTML', async () => {
+		const initialTitle = 'Hello';
+		await initializeEditor( { initialTitle } );
+
+		const postTitle = within(
+			screen.getByTestId( 'post-title' )
+		).getByPlaceholderText( 'Add title' );
+		selectRangeInRichText( postTitle, 0 );
+		pasteIntoRichText( postTitle, { html: HTML_MULTIPLE_TAGS } );
+
+		expect( console ).toHaveLogged();
+		expect( getEditorTitle() ).toBe( initialTitle );
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'updates title with existing content when pasting text', async () => {
+		await initializeEditor( { initialTitle: 'World' } );
+
+		const postTitle = within(
+			screen.getByTestId( 'post-title' )
+		).getByPlaceholderText( 'Add title' );
+		selectRangeInRichText( postTitle, 0 );
+		pasteIntoRichText( postTitle, { text: 'Hello' } );
+
+		expect( console ).toHaveLogged();
+		expect( getEditorTitle() ).toBe( 'HelloWorld' );
+		expect( getEditorHtml() ).toBe( '' );
+	} );
+
+	it( 'does not add HTML to title when pasting span tag', async () => {
+		const pasteHTML = `<span style="border: 1px solid black">l</span>`;
+		await initializeEditor( { initialTitle: 'Helo' } );
+
+		const postTitle = within(
+			screen.getByTestId( 'post-title' )
+		).getByPlaceholderText( 'Add title' );
+		selectRangeInRichText( postTitle, 2 );
+		pasteIntoRichText( postTitle, { html: pasteHTML } );
+
+		expect( console ).toHaveLogged();
+		expect( getEditorTitle() ).toBe( 'Hello' );
+		expect( getEditorHtml() ).toBe( '' );
+	} );
+} );

package/src/components/post-view-link/index.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { external } from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+export default function PostViewLink() {
+	const { hasLoaded, permalink, isPublished, label, showIconLabels } =
+		useSelect( ( select ) => {
+			// Grab post type to retrieve the view_item label.
+			const postTypeSlug = select( editorStore ).getCurrentPostType();
+			const postType = select( coreStore ).getPostType( postTypeSlug );
+			const { get } = select( preferencesStore );
+
+			return {
+				permalink: select( editorStore ).getPermalink(),
+				isPublished: select( editorStore ).isCurrentPostPublished(),
+				label: postType?.labels.view_item,
+				hasLoaded: !! postType,
+				showIconLabels: get( 'core', 'showIconLabels' ),
+			};
+		}, [] );
+
+	// Only render the view button if the post is published and has a permalink.
+	if ( ! isPublished || ! permalink || ! hasLoaded ) {
+		return null;
+	}
+
+	return (
+		<Button
+			icon={ external }
+			label={ label || __( 'View post' ) }
+			href={ permalink }
+			target="_blank"
+			showTooltip={ ! showIconLabels }
+		/>
+	);
+}

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

@@ -1,26 +1,21 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-export function PostVisibilityCheck( { hasPublishAction, render } ) {
-	const canEdit = hasPublishAction;
+export default function PostVisibilityCheck( { render } ) {
+	const canEdit = useSelect( ( select ) => {
+		return (
+			select( editorStore ).getCurrentPost()._links?.[
+				'wp:action-publish'
+			] ?? false
+		);
+	} );
+
 	return render( { canEdit } );
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		const { getCurrentPost, getCurrentPostType } = select( editorStore );
-		return {
-			hasPublishAction:
-				getCurrentPost()._links?.[ 'wp:action-publish' ] ?? false,
-			postType: getCurrentPostType(),
-		};
-	} ),
-] )( PostVisibilityCheck );

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

@@ -3,32 +3,43 @@
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
 /**
  * Internal dependencies
  */
-import { PostVisibilityCheck } from '../check';
+import PostVisibilityCheck from '../check';
+
+function setupMockSelect( hasPublishAction ) {
+	useSelect.mockImplementation( ( mapSelect ) => {
+		return mapSelect( () => ( {
+			getCurrentPost: () => ( {
+				_links: {
+					'wp:action-publish': hasPublishAction,
+				},
+			} ),
+		} ) );
+	} );
+}
 
 describe( 'PostVisibilityCheck', () => {
 	const renderProp = ( { canEdit } ) => ( canEdit ? 'yes' : 'no' );
 
 	it( "should not render the edit link if the user doesn't have the right capability", () => {
-		render(
-			<PostVisibilityCheck
-				hasPublishAction={ false }
-				render={ renderProp }
-			/>
-		);
+		setupMockSelect( false );
+		render( <PostVisibilityCheck render={ renderProp } /> );
 		expect( screen.queryByText( 'yes' ) ).not.toBeInTheDocument();
 		expect( screen.getByText( 'no' ) ).toBeVisible();
 	} );
 
 	it( 'should render if the user has the correct capability', () => {
-		render(
-			<PostVisibilityCheck
-				hasPublishAction={ true }
-				render={ renderProp }
-			/>
-		);
+		setupMockSelect( true );
+		render( <PostVisibilityCheck render={ renderProp } /> );
 		expect( screen.queryByText( 'no' ) ).not.toBeInTheDocument();
 		expect( screen.getByText( 'yes' ) ).toBeVisible();
 	} );

package/src/components/preview-dropdown/index.js

@@ -13,6 +13,7 @@ import { __ } from '@wordpress/i18n';
 import { check, desktop, mobile, tablet, external } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -20,25 +21,21 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '../../store';
 import PostPreviewButton from '../post-preview-button';
 
-export default function PreviewDropdown( {
-	showIconLabels,
-	forceIsAutosaveable,
-	disabled,
-} ) {
-	const { deviceType, homeUrl, isTemplate, isViewable } = useSelect(
-		( select ) => {
+export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
+	const { deviceType, homeUrl, isTemplate, isViewable, showIconLabels } =
+		useSelect( ( select ) => {
 			const { getDeviceType, getCurrentPostType } = select( editorStore );
 			const { getUnstableBase, getPostType } = select( coreStore );
+			const { get } = select( preferencesStore );
 			const _currentPostType = getCurrentPostType();
 			return {
 				deviceType: getDeviceType(),
 				homeUrl: getUnstableBase()?.home,
 				isTemplate: _currentPostType === 'wp_template',
 				isViewable: getPostType( _currentPostType )?.viewable ?? false,
+				showIconLabels: get( 'core', 'showIconLabels' ),
 			};
-		},
-		[]
-	);
+		}, [] );
 	const { setDeviceType } = useDispatch( editorStore );
 	const isMobile = useViewportMatch( 'medium', '<' );
 	if ( isMobile ) return null;

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

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { BackHandler } from 'react-native';
 import memize from 'memize';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
@@ -79,6 +80,8 @@ class NativeEditorProvider extends Component {
 			this.post
 		);
 
+		this.onHardwareBackPress = this.onHardwareBackPress.bind( this );
+
 		this.getEditorSettings = memize(
 			( settings, capabilities ) => ( {
 				...settings,
@@ -191,6 +194,11 @@ class NativeEditorProvider extends Component {
 			this.setState( { isHelpVisible: true } );
 		} );
 
+		this.hardwareBackPressListener = BackHandler.addEventListener(
+			'hardwareBackPress',
+			this.onHardwareBackPress
+		);
+
 		// Request current block impressions from native app.
 		requestBlockTypeImpressions( ( storedImpressions ) => {
 			const impressions = { ...NEW_BLOCK_TYPES, ...storedImpressions };
@@ -250,6 +258,10 @@ class NativeEditorProvider extends Component {
 		if ( this.subscriptionParentShowEditorHelp ) {
 			this.subscriptionParentShowEditorHelp.remove();
 		}
+
+		if ( this.hardwareBackPressListener ) {
+			this.hardwareBackPressListener.remove();
+		}
 	}
 
 	getThemeColors( { rawStyles, rawFeatures } ) {
@@ -280,6 +292,16 @@ class NativeEditorProvider extends Component {
 		}
 	}
 
+	onHardwareBackPress() {
+		const { clearSelectedBlock, selectedBlockIndex } = this.props;
+
+		if ( selectedBlockIndex !== -1 ) {
+			clearSelectedBlock();
+			return true;
+		}
+		return false;
+	}
+
 	serializeToNativeAction() {
 		const title = this.props.title;
 		let html;
@@ -397,8 +419,12 @@ const ComposedNativeProvider = compose( [
 	withDispatch( ( dispatch ) => {
 		const { editPost, resetEditorBlocks, updateEditorSettings } =
 			dispatch( editorStore );
-		const { updateSettings, insertBlock, replaceBlock } =
-			dispatch( blockEditorStore );
+		const {
+			clearSelectedBlock,
+			updateSettings,
+			insertBlock,
+			replaceBlock,
+		} = dispatch( blockEditorStore );
 		const { switchEditorMode } = dispatch( editPostStore );
 		const { addEntities, receiveEntityRecords } = dispatch( coreStore );
 		const { createSuccessNotice, createErrorNotice } =
@@ -411,6 +437,7 @@ const ComposedNativeProvider = compose( [
 			insertBlock,
 			createSuccessNotice,
 			createErrorNotice,
+			clearSelectedBlock,
 			editTitle( title ) {
 				editPost( { title } );
 			},

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

@@ -9,6 +9,8 @@ import {
 	__experimentalFetchUrlData as fetchUrlData,
 } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -25,7 +27,6 @@ const BLOCK_EDITOR_SETTINGS = [
 	'__experimentalFeatures',
 	'__experimentalGlobalStylesBaseStyles',
 	'__experimentalPreferredStyleVariations',
-	'__experimentalSetIsInserterOpened',
 	'__unstableGalleryWithImageBlocks',
 	'alignWide',
 	'allowedBlockTypes',
@@ -46,20 +47,16 @@ const BLOCK_EDITOR_SETTINGS = [
 	'enableCustomSpacing',
 	'enableCustomUnits',
 	'enableOpenverseMediaCategory',
-	'focusMode',
-	'distractionFree',
 	'fontSizes',
 	'gradients',
 	'generateAnchors',
-	'hasFixedToolbar',
+	'getPostLinkProps',
 	'hasInlineToolbar',
-	'isDistractionFree',
 	'imageDefaultSize',
 	'imageDimensions',
 	'imageEditing',
 	'imageSizes',
 	'isRTL',
-	'keepCaretInsideBlock',
 	'locale',
 	'maxWidth',
 	'onUpdateDefaultBlockStyles',
@@ -88,7 +85,13 @@ const BLOCK_EDITOR_SETTINGS = [
  * @return {Object} Block Editor Settings.
  */
 function useBlockEditorSettings( settings, postType, postId ) {
+	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
+		allowRightClickOverrides,
+		focusMode,
+		hasFixedToolbar,
+		isDistractionFree,
+		keepCaretInsideBlock,
 		reusableBlocks,
 		hasUploadPermissions,
 		canUseUnfilteredHTML,
@@ -110,17 +113,27 @@ function useBlockEditorSettings( settings, postType, postId ) {
 				getBlockPatterns,
 				getBlockPatternCategories,
 			} = select( coreStore );
+			const { get } = select( preferencesStore );
 
 			const siteSettings = canUser( 'read', 'settings' )
 				? getEntityRecord( 'root', 'site' )
 				: undefined;
 
 			return {
+				allowRightClickOverrides: get(
+					'core',
+					'allowRightClickOverrides'
+				),
 				canUseUnfilteredHTML: getRawEntityRecord(
 					'postType',
 					postType,
 					postId
 				)?._links?.hasOwnProperty( 'wp:action-unfiltered-html' ),
+				focusMode: get( 'core', 'focusMode' ),
+				hasFixedToolbar:
+					get( 'core', 'fixedToolbar' ) || ! isLargeViewport,
+				isDistractionFree: get( 'core', 'distractionFree' ),
+				keepCaretInsideBlock: get( 'core', 'keepCaretInsideBlock' ),
 				reusableBlocks: isWeb
 					? getEntityRecords( 'postType', 'wp_block', {
 							per_page: -1,
@@ -135,7 +148,7 @@ function useBlockEditorSettings( settings, postType, postId ) {
 				restBlockPatternCategories: getBlockPatternCategories(),
 			};
 		},
-		[ postType, postId ]
+		[ postType, postId, isLargeViewport ]
 	);
 
 	const settingsBlockPatterns =
@@ -177,7 +190,7 @@ function useBlockEditorSettings( settings, postType, postId ) {
 		[ settingsBlockPatternCategories, restBlockPatternCategories ]
 	);
 
-	const { undo } = useDispatch( editorStore );
+	const { undo, setIsInserterOpened } = useDispatch( editorStore );
 
 	const { saveEntityRecord } = useDispatch( coreStore );
 
@@ -202,6 +215,8 @@ function useBlockEditorSettings( settings, postType, postId ) {
 		[ saveEntityRecord, userCanCreatePages ]
 	);
 
+	const forceDisableFocusMode = settings.focusMode === false;
+
 	return useMemo(
 		() => ( {
 			...Object.fromEntries(
@@ -209,6 +224,11 @@ function useBlockEditorSettings( settings, postType, postId ) {
 					BLOCK_EDITOR_SETTINGS.includes( key )
 				)
 			),
+			allowRightClickOverrides,
+			focusMode: focusMode && ! forceDisableFocusMode,
+			hasFixedToolbar,
+			isDistractionFree,
+			keepCaretInsideBlock,
 			mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
 			__experimentalReusableBlocks: reusableBlocks,
 			__experimentalBlockPatterns: blockPatterns,
@@ -238,8 +258,15 @@ function useBlockEditorSettings( settings, postType, postId ) {
 				postType === 'wp_navigation'
 					? [ [ 'core/navigation', {}, [] ] ]
 					: settings.template,
+			__experimentalSetIsInserterOpened: setIsInserterOpened,
 		} ),
 		[
+			allowRightClickOverrides,
+			focusMode,
+			forceDisableFocusMode,
+			hasFixedToolbar,
+			isDistractionFree,
+			keepCaretInsideBlock,
 			settings,
 			hasUploadPermissions,
 			reusableBlocks,
@@ -253,6 +280,7 @@ function useBlockEditorSettings( settings, postType, postId ) {
 			pageOnFront,
 			pageForPosts,
 			postType,
+			setIsInserterOpened,
 		]
 	);
 }

package/src/private-apis.js

@@ -6,16 +6,26 @@ import { ExperimentalEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
 import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
 import useBlockEditorSettings from './components/provider/use-block-editor-settings';
+import DocumentTools from './components/document-tools';
+import InserterSidebar from './components/inserter-sidebar';
+import ListViewSidebar from './components/list-view-sidebar';
 import PostPanelRow from './components/post-panel-row';
+import PostViewLink from './components/post-view-link';
 import PreviewDropdown from './components/preview-dropdown';
+import PluginPostExcerpt from './components/post-excerpt/plugin';
 
 export const privateApis = {};
 lock( privateApis, {
+	DocumentTools,
 	EditorCanvas,
 	ExperimentalEditorProvider,
 	EntitiesSavedStatesExtensible,
+	InserterSidebar,
+	ListViewSidebar,
 	PostPanelRow,
+	PostViewLink,
 	PreviewDropdown,
+	PluginPostExcerpt,
 
 	// This is a temporary private API while we're updating the site editor to use EditorProvider.
 	useBlockEditorSettings,

package/src/store/actions.js

@@ -611,6 +611,115 @@ export function setDeviceType( deviceType ) {
 	};
 }
 
+/**
+ * Returns an action object used to enable or disable a panel in the editor.
+ *
+ * @param {string} panelName A string that identifies the panel to enable or disable.
+ *
+ * @return {Object} Action object.
+ */
+export const toggleEditorPanelEnabled =
+	( panelName ) =>
+	( { registry } ) => {
+		const inactivePanels =
+			registry
+				.select( preferencesStore )
+				.get( 'core', 'inactivePanels' ) ?? [];
+
+		const isPanelInactive = !! inactivePanels?.includes( panelName );
+
+		// If the panel is inactive, remove it to enable it, else add it to
+		// make it inactive.
+		let updatedInactivePanels;
+		if ( isPanelInactive ) {
+			updatedInactivePanels = inactivePanels.filter(
+				( invactivePanelName ) => invactivePanelName !== panelName
+			);
+		} else {
+			updatedInactivePanels = [ ...inactivePanels, panelName ];
+		}
+
+		registry
+			.dispatch( preferencesStore )
+			.set( 'core', 'inactivePanels', updatedInactivePanels );
+	};
+
+/**
+ * Opens a closed panel and closes an open panel.
+ *
+ * @param {string} panelName A string that identifies the panel to open or close.
+ */
+export const toggleEditorPanelOpened =
+	( panelName ) =>
+	( { registry } ) => {
+		const openPanels =
+			registry.select( preferencesStore ).get( 'core', 'openPanels' ) ??
+			[];
+
+		const isPanelOpen = !! openPanels?.includes( panelName );
+
+		// If the panel is open, remove it to close it, else add it to
+		// make it open.
+		let updatedOpenPanels;
+		if ( isPanelOpen ) {
+			updatedOpenPanels = openPanels.filter(
+				( openPanelName ) => openPanelName !== panelName
+			);
+		} else {
+			updatedOpenPanels = [ ...openPanels, panelName ];
+		}
+
+		registry
+			.dispatch( preferencesStore )
+			.set( 'core', 'openPanels', updatedOpenPanels );
+	};
+
+/**
+ * Returns an action object used to remove a panel from the editor.
+ *
+ * @param {string} panelName A string that identifies the panel to remove.
+ *
+ * @return {Object} Action object.
+ */
+export function removeEditorPanel( panelName ) {
+	return {
+		type: 'REMOVE_PANEL',
+		panelName,
+	};
+}
+
+/**
+ * Returns an action object used to open/close the inserter.
+ *
+ * @param {boolean|Object} value                Whether the inserter should be
+ *                                              opened (true) or closed (false).
+ *                                              To specify an insertion point,
+ *                                              use an object.
+ * @param {string}         value.rootClientId   The root client ID to insert at.
+ * @param {number}         value.insertionIndex The index to insert at.
+ *
+ * @return {Object} Action object.
+ */
+export function setIsInserterOpened( value ) {
+	return {
+		type: 'SET_IS_INSERTER_OPENED',
+		value,
+	};
+}
+
+/**
+ * Returns an action object used to open/close the list view.
+ *
+ * @param {boolean} isOpen A boolean representing whether the list view should be opened or closed.
+ * @return {Object} Action object.
+ */
+export function setIsListViewOpened( isOpen ) {
+	return {
+		type: 'SET_IS_LIST_VIEW_OPENED',
+		isOpen,
+	};
+}
+
 /**
  * Backward compatibility
  */

package/src/store/index.js

@@ -10,6 +10,7 @@ import reducer from './reducer';
 import * as selectors from './selectors';
 import * as actions from './actions';
 import * as privateActions from './private-actions';
+import * as privateSelectors from './private-selectors';
 import { STORE_NAME } from './constants';
 import { unlock } from '../lock-unlock';
 
@@ -39,3 +40,4 @@ export const store = createReduxStore( STORE_NAME, {
 
 register( store );
 unlock( store ).registerPrivateActions( privateActions );
+unlock( store ).registerPrivateSelectors( privateSelectors );