@wordpress/editor 13.27.1 → 13.28.0

package/src/components/list-view-sidebar/index.js

@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { __experimentalListView as ListView } from '@wordpress/block-editor';
-import { Button, TabPanel } from '@wordpress/components';
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { focus } from '@wordpress/dom';
@@ -19,6 +22,8 @@ import ListViewOutline from './list-view-outline';
 import { unlock } from '../../lock-unlock';
 import { store as editorStore } from '../../store';
 
+const { Tabs } = unlock( componentsPrivateApis );
+
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editorStore );
 	const { getListViewToggleRef } = unlock( useSelect( editorStore ) );
@@ -51,7 +56,7 @@ export default function ListViewSidebar() {
 	// This ref refers to the sidebar as a whole.
 	const sidebarRef = useRef();
 	// This ref refers to the tab panel.
-	const tabPanelRef = useRef();
+	const tabsRef = useRef();
 	// This ref refers to the list view application area.
 	const listViewRef = useRef();
 
@@ -71,7 +76,7 @@ export default function ListViewSidebar() {
 	 */
 	function handleSidebarFocus( currentTab ) {
 		// Tab panel focus.
-		const tabPanelFocus = focus.tabbable.find( tabPanelRef.current )[ 0 ];
+		const tabPanelFocus = focus.tabbable.find( tabsRef.current )[ 0 ];
 		// List view tab is selected.
 		if ( currentTab === 'list-view' ) {
 			// Either focus the list view or the tab panel. Must have a fallback because the list view does not render when there are no blocks.
@@ -108,22 +113,6 @@ export default function ListViewSidebar() {
 	// It is the same shortcut to open but that is defined as a global shortcut and only fires when the sidebar is closed.
 	useShortcut( 'core/editor/toggle-list-view', handleToggleListViewShortcut );
 
-	/**
-	 * Render tab content for a given tab name.
-	 *
-	 * @param {string} tabName The name of the tab to render.
-	 */
-	function renderTabContent( tabName ) {
-		if ( tabName === 'list-view' ) {
-			return (
-				<div className="editor-list-view-sidebar__list-view-panel-content">
-					<ListView dropZoneElement={ dropZoneElement } />
-				</div>
-			);
-		}
-		return <ListViewOutline />;
-	}
-
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
@@ -131,39 +120,63 @@ export default function ListViewSidebar() {
 			onKeyDown={ closeOnEscape }
 			ref={ sidebarRef }
 		>
-			<Button
-				className="editor-list-view-sidebar__close-button"
-				icon={ closeSmall }
-				label={ __( 'Close' ) }
-				onClick={ closeListView }
-			/>
-			<TabPanel
-				className="editor-list-view-sidebar__tab-panel"
-				ref={ tabPanelRef }
+			<Tabs
 				onSelect={ ( tabName ) => setTab( tabName ) }
 				selectOnMove={ false }
-				tabs={ [
-					{
-						name: 'list-view',
-						title: _x( 'List View', 'Post overview' ),
-						className: 'editor-list-view-sidebar__panel-tab',
-					},
-					{
-						name: 'outline',
-						title: _x( 'Outline', 'Post overview' ),
-						className: 'editor-list-view-sidebar__panel-tab',
-					},
-				] }
+				// The initial tab value is set explicitly to avoid an initial
+				// render where no tab is selected. This ensures that the
+				// tabpanel height is correct so the relevant scroll container
+				// can be rendered internally.
+				initialTabId="list-view"
 			>
-				{ ( currentTab ) => (
-					<div
-						className="editor-list-view-sidebar__list-view-container"
-						ref={ listViewContainerRef }
+				<div className="edit-post-editor__document-overview-panel__header">
+					<Button
+						className="editor-list-view-sidebar__close-button"
+						icon={ closeSmall }
+						label={ __( 'Close' ) }
+						onClick={ closeListView }
+					/>
+					<Tabs.TabList
+						className="editor-list-view-sidebar__tabs-tablist"
+						ref={ tabsRef }
 					>
-						{ renderTabContent( currentTab.name ) }
+						<Tabs.Tab
+							className="editor-list-view-sidebar__tabs-tab"
+							tabId="list-view"
+						>
+							{ _x( 'List View', 'Post overview' ) }
+						</Tabs.Tab>
+						<Tabs.Tab
+							className="editor-list-view-sidebar__tabs-tab"
+							tabId="outline"
+						>
+							{ _x( 'Outline', 'Post overview' ) }
+						</Tabs.Tab>
+					</Tabs.TabList>
+				</div>
+
+				<Tabs.TabPanel
+					ref={ listViewContainerRef }
+					className="editor-list-view-sidebar__tabs-tabpanel"
+					tabId="list-view"
+					focusable={ false }
+				>
+					<div className="editor-list-view-sidebar__list-view-container">
+						<div className="editor-list-view-sidebar__list-view-panel-content">
+							<ListView dropZoneElement={ dropZoneElement } />
+						</div>
+					</div>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel
+					className="editor-list-view-sidebar__tabs-tabpanel"
+					tabId="outline"
+					focusable={ false }
+				>
+					<div className="editor-list-view-sidebar__list-view-container">
+						<ListViewOutline />
 					</div>
-				) }
-			</TabPanel>
+				</Tabs.TabPanel>
+			</Tabs>
 		</div>
 	);
 }

package/src/components/list-view-sidebar/style.scss

@@ -8,32 +8,31 @@
 		// @see packages/block-editor/src/components/inserter/style.scss
 		width: 350px;
 	}
-
+	.edit-post-editor__document-overview-panel__header {
+		display: flex;
+		border-bottom: $border-width solid $gray-300;
+	}
 	.editor-list-view-sidebar__close-button {
-		position: absolute;
-		right: $grid-unit-10;
-		top: math.div($grid-unit-60 - $button-size, 2); // ( tab height - button size ) / 2
-		z-index: 1;
 		background: $white;
+		order: 1;
+		align-self: center;
+		margin-right: $grid-unit-10;
 	}
+}
 
-	// The TabPanel style overrides in the following blocks should be removed when the new TabPanel is available.
-	.components-tab-panel__tabs {
-		border-bottom: $border-width solid $gray-300;
-		box-sizing: border-box;
-		display: flex;
-		width: 100%;
-		padding-right: $grid-unit-70;
+.editor-list-view-sidebar__tabs-tablist {
+	box-sizing: border-box;
+	flex-grow: 1;
 
-		.editor-list-view-sidebar__panel-tab {
-			width: 50%;
-			margin-bottom: -$border-width;
-		}
-	}
+}
 
-	.components-tab-panel__tab-content {
-		height: calc(100% - #{$grid-unit-60 - $border-width});
-	}
+.editor-list-view-sidebar__tabs-tab {
+	width: 50%;
+	margin-bottom: -$border-width;
+}
+
+.editor-list-view-sidebar__tabs-tabpanel {
+	height: calc(100% - #{$grid-unit-60 - $border-width});
 }
 
 .editor-list-view-sidebar__list-view-panel-content,
@@ -82,3 +81,4 @@
 		color: $gray-700;
 	}
 }
+

package/src/components/post-author/combobox.js

@@ -2,71 +2,22 @@
  * WordPress dependencies
  */
 import { debounce } from '@wordpress/compose';
-import { useState, useMemo } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { ComboboxControl } from '@wordpress/components';
-import { decodeEntities } from '@wordpress/html-entities';
-import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
-import { AUTHORS_QUERY } from './constants';
+import { useAuthorsQuery } from './hook';
 
-function PostAuthorCombobox() {
+export default function PostAuthorCombobox() {
 	const [ fieldValue, setFieldValue ] = useState();
 
-	const { authorId, isLoading, authors, postAuthor } = useSelect(
-		( select ) => {
-			const { getUser, getUsers, isResolving } = select( coreStore );
-			const { getEditedPostAttribute } = select( editorStore );
-			const author = getUser( getEditedPostAttribute( 'author' ), {
-				context: 'view',
-			} );
-			const query = { ...AUTHORS_QUERY };
-
-			if ( fieldValue ) {
-				query.search = fieldValue;
-			}
-
-			return {
-				authorId: getEditedPostAttribute( 'author' ),
-				postAuthor: author,
-				authors: getUsers( query ),
-				isLoading: isResolving( 'core', 'getUsers', [ query ] ),
-			};
-		},
-		[ fieldValue ]
-	);
 	const { editPost } = useDispatch( editorStore );
-
-	const authorOptions = useMemo( () => {
-		const fetchedAuthors = ( authors ?? [] ).map( ( author ) => {
-			return {
-				value: author.id,
-				label: decodeEntities( author.name ),
-			};
-		} );
-
-		// Ensure the current author is included in the dropdown list.
-		const foundAuthor = fetchedAuthors.findIndex(
-			( { value } ) => postAuthor?.id === value
-		);
-
-		if ( foundAuthor < 0 && postAuthor ) {
-			return [
-				{
-					value: postAuthor.id,
-					label: decodeEntities( postAuthor.name ),
-				},
-				...fetchedAuthors,
-			];
-		}
-
-		return fetchedAuthors;
-	}, [ authors, postAuthor ] );
+	const { authorId, authorOptions } = useAuthorsQuery( fieldValue );
 
 	/**
 	 * Handle author selection.
@@ -89,10 +40,6 @@ function PostAuthorCombobox() {
 		setFieldValue( inputValue );
 	};
 
-	if ( ! postAuthor ) {
-		return null;
-	}
-
 	return (
 		<ComboboxControl
 			__nextHasNoMarginBottom
@@ -102,10 +49,7 @@ function PostAuthorCombobox() {
 			value={ authorId }
 			onFilterValueChange={ debounce( handleKeydown, 300 ) }
 			onChange={ handleSelect }
-			isLoading={ isLoading }
 			allowReset={ false }
 		/>
 	);
 }
-
-export default PostAuthorCombobox;

package/src/components/post-author/constants.js

@@ -1,6 +1,10 @@
+export const BASE_QUERY = {
+	_fields: 'id,name',
+	context: 'view', // Allows non-admins to perform requests.
+};
+
 export const AUTHORS_QUERY = {
 	who: 'authors',
 	per_page: 50,
-	_fields: 'id,name',
-	context: 'view', // Allows non-admins to perform requests.
+	...BASE_QUERY,
 };

package/src/components/post-author/hook.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { AUTHORS_QUERY, BASE_QUERY } from './constants';
+
+export function useAuthorsQuery( search ) {
+	const { authorId, authors, postAuthor } = useSelect(
+		( select ) => {
+			const { getUser, getUsers } = select( coreStore );
+			const { getEditedPostAttribute } = select( editorStore );
+			const _authorId = getEditedPostAttribute( 'author' );
+			const query = { ...AUTHORS_QUERY };
+
+			if ( search ) {
+				query.search = search;
+			}
+
+			return {
+				authorId: _authorId,
+				authors: getUsers( query ),
+				postAuthor: getUser( _authorId, BASE_QUERY ),
+			};
+		},
+		[ search ]
+	);
+
+	const authorOptions = useMemo( () => {
+		const fetchedAuthors = ( authors ?? [] ).map( ( author ) => {
+			return {
+				value: author.id,
+				label: decodeEntities( author.name ),
+			};
+		} );
+
+		// Ensure the current author is included in the dropdown list.
+		const foundAuthor = fetchedAuthors.findIndex(
+			( { value } ) => postAuthor?.id === value
+		);
+
+		if ( foundAuthor < 0 && postAuthor ) {
+			return [
+				{
+					value: postAuthor.id,
+					label: decodeEntities( postAuthor.name ),
+				},
+				...fetchedAuthors,
+			];
+		}
+
+		return fetchedAuthors;
+	}, [ authors, postAuthor ] );
+
+	return { authorId, authorOptions };
+}

package/src/components/post-author/select.js

@@ -2,36 +2,18 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { decodeEntities } from '@wordpress/html-entities';
+import { useDispatch } from '@wordpress/data';
 import { SelectControl } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
-import { AUTHORS_QUERY } from './constants';
+import { useAuthorsQuery } from './hook';
 
-function PostAuthorSelect() {
+export default function PostAuthorSelect() {
 	const { editPost } = useDispatch( editorStore );
-	const { postAuthor, authors } = useSelect( ( select ) => {
-		return {
-			postAuthor:
-				select( editorStore ).getEditedPostAttribute( 'author' ),
-			authors: select( coreStore ).getUsers( AUTHORS_QUERY ),
-		};
-	}, [] );
-
-	const authorOptions = useMemo( () => {
-		return ( authors ?? [] ).map( ( author ) => {
-			return {
-				value: author.id,
-				label: decodeEntities( author.name ),
-			};
-		} );
-	}, [ authors ] );
+	const { authorId, authorOptions } = useAuthorsQuery();
 
 	const setAuthorId = ( value ) => {
 		const author = Number( value );
@@ -46,9 +28,7 @@ function PostAuthorSelect() {
 			label={ __( 'Author' ) }
 			options={ authorOptions }
 			onChange={ setAuthorId }
-			value={ postAuthor }
+			value={ authorId }
 		/>
 	);
 }
-
-export default PostAuthorSelect;

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { sprintf, _n } from '@wordpress/i18n';
+import { sprintf, __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { backup } from '@wordpress/icons';
@@ -31,13 +31,13 @@ function LastRevision() {
 				} ) }
 				className="editor-post-last-revision__title"
 				icon={ backup }
-			>
-				{ sprintf(
-					/* translators: %d: number of revisions */
-					_n( '%d Revision', '%d Revisions', revisionsCount ),
+				iconPosition="right"
+				text={ sprintf(
+					/* translators: %s: number of revisions */
+					__( 'Revisions (%s)' ),
 					revisionsCount
 				) }
-			</Button>
+			/>
 		</PostLastRevisionCheck>
 	);
 }

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

@@ -1,14 +1,11 @@
 .editor-post-last-revision__title {
 	width: 100%;
-	font-weight: 600;
-
-	.dashicon {
-		margin-right: 5px;
-	}
+	font-weight: 500;
 }
 
-.components-button.editor-post-last-revision__title {
+.editor-post-last-revision__title.components-button.has-icon {
 	height: 100%;
+	justify-content: space-between;
 
 	&:hover,
 	&:active {

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

@@ -1,6 +1,6 @@
 .editor-post-panel__row {
 	width: 100%;
-	min-height: $button-size;
+	min-height: $button-size-next-default-40px;
 	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;
+	min-height: $button-size-next-default-40px;
 	display: flex;
 	align-items: center;
 }
 
 .editor-post-panel__row-control {
 	flex-grow: 1;
-	min-height: $button-size;
+	min-height: $button-size-next-default-40px;
 	display: flex;
 	align-items: center;
 }

package/src/components/post-publish-panel/maybe-tags-panel.js

@@ -2,9 +2,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
-import { compose, ifCondition } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import { PanelBody } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -34,12 +33,26 @@ const TagsPanel = () => {
 	);
 };
 
-class MaybeTagsPanel extends Component {
-	constructor( props ) {
-		super( props );
-		this.state = {
-			hadTagsWhenOpeningThePanel: props.hasTags,
+const MaybeTagsPanel = () => {
+	const { hasTags, isPostTypeSupported } = useSelect( ( select ) => {
+		const postType = select( editorStore ).getCurrentPostType();
+		const tagsTaxonomy = select( coreStore ).getTaxonomy( 'post_tag' );
+		const _isPostTypeSupported = tagsTaxonomy?.types?.includes( postType );
+		const areTagsFetched = tagsTaxonomy !== undefined;
+		const tags =
+			tagsTaxonomy &&
+			select( editorStore ).getEditedPostAttribute(
+				tagsTaxonomy.rest_base
+			);
+		return {
+			hasTags: !! tags?.length,
+			isPostTypeSupported: areTagsFetched && _isPostTypeSupported,
 		};
+	}, [] );
+	const [ hadTagsWhenOpeningThePanel ] = useState( hasTags );
+
+	if ( ! isPostTypeSupported ) {
+		return null;
 	}
 
 	/*
@@ -52,34 +65,11 @@ class MaybeTagsPanel extends Component {
 	 * hiding this panel and keeping the user from adding
 	 * more than one tag.
 	 */
-	render() {
-		if ( ! this.state.hadTagsWhenOpeningThePanel ) {
-			return <TagsPanel />;
-		}
-
-		return null;
+	if ( ! hadTagsWhenOpeningThePanel ) {
+		return <TagsPanel />;
 	}
-}
 
-export default compose(
-	withSelect( ( select ) => {
-		const postType = select( editorStore ).getCurrentPostType();
-		const tagsTaxonomy = select( coreStore ).getTaxonomy( 'post_tag' );
-		const tags =
-			tagsTaxonomy &&
-			select( editorStore ).getEditedPostAttribute(
-				tagsTaxonomy.rest_base
-			);
-		return {
-			areTagsFetched: tagsTaxonomy !== undefined,
-			isPostTypeSupported:
-				tagsTaxonomy &&
-				tagsTaxonomy.types.some( ( type ) => type === postType ),
-			hasTags: tags && tags.length,
-		};
-	} ),
-	ifCondition(
-		( { areTagsFetched, isPostTypeSupported } ) =>
-			isPostTypeSupported && areTagsFetched
-	)
-)( MaybeTagsPanel );
+	return null;
+};
+
+export default MaybeTagsPanel;

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

@@ -152,7 +152,9 @@
 	}
 
 	input[readonly] {
-		padding: $grid-unit-20;
+		// Do not increase top and bottom padding otherwise Firefox won't show the text overflow ellipsis.
+		// See https://github.com/WordPress/gutenberg/pull/57310
+		padding: $grid-unit-15;
 		background: $gray-100;
 		border-color: $gray-400;
 		overflow: hidden;

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

@@ -102,7 +102,7 @@ function getTimezoneAbbreviation() {
 	}
 
 	const symbol = timezone.offset < 0 ? '' : '+';
-	return `UTC${ symbol }${ timezone.offset }`;
+	return `UTC${ symbol }${ timezone.offsetFormatted }`;
 }
 
 function isTimezoneSameAsSiteTimezone( date ) {

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

@@ -40,6 +40,7 @@ export default function PostSchedulePanel() {
 					contentClassName="editor-post-schedule__dialog"
 					renderToggle={ ( { onToggle, isOpen } ) => (
 						<Button
+							__next40pxDefaultSize
 							className="editor-post-schedule__dialog-toggle"
 							variant="tertiary"
 							onClick={ onToggle }