@wordpress/preferences 3.26.0 → 3.28.0

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

@@ -0,0 +1,178 @@
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+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,
+	Card,
+	CardHeader,
+	CardBody,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
+import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
+import { isRTL, __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+const PREFERENCES_MENU = 'preferences-menu';
+
+export default function PreferencesModalTabs( { sections } ) {
+	const isLargeViewport = useViewportMatch( 'medium' );
+
+	// 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 `Tabs` and `sectionsContentMap`
+	 * is used for easier access to active tab's content.
+	 */
+	const { tabs, sectionsContentMap } = useMemo( () => {
+		let mappedTabs = {
+			tabs: [],
+			sectionsContentMap: {},
+		};
+		if ( sections.length ) {
+			mappedTabs = sections.reduce(
+				( accumulator, { name, tabLabel: title, content } ) => {
+					accumulator.tabs.push( { name, title } );
+					accumulator.sectionsContentMap[ name ] = content;
+					return accumulator;
+				},
+				{ tabs: [], sectionsContentMap: {} }
+			);
+		}
+		return mappedTabs;
+	}, [ sections ] );
+
+	let modalContent;
+	// We render different components based on the viewport size.
+	if ( isLargeViewport ) {
+		modalContent = (
+			<div className="preferences__tabs">
+				<Tabs
+					initialTabId={
+						activeMenu !== PREFERENCES_MENU ? activeMenu : undefined
+					}
+					onSelect={ setActiveMenu }
+					orientation="vertical"
+				>
+					<Tabs.TabList className="preferences__tabs-tablist">
+						{ tabs.map( ( tab ) => (
+							<Tabs.Tab
+								tabId={ tab.name }
+								key={ tab.name }
+								className="preferences__tabs-tab"
+							>
+								{ tab.title }
+							</Tabs.Tab>
+						) ) }
+					</Tabs.TabList>
+					{ tabs.map( ( tab ) => (
+						<Tabs.TabPanel
+							tabId={ tab.name }
+							key={ tab.name }
+							className="preferences__tabs-tabpanel"
+							focusable={ false }
+						>
+							{ sectionsContentMap[ tab.name ] || null }
+						</Tabs.TabPanel>
+					) ) }
+				</Tabs>
+			</div>
+		);
+	} else {
+		modalContent = (
+			<NavigatorProvider
+				initialPath="/"
+				className="preferences__provider"
+			>
+				<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.length &&
+					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 modalContent;
+}

package/src/components/preferences-modal-tabs/style.scss

@@ -0,0 +1,48 @@
+$vertical-tabs-width: 160px;
+
+.preferences__tabs-tablist {
+	position: absolute;
+	top: $header-height + $grid-unit-30;
+	// Aligns button text instead of button box.
+	left: $grid-unit-20;
+	width: $vertical-tabs-width;
+
+}
+
+.preferences__tabs-tab {
+	border-radius: $radius-block-ui;
+	font-weight: 400;
+
+	&[aria-selected="true"] {
+		background: $gray-100;
+		box-shadow: none;
+		font-weight: 500;
+	}
+
+	&[aria-selected="true"]::after {
+		content: none;
+	}
+
+	&[role="tab"]:focus:not(:disabled) {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
+	}
+
+	&:focus-visible::before {
+		content: none;
+	}
+}
+
+.preferences__tabs-tabpanel {
+	padding-left: $grid-unit-30;
+	margin-left: $vertical-tabs-width;
+}
+
+@media (max-width: #{ ($break-medium - 1) }) {
+	// Keep the navigator component from overflowing the modal content area
+	// to ensure that sticky position elements stick where intended.
+	.preferences__provider {
+		height: 100%;
+	}
+}

package/src/index.js

@@ -1,2 +1,3 @@
 export * from './components';
 export { store } from './store';
+export * from './private-apis';

package/src/lock-unlock.js

@@ -0,0 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
+		'@wordpress/preferences'
+	);

package/src/private-apis.js

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import PreferenceBaseOption from './components/preference-base-option';
+import PreferenceToggleControl from './components/preference-toggle-control';
+import PreferencesModal from './components/preferences-modal';
+import PreferencesModalSection from './components/preferences-modal-section';
+import PreferencesModalTabs from './components/preferences-modal-tabs';
+import { lock } from './lock-unlock';
+
+export const privateApis = {};
+lock( privateApis, {
+	PreferenceBaseOption,
+	PreferenceToggleControl,
+	PreferencesModal,
+	PreferencesModalSection,
+	PreferencesModalTabs,
+} );

package/src/store/index.js

@@ -12,7 +12,7 @@ import * as selectors from './selectors';
 import { STORE_NAME } from './constants';
 
 /**
- * Store definition for the interface namespace.
+ * Store definition for the preferences namespace.
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
  *

package/src/store/selectors.js

@@ -1,3 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
+const withDeprecatedKeys = ( originalGet ) => ( state, scope, name ) => {
+	const settingsToMoveToCore = [
+		'allowRightClickOverrides',
+		'distractionFree',
+		'editorMode',
+		'fixedToolbar',
+		'focusMode',
+		'hiddenBlockTypes',
+		'inactivePanels',
+		'keepCaretInsideBlock',
+		'mostUsedBlocks',
+		'openPanels',
+		'showBlockBreadcrumbs',
+		'showIconLabels',
+		'showListViewByDefault',
+	];
+
+	if (
+		settingsToMoveToCore.includes( name ) &&
+		[ 'core/edit-post', 'core/edit-site' ].includes( scope )
+	) {
+		deprecated(
+			`wp.data.select( 'core/preferences' ).get( '${ scope }', '${ name }' )`,
+			{
+				since: '6.5',
+				alternative: `wp.data.select( 'core/preferences' ).get( 'core', '${ name }' )`,
+			}
+		);
+
+		return originalGet( state, 'core', name );
+	}
+
+	return originalGet( state, scope, name );
+};
+
 /**
  * Returns a boolean indicating whether a prefer is active for a particular
  * scope.
@@ -8,7 +48,7 @@
  *
  * @return {*} Is the feature enabled?
  */
-export function get( state, scope, name ) {
+export const get = withDeprecatedKeys( ( state, scope, name ) => {
 	const value = state.preferences[ scope ]?.[ name ];
 	return value !== undefined ? value : state.defaults[ scope ]?.[ name ];
-}
+} );

package/src/style.scss

@@ -0,0 +1,4 @@
+@import "./components/preference-base-option/style.scss";
+@import "./components/preferences-modal/style.scss";
+@import "./components/preferences-modal-tabs/style.scss";
+@import "./components/preferences-modal-section/style.scss";