@wordpress/edit-post 7.26.1-next.79a6196f.0 → 7.27.0

package/src/components/header/style.scss

@@ -69,7 +69,7 @@
 			margin-left: $grid-unit;
 		}
 
-		// Modified group borders
+		// Modified group borders.
 		.components-toolbar-group,
 		.components-toolbar {
 			border-right: none;
@@ -194,18 +194,27 @@
 }
 
 .show-icon-labels {
-
 	.edit-post-header__toolbar .block-editor-block-mover {
+		// Modified group borders.
 		border-left: none;
 
 		&::before {
 			content: "";
 			width: $border-width;
-			margin-top: $grid-unit + $grid-unit-05;
-			margin-bottom: $grid-unit + $grid-unit-05;
+			margin-top: $grid-unit-15;
+			margin-bottom: $grid-unit-15;
 			background-color: $gray-300;
 			margin-left: $grid-unit;
 		}
+
+		// Modified block movers horizontal separator.
+		.block-editor-block-mover__move-button-container {
+			&::before {
+				width: calc(100% - #{$grid-unit-30});
+				background: $gray-300;
+				left: calc(50% + 1px);
+			}
+		}
 	}
 }
 

package/src/components/meta-boxes/index.js

@@ -30,14 +30,16 @@ export default function MetaBoxes( { location } ) {
 		[ location ]
 	);
 
+	const hasMetaBoxes = !! metaBoxes?.length;
+
 	// When editor is ready, initialize postboxes (wp core script) and metabox
 	// saving. This initializes all meta box locations, not just this specific
 	// one.
 	useEffect( () => {
-		if ( isEditorReady && ! areMetaBoxesInitialized ) {
+		if ( isEditorReady && hasMetaBoxes && ! areMetaBoxesInitialized ) {
 			registry.dispatch( editPostStore ).initializeMetaBoxes();
 		}
-	}, [ isEditorReady, areMetaBoxesInitialized ] );
+	}, [ isEditorReady, hasMetaBoxes, areMetaBoxesInitialized ] );
 
 	if ( ! areMetaBoxesInitialized ) {
 		return null;

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

@@ -6,9 +6,16 @@ import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
-import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
+import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
 import { getPathAndQueryString } from '@wordpress/url';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { PreferenceBaseOption } = unlock( preferencesPrivateApis );
+
 function submitCustomFieldsForm() {
 	const customFieldsForm = document.getElementById(
 		'toggle-custom-fields-form'
@@ -53,7 +60,7 @@ export function EnableCustomFieldsOption( { label, areCustomFieldsEnabled } ) {
 	const [ isChecked, setIsChecked ] = useState( areCustomFieldsEnabled );
 
 	return (
-		<BaseOption
+		<PreferenceBaseOption
 			label={ label }
 			isChecked={ isChecked }
 			onChange={ setIsChecked }
@@ -61,7 +68,7 @@ export function EnableCustomFieldsOption( { label, areCustomFieldsEnabled } ) {
 			{ isChecked !== areCustomFieldsEnabled && (
 				<CustomFieldsConfirmation willEnable={ isChecked } />
 			) }
-		</BaseOption>
+		</PreferenceBaseOption>
 	);
 }
 

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

@@ -3,8 +3,15 @@
  */
 import { compose, ifCondition } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
 import { store as editorStore } from '@wordpress/editor';
+import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { PreferenceBaseOption } = unlock( preferencesPrivateApis );
 
 export default compose(
 	withSelect( ( select, { panelName } ) => {
@@ -20,4 +27,4 @@ export default compose(
 		onChange: () =>
 			dispatch( editorStore ).toggleEditorPanelEnabled( panelName ),
 	} ) )
-)( BaseOption );
+)( PreferenceBaseOption );

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

@@ -5,7 +5,14 @@ import { compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { ifViewportMatches } from '@wordpress/viewport';
 import { store as editorStore } from '@wordpress/editor';
-import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
+import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { PreferenceBaseOption } = unlock( preferencesPrivateApis );
 
 export default compose(
 	withSelect( ( select ) => ( {
@@ -22,4 +29,4 @@ export default compose(
 	// In < medium viewports we override this option and always show the publish sidebar.
 	// See the edit-post's header component for the specific logic.
 	ifViewportMatches( 'medium' )
-)( BaseOption );
+)( PreferenceBaseOption );

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.