@wordpress/editor 13.23.0 → 13.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "13.23.0",
+	"version": "13.24.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,35 +31,35 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.46.0",
-		"@wordpress/api-fetch": "^6.43.0",
-		"@wordpress/blob": "^3.46.0",
-		"@wordpress/block-editor": "^12.14.0",
-		"@wordpress/blocks": "^12.23.0",
-		"@wordpress/components": "^25.12.0",
-		"@wordpress/compose": "^6.23.0",
-		"@wordpress/core-data": "^6.23.0",
-		"@wordpress/data": "^9.16.0",
-		"@wordpress/date": "^4.46.0",
-		"@wordpress/deprecated": "^3.46.0",
-		"@wordpress/dom": "^3.46.0",
-		"@wordpress/element": "^5.23.0",
-		"@wordpress/hooks": "^3.46.0",
-		"@wordpress/html-entities": "^3.46.0",
-		"@wordpress/i18n": "^4.46.0",
-		"@wordpress/icons": "^9.37.0",
-		"@wordpress/keyboard-shortcuts": "^4.23.0",
-		"@wordpress/keycodes": "^3.46.0",
-		"@wordpress/media-utils": "^4.37.0",
-		"@wordpress/notices": "^4.14.0",
-		"@wordpress/patterns": "^1.7.0",
-		"@wordpress/preferences": "^3.23.0",
-		"@wordpress/private-apis": "^0.28.0",
-		"@wordpress/reusable-blocks": "^4.23.0",
-		"@wordpress/rich-text": "^6.23.0",
-		"@wordpress/server-side-render": "^4.23.0",
-		"@wordpress/url": "^3.47.0",
-		"@wordpress/wordcount": "^3.46.0",
+		"@wordpress/a11y": "^3.47.0",
+		"@wordpress/api-fetch": "^6.44.0",
+		"@wordpress/blob": "^3.47.0",
+		"@wordpress/block-editor": "^12.15.0",
+		"@wordpress/blocks": "^12.24.0",
+		"@wordpress/components": "^25.13.0",
+		"@wordpress/compose": "^6.24.0",
+		"@wordpress/core-data": "^6.24.0",
+		"@wordpress/data": "^9.17.0",
+		"@wordpress/date": "^4.47.0",
+		"@wordpress/deprecated": "^3.47.0",
+		"@wordpress/dom": "^3.47.0",
+		"@wordpress/element": "^5.24.0",
+		"@wordpress/hooks": "^3.47.0",
+		"@wordpress/html-entities": "^3.47.0",
+		"@wordpress/i18n": "^4.47.0",
+		"@wordpress/icons": "^9.38.0",
+		"@wordpress/keyboard-shortcuts": "^4.24.0",
+		"@wordpress/keycodes": "^3.47.0",
+		"@wordpress/media-utils": "^4.38.0",
+		"@wordpress/notices": "^4.15.0",
+		"@wordpress/patterns": "^1.8.0",
+		"@wordpress/preferences": "^3.24.0",
+		"@wordpress/private-apis": "^0.29.0",
+		"@wordpress/reusable-blocks": "^4.24.0",
+		"@wordpress/rich-text": "^6.24.0",
+		"@wordpress/server-side-render": "^4.24.0",
+		"@wordpress/url": "^3.48.0",
+		"@wordpress/wordcount": "^3.47.0",
 		"classnames": "^2.3.1",
 		"date-fns": "^2.28.0",
 		"memize": "^2.1.0",
@@ -74,5 +74,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "839018ff6029ba749780e288e08ff9cd898e50e8"
+	"gitHead": "d98dff8ea96f29cfea045bf964269f46f040d539"
 }

package/src/components/entities-saved-states/index.js

@@ -3,7 +3,7 @@
  */
 import { Button, Flex, FlexItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useCallback, useRef } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -85,6 +85,15 @@ export function EntitiesSavedStatesExtensible( {
 
 	const saveEnabled = saveEnabledProp ?? isDirty;
 
+	const { homeUrl } = useSelect( ( select ) => {
+		const {
+			getUnstableBase, // Site index.
+		} = select( coreStore );
+		return {
+			homeUrl: getUnstableBase()?.home,
+		};
+	}, [] );
+
 	const saveCheckedEntities = () => {
 		const saveNoticeId = 'site-editor-save-success';
 		removeNotice( saveNoticeId );
@@ -149,6 +158,12 @@ export function EntitiesSavedStatesExtensible( {
 					createSuccessNotice( __( 'Site updated.' ), {
 						type: 'snackbar',
 						id: saveNoticeId,
+						actions: [
+							{
+								label: __( 'View site' ),
+								url: homeUrl,
+							},
+						],
 					} );
 				}
 			} )

package/src/components/index.js

@@ -26,6 +26,7 @@ export { default as PageAttributesParent } from './page-attributes/parent';
 export { default as PageTemplate } from './post-template';
 export { default as PostAuthor } from './post-author';
 export { default as PostAuthorCheck } from './post-author/check';
+export { default as PostAuthorPanel } from './post-author/panel';
 export { default as PostComments } from './post-comments';
 export { default as PostExcerpt } from './post-excerpt';
 export { default as PostExcerptCheck } from './post-excerpt/check';
@@ -50,6 +51,7 @@ export {
 	default as PostScheduleLabel,
 	usePostScheduleLabel,
 } from './post-schedule/label';
+export { default as PostSchedulePanel } from './post-schedule/panel';
 export { default as PostSlug } from './post-slug';
 export { default as PostSlugCheck } from './post-slug/check';
 export { default as PostSticky } from './post-sticky';
@@ -65,6 +67,7 @@ export { HierarchicalTermSelector as PostTaxonomiesHierarchicalTermSelector } fr
 export { default as PostTaxonomiesCheck } from './post-taxonomies/check';
 export { default as PostTextEditor } from './post-text-editor';
 export { default as PostTitle } from './post-title';
+export { default as PostTitleRaw } from './post-title/post-title-raw';
 export { default as PostTrash } from './post-trash';
 export { default as PostTrashCheck } from './post-trash/check';
 export { default as PostTypeSupportCheck } from './post-type-support-check';

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

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import PostAuthorCheck from './check';
+import PostAuthorForm from './index';
+import PostPanelRow from '../post-panel-row';
+
+export function PostAuthor() {
+	return (
+		<PostAuthorCheck>
+			<PostPanelRow className="editor-post-author__panel">
+				<PostAuthorForm />
+			</PostPanelRow>
+		</PostAuthorCheck>
+	);
+}
+
+export default PostAuthor;

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

@@ -0,0 +1,7 @@
+.editor-post-author__panel {
+	padding-top: $grid-unit-10;
+}
+
+.editor-post-author__panel .editor-post-panel__row-control > div {
+	width: 100%;
+}

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

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
+
+const PostPanelRow = forwardRef( ( { className, label, children }, ref ) => {
+	return (
+		<HStack
+			className={ classnames( 'editor-post-panel__row', className ) }
+			ref={ ref }
+		>
+			{ label && (
+				<div className="editor-post-panel__row-label">{ label }</div>
+			) }
+			<div className="editor-post-panel__row-control">{ children }</div>
+		</HStack>
+	);
+} );
+
+export default PostPanelRow;

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

@@ -0,0 +1,21 @@
+.editor-post-panel__row {
+	width: 100%;
+	min-height: $button-size;
+	justify-content: flex-start !important;
+	align-items: flex-start !important;
+}
+
+.editor-post-panel__row-label {
+	width: 30%;
+	flex-shrink: 0;
+	min-height: $button-size;
+	display: flex;
+	align-items: center;
+}
+
+.editor-post-panel__row-control {
+	flex-grow: 1;
+	min-height: $button-size;
+	display: flex;
+	align-items: center;
+}

package/src/components/post-saved-state/index.js

@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import {
 	__unstableGetAnimateClassName as getAnimateClassName,
 	Button,
+	Tooltip,
 } from '@wordpress/components';
 import { usePrevious, useViewportMatch } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -128,45 +129,53 @@ export default function PostSavedState( {
 		text = shortLabel;
 	}
 
+	const buttonAccessibleLabel = text || label;
+
+	/**
+	 * The tooltip needs to be enabled only if the button is not disabled. When
+	 * relying on the internal Button tooltip functionality, this causes the
+	 * resulting `button` element to be always removed and re-added to the DOM,
+	 * causing focus loss. An alternative approach to circumvent the issue
+	 * is not to use the `label` and `shortcut` props on `Button` (which would
+	 * trigger the tooltip), and instead manually wrap the `Button` in a separate
+	 * `Tooltip` component.
+	 */
+	const tooltipProps = isDisabled
+		? undefined
+		: {
+				text: buttonAccessibleLabel,
+				shortcut: displayShortcut.primary( 's' ),
+		  };
+
 	// Use common Button instance for all saved states so that focus is not
 	// lost.
 	return (
-		<Button
-			className={
-				isSaveable || isSaving
-					? classnames( {
-							'editor-post-save-draft': ! isSavedState,
-							'editor-post-saved-state': isSavedState,
-							'is-saving': isSaving,
-							'is-autosaving': isAutosaving,
-							'is-saved': isSaved,
-							[ getAnimateClassName( {
-								type: 'loading',
-							} ) ]: isSaving,
-					  } )
-					: undefined
-			}
-			onClick={ isDisabled ? undefined : () => savePost() }
-			/*
-			 * We want the tooltip to show the keyboard shortcut only when the
-			 * button does something, i.e. when it's not disabled.
-			 */
-			shortcut={ isDisabled ? undefined : displayShortcut.primary( 's' ) }
-			/*
-			 * Displaying the keyboard shortcut conditionally makes the tooltip
-			 * itself show conditionally. This would trigger a full-rerendering
-			 * of the button that we want to avoid. By setting `showTooltip`,
-			 & the tooltip is always rendered even when there's no keyboard shortcut.
-			 */
-			showTooltip
-			variant="tertiary"
-			icon={ isLargeViewport ? undefined : cloudUpload }
-			// Make sure the aria-label has always a value, as the default `text` is undefined on small screens.
-			label={ text || label }
-			aria-disabled={ isDisabled }
-		>
-			{ isSavedState && <Icon icon={ isSaved ? check : cloud } /> }
-			{ text }
-		</Button>
+		<Tooltip { ...tooltipProps }>
+			<Button
+				className={
+					isSaveable || isSaving
+						? classnames( {
+								'editor-post-save-draft': ! isSavedState,
+								'editor-post-saved-state': isSavedState,
+								'is-saving': isSaving,
+								'is-autosaving': isAutosaving,
+								'is-saved': isSaved,
+								[ getAnimateClassName( {
+									type: 'loading',
+								} ) ]: isSaving,
+						  } )
+						: undefined
+				}
+				onClick={ isDisabled ? undefined : () => savePost() }
+				variant="tertiary"
+				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 }
+				aria-disabled={ isDisabled }
+			>
+				{ isSavedState && <Icon icon={ isSaved ? check : cloud } /> }
+				{ text }
+			</Button>
+		</Tooltip>
 	);
 }

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

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Dropdown } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useState, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import PostScheduleCheck from './check';
+import PostScheduleForm from './index';
+import { usePostScheduleLabel } from './label';
+import PostPanelRow from '../post-panel-row';
+
+export default function PostSchedulePanel() {
+	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,
+			'aria-label': __( 'Change publish date' ),
+			placement: 'bottom-end',
+		} ),
+		[ popoverAnchor ]
+	);
+
+	const label = usePostScheduleLabel();
+	const fullLabel = usePostScheduleLabel( { full: true } );
+
+	return (
+		<PostScheduleCheck>
+			<PostPanelRow label={ __( 'Publish' ) } ref={ setPopoverAnchor }>
+				<Dropdown
+					popoverProps={ popoverProps }
+					focusOnMount
+					className="editor-post-schedule__panel-dropdown"
+					contentClassName="editor-post-schedule__dialog"
+					renderToggle={ ( { onToggle, isOpen } ) => (
+						<Button
+							className="editor-post-schedule__dialog-toggle"
+							variant="tertiary"
+							onClick={ onToggle }
+							aria-label={ sprintf(
+								// translators: %s: Current post date.
+								__( 'Change date: %s' ),
+								label
+							) }
+							label={ fullLabel }
+							showTooltip
+							aria-expanded={ isOpen }
+						>
+							{ label }
+						</Button>
+					) }
+					renderContent={ ( { onClose } ) => (
+						<PostScheduleForm onClose={ onClose } />
+					) }
+				/>
+			</PostPanelRow>
+		</PostScheduleCheck>
+	);
+}

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

@@ -0,0 +1,23 @@
+.editor-post-schedule__panel-dropdown {
+	width: 100%;
+}
+
+.editor-post-schedule__dialog {
+	.components-popover__content {
+		min-width: 320px;
+		padding: $grid-unit-20;
+	}
+}
+
+.editor-post-schedule__dialog-toggle.components-button {
+	display: block;
+	max-width: 100%;
+	overflow: hidden;
+	text-align: left;
+	white-space: unset;
+	height: auto;
+
+	// The line height + the padding should be the same as the button size.
+	padding: math.div($button-size - $grid-unit-20, 2) 12px;
+	line-height: $grid-unit-20;
+}

package/src/components/post-sync-status/index.js

@@ -4,7 +4,6 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
 import {
-	PanelRow,
 	Modal,
 	Button,
 	__experimentalHStack as HStack,
@@ -17,6 +16,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
+import PostPanelRow from '../post-panel-row';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
@@ -44,14 +44,13 @@ export default function PostSyncStatus() {
 	}
 
 	return (
-		<PanelRow className="edit-post-sync-status">
-			<span>{ __( 'Sync status' ) }</span>
-			<div>
+		<PostPanelRow label={ __( 'Sync status' ) }>
+			<div className="editor-post-sync-status__value">
 				{ syncStatus === 'unsynced'
 					? __( 'Not synced' )
 					: __( 'Fully synced' ) }
 			</div>
-		</PanelRow>
+		</PostPanelRow>
 	);
 }
 
@@ -114,7 +113,7 @@ export function PostSyncStatusModal() {
 									'Option that makes an individual pattern synchronized'
 								) }
 								help={ __(
-									'Editing the pattern will update it anywhere it is used.'
+									'Sync this pattern across multiple locations.'
 								) }
 								checked={ ! syncType }
 								onChange={ () => {

package/src/components/post-sync-status/style.scss

@@ -1,18 +1,4 @@
-.edit-post-sync-status {
-	width: 100%;
-	position: relative;
-	justify-content: flex-start;
-	align-items: flex-start;
-
-	> span {
-		display: block;
-		width: 30%;
-		margin-right: 8px;
-		word-break: break-word;
-	}
-
-	> div {
-		// Match padding on tertiary buttons for alignment.
-		padding: $grid-unit-15 * 0.5 0 $grid-unit-15 * 0.5 $grid-unit-15;
-	}
+.editor-post-sync-status__value {
+	// Match padding on tertiary buttons for alignment.
+	padding: $grid-unit-15 * 0.5 0 $grid-unit-15 * 0.5 $grid-unit-15;
 }

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

@@ -0,0 +1,4 @@
+export const DEFAULT_CLASSNAMES =
+	'wp-block wp-block-post-title block-editor-block-list__block editor-post-title editor-post-title__input rich-text';
+
+export const REGEXP_NEWLINES = /[\r\n]+/g;