@wordpress/edit-post 5.0.1 → 5.0.5

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,22 @@ function Editor( {
 	] );
 
 	const styles = useMemo( () => {
-		return hasThemeStyles ? settings.styles : [];
+		const themeStyles = [];
+		const presetStyles = [];
+		settings.styles.forEach( ( style ) => {
+			if ( ! style.__unstableType || style.__unstableType === 'theme' ) {
+				themeStyles.push( style );
+			} else {
+				presetStyles.push( style );
+			}
+		} );
+		const defaultEditorStyles = [
+			...settings.defaultEditorStyles,
+			...presetStyles,
+		];
+		return hasThemeStyles && themeStyles.length
+			? settings.styles
+			: defaultEditorStyles;
 	}, [ settings, hasThemeStyles ] );
 
 	if ( ! post ) {
@@ -165,29 +185,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,19 @@ export function initializeEditor(
 		settings,
 		initialEdits
 	);
+
+	dispatch( interfaceStore ).setFeatureDefaults( 'core/edit-post', {
+		fixedToolbar: false,
+		welcomeGuide: true,
+		mobileGalleryWarning: true,
+		fullscreenMode: true,
+		showIconLabels: false,
+		themeStyles: true,
+		showBlockBreadcrumbs: true,
+		welcomeGuideTemplate: true,
+	} );
+
+	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
 	registerCoreBlocks();
 	if ( process.env.GUTENBERG_PHASE === 2 ) {
 		__experimentalRegisterExperimentalCoreBlocks( {
@@ -157,3 +169,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' ) }
+		/>
 	);
 }