@wordpress/editor 13.35.0 → 14.0.1

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
@@ -29,10 +30,16 @@ const {
 export default function PostActions( { onActionPerformed, buttonProps } ) {
 	const [ isActionsMenuOpen, setIsActionsMenuOpen ] = useState( false );
 	const { item, postType } = useSelect( ( select ) => {
-		const { getCurrentPostType, getCurrentPost } = select( editorStore );
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const _postType = getCurrentPostType();
 		return {
-			item: getCurrentPost(),
-			postType: getCurrentPostType(),
+			item: getEditedEntityRecord(
+				'postType',
+				_postType,
+				getCurrentPostId()
+			),
+			postType: _postType,
 		};
 	}, [] );
 	const allActions = usePostActions( postType, onActionPerformed );
@@ -80,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>
 	);
 }
@@ -98,6 +107,7 @@ function ActionWithModal( { action, item, ActionTrigger, onClose } ) {
 	const actionTriggerProps = {
 		action,
 		onClick: () => setIsModalOpen( true ),
+		items: [ item ],
 	};
 	const { RenderModal, hideModalHeader } = action;
 	return (
@@ -149,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,3 +1,7 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -18,31 +22,58 @@ import { store as editorStore } from '../../store';
 import {
 	TEMPLATE_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
+	PATTERN_POST_TYPE,
+	GLOBAL_POST_TYPES,
 } from '../../store/constants';
 import { unlock } from '../../lock-unlock';
 
 export default function PostCardPanel( { actions } ) {
-	const { title, icon } = useSelect( ( select ) => {
-		const {
-			getEditedPostAttribute,
-			getCurrentPostType,
-			getCurrentPostId,
-			__experimentalGetTemplateInfo,
-		} = select( editorStore );
-		const { getEditedEntityRecord } = select( coreStore );
-		const _type = getCurrentPostType();
-		const _id = getCurrentPostId();
-		const _record = getEditedEntityRecord( 'postType', _type, _id );
-		const _templateInfo =
-			[ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes( _type ) &&
-			__experimentalGetTemplateInfo( _record );
-		return {
-			title: _templateInfo?.title || getEditedPostAttribute( 'title' ),
-			icon: unlock( select( editorStore ) ).getPostIcon( _type, {
-				area: _record?.area,
-			} ),
-		};
-	}, [] );
+	const { isFrontPage, isPostsPage, title, icon, isSync } = useSelect(
+		( select ) => {
+			const {
+				getEditedPostAttribute,
+				getCurrentPostType,
+				getCurrentPostId,
+				__experimentalGetTemplateInfo,
+			} = select( editorStore );
+			const { getEditedEntityRecord } = select( coreStore );
+			const siteSettings = getEditedEntityRecord( 'root', 'site' );
+			const _type = getCurrentPostType();
+			const _id = getCurrentPostId();
+			const _record = getEditedEntityRecord( 'postType', _type, _id );
+			const _templateInfo =
+				[ 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' ),
+				icon: unlock( select( editorStore ) ).getPostIcon( _type, {
+					area: _record?.area,
+				} ),
+				isSync: _isSync,
+				isFrontPage: siteSettings?.page_on_front === _id,
+				isPostsPage: siteSettings?.page_for_posts === _id,
+			};
+		},
+		[]
+	);
 	return (
 		<div className="editor-post-card-panel">
 			<HStack
@@ -50,15 +81,31 @@ export default function PostCardPanel( { actions } ) {
 				className="editor-post-card-panel__header"
 				align="flex-start"
 			>
-				<Icon className="editor-post-card-panel__icon" icon={ icon } />
+				<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"
 				>
 					{ 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>
+					) }
 				</Text>
 				{ actions }
 			</HStack>

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

@@ -71,4 +71,9 @@ function PostComments() {
 	);
 }
 
+/**
+ * A form for managing comment status.
+ *
+ * @return {JSX.Element} The rendered PostComments component.
+ */
 export default PostComments;

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

@@ -6,7 +6,6 @@ import {
 	Dropdown,
 	Button,
 	__experimentalVStack as VStack,
-	__experimentalText as Text,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useState, useMemo } from '@wordpress/element';
@@ -81,11 +80,19 @@ function PostDiscussionToggle( { isOpen, onClick } ) {
 			aria-expanded={ isOpen }
 			onClick={ onClick }
 		>
-			<Text>{ label }</Text>
+			{ label }
 		</Button>
 	);
 }
 
+/**
+ * This component allows to update comment and pingback
+ * settings for the current post. Internally there are
+ * checks whether the current post has support for the
+ * above and if the `discussion-panel` panel is enabled.
+ *
+ * @return {JSX.Element|null} The rendered PostDiscussionPanel component.
+ */
 export default function PostDiscussionPanel() {
 	const { isEnabled } = useSelect( ( select ) => {
 		const { isEditorPanelEnabled } = select( editorStore );

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

@@ -13,9 +13,7 @@
 	}
 }
 .editor-post-discussion__panel-toggle {
-	&.components-button {
-		height: auto;
-	}
+
 	.components-text {
 		color: inherit;
 	}

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -84,6 +79,11 @@ function ExcerptPanel() {
 	);
 }
 
+/**
+ * Is rendered if the post type supports excerpts and allows editing the excerpt.
+ *
+ * @return {JSX.Element} The rendered PostExcerptPanel component.
+ */
 export default function PostExcerptPanel() {
 	return (
 		<PostExcerptCheck>
@@ -186,49 +186,46 @@ function PrivateExcerpt() {
 		? __( 'Edit description' )
 		: __( 'Edit excerpt' );
 	return (
-		<Dropdown
-			className="editor-post-excerpt__dropdown"
-			contentClassName="editor-post-excerpt__dropdown__content"
-			popoverProps={ popoverProps }
-			focusOnMount
-			ref={ setPopoverAnchor }
-			renderToggle={ ( { onToggle } ) => (
-				<Button
-					className={ clsx(
-						'editor-post-excerpt__dropdown__trigger',
-						{ 'has-excerpt': !! excerpt }
-					) }
-					onClick={ onToggle }
-					label={
-						!! excerptText ? triggerEditLabel : excerptPlaceholder
-					}
-					showTooltip={ !! excerptText }
-				>
-					{ excerptText || excerptPlaceholder }
-				</Button>
-			) }
-			renderContent={ ( { onClose } ) => (
-				<>
-					<InspectorPopoverHeader
-						title={ label }
-						onClose={ onClose }
-					/>
+		<VStack>
+			{ excerptText }
+			<Dropdown
+				className="editor-post-excerpt__dropdown"
+				contentClassName="editor-post-excerpt__dropdown__content"
+				popoverProps={ popoverProps }
+				focusOnMount
+				ref={ setPopoverAnchor }
+				renderToggle={ ( { onToggle } ) => (
+					<Button
+						className="editor-post-excerpt__dropdown__trigger"
+						onClick={ onToggle }
+						variant="link"
+					>
+						{ excerptText ? triggerEditLabel : excerptPlaceholder }
+					</Button>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<>
+						<InspectorPopoverHeader
+							title={ label }
+							onClose={ onClose }
+						/>
 
-					<VStack spacing={ 4 }>
-						<PluginPostExcerpt.Slot>
-							{ ( fills ) => (
-								<>
-									<PostExcerptForm
-										hideLabelFromVision
-										updateOnBlur
-									/>
-									{ fills }
-								</>
-							) }
-						</PluginPostExcerpt.Slot>
-					</VStack>
-				</>
-			) }
-		/>
+						<VStack spacing={ 4 }>
+							<PluginPostExcerpt.Slot>
+								{ ( fills ) => (
+									<>
+										<PostExcerptForm
+											hideLabelFromVision
+											updateOnBlur
+										/>
+										{ fills }
+									</>
+								) }
+							</PluginPostExcerpt.Slot>
+						</VStack>
+					</>
+				) }
+			/>
+		</VStack>
 	);
 }

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

@@ -3,23 +3,6 @@
 	margin-bottom: 10px;
 }
 
-.editor-post-excerpt__dropdown__trigger {
-	height: auto;
-	padding: 0;
-
-	&:not(.has-excerpt) {
-		color: $gray-700;
-	}
-
-	&:hover {
-		color: $gray-900;
-	}
-}
-
-.editor-post-excerpt__dropdown {
-	display: block;
-}
-
 .editor-post-excerpt__dropdown__content {
 	.components-popover__content {
 		min-width: 320px;

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

@@ -4,6 +4,15 @@
 import PostTypeSupportCheck from '../post-type-support-check';
 import ThemeSupportCheck from '../theme-support-check';
 
+/**
+ * Wrapper component that renders its children only if the post type supports a featured image
+ * and the theme supports post thumbnails.
+ *
+ * @param {Object}  props          Props.
+ * @param {Element} props.children Children to be rendered.
+ *
+ * @return {Component} The component to be rendered.
+ */
 function PostFeaturedImageCheck( { children } ) {
 	return (
 		<ThemeSupportCheck supportKeys="post-thumbnails">

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

@@ -266,6 +266,21 @@ const applyWithDispatch = withDispatch(
 	}
 );
 
+/**
+ * Renders the component for managing the featured image of a post.
+ *
+ * @param {Object}   props                  Props.
+ * @param {number}   props.currentPostId    ID of the current post.
+ * @param {number}   props.featuredImageId  ID of the featured image.
+ * @param {Function} props.onUpdateImage    Function to call when the image is updated.
+ * @param {Function} props.onRemoveImage    Function to call when the image is removed.
+ * @param {Object}   props.media            The media object representing the featured image.
+ * @param {string}   props.postType         Post type.
+ * @param {Element}  props.noticeUI         UI for displaying notices.
+ * @param {Object}   props.noticeOperations Operations for managing notices.
+ *
+ * @return {Element} Component to be rendered .
+ */
 export default compose(
 	withNotices,
 	applyWithSelect,

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

@@ -15,6 +15,15 @@ import PostFeaturedImageCheck from './check';
 
 const PANEL_NAME = 'featured-image';
 
+/**
+ * Renders the panel for the post featured image.
+ *
+ * @param {Object}  props               Props.
+ * @param {boolean} props.withPanelBody Whether to include the panel body. Default true.
+ *
+ * @return {Component|null} The component to be rendered.
+ * Return Null if the editor panel is disabled for featured image.
+ */
 export default function PostFeaturedImagePanel( { withPanelBody = true } ) {
 	const { postType, isEnabled, isOpened } = useSelect( ( select ) => {
 		const {

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

@@ -27,4 +27,12 @@ function PostFormatCheck( { children } ) {
 	);
 }
 
+/**
+ * Component check if there are any post formats.
+ *
+ * @param {Object}  props          The component props.
+ * @param {Element} props.children The child elements to render.
+ *
+ * @return {Component|null} The rendered component or null if post formats are disabled.
+ */
 export default PostFormatCheck;