@wordpress/edit-post 7.15.0 → 7.17.0

package/build-style/style-rtl.css

@@ -320,6 +320,11 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   overflow: auto;
   z-index: 20;
 }
+@media (min-width: 782px) {
+  .interface-interface-skeleton__content {
+    z-index: auto;
+  }
+}
 
 .interface-interface-skeleton__secondary-sidebar,
 .interface-interface-skeleton__sidebar {
@@ -466,21 +471,22 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   gap: 4px;
   margin-left: -4px;
 }
-.interface-pinned-items .components-button:not(:first-child) {
-  display: none;
-}
-@media (min-width: 600px) {
-  .interface-pinned-items .components-button:not(:first-child) {
-    display: flex;
-  }
-}
 .interface-pinned-items .components-button {
+  display: none;
   margin: 0;
 }
+.interface-pinned-items .components-button:nth-last-child(1), .interface-pinned-items .components-button:nth-last-child(2) {
+  display: flex;
+}
 .interface-pinned-items .components-button svg {
   max-width: 24px;
   max-height: 24px;
 }
+@media (min-width: 600px) {
+  .interface-pinned-items .components-button {
+    display: flex;
+  }
+}
 
 @media (min-width: 600px) {
   .interface-preferences-modal {
@@ -606,7 +612,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 
-.edit-post-header__document-title {
+.edit-post-header__center {
   flex-grow: 1;
   display: flex;
   justify-content: center;
@@ -948,6 +954,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   display: inline-flex;
   align-items: center;
   padding-right: 8px;
+  margin-left: 8px;
 }
 @media (min-width: 600px) {
   .edit-post-header-toolbar__left {
@@ -977,7 +984,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   margin-right: 8px;
 }
 
-.edit-post-document-title {
+.edit-post-document-actions {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -988,44 +995,46 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   border-radius: 4px;
   width: min(100%, 450px);
 }
-.edit-post-document-title:hover {
-  color: currentColor;
+.edit-post-document-actions .components-button:hover {
+  color: var(--wp-block-synced-color);
   background: #e0e0e0;
 }
 
-.edit-post-document-title__title.components-button {
+.edit-post-document-actions__command {
   flex-grow: 1;
   color: var(--wp-block-synced-color);
   overflow: hidden;
 }
-.edit-post-document-title__title.components-button:hover {
+
+.edit-post-document-actions__title {
+  flex-grow: 1;
   color: var(--wp-block-synced-color);
+  overflow: hidden;
 }
-.edit-post-document-title__title.components-button h1 {
+.edit-post-document-actions__title:hover {
   color: var(--wp-block-synced-color);
+}
+.edit-post-document-actions__title .block-editor-block-icon {
+  flex-shrink: 0;
+}
+.edit-post-document-actions__title h1 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: var(--wp-block-synced-color);
 }
 
-.edit-post-document-title__shortcut {
-  flex-shrink: 0;
-  color: #757575;
-  padding: 0 12px;
-}
-.edit-post-document-title__shortcut:hover {
-  color: #757575;
+.edit-post-document-actions__shortcut {
+  color: #2f2f2f;
 }
 
-.edit-post-document-title__left {
+.edit-post-document-actions__back.components-button.has-icon.has-text {
   min-width: 36px;
   flex-shrink: 0;
-}
-.edit-post-document-title__left .components-button.has-icon.has-text {
   color: #757575;
   gap: 0;
 }
-.edit-post-document-title__left .components-button.has-icon.has-text:hover {
+.edit-post-document-actions__back.components-button.has-icon.has-text:hover {
   color: currentColor;
 }
 
@@ -1583,6 +1592,7 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   width: 100%;
   position: relative;
   justify-content: flex-start;
+  align-items: flex-start;
 }
 .edit-post-post-schedule span {
   display: block;
@@ -1594,6 +1604,7 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 .components-button.edit-post-post-schedule__toggle {
   text-align: right;
   white-space: normal;
+  height: auto;
 }
 .components-button.edit-post-post-schedule__toggle span {
   width: 0;
@@ -1832,10 +1843,12 @@ h2.edit-post-template-summary__title {
   position: relative;
   display: flex;
   flex-flow: column;
-  overflow: hidden;
   background-color: #1e1e1e;
   flex: 1 0 auto;
 }
+.edit-post-visual-editor:not(.has-inline-canvas) {
+  overflow: hidden;
+}
 .edit-post-visual-editor .components-button {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 13px;

package/build-style/style.css

@@ -320,6 +320,11 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   overflow: auto;
   z-index: 20;
 }
+@media (min-width: 782px) {
+  .interface-interface-skeleton__content {
+    z-index: auto;
+  }
+}
 
 .interface-interface-skeleton__secondary-sidebar,
 .interface-interface-skeleton__sidebar {
@@ -466,21 +471,22 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   gap: 4px;
   margin-right: -4px;
 }
-.interface-pinned-items .components-button:not(:first-child) {
-  display: none;
-}
-@media (min-width: 600px) {
-  .interface-pinned-items .components-button:not(:first-child) {
-    display: flex;
-  }
-}
 .interface-pinned-items .components-button {
+  display: none;
   margin: 0;
 }
+.interface-pinned-items .components-button:nth-last-child(1), .interface-pinned-items .components-button:nth-last-child(2) {
+  display: flex;
+}
 .interface-pinned-items .components-button svg {
   max-width: 24px;
   max-height: 24px;
 }
+@media (min-width: 600px) {
+  .interface-pinned-items .components-button {
+    display: flex;
+  }
+}
 
 @media (min-width: 600px) {
   .interface-preferences-modal {
@@ -606,7 +612,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 
-.edit-post-header__document-title {
+.edit-post-header__center {
   flex-grow: 1;
   display: flex;
   justify-content: center;
@@ -948,6 +954,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   display: inline-flex;
   align-items: center;
   padding-left: 8px;
+  margin-right: 8px;
 }
 @media (min-width: 600px) {
   .edit-post-header-toolbar__left {
@@ -977,7 +984,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   margin-left: 8px;
 }
 
-.edit-post-document-title {
+.edit-post-document-actions {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -988,44 +995,46 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   border-radius: 4px;
   width: min(100%, 450px);
 }
-.edit-post-document-title:hover {
-  color: currentColor;
+.edit-post-document-actions .components-button:hover {
+  color: var(--wp-block-synced-color);
   background: #e0e0e0;
 }
 
-.edit-post-document-title__title.components-button {
+.edit-post-document-actions__command {
   flex-grow: 1;
   color: var(--wp-block-synced-color);
   overflow: hidden;
 }
-.edit-post-document-title__title.components-button:hover {
+
+.edit-post-document-actions__title {
+  flex-grow: 1;
   color: var(--wp-block-synced-color);
+  overflow: hidden;
 }
-.edit-post-document-title__title.components-button h1 {
+.edit-post-document-actions__title:hover {
   color: var(--wp-block-synced-color);
+}
+.edit-post-document-actions__title .block-editor-block-icon {
+  flex-shrink: 0;
+}
+.edit-post-document-actions__title h1 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: var(--wp-block-synced-color);
 }
 
-.edit-post-document-title__shortcut {
-  flex-shrink: 0;
-  color: #757575;
-  padding: 0 12px;
-}
-.edit-post-document-title__shortcut:hover {
-  color: #757575;
+.edit-post-document-actions__shortcut {
+  color: #2f2f2f;
 }
 
-.edit-post-document-title__left {
+.edit-post-document-actions__back.components-button.has-icon.has-text {
   min-width: 36px;
   flex-shrink: 0;
-}
-.edit-post-document-title__left .components-button.has-icon.has-text {
   color: #757575;
   gap: 0;
 }
-.edit-post-document-title__left .components-button.has-icon.has-text:hover {
+.edit-post-document-actions__back.components-button.has-icon.has-text:hover {
   color: currentColor;
 }
 
@@ -1583,6 +1592,7 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   width: 100%;
   position: relative;
   justify-content: flex-start;
+  align-items: flex-start;
 }
 .edit-post-post-schedule span {
   display: block;
@@ -1594,6 +1604,7 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 .components-button.edit-post-post-schedule__toggle {
   text-align: left;
   white-space: normal;
+  height: auto;
 }
 .components-button.edit-post-post-schedule__toggle span {
   width: 0;
@@ -1832,10 +1843,12 @@ h2.edit-post-template-summary__title {
   position: relative;
   display: flex;
   flex-flow: column;
-  overflow: hidden;
   background-color: #1e1e1e;
   flex: 1 0 auto;
 }
+.edit-post-visual-editor:not(.has-inline-canvas) {
+  overflow: hidden;
+}
 .edit-post-visual-editor .components-button {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 13px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "7.15.0",
+	"version": "7.17.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,36 +27,36 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.38.0",
-		"@wordpress/api-fetch": "^6.35.0",
-		"@wordpress/block-editor": "^12.6.0",
-		"@wordpress/block-library": "^8.15.0",
-		"@wordpress/blocks": "^12.15.0",
-		"@wordpress/commands": "^0.9.0",
-		"@wordpress/components": "^25.4.0",
-		"@wordpress/compose": "^6.15.0",
-		"@wordpress/core-commands": "^0.7.0",
-		"@wordpress/core-data": "^6.15.0",
-		"@wordpress/data": "^9.8.0",
-		"@wordpress/deprecated": "^3.38.0",
-		"@wordpress/dom": "^3.38.0",
-		"@wordpress/editor": "^13.15.0",
-		"@wordpress/element": "^5.15.0",
-		"@wordpress/hooks": "^3.38.0",
-		"@wordpress/i18n": "^4.38.0",
-		"@wordpress/icons": "^9.29.0",
-		"@wordpress/interface": "^5.15.0",
-		"@wordpress/keyboard-shortcuts": "^4.15.0",
-		"@wordpress/keycodes": "^3.38.0",
-		"@wordpress/media-utils": "^4.29.0",
-		"@wordpress/notices": "^4.6.0",
-		"@wordpress/plugins": "^6.6.0",
-		"@wordpress/preferences": "^3.15.0",
-		"@wordpress/private-apis": "^0.20.0",
-		"@wordpress/url": "^3.39.0",
-		"@wordpress/viewport": "^5.15.0",
-		"@wordpress/warning": "^2.38.0",
-		"@wordpress/widgets": "^3.15.0",
+		"@wordpress/a11y": "^3.40.0",
+		"@wordpress/api-fetch": "^6.37.0",
+		"@wordpress/block-editor": "^12.8.0",
+		"@wordpress/block-library": "^8.17.0",
+		"@wordpress/blocks": "^12.17.0",
+		"@wordpress/commands": "^0.11.0",
+		"@wordpress/components": "^25.6.0",
+		"@wordpress/compose": "^6.17.0",
+		"@wordpress/core-commands": "^0.9.0",
+		"@wordpress/core-data": "^6.17.0",
+		"@wordpress/data": "^9.10.0",
+		"@wordpress/deprecated": "^3.40.0",
+		"@wordpress/dom": "^3.40.0",
+		"@wordpress/editor": "^13.17.0",
+		"@wordpress/element": "^5.17.0",
+		"@wordpress/hooks": "^3.40.0",
+		"@wordpress/i18n": "^4.40.0",
+		"@wordpress/icons": "^9.31.0",
+		"@wordpress/interface": "^5.17.0",
+		"@wordpress/keyboard-shortcuts": "^4.17.0",
+		"@wordpress/keycodes": "^3.40.0",
+		"@wordpress/media-utils": "^4.31.0",
+		"@wordpress/notices": "^4.8.0",
+		"@wordpress/plugins": "^6.8.0",
+		"@wordpress/preferences": "^3.17.0",
+		"@wordpress/private-apis": "^0.22.0",
+		"@wordpress/url": "^3.41.0",
+		"@wordpress/viewport": "^5.17.0",
+		"@wordpress/warning": "^2.40.0",
+		"@wordpress/widgets": "^3.17.0",
 		"classnames": "^2.3.1",
 		"memize": "^2.1.0",
 		"rememo": "^4.0.2"
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6f14d11ed4cb59df110a28ebaa23ecba95eb673a"
+	"gitHead": "78a288d55b83a713b2f7d98d5a855c0771a2afc6"
 }

package/src/components/header/{document-title → document-actions}/index.js

@@ -19,7 +19,7 @@ import { displayShortcut } from '@wordpress/keycodes';
  */
 import { store as editPostStore } from '../../../store';
 
-function DocumentTitle() {
+function DocumentActions() {
 	const { template, isEditing } = useSelect( ( select ) => {
 		const { isEditingTemplate, getEditedPostTemplate } =
 			select( editPostStore );
@@ -46,24 +46,26 @@ function DocumentTitle() {
 	}
 
 	return (
-		<div className="edit-post-document-title">
-			<span className="edit-post-document-title__left">
-				<Button
-					onClick={ () => {
-						clearSelectedBlock();
-						setIsEditingTemplate( false );
-					} }
-					icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
-				>
-					{ __( 'Back' ) }
-				</Button>
-			</span>
-
+		<div className="edit-post-document-actions">
+			<Button
+				className="edit-post-document-actions__back"
+				onClick={ () => {
+					clearSelectedBlock();
+					setIsEditingTemplate( false );
+				} }
+				icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
+			>
+				{ __( 'Back' ) }
+			</Button>
 			<Button
-				className="edit-post-document-title__title"
+				className="edit-post-document-actions__command"
 				onClick={ () => openCommandCenter() }
 			>
-				<HStack spacing={ 1 } justify="center">
+				<HStack
+					className="edit-post-document-actions__title"
+					spacing={ 1 }
+					justify="center"
+				>
 					<BlockIcon icon={ layout } />
 					<Text size="body" as="h1">
 						<VisuallyHidden as="span">
@@ -72,15 +74,12 @@ function DocumentTitle() {
 						{ templateTitle }
 					</Text>
 				</HStack>
-			</Button>
-			<Button
-				className="edit-post-document-title__shortcut"
-				onClick={ () => openCommandCenter() }
-			>
-				{ displayShortcut.primary( 'k' ) }
+				<span className="edit-post-document-actions__shortcut">
+					{ displayShortcut.primary( 'k' ) }
+				</span>
 			</Button>
 		</div>
 	);
 }
 
-export default DocumentTitle;
+export default DocumentActions;

package/src/components/header/{document-title → document-actions}/style.scss

@@ -1,4 +1,4 @@
-.edit-post-document-title {
+.edit-post-document-actions {
 	display: flex;
 	align-items: center;
 	gap: $grid-unit;
@@ -13,13 +13,21 @@
 	border-radius: 4px;
 	width: min(100%, 450px);
 
-	&:hover {
-		color: currentColor;
-		background: $gray-200;
+	.components-button {
+		&:hover {
+			color: var(--wp-block-synced-color);
+			background: $gray-200;
+		}
 	}
 }
 
-.edit-post-document-title__title.components-button {
+.edit-post-document-actions__command {
+	flex-grow: 1;
+	color: var(--wp-block-synced-color);
+	overflow: hidden;
+}
+
+.edit-post-document-actions__title {
 	flex-grow: 1;
 	color: var(--wp-block-synced-color);
 	overflow: hidden;
@@ -28,34 +36,29 @@
 		color: var(--wp-block-synced-color);
 	}
 
+	.block-editor-block-icon {
+		flex-shrink: 0;
+	}
+
 	h1 {
-		color: var(--wp-block-synced-color);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		color: var(--wp-block-synced-color);
 	}
 }
 
-.edit-post-document-title__shortcut {
-	flex-shrink: 0;
-	color: $gray-700;
-	padding: 0 $grid-unit-15;
-
-	&:hover {
-		color: $gray-700;
-	}
+.edit-post-document-actions__shortcut {
+	color: $gray-800;
 }
 
-.edit-post-document-title__left {
+.edit-post-document-actions__back.components-button.has-icon.has-text {
 	min-width: $button-size;
 	flex-shrink: 0;
+	color: $gray-700;
+	gap: 0;
 
-	.components-button.has-icon.has-text {
-		color: $gray-700;
-		gap: 0;
-
-		&:hover {
-			color: currentColor;
-		}
+	&:hover {
+		color: currentColor;
 	}
 }

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

@@ -100,6 +100,7 @@ function HeaderToolbar( {
 		( blockType ) => () => {
 			insertBlock( createBlock( blockType ), undefined, undefined, true, {
 				source: 'inserter_menu',
+				inserterMethod: 'quick-inserter',
 			} );
 		},
 		[ insertBlock ]

package/src/components/header/header-toolbar/style.scss

@@ -82,6 +82,10 @@
 	align-items: center;
 	padding-left: $grid-unit-10;
 
+	// Some plugins add buttons here despite best practices.
+	// Push them a bit rightwards to fit the top toolbar.
+	margin-right: $grid-unit-10;
+
 	@include break-small() {
 		padding-left: $grid-unit-30;
 	}

package/src/components/header/index.js

@@ -18,7 +18,7 @@ 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 DocumentTitle from './document-title';
+import DocumentActions from './document-actions';
 
 const slideY = {
 	hidden: { y: '-50px' },
@@ -60,8 +60,8 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 				className="edit-post-header__toolbar"
 			>
 				<HeaderToolbar />
-				<div className="edit-post-header__document-title">
-					<DocumentTitle />
+				<div className="edit-post-header__center">
+					<DocumentActions />
 				</div>
 			</motion.div>
 			<motion.div

package/src/components/header/mode-switcher/index.js

@@ -55,12 +55,31 @@ function ModeSwitcher() {
 		return null;
 	}
 
-	if ( ! isRichEditingEnabled || ! isCodeEditingEnabled ) {
-		return null;
+	let selectedMode = mode;
+	if ( ! isRichEditingEnabled && mode === 'visual' ) {
+		selectedMode = 'text';
+	}
+	if ( ! isCodeEditingEnabled && mode === 'text' ) {
+		selectedMode = 'visual';
 	}
 
 	const choices = MODES.map( ( choice ) => {
-		if ( choice.value !== mode ) {
+		if ( ! isCodeEditingEnabled && choice.value === 'text' ) {
+			choice = {
+				...choice,
+				disabled: true,
+			};
+		}
+		if ( ! isRichEditingEnabled && choice.value === 'visual' ) {
+			choice = {
+				...choice,
+				disabled: true,
+				info: __(
+					'You can enable the visual editor in your profile settings.'
+				),
+			};
+		}
+		if ( choice.value !== selectedMode && ! choice.disabled ) {
 			return { ...choice, shortcut };
 		}
 		return choice;
@@ -70,7 +89,7 @@ function ModeSwitcher() {
 		<MenuGroup label={ __( 'Editor' ) }>
 			<MenuItemsChoice
 				choices={ choices }
-				value={ mode }
+				value={ selectedMode }
 				onSelect={ switchEditorMode }
 			/>
 		</MenuGroup>

package/src/components/header/style.scss

@@ -44,7 +44,7 @@
 	}
 }
 
-.edit-post-header__document-title {
+.edit-post-header__center {
 	flex-grow: 1;
 	display: flex;
 	justify-content: center;

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

@@ -272,6 +272,35 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
               </kbd>
             </div>
           </li>
+          <li
+            class="edit-post-keyboard-shortcut-help-modal__shortcut"
+          >
+            <div
+              class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
+            >
+              Select text across multiple blocks.
+            </div>
+            <div
+              class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
+            >
+              <kbd
+                aria-label="Shift + Arrow"
+                class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
+              >
+                <kbd
+                  class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
+                >
+                  Shift
+                </kbd>
+                +
+                <kbd
+                  class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
+                >
+                  Arrow
+                </kbd>
+              </kbd>
+            </div>
+          </li>
         </ul>
       </section>
       <section