@wordpress/edit-post 7.16.0 → 7.17.0

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/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 === 'boolean' ) {
+		return EMPTY_INSERTION_POINT;
+	}
+
+	return state.blockInserterPanel;
 }
 
 /**