@wordpress/editor 13.33.0 → 13.35.0

package/src/components/post-last-edited-panel/index.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalText as Text } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { humanTimeDiff } from '@wordpress/date';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+export default function PostLastEditedPanel() {
+	const modified = useSelect(
+		( select ) =>
+			select( editorStore ).getEditedPostAttribute( 'modified' ),
+		[]
+	);
+	const lastEditedText =
+		modified &&
+		sprintf(
+			// translators: %s: Human-readable time difference, e.g. "2 days ago".
+			__( 'Last edited %s.' ),
+			humanTimeDiff( modified )
+		);
+	if ( ! lastEditedText ) {
+		return null;
+	}
+	return (
+		<div className="editor-post-last-edited-panel">
+			<Text>{ lastEditedText }</Text>
+		</div>
+	);
+}

package/src/components/post-last-edited-panel/style.scss

@@ -0,0 +1,6 @@
+.editor-post-last-edited-panel {
+	color: $gray-700;
+	& .components-text {
+		color: inherit;
+	}
+}

package/src/components/post-last-revision/test/check.js

@@ -21,7 +21,11 @@ function setupDataMock( id, count ) {
 			getCurrentPostLastRevisionId: () => id,
 			getCurrentPostRevisionsCount: () => count,
 			getEditedPostAttribute: () => null,
-			getPostType: () => null,
+			getPostType: () => ( {
+				supports: {
+					revisions: true,
+				},
+			} ),
 		} ) )
 	);
 }

package/src/components/post-panel-row/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,7 +12,7 @@ import { forwardRef } from '@wordpress/element';
 const PostPanelRow = forwardRef( ( { className, label, children }, ref ) => {
 	return (
 		<HStack
-			className={ classnames( 'editor-post-panel__row', className ) }
+			className={ clsx( 'editor-post-panel__row', className ) }
 			ref={ ref }
 		>
 			{ label && (

package/src/components/post-panel-row/style.scss

@@ -1,6 +1,6 @@
 .editor-post-panel__row {
 	width: 100%;
-	min-height: $button-size-next-default-40px;
+	min-height: $grid-unit-40;
 	justify-content: flex-start !important;
 	align-items: flex-start !important;
 }
@@ -8,14 +8,14 @@
 .editor-post-panel__row-label {
 	width: 30%;
 	flex-shrink: 0;
-	min-height: $button-size-next-default-40px;
+	min-height: $grid-unit-40;
 	display: flex;
 	align-items: center;
 }
 
 .editor-post-panel__row-control {
 	flex-grow: 1;
-	min-height: $button-size-next-default-40px;
+	min-height: $grid-unit-40;
 	display: flex;
 	align-items: center;
 }

package/src/components/post-panel-section/index.js

@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+
+function PostPanelSection( { className, children } ) {
+	return (
+		<VStack className={ clsx( 'editor-post-panel__section', className ) }>
+			{ children }
+		</VStack>
+	);
+}
+
+export default PostPanelSection;

package/src/components/post-panel-section/style.scss

@@ -0,0 +1,3 @@
+.editor-post-panel__section {
+	padding: $grid-unit-20;
+}

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from '@wordpress/components';
+import { CheckboxControl, ExternalLink } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
@@ -26,9 +26,18 @@ function PostPingbacks() {
 	return (
 		<CheckboxControl
 			__nextHasNoMarginBottom
-			label={ __( 'Allow pingbacks & trackbacks' ) }
+			label={ __( 'Enable pingbacks & trackbacks' ) }
 			checked={ pingStatus === 'open' }
 			onChange={ onTogglePingback }
+			help={
+				<ExternalLink
+					href={ __(
+						'https://wordpress.org/documentation/article/trackbacks-and-pingbacks/'
+					) }
+				>
+					{ __( 'Learn more about pingbacks & trackbacks' ) }
+				</ExternalLink>
+			}
 		/>
 	);
 }

package/src/components/post-publish-button/post-publish-button-or-toggle.js

@@ -0,0 +1,102 @@
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch, compose } from '@wordpress/compose';
+import { withDispatch, withSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import PostPublishButton from './index';
+import { store as editorStore } from '../../store';
+
+export function PostPublishButtonOrToggle( {
+	forceIsDirty,
+	hasPublishAction,
+	isBeingScheduled,
+	isPending,
+	isPublished,
+	isPublishSidebarEnabled,
+	isPublishSidebarOpened,
+	isScheduled,
+	togglePublishSidebar,
+	setEntitiesSavedStatesCallback,
+	postStatusHasChanged,
+	postStatus,
+} ) {
+	const IS_TOGGLE = 'toggle';
+	const IS_BUTTON = 'button';
+	const isSmallerThanMediumViewport = useViewportMatch( 'medium', '<' );
+	let component;
+
+	/**
+	 * Conditions to show a BUTTON (publish directly) or a TOGGLE (open publish sidebar):
+	 *
+	 * 1) We want to show a BUTTON when the post status is at the _final stage_
+	 * for a particular role (see https://wordpress.org/documentation/article/post-status/):
+	 *
+	 * - is published
+	 * - post status has changed explicitely to something different than 'future' or 'publish'
+	 * - is scheduled to be published
+	 * - is pending and can't be published (but only for viewports >= medium).
+	 * 	 Originally, we considered showing a button for pending posts that couldn't be published
+	 * 	 (for example, for an author with the contributor role). Some languages can have
+	 * 	 long translations for "Submit for review", so given the lack of UI real estate available
+	 * 	 we decided to take into account the viewport in that case.
+	 *  	 See: https://github.com/WordPress/gutenberg/issues/10475
+	 *
+	 * 2) Then, in small viewports, we'll show a TOGGLE.
+	 *
+	 * 3) Finally, we'll use the publish sidebar status to decide:
+	 *
+	 * - if it is enabled, we show a TOGGLE
+	 * - if it is disabled, we show a BUTTON
+	 */
+	if (
+		isPublished ||
+		( postStatusHasChanged &&
+			! [ 'future', 'publish' ].includes( postStatus ) ) ||
+		( isScheduled && isBeingScheduled ) ||
+		( isPending && ! hasPublishAction && ! isSmallerThanMediumViewport )
+	) {
+		component = IS_BUTTON;
+	} else if ( isSmallerThanMediumViewport || isPublishSidebarEnabled ) {
+		component = IS_TOGGLE;
+	} else {
+		component = IS_BUTTON;
+	}
+
+	return (
+		<PostPublishButton
+			forceIsDirty={ forceIsDirty }
+			isOpen={ isPublishSidebarOpened }
+			isToggle={ component === IS_TOGGLE }
+			onToggle={ togglePublishSidebar }
+			setEntitiesSavedStatesCallback={ setEntitiesSavedStatesCallback }
+		/>
+	);
+}
+
+export default compose(
+	withSelect( ( select ) => ( {
+		hasPublishAction:
+			select( editorStore ).getCurrentPost()?._links?.[
+				'wp:action-publish'
+			] ?? false,
+		isBeingScheduled: select( editorStore ).isEditedPostBeingScheduled(),
+		isPending: select( editorStore ).isCurrentPostPending(),
+		isPublished: select( editorStore ).isCurrentPostPublished(),
+		isPublishSidebarEnabled:
+			select( editorStore ).isPublishSidebarEnabled(),
+		isPublishSidebarOpened: select( editorStore ).isPublishSidebarOpened(),
+		isScheduled: select( editorStore ).isCurrentPostScheduled(),
+		postStatus: select( editorStore ).getEditedPostAttribute( 'status' ),
+		postStatusHasChanged: select( editorStore ).getPostEdits()?.status,
+	} ) ),
+	withDispatch( ( dispatch ) => {
+		const { togglePublishSidebar } = dispatch( editorStore );
+		return {
+			togglePublishSidebar,
+		};
+	} )
+)( PostPublishButtonOrToggle );

package/src/components/post-publish-button/test/post-publish-button-or-toggle.js

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { PostPublishButtonOrToggle } from '../post-publish-button-or-toggle';
+
+jest.mock( '@wordpress/compose/src/hooks/use-viewport-match' );
+
+describe( 'PostPublishButtonOrToggle should render a', () => {
+	afterEach( () => {
+		useViewportMatch.mockRestore();
+	} );
+
+	it( 'button when the post is published (1)', () => {
+		render( <PostPublishButtonOrToggle isPublished /> );
+		expect(
+			screen.getByRole( 'button', { name: 'Submit for Review' } )
+		).toBeVisible();
+	} );
+
+	it( 'button when the post is scheduled (2)', () => {
+		render( <PostPublishButtonOrToggle isScheduled isBeingScheduled /> );
+		expect(
+			screen.getByRole( 'button', { name: 'Submit for Review' } )
+		).toBeVisible();
+	} );
+
+	it( 'button when the post is pending and cannot be published but the viewport is >= medium (3)', () => {
+		render(
+			<PostPublishButtonOrToggle isPending hasPublishAction={ false } />
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: 'Submit for Review' } )
+		).toBeVisible();
+	} );
+
+	it( 'toggle when post is not (1), (2), (3), the viewport is <= medium, and the publish sidebar is enabled', () => {
+		useViewportMatch.mockReturnValue( true );
+		render( <PostPublishButtonOrToggle isPublishSidebarEnabled /> );
+		expect(
+			screen.getByRole( 'button', { name: 'Publish' } )
+		).toBeVisible();
+	} );
+
+	it( 'button when post is not (1), (2), (3), the viewport is >= medium, and the publish sidebar is disabled', () => {
+		render(
+			<PostPublishButtonOrToggle isPublishSidebarEnabled={ false } />
+		);
+		expect(
+			screen.getByRole( 'button', { name: 'Submit for Review' } )
+		).toBeVisible();
+	} );
+} );

package/src/components/post-publish-panel/style.scss

@@ -119,6 +119,11 @@
 	.editor-post-visibility__dialog-legend {
 		display: none;
 	}
+
+	.components-panel__body-title .components-button {
+		align-items: flex-start;
+		text-wrap: pretty;
+	}
 }
 
 .post-publish-panel__postpublish .components-panel__body {
@@ -188,3 +193,46 @@
 		}
 	}
 }
+
+.edit-post-layout,
+.edit-site-editor__interface-skeleton {
+	.editor-post-publish-panel {
+		position: fixed;
+		z-index: z-index(".edit-post-layout .edit-post-post-publish-panel");
+		top: $admin-bar-height-big;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		overflow: auto;
+
+		@include break-medium() {
+			z-index: z-index(".edit-post-layout .edit-post-post-publish-panel {greater than small}");
+			top: $admin-bar-height;
+			left: auto;
+			width: $sidebar-width + $border-width;
+			border-left: $border-width solid $gray-300;
+			transform: translateX(+100%);
+			animation: editor-post-publish-panel__slide-in-animation 0.1s forwards;
+			@include reduce-motion("animation");
+
+			body.is-fullscreen-mode & {
+				top: 0;
+			}
+
+			// Keep it open on focus to avoid conflict with navigate-regions animation.
+			[role="region"]:focus & {
+				transform: translateX(0%);
+			}
+		}
+	}
+
+	.editor-post-publish-panel__header-publish-button {
+		justify-content: center;
+	}
+}
+
+@keyframes editor-post-publish-panel__slide-in-animation {
+	100% {
+		transform: translateX(0%);
+	}
+}