Unify the preferences modal UI between post and site editor (#57639)

Co-authored-by: ntsekouras <ntsekouras@outlook.com>
WordPress · Jan 12, 2024 · 1b6948a · 1b6948a
1 parent 3c57278
commit 1b6948a
Show file tree

Hide file tree

Showing 60 changed files with 773 additions and 865 deletions.
diff --git a/lib/client-assets.php b/lib/client-assets.php
@@ -266,7 +266,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-block-editor',
 		gutenberg_url( 'build/block-editor/style.css' ),
-		array( 'wp-components' ),
+		array( 'wp-components', 'wp-preferences' ),
 		$version
 	);
 	$styles->add_data( 'wp-block-editor', 'rtl', 'replace' );
@@ -275,7 +275,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-editor',
 		gutenberg_url( 'build/editor/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-patterns', 'wp-reusable-blocks' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-patterns', 'wp-reusable-blocks', 'wp-preferences' ),
 		$version
 	);
 	$styles->add_data( 'wp-editor', 'rtl', 'replace' );
@@ -284,7 +284,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-edit-post',
 		gutenberg_url( 'build/edit-post/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-block-library', 'wp-commands' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-block-library', 'wp-commands', 'wp-preferences' ),
 		$version
 	);
 	$styles->add_data( 'wp-edit-post', 'rtl', 'replace' );
@@ -409,7 +409,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-edit-site',
 		gutenberg_url( 'build/edit-site/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-commands' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-commands', 'wp-preferences' ),
 		$version
 	);
 	$styles->add_data( 'wp-edit-site', 'rtl', 'replace' );
@@ -418,7 +418,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-edit-widgets',
 		gutenberg_url( 'build/edit-widgets/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-patterns', 'wp-reusable-blocks', 'wp-widgets' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-patterns', 'wp-reusable-blocks', 'wp-widgets', 'wp-preferences' ),
 		$version
 	);
 	$styles->add_data( 'wp-edit-widgets', 'rtl', 'replace' );
@@ -436,7 +436,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-customize-widgets',
 		gutenberg_url( 'build/customize-widgets/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-widgets' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-widgets', 'wp-preferences' ),
 		$version
 	);
 	$styles->add_data( 'wp-customize-widgets', 'rtl', 'replace' );
@@ -466,6 +466,15 @@ function gutenberg_register_packages_styles( $styles ) {
 		array( 'wp-components' )
 	);
 	$styles->add_data( 'wp-widgets', 'rtl', 'replace' );
+
+	gutenberg_override_style(
+		$styles,
+		'wp-preferences',
+		gutenberg_url( 'build/preferences/style.css' ),
+		array( 'wp-components' ),
+		$version
+	);
+	$styles->add_data( 'wp-preferences', 'rtl', 'replace' );
 }
 add_action( 'wp_default_styles', 'gutenberg_register_packages_styles' );
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -161,9 +161,9 @@ $z-layers: (
 	".components-resizable-box__corner-handle": 2,
 
 	// Make sure block manager sticky category titles appear above the options
-	".edit-post-block-manager__category-title": 1,
+	".editor-block-manager__category-title": 1,
 	// And block manager sticky disabled block count is higher still
-	".edit-post-block-manager__disabled-blocks-count": 2,
+	".editor-block-manager__disabled-blocks-count": 2,
 
 	// Needs to appear below other color circular picker related UI elements.
 	".components-circular-option-picker__option-wrapper::before": -1,

diff --git a/...ces-modal/options/enable-custom-fields.js → ...preferences-modal/enable-custom-fields.js b/...ces-modal/options/enable-custom-fields.js → ...preferences-modal/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,15 +60,15 @@ export function EnableCustomFieldsOption( { label, areCustomFieldsEnabled } ) {
 	const [ isChecked, setIsChecked ] = useState( areCustomFieldsEnabled );
 
 	return (
-		<BaseOption
+		<PreferenceBaseOption
 			label={ label }
 			isChecked={ isChecked }
 			onChange={ setIsChecked }
 		>
 			{ isChecked !== areCustomFieldsEnabled && (
 				<CustomFieldsConfirmation willEnable={ isChecked } />
 			) }
-		</BaseOption>
+		</PreferenceBaseOption>
 	);
 }
 

diff --git a/...preferences-modal/options/enable-panel.js → ...ponents/preferences-modal/enable-panel.js b/...preferences-modal/options/enable-panel.js → ...ponents/preferences-modal/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 );
diff --git a/...s-modal/options/enable-publish-sidebar.js → ...eferences-modal/enable-publish-sidebar.js b/...s-modal/options/enable-publish-sidebar.js → ...eferences-modal/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 );