@wordpress/edit-post 7.8.0 → 7.10.0

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/index.js

@@ -113,6 +113,7 @@ export default function StartPageOptions() {
 		<Modal
 			className="edit-post-start-page-options__modal"
 			title={ __( 'Choose a pattern' ) }
+			isFullScreen={ true }
 			onRequestClose={ () => {
 				setModalState( START_PAGE_MODAL_STATES.CLOSED );
 			} }

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

@@ -1,23 +1,19 @@
-.edit-post-start-page-options__modal {
-	// To keep modal dimensions consistent as subsections are navigated, width
-	// and height are used instead of max-(width/height).
-	@include break-small() {
-		width: calc(100% - #{ $grid-unit-20 * 2 });
-		height: calc(100% - #{ $header-height * 2 });
-	}
-	@include break-medium() {
-		width: $break-medium - $grid-unit-20 * 2;
-	}
-	@include break-large() {
-		height: 70%;
-	}
-}
-
 // 2 column masonry layout.
 .edit-post-start-page-options__modal-content .block-editor-block-patterns-list {
 	column-count: 2;
 	column-gap: $grid-unit-30;
 
+	// Small top padding required to avoid cutting off the visible outline when hovering items
+	padding-top: $border-width-focus-fallback;
+
+	@include break-medium() {
+		column-count: 3;
+	}
+
+	@include break-wide() {
+		column-count: 4;
+	}
+
 	.block-editor-block-patterns-list__list-item {
 		break-inside: avoid-column;
 		margin-bottom: $grid-unit-30;

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

@@ -2,11 +2,12 @@
 	position: relative;
 	display: flex;
 	flex-flow: column;
+	overflow: hidden;
 
 	// 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,9 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 					{ ...props }
 				>
 					<ErrorBoundary>
+						{ window?.__experimentalEnableCommandCenter && (
+							<CommandMenu />
+						) }
 						<EditorInitialization postId={ postId } />
 						<Layout styles={ styles } />
 					</ErrorBoundary>