@wordpress/edit-post 7.16.0 → 7.17.1

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 {
@@ -1418,9 +1424,10 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 }
 .edit-post-editor__document-overview-panel .components-tab-panel__tabs .edit-post-sidebar__panel-tab {
   width: 50%;
+  margin-bottom: -1px;
 }
 .edit-post-editor__document-overview-panel .components-tab-panel__tab-content {
-  height: calc(100% - 48px);
+  height: calc(100% - 47px);
 }
 
 .edit-post-editor__inserter-panel-header {
@@ -1586,6 +1593,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;
@@ -1597,6 +1605,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;
@@ -1835,10 +1844,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 {
@@ -1418,9 +1424,10 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 }
 .edit-post-editor__document-overview-panel .components-tab-panel__tabs .edit-post-sidebar__panel-tab {
   width: 50%;
+  margin-bottom: -1px;
 }
 .edit-post-editor__document-overview-panel .components-tab-panel__tab-content {
-  height: calc(100% - 48px);
+  height: calc(100% - 47px);
 }
 
 .edit-post-editor__inserter-panel-header {
@@ -1586,6 +1593,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;
@@ -1597,6 +1605,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;
@@ -1835,10 +1844,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.16.0",
+	"version": "7.17.1",
 	"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.39.0",
-		"@wordpress/api-fetch": "^6.36.0",
-		"@wordpress/block-editor": "^12.7.0",
-		"@wordpress/block-library": "^8.16.0",
-		"@wordpress/blocks": "^12.16.0",
-		"@wordpress/commands": "^0.10.0",
-		"@wordpress/components": "^25.5.0",
-		"@wordpress/compose": "^6.16.0",
-		"@wordpress/core-commands": "^0.8.0",
-		"@wordpress/core-data": "^6.16.0",
-		"@wordpress/data": "^9.9.0",
-		"@wordpress/deprecated": "^3.39.0",
-		"@wordpress/dom": "^3.39.0",
-		"@wordpress/editor": "^13.16.0",
-		"@wordpress/element": "^5.16.0",
-		"@wordpress/hooks": "^3.39.0",
-		"@wordpress/i18n": "^4.39.0",
-		"@wordpress/icons": "^9.30.0",
-		"@wordpress/interface": "^5.16.0",
-		"@wordpress/keyboard-shortcuts": "^4.16.0",
-		"@wordpress/keycodes": "^3.39.0",
-		"@wordpress/media-utils": "^4.30.0",
-		"@wordpress/notices": "^4.7.0",
-		"@wordpress/plugins": "^6.7.0",
-		"@wordpress/preferences": "^3.16.0",
-		"@wordpress/private-apis": "^0.21.0",
-		"@wordpress/url": "^3.40.0",
-		"@wordpress/viewport": "^5.16.0",
-		"@wordpress/warning": "^2.39.0",
-		"@wordpress/widgets": "^3.16.0",
+		"@wordpress/a11y": "^3.40.1",
+		"@wordpress/api-fetch": "^6.37.1",
+		"@wordpress/block-editor": "^12.8.1",
+		"@wordpress/block-library": "^8.17.1",
+		"@wordpress/blocks": "^12.17.1",
+		"@wordpress/commands": "^0.11.1",
+		"@wordpress/components": "^25.6.1",
+		"@wordpress/compose": "^6.17.1",
+		"@wordpress/core-commands": "^0.9.1",
+		"@wordpress/core-data": "^6.17.1",
+		"@wordpress/data": "^9.10.1",
+		"@wordpress/deprecated": "^3.40.1",
+		"@wordpress/dom": "^3.40.1",
+		"@wordpress/editor": "^13.17.1",
+		"@wordpress/element": "^5.17.1",
+		"@wordpress/hooks": "^3.40.1",
+		"@wordpress/i18n": "^4.40.1",
+		"@wordpress/icons": "^9.31.1",
+		"@wordpress/interface": "^5.17.1",
+		"@wordpress/keyboard-shortcuts": "^4.17.1",
+		"@wordpress/keycodes": "^3.40.1",
+		"@wordpress/media-utils": "^4.31.1",
+		"@wordpress/notices": "^4.8.1",
+		"@wordpress/plugins": "^6.8.1",
+		"@wordpress/preferences": "^3.17.1",
+		"@wordpress/private-apis": "^0.22.1",
+		"@wordpress/url": "^3.41.1",
+		"@wordpress/viewport": "^5.17.1",
+		"@wordpress/warning": "^2.40.1",
+		"@wordpress/widgets": "^3.17.1",
 		"classnames": "^2.3.1",
 		"memize": "^2.1.0",
 		"rememo": "^4.0.2"
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b898cf1dc8e70841d1647ea0994ac6278acc18a7"
+	"gitHead": "bb1fbf87bb0f451744530fc6a85de2dff1263bed"
 }

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

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

@@ -227,8 +227,8 @@ function KeyboardShortcuts() {
 		toggleFeature( 'distractionFree' );
 		createInfoNotice(
 			isFeatureActive( 'distractionFree' )
-				? __( 'Distraction free mode turned on.' )
-				: __( 'Distraction free mode turned off.' ),
+				? __( 'Distraction free on.' )
+				: __( 'Distraction free off.' ),
 			{
 				id: 'core/edit-post/distraction-free-mode/notice',
 				type: 'snackbar',

package/src/components/layout/index.js

@@ -19,6 +19,7 @@ import {
 } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
+	useBlockCommands,
 	BlockBreadcrumb,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
@@ -32,7 +33,7 @@ import {
 	InterfaceSkeleton,
 	store as interfaceStore,
 } from '@wordpress/interface';
-import { useState, useEffect, useCallback } from '@wordpress/element';
+import { useState, useEffect, useCallback, useMemo } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as noticesStore } from '@wordpress/notices';
 
@@ -71,7 +72,59 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
+function useEditorStyles() {
+	const { hasThemeStyleSupport, editorSettings } = useSelect(
+		( select ) => ( {
+			hasThemeStyleSupport:
+				select( editPostStore ).isFeatureActive( 'themeStyles' ),
+			editorSettings: select( editorStore ).getEditorSettings(),
+		} ),
+		[]
+	);
+
+	// Compute the default styles.
+	return useMemo( () => {
+		const presetStyles =
+			editorSettings.styles?.filter(
+				( style ) =>
+					style.__unstableType && style.__unstableType !== 'theme'
+			) ?? [];
+
+		const defaultEditorStyles = [
+			...editorSettings.defaultEditorStyles,
+			...presetStyles,
+		];
+
+		// Has theme styles if the theme supports them and if some styles were not preset styles (in which case they're theme styles).
+		const hasThemeStyles =
+			hasThemeStyleSupport &&
+			presetStyles.length !== ( editorSettings.styles?.length ?? 0 );
+
+		// If theme styles are not present or displayed, ensure that
+		// base layout styles are still present in the editor.
+		if ( ! editorSettings.disableLayoutStyles && ! hasThemeStyles ) {
+			defaultEditorStyles.push( {
+				css: getLayoutStyles( {
+					style: {},
+					selector: 'body',
+					hasBlockGapSupport: false,
+					hasFallbackGapSupport: true,
+					fallbackGapValue: '0.5em',
+				} ),
+			} );
+		}
+
+		return hasThemeStyles ? editorSettings.styles : defaultEditorStyles;
+	}, [
+		editorSettings.defaultEditorStyles,
+		editorSettings.disableLayoutStyles,
+		editorSettings.styles,
+		hasThemeStyleSupport,
+	] );
+}
+
 function Layout() {
+	useBlockCommands();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isHugeViewport = useViewportMatch( 'huge', '>=' );
 	const isLargeViewport = useViewportMatch( 'large' );
@@ -95,45 +148,10 @@ function Layout() {
 		showBlockBreadcrumbs,
 		isTemplateMode,
 		documentLabel,
-		styles,
 	} = useSelect( ( select ) => {
 		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
-		const { isFeatureActive } = select( editPostStore );
 		const editorSettings = getEditorSettings();
 		const postTypeLabel = getPostTypeLabel();
-		const hasThemeStyles = isFeatureActive( 'themeStyles' );
-
-		const themeStyles = [];
-		const presetStyles = [];
-		editorSettings.styles?.forEach( ( style ) => {
-			if ( ! style.__unstableType || style.__unstableType === 'theme' ) {
-				themeStyles.push( style );
-			} else {
-				presetStyles.push( style );
-			}
-		} );
-
-		const defaultEditorStyles = [
-			...editorSettings.defaultEditorStyles,
-			...presetStyles,
-		];
-
-		// If theme styles are not present or displayed, ensure that
-		// base layout styles are still present in the editor.
-		if (
-			! editorSettings.disableLayoutStyles &&
-			! ( hasThemeStyles && themeStyles.length )
-		) {
-			defaultEditorStyles.push( {
-				css: getLayoutStyles( {
-					style: {},
-					selector: 'body',
-					hasBlockGapSupport: false,
-					hasFallbackGapSupport: true,
-					fallbackGapValue: '0.5em',
-				} ),
-			} );
-		}
 
 		return {
 			isTemplateMode: select( editPostStore ).isEditingTemplate(),
@@ -166,13 +184,11 @@ function Layout() {
 			),
 			// translators: Default label for the Document in the Block Breadcrumb.
 			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
-			styles:
-				hasThemeStyles && themeStyles.length
-					? editorSettings.styles
-					: defaultEditorStyles,
 		};
 	}, [] );
 
+	const styles = useEditorStyles();
+
 	const openSidebarPanel = () =>
 		openGeneralSidebar(
 			hasBlockSelected ? 'edit-post/block' : 'edit-post/document'

package/src/components/preferences-modal/options/enable-custom-fields.js

@@ -7,10 +7,23 @@ import { Button } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
+import { getPathAndQueryString } from '@wordpress/url';
+
+function submitCustomFieldsForm() {
+	const customFieldsForm = document.getElementById(
+		'toggle-custom-fields-form'
+	);
+
+	// Ensure the referrer values is up to update with any
+	customFieldsForm
+		.querySelector( '[name="_wp_http_referer"]' )
+		.setAttribute( 'value', getPathAndQueryString( window.location.href ) );
+
+	customFieldsForm.submit();
+}
 
 export function CustomFieldsConfirmation( { willEnable } ) {
 	const [ isReloading, setIsReloading ] = useState( false );
-
 	return (
 		<>
 			<p className="edit-post-preferences-modal__custom-fields-confirmation-message">
@@ -25,9 +38,7 @@ export function CustomFieldsConfirmation( { willEnable } ) {
 				disabled={ isReloading }
 				onClick={ () => {
 					setIsReloading( true );
-					document
-						.getElementById( 'toggle-custom-fields-form' )
-						.submit();
+					submitCustomFieldsForm();
 				} }
 			>
 				{ willEnable

package/src/components/preferences-modal/options/test/enable-custom-fields.js

@@ -58,12 +58,13 @@ describe( 'CustomFieldsConfirmation', () => {
 	it( 'submits the toggle-custom-fields-form', async () => {
 		const user = userEvent.setup();
 		const submit = jest.fn();
+		const setAttribute = jest.fn();
 		const getElementById = jest
 			.spyOn( document, 'getElementById' )
 			.mockImplementation( () => ( {
 				submit,
+				querySelector: () => ( { setAttribute } ),
 			} ) );
-
 		render( <CustomFieldsConfirmation /> );
 
 		await user.click( screen.getByRole( 'button' ) );
@@ -71,6 +72,10 @@ describe( 'CustomFieldsConfirmation', () => {
 		expect( getElementById ).toHaveBeenCalledWith(
 			'toggle-custom-fields-form'
 		);
+		expect( setAttribute ).toHaveBeenCalledWith(
+			'value',
+			'/' // This is the path returned by getPathAndQueryString.
+		);
 		expect( submit ).toHaveBeenCalled();
 
 		getElementById.mockRestore();

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

@@ -24,16 +24,20 @@ describe( 'EditPostPreferencesModal', () => {
 			useSelect.mockImplementation( () => [ true, true, false ] );
 			useViewportMatch.mockImplementation( () => true );
 			render( <EditPostPreferencesModal /> );
+			await screen.findByRole( 'tab', {
+				name: 'General',
+				selected: true,
+			} );
 			expect(
-				await screen.findByRole( 'dialog', { name: 'Preferences' } )
+				screen.getByRole( 'dialog', { name: 'Preferences' } )
 			).toMatchSnapshot();
 		} );
-		it( 'small viewports', async () => {
+		it( 'small viewports', () => {
 			useSelect.mockImplementation( () => [ true, true, false ] );
 			useViewportMatch.mockImplementation( () => false );
 			render( <EditPostPreferencesModal /> );
 			expect(
-				await screen.findByRole( 'dialog', { name: 'Preferences' } )
+				screen.getByRole( 'dialog', { name: 'Preferences' } )
 			).toMatchSnapshot();
 		} );
 	} );

package/src/components/secondary-sidebar/style.scss

@@ -35,11 +35,12 @@
 
 		.edit-post-sidebar__panel-tab {
 			width: 50%;
+			margin-bottom: -$border-width;
 		}
 	}
 
 	.components-tab-panel__tab-content {
-		height: calc(100% - #{$grid-unit-60});
+		height: calc(100% - #{$grid-unit-60 - $border-width});
 	}
 }