@wordpress/edit-post 7.16.0 → 7.17.1

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

package/src/components/sidebar/post-taxonomies/taxonomy-panel.js

@@ -1,22 +1,30 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
 import { PanelBody } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as editPostStore } from '../../../store';
 
-function TaxonomyPanel( {
-	isEnabled,
-	taxonomy,
-	isOpened,
-	onTogglePanel,
-	children,
-} ) {
+function TaxonomyPanel( { taxonomy, children } ) {
+	const slug = taxonomy?.slug;
+	const panelName = slug ? `taxonomy-panel-${ slug }` : '';
+	const { isEnabled, isOpened } = useSelect(
+		( select ) => {
+			const { isEditorPanelEnabled, isEditorPanelOpened } =
+				select( editPostStore );
+			return {
+				isEnabled: slug ? isEditorPanelEnabled( panelName ) : false,
+				isOpened: slug ? isEditorPanelOpened( panelName ) : false,
+			};
+		},
+		[ panelName, slug ]
+	);
+	const { toggleEditorPanelOpened } = useDispatch( editPostStore );
+
 	if ( ! isEnabled ) {
 		return null;
 	}
@@ -30,32 +38,11 @@ function TaxonomyPanel( {
 		<PanelBody
 			title={ taxonomyMenuName }
 			opened={ isOpened }
-			onToggle={ onTogglePanel }
+			onToggle={ () => toggleEditorPanelOpened( panelName ) }
 		>
 			{ children }
 		</PanelBody>
 	);
 }
 
-export default compose(
-	withSelect( ( select, ownProps ) => {
-		const slug = ownProps.taxonomy?.slug;
-		const panelName = slug ? `taxonomy-panel-${ slug }` : '';
-		return {
-			panelName,
-			isEnabled: slug
-				? select( editPostStore ).isEditorPanelEnabled( panelName )
-				: false,
-			isOpened: slug
-				? select( editPostStore ).isEditorPanelOpened( panelName )
-				: false,
-		};
-	} ),
-	withDispatch( ( dispatch, ownProps ) => ( {
-		onTogglePanel: () => {
-			dispatch( editPostStore ).toggleEditorPanelOpened(
-				ownProps.panelName
-			);
-		},
-	} ) )
-)( TaxonomyPanel );
+export default TaxonomyPanel;

package/src/components/visual-editor/index.js

@@ -334,11 +334,19 @@ export default function VisualEditor( { styles } ) {
 		.is-root-container.alignfull { max-width: none; margin-left: auto; margin-right: auto;}
 		.is-root-container.alignfull:where(.is-layout-flow) > :not(.alignleft):not(.alignright) { max-width: none;}`;
 
+	const isToBeIframed =
+		( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) &&
+			! hasMetaBoxes ) ||
+		isTemplateMode ||
+		deviceType === 'Tablet' ||
+		deviceType === 'Mobile';
+
 	return (
 		<BlockTools
 			__unstableContentRef={ ref }
 			className={ classnames( 'edit-post-visual-editor', {
 				'is-template-mode': isTemplateMode,
+				'has-inline-canvas': ! isToBeIframed,
 			} ) }
 		>
 			<motion.div
@@ -354,14 +362,7 @@ export default function VisualEditor( { styles } ) {
 					className={ previewMode }
 				>
 					<MaybeIframe
-						shouldIframe={
-							( ( hasV3BlocksOnly ||
-								( isGutenbergPlugin && isBlockBasedTheme ) ) &&
-								! hasMetaBoxes ) ||
-							isTemplateMode ||
-							deviceType === 'Tablet' ||
-							deviceType === 'Mobile'
-						}
+						shouldIframe={ isToBeIframed }
 						contentRef={ contentRef }
 						styles={ styles }
 					>

package/src/components/visual-editor/style.scss

@@ -2,7 +2,11 @@
 	position: relative;
 	display: flex;
 	flex-flow: column;
-	overflow: hidden;
+	// In the iframed canvas this keeps extra scrollbars from appearing (when block toolbars overflow). In the
+	// legacy (non-iframed) canvas, overflow must not be hidden in order to maintain support for sticky positioning.
+	&:not(.has-inline-canvas) {
+		overflow: hidden;
+	}
 
 	// Gray preview overlay (desktop/tablet/mobile) is intentionally not set on an element with scrolling content like
 	// interface-interface-skeleton__content. This causes graphical glitches (flashes of the background color)

package/src/hooks/commands/use-common-commands.js

@@ -5,7 +5,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { __, isRTL } from '@wordpress/i18n';
 import {
 	code,
-	cog,
 	drawerLeft,
 	drawerRight,
 	blockDefault,
@@ -59,6 +58,7 @@ export default function useCommonCommands() {
 	const { toggle } = useDispatch( preferencesStore );
 	const { createInfoNotice } = useDispatch( noticesStore );
 	const { __unstableSaveForPreview } = useDispatch( editorStore );
+	const { getCurrentPostId } = useSelect( editorStore );
 
 	useCommand( {
 		name: 'core/open-settings-sidebar',
@@ -91,7 +91,6 @@ export default function useCommonCommands() {
 	useCommand( {
 		name: 'core/toggle-distraction-free',
 		label: __( 'Toggle distraction free' ),
-		icon: cog,
 		callback: ( { close } ) => {
 			toggle( 'core/edit-post', 'distractionFree' );
 			close();
@@ -101,7 +100,6 @@ export default function useCommonCommands() {
 	useCommand( {
 		name: 'core/toggle-spotlight-mode',
 		label: __( 'Toggle spotlight mode' ),
-		icon: cog,
 		callback: ( { close } ) => {
 			toggle( 'core/edit-post', 'focusMode' );
 			close();
@@ -131,7 +129,6 @@ export default function useCommonCommands() {
 	useCommand( {
 		name: 'core/toggle-top-toolbar',
 		label: __( 'Toggle top toolbar' ),
-		icon: cog,
 		callback: ( { close } ) => {
 			toggle( 'core/edit-post', 'fixedToolbar' );
 			close();
@@ -150,8 +147,7 @@ export default function useCommonCommands() {
 
 	useCommand( {
 		name: 'core/open-preferences',
-		label: __( 'Open editor preferences' ),
-		icon: cog,
+		label: __( 'Editor preferences' ),
 		callback: () => {
 			openModal( PREFERENCES_MODAL_NAME );
 		},
@@ -159,7 +155,7 @@ export default function useCommonCommands() {
 
 	useCommand( {
 		name: 'core/open-shortcut-help',
-		label: __( 'Open keyboard shortcuts' ),
+		label: __( 'Keyboard shortcuts' ),
 		icon: keyboard,
 		callback: () => {
 			openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );
@@ -171,14 +167,13 @@ export default function useCommonCommands() {
 		label: showBlockBreadcrumbs
 			? __( 'Hide block breadcrumbs' )
 			: __( 'Show block breadcrumbs' ),
-		icon: cog,
 		callback: ( { close } ) => {
 			toggle( 'core/edit-post', 'showBlockBreadcrumbs' );
 			close();
 			createInfoNotice(
 				showBlockBreadcrumbs
-					? __( 'Breadcrumbs off.' )
-					: __( 'Breadcrumbs on.' ),
+					? __( 'Breadcrumbs hidden.' )
+					: __( 'Breadcrumbs visible.' ),
 				{
 					id: 'core/edit-post/toggle-breadcrumbs/notice',
 					type: 'snackbar',
@@ -214,8 +209,9 @@ export default function useCommonCommands() {
 		icon: external,
 		callback: async ( { close } ) => {
 			close();
-			const link = await __unstableSaveForPreview( {} );
-			window.open( link, '_blank' );
+			const postId = getCurrentPostId();
+			const link = await __unstableSaveForPreview();
+			window.open( link, `wp-preview-${ postId }` );
 		},
 	} );
 }

package/src/store/selectors.js

@@ -15,6 +15,11 @@ import deprecated from '@wordpress/deprecated';
 
 const EMPTY_ARRAY = [];
 const EMPTY_OBJECT = {};
+const EMPTY_INSERTION_POINT = {
+	rootClientId: undefined,
+	insertionIndex: undefined,
+	filterValue: undefined,
+};
 
 /**
  * Returns the current editing mode.
@@ -472,9 +477,11 @@ export function isInserterOpened( state ) {
  * @return {Object} The root client ID, index to insert at and starting filter value.
  */
 export function __experimentalGetInsertionPoint( state ) {
-	const { rootClientId, insertionIndex, filterValue } =
-		state.blockInserterPanel;
-	return { rootClientId, insertionIndex, filterValue };
+	if ( typeof state.blockInserterPanel === 'boolean' ) {
+		return EMPTY_INSERTION_POINT;
+	}
+
+	return state.blockInserterPanel;
 }
 
 /**