@wordpress/editor 13.24.1 → 13.26.0

package/src/components/post-template/swap-template-button.js

@@ -0,0 +1,86 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useState, useCallback } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+import { MenuItem, Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { parse } from '@wordpress/blocks';
+import { useAsyncList } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { useAvailableTemplates, useEditedPostContext } from './hooks';
+
+export default function SwapTemplateButton( { onClick } ) {
+	const [ showModal, setShowModal ] = useState( false );
+	const onClose = useCallback( () => {
+		setShowModal( false );
+	}, [] );
+	const { postType, postId } = useEditedPostContext();
+	const availableTemplates = useAvailableTemplates( postType );
+	const { editEntityRecord } = useDispatch( coreStore );
+	if ( ! availableTemplates?.length ) {
+		return null;
+	}
+	const onTemplateSelect = async ( template ) => {
+		editEntityRecord(
+			'postType',
+			postType,
+			postId,
+			{ template: template.name },
+			{ undoIgnore: true }
+		);
+		onClose(); // Close the template suggestions modal first.
+		onClick();
+	};
+	return (
+		<>
+			<MenuItem onClick={ () => setShowModal( true ) }>
+				{ __( 'Swap template' ) }
+			</MenuItem>
+			{ showModal && (
+				<Modal
+					title={ __( 'Choose a template' ) }
+					onRequestClose={ onClose }
+					overlayClassName="editor-post-template__swap-template-modal"
+					isFullScreen
+				>
+					<div className="editor-post-template__swap-template-modal-content">
+						<TemplatesList
+							postType={ postType }
+							onSelect={ onTemplateSelect }
+						/>
+					</div>
+				</Modal>
+			) }
+		</>
+	);
+}
+
+function TemplatesList( { postType, onSelect } ) {
+	const availableTemplates = useAvailableTemplates( postType );
+	const templatesAsPatterns = useMemo(
+		() =>
+			availableTemplates.map( ( template ) => ( {
+				name: template.slug,
+				blocks: parse( template.content.raw ),
+				title: decodeEntities( template.title.rendered ),
+				id: template.id,
+			} ) ),
+		[ availableTemplates ]
+	);
+	const shownTemplates = useAsyncList( templatesAsPatterns );
+	return (
+		<BlockPatternsList
+			label={ __( 'Templates' ) }
+			blockPatterns={ templatesAsPatterns }
+			shownPatterns={ shownTemplates }
+			onClickPattern={ onSelect }
+		/>
+	);
+}

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

@@ -7,7 +7,7 @@ import { View } from 'react-native';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { create, insert } from '@wordpress/rich-text';
+import { create, toHTMLString, insert } from '@wordpress/rich-text';
 import { decodeEntities } from '@wordpress/html-entities';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { withFocusOutside } from '@wordpress/components';
@@ -16,6 +16,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { pasteHandler } from '@wordpress/blocks';
 import { store as blockEditorStore, RichText } from '@wordpress/block-editor';
 import { store as editorStore } from '@wordpress/editor';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -57,7 +58,7 @@ class PostTitle extends Component {
 		this.props.onSelect();
 	}
 
-	onPaste( { value, onChange, plainText, html } ) {
+	onPaste( { value, plainText, html } ) {
 		const { title, onInsertBlockAfter, onUpdate } = this.props;
 
 		const content = pasteHandler( {
@@ -65,23 +66,37 @@ class PostTitle extends Component {
 			plainText,
 		} );
 
-		if ( content.length ) {
-			if ( typeof content === 'string' ) {
-				const valueToInsert = create( { html: content } );
-				onChange( insert( value, valueToInsert ) );
+		if ( ! content.length ) {
+			return;
+		}
+
+		if ( typeof content !== 'string' ) {
+			const [ firstBlock ] = content;
+
+			if (
+				! title &&
+				( firstBlock.name === 'core/heading' ||
+					firstBlock.name === 'core/paragraph' )
+			) {
+				// Strip HTML to avoid unwanted HTML being added to the title.
+				// In the majority of cases it is assumed that HTML in the title
+				// is undesirable.
+				const contentNoHTML = stripHTML(
+					firstBlock.attributes.content
+				);
+				onUpdate( contentNoHTML );
+				onInsertBlockAfter( content.slice( 1 ) );
 			} else {
-				const [ firstBlock ] = content;
-				if (
-					! title &&
-					( firstBlock.name === 'core/heading' ||
-						firstBlock.name === 'core/paragraph' )
-				) {
-					onUpdate( firstBlock.attributes.content );
-					onInsertBlockAfter( content.slice( 1 ) );
-				} else {
-					onInsertBlockAfter( content );
-				}
+				onInsertBlockAfter( content );
 			}
+		} else {
+			// Strip HTML to avoid unwanted HTML being added to the title.
+			// In the majority of cases it is assumed that HTML in the title
+			// is undesirable.
+			const contentNoHTML = stripHTML( content );
+
+			const newValue = insert( value, create( { html: contentNoHTML } ) );
+			onUpdate( toHTMLString( { value: newValue } ) );
 		}
 	}
 
@@ -155,7 +170,6 @@ class PostTitle extends Component {
 					tagsToEliminate={ [ 'strong' ] }
 					unstableOnFocus={ this.props.onSelect }
 					onBlur={ this.props.onBlur } // Always assign onBlur as a props.
-					multiline={ false }
 					style={ titleStyles }
 					styles={ styles }
 					fontSize={ 24 }

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

@@ -2,4 +2,5 @@
 .edit-post-text-editor__body .editor-post-title.is-raw-text {
 	margin-bottom: $grid-unit-30;
 	margin-top: 2px; // space for focus outline to appear.
+	max-width: none;
 }

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

@@ -0,0 +1,133 @@
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+import {
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	VisuallyHidden,
+	Icon,
+} from '@wordpress/components';
+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
+ */
+import { store as editorStore } from '../../store';
+import PostPreviewButton from '../post-preview-button';
+
+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;
+
+	const popoverProps = {
+		placement: 'bottom-end',
+	};
+	const toggleProps = {
+		className: 'editor-preview-dropdown__toggle',
+		size: 'compact',
+		showTooltip: ! showIconLabels,
+		disabled,
+		__experimentalIsFocusable: disabled,
+	};
+	const menuProps = {
+		'aria-label': __( 'View options' ),
+	};
+
+	const deviceIcons = {
+		mobile,
+		tablet,
+		desktop,
+	};
+
+	return (
+		<DropdownMenu
+			className="editor-preview-dropdown"
+			popoverProps={ popoverProps }
+			toggleProps={ toggleProps }
+			menuProps={ menuProps }
+			icon={ deviceIcons[ deviceType.toLowerCase() ] }
+			label={ __( 'View' ) }
+			disableOpenOnArrowDown={ disabled }
+		>
+			{ ( { onClose } ) => (
+				<>
+					<MenuGroup>
+						<MenuItem
+							onClick={ () => setDeviceType( 'Desktop' ) }
+							icon={ deviceType === 'Desktop' && check }
+						>
+							{ __( 'Desktop' ) }
+						</MenuItem>
+						<MenuItem
+							onClick={ () => setDeviceType( 'Tablet' ) }
+							icon={ deviceType === 'Tablet' && check }
+						>
+							{ __( 'Tablet' ) }
+						</MenuItem>
+						<MenuItem
+							onClick={ () => setDeviceType( 'Mobile' ) }
+							icon={ deviceType === 'Mobile' && check }
+						>
+							{ __( 'Mobile' ) }
+						</MenuItem>
+					</MenuGroup>
+					{ isTemplate && (
+						<MenuGroup>
+							<MenuItem
+								href={ homeUrl }
+								target="_blank"
+								icon={ external }
+								onClick={ onClose }
+							>
+								{ __( 'View site' ) }
+								<VisuallyHidden as="span">
+									{
+										/* translators: accessibility text */
+										__( '(opens in a new tab)' )
+									}
+								</VisuallyHidden>
+							</MenuItem>
+						</MenuGroup>
+					) }
+					{ isViewable && (
+						<MenuGroup>
+							<PostPreviewButton
+								className="editor-preview-dropdown__button-external"
+								role="menuitem"
+								forceIsAutosaveable={ forceIsAutosaveable }
+								textContent={
+									<>
+										{ __( 'Preview in new tab' ) }
+										<Icon icon={ external } />
+									</>
+								}
+								onPreview={ onClose }
+							/>
+						</MenuGroup>
+					) }
+				</>
+			) }
+		</DropdownMenu>
+	);
+}

package/src/components/preview-dropdown/style.scss

@@ -0,0 +1,5 @@
+.editor-preview-dropdown__button-external {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+}