@wordpress/edit-widgets 4.0.2 → 4.1.0

package/src/components/header/index.js

@@ -51,7 +51,7 @@ function Header() {
 	const { selectBlock } = useDispatch( blockEditorStore );
 	const handleClick = () => {
 		if ( isInserterOpen ) {
-			// Focusing the inserter button closes the inserter popover
+			// Focusing the inserter button closes the inserter popover.
 			setIsInserterOpened( false );
 		} else {
 			if ( ! isLastSelectedWidgetAreaOpen ) {

package/src/components/keyboard-shortcuts/index.js

@@ -38,7 +38,7 @@ function KeyboardShortcuts() {
 }
 
 function KeyboardShortcutsRegister() {
-	// Registering the shortcuts
+	// Registering the shortcuts.
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	useEffect( () => {
 		registerShortcut( {

package/src/components/layout/interface.js

@@ -12,6 +12,7 @@ import {
 } from '@wordpress/interface';
 import { __ } from '@wordpress/i18n';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -54,9 +55,10 @@ function Interface( { blockEditorSettings } ) {
 			).getActiveComplementaryArea( editWidgetsStore.name ),
 			isInserterOpened: !! select( editWidgetsStore ).isInserterOpened(),
 			isListViewOpened: !! select( editWidgetsStore ).isListViewOpened(),
-			hasBlockBreadCrumbsEnabled: select(
-				interfaceStore
-			).isFeatureActive( 'core/edit-widgets', 'showBlockBreadcrumbs' ),
+			hasBlockBreadCrumbsEnabled: !! select( preferencesStore ).get(
+				'core/edit-widgets',
+				'showBlockBreadcrumbs'
+			),
 			previousShortcut: select(
 				keyboardShortcutsStore
 			).getAllShortcutKeyCombinations(

package/src/components/more-menu/index.js

@@ -5,7 +5,8 @@ import { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import { external } from '@wordpress/icons';
-import { MoreMenuDropdown, MoreMenuFeatureToggle } from '@wordpress/interface';
+import { MoreMenuDropdown } from '@wordpress/interface';
+import { PreferenceToggleMenuItem } from '@wordpress/preferences';
 import { displayShortcut } from '@wordpress/keycodes';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { useViewportMatch } from '@wordpress/compose';
@@ -38,9 +39,9 @@ export default function MoreMenu() {
 					<>
 						{ isLargeViewport && (
 							<MenuGroup label={ _x( 'View', 'noun' ) }>
-								<MoreMenuFeatureToggle
+								<PreferenceToggleMenuItem
 									scope="core/edit-widgets"
-									feature="fixedToolbar"
+									name="fixedToolbar"
 									label={ __( 'Top toolbar' ) }
 									info={ __(
 										'Access all block and document tools in a single place'
@@ -63,9 +64,9 @@ export default function MoreMenu() {
 							>
 								{ __( 'Keyboard shortcuts' ) }
 							</MenuItem>
-							<MoreMenuFeatureToggle
+							<PreferenceToggleMenuItem
 								scope="core/edit-widgets"
-								feature="welcomeGuide"
+								name="welcomeGuide"
 								label={ __( 'Welcome Guide' ) }
 							/>
 							<MenuItem
@@ -90,9 +91,9 @@ export default function MoreMenu() {
 							/>
 						</MenuGroup>
 						<MenuGroup label={ __( 'Preferences' ) }>
-							<MoreMenuFeatureToggle
+							<PreferenceToggleMenuItem
 								scope="core/edit-widgets"
-								feature="keepCaretInsideBlock"
+								name="keepCaretInsideBlock"
 								label={ __(
 									'Contain text cursor inside block'
 								) }
@@ -106,18 +107,18 @@ export default function MoreMenu() {
 									'Contain text cursor inside block deactivated'
 								) }
 							/>
-							<MoreMenuFeatureToggle
+							<PreferenceToggleMenuItem
 								scope="core/edit-widgets"
-								feature="themeStyles"
+								name="themeStyles"
 								info={ __(
 									'Make the editor look like your theme.'
 								) }
 								label={ __( 'Use theme styles' ) }
 							/>
 							{ isLargeViewport && (
-								<MoreMenuFeatureToggle
+								<PreferenceToggleMenuItem
 									scope="core/edit-widgets"
-									feature="showBlockBreadcrumbs"
+									name="showBlockBreadcrumbs"
 									label={ __( 'Display block breadcrumbs' ) }
 									info={ __(
 										'Shows block breadcrumbs at the bottom of the editor.'

package/src/components/welcome-guide/index.js

@@ -5,7 +5,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { ExternalLink, Guide } from '@wordpress/components';
 import { __, sprintf, _n } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
-import { store as interfaceStore } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -15,14 +15,14 @@ import { store as editWidgetsStore } from '../../store';
 export default function WelcomeGuide() {
 	const isActive = useSelect(
 		( select ) =>
-			select( interfaceStore ).isFeatureActive(
+			!! select( preferencesStore ).get(
 				'core/edit-widgets',
 				'welcomeGuide'
 			),
 		[]
 	);
 
-	const { toggleFeature } = useDispatch( interfaceStore );
+	const { toggle } = useDispatch( preferencesStore );
 
 	const widgetAreas = useSelect(
 		( select ) =>
@@ -52,9 +52,7 @@ export default function WelcomeGuide() {
 			className="edit-widgets-welcome-guide"
 			contentLabel={ __( 'Welcome to block Widgets' ) }
 			finishButtonText={ __( 'Get started' ) }
-			onFinish={ () =>
-				toggleFeature( 'core/edit-widgets', 'welcomeGuide' )
-			}
+			onFinish={ () => toggle( 'core/edit-widgets', 'welcomeGuide' ) }
 			pages={ [
 				{
 					image: (

package/src/components/widget-areas-block-editor-content/index.js

@@ -11,7 +11,7 @@ import {
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
-import { store as interfaceStore } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -24,7 +24,7 @@ export default function WidgetAreasBlockEditorContent( {
 } ) {
 	const hasThemeStyles = useSelect(
 		( select ) =>
-			select( interfaceStore ).isFeatureActive(
+			!! select( preferencesStore ).get(
 				'core/edit-widgets',
 				'themeStyles'
 			),

package/src/components/widget-areas-block-editor-provider/index.js

@@ -16,8 +16,8 @@ import {
 	CopyHandler,
 } from '@wordpress/block-editor';
 import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
-import { store as interfaceStore } from '@wordpress/interface';
 import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -50,11 +50,11 @@ export default function WidgetAreasBlockEditorProvider( {
 			reusableBlocks: ALLOW_REUSABLE_BLOCKS
 				? select( coreStore ).getEntityRecords( 'postType', 'wp_block' )
 				: [],
-			isFixedToolbarActive: select( interfaceStore ).isFeatureActive(
+			isFixedToolbarActive: !! select( preferencesStore ).get(
 				'core/edit-widgets',
 				'fixedToolbar'
 			),
-			keepCaretInsideBlock: select( interfaceStore ).isFeatureActive(
+			keepCaretInsideBlock: !! select( preferencesStore ).get(
 				'core/edit-widgets',
 				'keepCaretInsideBlock'
 			),

package/src/index.js

@@ -20,7 +20,7 @@ import {
 	registerLegacyWidgetVariations,
 	registerWidgetGroupBlock,
 } from '@wordpress/widgets';
-import { store as interfaceStore } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -78,7 +78,7 @@ export function initialize( id, settings ) {
 		);
 	} );
 
-	dispatch( interfaceStore ).setFeatureDefaults( 'core/edit-widgets', {
+	dispatch( preferencesStore ).setDefaults( 'core/edit-widgets', {
 		fixedToolbar: false,
 		welcomeGuide: true,
 		showBlockBreadcrumbs: true,

package/src/store/actions.js

@@ -95,7 +95,7 @@ export const saveWidgetAreas = ( widgetAreas ) => async ( {
 			await dispatch.saveWidgetArea( widgetArea.id );
 		}
 	} finally {
-		// saveEditedEntityRecord resets the resolution status, let's fix it manually
+		// saveEditedEntityRecord resets the resolution status, let's fix it manually.
 		await registry
 			.dispatch( coreStore )
 			.finishResolution(

package/src/store/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import apiFetch from '@wordpress/api-fetch';
-import { createReduxStore, registerStore } from '@wordpress/data';
+import { createReduxStore, register } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -16,7 +16,7 @@ import { STORE_NAME } from './constants';
 /**
  * Block editor data store configuration.
  *
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#registerStore
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#register
  *
  * @type {Object}
  */
@@ -35,10 +35,7 @@ const storeConfig = {
  * @type {Object}
  */
 export const store = createReduxStore( STORE_NAME, storeConfig );
-
-// Once we build a more generic persistence plugin that works across types of stores
-// we'd be able to replace this with a register call.
-registerStore( STORE_NAME, storeConfig );
+register( store );
 
 // This package uses a few in-memory post types as wrappers for convenience.
 // This middleware prevents any network requests related to these types as they are

package/src/style.scss

@@ -4,7 +4,6 @@
 @import "./components/error-boundary/style.scss";
 @import "./components/header/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
-@import "./components/more-menu/style.scss";
 @import "./components/sidebar/style.scss";
 @import "./components/notices/style.scss";
 @import "./components/layout/style.scss";

package/src/components/more-menu/style.scss

@@ -1,35 +0,0 @@
-.edit-widgets-more-menu {
-	margin-left: -4px;
-
-	// the padding and margin of the more menu is intentionally non-standard
-	.components-button {
-		width: auto;
-		padding: 0 2px;
-	}
-
-	@include break-small() {
-		margin-left: 0;
-
-		.components-button {
-			padding: 0 4px;
-		}
-	}
-}
-
-.edit-widgets-more-menu__content .components-popover__content {
-	min-width: 280px;
-
-	// Let the menu scale to fit items.
-	@include break-mobile() {
-		width: auto;
-		max-width: $break-mobile;
-	}
-
-	.components-dropdown-menu__menu {
-		padding: 0;
-	}
-}
-
-.components-popover.edit-widgets-more-menu__content {
-	z-index: z-index(".components-popover.edit-widgets-more-menu__content");
-}