@wordpress/edit-post 7.9.0 → 7.11.0

package/build-style/style.css

@@ -97,7 +97,7 @@
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   :root {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -859,8 +859,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   width: 36px;
   height: 36px;
   border-radius: 2px;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   margin-top: -1px;
 }
 
@@ -1860,7 +1859,7 @@ h2.edit-post-template-summary__title {
   display: flex;
   flex-flow: column;
   overflow: hidden;
-  background-color: #2f2f2f;
+  background-color: #1e1e1e;
   flex: 1 0 auto;
 }
 .edit-post-visual-editor .components-button {
@@ -1913,8 +1912,7 @@ h2.edit-post-template-summary__title {
 .edit-template-welcome-guide__image > img {
   display: block;
   max-width: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .edit-post-welcome-guide__heading,
 .edit-template-welcome-guide__heading {
@@ -2086,7 +2084,7 @@ body.admin-color-light {
   --wp-admin-theme-color-darker-20--rgb: 0, 97, 135;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-light {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -2101,7 +2099,7 @@ body.admin-color-modern {
   --wp-admin-theme-color-darker-20--rgb: 24, 58, 214;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-modern {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -2116,7 +2114,7 @@ body.admin-color-blue {
   --wp-admin-theme-color-darker-20--rgb: 6, 64, 84;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-blue {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -2131,7 +2129,7 @@ body.admin-color-coffee {
   --wp-admin-theme-color-darker-20--rgb: 43, 39, 36;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-coffee {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -2146,7 +2144,7 @@ body.admin-color-ectoplasm {
   --wp-admin-theme-color-darker-20--rgb: 58, 44, 77;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-ectoplasm {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -2161,7 +2159,7 @@ body.admin-color-midnight {
   --wp-admin-theme-color-darker-20--rgb: 208, 44, 33;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-midnight {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -2176,7 +2174,7 @@ body.admin-color-ocean {
   --wp-admin-theme-color-darker-20--rgb: 76, 96, 102;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-ocean {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -2191,7 +2189,7 @@ body.admin-color-sunrise {
   --wp-admin-theme-color-darker-20--rgb: 195, 105, 34;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-sunrise {
     --wp-admin-border-width-focus: 1.5px;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "7.9.0",
+	"version": "7.11.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,36 +27,38 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.32.0",
-		"@wordpress/api-fetch": "^6.29.0",
-		"@wordpress/block-editor": "^12.0.0",
-		"@wordpress/block-library": "^8.9.0",
-		"@wordpress/blocks": "^12.9.0",
-		"@wordpress/components": "^23.9.0",
-		"@wordpress/compose": "^6.9.0",
-		"@wordpress/core-data": "^6.9.0",
-		"@wordpress/data": "^9.2.0",
-		"@wordpress/deprecated": "^3.32.0",
-		"@wordpress/dom": "^3.32.0",
-		"@wordpress/editor": "^13.9.0",
-		"@wordpress/element": "^5.9.0",
-		"@wordpress/hooks": "^3.32.0",
-		"@wordpress/i18n": "^4.32.0",
-		"@wordpress/icons": "^9.23.0",
-		"@wordpress/interface": "^5.9.0",
-		"@wordpress/keyboard-shortcuts": "^4.9.0",
-		"@wordpress/keycodes": "^3.32.0",
-		"@wordpress/media-utils": "^4.23.0",
-		"@wordpress/notices": "^4.0.0",
-		"@wordpress/plugins": "^6.0.0",
-		"@wordpress/preferences": "^3.9.0",
-		"@wordpress/private-apis": "^0.14.0",
-		"@wordpress/url": "^3.33.0",
-		"@wordpress/viewport": "^5.9.0",
-		"@wordpress/warning": "^2.32.0",
-		"@wordpress/widgets": "^3.9.0",
+		"@wordpress/a11y": "^3.34.0",
+		"@wordpress/api-fetch": "^6.31.0",
+		"@wordpress/block-editor": "^12.2.0",
+		"@wordpress/block-library": "^8.11.0",
+		"@wordpress/blocks": "^12.11.0",
+		"@wordpress/commands": "^0.5.0",
+		"@wordpress/components": "^25.0.0",
+		"@wordpress/compose": "^6.11.0",
+		"@wordpress/core-commands": "^0.3.0",
+		"@wordpress/core-data": "^6.11.0",
+		"@wordpress/data": "^9.4.0",
+		"@wordpress/deprecated": "^3.34.0",
+		"@wordpress/dom": "^3.34.0",
+		"@wordpress/editor": "^13.11.0",
+		"@wordpress/element": "^5.11.0",
+		"@wordpress/hooks": "^3.34.0",
+		"@wordpress/i18n": "^4.34.0",
+		"@wordpress/icons": "^9.25.0",
+		"@wordpress/interface": "^5.11.0",
+		"@wordpress/keyboard-shortcuts": "^4.11.0",
+		"@wordpress/keycodes": "^3.34.0",
+		"@wordpress/media-utils": "^4.25.0",
+		"@wordpress/notices": "^4.2.0",
+		"@wordpress/plugins": "^6.2.0",
+		"@wordpress/preferences": "^3.11.0",
+		"@wordpress/private-apis": "^0.16.0",
+		"@wordpress/url": "^3.35.0",
+		"@wordpress/viewport": "^5.11.0",
+		"@wordpress/warning": "^2.34.0",
+		"@wordpress/widgets": "^3.11.0",
 		"classnames": "^2.3.1",
-		"memize": "^1.1.0",
+		"memize": "^2.1.0",
 		"rememo": "^4.0.2"
 	},
 	"peerDependencies": {
@@ -66,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6df0c62d43b8901414ccd22ffbe56eaa99d012a6"
+	"gitHead": "c7c79cb11b677adcbf06cf5f8cfb6c5ec1699f19"
 }

package/src/components/header/header-toolbar/index.js

@@ -26,6 +26,8 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as editPostStore } from '../../../store';
 import { unlock } from '../../../private-apis';
 
+const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
+
 const preventDefault = ( event ) => {
 	event.preventDefault();
 };
@@ -41,27 +43,15 @@ function HeaderToolbar() {
 		showIconLabels,
 		isListViewOpen,
 		listViewShortcut,
-		selectedBlockId,
-		hasFixedToolbar,
 	} = useSelect( ( select ) => {
-		const {
-			hasInserterItems,
-			getBlockRootClientId,
-			getBlockSelectionEnd,
-			getSelectedBlockClientId,
-			getFirstMultiSelectedBlockClientId,
-			getSettings,
-		} = select( blockEditorStore );
+		const { hasInserterItems, getBlockRootClientId, getBlockSelectionEnd } =
+			select( blockEditorStore );
 		const { getEditorSettings } = select( editorStore );
 		const { getEditorMode, isFeatureActive, isListViewOpened } =
 			select( editPostStore );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
 
 		return {
-			hasFixedToolbar: getSettings().hasFixedToolbar,
-			selectedBlockId:
-				getSelectedBlockClientId() ||
-				getFirstMultiSelectedBlockClientId(),
 			// This setting (richEditingEnabled) should not live in the block editor's setting.
 			isInserterEnabled:
 				getEditorMode() === 'visual' &&
@@ -79,18 +69,19 @@ function HeaderToolbar() {
 		};
 	}, [] );
 
-	const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
-
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideViewport = useViewportMatch( 'wide' );
-	const { shouldShowContextualToolbar, canFocusHiddenToolbar } =
-		useShouldContextualToolbarShow( selectedBlockId );
+	const {
+		shouldShowContextualToolbar,
+		canFocusHiddenToolbar,
+		fixedToolbarCanBeFocused,
+	} = useShouldContextualToolbarShow();
 	// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.
 	// There's a fixed block toolbar when the fixed toolbar option is enabled or when the browser width is less than the large viewport.
 	const blockToolbarCanBeFocused =
 		shouldShowContextualToolbar ||
 		canFocusHiddenToolbar ||
-		( ( hasFixedToolbar || ! isLargeViewport ) && selectedBlockId );
+		fixedToolbarCanBeFocused;
 	/* translators: accessibility text for the editor toolbar */
 	const toolbarAriaLabel = __( 'Document tools' );
 

package/src/components/header/index.js

@@ -15,6 +15,7 @@ import HeaderToolbar from './header-toolbar';
 import MoreMenu from './more-menu';
 import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
 import { default as DevicePreview } from '../device-preview';
+import ViewLink from '../view-link';
 import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
 import TemplateTitle from './template-title';
@@ -88,6 +89,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 						showIconLabels={ showIconLabels }
 					/>
 				) }
+				<ViewLink />
 				<DevicePreview />
 				<PostPreviewButton
 					forceIsAutosaveable={ hasActiveMetaboxes }

package/src/components/keyboard-shortcuts/index.js

@@ -130,7 +130,7 @@ function KeyboardShortcuts() {
 		registerShortcut( {
 			name: 'core/edit-post/toggle-sidebar',
 			category: 'global',
-			description: __( 'Show or hide the settings sidebar.' ),
+			description: __( 'Show or hide the Settings sidebar.' ),
 			keyCombination: {
 				modifier: 'primaryShift',
 				character: ',',

package/src/components/layout/style.scss

@@ -109,5 +109,4 @@
 			z-index: 19;
 		}
 	}
-
 }

package/src/components/preferences-modal/test/__snapshots__/index.js.snap

@@ -608,13 +608,13 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
 }
 
 .emotion-13:hover {
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 
 .emotion-13:focus {
   background-color: transparent;
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 3px solid transparent;
 }
 

package/src/components/sidebar/plugin-document-setting-panel/index.js

@@ -17,7 +17,7 @@ import warning from '@wordpress/warning';
 import { EnablePluginDocumentSettingPanelOption } from '../../preferences-modal/options';
 import { store as editPostStore } from '../../../store';
 
-export const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' );
+const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' );
 
 const PluginDocumentSettingFill = ( {
 	isEnabled,

package/src/components/sidebar/plugin-post-status-info/index.js

@@ -7,7 +7,7 @@
  */
 import { createSlotFill, PanelRow } from '@wordpress/components';
 
-export const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
+const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
 
 /**
  * Renders a row in the Summary panel of the Document sidebar.

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

@@ -2,9 +2,13 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { PanelBody } from '@wordpress/components';
+import {
+	__experimentalHStack as HStack,
+	PanelBody,
+} from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose, ifCondition } from '@wordpress/compose';
+import { PostSwitchToDraftButton } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -48,7 +52,15 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 						<PostSlug />
 						<PostAuthor />
 						{ fills }
-						<PostTrash />
+						<HStack
+							style={ {
+								marginTop: '16px',
+							} }
+							spacing={ 4 }
+						>
+							<PostSwitchToDraftButton />
+							<PostTrash />
+						</HStack>
 					</>
 				) }
 			</PluginPostStatusInfo.Slot>

package/src/components/sidebar/post-trash/index.js

@@ -1,15 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { PanelRow } from '@wordpress/components';
 import { PostTrash as PostTrashLink, PostTrashCheck } from '@wordpress/editor';
+import { FlexItem } from '@wordpress/components';
 
 export default function PostTrash() {
 	return (
 		<PostTrashCheck>
-			<PanelRow>
+			<FlexItem isBlock>
 				<PostTrashLink />
-			</PanelRow>
+			</FlexItem>
 		</PostTrashCheck>
 	);
 }

package/src/components/sidebar/settings-sidebar/index.js

@@ -73,7 +73,7 @@ const SettingsSidebar = () => {
 		<PluginSidebarEditPost
 			identifier={ sidebarName }
 			header={ <SettingsHeader sidebarName={ sidebarName } /> }
-			closeLabel={ __( 'Close settings' ) }
+			closeLabel={ __( 'Close Settings' ) }
 			headerClassName="edit-post-sidebar__panel-tabs"
 			/* translators: button label text should, if possible, be under 16 characters. */
 			title={ __( 'Settings' ) }

package/src/components/start-page-options/style.scss

@@ -4,7 +4,7 @@
 	column-gap: $grid-unit-30;
 
 	// Small top padding required to avoid cutting off the visible outline when hovering items
-	padding-top: $border-width-focus;
+	padding-top: $border-width-focus-fallback;
 
 	@include break-medium() {
 		column-count: 3;

package/src/components/view-link/index.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { external } from '@wordpress/icons';
+import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+
+export default function ViewLink() {
+	const { permalink, isPublished, label } = useSelect( ( select ) => {
+		// Grab post type to retrieve the view_item label.
+		const postTypeSlug = select( editorStore ).getCurrentPostType();
+		const postType = select( coreStore ).getPostType( postTypeSlug );
+
+		return {
+			permalink: select( editorStore ).getPermalink(),
+			isPublished: select( editorStore ).isCurrentPostPublished(),
+			label: postType?.labels.view_item,
+		};
+	}, [] );
+
+	// Only render the view button if the post is published and has a permalink.
+	if ( ! isPublished || ! permalink ) {
+		return null;
+	}
+
+	return (
+		<Button
+			icon={ external }
+			label={ label || __( 'View post' ) }
+			href={ permalink }
+			target="_blank"
+		/>
+	);
+}

package/src/components/visual-editor/header.native.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
 /**
  * WordPress dependencies
  */
@@ -6,8 +11,10 @@ import { __ } from '@wordpress/i18n';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { PostTitle } from '@wordpress/editor';
-import { ReadableContentView } from '@wordpress/components';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	store as blockEditorStore,
+	useEditorWrapperStyles,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -21,12 +28,13 @@ const Header = memo(
 		title,
 		getStylesFromColorScheme,
 	} ) {
+		const [ wrapperStyles ] = useEditorWrapperStyles();
 		const blockHolderFocusedStyle = getStylesFromColorScheme(
 			styles.blockHolderFocused,
 			styles.blockHolderFocusedDark
 		);
 		return (
-			<ReadableContentView>
+			<View style={ wrapperStyles }>
 				<PostTitle
 					innerRef={ setTitleRef }
 					title={ title }
@@ -36,7 +44,7 @@ const Header = memo(
 					focusedBorderColor={ blockHolderFocusedStyle.borderColor }
 					accessibilityLabel="post-title"
 				/>
-			</ReadableContentView>
+			</View>
 		);
 	},
 	( prevProps, nextProps ) => prevProps.title === nextProps.title

package/src/components/visual-editor/style.scss

@@ -7,7 +7,7 @@
 	// Gray preview overlay (desktop/tablet/mobile) is intentionally not set on an element with scrolling content like
 	// interface-interface-skeleton__content. This causes graphical glitches (flashes of the background color)
 	// when scrolling in Safari due to incorrect ordering of large compositing layers (GPU acceleration).
-	background-color: $gray-800;
+	background-color: $gray-900;
 
 	// The button element easily inherits styles that are meant for the editor style.
 	// These rules enhance the specificity to reduce that inheritance.

package/src/editor.js

@@ -14,6 +14,8 @@ import { SlotFillProvider } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { CommandMenu } from '@wordpress/commands';
+import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 
 /**
  * Internal dependencies
@@ -24,8 +26,10 @@ import { store as editPostStore } from './store';
 import { unlock } from './private-apis';
 
 const { ExperimentalEditorProvider } = unlock( editorPrivateApis );
+const { useCommands } = unlock( coreCommandsPrivateApis );
 
 function Editor( { postId, postType, settings, initialEdits, ...props } ) {
+	useCommands();
 	const {
 		hasFixedToolbar,
 		focusMode,
@@ -185,6 +189,7 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 					{ ...props }
 				>
 					<ErrorBoundary>
+						<CommandMenu />
 						<EditorInitialization postId={ postId } />
 						<Layout styles={ styles } />
 					</ErrorBoundary>

package/src/index.js

@@ -79,7 +79,7 @@ export function initializeEditor(
 	}
 
 	/*
-	 * Prevent adding template part in the post editor.
+	 * Prevent adding template part and post content block in the post editor.
 	 * Only add the filter when the post editor is initialized, not imported.
 	 * Also only add the filter(s) after registerCoreBlocks()
 	 * so that common filters in the block library are not overwritten.
@@ -90,7 +90,8 @@ export function initializeEditor(
 		( canInsert, blockType ) => {
 			if (
 				! select( editPostStore ).isEditingTemplate() &&
-				blockType.name === 'core/template-part'
+				( blockType.name === 'core/template-part' ||
+					blockType.name === 'core/post-content' )
 			) {
 				return false;
 			}