@wordpress/edit-post 7.15.0 → 7.17.0

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

@@ -18,7 +18,11 @@ import {
 	store as editorStore,
 } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { BlockBreadcrumb } from '@wordpress/block-editor';
+import {
+	useBlockCommands,
+	BlockBreadcrumb,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import { Button, ScrollLock, Popover } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { PluginArea } from '@wordpress/plugins';
@@ -29,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';
 
@@ -51,6 +55,9 @@ import WelcomeGuide from '../welcome-guide';
 import ActionsPanel from './actions-panel';
 import StartPageOptions from '../start-page-options';
 import { store as editPostStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { getLayoutStyles } = unlock( blockEditorPrivateApis );
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor top bar landmark region. */
@@ -65,7 +72,59 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
-function Layout( { styles } ) {
+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' );
@@ -128,6 +187,8 @@ function Layout( { styles } ) {
 		};
 	}, [] );
 
+	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/__snapshots__/index.js.snap

@@ -115,6 +115,8 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
             aria-controls="tab-panel-0-general-view"
             aria-selected="true"
             class="components-button components-tab-panel__tabs-item is-active"
+            data-active-item=""
+            data-command=""
             id="tab-panel-0-general"
             role="tab"
             type="button"
@@ -125,9 +127,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
             aria-controls="tab-panel-0-blocks-view"
             aria-selected="false"
             class="components-button components-tab-panel__tabs-item"
+            data-command=""
             id="tab-panel-0-blocks"
             role="tab"
-            tabindex="-1"
             type="button"
           >
             Blocks
@@ -136,9 +138,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
             aria-controls="tab-panel-0-panels-view"
             aria-selected="false"
             class="components-button components-tab-panel__tabs-item"
+            data-command=""
             id="tab-panel-0-panels"
             role="tab"
-            tabindex="-1"
             type="button"
           >
             Panels
@@ -149,6 +151,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
           class="components-tab-panel__tab-content"
           id="tab-panel-0-general-view"
           role="tabpanel"
+          tabindex="0"
         >
           <fieldset
             class="interface-preferences-modal__section"

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

@@ -20,20 +20,20 @@ jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => jest.fn() );
 
 describe( 'EditPostPreferencesModal', () => {
 	describe( 'should match snapshot when the modal is active', () => {
-		it( 'large viewports', () => {
+		it( 'large viewports', async () => {
 			useSelect.mockImplementation( () => [ true, true, false ] );
 			useViewportMatch.mockImplementation( () => true );
 			render( <EditPostPreferencesModal /> );
 			expect(
-				screen.getByRole( 'dialog', { name: 'Preferences' } )
+				await screen.findByRole( 'dialog', { name: 'Preferences' } )
 			).toMatchSnapshot();
 		} );
-		it( 'small viewports', () => {
+		it( 'small viewports', async () => {
 			useSelect.mockImplementation( () => [ true, true, false ] );
 			useViewportMatch.mockImplementation( () => false );
 			render( <EditPostPreferencesModal /> );
 			expect(
-				screen.getByRole( 'dialog', { name: 'Preferences' } )
+				await screen.findByRole( 'dialog', { name: 'Preferences' } )
 			).toMatchSnapshot();
 		} );
 	} );

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -11,7 +11,7 @@ import {
 import { useDispatch } from '@wordpress/data';
 import { focus } from '@wordpress/dom';
 import { useRef, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { ESCAPE } from '@wordpress/keycodes';
@@ -140,12 +140,12 @@ export default function ListViewSidebar() {
 				tabs={ [
 					{
 						name: 'list-view',
-						title: 'List View',
+						title: _x( 'List View', 'Post overview' ),
 						className: 'edit-post-sidebar__panel-tab',
 					},
 					{
 						name: 'outline',
-						title: 'Outline',
+						title: _x( 'Outline', 'Post overview' ),
 						className: 'edit-post-sidebar__panel-tab',
 					},
 				] }

package/src/components/sidebar/discussion-panel/index.js

@@ -8,8 +8,7 @@ import {
 	PostPingbacks,
 	PostTypeSupportCheck,
 } from '@wordpress/editor';
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -21,7 +20,18 @@ import { store as editPostStore } from '../../../store';
  */
 const PANEL_NAME = 'discussion-panel';
 
-function DiscussionPanel( { isEnabled, isOpened, onTogglePanel } ) {
+function DiscussionPanel() {
+	const { isEnabled, isOpened } = useSelect( ( select ) => {
+		const { isEditorPanelEnabled, isEditorPanelOpened } =
+			select( editPostStore );
+		return {
+			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
+			isOpened: isEditorPanelOpened( PANEL_NAME ),
+		};
+	}, [] );
+
+	const { toggleEditorPanelOpened } = useDispatch( editPostStore );
+
 	if ( ! isEnabled ) {
 		return null;
 	}
@@ -31,7 +41,7 @@ function DiscussionPanel( { isEnabled, isOpened, onTogglePanel } ) {
 			<PanelBody
 				title={ __( 'Discussion' ) }
 				opened={ isOpened }
-				onToggle={ onTogglePanel }
+				onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
 			>
 				<PostTypeSupportCheck supportKeys="comments">
 					<PanelRow>
@@ -49,19 +59,4 @@ function DiscussionPanel( { isEnabled, isOpened, onTogglePanel } ) {
 	);
 }
 
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			isEnabled:
-				select( editPostStore ).isEditorPanelEnabled( PANEL_NAME ),
-			isOpened: select( editPostStore ).isEditorPanelOpened( PANEL_NAME ),
-		};
-	} ),
-	withDispatch( ( dispatch ) => ( {
-		onTogglePanel() {
-			return dispatch( editPostStore ).toggleEditorPanelOpened(
-				PANEL_NAME
-			);
-		},
-	} ) ),
-] )( DiscussionPanel );
+export default DiscussionPanel;

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;
 

package/src/components/sidebar/plugin-post-publish-panel/index.js

@@ -1,30 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
-import { withPluginContext } from '@wordpress/plugins';
+import { usePluginContext } from '@wordpress/plugins';
 import { createSlotFill, PanelBody } from '@wordpress/components';
 
 const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' );
 
-const PluginPostPublishPanelFill = ( {
-	children,
-	className,
-	title,
-	initialOpen = false,
-	icon,
-} ) => (
-	<Fill>
-		<PanelBody
-			className={ className }
-			initialOpen={ initialOpen || ! title }
-			title={ title }
-			icon={ icon }
-		>
-			{ children }
-		</PanelBody>
-	</Fill>
-);
 /**
  * Renders provided content to the post-publish panel in the publish flow
  * (side panel that opens after a user publishes the post).
@@ -34,6 +15,7 @@ const PluginPostPublishPanelFill = ( {
  * @param {string}                [props.title]                         Title displayed at the top of the panel.
  * @param {boolean}               [props.initialOpen=false]             Whether to have the panel initially opened. When no title is provided it is always opened.
  * @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
@@ -73,14 +55,28 @@ const PluginPostPublishPanelFill = ( {
  *
  * @return {WPComponent} The component to be rendered.
  */
+const PluginPostPublishPanel = ( {
+	children,
+	className,
+	title,
+	initialOpen = false,
+	icon,
+} ) => {
+	const { icon: pluginIcon } = usePluginContext();
 
-const PluginPostPublishPanel = compose(
-	withPluginContext( ( context, ownProps ) => {
-		return {
-			icon: ownProps.icon || context.icon,
-		};
-	} )
-)( PluginPostPublishPanelFill );
+	return (
+		<Fill>
+			<PanelBody
+				className={ className }
+				initialOpen={ initialOpen || ! title }
+				title={ title }
+				icon={ icon ?? pluginIcon }
+			>
+				{ children }
+			</PanelBody>
+		</Fill>
+	);
+};
 
 PluginPostPublishPanel.Slot = Slot;
 

package/src/components/sidebar/plugin-pre-publish-panel/index.js

@@ -2,28 +2,9 @@
  * WordPress dependencies
  */
 import { createSlotFill, PanelBody } from '@wordpress/components';
-import { compose } from '@wordpress/compose';
-import { withPluginContext } from '@wordpress/plugins';
-const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' );
+import { usePluginContext } from '@wordpress/plugins';
 
-const PluginPrePublishPanelFill = ( {
-	children,
-	className,
-	title,
-	initialOpen = false,
-	icon,
-} ) => (
-	<Fill>
-		<PanelBody
-			className={ className }
-			initialOpen={ initialOpen || ! title }
-			title={ title }
-			icon={ icon }
-		>
-			{ children }
-		</PanelBody>
-	</Fill>
-);
+const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' );
 
 /**
  * Renders provided content to the pre-publish side panel in the publish flow
@@ -37,6 +18,7 @@ const PluginPrePublishPanelFill = ( {
  * @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
@@ -76,13 +58,28 @@ const PluginPrePublishPanelFill = ( {
  *
  * @return {WPComponent} The component to be rendered.
  */
-const PluginPrePublishPanel = compose(
-	withPluginContext( ( context, ownProps ) => {
-		return {
-			icon: ownProps.icon || context.icon,
-		};
-	} )
-)( PluginPrePublishPanelFill );
+const PluginPrePublishPanel = ( {
+	children,
+	className,
+	title,
+	initialOpen = false,
+	icon,
+} ) => {
+	const { icon: pluginIcon } = usePluginContext();
+
+	return (
+		<Fill>
+			<PanelBody
+				className={ className }
+				initialOpen={ initialOpen || ! title }
+				title={ title }
+				icon={ icon ?? pluginIcon }
+			>
+				{ children }
+			</PanelBody>
+		</Fill>
+	);
+};
 
 PluginPrePublishPanel.Slot = Slot;
 

package/src/components/sidebar/post-schedule/style.scss

@@ -2,6 +2,7 @@
 	width: 100%;
 	position: relative;
 	justify-content: flex-start;
+	align-items: flex-start;
 
 	span {
 		display: block;
@@ -15,6 +16,7 @@
 .components-button.edit-post-post-schedule__toggle {
 	text-align: left;
 	white-space: normal;
+	height: auto;
 
 	// This span is added by the Popover in Tooltip when no anchor is
 	// provided. We set its width to 0 so that it does not cause the button text