@wordpress/editor 13.25.0 → 13.26.0

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

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { PanelBody, PanelRow } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import PostTypeSupportCheck from '../post-type-support-check';
+import PostComments from '../post-comments';
+import PostPingbacks from '../post-pingbacks';
+
+const PANEL_NAME = 'discussion-panel';
+
+function PostDiscussionPanel() {
+	const { isEnabled, isOpened } = useSelect( ( select ) => {
+		const { isEditorPanelEnabled, isEditorPanelOpened } =
+			select( editorStore );
+		return {
+			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
+			isOpened: isEditorPanelOpened( PANEL_NAME ),
+		};
+	}, [] );
+
+	const { toggleEditorPanelOpened } = useDispatch( editorStore );
+
+	if ( ! isEnabled ) {
+		return null;
+	}
+
+	return (
+		<PostTypeSupportCheck supportKeys={ [ 'comments', 'trackbacks' ] }>
+			<PanelBody
+				title={ __( 'Discussion' ) }
+				opened={ isOpened }
+				onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
+			>
+				<PostTypeSupportCheck supportKeys="comments">
+					<PanelRow>
+						<PostComments />
+					</PanelRow>
+				</PostTypeSupportCheck>
+
+				<PostTypeSupportCheck supportKeys="trackbacks">
+					<PanelRow>
+						<PostPingbacks />
+					</PanelRow>
+				</PostTypeSupportCheck>
+			</PanelBody>
+		</PostTypeSupportCheck>
+	);
+}
+
+export default PostDiscussionPanel;

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

@@ -1,9 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
 import PostTypeSupportCheck from '../post-type-support-check';
+import { store as editorStore } from '../../store';
 
 function PostExcerptCheck( { children } ) {
+	const postType = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		return getEditedPostAttribute( 'type' );
+	}, [] );
+
+	// This special case is unfortunate, but the REST API of wp_template and wp_template_part
+	// support the excerpt field throught the "description" field rather than "excerpt" which means
+	// the default ExcerptPanel won't work for these.
+	if ( [ 'wp_template', 'wp_template_part' ].includes( postType ) ) {
+		return null;
+	}
+
 	return (
 		<PostTypeSupportCheck supportKeys="excerpt">
 			{ children }

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

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { PanelBody } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import PostExcerptForm from './index';
+import PostExcerptCheck from './check';
+import PluginPostExcerpt from './plugin';
+import { store as editorStore } from '../../store';
+
+/**
+ * Module Constants
+ */
+const PANEL_NAME = 'post-excerpt';
+
+export default function PostExcerptPanel() {
+	const { isOpened, isEnabled } = useSelect( ( select ) => {
+		const { isEditorPanelOpened, isEditorPanelEnabled } =
+			select( editorStore );
+
+		return {
+			isOpened: isEditorPanelOpened( PANEL_NAME ),
+			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
+		};
+	}, [] );
+
+	const { toggleEditorPanelOpened } = useDispatch( editorStore );
+	const toggleExcerptPanel = () => toggleEditorPanelOpened( PANEL_NAME );
+
+	if ( ! isEnabled ) {
+		return null;
+	}
+
+	return (
+		<PostExcerptCheck>
+			<PanelBody
+				title={ __( 'Excerpt' ) }
+				opened={ isOpened }
+				onToggle={ toggleExcerptPanel }
+			>
+				<PluginPostExcerpt.Slot>
+					{ ( fills ) => (
+						<>
+							<PostExcerptForm />
+							{ fills }
+						</>
+					) }
+				</PluginPostExcerpt.Slot>
+			</PanelBody>
+		</PostExcerptCheck>
+	);
+}

package/src/components/post-excerpt/plugin.js

@@ -0,0 +1,61 @@
+/**
+ * Defines as extensibility slot for the Excerpt panel.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill, PanelRow } from '@wordpress/components';
+
+const { Fill, Slot } = createSlotFill( 'PluginPostExcerpt' );
+
+/**
+ * Renders a post excerpt panel in the post sidebar.
+ *
+ * @param {Object}  props             Component properties.
+ * @param {string}  [props.className] An optional class name added to the row.
+ * @param {Element} props.children    Children to be rendered.
+ *
+ * @example
+ * ```js
+ * // Using ES5 syntax
+ * var __ = wp.i18n.__;
+ * var PluginPostExcerpt = wp.editPost.PluginPostExcerpt;
+ *
+ * function MyPluginPostExcerpt() {
+ * 	return React.createElement(
+ * 		PluginPostExcerpt,
+ * 		{
+ * 			className: 'my-plugin-post-excerpt',
+ * 		},
+ * 		__( 'Post excerpt custom content' )
+ * 	)
+ * }
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { __ } from '@wordpress/i18n';
+ * import { PluginPostExcerpt } from '@wordpress/edit-post';
+ *
+ * const MyPluginPostExcerpt = () => (
+ * 	<PluginPostExcerpt className="my-plugin-post-excerpt">
+ * 		{ __( 'Post excerpt custom content' ) }
+ * 	</PluginPostExcerpt>
+ * );
+ * ```
+ *
+ * @return {Component} The component to be rendered.
+ */
+const PluginPostExcerpt = ( { children, className } ) => {
+	return (
+		<Fill>
+			<PanelRow className={ className }>{ children }</PanelRow>
+		</Fill>
+	);
+};
+
+PluginPostExcerpt.Slot = Slot;
+
+export default PluginPostExcerpt;

package/src/components/post-excerpt/test/plugin.js

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { SlotFillProvider } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PluginPostExcerptPanel from '../plugin';
+
+describe( 'PluginPostExcerptPanel', () => {
+	test( 'renders fill properly', () => {
+		render(
+			<SlotFillProvider>
+				<PluginPostExcerptPanel className="my-plugin-post-excerpt-custom-content">
+					Post Excerpt - Custom content
+				</PluginPostExcerptPanel>
+				<div role="tabpanel">
+					<PluginPostExcerptPanel.Slot />
+				</div>
+			</SlotFillProvider>
+		);
+
+		expect( screen.getByRole( 'tabpanel' ) ).toHaveTextContent(
+			'Post Excerpt - Custom content'
+		);
+		expect(
+			screen.getByText( 'Post Excerpt - Custom content' )
+		).toHaveClass( 'my-plugin-post-excerpt-custom-content' );
+	} );
+} );

package/src/components/post-featured-image/index.js

@@ -98,17 +98,15 @@ function PostFeaturedImage( {
 } ) {
 	const toggleRef = useRef();
 	const [ isLoading, setIsLoading ] = useState( false );
-	const mediaUpload = useSelect( ( select ) => {
-		return select( blockEditorStore ).getSettings().mediaUpload;
-	}, [] );
+	const { getSettings } = useSelect( blockEditorStore );
 	const { mediaWidth, mediaHeight, mediaSourceUrl } = getMediaDetails(
 		media,
 		currentPostId
 	);
 
 	function onDropFiles( filesList ) {
-		mediaUpload( {
-			allowedTypes: [ 'image' ],
+		getSettings().mediaUpload( {
+			allowedTypes: ALLOWED_MEDIA_TYPES,
 			filesList,
 			onFileChange( [ image ] ) {
 				if ( isBlobURL( image?.url ) ) {
@@ -208,8 +206,6 @@ function PostFeaturedImage( {
 										<Button
 											className="editor-post-featured-image__action"
 											onClick={ open }
-											// Prefer that screen readers use the .editor-post-featured-image__preview button.
-											aria-hidden="true"
 										>
 											{ __( 'Replace' ) }
 										</Button>

package/src/components/post-featured-image/panel.js

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { PanelBody } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import PostFeaturedImage from './index';
+import PostFeaturedImageCheck from './check';
+
+const PANEL_NAME = 'featured-image';
+
+function FeaturedImage() {
+	const { postType, isEnabled, isOpened } = useSelect( ( select ) => {
+		const {
+			getEditedPostAttribute,
+			isEditorPanelEnabled,
+			isEditorPanelOpened,
+		} = select( editorStore );
+		const { getPostType } = select( coreStore );
+
+		return {
+			postType: getPostType( getEditedPostAttribute( 'type' ) ),
+			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
+			isOpened: isEditorPanelOpened( PANEL_NAME ),
+		};
+	}, [] );
+
+	const { toggleEditorPanelOpened } = useDispatch( editorStore );
+
+	if ( ! isEnabled ) {
+		return null;
+	}
+
+	return (
+		<PostFeaturedImageCheck>
+			<PanelBody
+				title={
+					postType?.labels?.featured_image ?? __( 'Featured image' )
+				}
+				opened={ isOpened }
+				onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
+			>
+				<PostFeaturedImage />
+			</PanelBody>
+		</PostFeaturedImageCheck>
+	);
+}
+
+export default FeaturedImage;

package/src/components/post-last-revision/panel.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PostLastRevision from './';
+import PostLastRevisionCheck from './check';
+
+function PostLastRevisionPanel() {
+	return (
+		<PostLastRevisionCheck>
+			<PanelBody className="editor-post-last-revision__panel">
+				<PostLastRevision />
+			</PanelBody>
+		</PostLastRevisionCheck>
+	);
+}
+
+export default PostLastRevisionPanel;

package/src/components/post-last-revision/style.scss

@@ -21,3 +21,13 @@
 		border-radius: 0;
 	}
 }
+
+// Needs specificity, because this panel is just a button
+.components-panel__body.is-opened.editor-post-last-revision__panel {
+	padding: 0;
+	height: $grid-unit-60;
+
+	.editor-post-last-revision__title.components-button.components-button {
+		padding: $grid-unit-20;
+	}
+}

package/src/components/post-saved-state/index.js

@@ -17,6 +17,7 @@ import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, check, cloud, cloudUpload } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -27,16 +28,12 @@ import { store as editorStore } from '../../store';
  * Component showing whether the post is saved or not and providing save
  * buttons.
  *
- * @param {Object}   props                Component props.
- * @param {?boolean} props.forceIsDirty   Whether to force the post to be marked
- *                                        as dirty.
- * @param {?boolean} props.showIconLabels Whether interface buttons show labels instead of icons
+ * @param {Object}   props              Component props.
+ * @param {?boolean} props.forceIsDirty Whether to force the post to be marked
+ *                                      as dirty.
  * @return {import('react').ComponentType} The component.
  */
-export default function PostSavedState( {
-	forceIsDirty,
-	showIconLabels = false,
-} ) {
+export default function PostSavedState( { forceIsDirty } ) {
 	const [ forceSavedMessage, setForceSavedMessage ] = useState( false );
 	const isLargeViewport = useViewportMatch( 'small' );
 
@@ -50,6 +47,7 @@ export default function PostSavedState( {
 		isSaving,
 		isScheduled,
 		hasPublishAction,
+		showIconLabels,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -63,6 +61,7 @@ export default function PostSavedState( {
 				isAutosavingPost,
 				getEditedPostAttribute,
 			} = select( editorStore );
+			const { get } = select( preferencesStore );
 
 			return {
 				isAutosaving: isAutosavingPost(),
@@ -75,6 +74,7 @@ export default function PostSavedState( {
 				isScheduled: isCurrentPostScheduled(),
 				hasPublishAction:
 					getCurrentPost()?._links?.[ 'wp:action-publish' ] ?? false,
+				showIconLabels: get( 'core', 'showIconLabels' ),
 			};
 		},
 		[ forceIsDirty ]

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

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import PostTaxonomiesForm from './index';
+import PostTaxonomiesCheck from './check';
+
+function TaxonomyPanel( { taxonomy, children } ) {
+	const slug = taxonomy?.slug;
+	const panelName = slug ? `taxonomy-panel-${ slug }` : '';
+	const { isEnabled, isOpened } = useSelect(
+		( select ) => {
+			const { isEditorPanelEnabled, isEditorPanelOpened } =
+				select( editorStore );
+			return {
+				isEnabled: slug ? isEditorPanelEnabled( panelName ) : false,
+				isOpened: slug ? isEditorPanelOpened( panelName ) : false,
+			};
+		},
+		[ panelName, slug ]
+	);
+	const { toggleEditorPanelOpened } = useDispatch( editorStore );
+
+	if ( ! isEnabled ) {
+		return null;
+	}
+
+	const taxonomyMenuName = taxonomy?.labels?.menu_name;
+	if ( ! taxonomyMenuName ) {
+		return null;
+	}
+
+	return (
+		<PanelBody
+			title={ taxonomyMenuName }
+			opened={ isOpened }
+			onToggle={ () => toggleEditorPanelOpened( panelName ) }
+		>
+			{ children }
+		</PanelBody>
+	);
+}
+
+function PostTaxonomies() {
+	return (
+		<PostTaxonomiesCheck>
+			<PostTaxonomiesForm
+				taxonomyWrapper={ ( content, taxonomy ) => {
+					return (
+						<TaxonomyPanel taxonomy={ taxonomy }>
+							{ content }
+						</TaxonomyPanel>
+					);
+				} }
+			/>
+		</PostTaxonomiesCheck>
+	);
+}
+
+export default PostTaxonomies;

package/src/components/post-template/block-theme.js

@@ -90,7 +90,8 @@ export default function BlockThemeControl( { id } ) {
 					<MenuGroup>
 						<MenuItem
 							icon={ ! isTemplateHidden ? check : undefined }
-							isPressed={ ! isTemplateHidden }
+							isSelected={ ! isTemplateHidden }
+							role="menuitemcheckbox"
 							onClick={ () => {
 								setRenderingMode(
 									isTemplateHidden

package/src/components/post-template/hooks.js

@@ -41,21 +41,21 @@ export function useAllowSwitchingTemplates() {
 	);
 }
 
-function useTemplates() {
+function useTemplates( postType ) {
 	return useSelect(
 		( select ) =>
 			select( coreStore ).getEntityRecords( 'postType', 'wp_template', {
 				per_page: -1,
-				post_type: 'page',
+				post_type: postType,
 			} ),
-		[]
+		[ postType ]
 	);
 }
 
-export function useAvailableTemplates() {
+export function useAvailableTemplates( postType ) {
 	const currentTemplateSlug = useCurrentTemplateSlug();
 	const allowSwitchingTemplate = useAllowSwitchingTemplates();
-	const templates = useTemplates();
+	const templates = useTemplates( postType );
 	return useMemo(
 		() =>
 			allowSwitchingTemplate &&
@@ -71,7 +71,7 @@ export function useAvailableTemplates() {
 
 export function useCurrentTemplateSlug() {
 	const { postType, postId } = useEditedPostContext();
-	const templates = useTemplates();
+	const templates = useTemplates( postType );
 	const entityTemplate = useSelect(
 		( select ) => {
 			const post = select( coreStore ).getEditedEntityRecord(

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

@@ -23,8 +23,7 @@ export default function PostTemplatePanel() {
 		};
 	}, [] );
 
-	const isVisible = true;
-	useSelect( ( select ) => {
+	const isVisible = useSelect( ( select ) => {
 		const postTypeSlug = select( editorStore ).getCurrentPostType();
 		const postType = select( coreStore ).getPostType( postTypeSlug );
 		if ( ! postType?.viewable ) {

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

@@ -18,11 +18,11 @@ import { useAvailableTemplates, useEditedPostContext } from './hooks';
 
 export default function SwapTemplateButton( { onClick } ) {
 	const [ showModal, setShowModal ] = useState( false );
-	const availableTemplates = useAvailableTemplates();
 	const onClose = useCallback( () => {
 		setShowModal( false );
 	}, [] );
 	const { postType, postId } = useEditedPostContext();
+	const availableTemplates = useAvailableTemplates( postType );
 	const { editEntityRecord } = useDispatch( coreStore );
 	if ( ! availableTemplates?.length ) {
 		return null;
@@ -51,7 +51,10 @@ export default function SwapTemplateButton( { onClick } ) {
 					isFullScreen
 				>
 					<div className="editor-post-template__swap-template-modal-content">
-						<TemplatesList onSelect={ onTemplateSelect } />
+						<TemplatesList
+							postType={ postType }
+							onSelect={ onTemplateSelect }
+						/>
 					</div>
 				</Modal>
 			) }
@@ -59,8 +62,8 @@ export default function SwapTemplateButton( { onClick } ) {
 	);
 }
 
-function TemplatesList( { onSelect } ) {
-	const availableTemplates = useAvailableTemplates();
+function TemplatesList( { postType, onSelect } ) {
+	const availableTemplates = useAvailableTemplates( postType );
 	const templatesAsPatterns = useMemo(
 		() =>
 			availableTemplates.map( ( template ) => ( {

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

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;
 }