@wordpress/edit-post 5.0.1 → 5.0.5

package/build-style/style.css

@@ -122,6 +122,12 @@
   }
 }
 
+@media (min-width: 782px) {
+  .components-panel__header + .interface-complementary-area-header {
+    margin-top: 0;
+  }
+}
+
 .interface-complementary-area {
   background: #fff;
   color: #1e1e1e;
@@ -157,12 +163,18 @@
 .interface-complementary-area p {
   margin-top: 0;
 }
-.interface-complementary-area h2,
-.interface-complementary-area h3 {
+.interface-complementary-area h2 {
   font-size: 13px;
   color: #1e1e1e;
   margin-bottom: 1.5em;
 }
+.interface-complementary-area h3 {
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+  color: #1e1e1e;
+  margin-bottom: 1.5em;
+}
 .interface-complementary-area hr {
   border-top: none;
   border-bottom: 1px solid #f0f0f0;
@@ -383,6 +395,39 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   bottom: 0;
 }
 
+.interface-more-menu-dropdown {
+  margin-left: -4px;
+}
+.interface-more-menu-dropdown .components-button {
+  width: auto;
+  padding: 0 2px;
+}
+@media (min-width: 600px) {
+  .interface-more-menu-dropdown {
+    margin-left: 0;
+  }
+  .interface-more-menu-dropdown .components-button {
+    padding: 0 4px;
+  }
+}
+
+.interface-more-menu-dropdown__content .components-popover__content {
+  min-width: 280px;
+}
+@media (min-width: 480px) {
+  .interface-more-menu-dropdown__content .components-popover__content {
+    width: auto;
+    max-width: 480px;
+  }
+}
+.interface-more-menu-dropdown__content .components-popover__content .components-dropdown-menu__menu {
+  padding: 0;
+}
+
+.components-popover.interface-more-menu-dropdown__content {
+  z-index: 99998;
+}
+
 .interface-pinned-items {
   display: flex;
 }
@@ -644,7 +689,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
     align-items: center;
     align-self: stretch;
     border: none;
-    background: #23282e;
+    background: #1e1e1e;
     color: #fff;
     border-radius: 0;
     height: 61px;
@@ -668,7 +713,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
     bottom: 9px;
     left: 9px;
     border-radius: 4px;
-    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #23282e;
+    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #1e1e1e;
   }
 }
 @media (min-width: 782px) and (prefers-reduced-motion: reduce) {
@@ -1278,55 +1323,9 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   .edit-post-preferences-modal .components-modal__content::before {
     content: none;
   }
-}
-.edit-post-preferences-modal .components-navigation {
-  background-color: #fff;
-  padding: 0;
-  max-height: 100%;
-  overflow-y: auto;
-}
-.edit-post-preferences-modal .components-navigation > * {
-  padding: 24px 32px;
-}
-.edit-post-preferences-modal .components-navigation .components-navigation__menu {
-  margin: 0;
-  color: #1e1e1e;
-}
-.edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__item {
-  color: #1e1e1e;
-}
-.edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__item > button {
-  color: inherit;
-  padding: 3px 16px;
-  height: 48px;
-  margin: 0 -16px;
-  width: calc(32px + 100%);
-}
-.edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__item > button:focus {
-  background: #f0f0f0;
-  font-weight: 500;
-}
-.edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__item > button:hover {
-  color: var(--wp-admin-theme-color);
-}
-.edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__item .components-toggle-control__label {
-  color: inherit;
-}
-.edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__menu-title-heading {
-  color: inherit;
-  border-bottom: 1px solid #ddd;
-  padding-left: 0;
-  padding-right: 0;
-}
-.edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__back-button {
-  color: inherit;
-  padding-left: 0;
-}
-.edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__back-button:hover {
-  color: var(--wp-admin-theme-color);
-}
-.edit-post-preferences-modal .components-navigation .components-navigation__menu .edit-post-preferences-modal__custom-fields-confirmation-button {
-  width: auto;
+  .edit-post-preferences-modal .components-navigator-provider {
+    height: 100%;
+  }
 }
 .edit-post-preferences-modal .edit-post-preferences__tabs .components-tab-panel__tabs {
   position: absolute;
@@ -1359,6 +1358,7 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 .edit-post-preferences-modal__section-title {
   font-size: 0.9rem;
   font-weight: 600;
+  margin-top: 0;
 }
 .edit-post-preferences-modal__option .components-base-control .components-base-control__field {
   align-items: center;
@@ -1656,8 +1656,9 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 }
 
 h2.edit-post-template-summary__title {
-  margin: 0;
   line-height: 24px;
+  margin: 0 0 4px;
+  font-weight: 500;
 }
 
 .edit-post-text-editor {
@@ -1666,34 +1667,24 @@ h2.edit-post-template-summary__title {
   background-color: #fff;
   flex-grow: 1;
 }
-.edit-post-text-editor .editor-post-title.editor-post-title__block {
+.edit-post-text-editor .editor-post-title {
   max-width: none;
   line-height: 1.4;
-}
-.edit-post-text-editor .editor-post-title.editor-post-title__block .editor-post-title__input.editor-post-title__input.editor-post-title__input {
   font-family: Menlo, Consolas, monaco, monospace;
   font-size: 2.5em;
   font-weight: normal;
-}
-.edit-post-text-editor .editor-post-title.editor-post-title__block .editor-post-title__input {
   border: 1px solid #949494;
-  margin-bottom: -1px;
   padding: 16px;
 }
 @media (min-width: 600px) {
-  .edit-post-text-editor .editor-post-title.editor-post-title__block .editor-post-title__input {
+  .edit-post-text-editor .editor-post-title {
     padding: 24px;
   }
 }
-.edit-post-text-editor .editor-post-title.editor-post-title__block .editor-post-title__input:focus {
+.edit-post-text-editor .editor-post-title:focus {
   border-color: var(--wp-admin-theme-color);
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
-@media (min-width: 600px) {
-  .edit-post-text-editor .editor-post-title.editor-post-title__block {
-    padding: 0;
-  }
-}
 
 .edit-post-text-editor__body {
   width: 100%;
@@ -1755,11 +1746,13 @@ h2.edit-post-template-summary__title {
   padding: 6px;
 }
 
+.edit-post-visual-editor__post-title-wrapper {
+  margin-top: 4rem;
+  margin-bottom: var(--wp--style--block-gap);
+}
 .edit-post-visual-editor__post-title-wrapper .editor-post-title {
-  margin-top: 2em;
   margin-left: auto;
   margin-right: auto;
-  margin-bottom: 0;
 }
 
 .edit-post-visual-editor__exit-template-mode {
@@ -1787,6 +1780,12 @@ h2.edit-post-template-summary__title {
   background: #00a0d2;
   margin: 0 0 16px;
 }
+.edit-post-welcome-guide__image > img {
+  display: block;
+  max-width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
 .edit-post-welcome-guide__heading {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 24px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "5.0.1",
+	"version": "5.0.5",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,31 +27,31 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.13.10",
-		"@wordpress/a11y": "^3.2.1",
-		"@wordpress/api-fetch": "^5.2.1",
-		"@wordpress/block-editor": "^7.0.1",
-		"@wordpress/block-library": "^5.0.1",
-		"@wordpress/blocks": "^11.0.1",
-		"@wordpress/components": "^16.0.0",
-		"@wordpress/compose": "^5.0.1",
-		"@wordpress/core-data": "^4.0.1",
-		"@wordpress/data": "^6.0.1",
-		"@wordpress/data-controls": "^2.2.2",
-		"@wordpress/editor": "^11.0.1",
-		"@wordpress/element": "^4.0.0",
-		"@wordpress/hooks": "^3.2.0",
-		"@wordpress/i18n": "^4.2.1",
-		"@wordpress/icons": "^5.0.1",
-		"@wordpress/interface": "^4.0.1",
-		"@wordpress/keyboard-shortcuts": "^3.0.1",
-		"@wordpress/keycodes": "^3.2.1",
-		"@wordpress/media-utils": "^3.0.0",
-		"@wordpress/notices": "^3.2.2",
-		"@wordpress/plugins": "^4.0.1",
-		"@wordpress/primitives": "^3.0.0",
-		"@wordpress/url": "^3.2.1",
-		"@wordpress/viewport": "^4.0.1",
-		"@wordpress/warning": "^2.2.1",
+		"@wordpress/a11y": "^3.2.3",
+		"@wordpress/api-fetch": "^5.2.5",
+		"@wordpress/block-editor": "^8.0.0",
+		"@wordpress/block-library": "^6.0.3",
+		"@wordpress/blocks": "^11.1.3",
+		"@wordpress/components": "^19.0.1",
+		"@wordpress/compose": "^5.0.5",
+		"@wordpress/core-data": "^4.0.5",
+		"@wordpress/data": "^6.1.3",
+		"@wordpress/data-controls": "^2.2.6",
+		"@wordpress/editor": "^12.0.2",
+		"@wordpress/element": "^4.0.3",
+		"@wordpress/hooks": "^3.2.1",
+		"@wordpress/i18n": "^4.2.3",
+		"@wordpress/icons": "^6.1.0",
+		"@wordpress/interface": "^4.1.3",
+		"@wordpress/keyboard-shortcuts": "^3.0.5",
+		"@wordpress/keycodes": "^3.2.3",
+		"@wordpress/media-utils": "^3.0.4",
+		"@wordpress/notices": "^3.2.6",
+		"@wordpress/plugins": "^4.0.5",
+		"@wordpress/primitives": "^3.0.3",
+		"@wordpress/url": "^3.3.0",
+		"@wordpress/viewport": "^4.0.5",
+		"@wordpress/warning": "^2.2.2",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
@@ -61,5 +61,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8b67fbd424bc67f81c2d825877f0fae726d6363a"
+	"gitHead": "393c2b5533837fd637e998d23f0124c081a10df0"
 }

package/src/components/header/fullscreen-mode-close/index.js

@@ -7,12 +7,17 @@ import { get } from 'lodash';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { Button, Icon } from '@wordpress/components';
+import {
+	Button,
+	Icon,
+	__unstableMotion as motion,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
 import { wordpress } from '@wordpress/icons';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { useReducedMotion } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -44,15 +49,26 @@ function FullscreenModeClose( { showTooltip, icon, href } ) {
 		[]
 	);
 
+	const disableMotion = useReducedMotion();
+
 	if ( ! isActive || ! postType ) {
 		return null;
 	}
 
 	let buttonIcon = <Icon size="36px" icon={ wordpress } />;
 
+	const effect = {
+		expand: {
+			scale: 1.7,
+			borderRadius: 0,
+			transition: { type: 'tween', duration: '0.2' },
+		},
+	};
+
 	if ( siteIconUrl ) {
 		buttonIcon = (
-			<img
+			<motion.img
+				variants={ ! disableMotion && effect }
 				alt={ __( 'Site Icon' ) }
 				className="edit-post-fullscreen-mode-close_site-icon"
 				src={ siteIconUrl }
@@ -70,19 +86,25 @@ function FullscreenModeClose( { showTooltip, icon, href } ) {
 	}
 
 	return (
-		<Button
-			className="edit-post-fullscreen-mode-close has-icon"
-			href={
-				href ??
-				addQueryArgs( 'edit.php', {
-					post_type: postType.slug,
-				} )
-			}
-			label={ get( postType, [ 'labels', 'view_items' ], __( 'Back' ) ) }
-			showTooltip={ showTooltip }
-		>
-			{ buttonIcon }
-		</Button>
+		<motion.div whileHover="expand">
+			<Button
+				className="edit-post-fullscreen-mode-close has-icon"
+				href={
+					href ??
+					addQueryArgs( 'edit.php', {
+						post_type: postType.slug,
+					} )
+				}
+				label={ get(
+					postType,
+					[ 'labels', 'view_items' ],
+					__( 'Back' )
+				) }
+				showTooltip={ showTooltip }
+			>
+				{ buttonIcon }
+			</Button>
+		</motion.div>
 	);
 }
 

package/src/components/header/fullscreen-mode-close/style.scss

@@ -11,7 +11,7 @@
 		align-items: center;
 		align-self: stretch;
 		border: none;
-		background: #23282e; // WP-admin gray.
+		background: $gray-900;
 		color: $white;
 		border-radius: 0;
 		height: $header-height + $border-width;
@@ -38,7 +38,7 @@
 			bottom: 9px;
 			left: 9px;
 			border-radius: $radius-block-ui + $border-width + $border-width;
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #23282e;
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
 		}
 
 		// Hover color.

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { ScrollView, View } from 'react-native';
+import { Platform, ScrollView, View } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -43,7 +43,13 @@ function HeaderToolbar( {
 } ) {
 	const scrollViewRef = useRef( null );
 	const scrollToStart = () => {
-		scrollViewRef.current.scrollTo( { x: 0 } );
+		// scrollview doesn't seem to automatically adjust to RTL on Android so, scroll to end when Android
+		const isAndroid = Platform.OS === 'android';
+		if ( isAndroid && isRTL ) {
+			scrollViewRef.current.scrollToEnd();
+		} else {
+			scrollViewRef.current.scrollTo( { x: 0 } );
+		}
 	};
 	const renderHistoryButtons = () => {
 		const buttons = [

package/src/components/header/more-menu/index.js

@@ -2,9 +2,12 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { DropdownMenu, MenuGroup } from '@wordpress/components';
-import { moreVertical } from '@wordpress/icons';
-import { ActionItem, PinnedItems } from '@wordpress/interface';
+import { MenuGroup } from '@wordpress/components';
+import {
+	ActionItem,
+	MoreMenuDropdown,
+	PinnedItems,
+} from '@wordpress/interface';
 import { useViewportMatch } from '@wordpress/compose';
 
 /**
@@ -17,26 +20,18 @@ import WritingMenu from '../writing-menu';
 
 const POPOVER_PROPS = {
 	className: 'edit-post-more-menu__content',
-	position: 'bottom left',
-};
-const TOGGLE_PROPS = {
-	tooltipPosition: 'bottom',
 };
 
 const MoreMenu = ( { showIconLabels } ) => {
 	const isLargeViewport = useViewportMatch( 'large' );
 
 	return (
-		<DropdownMenu
+		<MoreMenuDropdown
 			className="edit-post-more-menu"
-			icon={ moreVertical }
-			/* translators: button label text should, if possible, be under 16 characters. */
-			label={ __( 'Options' ) }
 			popoverProps={ POPOVER_PROPS }
 			toggleProps={ {
 				showTooltip: ! showIconLabels,
 				...( showIconLabels && { variant: 'tertiary' } ),
-				...TOGGLE_PROPS,
 			} }
 		>
 			{ ( { onClose } ) => (
@@ -61,7 +56,7 @@ const MoreMenu = ( { showIconLabels } ) => {
 					</MenuGroup>
 				</>
 			) }
-		</DropdownMenu>
+		</MoreMenuDropdown>
 	);
 };
 

package/src/components/header/template-title/index.js

@@ -28,7 +28,9 @@ function TemplateTitle() {
 		return {
 			template: _isEditing ? getEditedPostTemplate() : null,
 			isEditing: _isEditing,
-			title: getEditedPostAttribute( 'title' ),
+			title: getEditedPostAttribute( 'title' )
+				? getEditedPostAttribute( 'title' )
+				: __( 'Untitled' ),
 		};
 	}, [] );
 

package/src/components/header/writing-menu/index.js

@@ -5,11 +5,7 @@ import { MenuGroup } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { displayShortcut } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import FeatureToggle from '../feature-toggle';
+import { MoreMenuFeatureToggle } from '@wordpress/interface';
 
 function WritingMenu() {
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -19,7 +15,8 @@ function WritingMenu() {
 
 	return (
 		<MenuGroup label={ _x( 'View', 'noun' ) }>
-			<FeatureToggle
+			<MoreMenuFeatureToggle
+				scope="core/edit-post"
 				feature="fixedToolbar"
 				label={ __( 'Top toolbar' ) }
 				info={ __(
@@ -28,14 +25,16 @@ function WritingMenu() {
 				messageActivated={ __( 'Top toolbar activated' ) }
 				messageDeactivated={ __( 'Top toolbar deactivated' ) }
 			/>
-			<FeatureToggle
+			<MoreMenuFeatureToggle
+				scope="core/edit-post"
 				feature="focusMode"
 				label={ __( 'Spotlight mode' ) }
 				info={ __( 'Focus on one block at a time' ) }
 				messageActivated={ __( 'Spotlight mode activated' ) }
 				messageDeactivated={ __( 'Spotlight mode deactivated' ) }
 			/>
-			<FeatureToggle
+			<MoreMenuFeatureToggle
+				scope="core/edit-post"
 				feature="fullscreenMode"
 				label={ __( 'Fullscreen mode' ) }
 				info={ __( 'Work without distraction' ) }

package/src/components/keyboard-shortcut-help-modal/dynamic-shortcut.js

@@ -10,19 +10,22 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import Shortcut from './shortcut';
 
 function DynamicShortcut( { name } ) {
-	const { keyCombination, description, aliases } = useSelect( ( select ) => {
-		const {
-			getShortcutKeyCombination,
-			getShortcutDescription,
-			getShortcutAliases,
-		} = select( keyboardShortcutsStore );
+	const { keyCombination, description, aliases } = useSelect(
+		( select ) => {
+			const {
+				getShortcutKeyCombination,
+				getShortcutDescription,
+				getShortcutAliases,
+			} = select( keyboardShortcutsStore );
 
-		return {
-			keyCombination: getShortcutKeyCombination( name ),
-			aliases: getShortcutAliases( name ),
-			description: getShortcutDescription( name ),
-		};
-	} );
+			return {
+				keyCombination: getShortcutKeyCombination( name ),
+				aliases: getShortcutAliases( name ),
+				description: getShortcutDescription( name ),
+			};
+		},
+		[ name ]
+	);
 
 	if ( ! keyCombination ) {
 		return null;

package/src/components/keyboard-shortcut-help-modal/index.js

@@ -91,9 +91,7 @@ const ShortcutCategorySection = ( {
 };
 
 export function KeyboardShortcutHelpModal( { isModalActive, toggleModal } ) {
-	useShortcut( 'core/edit-post/keyboard-shortcuts', toggleModal, {
-		bindGlobal: true,
-	} );
+	useShortcut( 'core/edit-post/keyboard-shortcuts', toggleModal );
 
 	if ( ! isModalActive ) {
 		return null;

package/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KeyboardShortcutHelpModal should match snapshot when the modal is active 1`] = `
-<WithInstanceId(Modal)
+<Modal
   className="edit-post-keyboard-shortcut-help-modal"
   closeLabel="Close"
   onRequestClose={[Function]}
@@ -80,7 +80,7 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
     }
     title="Text formatting"
   />
-</WithInstanceId(Modal)>
+</Modal>
 `;
 
 exports[`KeyboardShortcutHelpModal should match snapshot when the modal is not active 1`] = `""`;

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

@@ -131,44 +131,31 @@ function KeyboardShortcuts() {
 			);
 		},
 		{
-			bindGlobal: true,
 			isDisabled: isModeToggleDisabled,
 		}
 	);
 
-	useShortcut(
-		'core/edit-post/toggle-fullscreen',
-		() => {
-			toggleFeature( 'fullscreenMode' );
-		},
-		{
-			bindGlobal: true,
+	useShortcut( 'core/edit-post/toggle-fullscreen', () => {
+		toggleFeature( 'fullscreenMode' );
+	} );
+
+	useShortcut( 'core/edit-post/toggle-sidebar', ( event ) => {
+		// This shortcut has no known clashes, but use preventDefault to prevent any
+		// obscure shortcuts from triggering.
+		event.preventDefault();
+
+		if ( isEditorSidebarOpened() ) {
+			closeGeneralSidebar();
+		} else {
+			const sidebarToOpen = getBlockSelectionStart()
+				? 'edit-post/block'
+				: 'edit-post/document';
+			openGeneralSidebar( sidebarToOpen );
 		}
-	);
+	} );
 
-	useShortcut(
-		'core/edit-post/toggle-sidebar',
-		( event ) => {
-			// This shortcut has no known clashes, but use preventDefault to prevent any
-			// obscure shortcuts from triggering.
-			event.preventDefault();
-
-			if ( isEditorSidebarOpened() ) {
-				closeGeneralSidebar();
-			} else {
-				const sidebarToOpen = getBlockSelectionStart()
-					? 'edit-post/block'
-					: 'edit-post/document';
-				openGeneralSidebar( sidebarToOpen );
-			}
-		},
-		{ bindGlobal: true }
-	);
-
-	useShortcut(
-		'core/edit-post/toggle-list-view',
-		() => setIsListViewOpened( ! isListViewOpened() ),
-		{ bindGlobal: true }
+	useShortcut( 'core/edit-post/toggle-list-view', () =>
+		setIsListViewOpened( ! isListViewOpened() )
 	);
 
 	return null;