@wordpress/edit-post 5.0.1-next.5df0cd52b7.0 → 5.0.4

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

@@ -43,16 +43,10 @@ import { __ } from '@wordpress/i18n';
 import BlockInspectorButton from './block-inspector-button';
 import { store as editPostStore } from '../../store';
 
-function MaybeIframe( {
-	children,
-	contentRef,
-	isTemplateMode,
-	styles,
-	style,
-} ) {
+function MaybeIframe( { children, contentRef, shouldIframe, styles, style } ) {
 	const ref = useMouseMoveTypingReset();
 
-	if ( ! isTemplateMode ) {
+	if ( ! shouldIframe ) {
 		return (
 			<>
 				<EditorStyles styles={ styles } />
@@ -74,6 +68,7 @@ function MaybeIframe( {
 			ref={ ref }
 			contentRef={ contentRef }
 			style={ { width: '100%', height: '100%', display: 'block' } }
+			name="editor-canvas"
 		>
 			{ children }
 		</Iframe>
@@ -216,7 +211,11 @@ export default function VisualEditor( { styles } ) {
 					className={ previewMode }
 				>
 					<MaybeIframe
-						isTemplateMode={ isTemplateMode }
+						shouldIframe={
+							isTemplateMode ||
+							deviceType === 'Tablet' ||
+							deviceType === 'Mobile'
+						}
 						contentRef={ contentRef }
 						styles={ styles }
 						style={ { paddingBottom } }
@@ -233,7 +232,14 @@ export default function VisualEditor( { styles } ) {
 							</div>
 						) }
 						<RecursionProvider>
-							<BlockList __experimentalLayout={ layout } />
+							<BlockList
+								className={
+									isTemplateMode
+										? 'wp-site-blocks'
+										: undefined
+								}
+								__experimentalLayout={ layout }
+							/>
 						</RecursionProvider>
 					</MaybeIframe>
 				</motion.div>

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

@@ -39,17 +39,14 @@
 // We need to have two DOM elements.
 .edit-post-visual-editor__post-title-wrapper {
 	.editor-post-title {
-		// Add some top margin.
-		margin-top: 2em;
-
 		// Center.
 		margin-left: auto;
 		margin-right: auto;
-
-		// Margins between the title and the first block, or appender, do not collapse.
-		// By explicitly setting this to zero, we avoid "double margin".
-		margin-bottom: 0;
 	}
+
+	// Add extra margin at the top, to push down the Title area in the post editor.
+	margin-top: 4rem;
+	margin-bottom: var(--wp--style--block-gap);
 }
 
 .edit-post-visual-editor__exit-template-mode {

package/src/components/welcome-guide/style.scss

@@ -4,6 +4,11 @@
 	&__image {
 		background: #00a0d2;
 		margin: 0 0 $grid-unit-20;
+		> img {
+			display: block;
+			max-width: 100%;
+			object-fit: cover;
+		}
 	}
 
 	&__heading {

package/src/editor.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { size, map, without, omit } from 'lodash';
+import { size, map, without } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -17,6 +17,7 @@ import {
 import { StrictMode, useMemo } from '@wordpress/element';
 import { KeyboardShortcuts, SlotFillProvider } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
+import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
@@ -48,60 +49,64 @@ function Editor( {
 		keepCaretInsideBlock,
 		isTemplateMode,
 		template,
-	} = useSelect( ( select ) => {
-		const {
-			isFeatureActive,
-			getPreference,
-			__experimentalGetPreviewDeviceType,
-			isEditingTemplate,
-			getEditedPostTemplate,
-		} = select( editPostStore );
-		const { getEntityRecord, getPostType, getEntityRecords } = select(
-			coreStore
-		);
-		const { getEditorSettings } = select( editorStore );
-		const { getBlockTypes } = select( blocksStore );
-		const isTemplate = [ 'wp_template', 'wp_template_part' ].includes(
-			postType
-		);
-		// Ideally the initializeEditor function should be called using the ID of the REST endpoint.
-		// to avoid the special case.
-		let postObject;
-		if ( isTemplate ) {
-			const posts = getEntityRecords( 'postType', postType, {
-				wp_id: postId,
-			} );
-			postObject = posts?.[ 0 ];
-		} else {
-			postObject = getEntityRecord( 'postType', postType, postId );
-		}
-		const supportsTemplateMode = getEditorSettings().supportsTemplateMode;
-		const isViewable = getPostType( postType )?.viewable ?? false;
+	} = useSelect(
+		( select ) => {
+			const {
+				isFeatureActive,
+				getPreference,
+				__experimentalGetPreviewDeviceType,
+				isEditingTemplate,
+				getEditedPostTemplate,
+			} = select( editPostStore );
+			const { getEntityRecord, getPostType, getEntityRecords } = select(
+				coreStore
+			);
+			const { getEditorSettings } = select( editorStore );
+			const { getBlockTypes } = select( blocksStore );
+			const isTemplate = [ 'wp_template', 'wp_template_part' ].includes(
+				postType
+			);
+			// Ideally the initializeEditor function should be called using the ID of the REST endpoint.
+			// to avoid the special case.
+			let postObject;
+			if ( isTemplate ) {
+				const posts = getEntityRecords( 'postType', postType, {
+					wp_id: postId,
+				} );
+				postObject = posts?.[ 0 ];
+			} else {
+				postObject = getEntityRecord( 'postType', postType, postId );
+			}
+			const supportsTemplateMode = getEditorSettings()
+				.supportsTemplateMode;
+			const isViewable = getPostType( postType )?.viewable ?? false;
 
-		return {
-			hasFixedToolbar:
-				isFeatureActive( 'fixedToolbar' ) ||
-				__experimentalGetPreviewDeviceType() !== 'Desktop',
-			focusMode: isFeatureActive( 'focusMode' ),
-			hasReducedUI: isFeatureActive( 'reducedUI' ),
-			hasThemeStyles: isFeatureActive( 'themeStyles' ),
-			preferredStyleVariations: getPreference(
-				'preferredStyleVariations'
-			),
-			hiddenBlockTypes: getPreference( 'hiddenBlockTypes' ),
-			blockTypes: getBlockTypes(),
-			__experimentalLocalAutosaveInterval: getPreference(
-				'localAutosaveInterval'
-			),
-			keepCaretInsideBlock: isFeatureActive( 'keepCaretInsideBlock' ),
-			isTemplateMode: isEditingTemplate(),
-			template:
-				supportsTemplateMode && isViewable
-					? getEditedPostTemplate()
-					: null,
-			post: postObject,
-		};
-	} );
+			return {
+				hasFixedToolbar:
+					isFeatureActive( 'fixedToolbar' ) ||
+					__experimentalGetPreviewDeviceType() !== 'Desktop',
+				focusMode: isFeatureActive( 'focusMode' ),
+				hasReducedUI: isFeatureActive( 'reducedUI' ),
+				hasThemeStyles: isFeatureActive( 'themeStyles' ),
+				preferredStyleVariations: getPreference(
+					'preferredStyleVariations'
+				),
+				hiddenBlockTypes: getPreference( 'hiddenBlockTypes' ),
+				blockTypes: getBlockTypes(),
+				__experimentalLocalAutosaveInterval: getPreference(
+					'localAutosaveInterval'
+				),
+				keepCaretInsideBlock: isFeatureActive( 'keepCaretInsideBlock' ),
+				isTemplateMode: isEditingTemplate(),
+				template:
+					supportsTemplateMode && isViewable
+						? getEditedPostTemplate()
+						: null,
+				post: postObject,
+			};
+		},
+		[ postType, postId ]
+	);
 
 	const { updatePreferredStyleVariations, setIsInserterOpened } = useDispatch(
 		editPostStore
@@ -109,7 +114,7 @@ function Editor( {
 
 	const editorSettings = useMemo( () => {
 		const result = {
-			...omit( settings, [ 'styles' ] ),
+			...settings,
 			__experimentalPreferredStyleVariations: {
 				value: preferredStyleVariations,
 				onChange: updatePreferredStyleVariations,
@@ -156,7 +161,9 @@ function Editor( {
 	] );
 
 	const styles = useMemo( () => {
-		return hasThemeStyles ? settings.styles : [];
+		return hasThemeStyles && settings.styles?.length
+			? settings.styles
+			: settings.defaultEditorStyles;
 	}, [ settings, hasThemeStyles ] );
 
 	if ( ! post ) {
@@ -165,29 +172,31 @@ function Editor( {
 
 	return (
 		<StrictMode>
-			<EditPostSettings.Provider value={ settings }>
-				<SlotFillProvider>
-					<EditorProvider
-						settings={ editorSettings }
-						post={ post }
-						initialEdits={ initialEdits }
-						useSubRegistry={ false }
-						__unstableTemplate={
-							isTemplateMode ? template : undefined
-						}
-						{ ...props }
-					>
-						<ErrorBoundary onError={ onError }>
-							<EditorInitialization postId={ postId } />
-							<Layout styles={ styles } />
-							<KeyboardShortcuts
-								shortcuts={ preventEventDiscovery }
-							/>
-						</ErrorBoundary>
-						<PostLockedModal />
-					</EditorProvider>
-				</SlotFillProvider>
-			</EditPostSettings.Provider>
+			<ShortcutProvider>
+				<EditPostSettings.Provider value={ settings }>
+					<SlotFillProvider>
+						<EditorProvider
+							settings={ editorSettings }
+							post={ post }
+							initialEdits={ initialEdits }
+							useSubRegistry={ false }
+							__unstableTemplate={
+								isTemplateMode ? template : undefined
+							}
+							{ ...props }
+						>
+							<ErrorBoundary onError={ onError }>
+								<EditorInitialization postId={ postId } />
+								<Layout styles={ styles } />
+								<KeyboardShortcuts
+									shortcuts={ preventEventDiscovery }
+								/>
+							</ErrorBoundary>
+							<PostLockedModal />
+						</EditorProvider>
+					</SlotFillProvider>
+				</EditPostSettings.Provider>
+			</ShortcutProvider>
 		</StrictMode>
 	);
 }

package/src/hooks/validate-multiple-use/index.js

@@ -108,7 +108,7 @@ const withMultipleValidation = createHigherOrderComponent( ( BlockEdit ) => {
 					),
 				] }
 			>
-				<strong>{ blockType.title }: </strong>
+				<strong>{ blockType?.title }: </strong>
 				{ __( 'This block can only be used once.' ) }
 			</Warning>,
 		];

package/src/index.js

@@ -1,18 +1,20 @@
 /**
  * WordPress dependencies
  */
+import { store as blocksStore } from '@wordpress/blocks';
 import {
 	registerCoreBlocks,
 	__experimentalRegisterExperimentalCoreBlocks,
 } from '@wordpress/block-library';
 import { render, unmountComponentAtNode } from '@wordpress/element';
+import { dispatch } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
 import './hooks';
 import './plugins';
-export { store } from './store';
 import Editor from './editor';
 
 /**
@@ -61,11 +63,8 @@ export function reinitializeEditor(
 /**
  * Initializes and returns an instance of Editor.
  *
- * The return value of this function is not necessary if we change where we
- * call initializeEditor(). This is due to metaBox timing.
- *
  * @param {string}  id           Unique identifier for editor instance.
- * @param {Object}  postType     Post type of the post to edit.
+ * @param {string}  postType     Post type of the post to edit.
  * @param {Object}  postId       ID of the post to edit.
  * @param {?Object} settings     Editor settings object.
  * @param {Object}  initialEdits Programmatic edits to apply initially, to be
@@ -88,6 +87,18 @@ export function initializeEditor(
 		settings,
 		initialEdits
 	);
+
+	dispatch( interfaceStore ).setFeatureDefaults( 'core/edit-post', {
+		fixedToolbar: false,
+		welcomeGuide: true,
+		fullscreenMode: true,
+		showIconLabels: false,
+		themeStyles: true,
+		showBlockBreadcrumbs: true,
+		welcomeGuideTemplate: true,
+	} );
+
+	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
 	registerCoreBlocks();
 	if ( process.env.GUTENBERG_PHASE === 2 ) {
 		__experimentalRegisterExperimentalCoreBlocks( {
@@ -157,3 +168,4 @@ export { default as PluginSidebar } from './components/sidebar/plugin-sidebar';
 export { default as PluginSidebarMoreMenuItem } from './components/header/plugin-sidebar-more-menu-item';
 export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close';
 export { default as __experimentalMainDashboardButton } from './components/header/main-dashboard-button';
+export { store } from './store';

package/src/plugins/welcome-guide-menu-item/index.js

@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { MenuItem } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { MoreMenuFeatureToggle } from '@wordpress/interface';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -15,17 +15,12 @@ export default function WelcomeGuideMenuItem() {
 		( select ) => select( editPostStore ).isEditingTemplate(),
 		[]
 	);
-	const { toggleFeature } = useDispatch( editPostStore );
 
 	return (
-		<MenuItem
-			onClick={ () =>
-				toggleFeature(
-					isTemplateMode ? 'welcomeGuideTemplate' : 'welcomeGuide'
-				)
-			}
-		>
-			{ __( 'Welcome Guide' ) }
-		</MenuItem>
+		<MoreMenuFeatureToggle
+			scope="core/edit-post"
+			feature={ isTemplateMode ? 'welcomeGuideTemplate' : 'welcomeGuide' }
+			label={ __( 'Welcome Guide' ) }
+		/>
 	);
 }

package/src/store/actions.js

@@ -9,7 +9,7 @@ import { castArray, reduce } from 'lodash';
 import { __ } from '@wordpress/i18n';
 import { apiFetch } from '@wordpress/data-controls';
 import { store as interfaceStore } from '@wordpress/interface';
-import { controls, dispatch, select, subscribe } from '@wordpress/data';
+import { controls, select, subscribe, dispatch } from '@wordpress/data';
 import { speak } from '@wordpress/a11y';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
@@ -30,7 +30,7 @@ import { store as editPostStore } from '.';
  */
 export function* openGeneralSidebar( name ) {
 	yield controls.dispatch(
-		interfaceStore.name,
+		interfaceStore,
 		'enableComplementaryArea',
 		editPostStore.name,
 		name
@@ -44,7 +44,7 @@ export function* openGeneralSidebar( name ) {
  */
 export function* closeGeneralSidebar() {
 	yield controls.dispatch(
-		interfaceStore.name,
+		interfaceStore,
 		'disableComplementaryArea',
 		editPostStore.name
 	);
@@ -153,17 +153,17 @@ export function removeEditorPanel( panelName ) {
 }
 
 /**
- * Returns an action object used to toggle a feature flag.
+ * Triggers an action used to toggle a feature flag.
  *
  * @param {string} feature Feature name.
- *
- * @return {Object} Action object.
  */
-export function toggleFeature( feature ) {
-	return {
-		type: 'TOGGLE_FEATURE',
-		feature,
-	};
+export function* toggleFeature( feature ) {
+	yield controls.dispatch(
+		interfaceStore.name,
+		'toggleFeature',
+		'core/edit-post',
+		feature
+	);
 }
 
 export function* switchEditorMode( mode ) {
@@ -174,7 +174,7 @@ export function* switchEditorMode( mode ) {
 
 	// Unselect blocks when we switch to the code editor.
 	if ( mode !== 'visual' ) {
-		yield controls.dispatch( blockEditorStore.name, 'clearSelectedBlock' );
+		yield controls.dispatch( blockEditorStore, 'clearSelectedBlock' );
 	}
 
 	const message =
@@ -185,17 +185,24 @@ export function* switchEditorMode( mode ) {
 }
 
 /**
- * Returns an action object used to toggle a plugin name flag.
+ * Triggers an action object used to toggle a plugin name flag.
  *
  * @param {string} pluginName Plugin name.
- *
- * @return {Object} Action object.
  */
-export function togglePinnedPluginItem( pluginName ) {
-	return {
-		type: 'TOGGLE_PINNED_PLUGIN_ITEM',
-		pluginName,
-	};
+export function* togglePinnedPluginItem( pluginName ) {
+	const isPinned = yield controls.select(
+		interfaceStore,
+		'isItemPinned',
+		'core/edit-post',
+		pluginName
+	);
+
+	yield controls.dispatch(
+		interfaceStore,
+		isPinned ? 'unpinItem' : 'pinItem',
+		'core/edit-post',
+		pluginName
+	);
 }
 
 /**
@@ -258,8 +265,6 @@ export function showBlockTypes( blockNames ) {
 	};
 }
 
-let saveMetaboxUnsubscribe;
-
 /**
  * Returns an action object used in signaling
  * what Meta boxes are available in which location.
@@ -273,58 +278,6 @@ export function* setAvailableMetaBoxesPerLocation( metaBoxesPerLocation ) {
 		type: 'SET_META_BOXES_PER_LOCATIONS',
 		metaBoxesPerLocation,
 	};
-
-	const postType = yield controls.select(
-		editorStore.name,
-		'getCurrentPostType'
-	);
-	if ( window.postboxes.page !== postType ) {
-		window.postboxes.add_postbox_toggles( postType );
-	}
-
-	let wasSavingPost = yield controls.select(
-		editorStore.name,
-		'isSavingPost'
-	);
-	let wasAutosavingPost = yield controls.select(
-		editorStore.name,
-		'isAutosavingPost'
-	);
-
-	// Meta boxes are initialized once at page load. It is not necessary to
-	// account for updates on each state change.
-	//
-	// See: https://github.com/WordPress/WordPress/blob/5.1.1/wp-admin/includes/post.php#L2307-L2309
-	const hasActiveMetaBoxes = yield controls.select(
-		editPostStore.name,
-		'hasMetaBoxes'
-	);
-
-	// First remove any existing subscription in order to prevent multiple saves
-	if ( !! saveMetaboxUnsubscribe ) {
-		saveMetaboxUnsubscribe();
-	}
-
-	// Save metaboxes when performing a full save on the post.
-	saveMetaboxUnsubscribe = subscribe( () => {
-		const isSavingPost = select( editorStore.name ).isSavingPost();
-		const isAutosavingPost = select( editorStore.name ).isAutosavingPost();
-
-		// Save metaboxes on save completion, except for autosaves that are not a post preview.
-		const shouldTriggerMetaboxesSave =
-			hasActiveMetaBoxes &&
-			wasSavingPost &&
-			! isSavingPost &&
-			! wasAutosavingPost;
-
-		// Save current state for next inspection.
-		wasSavingPost = isSavingPost;
-		wasAutosavingPost = isAutosavingPost;
-
-		if ( shouldTriggerMetaboxesSave ) {
-			dispatch( editPostStore.name ).requestMetaBoxUpdates();
-		}
-	} );
 }
 
 /**
@@ -344,7 +297,7 @@ export function* requestMetaBoxUpdates() {
 
 	// Additional data needed for backward compatibility.
 	// If we do not provide this data, the post will be overridden with the default values.
-	const post = yield controls.select( editorStore.name, 'getCurrentPost' );
+	const post = yield controls.select( editorStore, 'getCurrentPost' );
 	const additionalData = [
 		post.comment_status ? [ 'comment_status', post.comment_status ] : false,
 		post.ping_status ? [ 'ping_status', post.ping_status ] : false,
@@ -357,7 +310,7 @@ export function* requestMetaBoxUpdates() {
 		document.querySelector( '.metabox-base-form' )
 	);
 	const activeMetaBoxLocations = yield controls.select(
-		editPostStore.name,
+		editPostStore,
 		'getActiveMetaBoxLocations'
 	);
 	const formDataToMerge = [
@@ -391,9 +344,9 @@ export function* requestMetaBoxUpdates() {
 			body: formData,
 			parse: false,
 		} );
-		yield controls.dispatch( editPostStore.name, 'metaBoxUpdatesSuccess' );
+		yield controls.dispatch( editPostStore, 'metaBoxUpdatesSuccess' );
 	} catch {
-		yield controls.dispatch( editPostStore.name, 'metaBoxUpdatesFailure' );
+		yield controls.dispatch( editPostStore, 'metaBoxUpdatesFailure' );
 	}
 }
 
@@ -487,7 +440,7 @@ export function* __unstableSwitchToTemplateMode( newTemplate = false ) {
 	yield setIsEditingTemplate( true );
 
 	const isWelcomeGuideActive = yield controls.select(
-		editPostStore.name,
+		editPostStore,
 		'isFeatureActive',
 		'welcomeGuideTemplate'
 	);
@@ -517,7 +470,7 @@ export function* __unstableCreateTemplate( template ) {
 		'wp_template',
 		template
 	);
-	const post = yield controls.select( editorStore.name, 'getCurrentPost' );
+	const post = yield controls.select( editorStore, 'getCurrentPost' );
 
 	yield controls.dispatch(
 		coreStore,
@@ -530,3 +483,69 @@ export function* __unstableCreateTemplate( template ) {
 		}
 	);
 }
+
+let metaBoxesInitialized = false;
+
+/**
+ * Initializes WordPress `postboxes` script and the logic for saving meta boxes.
+ */
+export function* initializeMetaBoxes() {
+	const isEditorReady = yield controls.select(
+		editorStore,
+		'__unstableIsEditorReady'
+	);
+
+	if ( ! isEditorReady ) {
+		return;
+	}
+
+	const postType = yield controls.select( editorStore, 'getCurrentPostType' );
+
+	// Only initialize once.
+	if ( metaBoxesInitialized ) {
+		return;
+	}
+
+	if ( window.postboxes.page !== postType ) {
+		window.postboxes.add_postbox_toggles( postType );
+	}
+
+	metaBoxesInitialized = true;
+
+	let wasSavingPost = yield controls.select( editorStore, 'isSavingPost' );
+	let wasAutosavingPost = yield controls.select(
+		editorStore,
+		'isAutosavingPost'
+	);
+	const hasMetaBoxes = yield controls.select( editPostStore, 'hasMetaBoxes' );
+
+	// Save metaboxes when performing a full save on the post.
+	subscribe( () => {
+		const isSavingPost = select( editorStore ).isSavingPost();
+		const isAutosavingPost = select( editorStore ).isAutosavingPost();
+
+		// Save metaboxes on save completion, except for autosaves that are not a post preview.
+		//
+		// Meta boxes are initialized once at page load. It is not necessary to
+		// account for updates on each state change.
+		//
+		// See: https://github.com/WordPress/WordPress/blob/5.1.1/wp-admin/includes/post.php#L2307-L2309
+		const shouldTriggerMetaboxesSave =
+			hasMetaBoxes &&
+			wasSavingPost &&
+			! isSavingPost &&
+			! wasAutosavingPost;
+
+		// Save current state for next inspection.
+		wasSavingPost = isSavingPost;
+		wasAutosavingPost = isAutosavingPost;
+
+		if ( shouldTriggerMetaboxesSave ) {
+			dispatch( editPostStore ).requestMetaBoxUpdates();
+		}
+	} );
+
+	return {
+		type: 'META_BOXES_INITIALIZED',
+	};
+}