@wordpress/editor 14.7.1-next.5368f64a9.0 → 14.8.0

package/src/components/document-bar/index.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { __, isRTL, sprintf } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
@@ -28,18 +28,8 @@ import { decodeEntities } from '@wordpress/html-entities';
  */
 import { TEMPLATE_POST_TYPES, GLOBAL_POST_TYPES } from '../../store/constants';
 import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
 
-const TYPE_LABELS = {
-	// translators: 1: Pattern title.
-	wp_pattern: __( 'Editing pattern: %s' ),
-	// translators: 1: Navigation menu title.
-	wp_navigation: __( 'Editing navigation menu: %s' ),
-	// translators: 1: Template title.
-	wp_template: __( 'Editing template: %s' ),
-	// translators: 1: Template part title.
-	wp_template_part: __( 'Editing template part: %s' ),
-};
+/** @typedef {import("@wordpress/components").IconType} IconType */
 
 const MotionButton = motion( Button );
 
@@ -52,21 +42,21 @@ const MotionButton = motion( Button );
  * ```jsx
  * <DocumentBar />
  * ```
- * @param {Object}                                   props       The component props.
- * @param {string}                                   props.title A title for the document, defaulting to the document or
- *                                                               template title currently being edited.
- * @param {import("@wordpress/components").IconType} props.icon  An icon for the document, defaulting to an icon for document
- *                                                               or template currently being edited.
+ * @param {Object}   props       The component props.
+ * @param {string}   props.title A title for the document, defaulting to the document or
+ *                               template title currently being edited.
+ * @param {IconType} props.icon  An icon for the document, no default.
+ *                               (A default icon indicating the document post type is no longer used.)
  *
  * @return {JSX.Element} The rendered DocumentBar component.
  */
 export default function DocumentBar( props ) {
 	const {
 		postType,
+		postTypeLabel,
 		documentTitle,
 		isNotFound,
 		isUnsyncedPattern,
-		templateIcon,
 		templateTitle,
 		onNavigateToPreviousEntityRecord,
 	} = useSelect( ( select ) => {
@@ -76,8 +66,11 @@ export default function DocumentBar( props ) {
 			getEditorSettings,
 			__experimentalGetTemplateInfo: getTemplateInfo,
 		} = select( editorStore );
-		const { getEditedEntityRecord, isResolving: isResolvingSelector } =
-			select( coreStore );
+		const {
+			getEditedEntityRecord,
+			getPostType,
+			isResolving: isResolvingSelector,
+		} = select( coreStore );
 		const _postType = getCurrentPostType();
 		const _postId = getCurrentPostId();
 		const _document = getEditedEntityRecord(
@@ -86,8 +79,11 @@ export default function DocumentBar( props ) {
 			_postId
 		);
 		const _templateInfo = getTemplateInfo( _document );
+		const _postTypeLabel = getPostType( _postType )?.labels?.singular_name;
+
 		return {
 			postType: _postType,
+			postTypeLabel: _postTypeLabel,
 			documentTitle: _document.title,
 			isNotFound:
 				! _document &&
@@ -98,12 +94,6 @@ export default function DocumentBar( props ) {
 					_postId
 				),
 			isUnsyncedPattern: _document?.wp_pattern_sync_status === 'unsynced',
-			templateIcon: unlock( select( editorStore ) ).getPostIcon(
-				_postType,
-				{
-					area: _document?.area,
-				}
-			),
 			templateTitle: _templateInfo.title,
 			onNavigateToPreviousEntityRecord:
 				getEditorSettings().onNavigateToPreviousEntityRecord,
@@ -118,7 +108,7 @@ export default function DocumentBar( props ) {
 	const hasBackButton = !! onNavigateToPreviousEntityRecord;
 	const entityTitle = isTemplate ? templateTitle : documentTitle;
 	const title = props.title || entityTitle;
-	const icon = props.icon || templateIcon;
+	const icon = props.icon;
 
 	const mountedRef = useRef( false );
 	useEffect( () => {
@@ -187,20 +177,18 @@ export default function DocumentBar( props ) {
 							isReducedMotion ? { duration: 0 } : undefined
 						}
 					>
-						<BlockIcon icon={ icon } />
-						<Text
-							size="body"
-							as="h1"
-							aria-label={
-								! props.title && TYPE_LABELS[ postType ]
-									? // eslint-disable-next-line @wordpress/valid-sprintf
-									  sprintf( TYPE_LABELS[ postType ], title )
-									: undefined
-							}
-						>
-							{ title
-								? decodeEntities( title )
-								: __( 'No title' ) }
+						{ icon && <BlockIcon icon={ icon } /> }
+						<Text size="body" as="h1">
+							<span className="editor-document-bar__post-title">
+								{ title
+									? decodeEntities( title )
+									: __( 'No title' ) }
+							</span>
+							{ postTypeLabel && ! props.title && (
+								<span className="editor-document-bar__post-type-label">
+									{ '· ' + decodeEntities( postTypeLabel ) }
+								</span>
+							) }
 						</Text>
 					</motion.div>
 					<span className="editor-document-bar__shortcut">

package/src/components/document-bar/style.scss

@@ -25,6 +25,14 @@
 			background: $gray-200;
 		}
 	}
+
+	&.has-back-button {
+		@media screen and (min-width: #{ ($break-medium) }) and (max-width: #{ ($break-large) }) {
+			.editor-document-bar__post-type-label {
+				display: none;
+			}
+		}
+	}
 }
 
 .editor-document-bar__command {
@@ -34,34 +42,44 @@
 }
 
 .editor-document-bar__title {
-	flex: 1;
 	overflow: hidden;
 	color: $gray-900;
-	gap: $grid-unit-05;
-	display: flex;
-	justify-content: center;
-	align-items: center;
+	margin: 0 auto;
+	max-width: 70%;
 
 	// Offset the layout based on the width of the ⌘K label. This ensures the title is centrally aligned.
 	@include break-medium() {
 		padding-left: $grid-unit-30;
 	}
 
+	h1 {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: 400;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+}
+
+.editor-document-bar__post-title {
+	color: currentColor;
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+
 	.editor-document-bar.is-global & {
 		color: var(--wp-block-synced-color);
 	}
+}
 
-	.block-editor-block-icon {
-		min-width: $grid-unit-30;
-		flex-shrink: 0;
-	}
+.editor-document-bar__post-type-label {
+	flex: 0;
+	color: $gray-800;
+	padding-left: $grid-unit-05;
 
-	h1 {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		max-width: 70%;
-		color: currentColor;
+	@media screen and (max-width: #{ ($break-small) }) {
+		display: none;
 	}
 }
 

package/src/components/editor-history/redo.js

@@ -25,8 +25,7 @@ function EditorHistoryRedo( props, ref ) {
 	const { redo } = useDispatch( editorStore );
 	return (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			{ ...props }
 			ref={ ref }
 			icon={ ! isRTL() ? redoIcon : undoIcon }

package/src/components/editor-history/undo.js

@@ -21,8 +21,7 @@ function EditorHistoryUndo( props, ref ) {
 	const { undo } = useDispatch( editorStore );
 	return (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			{ ...props }
 			ref={ ref }
 			icon={ ! isRTL() ? undoIcon : redoIcon }

package/src/components/editor-interface/index.js

@@ -58,7 +58,6 @@ export default function EditorInterface( {
 	customSavePanel,
 	forceDisableBlockTools,
 	title,
-	icon,
 	iframeProps,
 } ) {
 	const {
@@ -140,7 +139,7 @@ export default function EditorInterface( {
 						customSaveButton={ customSaveButton }
 						forceDisableBlockTools={ forceDisableBlockTools }
 						title={ title }
-						icon={ icon }
+						isEditorIframed={ ! disableIframe }
 					/>
 				)
 			}

package/src/components/error-boundary/index.js

@@ -29,12 +29,7 @@ function getContent() {
 function CopyButton( { text, children } ) {
 	const ref = useCopyToClipboard( text );
 	return (
-		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
-			variant="secondary"
-			ref={ ref }
-		>
+		<Button __next40pxDefaultSize variant="secondary" ref={ ref }>
 			{ children }
 		</Button>
 	);

package/src/components/global-styles-provider/index.js

@@ -46,24 +46,38 @@ export function mergeBaseAndUserConfigs( base, user ) {
 function useGlobalStylesUserConfig() {
 	const { globalStylesId, isReady, settings, styles, _links } = useSelect(
 		( select ) => {
-			const { getEditedEntityRecord, hasFinishedResolution, canUser } =
-				select( coreStore );
+			const {
+				getEntityRecord,
+				getEditedEntityRecord,
+				hasFinishedResolution,
+				canUser,
+			} = select( coreStore );
 			const _globalStylesId =
 				select( coreStore ).__experimentalGetCurrentGlobalStylesId();
 
-			const record =
-				_globalStylesId &&
-				canUser( 'read', {
-					kind: 'root',
-					name: 'globalStyles',
-					id: _globalStylesId,
-				} )
-					? getEditedEntityRecord(
-							'root',
-							'globalStyles',
-							_globalStylesId
-					  )
-					: undefined;
+			let record;
+			const userCanEditGlobalStyles = canUser( 'update', {
+				kind: 'root',
+				name: 'globalStyles',
+				id: _globalStylesId,
+			} );
+
+			if ( _globalStylesId ) {
+				if ( userCanEditGlobalStyles ) {
+					record = getEditedEntityRecord(
+						'root',
+						'globalStyles',
+						_globalStylesId
+					);
+				} else {
+					record = getEntityRecord(
+						'root',
+						'globalStyles',
+						_globalStylesId,
+						{ context: 'view' }
+					);
+				}
+			}
 
 			let hasResolved = false;
 			if (
@@ -71,13 +85,22 @@ function useGlobalStylesUserConfig() {
 					'__experimentalGetCurrentGlobalStylesId'
 				)
 			) {
-				hasResolved = _globalStylesId
-					? hasFinishedResolution( 'getEditedEntityRecord', [
-							'root',
-							'globalStyles',
-							_globalStylesId,
-					  ] )
-					: true;
+				if ( _globalStylesId ) {
+					hasResolved = userCanEditGlobalStyles
+						? hasFinishedResolution( 'getEditedEntityRecord', [
+								'root',
+								'globalStyles',
+								_globalStylesId,
+						  ] )
+						: hasFinishedResolution( 'getEntityRecord', [
+								'root',
+								'globalStyles',
+								_globalStylesId,
+								{ context: 'view' },
+						  ] );
+				} else {
+					hasResolved = true;
+				}
 			}
 
 			return {
@@ -145,20 +168,11 @@ function useGlobalStylesUserConfig() {
 }
 
 function useGlobalStylesBaseConfig() {
-	const baseConfig = useSelect( ( select ) => {
-		const {
-			__experimentalGetCurrentThemeBaseGlobalStyles,
-			getCurrentTheme,
-			canUser,
-		} = select( coreStore );
-		const currentTheme = getCurrentTheme();
-
-		return currentTheme &&
-			canUser( 'read', 'global-styles/themes', currentTheme.stylesheet )
-			? __experimentalGetCurrentThemeBaseGlobalStyles()
-			: undefined;
-	}, [] );
-
+	const baseConfig = useSelect(
+		( select ) =>
+			select( coreStore ).__experimentalGetCurrentThemeBaseGlobalStyles(),
+		[]
+	);
 	return [ !! baseConfig, baseConfig ];
 }
 

package/src/components/header/index.js

@@ -22,6 +22,7 @@ import PostPublishButtonOrToggle from '../post-publish-button/post-publish-butto
 import PostSavedState from '../post-saved-state';
 import PostViewLink from '../post-view-link';
 import PreviewDropdown from '../preview-dropdown';
+import ZoomOutToggle from '../zoom-out-toggle';
 import { store as editorStore } from '../../store';
 
 const toolbarVariations = {
@@ -46,7 +47,7 @@ function Header( {
 	forceDisableBlockTools,
 	setEntitiesSavedStatesCallback,
 	title,
-	icon,
+	isEditorIframed,
 } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -117,7 +118,7 @@ function Header( {
 					variants={ toolbarVariations }
 					transition={ { type: 'tween' } }
 				>
-					<DocumentBar title={ title } icon={ icon } />
+					<DocumentBar title={ title } />
 				</motion.div>
 			) }
 			<motion.div
@@ -142,9 +143,13 @@ function Header( {
 					forceIsAutosaveable={ forceIsDirty }
 				/>
 				<PostViewLink />
+
+				{ isEditorIframed && isWideViewport && <ZoomOutToggle /> }
+
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<PinnedItems.Slot scope="core" />
 				) }
+
 				{ ! customSaveButton && (
 					<PostPublishButtonOrToggle
 						forceIsDirty={ forceIsDirty }
@@ -153,6 +158,7 @@ function Header( {
 						}
 					/>
 				) }
+
 				{ customSaveButton }
 				<MoreMenu />
 			</motion.div>

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

@@ -198,9 +198,7 @@ function PrivateExcerpt() {
 				ref={ setPopoverAnchor }
 				renderToggle={ ( { onToggle } ) => (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
-						className="editor-post-excerpt__dropdown__trigger"
+						__next40pxDefaultSize
 						onClick={ onToggle }
 						variant="link"
 					>

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

@@ -160,8 +160,7 @@ function PostFeaturedImage( {
 						render={ ( { open } ) => (
 							<div className="editor-post-featured-image__container">
 								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
+									__next40pxDefaultSize
 									ref={ toggleRef }
 									className={
 										! featuredImageId
@@ -202,8 +201,7 @@ function PostFeaturedImage( {
 								{ !! featuredImageId && (
 									<HStack className="editor-post-featured-image__actions">
 										<Button
-											// TODO: Switch to `true` (40px size) if possible
-											__next40pxDefaultSize={ false }
+											__next40pxDefaultSize
 											className="editor-post-featured-image__action"
 											onClick={ open }
 											aria-haspopup="dialog"
@@ -211,8 +209,7 @@ function PostFeaturedImage( {
 											{ __( 'Replace' ) }
 										</Button>
 										<Button
-											// TODO: Switch to `true` (40px size) if possible
-											__next40pxDefaultSize={ false }
+											__next40pxDefaultSize
 											className="editor-post-featured-image__action"
 											onClick={ () => {
 												onRemoveImage();

package/src/components/post-featured-image/style.scss

@@ -53,7 +53,7 @@
 }
 
 .editor-post-featured-image__preview {
-	height: auto;
+	height: auto !important;
 	outline: $border-width solid rgba($black, 0.1);
 
 	.editor-post-featured-image__preview-image {
@@ -65,10 +65,6 @@
 }
 
 .editor-post-featured-image__toggle {
-	height: 100%;
-	line-height: 20px;
-	padding: $grid-unit-10 0;
-	text-align: center;
 	box-shadow: inset 0 0 0 $border-width $gray-400;
 }
 

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

@@ -100,8 +100,7 @@ export default function PostFormat() {
 				{ suggestion && suggestion.id !== postFormat && (
 					<p className="editor-post-format__suggestion">
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							variant="link"
 							onClick={ () =>
 								onUpdatePostFormat( suggestion.id )

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

@@ -36,8 +36,7 @@ function PostLastRevision() {
 	return (
 		<PostLastRevisionCheck>
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize
 				href={ addQueryArgs( 'revision.php', {
 					revision: lastRevisionId,
 				} ) }

package/src/components/post-locked-modal/index.js

@@ -257,8 +257,7 @@ export default function PostLockedModal() {
 					>
 						{ ! isTakeover && (
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								variant="tertiary"
 								href={ unlockUrl }
 							>
@@ -266,8 +265,7 @@ export default function PostLockedModal() {
 							</Button>
 						) }
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							variant="primary"
 							href={ allPostsUrl }
 						>

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

@@ -28,6 +28,7 @@
 		white-space: normal;
 		text-wrap: balance; // Fallback for Safari.
 		text-wrap: pretty;
+		height: auto;
 		min-height: $button-size-compact;
 	}
 

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

@@ -78,8 +78,7 @@ export class PostPublishPanel extends Component {
 				<div className="editor-post-publish-panel__header">
 					{ isPostPublish ? (
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							size="compact"
 							onClick={ onClose }
 							icon={ closeSmall }
 							label={ __( 'Close panel' ) }

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

@@ -25,8 +25,7 @@ const PostFormatSuggestion = ( {
 	onUpdatePostFormat,
 } ) => (
 	<Button
-		// TODO: Switch to `true` (40px size) if possible
-		__next40pxDefaultSize={ false }
+		__next40pxDefaultSize
 		variant="link"
 		onClick={ () => onUpdatePostFormat( suggestedPostFormat ) }
 	>

package/src/components/post-publish-panel/maybe-upload-media.js

@@ -256,8 +256,7 @@ export default function MaybeUploadMediaPanel() {
 					<Spinner />
 				) : (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="primary"
 						onClick={ uploadImages }
 					>

package/src/components/post-publish-panel/test/__snapshots__/index.js.snap

@@ -60,7 +60,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
     >
       <button
         aria-label="Close panel"
-        class="components-button has-icon"
+        class="components-button is-compact has-icon"
         type="button"
       >
         <svg
@@ -252,7 +252,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
     >
       <button
         aria-label="Close panel"
-        class="components-button has-icon"
+        class="components-button is-compact has-icon"
         type="button"
       >
         <svg

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

@@ -173,6 +173,7 @@ export default function PostStatus() {
 					focusOnMount
 					renderToggle={ ( { onToggle, isOpen } ) => (
 						<Button
+							className="editor-post-status__toggle"
 							variant="tertiary"
 							size="compact"
 							onClick={ onToggle }

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

@@ -4,6 +4,11 @@
 	&.is-read-only {
 		padding: 6px 12px;
 	}
+
+	.editor-post-status__toggle.editor-post-status__toggle {
+		padding-top: $grid-unit-05;
+		padding-bottom: $grid-unit-05;
+	}
 }
 
 .editor-change-status__password-fieldset,

package/src/components/post-taxonomies/hierarchical-term-selector.js

@@ -428,8 +428,7 @@ export function HierarchicalTermSelector( { slug } ) {
 			{ ! loading && hasCreateAction && (
 				<FlexItem>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						onClick={ onToggleForm }
 						className="editor-post-taxonomies__hierarchical-terms-add"
 						aria-expanded={ showForm }

package/src/components/post-taxonomies/most-used-terms.js

@@ -62,8 +62,7 @@ export default function MostUsedTerms( { onSelect, taxonomy } ) {
 				{ terms.map( ( term ) => (
 					<li key={ term.id }>
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							variant="link"
 							onClick={ () => onSelect( term ) }
 						>

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

@@ -34,8 +34,4 @@
 		display: inline-block;
 		margin-right: $grid-unit-10;
 	}
-
-	.components-button {
-		font-size: 12px;
-	}
 }