@wordpress/edit-post 6.1.1 → 6.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "6.1.1",
+	"version": "6.3.1",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,30 +27,31 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.4.1",
-		"@wordpress/api-fetch": "^6.1.1",
-		"@wordpress/block-editor": "^8.3.1",
-		"@wordpress/block-library": "^7.1.1",
-		"@wordpress/blocks": "^11.3.1",
-		"@wordpress/components": "^19.6.1",
-		"@wordpress/compose": "^5.2.1",
-		"@wordpress/core-data": "^4.2.1",
-		"@wordpress/data": "^6.4.1",
-		"@wordpress/editor": "^12.3.1",
-		"@wordpress/element": "^4.2.1",
-		"@wordpress/hooks": "^3.4.1",
-		"@wordpress/i18n": "^4.4.1",
-		"@wordpress/icons": "^8.0.1",
-		"@wordpress/interface": "^4.3.1",
-		"@wordpress/keyboard-shortcuts": "^3.2.1",
-		"@wordpress/keycodes": "^3.4.1",
-		"@wordpress/media-utils": "^3.2.1",
-		"@wordpress/notices": "^3.4.1",
-		"@wordpress/plugins": "^4.2.1",
-		"@wordpress/preferences": "^1.0.0",
-		"@wordpress/url": "^3.5.1",
-		"@wordpress/viewport": "^4.2.1",
-		"@wordpress/warning": "^2.4.1",
+		"@wordpress/a11y": "^3.6.0",
+		"@wordpress/api-fetch": "^6.3.0",
+		"@wordpress/block-editor": "^8.5.1",
+		"@wordpress/block-library": "^7.3.1",
+		"@wordpress/blocks": "^11.5.1",
+		"@wordpress/components": "^19.8.0",
+		"@wordpress/compose": "^5.4.0",
+		"@wordpress/core-data": "^4.4.1",
+		"@wordpress/data": "^6.6.0",
+		"@wordpress/deprecated": "^3.6.0",
+		"@wordpress/editor": "^12.5.1",
+		"@wordpress/element": "^4.4.0",
+		"@wordpress/hooks": "^3.6.0",
+		"@wordpress/i18n": "^4.6.0",
+		"@wordpress/icons": "^8.2.0",
+		"@wordpress/interface": "^4.5.0",
+		"@wordpress/keyboard-shortcuts": "^3.4.0",
+		"@wordpress/keycodes": "^3.6.0",
+		"@wordpress/media-utils": "^3.4.0",
+		"@wordpress/notices": "^3.6.0",
+		"@wordpress/plugins": "^4.4.0",
+		"@wordpress/preferences": "^1.2.0",
+		"@wordpress/url": "^3.7.0",
+		"@wordpress/viewport": "^4.4.0",
+		"@wordpress/warning": "^2.6.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
@@ -63,5 +64,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "3494eafea7cb345728166c902b3d1223c4a8db6f"
+	"gitHead": "9c15c669843d53c5ca6024a4c486d01d819d123f"
 }

package/src/components/header/plugin-more-menu-item/index.js

@@ -3,6 +3,7 @@
  */
 import { ActionItem } from '@wordpress/interface';
 import { compose } from '@wordpress/compose';
+import { MenuItem } from '@wordpress/components';
 import { withPluginContext } from '@wordpress/plugins';
 
 /**
@@ -64,6 +65,7 @@ import { withPluginContext } from '@wordpress/plugins';
 export default compose(
 	withPluginContext( ( context, ownProps ) => {
 		return {
+			as: ownProps.as ?? MenuItem,
 			icon: ownProps.icon || context.icon,
 			name: 'core/edit-post/plugin-more-menu',
 		};

package/src/components/header/template-title/delete-template.js

@@ -67,7 +67,9 @@ export default function DeleteTemplate() {
 			...settings,
 			availableTemplates: newAvailableTemplates,
 		} );
-		deleteEntityRecord( 'postType', 'wp_template', template.id );
+		deleteEntityRecord( 'postType', 'wp_template', template.id, {
+			throwOnError: true,
+		} );
 	};
 
 	return (

package/src/components/layout/index.js

@@ -47,6 +47,7 @@ import SettingsSidebar from '../sidebar/settings-sidebar';
 import MetaBoxes from '../meta-boxes';
 import WelcomeGuide from '../welcome-guide';
 import ActionsPanel from './actions-panel';
+import StartPageOptions from '../start-page-options';
 import { store as editPostStore } from '../../store';
 
 const interfaceLabels = {
@@ -286,6 +287,7 @@ function Layout( { styles } ) {
 			<EditPostPreferencesModal />
 			<KeyboardShortcutHelpModal />
 			<WelcomeGuide />
+			<StartPageOptions />
 			<Popover.Slot />
 			<PluginArea onError={ onPluginAreaError } />
 		</>

package/src/components/sidebar/post-link/index.js

@@ -97,7 +97,7 @@ function PostLink( {
 						{ __( 'The last part of the URL.' ) }{ ' ' }
 						<ExternalLink
 							href={ __(
-								'https://wordpress.org/support/article/writing-posts/#post-field-descriptions'
+								'https://wordpress.org/support/article/settings-sidebar/#permalink'
 							) }
 						>
 							{ __( 'Read about permalinks' ) }

package/src/components/start-page-options/index.js

@@ -0,0 +1,121 @@
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState, useEffect } from '@wordpress/element';
+import {
+	store as blockEditorStore,
+	__experimentalBlockPatternsList as BlockPatternsList,
+} from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useAsyncList } from '@wordpress/compose';
+import { store as editorStore } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../store';
+
+function PatternSelection( { onChoosePattern } ) {
+	const { blockPatterns } = useSelect( ( select ) => {
+		const { __experimentalGetPatternsByBlockTypes } = select(
+			blockEditorStore
+		);
+		return {
+			blockPatterns: __experimentalGetPatternsByBlockTypes(
+				'core/post-content'
+			),
+		};
+	}, [] );
+	const shownBlockPatterns = useAsyncList( blockPatterns );
+	const { resetEditorBlocks } = useDispatch( editorStore );
+	useEffect( () => {
+		if ( blockPatterns.length <= 1 ) {
+			onChoosePattern();
+		}
+	}, [ blockPatterns.length ] );
+	return (
+		<BlockPatternsList
+			blockPatterns={ blockPatterns }
+			shownPatterns={ shownBlockPatterns }
+			onClickPattern={ ( _pattern, blocks ) => {
+				resetEditorBlocks( blocks );
+				onChoosePattern();
+			} }
+		/>
+	);
+}
+
+const START_PAGE_MODAL_STATES = {
+	INITIAL: 'INITIAL',
+	PATTERN: 'PATTERN',
+	CLOSED: 'CLOSED',
+};
+
+export default function StartPageOptions() {
+	const [ modalState, setModalState ] = useState(
+		START_PAGE_MODAL_STATES.INITIAL
+	);
+	const shouldOpenModel = useSelect(
+		( select ) => {
+			if ( modalState !== START_PAGE_MODAL_STATES.INITIAL ) {
+				return false;
+			}
+			const { __experimentalGetPatternsByBlockTypes } = select(
+				blockEditorStore
+			);
+			const {
+				getCurrentPostType,
+				getEditedPostContent,
+				isEditedPostSaveable,
+			} = select( editorStore );
+			const { isEditingTemplate, isFeatureActive } = select(
+				editPostStore
+			);
+			return (
+				getCurrentPostType() === 'page' &&
+				! isEditedPostSaveable() &&
+				'' === getEditedPostContent() &&
+				! isEditingTemplate() &&
+				! isFeatureActive( 'welcomeGuide' ) &&
+				__experimentalGetPatternsByBlockTypes( 'core/post-content' )
+					.length >= 1
+			);
+		},
+		[ modalState ]
+	);
+
+	useEffect( () => {
+		if ( shouldOpenModel ) {
+			setModalState( START_PAGE_MODAL_STATES.PATTERN );
+		}
+	}, [ shouldOpenModel ] );
+
+	if (
+		modalState === START_PAGE_MODAL_STATES.INITIAL ||
+		modalState === START_PAGE_MODAL_STATES.CLOSED
+	) {
+		return null;
+	}
+	return (
+		<Modal
+			className="edit-post-start-page-options__modal"
+			title={ __( 'Choose a pattern' ) }
+			closeLabel={ __( 'Cancel' ) }
+			onRequestClose={ () => {
+				setModalState( START_PAGE_MODAL_STATES.CLOSED );
+			} }
+		>
+			<div className="edit-post-start-page-options__modal-content">
+				{ modalState === START_PAGE_MODAL_STATES.PATTERN && (
+					<PatternSelection
+						onChoosePattern={ () => {
+							setModalState( START_PAGE_MODAL_STATES.CLOSED );
+						} }
+					/>
+				) }
+			</div>
+		</Modal>
+	);
+}

package/src/components/start-page-options/style.scss

@@ -0,0 +1,42 @@
+.edit-post-start-page-options__modal {
+	// To keep modal dimensions consistent as subsections are navigated, width
+	// and height are used instead of max-(width/height).
+	@include break-small() {
+		width: calc(100% - #{ $grid-unit-20 * 2 });
+		height: calc(100% - #{ $header-height * 2 });
+	}
+	@include break-medium() {
+		width: $break-medium - $grid-unit-20 * 2;
+	}
+	@include break-large() {
+		height: 70%;
+	}
+
+	// @todo: Consider this for a minimal modal prop.
+	.components-modal__header {
+		border-bottom: none;
+	}
+
+	.components-modal__content::before {
+		content: none;
+	}
+}
+
+// 2 column masonry layout.
+.edit-post-start-page-options__modal-content .block-editor-block-patterns-list {
+	column-count: 2;
+	column-gap: $grid-unit-30;
+
+	.block-editor-block-patterns-list__list-item {
+		break-inside: avoid-column;
+		margin-bottom: $grid-unit-30;
+
+		.block-editor-block-preview__container {
+			min-height: 100px;
+		}
+
+		.block-editor-block-preview__content {
+			width: 100%;
+		}
+	}
+}

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

@@ -124,8 +124,7 @@ export default function VisualEditor( { styles } ) {
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 	const { setIsEditingTemplate } = useDispatch( editPostStore );
 	const desktopCanvasStyles = {
-		// We intentionally omit a 100% height here. The container is a flex item, so the 100% height is granted by default.
-		// If a percentage height is present, older browsers such as Safari 13 apply that, but do so incorrectly as the inheritance is buggy.
+		height: '100%',
 		width: '100%',
 		margin: 0,
 		display: 'flex',
@@ -237,7 +236,10 @@ export default function VisualEditor( { styles } ) {
 							/>
 						) }
 						{ ! isTemplateMode && (
-							<div className="edit-post-visual-editor__post-title-wrapper">
+							<div
+								className="edit-post-visual-editor__post-title-wrapper"
+								contentEditable={ false }
+							>
 								<PostTitle />
 							</div>
 						) }

package/src/editor.js

@@ -18,6 +18,7 @@ import { StrictMode, useMemo } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -43,7 +44,6 @@ function Editor( {
 		preferredStyleVariations,
 		hiddenBlockTypes,
 		blockTypes,
-		__experimentalLocalAutosaveInterval,
 		keepCaretInsideBlock,
 		isTemplateMode,
 		template,
@@ -51,7 +51,6 @@ function Editor( {
 		( select ) => {
 			const {
 				isFeatureActive,
-				getPreference,
 				__experimentalGetPreviewDeviceType,
 				isEditingTemplate,
 				getEditedPostTemplate,
@@ -87,14 +86,12 @@ function Editor( {
 				focusMode: isFeatureActive( 'focusMode' ),
 				hasReducedUI: isFeatureActive( 'reducedUI' ),
 				hasThemeStyles: isFeatureActive( 'themeStyles' ),
-				preferredStyleVariations: getPreference(
+				preferredStyleVariations: select( preferencesStore ).get(
+					'core/edit-post',
 					'preferredStyleVariations'
 				),
 				hiddenBlockTypes: getHiddenBlockTypes(),
 				blockTypes: getBlockTypes(),
-				__experimentalLocalAutosaveInterval: getPreference(
-					'localAutosaveInterval'
-				),
 				keepCaretInsideBlock: isFeatureActive( 'keepCaretInsideBlock' ),
 				isTemplateMode: isEditingTemplate(),
 				template:
@@ -121,7 +118,6 @@ function Editor( {
 			hasFixedToolbar,
 			focusMode,
 			hasReducedUI,
-			__experimentalLocalAutosaveInterval,
 
 			// This is marked as experimental to give time for the quick inserter to mature.
 			__experimentalSetIsInserterOpened: setIsInserterOpened,
@@ -156,7 +152,6 @@ function Editor( {
 		hiddenBlockTypes,
 		blockTypes,
 		preferredStyleVariations,
-		__experimentalLocalAutosaveInterval,
 		setIsInserterOpened,
 		updatePreferredStyleVariations,
 		keepCaretInsideBlock,

package/src/index.js

@@ -107,9 +107,14 @@ export function initializeEditor(
 	);
 
 	dispatch( preferencesStore ).setDefaults( 'core/edit-post', {
+		editorMode: 'visual',
 		fixedToolbar: false,
 		fullscreenMode: true,
 		hiddenBlockTypes: [],
+		inactivePanels: [],
+		isPublishSidebarEnabled: true,
+		openPanels: [ 'post-status' ],
+		preferredStyleVariations: {},
 		showBlockBreadcrumbs: true,
 		showIconLabels: false,
 		themeStyles: true,

package/src/index.native.js

@@ -3,6 +3,8 @@
  */
 import '@wordpress/core-data';
 import '@wordpress/format-library';
+import { dispatch } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -19,5 +21,17 @@ import Editor from './editor';
  * @param {Object} postId   ID of the post to edit (unused right now)
  */
 export function initializeEditor( id, postType, postId ) {
+	dispatch( preferencesStore ).setDefaults( 'core/edit-post', {
+		editorMode: 'visual',
+		fixedToolbar: false,
+		fullscreenMode: true,
+		hiddenBlockTypes: [],
+		inactivePanels: [],
+		isPublishSidebarEnabled: true,
+		openPanels: [ 'post-status' ],
+		preferredStyleVariations: {},
+		welcomeGuide: true,
+	} );
+
 	return <Editor postId={ postId } postType={ postType } />;
 }

package/src/store/actions.js

@@ -107,26 +107,58 @@ export function togglePublishSidebar() {
  *
  * @return {Object} Action object.
  */
-export function toggleEditorPanelEnabled( panelName ) {
-	return {
-		type: 'TOGGLE_PANEL_ENABLED',
-		panelName,
-	};
-}
+export const toggleEditorPanelEnabled = ( panelName ) => ( { registry } ) => {
+	const inactivePanels =
+		registry
+			.select( preferencesStore )
+			.get( 'core/edit-post', 'inactivePanels' ) ?? [];
+
+	const isPanelInactive = !! inactivePanels?.includes( panelName );
+
+	// If the panel is inactive, remove it to enable it, else add it to
+	// make it inactive.
+	let updatedInactivePanels;
+	if ( isPanelInactive ) {
+		updatedInactivePanels = inactivePanels.filter(
+			( invactivePanelName ) => invactivePanelName !== panelName
+		);
+	} else {
+		updatedInactivePanels = [ ...inactivePanels, panelName ];
+	}
+
+	registry
+		.dispatch( preferencesStore )
+		.set( 'core/edit-post', 'inactivePanels', updatedInactivePanels );
+};
 
 /**
- * Returns an action object used to open or close a panel in the editor.
+ * Opens a closed panel and closes an open panel.
  *
  * @param {string} panelName A string that identifies the panel to open or close.
- *
- * @return {Object} Action object.
  */
-export function toggleEditorPanelOpened( panelName ) {
-	return {
-		type: 'TOGGLE_PANEL_OPENED',
-		panelName,
-	};
-}
+export const toggleEditorPanelOpened = ( panelName ) => ( { registry } ) => {
+	const openPanels =
+		registry
+			.select( preferencesStore )
+			.get( 'core/edit-post', 'openPanels' ) ?? [];
+
+	const isPanelOpen = !! openPanels?.includes( panelName );
+
+	// If the panel is open, remove it to close it, else add it to
+	// make it open.
+	let updatedOpenPanels;
+	if ( isPanelOpen ) {
+		updatedOpenPanels = openPanels.filter(
+			( openPanelName ) => openPanelName !== panelName
+		);
+	} else {
+		updatedOpenPanels = [ ...openPanels, panelName ];
+	}
+
+	registry
+		.dispatch( preferencesStore )
+		.set( 'core/edit-post', 'openPanels', updatedOpenPanels );
+};
 
 /**
  * Returns an action object used to remove a panel from the editor.
@@ -155,11 +187,10 @@ export const toggleFeature = ( feature ) => ( { registry } ) =>
  *
  * @param {string} mode The editor mode.
  */
-export const switchEditorMode = ( mode ) => ( { dispatch, registry } ) => {
-	dispatch( {
-		type: 'SWITCH_MODE',
-		mode,
-	} );
+export const switchEditorMode = ( mode ) => ( { registry } ) => {
+	registry
+		.dispatch( preferencesStore )
+		.set( 'core/edit-post', 'editorMode', mode );
 
 	// Unselect blocks when we switch to the code editor.
 	if ( mode !== 'visual' ) {
@@ -193,30 +224,44 @@ export const togglePinnedPluginItem = ( pluginName ) => ( { registry } ) => {
  *
  * @param {string}  blockName  Name of the block.
  * @param {?string} blockStyle Name of the style that should be auto applied. If undefined, the "auto apply" setting of the block is removed.
- *
- * @return {Object} Action object.
  */
-export function updatePreferredStyleVariations( blockName, blockStyle ) {
-	return {
-		type: 'UPDATE_PREFERRED_STYLE_VARIATIONS',
-		blockName,
-		blockStyle,
-	};
-}
+export const updatePreferredStyleVariations = ( blockName, blockStyle ) => ( {
+	registry,
+} ) => {
+	if ( ! blockName ) {
+		return;
+	}
 
-/**
- * Returns an action object used in signalling that the editor should attempt
- * to locally autosave the current post every `interval` seconds.
- *
- * @param {number} interval The new interval, in seconds.
- * @return {Object} Action object.
- */
-export function __experimentalUpdateLocalAutosaveInterval( interval ) {
-	return {
-		type: 'UPDATE_LOCAL_AUTOSAVE_INTERVAL',
-		interval,
-	};
-}
+	const existingVariations =
+		registry
+			.select( preferencesStore )
+			.get( 'core/edit-post', 'preferredStyleVariations' ) ?? {};
+
+	// When the blockStyle is omitted, remove the block's preferred variation.
+	if ( ! blockStyle ) {
+		const updatedVariations = {
+			...existingVariations,
+		};
+
+		delete updatedVariations[ blockName ];
+
+		registry
+			.dispatch( preferencesStore )
+			.set(
+				'core/edit-post',
+				'preferredStyleVariations',
+				updatedVariations
+			);
+	} else {
+		// Else add the variation.
+		registry
+			.dispatch( preferencesStore )
+			.set( 'core/edit-post', 'preferredStyleVariations', {
+				...existingVariations,
+				[ blockName ]: blockStyle,
+			} );
+	}
+};
 
 /**
  * Update the provided block types to be visible.

package/src/store/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createReduxStore, registerStore } from '@wordpress/data';
+import { createReduxStore, register } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -11,13 +11,6 @@ import * as actions from './actions';
 import * as selectors from './selectors';
 import { STORE_NAME } from './constants';
 
-const storeConfig = {
-	reducer,
-	actions,
-	selectors,
-	persist: [ 'preferences' ],
-};
-
 /**
  * Store definition for the edit post namespace.
  *
@@ -25,7 +18,10 @@ const storeConfig = {
  *
  * @type {Object}
  */
-export const store = createReduxStore( STORE_NAME, storeConfig );
+export const store = createReduxStore( STORE_NAME, {
+	reducer,
+	actions,
+	selectors,
+} );
 
-// Ideally we use register instead of register store.
-registerStore( STORE_NAME, storeConfig );
+register( store );