@wordpress/editor 13.22.0 → 13.24.0

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

@@ -7,18 +7,12 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	forwardRef,
-	useEffect,
-	useImperativeHandle,
-	useRef,
-	useState,
-} from '@wordpress/element';
+import { forwardRef, useState } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
-import { ENTER } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { pasteHandler } from '@wordpress/blocks';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { ENTER } from '@wordpress/keycodes';
+import { pasteHandler } from '@wordpress/blocks';
 import {
 	__unstableUseRichText as useRichText,
 	create,
@@ -31,78 +25,45 @@ import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 /**
  * Internal dependencies
  */
-import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
-
-/**
- * Constants
- */
-const REGEXP_NEWLINES = /[\r\n]+/g;
+import { DEFAULT_CLASSNAMES, REGEXP_NEWLINES } from './constants';
+import usePostTitleFocus from './use-post-title-focus';
+import usePostTitle from './use-post-title';
+import PostTypeSupportCheck from '../post-type-support-check';
 
 function PostTitle( _, forwardedRef ) {
-	const ref = useRef();
+	const { placeholder, hasFixedToolbar } = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		const { getSettings } = select( blockEditorStore );
+		const { titlePlaceholder, hasFixedToolbar: _hasFixedToolbar } =
+			getSettings();
+
+		return {
+			title: getEditedPostAttribute( 'title' ),
+			placeholder: titlePlaceholder,
+			hasFixedToolbar: _hasFixedToolbar,
+		};
+	}, [] );
+
 	const [ isSelected, setIsSelected ] = useState( false );
-	const { editPost } = useDispatch( editorStore );
-	const { insertDefaultBlock, clearSelectedBlock, insertBlocks } =
-		useDispatch( blockEditorStore );
-	const { isCleanNewPost, title, placeholder, hasFixedToolbar } = useSelect(
-		( select ) => {
-			const { getEditedPostAttribute, isCleanNewPost: _isCleanNewPost } =
-				select( editorStore );
-			const { getSettings } = select( blockEditorStore );
-			const { titlePlaceholder, hasFixedToolbar: _hasFixedToolbar } =
-				getSettings();
-
-			return {
-				isCleanNewPost: _isCleanNewPost(),
-				title: getEditedPostAttribute( 'title' ),
-				placeholder: titlePlaceholder,
-				hasFixedToolbar: _hasFixedToolbar,
-			};
-		},
-		[]
-	);
 
-	useImperativeHandle( forwardedRef, () => ( {
-		focus: () => {
-			ref?.current?.focus();
-		},
-	} ) );
+	const { ref: focusRef } = usePostTitleFocus( forwardedRef );
 
-	useEffect( () => {
-		if ( ! ref.current ) {
-			return;
-		}
+	const { title, setTitle: onUpdate } = usePostTitle();
 
-		const { defaultView } = ref.current.ownerDocument;
-		const { name, parent } = defaultView;
-		const ownerDocument =
-			name === 'editor-canvas' ? parent.document : defaultView.document;
-		const { activeElement, body } = ownerDocument;
-
-		// Only autofocus the title when the post is entirely empty. This should
-		// only happen for a new post, which means we focus the title on new
-		// post so the author can start typing right away, without needing to
-		// click anything.
-		if ( isCleanNewPost && ( ! activeElement || body === activeElement ) ) {
-			ref.current.focus();
-		}
-	}, [ isCleanNewPost ] );
+	const [ selection, setSelection ] = useState( {} );
 
-	function onEnterPress() {
-		insertDefaultBlock( undefined, undefined, 0 );
+	const { clearSelectedBlock, insertBlocks, insertDefaultBlock } =
+		useDispatch( blockEditorStore );
+
+	function onChange( value ) {
+		onUpdate( value.replace( REGEXP_NEWLINES, ' ' ) );
 	}
 
 	function onInsertBlockAfter( blocks ) {
 		insertBlocks( blocks, 0 );
 	}
 
-	function onUpdate( newTitle ) {
-		editPost( { title: newTitle } );
-	}
-
-	const [ selection, setSelection ] = useState( {} );
-
 	function onSelect() {
 		setIsSelected( true );
 		clearSelectedBlock();
@@ -113,8 +74,8 @@ function PostTitle( _, forwardedRef ) {
 		setSelection( {} );
 	}
 
-	function onChange( value ) {
-		onUpdate( value.replace( REGEXP_NEWLINES, ' ' ) );
+	function onEnterPress() {
+		insertDefaultBlock( undefined, undefined, 0 );
 	}
 
 	function onKeyDown( event ) {
@@ -170,7 +131,13 @@ function PostTitle( _, forwardedRef ) {
 				( firstBlock.name === 'core/heading' ||
 					firstBlock.name === 'core/paragraph' )
 			) {
-				onUpdate( stripHTML( firstBlock.attributes.content ) );
+				// 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 {
 				onInsertBlockAfter( content );
@@ -180,10 +147,13 @@ function PostTitle( _, forwardedRef ) {
 				...create( { html: title } ),
 				...selection,
 			};
-			const newValue = insert(
-				value,
-				create( { html: stripHTML( content ) } )
-			);
+
+			// 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 } ) );
 			setSelection( {
 				start: newValue.start,
@@ -192,17 +162,9 @@ function PostTitle( _, forwardedRef ) {
 		}
 	}
 
-	// The wp-block className is important for editor styles.
-	// This same block is used in both the visual and the code editor.
-	const className = classnames(
-		'wp-block wp-block-post-title block-editor-block-list__block editor-post-title editor-post-title__input rich-text',
-		{
-			'is-selected': isSelected,
-			'has-fixed-toolbar': hasFixedToolbar,
-		}
-	);
 	const decodedPlaceholder =
 		decodeEntities( placeholder ) || __( 'Add title' );
+
 	const { ref: richTextRef } = useRichText( {
 		value: title,
 		onChange,
@@ -221,15 +183,21 @@ function PostTitle( _, forwardedRef ) {
 				};
 			} );
 		},
-		__unstableDisableFormats: true,
-		preserveWhiteSpace: true,
+		__unstableDisableFormats: false,
+	} );
+
+	// The wp-block className is important for editor styles.
+	// This same block is used in both the visual and the code editor.
+	const className = classnames( DEFAULT_CLASSNAMES, {
+		'is-selected': isSelected,
+		'has-fixed-toolbar': hasFixedToolbar,
 	} );
 
-	/* eslint-disable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
 	return (
+		/* eslint-disable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
 		<PostTypeSupportCheck supportKeys="title">
 			<h1
-				ref={ useMergeRefs( [ richTextRef, ref ] ) }
+				ref={ useMergeRefs( [ richTextRef, focusRef ] ) }
 				contentEditable
 				className={ className }
 				aria-label={ decodedPlaceholder }
@@ -242,8 +210,8 @@ function PostTitle( _, forwardedRef ) {
 				onPaste={ onPaste }
 			/>
 		</PostTypeSupportCheck>
+		/* eslint-enable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
 	);
-	/* eslint-enable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
 }
 
 export default forwardRef( PostTitle );

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

@@ -7,18 +7,14 @@ import { View } from 'react-native';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import {
-	__experimentalRichText as RichText,
-	create,
-	insert,
-} from '@wordpress/rich-text';
+import { create, insert } from '@wordpress/rich-text';
 import { decodeEntities } from '@wordpress/html-entities';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { withFocusOutside } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { pasteHandler } from '@wordpress/blocks';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as blockEditorStore, RichText } from '@wordpress/block-editor';
 import { store as editorStore } from '@wordpress/editor';
 
 /**
@@ -152,7 +148,7 @@ class PostTitle extends Component {
 				accessibilityLabel={ this.getTitle( title, postType ) }
 				accessibilityHint={ __( 'Updates the title.' ) }
 			>
-				<RichText
+				<RichText.Raw
 					setRef={ this.setRef }
 					accessibilityLabel={ this.getTitle( title, postType ) }
 					tagName={ 'p' }
@@ -177,7 +173,7 @@ class PostTitle extends Component {
 					disableEditingMenu={ true }
 					__unstableIsSelected={ this.props.isSelected }
 					__unstableOnCreateUndoLevel={ () => {} }
-				></RichText>
+				/>
 			</View>
 		);
 	}

package/src/components/post-title/post-title-raw.js

@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { TextareaControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useState, forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { DEFAULT_CLASSNAMES, REGEXP_NEWLINES } from './constants';
+import usePostTitleFocus from './use-post-title-focus';
+import usePostTitle from './use-post-title';
+
+function PostTitleRaw( _, forwardedRef ) {
+	const { placeholder, hasFixedToolbar } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const { titlePlaceholder, hasFixedToolbar: _hasFixedToolbar } =
+			getSettings();
+
+		return {
+			placeholder: titlePlaceholder,
+			hasFixedToolbar: _hasFixedToolbar,
+		};
+	}, [] );
+
+	const [ isSelected, setIsSelected ] = useState( false );
+
+	const { title, setTitle: onUpdate } = usePostTitle();
+	const { ref: focusRef } = usePostTitleFocus( forwardedRef );
+
+	function onChange( value ) {
+		onUpdate( value.replace( REGEXP_NEWLINES, ' ' ) );
+	}
+
+	function onSelect() {
+		setIsSelected( true );
+	}
+
+	function onUnselect() {
+		setIsSelected( false );
+	}
+
+	// The wp-block className is important for editor styles.
+	// This same block is used in both the visual and the code editor.
+	const className = classnames( DEFAULT_CLASSNAMES, {
+		'is-selected': isSelected,
+		'has-fixed-toolbar': hasFixedToolbar,
+		'is-raw-text': true,
+	} );
+
+	const decodedPlaceholder =
+		decodeEntities( placeholder ) || __( 'Add title' );
+
+	return (
+		<TextareaControl
+			ref={ focusRef }
+			value={ title }
+			onChange={ onChange }
+			onFocus={ onSelect }
+			onBlur={ onUnselect }
+			label={ placeholder }
+			className={ className }
+			placeholder={ decodedPlaceholder }
+			hideLabelFromVision={ true }
+			autoComplete="off"
+			dir="auto"
+			rows={ 1 }
+			__nextHasNoMarginBottom
+		/>
+	);
+}
+
+export default forwardRef( PostTitleRaw );

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

@@ -0,0 +1,5 @@
+// Raw Text Variant
+.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.
+}

package/src/components/post-title/use-post-title-focus.js

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useImperativeHandle, useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+export default function usePostTitleFocus( forwardedRef ) {
+	const ref = useRef();
+
+	const { isCleanNewPost } = useSelect( ( select ) => {
+		const { isCleanNewPost: _isCleanNewPost } = select( editorStore );
+
+		return {
+			isCleanNewPost: _isCleanNewPost(),
+		};
+	}, [] );
+
+	useImperativeHandle( forwardedRef, () => ( {
+		focus: () => {
+			ref?.current?.focus();
+		},
+	} ) );
+
+	useEffect( () => {
+		if ( ! ref.current ) {
+			return;
+		}
+
+		const { defaultView } = ref.current.ownerDocument;
+		const { name, parent } = defaultView;
+		const ownerDocument =
+			name === 'editor-canvas' ? parent.document : defaultView.document;
+		const { activeElement, body } = ownerDocument;
+
+		// Only autofocus the title when the post is entirely empty. This should
+		// only happen for a new post, which means we focus the title on new
+		// post so the author can start typing right away, without needing to
+		// click anything.
+		if ( isCleanNewPost && ( ! activeElement || body === activeElement ) ) {
+			ref.current.focus();
+		}
+	}, [ isCleanNewPost ] );
+
+	return { ref };
+}

package/src/components/post-title/use-post-title.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+export default function usePostTitle() {
+	const { editPost } = useDispatch( editorStore );
+	const { title } = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+
+		return {
+			title: getEditedPostAttribute( 'title' ),
+		};
+	}, [] );
+
+	function updateTitle( newTitle ) {
+		editPost( { title: newTitle } );
+	}
+
+	return { title, setTitle: updateTitle };
+}

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

@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useState } from '@wordpress/element';
+import { Dropdown, Button } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PostURLCheck from './check';
+import PostURL from './index';
+import { usePostURLLabel } from './label';
+import PostPanelRow from '../post-panel-row';
+
+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.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( { anchor: popoverAnchor, placement: 'bottom-end' } ),
+		[ popoverAnchor ]
+	);
+
+	return (
+		<PostURLCheck>
+			<PostPanelRow label={ __( 'URL' ) } 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>
+		</PostURLCheck>
+	);
+}
+
+function PostURLToggle( { isOpen, onClick } ) {
+	const label = usePostURLLabel();
+	return (
+		<Button
+			className="editor-post-url__panel-toggle"
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			// translators: %s: Current post URL.
+			aria-label={ sprintf( __( 'Change URL: %s' ), label ) }
+			onClick={ onClick }
+		>
+			{ label }
+		</Button>
+	);
+}

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

@@ -1,3 +1,22 @@
+.editor-post-url__panel-dropdown {
+	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;
+	margin: $grid-unit-10;
+}
+
 .editor-post-url__link-label {
 	font-size: $default-font-size;
 	font-weight: 400;

package/src/components/provider/README.md

@@ -0,0 +1,37 @@
+# EditorProvider
+
+EditorProvider is a component which 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 big 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.
+
+## Props
+
+### `post`
+
+-   **Type:** `Object`
+-   **Required** `yes`
+
+The post object to edit
+
+### `__unstableTemplate`
+
+-   **Type:** `Object`
+-   **Required** `no`
+
+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).
+
+### `settings`
+
+-   **Type:** `Object`
+-   **Required** `no`
+
+The settings object to use for the editor. This is optional and can be used to override the default settings.
+
+### `children`
+
+-   **Type:** `Element`
+-   **Required** `no`
+
+Children elements for which the BlockEditorProvider context should apply.

package/src/components/provider/constants.js

@@ -0,0 +1,5 @@
+export const PAGE_CONTENT_BLOCK_TYPES = [
+	'core/post-title',
+	'core/post-featured-image',
+	'core/post-content',
+];

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

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	useBlockEditingMode,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { PAGE_CONTENT_BLOCK_TYPES } from './constants';
+
+function DisableBlock( { clientId } ) {
+	const isDescendentOfQueryLoop = useSelect(
+		( select ) => {
+			const { getBlockParentsByBlockName } = select( blockEditorStore );
+			return (
+				getBlockParentsByBlockName( clientId, 'core/query' ).length !==
+				0
+			);
+		},
+		[ clientId ]
+	);
+	const mode = isDescendentOfQueryLoop ? undefined : 'contentOnly';
+	const { setBlockEditingMode, unsetBlockEditingMode } =
+		useDispatch( blockEditorStore );
+	useEffect( () => {
+		if ( mode ) {
+			setBlockEditingMode( clientId, mode );
+			return () => {
+				unsetBlockEditingMode( clientId );
+			};
+		}
+	}, [ clientId, mode, setBlockEditingMode, unsetBlockEditingMode ] );
+}
+
+/**
+ * Component that when rendered, makes it so that the site editor allows only
+ * page content to be edited.
+ */
+export default function DisableNonPageContentBlocks() {
+	useBlockEditingMode( 'disabled' );
+	const clientIds = useSelect( ( select ) => {
+		const { __experimentalGetGlobalBlocksByName } =
+			select( blockEditorStore );
+		return __experimentalGetGlobalBlocksByName( PAGE_CONTENT_BLOCK_TYPES );
+	}, [] );
+
+	return clientIds.map( ( clientId ) => {
+		return <DisableBlock key={ clientId } clientId={ clientId } />;
+	} );
+}