@wordpress/editor 13.34.0 → 14.0.0

package/src/components/post-actions/export-pattern-action.js

@@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import { paramCase as kebabCase } from 'change-case';
+import { downloadZip } from 'client-zip';
+
+/**
+ * WordPress dependencies
+ */
+import { downloadBlob } from '@wordpress/blob';
+import { __ } from '@wordpress/i18n';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+// Patterns.
+const { PATTERN_TYPES } = unlock( patternsPrivateApis );
+
+function getJsonFromItem( item ) {
+	return JSON.stringify(
+		{
+			__file: item.type,
+			title: item.title || item.name,
+			content: item.patternPost.content.raw,
+			syncStatus: item.patternPost.wp_pattern_sync_status,
+		},
+		null,
+		2
+	);
+}
+
+export const exportPatternAsJSONAction = {
+	id: 'export-pattern',
+	label: __( 'Export as JSON' ),
+	supportsBulk: true,
+	isEligible: ( item ) => {
+		if ( ! item.type ) {
+			return false;
+		}
+		return item.type === PATTERN_TYPES.user;
+	},
+	callback: async ( items ) => {
+		if ( items.length === 1 ) {
+			return downloadBlob(
+				`${ kebabCase( items[ 0 ].title || items[ 0 ].name ) }.json`,
+				getJsonFromItem( items[ 0 ] ),
+				'application/json'
+			);
+		}
+		const nameCount = {};
+		const filesToZip = items.map( ( item ) => {
+			const name = kebabCase( item.title || item.name );
+			nameCount[ name ] = ( nameCount[ name ] || 0 ) + 1;
+			return {
+				name: `${
+					name +
+					( nameCount[ name ] > 1
+						? '-' + ( nameCount[ name ] - 1 )
+						: '' )
+				}.json`,
+				lastModified: new Date(),
+				input: getJsonFromItem( item ),
+			};
+		} );
+		return downloadBlob(
+			__( 'patterns-export' ) + '.zip',
+			await downloadZip( filesToZip ).blob(),
+			'application/zip'
+		);
+	},
+};

package/src/components/post-actions/export-pattern-action.native.js

@@ -0,0 +1,4 @@
+// Client-zip is meant to be used in a browser and is therefore released as an ES6 module only,
+// in order for the native build to succeed we are importing a null action and avoiding importing
+// the non working in native context client-zip module.
+export const exportPatternAsJSONAction = null;

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

@@ -10,6 +10,7 @@ import {
 	Modal,
 } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -17,11 +18,6 @@ import { moreVertical } from '@wordpress/icons';
 import { unlock } from '../../lock-unlock';
 import { usePostActions } from './actions';
 import { store as editorStore } from '../../store';
-import {
-	TEMPLATE_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
-	PATTERN_POST_TYPE,
-} from '../../store/constants';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -31,36 +27,22 @@ const {
 	kebabCase,
 } = unlock( componentsPrivateApis );
 
-let POST_ACTIONS_WHILE_EDITING = [
-	'view-post',
-	'view-post-revisions',
-	'rename-post',
-	'move-to-trash',
-];
-
-if ( process.env.IS_GUTENBERG_PLUGIN ) {
-	POST_ACTIONS_WHILE_EDITING = [
-		'view-post',
-		'view-post-revisions',
-		'duplicate-post',
-		'rename-post',
-		'move-to-trash',
-	];
-}
-
 export default function PostActions( { onActionPerformed, buttonProps } ) {
 	const [ isActionsMenuOpen, setIsActionsMenuOpen ] = useState( false );
-	const { postType, item } = useSelect( ( select ) => {
-		const { getCurrentPostType, getCurrentPost } = select( editorStore );
+	const { item, postType } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const _postType = getCurrentPostType();
 		return {
-			postType: getCurrentPostType(),
-			item: getCurrentPost(),
+			item: getEditedEntityRecord(
+				'postType',
+				_postType,
+				getCurrentPostId()
+			),
+			postType: _postType,
 		};
-	} );
-	const allActions = usePostActions(
-		onActionPerformed,
-		POST_ACTIONS_WHILE_EDITING
-	);
+	}, [] );
+	const allActions = usePostActions( postType, onActionPerformed );
 
 	const actions = useMemo( () => {
 		return allActions.filter( ( action ) => {
@@ -68,15 +50,6 @@ export default function PostActions( { onActionPerformed, buttonProps } ) {
 		} );
 	}, [ allActions, item ] );
 
-	if (
-		[
-			TEMPLATE_POST_TYPE,
-			TEMPLATE_PART_POST_TYPE,
-			PATTERN_POST_TYPE,
-		].includes( postType )
-	) {
-		return null;
-	}
 	return (
 		<DropdownMenu
 			open={ isActionsMenuOpen }
@@ -86,6 +59,7 @@ export default function PostActions( { onActionPerformed, buttonProps } ) {
 					icon={ moreVertical }
 					label={ __( 'Actions' ) }
 					disabled={ ! actions.length }
+					__experimentalIsFocusable
 					className="editor-all-actions-button"
 					onClick={ () =>
 						setIsActionsMenuOpen( ! isActionsMenuOpen )
@@ -113,13 +87,15 @@ export default function PostActions( { onActionPerformed, buttonProps } ) {
 // so duplicating the code here seems like the least bad option.
 
 // Copied as is from packages/dataviews/src/item-actions.js
-function DropdownMenuItemTrigger( { action, onClick } ) {
+function DropdownMenuItemTrigger( { action, onClick, items } ) {
+	const label =
+		typeof action.label === 'string' ? action.label : action.label( items );
 	return (
 		<DropdownMenuItem
 			onClick={ onClick }
 			hideOnClick={ ! action.RenderModal }
 		>
-			<DropdownMenuItemLabel>{ action.label }</DropdownMenuItemLabel>
+			<DropdownMenuItemLabel>{ label }</DropdownMenuItemLabel>
 		</DropdownMenuItem>
 	);
 }
@@ -131,6 +107,7 @@ function ActionWithModal( { action, item, ActionTrigger, onClose } ) {
 	const actionTriggerProps = {
 		action,
 		onClick: () => setIsModalOpen( true ),
+		items: [ item ],
 	};
 	const { RenderModal, hideModalHeader } = action;
 	return (
@@ -182,6 +159,7 @@ function ActionsDropdownMenuGroup( { actions, item, onClose } ) {
 						key={ action.id }
 						action={ action }
 						onClick={ () => action.callback( [ item ] ) }
+						items={ [ item ] }
 					/>
 				);
 			} ) }

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

@@ -50,6 +50,7 @@ export default function PostAuthorCombobox() {
 			onFilterValueChange={ debounce( handleKeydown, 300 ) }
 			onChange={ handleSelect }
 			allowReset={ false }
+			hideLabelFromVision
 		/>
 	);
 }

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

@@ -59,5 +59,5 @@ export function useAuthorsQuery( search ) {
 		return fetchedAuthors;
 	}, [ authors, postAuthor ] );
 
-	return { authorId, authorOptions };
+	return { authorId, authorOptions, postAuthor };
 }

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

@@ -1,9 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Button, Dropdown } from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+
 /**
  * Internal dependencies
  */
 import PostAuthorCheck from './check';
 import PostAuthorForm from './index';
 import PostPanelRow from '../post-panel-row';
+import { useAuthorsQuery } from './hook';
+
+function PostAuthorToggle( { isOpen, onClick } ) {
+	const { postAuthor } = useAuthorsQuery();
+	const authorName = postAuthor?.name || '';
+	return (
+		<Button
+			size="compact"
+			className="editor-post-author__panel-toggle"
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			// translators: %s: Current post link.
+			aria-label={ sprintf( __( 'Change author: %s' ), authorName ) }
+			onClick={ onClick }
+		>
+			{ authorName }
+		</Button>
+	);
+}
 
 /**
  * Renders the Post Author Panel component.
@@ -11,10 +38,44 @@ import PostPanelRow from '../post-panel-row';
  * @return {Component} The component to be rendered.
  */
 export function PostAuthor() {
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
 	return (
 		<PostAuthorCheck>
-			<PostPanelRow className="editor-post-author__panel">
-				<PostAuthorForm />
+			<PostPanelRow label={ __( 'Author' ) } ref={ setPopoverAnchor }>
+				<Dropdown
+					popoverProps={ popoverProps }
+					contentClassName="editor-post-author__panel-dialog"
+					focusOnMount
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<PostAuthorToggle
+							isOpen={ isOpen }
+							onClick={ onToggle }
+						/>
+					) }
+					renderContent={ ( { onClose } ) => (
+						<div className="editor-post-author">
+							<InspectorPopoverHeader
+								title={ __( 'Author' ) }
+								onClose={ onClose }
+							/>
+							<PostAuthorForm onClose={ onClose } />
+						</div>
+					) }
+				/>
 			</PostPanelRow>
 		</PostAuthorCheck>
 	);

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

@@ -29,6 +29,7 @@ export default function PostAuthorSelect() {
 			options={ authorOptions }
 			onChange={ setAuthorId }
 			value={ authorId }
+			hideLabelFromVision
 		/>
 	);
 }

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

@@ -5,3 +5,9 @@
 .editor-post-author__panel .editor-post-panel__row-control > div {
 	width: 100%;
 }
+
+.editor-post-author__panel-dialog .editor-post-author {
+	// sidebar width - popover padding - form margin
+	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
+	margin: $grid-unit-10;
+}

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

@@ -1,17 +1,14 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
 import {
 	Icon,
 	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
 	__experimentalText as Text,
-	PanelBody,
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
@@ -26,14 +23,12 @@ import {
 	TEMPLATE_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
 	PATTERN_POST_TYPE,
+	GLOBAL_POST_TYPES,
 } from '../../store/constants';
-import { PrivatePostExcerptPanel } from '../post-excerpt/panel';
-import PostLastEditedPanel from '../post-last-edited-panel';
 import { unlock } from '../../lock-unlock';
-import TemplateAreas from '../template-areas';
 
-export default function PostCardPanel( { className, actions } ) {
-	const { title, showPostContentPanels, icon, postType } = useSelect(
+export default function PostCardPanel( { actions } ) {
+	const { isFrontPage, isPostsPage, title, icon, isSync } = useSelect(
 		( select ) => {
 			const {
 				getEditedPostAttribute,
@@ -42,6 +37,7 @@ export default function PostCardPanel( { className, actions } ) {
 				__experimentalGetTemplateInfo,
 			} = select( editorStore );
 			const { getEditedEntityRecord } = select( coreStore );
+			const siteSettings = getEditedEntityRecord( 'root', 'site' );
 			const _type = getCurrentPostType();
 			const _id = getCurrentPostId();
 			const _record = getEditedEntityRecord( 'postType', _type, _id );
@@ -49,65 +45,70 @@ export default function PostCardPanel( { className, actions } ) {
 				[ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes(
 					_type
 				) && __experimentalGetTemplateInfo( _record );
+			let _isSync = false;
+			if ( GLOBAL_POST_TYPES.includes( _type ) ) {
+				if ( PATTERN_POST_TYPE === _type ) {
+					// When the post is first created, the top level wp_pattern_sync_status is not set so get meta value instead.
+					const currentSyncStatus =
+						getEditedPostAttribute( 'meta' )
+							?.wp_pattern_sync_status === 'unsynced'
+							? 'unsynced'
+							: getEditedPostAttribute(
+									'wp_pattern_sync_status'
+							  );
+					_isSync = currentSyncStatus !== 'unsynced';
+				} else {
+					_isSync = true;
+				}
+			}
 			return {
 				title:
 					_templateInfo?.title || getEditedPostAttribute( 'title' ),
-				id: _id,
-				postType: _type,
 				icon: unlock( select( editorStore ) ).getPostIcon( _type, {
 					area: _record?.area,
 				} ),
-				// Post excerpt panel and Last Edited info are rendered in different place depending on the post type.
-				// So we cannot make this check inside the PostExcerpt or PostLastEditedPanel component based on the current edited entity.
-				showPostContentPanels: [
-					TEMPLATE_POST_TYPE,
-					TEMPLATE_PART_POST_TYPE,
-					PATTERN_POST_TYPE,
-				].includes( _type ),
+				isSync: _isSync,
+				isFrontPage: siteSettings?.page_on_front === _id,
+				isPostsPage: siteSettings?.page_for_posts === _id,
 			};
 		},
 		[]
 	);
 	return (
-		<PanelBody>
-			<div
-				className={ classnames( 'editor-post-card-panel', className, {
-					'has-description': showPostContentPanels,
-				} ) }
+		<div className="editor-post-card-panel">
+			<HStack
+				spacing={ 2 }
+				className="editor-post-card-panel__header"
+				align="flex-start"
 			>
-				<HStack
-					spacing={ 2 }
-					className="editor-post-card-panel__header"
-					align="flex-start"
+				<Icon
+					className={ clsx( 'editor-post-card-panel__icon', {
+						'is-sync': isSync,
+					} ) }
+					icon={ icon }
+				/>
+				<Text
+					numberOfLines={ 2 }
+					truncate
+					className="editor-post-card-panel__title"
+					weight={ 500 }
+					as="h2"
+					lineHeight="20px"
 				>
-					<Icon
-						className="editor-post-card-panel__icon"
-						icon={ icon }
-					/>
-					<Text
-						numberOfLines={ 2 }
-						truncate
-						className="editor-post-card-panel__title"
-						weight={ 500 }
-						as="h2"
-					>
-						{ title ? decodeEntities( title ) : __( 'No Title' ) }
-					</Text>
-					{ actions }
-				</HStack>
-				<VStack className="editor-post-card-panel__content">
-					{ showPostContentPanels && (
-						<VStack
-							className="editor-post-card-panel__description"
-							spacing={ 2 }
-						>
-							<PrivatePostExcerptPanel />
-							<PostLastEditedPanel />
-						</VStack>
+					{ title ? decodeEntities( title ) : __( 'No Title' ) }
+					{ isFrontPage && (
+						<span className="editor-post-card-panel__title-badge">
+							{ __( 'Front Page' ) }
+						</span>
+					) }
+					{ isPostsPage && (
+						<span className="editor-post-card-panel__title-badge">
+							{ __( 'Posts Page' ) }
+						</span>
 					) }
-					{ postType === TEMPLATE_POST_TYPE && <TemplateAreas /> }
-				</VStack>
-			</div>
-		</PanelBody>
+				</Text>
+				{ actions }
+			</HStack>
+		</div>
 	);
 }

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

@@ -7,7 +7,13 @@
 		width: 100%;
 
 		&.editor-post-card-panel__title {
-			margin: 3px 0 0 0;
+			margin: 0;
+			padding: 2px 0;
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			column-gap: $grid-unit-10;
+			row-gap: $grid-unit-05;
 		}
 	}
 
@@ -26,3 +32,19 @@
 		margin-bottom: $grid-unit-10;
 	}
 }
+
+.editor-post-card-panel__icon.is-sync {
+	fill: var(--wp-block-synced-color);
+}
+
+.editor-post-card-panel__title-badge {
+	background: $gray-100;
+	color: $gray-700;
+	padding: 0 $grid-unit-05;
+	border-radius: $radius-block-ui;
+	font-size: 12px;
+	font-weight: 400;
+	flex-shrink: 0;
+	line-height: $grid-unit-05 * 5;
+	display: inline-block;
+}

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

@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from '@wordpress/components';
+import {
+	RadioControl,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
@@ -10,6 +14,34 @@ import { useDispatch, useSelect } from '@wordpress/data';
  */
 import { store as editorStore } from '../../store';
 
+const COMMENT_OPTIONS = [
+	{
+		label: (
+			<>
+				{ __( 'Open' ) }
+				<Text variant="muted" size={ 12 }>
+					{ __( 'Visitors can add new comments and replies.' ) }
+				</Text>
+			</>
+		),
+		value: 'open',
+	},
+	{
+		label: (
+			<>
+				{ __( 'Closed' ) }
+				<Text variant="muted" size={ 12 }>
+					{ __( 'Visitors cannot add new comments or replies.' ) }
+				</Text>
+				<Text variant="muted" size={ 12 }>
+					{ __( 'Existing comments remain visible.' ) }
+				</Text>
+			</>
+		),
+		value: 'closed',
+	},
+];
+
 function PostComments() {
 	const commentStatus = useSelect(
 		( select ) =>
@@ -18,19 +50,30 @@ function PostComments() {
 		[]
 	);
 	const { editPost } = useDispatch( editorStore );
-	const onToggleComments = () =>
+	const handleStatus = ( newCommentStatus ) =>
 		editPost( {
-			comment_status: commentStatus === 'open' ? 'closed' : 'open',
+			comment_status: newCommentStatus,
 		} );
 
 	return (
-		<CheckboxControl
-			__nextHasNoMarginBottom
-			label={ __( 'Allow comments' ) }
-			checked={ commentStatus === 'open' }
-			onChange={ onToggleComments }
-		/>
+		<form>
+			<VStack spacing={ 4 }>
+				<RadioControl
+					className="editor-change-status__options"
+					hideLabelFromVision
+					label={ __( 'Comment status' ) }
+					options={ COMMENT_OPTIONS }
+					onChange={ handleStatus }
+					selected={ commentStatus }
+				/>
+			</VStack>
+		</form>
 	);
 }
 
+/**
+ * A form for managing comment status.
+ *
+ * @return {JSX.Element} The rendered PostComments component.
+ */
 export default PostComments;