@wordpress/edit-post 7.26.0 → 7.27.0

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

@@ -5,294 +5,71 @@
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
-import {
-	PostTaxonomies,
-	PostExcerptCheck,
-	PageAttributesCheck,
-	PostFeaturedImageCheck,
-	PostTypeSupportCheck,
-	store as editorStore,
-} from '@wordpress/editor';
-import {
-	PreferencesModal,
-	PreferencesModalTabs,
-	PreferencesModalSection,
-	store as interfaceStore,
-} from '@wordpress/interface';
-import { store as preferencesStore } from '@wordpress/preferences';
+import { store as interfaceStore } from '@wordpress/interface';
+import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-
-import {
-	EnablePluginDocumentSettingPanelOption,
-	EnablePublishSidebarOption,
-	EnablePanelOption,
-	EnableFeature,
-} from './options';
+import { unlock } from '../../lock-unlock';
 import MetaBoxesSection from './meta-boxes-section';
-import { store as editPostStore } from '../../store';
-import BlockManager from '../block-manager';
+import EnablePublishSidebarOption from './enable-publish-sidebar';
+
+const { PreferencesModalSection, PreferenceToggleControl } = unlock(
+	preferencesPrivateApis
+);
+const { PreferencesModal } = unlock( editorPrivateApis );
 
 export const PREFERENCES_MODAL_NAME = 'edit-post/preferences';
 
 export default function EditPostPreferencesModal() {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const { closeModal } = useDispatch( interfaceStore );
-	const [ isModalActive, showBlockBreadcrumbsOption ] = useSelect(
-		( select ) => {
-			const { getEditorSettings } = select( editorStore );
-			const { getEditorMode } = select( editPostStore );
-			const { get } = select( preferencesStore );
-			const modalActive = select( interfaceStore ).isModalActive(
-				PREFERENCES_MODAL_NAME
-			);
-			const mode = getEditorMode();
-			const isRichEditingEnabled = getEditorSettings().richEditingEnabled;
-			const isDistractionFreeEnabled = get( 'core', 'distractionFree' );
-			return [
-				modalActive,
-				! isDistractionFreeEnabled &&
-					isLargeViewport &&
-					isRichEditingEnabled &&
-					mode === 'visual',
-				isDistractionFreeEnabled,
-			];
-		},
-		[ isLargeViewport ]
-	);
-
-	const { closeGeneralSidebar } = useDispatch( editPostStore );
-	const { setIsListViewOpened, setIsInserterOpened } =
-		useDispatch( editorStore );
-	const { set: setPreference } = useDispatch( preferencesStore );
-
-	const toggleDistractionFree = () => {
-		setPreference( 'core', 'fixedToolbar', true );
-		setIsInserterOpened( false );
-		setIsListViewOpened( false );
-		closeGeneralSidebar();
-	};
+	const { isModalActive } = useSelect( ( select ) => {
+		const modalActive = select( interfaceStore ).isModalActive(
+			PREFERENCES_MODAL_NAME
+		);
+		return {
+			isModalActive: modalActive,
+		};
+	}, [] );
 
-	const turnOffDistractionFree = () => {
-		setPreference( 'core', 'distractionFree', false );
-	};
-
-	const sections = useMemo(
-		() => [
-			{
-				name: 'general',
-				tabLabel: __( 'General' ),
-				content: (
-					<>
-						{ isLargeViewport && (
-							<PreferencesModalSection
-								title={ __( 'Publishing' ) }
-							>
-								<EnablePublishSidebarOption
-									help={ __(
-										'Review settings, such as visibility and tags.'
-									) }
-									label={ __( 'Enable pre-publish checks' ) }
-								/>
-							</PreferencesModalSection>
-						) }
-						<PreferencesModalSection title={ __( 'Interface' ) }>
-							<EnableFeature
-								scope="core"
-								featureName="showListViewByDefault"
-								help={ __(
-									'Opens the block list view sidebar by default.'
-								) }
-								label={ __( 'Always open list view' ) }
-							/>
-							{ showBlockBreadcrumbsOption && (
-								<EnableFeature
-									scope="core"
-									featureName="showBlockBreadcrumbs"
-									help={ __(
-										'Display the block hierarchy trail at the bottom of the editor.'
-									) }
-									label={ __( 'Show block breadcrumbs' ) }
-								/>
-							) }
-							<EnableFeature
-								scope="core"
-								featureName="allowRightClickOverrides"
-								help={ __(
-									'Allows contextual list view menus via right-click, overriding browser defaults.'
-								) }
-								label={ __(
-									'Allow right-click contextual menus'
-								) }
-							/>
-						</PreferencesModalSection>
-						<PreferencesModalSection
-							title={ __( 'Document settings' ) }
-							description={ __(
-								'Select what settings are shown in the document panel.'
-							) }
-						>
-							<EnablePluginDocumentSettingPanelOption.Slot />
-							<PostTaxonomies
-								taxonomyWrapper={ ( content, taxonomy ) => (
-									<EnablePanelOption
-										label={ taxonomy.labels.menu_name }
-										panelName={ `taxonomy-panel-${ taxonomy.slug }` }
-									/>
-								) }
-							/>
-							<PostFeaturedImageCheck>
-								<EnablePanelOption
-									label={ __( 'Featured image' ) }
-									panelName="featured-image"
-								/>
-							</PostFeaturedImageCheck>
-							<PostExcerptCheck>
-								<EnablePanelOption
-									label={ __( 'Excerpt' ) }
-									panelName="post-excerpt"
-								/>
-							</PostExcerptCheck>
-							<PostTypeSupportCheck
-								supportKeys={ [ 'comments', 'trackbacks' ] }
-							>
-								<EnablePanelOption
-									label={ __( 'Discussion' ) }
-									panelName="discussion-panel"
-								/>
-							</PostTypeSupportCheck>
-							<PageAttributesCheck>
-								<EnablePanelOption
-									label={ __( 'Page attributes' ) }
-									panelName="page-attributes"
-								/>
-							</PageAttributesCheck>
-						</PreferencesModalSection>
-						<MetaBoxesSection title={ __( 'Advanced' ) } />
-					</>
-				),
-			},
-			{
-				name: 'appearance',
-				tabLabel: __( 'Appearance' ),
-				content: (
-					<PreferencesModalSection
-						title={ __( 'Appearance' ) }
-						description={ __(
-							'Customize the editor interface to suit your needs.'
-						) }
-					>
-						<EnableFeature
-							scope="core"
-							featureName="fixedToolbar"
-							onToggle={ turnOffDistractionFree }
+	const extraSections = {
+		general: (
+			<>
+				{ isLargeViewport && (
+					<PreferencesModalSection title={ __( 'Publishing' ) }>
+						<EnablePublishSidebarOption
 							help={ __(
-								'Access all block and document tools in a single place.'
+								'Review settings, such as visibility and tags.'
 							) }
-							label={ __( 'Top toolbar' ) }
-						/>
-						<EnableFeature
-							scope="core"
-							featureName="distractionFree"
-							onToggle={ toggleDistractionFree }
-							help={ __(
-								'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
-							) }
-							label={ __( 'Distraction free' ) }
-						/>
-						<EnableFeature
-							scope="core"
-							featureName="focusMode"
-							help={ __(
-								'Highlights the current block and fades other content.'
-							) }
-							label={ __( 'Spotlight mode' ) }
-						/>
-						<EnableFeature
-							featureName="themeStyles"
-							help={ __(
-								'Make the editor look like your theme.'
-							) }
-							label={ __( 'Use theme styles' ) }
+							label={ __( 'Enable pre-publish checks' ) }
 						/>
 					</PreferencesModalSection>
-				),
-			},
-			{
-				name: 'accessibility',
-				tabLabel: __( 'Accessibility' ),
-				content: (
-					<>
-						<PreferencesModalSection
-							title={ __( 'Navigation' ) }
-							description={ __(
-								'Optimize the editing experience for enhanced control.'
-							) }
-						>
-							<EnableFeature
-								scope="core"
-								featureName="keepCaretInsideBlock"
-								help={ __(
-									'Keeps the text cursor within the block boundaries, aiding users with screen readers by preventing unintentional cursor movement outside the block.'
-								) }
-								label={ __(
-									'Contain text cursor inside block'
-								) }
-							/>
-						</PreferencesModalSection>
-						<PreferencesModalSection title={ __( 'Interface' ) }>
-							<EnableFeature
-								scope="core"
-								featureName="showIconLabels"
-								label={ __( 'Show button text labels' ) }
-								help={ __(
-									'Show text instead of icons on buttons across the interface.'
-								) }
-							/>
-						</PreferencesModalSection>
-					</>
-				),
-			},
-			{
-				name: 'blocks',
-				tabLabel: __( 'Blocks' ),
-				content: (
-					<>
-						<PreferencesModalSection title={ __( 'Inserter' ) }>
-							<EnableFeature
-								scope="core"
-								featureName="mostUsedBlocks"
-								help={ __(
-									'Adds a category with the most frequently used blocks in the inserter.'
-								) }
-								label={ __( 'Show most used blocks' ) }
-							/>
-						</PreferencesModalSection>
-						<PreferencesModalSection
-							title={ __( 'Manage block visibility' ) }
-							description={ __(
-								"Disable blocks that you don't want to appear in the inserter. They can always be toggled back on later."
-							) }
-						>
-							<BlockManager />
-						</PreferencesModalSection>
-					</>
-				),
-			},
-		],
-		[ isLargeViewport, showBlockBreadcrumbsOption ]
-	);
+				) }
+				<MetaBoxesSection title={ __( 'Advanced' ) } />
+			</>
+		),
+		appearance: (
+			<PreferenceToggleControl
+				scope="core/edit-post"
+				featureName="themeStyles"
+				help={ __( 'Make the editor look like your theme.' ) }
+				label={ __( 'Use theme styles' ) }
+			/>
+		),
+	};
 
 	if ( ! isModalActive ) {
 		return null;
 	}
 
 	return (
-		<PreferencesModal closeModal={ closeModal }>
-			<PreferencesModalTabs sections={ sections } />
-		</PreferencesModal>
+		<PreferencesModal
+			extraSections={ extraSections }
+			isActive={ isModalActive }
+			onClose={ closeModal }
+		/>
 	);
 }

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

@@ -4,13 +4,17 @@
 import { __ } from '@wordpress/i18n';
 import { withSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
-import { PreferencesModalSection } from '@wordpress/interface';
+import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
-import { EnableCustomFieldsOption, EnablePanelOption } from './options';
+import EnableCustomFieldsOption from './enable-custom-fields';
+import EnablePanelOption from './enable-panel';
 import { store as editPostStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { PreferencesModalSection } = unlock( preferencesPrivateApis );
 
 export function MetaBoxesSection( {
 	areCustomFieldsRegistered,

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

@@ -54,7 +54,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
 
 <div>
   <div
-    class="interface-preferences-modal__option"
+    class="preference-base-option"
   >
     <div
       class="components-base-control components-toggle-control emotion-0 emotion-1"
@@ -160,7 +160,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
 
 <div>
   <div
-    class="interface-preferences-modal__option"
+    class="preference-base-option"
   >
     <div
       class="components-base-control components-toggle-control emotion-0 emotion-1"
@@ -256,7 +256,7 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
 
 <div>
   <div
-    class="interface-preferences-modal__option"
+    class="preference-base-option"
   >
     <div
       class="components-base-control components-toggle-control emotion-0 emotion-1"
@@ -363,7 +363,7 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fiel
 
 <div>
   <div
-    class="interface-preferences-modal__option"
+    class="preference-base-option"
   >
     <div
       class="components-base-control components-toggle-control emotion-0 emotion-1"

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

@@ -53,22 +53,22 @@ exports[`MetaBoxesSection renders a Custom Fields option 1`] = `
 }
 
 <fieldset
-  class="interface-preferences-modal__section"
+  class="preferences-modal__section"
 >
   <legend
-    class="interface-preferences-modal__section-legend"
+    class="preferences-modal__section-legend"
   >
     <h2
-      class="interface-preferences-modal__section-title"
+      class="preferences-modal__section-title"
     >
       Advanced panels
     </h2>
   </legend>
   <div
-    class="interface-preferences-modal__section-content"
+    class="preferences-modal__section-content"
   >
     <div
-      class="interface-preferences-modal__option"
+      class="preference-base-option"
     >
       <div
         class="components-base-control components-toggle-control emotion-0 emotion-1"
@@ -165,22 +165,22 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
 }
 
 <fieldset
-  class="interface-preferences-modal__section"
+  class="preferences-modal__section"
 >
   <legend
-    class="interface-preferences-modal__section-legend"
+    class="preferences-modal__section-legend"
   >
     <h2
-      class="interface-preferences-modal__section-title"
+      class="preferences-modal__section-title"
     >
       Advanced panels
     </h2>
   </legend>
   <div
-    class="interface-preferences-modal__section-content"
+    class="preferences-modal__section-content"
   >
     <div
-      class="interface-preferences-modal__option"
+      class="preference-base-option"
     >
       <div
         class="components-base-control components-toggle-control emotion-0 emotion-1"
@@ -221,7 +221,7 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
       </div>
     </div>
     <div
-      class="interface-preferences-modal__option"
+      class="preference-base-option"
     >
       <div
         class="components-base-control components-toggle-control emotion-0 emotion-1"
@@ -263,7 +263,7 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
       </div>
     </div>
     <div
-      class="interface-preferences-modal__option"
+      class="preference-base-option"
     >
       <div
         class="components-base-control components-toggle-control emotion-0 emotion-1"
@@ -361,22 +361,22 @@ exports[`MetaBoxesSection renders meta box options 1`] = `
 }
 
 <fieldset
-  class="interface-preferences-modal__section"
+  class="preferences-modal__section"
 >
   <legend
-    class="interface-preferences-modal__section-legend"
+    class="preferences-modal__section-legend"
   >
     <h2
-      class="interface-preferences-modal__section-title"
+      class="preferences-modal__section-title"
     >
       Advanced panels
     </h2>
   </legend>
   <div
-    class="interface-preferences-modal__section-content"
+    class="preferences-modal__section-content"
   >
     <div
-      class="interface-preferences-modal__option"
+      class="preference-base-option"
     >
       <div
         class="components-base-control components-toggle-control emotion-0 emotion-1"
@@ -418,7 +418,7 @@ exports[`MetaBoxesSection renders meta box options 1`] = `
       </div>
     </div>
     <div
-      class="interface-preferences-modal__option"
+      class="preference-base-option"
     >
       <div
         class="components-base-control components-toggle-control emotion-0 emotion-1"

package/src/components/sidebar/plugin-document-setting-panel/index.js

@@ -5,14 +5,18 @@ import { createSlotFill, PanelBody } from '@wordpress/components';
 import { usePluginContext } from '@wordpress/plugins';
 import { useDispatch, useSelect } from '@wordpress/data';
 import warning from '@wordpress/warning';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { EnablePluginDocumentSettingPanelOption } from '../../preferences-modal/options';
+import { unlock } from '../../../lock-unlock';
 
 const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' );
+const { EnablePluginDocumentSettingPanelOption } = unlock( editorPrivateApis );
 
 /**
  * Renders items below the Status & Availability panel in the Document Sidebar.