@wordpress/editor 13.24.1 → 13.26.0

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-publish-button/index.js

@@ -176,6 +176,7 @@ export class PostPublishButton extends Component {
 			className: 'editor-post-publish-panel__toggle',
 			isBusy: isSaving && isPublished,
 			variant: 'primary',
+			size: 'compact',
 			onClick: this.createOnClick( onClickToggle ),
 		};
 

package/src/components/post-publish-panel/maybe-upload-media.js

@@ -10,7 +10,6 @@ import {
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { upload } from '@wordpress/icons';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 import { isBlobURL } from '@wordpress/blob';
@@ -135,7 +134,7 @@ export default function PostFormatPanel() {
 		<PanelBody initialOpen={ true } title={ panelBodyTitle }>
 			<p>
 				{ __(
-					'There are some external images in the post which can be uploaded to the media library. Images coming from different domains may not always display correctly, load slowly for visitors, or be removed unexpectedly.'
+					'Upload external images to the Media Library. Images from different domains may load slowly, display incorrectly, or be removed unexpectedly.'
 				) }
 			</p>
 			<div
@@ -153,12 +152,8 @@ export default function PostFormatPanel() {
 				{ isUploading ? (
 					<Spinner />
 				) : (
-					<Button
-						icon={ upload }
-						variant="primary"
-						onClick={ uploadImages }
-					>
-						{ __( 'Upload all' ) }
+					<Button variant="primary" onClick={ uploadImages }>
+						{ __( 'Upload' ) }
 					</Button>
 				) }
 			</div>

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 ]
@@ -168,6 +168,7 @@ export default function PostSavedState( {
 				}
 				onClick={ isDisabled ? undefined : () => savePost() }
 				variant="tertiary"
+				size="compact"
 				icon={ isLargeViewport ? undefined : cloudUpload }
 				// Make sure the aria-label has always a value, as the default `text` is undefined on small screens.
 				aria-label={ buttonAccessibleLabel }

package/src/components/post-saved-state/test/__snapshots__/index.js.snap

@@ -4,7 +4,7 @@ exports[`PostSavedState returns a disabled button if the post is not saveable 1`
 <button
   aria-disabled="true"
   aria-label="Save draft"
-  class="components-button is-tertiary has-icon"
+  class="components-button is-compact is-tertiary has-icon"
   type="button"
 >
   <svg
@@ -26,7 +26,7 @@ exports[`PostSavedState should return Save button if edits to be saved 1`] = `
 <button
   aria-disabled="false"
   aria-label="Save draft"
-  class="components-button editor-post-save-draft is-tertiary"
+  class="components-button editor-post-save-draft is-compact is-tertiary"
   type="button"
 >
   Save draft

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

@@ -49,7 +49,7 @@ export default function PostSchedulePanel() {
 								label
 							) }
 							label={ fullLabel }
-							showTooltip
+							showTooltip={ label !== fullLabel }
 							aria-expanded={ isOpen }
 						>
 							{ label }

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

@@ -0,0 +1,110 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useEntityRecord } from '@wordpress/core-data';
+import { check } from '@wordpress/icons';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import SwapTemplateButton from './swap-template-button';
+import ResetDefaultTemplate from './reset-default-template';
+import { unlock } from '../../lock-unlock';
+import CreateNewTemplate from './create-new-template';
+
+const POPOVER_PROPS = {
+	className: 'editor-post-template__dropdown',
+	placement: 'bottom-start',
+};
+
+export default function BlockThemeControl( { id } ) {
+	const { isTemplateHidden } = useSelect( ( select ) => {
+		const { getRenderingMode } = unlock( select( editorStore ) );
+		return {
+			isTemplateHidden: getRenderingMode() === 'post-only',
+		};
+	}, [] );
+	const { editedRecord: template, hasResolved } = useEntityRecord(
+		'postType',
+		'wp_template',
+		id
+	);
+	const { getEditorSettings } = useSelect( editorStore );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+	const { setRenderingMode } = useDispatch( editorStore );
+
+	if ( ! hasResolved ) {
+		return null;
+	}
+
+	return (
+		<DropdownMenu
+			popoverProps={ POPOVER_PROPS }
+			focusOnMount
+			toggleProps={ {
+				variant: 'tertiary',
+			} }
+			label={ __( 'Template options' ) }
+			text={ decodeEntities( template.title ) }
+			icon={ null }
+		>
+			{ ( { onClose } ) => (
+				<>
+					<MenuGroup>
+						<MenuItem
+							onClick={ () => {
+								setRenderingMode( 'template-only' );
+								onClose();
+								createSuccessNotice(
+									__(
+										'Editing template. Changes made here affect all posts and pages that use the template.'
+									),
+									{
+										type: 'snackbar',
+										actions: [
+											{
+												label: __( 'Go back' ),
+												onClick: () =>
+													setRenderingMode(
+														getEditorSettings()
+															.defaultRenderingMode
+													),
+											},
+										],
+									}
+								);
+							} }
+						>
+							{ __( 'Edit template' ) }
+						</MenuItem>
+						<SwapTemplateButton onClick={ onClose } />
+						<ResetDefaultTemplate onClick={ onClose } />
+						<CreateNewTemplate onClick={ onClose } />
+					</MenuGroup>
+					<MenuGroup>
+						<MenuItem
+							icon={ ! isTemplateHidden ? check : undefined }
+							isSelected={ ! isTemplateHidden }
+							role="menuitemcheckbox"
+							onClick={ () => {
+								setRenderingMode(
+									isTemplateHidden
+										? 'template-locked'
+										: 'post-only'
+								);
+							} }
+						>
+							{ __( 'Template preview' ) }
+						</MenuItem>
+					</MenuGroup>
+				</>
+			) }
+		</DropdownMenu>
+	);
+}