@wordpress/edit-widgets 4.0.1 → 4.1.0-next.e230fbab09.0

package/build-style/style.css

@@ -304,7 +304,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   display: flex;
   flex-direction: column;
   overflow: auto;
-  z-index: 20;
+  z-index: 91;
 }
 
 .interface-interface-skeleton__secondary-sidebar,
@@ -447,6 +447,95 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   max-height: 24px;
 }
 
+@media (min-width: 600px) {
+  .interface-preferences-modal {
+    width: calc(100% - 32px);
+    height: calc(100% - 120px);
+  }
+}
+@media (min-width: 782px) {
+  .interface-preferences-modal {
+    width: 750px;
+  }
+}
+@media (min-width: 960px) {
+  .interface-preferences-modal {
+    height: 70%;
+  }
+}
+@media (max-width: 781px) {
+  .interface-preferences-modal .components-modal__content {
+    padding: 0;
+  }
+  .interface-preferences-modal .components-modal__content::before {
+    content: none;
+  }
+}
+
+.interface-preferences__tabs .components-tab-panel__tabs {
+  position: absolute;
+  top: 84px;
+  left: 16px;
+  width: 160px;
+}
+.interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item {
+  border-radius: 2px;
+  font-weight: 400;
+}
+.interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item.is-active {
+  background: #f0f0f0;
+  box-shadow: none;
+  font-weight: 500;
+}
+.interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item:focus:not(:disabled) {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.interface-preferences__tabs .components-tab-panel__tab-content {
+  padding-left: 24px;
+  margin-left: 160px;
+}
+
+@media (max-width: 781px) {
+  .interface-preferences__provider {
+    height: 100%;
+  }
+}
+.interface-preferences-modal__section {
+  margin: 0 0 2.5rem 0;
+}
+.interface-preferences-modal__section:last-child {
+  margin: 0;
+}
+
+.interface-preferences-modal__section-title {
+  font-size: 0.9rem;
+  font-weight: 600;
+  margin-top: 0;
+}
+
+.interface-preferences-modal__section-description {
+  margin: -8px 0 8px 0;
+  font-size: 12px;
+  font-style: normal;
+  color: #757575;
+}
+
+.interface-preferences-modal__option .components-base-control .components-base-control__field {
+  align-items: center;
+  display: flex;
+  margin-bottom: 0;
+}
+.interface-preferences-modal__option .components-base-control .components-base-control__field > label {
+  flex-grow: 1;
+  padding: 0.6rem 0 0.6rem 10px;
+}
+.interface-preferences-modal__option .components-base-control__help {
+  margin: -8px 0 8px 58px;
+  font-size: 12px;
+  font-style: normal;
+  color: #757575;
+}
+
 .wp-block[data-type="core/widget-area"] {
   max-width: 700px;
   margin-left: auto;
@@ -466,6 +555,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 .wp-block[data-type="core/widget-area"] .block-list-appender.wp-block {
   width: initial;
+  position: relative;
 }
 .wp-block[data-type="core/widget-area"] .editor-styles-wrapper .wp-block.wp-block.wp-block.wp-block.wp-block {
   max-width: 100%;
@@ -643,39 +733,6 @@ body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .c
   margin: 0 0 0 0.2rem;
 }
 
-.edit-widgets-more-menu {
-  margin-left: -4px;
-}
-.edit-widgets-more-menu .components-button {
-  width: auto;
-  padding: 0 2px;
-}
-@media (min-width: 600px) {
-  .edit-widgets-more-menu {
-    margin-left: 0;
-  }
-  .edit-widgets-more-menu .components-button {
-    padding: 0 4px;
-  }
-}
-
-.edit-widgets-more-menu__content .components-popover__content {
-  min-width: 280px;
-}
-@media (min-width: 480px) {
-  .edit-widgets-more-menu__content .components-popover__content {
-    width: auto;
-    max-width: 480px;
-  }
-}
-.edit-widgets-more-menu__content .components-popover__content .components-dropdown-menu__menu {
-  padding: 0;
-}
-
-.components-popover.edit-widgets-more-menu__content {
-  z-index: 99998;
-}
-
 .components-panel__header.edit-widgets-sidebar__panel-tabs {
   justify-content: flex-start;
   padding-left: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-widgets",
-	"version": "4.0.1",
+	"version": "4.1.0-next.e230fbab09.0",
 	"description": "Widgets Page module for WordPress..",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,33 +27,38 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/api-fetch": "^6.0.1",
-		"@wordpress/block-editor": "^8.1.2",
-		"@wordpress/block-library": "^7.0.1",
-		"@wordpress/blocks": "^11.2.1",
-		"@wordpress/components": "^19.4.1",
-		"@wordpress/compose": "^5.1.1",
-		"@wordpress/core-data": "^4.1.1",
-		"@wordpress/data": "^6.2.1",
-		"@wordpress/dom": "^3.3.1",
-		"@wordpress/element": "^4.1.1",
-		"@wordpress/hooks": "^3.3.1",
-		"@wordpress/i18n": "^4.3.1",
-		"@wordpress/icons": "^7.0.0",
-		"@wordpress/interface": "^4.2.2",
-		"@wordpress/keyboard-shortcuts": "^3.1.1",
-		"@wordpress/keycodes": "^3.3.1",
-		"@wordpress/media-utils": "^3.1.1",
-		"@wordpress/notices": "^3.3.1",
-		"@wordpress/plugins": "^4.1.2",
-		"@wordpress/reusable-blocks": "^3.1.2",
-		"@wordpress/url": "^3.4.1",
-		"@wordpress/widgets": "^2.1.2",
+		"@wordpress/api-fetch": "^6.1.0-next.e230fbab09.0",
+		"@wordpress/block-editor": "^8.3.0-next.e230fbab09.0",
+		"@wordpress/block-library": "^7.1.0-next.e230fbab09.0",
+		"@wordpress/blocks": "^11.3.0-next.e230fbab09.0",
+		"@wordpress/components": "^19.7.0-next.e230fbab09.0",
+		"@wordpress/compose": "^5.2.0-next.e230fbab09.0",
+		"@wordpress/core-data": "^4.2.0-next.e230fbab09.0",
+		"@wordpress/data": "^6.4.0-next.e230fbab09.0",
+		"@wordpress/dom": "^3.4.0-next.e230fbab09.0",
+		"@wordpress/element": "^4.3.0-next.e230fbab09.0",
+		"@wordpress/hooks": "^3.4.0-next.e230fbab09.0",
+		"@wordpress/i18n": "^4.4.0-next.e230fbab09.0",
+		"@wordpress/icons": "^7.1.0-next.e230fbab09.0",
+		"@wordpress/interface": "^4.3.0-next.e230fbab09.0",
+		"@wordpress/keyboard-shortcuts": "^3.2.0-next.e230fbab09.0",
+		"@wordpress/keycodes": "^3.4.0-next.e230fbab09.0",
+		"@wordpress/media-utils": "^3.2.0-next.e230fbab09.0",
+		"@wordpress/notices": "^3.4.0-next.e230fbab09.0",
+		"@wordpress/plugins": "^4.2.0-next.e230fbab09.0",
+		"@wordpress/preferences": "^1.0.0-prerelease",
+		"@wordpress/reusable-blocks": "^3.2.0-next.e230fbab09.0",
+		"@wordpress/url": "^3.5.0-next.e230fbab09.0",
+		"@wordpress/widgets": "^2.2.0-next.e230fbab09.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21"
 	},
+	"peerDependencies": {
+		"react": "^17.0.0",
+		"react-dom": "^17.0.0"
+	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "0f838547f37472e46e6d5a9d2e84b6c61f4bd3f0"
+	"gitHead": "308df03e6a96ded732f9c4e32471b1b4f8dea54a"
 }

package/src/blocks/widget-area/editor.scss

@@ -28,6 +28,7 @@ $panel-title-height: 48px;
 
 	.block-list-appender.wp-block {
 		width: initial;
+		position: relative;
 	}
 
 	// Override theme custom widths for blocks.

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/secondary-sidebar/list-view-sidebar.js

@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalListView as ListView,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { __experimentalListView as ListView } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import {
 	useFocusOnMount,
@@ -25,12 +22,6 @@ import { store as editWidgetsStore } from '../../store';
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editWidgetsStore );
 
-	const { clearSelectedBlock, selectBlock } = useDispatch( blockEditorStore );
-	async function selectEditorBlock( clientId ) {
-		await clearSelectedBlock();
-		selectBlock( clientId, -1 );
-	}
-
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
 	const headerFocusReturnRef = useFocusReturn();
 	const contentFocusReturnRef = useFocusReturn();
@@ -70,7 +61,6 @@ export default function ListViewSidebar() {
 				] ) }
 			>
 				<ListView
-					onSelect={ selectEditorBlock }
 					showNestedBlocks
 					__experimentalHideContainerBlockActions
 					__experimentalFeatures

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}
  */
@@ -25,7 +25,6 @@ const storeConfig = {
 	selectors,
 	resolvers,
 	actions,
-	__experimentalUseThunks: true,
 };
 
 /**
@@ -36,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");
-}