@elementor/editor-default-styles 4.3.0-1062 → 4.3.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-default-styles",
-  "version": "4.3.0-1062",
+  "version": "4.3.0-beta1",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,27 +39,27 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.3.0-1062",
-    "@elementor/editor-app-bar": "4.3.0-1062",
-    "@elementor/editor-controls": "4.3.0-1062",
-    "@elementor/editor-documents": "4.3.0-1062",
-    "@elementor/editor-editing-panel": "4.3.0-1062",
-    "@elementor/editor-elements": "4.3.0-1062",
-    "@elementor/editor-panels": "4.3.0-1062",
-    "@elementor/editor-props": "4.3.0-1062",
-    "@elementor/editor-responsive": "4.3.0-1062",
-    "@elementor/editor-styles": "4.3.0-1062",
-    "@elementor/editor-styles-repository": "4.3.0-1062",
-    "@elementor/editor-ui": "4.3.0-1062",
-    "@elementor/editor-v1-adapters": "4.3.0-1062",
-    "@elementor/http-client": "4.3.0-1062",
+    "@elementor/editor": "4.3.0-beta1",
+    "@elementor/editor-app-bar": "4.3.0-beta1",
+    "@elementor/editor-controls": "4.3.0-beta1",
+    "@elementor/editor-documents": "4.3.0-beta1",
+    "@elementor/editor-editing-panel": "4.3.0-beta1",
+    "@elementor/editor-elements": "4.3.0-beta1",
+    "@elementor/editor-panels": "4.3.0-beta1",
+    "@elementor/editor-props": "4.3.0-beta1",
+    "@elementor/editor-responsive": "4.3.0-beta1",
+    "@elementor/editor-styles": "4.3.0-beta1",
+    "@elementor/editor-styles-repository": "4.3.0-beta1",
+    "@elementor/editor-ui": "4.3.0-beta1",
+    "@elementor/editor-v1-adapters": "4.3.0-beta1",
+    "@elementor/http-client": "4.3.0-beta1",
     "@elementor/icons": "~1.75.1",
-    "@elementor/menus": "4.3.0-1062",
-    "@elementor/query": "4.3.0-1062",
-    "@elementor/session": "4.3.0-1062",
-    "@elementor/store": "4.3.0-1062",
+    "@elementor/menus": "4.3.0-beta1",
+    "@elementor/query": "4.3.0-beta1",
+    "@elementor/session": "4.3.0-beta1",
+    "@elementor/store": "4.3.0-beta1",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.3.0-1062",
+    "@elementor/utils": "4.3.0-beta1",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/capabilities.ts

@@ -0,0 +1,12 @@
+import { type UserCapabilities } from '@elementor/editor-styles-repository';
+
+export const UPDATE_DEFAULT_STYLES_CAPABILITY_KEY = 'manage_options';
+
+export const getCapabilities = (): UserCapabilities => {
+	return {
+		update: UPDATE_DEFAULT_STYLES_CAPABILITY_KEY,
+		create: UPDATE_DEFAULT_STYLES_CAPABILITY_KEY,
+		delete: UPDATE_DEFAULT_STYLES_CAPABILITY_KEY,
+		updateProps: UPDATE_DEFAULT_STYLES_CAPABILITY_KEY,
+	};
+};

package/src/components/default-styles-tab-embedded.tsx

@@ -19,6 +19,7 @@ import {
 import { type Element, type ElementType } from '@elementor/editor-elements';
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
 import { type StyleDefinitionID, type StyleDefinitionState } from '@elementor/editor-styles';
+import { useUserStylesCapability } from '@elementor/editor-styles-repository';
 import { SaveChangesDialog, ThemeProvider, useDialog } from '@elementor/editor-ui';
 import { controlActionsMenu } from '@elementor/menus';
 import { useMutation } from '@elementor/query';
@@ -41,6 +42,7 @@ import {
 	getDefaultActiveTag,
 	isAllowedDefaultStyleTag,
 } from '../allowed-tags';
+import { DEFAULT_STYLES_PROVIDER_KEY } from '../default-styles-provider';
 import { saveDefaultStyles } from '../save-default-styles';
 import { selectIsDirty, slice } from '../store';
 import { TagChip } from './tag-chip';
@@ -99,6 +101,8 @@ export function DefaultStylesTabEmbedded( { onRequestClose, onExposeCloseAttempt
 	const isDirty = useSelector( selectIsDirty );
 	const { mutateAsync: save, isPending: isSaving } = useSave();
 	const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
+	const { userCan } = useUserStylesCapability();
+	const canEdit = userCan( DEFAULT_STYLES_PROVIDER_KEY ).updateProps;
 
 	const setSelectedTag = ( tag: AllowedHtmlTag ) => {
 		setSelectedTagState( tag );
@@ -106,13 +110,13 @@ export function DefaultStylesTabEmbedded( { onRequestClose, onExposeCloseAttempt
 	};
 
 	const handleClosePanel = useCallback( () => {
-		if ( isDirty ) {
+		if ( canEdit && isDirty ) {
 			openSaveChangesDialog();
 			return;
 		}
 
 		void onRequestClose();
-	}, [ isDirty, onRequestClose, openSaveChangesDialog ] );
+	}, [ canEdit, isDirty, onRequestClose, openSaveChangesDialog ] );
 
 	useEffect( () => {
 		if ( ! onExposeCloseAttempt ) {
@@ -124,7 +128,7 @@ export function DefaultStylesTabEmbedded( { onRequestClose, onExposeCloseAttempt
 		return () => onExposeCloseAttempt( null );
 	}, [ onExposeCloseAttempt, handleClosePanel ] );
 
-	usePreventUnload( isDirty );
+	usePreventUnload( canEdit && isDirty );
 
 	const handleTagSelect = ( _selected: Option[], reason: AutocompleteChangeReason, option: Option ) => {
 		if ( reason !== 'selectOption' || ! option.value ) {
@@ -225,24 +229,26 @@ export function DefaultStylesTabEmbedded( { onRequestClose, onExposeCloseAttempt
 									</ClassesPropProvider>
 								</ElementProvider>
 							</Box>
-							<Box sx={ { flexShrink: 0, px: 2, py: 1.5 } }>
-								<Button
-									fullWidth
-									size="small"
-									color="global"
-									variant="contained"
-									onClick={ () => void save() }
-									disabled={ ! isDirty }
-									loading={ isSaving }
-								>
-									{ __( 'Save changes', 'elementor' ) }
-								</Button>
-							</Box>
+							{ canEdit ? (
+								<Box sx={ { flexShrink: 0, px: 2, py: 1.5 } }>
+									<Button
+										fullWidth
+										size="small"
+										color="global"
+										variant="contained"
+										onClick={ () => void save() }
+										disabled={ ! isDirty }
+										loading={ isSaving }
+									>
+										{ __( 'Save changes', 'elementor' ) }
+									</Button>
+								</Box>
+							) : null }
 						</Stack>
 					</ControlReplacementsProvider>
 				</ControlActionsProvider>
 
-				{ isSaveChangesDialogOpen && (
+				{ canEdit && isSaveChangesDialogOpen && (
 					<SaveChangesDialog>
 						<SaveChangesDialog.Title onClose={ closeSaveChangesDialog }>
 							{ __( 'You have unsaved changes', 'elementor' ) }

package/src/default-styles-provider.ts

@@ -8,6 +8,7 @@ import {
 import { __ } from '@wordpress/i18n';
 
 import { getAllowedDefaultStyleTags } from './allowed-tags';
+import { getCapabilities } from './capabilities';
 import { selectData, slice } from './store';
 
 export const DEFAULT_STYLES_PROVIDER_KEY = 'default-styles';
@@ -35,6 +36,7 @@ export const defaultStylesStylesProvider = createStylesProvider( {
 		plural: __( 'tags', 'elementor' ),
 	},
 	subscribe: ( cb ) => subscribeWithStates( cb ),
+	capabilities: getCapabilities(),
 	actions: {
 		all: () =>
 			getAllowedDefaultStyleTags().map( ( tag ) => {

package/src/init.ts

@@ -1,20 +1,13 @@
 import { injectIntoLogic } from '@elementor/editor';
 import { registerElementPanelDefaults } from '@elementor/editor-editing-panel';
 import { stylesRepository } from '@elementor/editor-styles-repository';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { __registerSlice as registerSlice } from '@elementor/store';
 
 import { PopulateStore } from './components/populate-store';
 import { defaultStylesStylesProvider } from './default-styles-provider';
 import { slice } from './store';
 
-const DEFAULT_STYLES_EXPERIMENT = 'e_default_styles';
-
 export function init() {
-	if ( ! isExperimentActive( DEFAULT_STYLES_EXPERIMENT ) ) {
-		return;
-	}
-
 	registerSlice( slice );
 
 	registerElementPanelDefaults( 'default-style', {

package/src/load-default-styles.ts

@@ -4,13 +4,15 @@ import { apiClient } from './api';
 import { slice } from './store';
 
 export async function loadDefaultStyles() {
-	const response = await apiClient.all();
+	try {
+		const response = await apiClient.all();
 
-	const items = response.data.data;
+		const items = response.data.data;
 
-	dispatch(
-		slice.actions.load( {
-			data: items,
-		} )
-	);
+		dispatch(
+			slice.actions.load( {
+				data: items,
+			} )
+		);
+	} catch {}
 }