@wordpress/edit-post 7.16.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 {
@@ -1586,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;
@@ -1597,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;
@@ -1835,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 {
@@ -1586,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;
@@ -1597,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;
@@ -1835,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.16.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.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.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": "b898cf1dc8e70841d1647ea0994ac6278acc18a7"
+	"gitHead": "78a288d55b83a713b2f7d98d5a855c0771a2afc6"
 }

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/sidebar/plugin-document-setting-panel/index.js

@@ -1,14 +1,9 @@
-/**
- * Defines as extensibility slot for the Settings sidebar
- */
-
 /**
  * WordPress dependencies
  */
 import { createSlotFill, PanelBody } from '@wordpress/components';
-import { compose } from '@wordpress/compose';
-import { withPluginContext } from '@wordpress/plugins';
-import { withDispatch, withSelect } from '@wordpress/data';
+import { usePluginContext } from '@wordpress/plugins';
+import { useDispatch, useSelect } from '@wordpress/data';
 import warning from '@wordpress/warning';
 
 /**
@@ -19,47 +14,15 @@ import { store as editPostStore } from '../../../store';
 
 const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' );
 
-const PluginDocumentSettingFill = ( {
-	isEnabled,
-	panelName,
-	opened,
-	onToggle,
-	className,
-	title,
-	icon,
-	children,
-} ) => {
-	return (
-		<>
-			<EnablePluginDocumentSettingPanelOption
-				label={ title }
-				panelName={ panelName }
-			/>
-			<Fill>
-				{ isEnabled && (
-					<PanelBody
-						className={ className }
-						title={ title }
-						icon={ icon }
-						opened={ opened }
-						onToggle={ onToggle }
-					>
-						{ children }
-					</PanelBody>
-				) }
-			</Fill>
-		</>
-	);
-};
-
 /**
  * Renders items below the Status & Availability panel in the Document Sidebar.
  *
  * @param {Object}                props                                 Component properties.
- * @param {string}                [props.name]                          The machine-friendly name for the panel.
+ * @param {string}                props.name                            Required. A machine-friendly name for the panel.
  * @param {string}                [props.className]                     An optional class name added to the row.
  * @param {string}                [props.title]                         The title of the panel
  * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
+ * @param {WPElement}             props.children                        Children to be rendered
  *
  * @example
  * ```js
@@ -75,6 +38,7 @@ const PluginDocumentSettingFill = ( {
  * 		{
  * 			className: 'my-document-setting-plugin',
  * 			title: 'My Panel',
+ * 			name: 'my-panel',
  * 		},
  * 		__( 'My Document Setting Panel' )
  * 	);
@@ -92,7 +56,7 @@ const PluginDocumentSettingFill = ( {
  * import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
  *
  * const MyDocumentSettingTest = () => (
- * 		<PluginDocumentSettingPanel className="my-document-setting-plugin" title="My Panel">
+ * 		<PluginDocumentSettingPanel className="my-document-setting-plugin" title="My Panel" name="my-panel">
  *			<p>My Document Setting Panel</p>
  *		</PluginDocumentSettingPanel>
  *	);
@@ -102,30 +66,55 @@ const PluginDocumentSettingFill = ( {
  *
  * @return {WPComponent} The component to be rendered.
  */
-const PluginDocumentSettingPanel = compose(
-	withPluginContext( ( context, ownProps ) => {
-		if ( undefined === ownProps.name ) {
-			warning( 'PluginDocumentSettingPanel requires a name property.' );
-		}
-		return {
-			panelName: `${ context.name }/${ ownProps.name }`,
-		};
-	} ),
-	withSelect( ( select, { panelName } ) => {
-		return {
-			opened: select( editPostStore ).isEditorPanelOpened( panelName ),
-			isEnabled:
-				select( editPostStore ).isEditorPanelEnabled( panelName ),
-		};
-	} ),
-	withDispatch( ( dispatch, { panelName } ) => ( {
-		onToggle() {
-			return dispatch( editPostStore ).toggleEditorPanelOpened(
-				panelName
-			);
+const PluginDocumentSettingPanel = ( {
+	name,
+	className,
+	title,
+	icon,
+	children,
+} ) => {
+	const { name: pluginName } = usePluginContext();
+	const panelName = `${ pluginName }/${ name }`;
+	const { opened, isEnabled } = useSelect(
+		( select ) => {
+			const { isEditorPanelOpened, isEditorPanelEnabled } =
+				select( editPostStore );
+
+			return {
+				opened: isEditorPanelOpened( panelName ),
+				isEnabled: isEditorPanelEnabled( panelName ),
+			};
 		},
-	} ) )
-)( PluginDocumentSettingFill );
+		[ panelName ]
+	);
+	const { toggleEditorPanelOpened } = useDispatch( editPostStore );
+
+	if ( undefined === name ) {
+		warning( 'PluginDocumentSettingPanel requires a name property.' );
+	}
+
+	return (
+		<>
+			<EnablePluginDocumentSettingPanelOption
+				label={ title }
+				panelName={ panelName }
+			/>
+			<Fill>
+				{ isEnabled && (
+					<PanelBody
+						className={ className }
+						title={ title }
+						icon={ icon }
+						opened={ opened }
+						onToggle={ () => toggleEditorPanelOpened( panelName ) }
+					>
+						{ children }
+					</PanelBody>
+				) }
+			</Fill>
+		</>
+	);
+};
 
 PluginDocumentSettingPanel.Slot = Slot;