@wordpress/edit-widgets 6.22.0 → 6.24.0

package/build-style/style.css

@@ -1,15 +1,57 @@
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
 /**
  * Colors
  */
 /**
  * Breakpoints & Media Queries
  */
+/**
+ * Colors
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Colors
+ */
 /**
  * SCSS Variables.
  *
@@ -17,15 +59,91 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Breakpoints & Media Queries
+ */
 /**
 *  Converts a hex value into the rgb equivalent.
 *
 * @param {string} hex - the hexadecimal value to convert
 * @return {string} comma separated rgb values
 */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Typography
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
 /**
  * Colors
  */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
 /**
  * Fonts & basic variables.
  */
@@ -61,6 +179,9 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+/**
+ * Breakpoints & Media Queries
+ */
 /**
 *  Converts a hex value into the rgb equivalent.
 *
@@ -99,6 +220,9 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 :root {
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: var(--wp-block-synced-color);
   --wp-admin-theme-color: #007cba;
   --wp-admin-theme-color--rgb: 0, 124, 186;
   --wp-admin-theme-color-darker-10: #006ba1;
@@ -106,9 +230,6 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
-  --wp-block-synced-color: #7a00df;
-  --wp-block-synced-color--rgb: 122, 0, 223;
-  --wp-bound-block-color: var(--wp-block-synced-color);
 }
 @media (min-resolution: 192dpi) {
   :root {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-widgets",
-	"version": "6.22.0",
+	"version": "6.24.0",
 	"description": "Widgets Page module for WordPress..",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,32 +29,32 @@
 	"wpScript": true,
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@wordpress/api-fetch": "^7.22.0",
-		"@wordpress/block-editor": "^14.17.0",
-		"@wordpress/block-library": "^9.22.0",
-		"@wordpress/blocks": "^14.11.0",
-		"@wordpress/components": "^29.8.0",
-		"@wordpress/compose": "^7.22.0",
-		"@wordpress/core-data": "^7.22.0",
-		"@wordpress/data": "^10.22.0",
-		"@wordpress/deprecated": "^4.22.0",
-		"@wordpress/dom": "^4.22.0",
-		"@wordpress/element": "^6.22.0",
-		"@wordpress/hooks": "^4.22.0",
-		"@wordpress/i18n": "^5.22.0",
-		"@wordpress/icons": "^10.22.0",
-		"@wordpress/interface": "^9.7.0",
-		"@wordpress/keyboard-shortcuts": "^5.22.0",
-		"@wordpress/keycodes": "^4.22.0",
-		"@wordpress/media-utils": "^5.22.0",
-		"@wordpress/notices": "^5.22.0",
-		"@wordpress/patterns": "^2.22.0",
-		"@wordpress/plugins": "^7.22.0",
-		"@wordpress/preferences": "^4.22.0",
-		"@wordpress/private-apis": "^1.22.0",
-		"@wordpress/reusable-blocks": "^5.22.0",
-		"@wordpress/url": "^4.22.0",
-		"@wordpress/widgets": "^4.22.0",
+		"@wordpress/api-fetch": "^7.24.0",
+		"@wordpress/block-editor": "^14.19.0",
+		"@wordpress/block-library": "^9.24.0",
+		"@wordpress/blocks": "^14.13.0",
+		"@wordpress/components": "^29.10.0",
+		"@wordpress/compose": "^7.24.0",
+		"@wordpress/core-data": "^7.24.0",
+		"@wordpress/data": "^10.24.0",
+		"@wordpress/deprecated": "^4.24.0",
+		"@wordpress/dom": "^4.24.0",
+		"@wordpress/element": "^6.24.0",
+		"@wordpress/hooks": "^4.24.0",
+		"@wordpress/i18n": "^5.24.0",
+		"@wordpress/icons": "^10.24.0",
+		"@wordpress/interface": "^9.9.0",
+		"@wordpress/keyboard-shortcuts": "^5.24.0",
+		"@wordpress/keycodes": "^4.24.0",
+		"@wordpress/media-utils": "^5.24.0",
+		"@wordpress/notices": "^5.24.0",
+		"@wordpress/patterns": "^2.24.0",
+		"@wordpress/plugins": "^7.24.0",
+		"@wordpress/preferences": "^4.24.0",
+		"@wordpress/private-apis": "^1.24.0",
+		"@wordpress/reusable-blocks": "^5.24.0",
+		"@wordpress/url": "^4.24.0",
+		"@wordpress/widgets": "^4.24.0",
 		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
@@ -64,5 +64,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "01a314d7e46a50101e328fdb11959c441e49372d"
+	"gitHead": "9c03d1458cae76792ae15e67b421205836bf4393"
 }

package/src/components/save-button/index.js

@@ -11,18 +11,26 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editWidgetsStore } from '../../store';
 
 function SaveButton() {
-	const { hasEditedWidgetAreaIds, isSaving } = useSelect( ( select ) => {
-		const { getEditedWidgetAreas, isSavingWidgetAreas } =
-			select( editWidgetsStore );
+	const { hasEditedWidgetAreaIds, isSaving, isWidgetSaveLocked } = useSelect(
+		( select ) => {
+			const {
+				getEditedWidgetAreas,
+				isSavingWidgetAreas,
+				isWidgetSavingLocked,
+			} = select( editWidgetsStore );
 
-		return {
-			hasEditedWidgetAreaIds: getEditedWidgetAreas()?.length > 0,
-			isSaving: isSavingWidgetAreas(),
-		};
-	}, [] );
+			return {
+				hasEditedWidgetAreaIds: getEditedWidgetAreas()?.length > 0,
+				isSaving: isSavingWidgetAreas(),
+				isWidgetSaveLocked: isWidgetSavingLocked(),
+			};
+		},
+		[]
+	);
 	const { saveEditedWidgetAreas } = useDispatch( editWidgetsStore );
 
-	const isDisabled = isSaving || ! hasEditedWidgetAreaIds;
+	const isDisabled =
+		isWidgetSaveLocked || isSaving || ! hasEditedWidgetAreaIds;
 
 	return (
 		<Button

package/src/components/secondary-sidebar/inserter-sidebar.js

@@ -2,10 +2,7 @@
  * WordPress dependencies
  */
 import { __experimentalLibrary as Library } from '@wordpress/block-editor';
-import {
-	useViewportMatch,
-	__experimentalUseDialog as useDialog,
-} from '@wordpress/compose';
+import { useViewportMatch } from '@wordpress/compose';
 import { useCallback, useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 
@@ -25,19 +22,10 @@ export default function InserterSidebar() {
 		return setIsInserterOpened( false );
 	}, [ setIsInserterOpened ] );
 
-	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
-		onClose: closeInserter,
-		focusOnMount: true,
-	} );
-
 	const libraryRef = useRef();
 
 	return (
-		<div
-			ref={ inserterDialogRef }
-			{ ...inserterDialogProps }
-			className="edit-widgets-layout__inserter-panel"
-		>
+		<div className="edit-widgets-layout__inserter-panel">
 			<div className="edit-widgets-layout__inserter-panel-content">
 				<Library
 					showInserterHelpPanel

package/src/store/actions.js

@@ -431,3 +431,61 @@ export const moveBlockToWidgetArea =
 				destinationIndex
 			);
 	};
+
+/**
+ * Returns an action object used to signal that widget saving is unlocked.
+ *
+ * @param {string} lockName The lock name.
+ *
+ * @example
+ * ```js
+ * import { store as widgetStore } from '@wordpress/edit-widgets';
+ * import { useDispatch } from '@wordpress/data';
+ *
+ * const ExampleComponent = () => {
+ * 	const { unlockWidgetSaving } = useDispatch( widgetStore );
+ * 	return (
+ * 		<Button onClick={ () => unlockWidgetSaving( 'lockName' ) }>
+ * 			{ __( 'Unlock Widget Saving' ) }
+ * 		</Button>
+ * 	);
+ * };
+ * ```
+ *
+ * @return {Object} Action object
+ */
+export function unlockWidgetSaving( lockName ) {
+	return {
+		type: 'UNLOCK_WIDGET_SAVING',
+		lockName,
+	};
+}
+
+/**
+ * Returns an action object used to signal that widget saving is locked.
+ *
+ * @param {string} lockName The lock name.
+ *
+ * @example
+ * ```js
+ * import { store as widgetStore } from '@wordpress/edit-widgets';
+ * import { useDispatch } from '@wordpress/data';
+ *
+ * const ExampleComponent = () => {
+ * 	const { lockWidgetSaving } = useDispatch( widgetStore );
+ * 	return (
+ * 		<Button onClick={ () => lockWidgetSaving( 'lockName' ) }>
+ * 			{ __( 'Lock Widget Saving' ) }
+ * 		</Button>
+ * 	);
+ * };
+ * ```
+ *
+ * @return {Object} Action object
+ */
+export function lockWidgetSaving( lockName ) {
+	return {
+		type: 'LOCK_WIDGET_SAVING',
+		lockName,
+	};
+}

package/src/store/reducer.js

@@ -90,10 +90,36 @@ export function inserterSidebarToggleRef( state = { current: null } ) {
 	return state;
 }
 
+/**
+ * Widget saving lock.
+ *
+ * When widget saving is locked, the widget cannot be updated.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function widgetSavingLock( state = {}, action ) {
+	switch ( action.type ) {
+		case 'LOCK_WIDGET_SAVING':
+			return { ...state, [ action.lockName ]: true };
+
+		case 'UNLOCK_WIDGET_SAVING': {
+			const { [ action.lockName ]: removedLockName, ...restState } =
+				state;
+			return restState;
+		}
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	blockInserterPanel,
 	inserterSidebarToggleRef,
 	listViewPanel,
 	listViewToggleRef,
 	widgetAreasOpenState,
+	widgetSavingLock,
 } );

package/src/store/selectors.js

@@ -311,3 +311,34 @@ export const canInsertBlockInWidgetArea = createRegistrySelector(
 export function isListViewOpened( state ) {
 	return state.listViewPanel;
 }
+
+/**
+ * Returns whether widget saving is locked.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @example
+ * ```jsx
+ * import { __ } from '@wordpress/i18n';
+ * import { store as widgetStore } from '@wordpress/edit-widgets';
+ * import { useSelect } from '@wordpress/data';
+ *
+ * const ExampleComponent = () => {
+ * 	const isSavingLocked = useSelect(
+ * 		( select ) => select( widgetStore ).isWidgetSavingLocked(),
+ * 		[]
+ * 	);
+ *
+ * 	return isSavingLocked ? (
+ * 		<p>{ __( 'Widget saving is locked' ) }</p>
+ * 	) : (
+ * 		<p>{ __( 'Widget saving is not locked' ) }</p>
+ * 	);
+ * };
+ * ```
+ *
+ * @return {boolean} Is locked.
+ */
+export function isWidgetSavingLocked( state ) {
+	return Object.keys( state.widgetSavingLock ).length > 0;
+}

package/src/store/test/reducer.js

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import deepFreeze from 'deep-freeze';
+
+/**
+ * Internal dependencies
+ */
+import { widgetSavingLock } from '../reducer';
+
+describe( 'state', () => {
+	describe( 'widgetSavingLock', () => {
+		it( 'returns empty object by default', () => {
+			const state = widgetSavingLock( undefined, {} );
+
+			expect( state ).toEqual( {} );
+		} );
+
+		it( 'returns correct widget saving locks when locks added and removed', () => {
+			let state = widgetSavingLock( undefined, {
+				type: 'LOCK_WIDGET_SAVING',
+				lockName: 'test-lock',
+			} );
+
+			expect( state ).toEqual( {
+				'test-lock': true,
+			} );
+
+			state = widgetSavingLock( deepFreeze( state ), {
+				type: 'LOCK_WIDGET_SAVING',
+				lockName: 'test-lock-2',
+			} );
+
+			expect( state ).toEqual( {
+				'test-lock': true,
+				'test-lock-2': true,
+			} );
+
+			state = widgetSavingLock( deepFreeze( state ), {
+				type: 'UNLOCK_WIDGET_SAVING',
+				lockName: 'test-lock',
+			} );
+
+			expect( state ).toEqual( {
+				'test-lock-2': true,
+			} );
+
+			state = widgetSavingLock( deepFreeze( state ), {
+				type: 'UNLOCK_WIDGET_SAVING',
+				lockName: 'test-lock-2',
+			} );
+
+			expect( state ).toEqual( {} );
+		} );
+	} );
+} );

package/src/store/test/selectors.js

@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import * as _selectors from '../selectors';
+
+const selectors = { ..._selectors };
+const { isWidgetSavingLocked } = selectors;
+
+describe( 'selectors', () => {
+	describe( 'isWidgetSavingLocked', () => {
+		it( 'should return true if the post has widgetSavingLocks', () => {
+			const state = {
+				widgetSavingLock: { example: true },
+				currentWidget: {},
+				saving: {},
+			};
+
+			expect( isWidgetSavingLocked( state ) ).toBe( true );
+		} );
+
+		it( 'should return false if the post has no widgetSavingLocks', () => {
+			const state = {
+				widgetSavingLock: {},
+				currentWidget: {},
+				saving: {},
+			};
+
+			expect( isWidgetSavingLocked( state ) ).toBe( false );
+		} );
+	} );
+} );