@wordpress/edit-post 6.0.2 → 6.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "6.0.2",
+	"version": "6.1.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,36 +27,41 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.3.1",
-		"@wordpress/api-fetch": "^6.0.1",
-		"@wordpress/block-editor": "^8.2.0",
-		"@wordpress/block-library": "^7.0.2",
-		"@wordpress/blocks": "^11.2.2",
-		"@wordpress/components": "^19.5.0",
-		"@wordpress/compose": "^5.1.2",
-		"@wordpress/core-data": "^4.1.2",
-		"@wordpress/data": "^6.3.0",
-		"@wordpress/editor": "^12.2.2",
-		"@wordpress/element": "^4.1.1",
-		"@wordpress/hooks": "^3.3.1",
-		"@wordpress/i18n": "^4.3.1",
-		"@wordpress/icons": "^7.0.1",
-		"@wordpress/interface": "^4.2.3",
-		"@wordpress/keyboard-shortcuts": "^3.1.2",
-		"@wordpress/keycodes": "^3.3.1",
-		"@wordpress/media-utils": "^3.1.1",
-		"@wordpress/notices": "^3.3.2",
-		"@wordpress/plugins": "^4.1.3",
-		"@wordpress/url": "^3.4.1",
-		"@wordpress/viewport": "^4.1.2",
-		"@wordpress/warning": "^2.3.1",
+		"@wordpress/a11y": "^3.4.0",
+		"@wordpress/api-fetch": "^6.1.0",
+		"@wordpress/block-editor": "^8.3.0",
+		"@wordpress/block-library": "^7.1.0",
+		"@wordpress/blocks": "^11.3.0",
+		"@wordpress/components": "^19.6.0",
+		"@wordpress/compose": "^5.2.0",
+		"@wordpress/core-data": "^4.2.0",
+		"@wordpress/data": "^6.4.0",
+		"@wordpress/editor": "^12.3.0",
+		"@wordpress/element": "^4.2.0",
+		"@wordpress/hooks": "^3.4.0",
+		"@wordpress/i18n": "^4.4.0",
+		"@wordpress/icons": "^8.0.0",
+		"@wordpress/interface": "^4.3.0",
+		"@wordpress/keyboard-shortcuts": "^3.2.0",
+		"@wordpress/keycodes": "^3.4.0",
+		"@wordpress/media-utils": "^3.2.0",
+		"@wordpress/notices": "^3.4.0",
+		"@wordpress/plugins": "^4.2.0",
+		"@wordpress/preferences": "^1.0.0-prerelease",
+		"@wordpress/url": "^3.5.0",
+		"@wordpress/viewport": "^4.2.0",
+		"@wordpress/warning": "^2.4.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"rememo": "^3.0.0"
 	},
+	"peerDependencies": {
+		"react": "^17.0.0",
+		"react-dom": "^17.0.0"
+	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "4566ac290359553d04de4eb574545309343f790b"
+	"gitHead": "c37fd7edbc3e379540d7b24fce75a6f640a434ae"
 }

package/src/components/block-manager/category.js

@@ -23,11 +23,11 @@ function BlockManagerCategory( { title, blockTypes } ) {
 	const { defaultAllowedBlockTypes, hiddenBlockTypes } = useSelect(
 		( select ) => {
 			const { getEditorSettings } = select( editorStore );
-			const { getPreference } = select( editPostStore );
+			const { getHiddenBlockTypes } = select( editPostStore );
 			return {
 				defaultAllowedBlockTypes: getEditorSettings()
 					.defaultAllowedBlockTypes,
-				hiddenBlockTypes: getPreference( 'hiddenBlockTypes' ),
+				hiddenBlockTypes: getHiddenBlockTypes(),
 			};
 		},
 		[]

package/src/components/block-manager/index.js

@@ -116,8 +116,8 @@ export default withSelect( ( select ) => {
 		hasBlockSupport,
 		isMatchingSearchTerm,
 	} = select( blocksStore );
-	const { getPreference } = select( editPostStore );
-	const hiddenBlockTypes = getPreference( 'hiddenBlockTypes' );
+	const { getHiddenBlockTypes } = select( editPostStore );
+	const hiddenBlockTypes = getHiddenBlockTypes();
 	const numberOfHiddenBlocks =
 		isArray( hiddenBlockTypes ) && hiddenBlockTypes.length;
 

package/src/components/header/fullscreen-mode-close/test/index.js

@@ -14,7 +14,7 @@ import { useSelect } from '@wordpress/data';
 import FullscreenModeClose from '../';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => {
-	// This allows us to tweak the returned value on each test
+	// This allows us to tweak the returned value on each test.
 	const mock = jest.fn();
 	return mock;
 } );

package/src/components/header/header-toolbar/index.js

@@ -105,7 +105,7 @@ function HeaderToolbar() {
 	);
 	const openInserter = useCallback( () => {
 		if ( isInserterOpened ) {
-			// Focusing the inserter button closes the inserter popover
+			// Focusing the inserter button closes the inserter popover.
 			inserterButton.current.focus();
 		} else {
 			setIsInserterOpened( true );

package/src/components/header/header-toolbar/index.native.js

@@ -53,7 +53,7 @@ function HeaderToolbar( {
 	};
 	const renderHistoryButtons = () => {
 		const buttons = [
-			/* TODO: replace with EditorHistoryRedo and EditorHistoryUndo */
+			/* TODO: replace with EditorHistoryRedo and EditorHistoryUndo. */
 			<ToolbarButton
 				key="undoButton"
 				title={ __( 'Undo' ) }

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

@@ -18,17 +18,11 @@ import PreferencesMenuItem from '../preferences-menu-item';
 import ToolsMoreMenuGroup from '../tools-more-menu-group';
 import WritingMenu from '../writing-menu';
 
-const POPOVER_PROPS = {
-	className: 'edit-post-more-menu__content',
-};
-
 const MoreMenu = ( { showIconLabels } ) => {
 	const isLargeViewport = useViewportMatch( 'large' );
 
 	return (
 		<MoreMenuDropdown
-			className="edit-post-more-menu"
-			popoverProps={ POPOVER_PROPS }
 			toggleProps={ {
 				showTooltip: ! showIconLabels,
 				...( showIconLabels && { variant: 'tertiary' } ),

package/src/components/header/style.scss

@@ -73,7 +73,7 @@
 		padding: 0 #{ $grid-unit-15 * 0.5 };
 	}
 
-	.edit-post-more-menu .components-button,
+	.interface-more-menu-dropdown .components-button,
 	.interface-pinned-items .components-button {
 		margin-right: 0;
 	}

package/src/components/header/writing-menu/index.js

@@ -5,7 +5,7 @@ import { MenuGroup } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { displayShortcut } from '@wordpress/keycodes';
-import { MoreMenuFeatureToggle } from '@wordpress/interface';
+import { PreferenceToggleMenuItem } from '@wordpress/preferences';
 
 function WritingMenu() {
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -15,9 +15,9 @@ function WritingMenu() {
 
 	return (
 		<MenuGroup label={ _x( 'View', 'noun' ) }>
-			<MoreMenuFeatureToggle
+			<PreferenceToggleMenuItem
 				scope="core/edit-post"
-				feature="fixedToolbar"
+				name="fixedToolbar"
 				label={ __( 'Top toolbar' ) }
 				info={ __(
 					'Access all block and document tools in a single place'
@@ -25,17 +25,17 @@ function WritingMenu() {
 				messageActivated={ __( 'Top toolbar activated' ) }
 				messageDeactivated={ __( 'Top toolbar deactivated' ) }
 			/>
-			<MoreMenuFeatureToggle
+			<PreferenceToggleMenuItem
 				scope="core/edit-post"
-				feature="focusMode"
+				name="focusMode"
 				label={ __( 'Spotlight mode' ) }
 				info={ __( 'Focus on one block at a time' ) }
 				messageActivated={ __( 'Spotlight mode activated' ) }
 				messageDeactivated={ __( 'Spotlight mode deactivated' ) }
 			/>
-			<MoreMenuFeatureToggle
+			<PreferenceToggleMenuItem
 				scope="core/edit-post"
-				feature="fullscreenMode"
+				name="fullscreenMode"
 				label={ __( 'Fullscreen mode' ) }
 				info={ __( 'Work without distraction' ) }
 				messageActivated={ __( 'Fullscreen mode activated' ) }

package/src/components/keyboard-shortcut-help-modal/config.js

@@ -20,6 +20,10 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'primaryShift', character: 'k' },
 		description: __( 'Remove a link.' ),
 	},
+	{
+		keyCombination: { character: '[[' },
+		description: __( 'Insert a link to a post or page' ),
+	},
 	{
 		keyCombination: { modifier: 'primary', character: 'u' },
 		description: __( 'Underline the selected text.' ),

package/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap

@@ -69,6 +69,12 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
             "modifier": "primaryShift",
           },
         },
+        Object {
+          "description": "Insert a link to a post or page",
+          "keyCombination": Object {
+            "character": "[[",
+          },
+        },
         Object {
           "description": "Underline the selected text.",
           "keyCombination": Object {

package/src/components/layout/index.js

@@ -38,7 +38,7 @@ import TextEditor from '../text-editor';
 import VisualEditor from '../visual-editor';
 import EditPostKeyboardShortcuts from '../keyboard-shortcuts';
 import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
-import PreferencesModal from '../preferences-modal';
+import EditPostPreferencesModal from '../preferences-modal';
 import BrowserURL from '../browser-url';
 import Header from '../header';
 import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
@@ -283,7 +283,7 @@ function Layout( { styles } ) {
 					next: nextShortcut,
 				} }
 			/>
-			<PreferencesModal />
+			<EditPostPreferencesModal />
 			<KeyboardShortcutHelpModal />
 			<WelcomeGuide />
 			<Popover.Slot />

package/src/components/layout/index.native.js

@@ -112,7 +112,7 @@ class Layout extends Component {
 
 		const isHtmlView = mode === 'text';
 
-		// add a margin view at the bottom for the header
+		// Add a margin view at the bottom for the header.
 		const marginBottom =
 			Platform.OS === 'android' && ! isHtmlView
 				? headerToolbarStyles.container.height

package/src/components/preferences-modal/index.js

@@ -6,27 +6,11 @@ import { get } from 'lodash';
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
-	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
-	__experimentalHStack as HStack,
-	__experimentalText as Text,
-	__experimentalTruncate as Truncate,
-	FlexItem,
-	Modal,
-	TabPanel,
-	Card,
-	CardHeader,
-	CardBody,
-} from '@wordpress/components';
-import { isRTL, __ } from '@wordpress/i18n';
+
+import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo, useCallback, useState } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import {
 	PostTaxonomies,
 	PostExcerptCheck,
@@ -36,12 +20,16 @@ import {
 	store as editorStore,
 } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
-import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
+import {
+	PreferencesModal,
+	PreferencesModalTabs,
+	PreferencesModalSection,
+} from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
-import Section from './section';
+
 import {
 	EnablePluginDocumentSettingPanelOption,
 	EnablePublishSidebarOption,
@@ -53,9 +41,8 @@ import { store as editPostStore } from '../../store';
 import BlockManager from '../block-manager';
 
 const MODAL_NAME = 'edit-post/preferences';
-const PREFERENCES_MENU = 'preferences-menu';
 
-export default function PreferencesModal() {
+export default function EditPostPreferencesModal() {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const { closeModal } = useDispatch( editPostStore );
 	const { isModalActive, isViewable } = useSelect( ( select ) => {
@@ -91,7 +78,7 @@ export default function PreferencesModal() {
 				content: (
 					<>
 						{ isLargeViewport && (
-							<Section
+							<PreferencesModalSection
 								title={ __( 'Publishing' ) }
 								description={ __(
 									'Change options related to publishing.'
@@ -105,10 +92,10 @@ export default function PreferencesModal() {
 										'Include pre-publish checklist'
 									) }
 								/>
-							</Section>
+							</PreferencesModalSection>
 						) }
 
-						<Section
+						<PreferencesModalSection
 							title={ __( 'Appearance' ) }
 							description={ __(
 								'Customize options related to the block editor interface and editing flow.'
@@ -149,7 +136,7 @@ export default function PreferencesModal() {
 									label={ __( 'Display block breadcrumbs' ) }
 								/>
 							) }
-						</Section>
+						</PreferencesModalSection>
 					</>
 				),
 			},
@@ -158,7 +145,7 @@ export default function PreferencesModal() {
 				tabLabel: __( 'Blocks' ),
 				content: (
 					<>
-						<Section
+						<PreferencesModalSection
 							title={ __( 'Block interactions' ) }
 							description={ __(
 								'Customize how you interact with blocks in the block library and editing canvas.'
@@ -180,15 +167,15 @@ export default function PreferencesModal() {
 									'Contain text cursor inside block'
 								) }
 							/>
-						</Section>
-						<Section
+						</PreferencesModalSection>
+						<PreferencesModalSection
 							title={ __( 'Visible blocks' ) }
 							description={ __(
 								"Disable blocks that you don't want to appear in the inserter. They can always be toggled back on later."
 							) }
 						>
 							<BlockManager />
-						</Section>
+						</PreferencesModalSection>
 					</>
 				),
 			},
@@ -197,7 +184,7 @@ export default function PreferencesModal() {
 				tabLabel: __( 'Panels' ),
 				content: (
 					<>
-						<Section
+						<PreferencesModalSection
 							title={ __( 'Document settings' ) }
 							description={ __(
 								'Choose what displays in the panel.'
@@ -253,7 +240,7 @@ export default function PreferencesModal() {
 									panelName="page-attributes"
 								/>
 							</PageAttributesCheck>
-						</Section>
+						</PreferencesModalSection>
 						<MetaBoxesSection
 							title={ __( 'Additional' ) }
 							description={ __(
@@ -267,126 +254,13 @@ export default function PreferencesModal() {
 		[ isViewable, isLargeViewport, showBlockBreadcrumbsOption ]
 	);
 
-	// This is also used to sync the two different rendered components
-	// between small and large viewports.
-	const [ activeMenu, setActiveMenu ] = useState( PREFERENCES_MENU );
-	/**
-	 * Create helper objects from `sections` for easier data handling.
-	 * `tabs` is used for creating the `TabPanel` and `sectionsContentMap`
-	 * is used for easier access to active tab's content.
-	 */
-	const { tabs, sectionsContentMap } = useMemo(
-		() =>
-			sections.reduce(
-				( accumulator, { name, tabLabel: title, content } ) => {
-					accumulator.tabs.push( { name, title } );
-					accumulator.sectionsContentMap[ name ] = content;
-					return accumulator;
-				},
-				{ tabs: [], sectionsContentMap: {} }
-			),
-		[ sections ]
-	);
-	const getCurrentTab = useCallback(
-		( tab ) => sectionsContentMap[ tab.name ] || null,
-		[ sectionsContentMap ]
-	);
 	if ( ! isModalActive ) {
 		return null;
 	}
-	let modalContent;
-	// We render different components based on the viewport size.
-	if ( isLargeViewport ) {
-		modalContent = (
-			<TabPanel
-				className="edit-post-preferences__tabs"
-				tabs={ tabs }
-				initialTabName={
-					activeMenu !== PREFERENCES_MENU ? activeMenu : undefined
-				}
-				onSelect={ setActiveMenu }
-				orientation="vertical"
-			>
-				{ getCurrentTab }
-			</TabPanel>
-		);
-	} else {
-		modalContent = (
-			<NavigatorProvider initialPath="/">
-				<NavigatorScreen path="/">
-					<Card isBorderless size="small">
-						<CardBody>
-							<ItemGroup>
-								{ tabs.map( ( tab ) => {
-									return (
-										<NavigatorButton
-											key={ tab.name }
-											path={ tab.name }
-											as={ Item }
-											isAction
-										>
-											<HStack justify="space-between">
-												<FlexItem>
-													<Truncate>
-														{ tab.title }
-													</Truncate>
-												</FlexItem>
-												<FlexItem>
-													<Icon
-														icon={
-															isRTL()
-																? chevronLeft
-																: chevronRight
-														}
-													/>
-												</FlexItem>
-											</HStack>
-										</NavigatorButton>
-									);
-								} ) }
-							</ItemGroup>
-						</CardBody>
-					</Card>
-				</NavigatorScreen>
-				{ sections.map( ( section ) => {
-					return (
-						<NavigatorScreen
-							key={ `${ section.name }-menu` }
-							path={ section.name }
-						>
-							<Card isBorderless size="large">
-								<CardHeader
-									isBorderless={ false }
-									justify="left"
-									size="small"
-									gap="6"
-								>
-									<NavigatorBackButton
-										icon={
-											isRTL() ? chevronRight : chevronLeft
-										}
-										aria-label={ __(
-											'Navigate to the previous view'
-										) }
-									/>
-									<Text size="16">{ section.tabLabel }</Text>
-								</CardHeader>
-								<CardBody>{ section.content }</CardBody>
-							</Card>
-						</NavigatorScreen>
-					);
-				} ) }
-			</NavigatorProvider>
-		);
-	}
+
 	return (
-		<Modal
-			className="edit-post-preferences-modal"
-			title={ __( 'Preferences' ) }
-			closeLabel={ __( 'Close' ) }
-			onRequestClose={ closeModal }
-		>
-			{ modalContent }
-		</Modal>
+		<PreferencesModal closeModal={ closeModal }>
+			<PreferencesModalTabs sections={ sections } />
+		</PreferencesModal>
 	);
 }

package/src/components/preferences-modal/meta-boxes-section.js

@@ -9,11 +9,11 @@ import { filter, map } from 'lodash';
 import { __ } from '@wordpress/i18n';
 import { withSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
+import { PreferencesModalSection } from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
-import Section from './section';
 import { EnableCustomFieldsOption, EnablePanelOption } from './options';
 import { store as editPostStore } from '../../store';
 
@@ -33,7 +33,7 @@ export function MetaBoxesSection( {
 	}
 
 	return (
-		<Section { ...sectionProps }>
+		<PreferencesModalSection { ...sectionProps }>
 			{ areCustomFieldsRegistered && (
 				<EnableCustomFieldsOption label={ __( 'Custom fields' ) } />
 			) }
@@ -44,7 +44,7 @@ export function MetaBoxesSection( {
 					panelName={ `meta-box-${ id }` }
 				/>
 			) ) }
-		</Section>
+		</PreferencesModalSection>
 	);
 }
 

package/src/components/preferences-modal/options/enable-custom-fields.js

@@ -6,11 +6,7 @@ import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import BaseOption from './base';
+import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
 
 export function CustomFieldsConfirmation( { willEnable } ) {
 	const [ isReloading, setIsReloading ] = useState( false );

package/src/components/preferences-modal/options/enable-feature.js

@@ -3,11 +3,11 @@
  */
 import { compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
+import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
-import BaseOption from './base';
 import { store as editPostStore } from '../../../store';
 
 export default compose(

package/src/components/preferences-modal/options/enable-panel.js

@@ -3,11 +3,11 @@
  */
 import { compose, ifCondition } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
+import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
-import BaseOption from './base';
 import { store as editPostStore } from '../../../store';
 
 export default compose(

package/src/components/preferences-modal/options/enable-publish-sidebar.js

@@ -5,11 +5,7 @@ import { compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { ifViewportMatches } from '@wordpress/viewport';
 import { store as editorStore } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import BaseOption from './base';
+import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
 
 export default compose(
 	withSelect( ( select ) => ( {

package/src/components/preferences-modal/options/test/__snapshots__/enable-custom-fields.js.snap

@@ -15,7 +15,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
 }
 
 <div
-  className="edit-post-preferences-modal__option"
+  className="interface-preferences-modal__option"
 >
   <div
     className="components-base-control components-toggle-control emotion-0 emotion-1"
@@ -78,7 +78,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
 }
 
 <div
-  className="edit-post-preferences-modal__option"
+  className="interface-preferences-modal__option"
 >
   <div
     className="components-base-control components-toggle-control emotion-0 emotion-1"
@@ -127,7 +127,7 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
 }
 
 <div
-  className="edit-post-preferences-modal__option"
+  className="interface-preferences-modal__option"
 >
   <div
     className="components-base-control components-toggle-control emotion-0 emotion-1"
@@ -190,7 +190,7 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fiel
 }
 
 <div
-  className="edit-post-preferences-modal__option"
+  className="interface-preferences-modal__option"
 >
   <div
     className="components-base-control components-toggle-control emotion-0 emotion-1"

package/src/components/preferences-modal/options/test/enable-custom-fields.js

@@ -7,6 +7,7 @@ import { default as TestRenderer, act } from 'react-test-renderer';
  * WordPress dependencies
  */
 import { Button } from '@wordpress/components';
+import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -15,7 +16,6 @@ import {
 	EnableCustomFieldsOption,
 	CustomFieldsConfirmation,
 } from '../enable-custom-fields';
-import BaseOption from '../base';
 
 describe( 'EnableCustomFieldsOption', () => {
 	it( 'renders a checked checkbox when custom fields are enabled', () => {