@wordpress/editor 13.23.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,14 +183,21 @@ function PostTitle( _, forwardedRef ) {
 				};
 			} );
 		},
-		__unstableDisableFormats: 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 }
@@ -241,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/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

@@ -2,11 +2,7 @@
  * WordPress dependencies
  */
 import { useMemo, useState } from '@wordpress/element';
-import {
-	__experimentalHStack as HStack,
-	Dropdown,
-	Button,
-} from '@wordpress/components';
+import { Dropdown, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -15,6 +11,7 @@ import { __, sprintf } from '@wordpress/i18n';
 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
@@ -28,8 +25,7 @@ export default function PostURLPanel() {
 
 	return (
 		<PostURLCheck>
-			<HStack className="editor-post-url__panel" ref={ setPopoverAnchor }>
-				<span>{ __( 'URL' ) }</span>
+			<PostPanelRow label={ __( 'URL' ) } ref={ setPopoverAnchor }>
 				<Dropdown
 					popoverProps={ popoverProps }
 					className="editor-post-url__panel-dropdown"
@@ -42,7 +38,7 @@ export default function PostURLPanel() {
 						<PostURL onClose={ onClose } />
 					) }
 				/>
-			</HStack>
+			</PostPanelRow>
 		</PostURLCheck>
 	);
 }

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

@@ -1,16 +1,5 @@
-.editor-post-url__panel {
-	width: 100%;
-	justify-content: flex-start;
-	align-items: flex-start;
-
-	span {
-		display: block;
-		width: 30%;
-	}
-}
-
 .editor-post-url__panel-dropdown {
-	width: 70%;
+	width: 100%;
 }
 
 .components-button.editor-post-url__panel-toggle {

package/src/components/provider/README.md

@@ -22,19 +22,6 @@ The post object to edit
 
 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).
 
-### `mode`
-
--   **Type:** `String`
--   **Required** `no`
--   **default** `all`
-
-This is the rendering mode of the post editor. We support multiple rendering modes:
-
--   `all`: This is the default mode. It renders the post editor with all the features available. If a template is provided, it's preferred over the post.
--   `template-only`: This mode renders the editor with only the template blocks visible.
--   `post-only`: This mode extracts the post blocks from the template and renders only those. The idea is to allow the user to edit the post/page in isolation without the wrapping template.
--   `template-locked`: This mode renders both the template and the post blocks but the template blocks are locked and can't be edited. The post blocks are editable.
-
 ### `settings`
 
 -   **Type:** `Object`

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 } />;
+	} );
+}

package/src/components/provider/index.js

@@ -22,16 +22,13 @@ import withRegistryProvider from './with-registry-provider';
 import { store as editorStore } from '../../store';
 import useBlockEditorSettings from './use-block-editor-settings';
 import { unlock } from '../../lock-unlock';
+import DisableNonPageContentBlocks from './disable-non-page-content-blocks';
+import { PAGE_CONTENT_BLOCK_TYPES } from './constants';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
 
 const noop = () => {};
-export const PAGE_CONTENT_BLOCK_TYPES = [
-	'core/post-title',
-	'core/post-featured-image',
-	'core/post-content',
-];
 
 /**
  * For the Navigation block editor, we need to force the block editor to contentOnly for that block.
@@ -128,6 +125,10 @@ function useBlockEditorProps( post, template, mode ) {
 		}
 
 		if ( mode === 'post-only' ) {
+			const postContentBlocks =
+				extractPageContentBlockTypesFromTemplateBlocks(
+					templateBlocks
+				);
 			return [
 				createBlock(
 					'core/group',
@@ -141,9 +142,12 @@ function useBlockEditorProps( post, template, mode ) {
 							},
 						},
 					},
-					extractPageContentBlockTypesFromTemplateBlocks(
-						templateBlocks
-					)
+					postContentBlocks.length
+						? postContentBlocks
+						: [
+								createBlock( 'core/post-title' ),
+								createBlock( 'core/post-content' ),
+						  ]
 				),
 			];
 		}
@@ -181,7 +185,6 @@ function useBlockEditorProps( post, template, mode ) {
 
 export const ExperimentalEditorProvider = withRegistryProvider(
 	( {
-		mode = 'all',
 		post,
 		settings,
 		recovery,
@@ -190,6 +193,10 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		BlockEditorProviderComponent = ExperimentalBlockEditorProvider,
 		__unstableTemplate: template,
 	} ) => {
+		const mode = useSelect(
+			( select ) => select( editorStore ).getRenderingMode(),
+			[]
+		);
 		const shouldRenderTemplate = !! template && mode !== 'post-only';
 		const rootLevelPost = shouldRenderTemplate ? template : post;
 		const defaultBlockContext = useMemo( () => {
@@ -308,6 +315,9 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 						>
 							{ children }
 							<PatternsMenuItems />
+							{ [ 'post-only', 'template-locked' ].includes(
+								mode
+							) && <DisableNonPageContentBlocks /> }
 						</BlockEditorProviderComponent>
 					</BlockContextProvider>
 				</EntityProvider>

package/src/private-apis.js

@@ -5,11 +5,13 @@ 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 PostPanelRow from './components/post-panel-row';
 
 export const privateApis = {};
 lock( privateApis, {
 	ExperimentalEditorProvider,
 	EntitiesSavedStatesExtensible,
+	PostPanelRow,
 
 	// This is a temporary private API while we're updating the site editor to use EditorProvider.
 	useBlockEditorSettings,

package/src/store/actions.js

@@ -548,6 +548,27 @@ export function updateEditorSettings( settings ) {
 	};
 }
 
+/**
+ * Returns an action used to set the rendering mode of the post editor. We support multiple rendering modes:
+ *
+ * -   `all`: This is the default mode. It renders the post editor with all the features available. If a template is provided, it's preferred over the post.
+ * -   `template-only`: This mode renders the editor with only the template blocks visible.
+ * -   `post-only`: This mode extracts the post blocks from the template and renders only those. The idea is to allow the user to edit the post/page in isolation without the wrapping template.
+ * -   `template-locked`: This mode renders both the template and the post blocks but the template blocks are locked and can't be edited. The post blocks are editable.
+ *
+ * @param {string} mode Mode (one of 'template-only', 'post-only', 'template-locked' or 'all').
+ */
+export const setRenderingMode =
+	( mode ) =>
+	( { dispatch, registry } ) => {
+		registry.dispatch( blockEditorStore ).clearSelectedBlock();
+
+		dispatch( {
+			type: 'SET_RENDERING_MODE',
+			mode,
+		} );
+	};
+
 /**
  * Backward compatibility
  */

package/src/store/reducer.js

@@ -279,6 +279,15 @@ export function editorSettings( state = EDITOR_SETTINGS_DEFAULTS, action ) {
 	return state;
 }
 
+export function renderingMode( state = 'all', action ) {
+	switch ( action.type ) {
+		case 'SET_RENDERING_MODE':
+			return action.mode;
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	postId,
 	postType,
@@ -290,4 +299,5 @@ export default combineReducers( {
 	isReady,
 	editorSettings,
 	postAutosavingLock,
+	renderingMode,
 } );

package/src/store/selectors.js

@@ -1188,6 +1188,17 @@ export function getEditorSettings( state ) {
 	return state.editorSettings;
 }
 
+/**
+ * Returns the post editor's rendering mode.
+ *
+ * @param {Object} state Editor state.
+ *
+ * @return {string} Rendering mode.
+ */
+export function getRenderingMode( state ) {
+	return state.renderingMode;
+}
+
 /*
  * Backward compatibility
  */