@wordpress/edit-post 6.0.1 → 6.1.0-next.e230fbab09.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,
-	__experimentalUseNavigator as useNavigator,
-	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
-	__experimentalHStack as HStack,
-	__experimentalText as Text,
-	__experimentalTruncate as Truncate,
-	FlexItem,
-	Modal,
-	TabPanel,
-	Button,
-	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,37 +41,8 @@ import { store as editPostStore } from '../../store';
 import BlockManager from '../block-manager';
 
 const MODAL_NAME = 'edit-post/preferences';
-const PREFERENCES_MENU = 'preferences-menu';
-
-function NavigationButton( { as: Tag = Button, path, ...props } ) {
-	const { goTo } = useNavigator();
-
-	const dataAttrName = 'data-navigator-focusable-id';
-	const dataAttrValue = path;
-
-	const dataAttrCssSelector = `[${ dataAttrName }="${ dataAttrValue }"]`;
-
-	const tagProps = {
-		...props,
-		[ dataAttrName ]: dataAttrValue,
-	};
-
-	return (
-		<Tag
-			onClick={ () =>
-				goTo( path, { focusTargetSelector: dataAttrCssSelector } )
-			}
-			{ ...tagProps }
-		/>
-	);
-}
 
-function NavigationBackButton( { as: Tag = Button, ...props } ) {
-	const { goBack } = useNavigator();
-	return <Tag onClick={ goBack } { ...props } />;
-}
-
-export default function PreferencesModal() {
+export default function EditPostPreferencesModal() {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const { closeModal } = useDispatch( editPostStore );
 	const { isModalActive, isViewable } = useSelect( ( select ) => {
@@ -119,7 +78,7 @@ export default function PreferencesModal() {
 				content: (
 					<>
 						{ isLargeViewport && (
-							<Section
+							<PreferencesModalSection
 								title={ __( 'Publishing' ) }
 								description={ __(
 									'Change options related to publishing.'
@@ -133,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.'
@@ -177,7 +136,7 @@ export default function PreferencesModal() {
 									label={ __( 'Display block breadcrumbs' ) }
 								/>
 							) }
-						</Section>
+						</PreferencesModalSection>
 					</>
 				),
 			},
@@ -186,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.'
@@ -208,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>
 					</>
 				),
 			},
@@ -225,7 +184,7 @@ export default function PreferencesModal() {
 				tabLabel: __( 'Panels' ),
 				content: (
 					<>
-						<Section
+						<PreferencesModalSection
 							title={ __( 'Document settings' ) }
 							description={ __(
 								'Choose what displays in the panel.'
@@ -281,7 +240,7 @@ export default function PreferencesModal() {
 									panelName="page-attributes"
 								/>
 							</PageAttributesCheck>
-						</Section>
+						</PreferencesModalSection>
 						<MetaBoxesSection
 							title={ __( 'Additional' ) }
 							description={ __(
@@ -295,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 (
-										<NavigationButton
-											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>
-										</NavigationButton>
-									);
-								} ) }
-							</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"
-								>
-									<NavigationBackButton
-										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', () => {