@elementor/editor-editing-panel 3.35.0-375 → 3.35.0-376

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "3.35.0-375",
+  "version": "3.35.0-376",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,27 +39,27 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.35.0-375",
-    "@elementor/editor-canvas": "3.35.0-375",
-    "@elementor/editor-controls": "3.35.0-375",
-    "@elementor/editor-documents": "3.35.0-375",
-    "@elementor/editor-elements": "3.35.0-375",
-    "@elementor/editor-interactions": "3.35.0-375",
-    "@elementor/editor-panels": "3.35.0-375",
-    "@elementor/editor-props": "3.35.0-375",
-    "@elementor/editor-responsive": "3.35.0-375",
-    "@elementor/editor-styles": "3.35.0-375",
-    "@elementor/editor-styles-repository": "3.35.0-375",
-    "@elementor/editor-ui": "3.35.0-375",
-    "@elementor/editor-v1-adapters": "3.35.0-375",
+    "@elementor/editor": "3.35.0-376",
+    "@elementor/editor-canvas": "3.35.0-376",
+    "@elementor/editor-controls": "3.35.0-376",
+    "@elementor/editor-documents": "3.35.0-376",
+    "@elementor/editor-elements": "3.35.0-376",
+    "@elementor/editor-interactions": "3.35.0-376",
+    "@elementor/editor-panels": "3.35.0-376",
+    "@elementor/editor-props": "3.35.0-376",
+    "@elementor/editor-responsive": "3.35.0-376",
+    "@elementor/editor-styles": "3.35.0-376",
+    "@elementor/editor-styles-repository": "3.35.0-376",
+    "@elementor/editor-ui": "3.35.0-376",
+    "@elementor/editor-v1-adapters": "3.35.0-376",
     "@elementor/icons": "^1.63.0",
-    "@elementor/locations": "3.35.0-375",
-    "@elementor/menus": "3.35.0-375",
-    "@elementor/schema": "3.35.0-375",
-    "@elementor/session": "3.35.0-375",
+    "@elementor/locations": "3.35.0-376",
+    "@elementor/menus": "3.35.0-376",
+    "@elementor/schema": "3.35.0-376",
+    "@elementor/session": "3.35.0-376",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-375",
-    "@elementor/wp-media": "3.35.0-375",
+    "@elementor/utils": "3.35.0-376",
+    "@elementor/wp-media": "3.35.0-376",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/promotions/custom-css.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { PromotionInfotip } from '@elementor/editor-ui';
+import { CrownFilledIcon } from '@elementor/icons';
+import { Chip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StyleTabSection } from '../style-tab-section';
+
+export const CustomCssSection = () => {
+	const [ showInfoTip, sethSowInfoTip ] = useState( false );
+
+	return (
+		<StyleTabSection
+			section={ {
+				name: 'Custom CSS',
+				title: __( 'Custom CSS', 'elementor' ),
+				action: (
+					<PromotionInfotip
+						title={ __( 'Custom CSS', 'elementor' ) }
+						content={ __(
+							'Add custom CSS to refine and enrich the appearance of any element on your site.',
+							'elementor'
+						) }
+						assetUrl="https://assets.elementor.com/packages/v1/images/custom-css-promotion.png"
+						ctaUrl="https://go.elementor.com/go-pro-style-custom-css/"
+						open={ showInfoTip }
+						setOpen={ sethSowInfoTip }
+					>
+						<Chip
+							size="tiny"
+							color="promotion"
+							variant="standard"
+							icon={ <CrownFilledIcon /> }
+							sx={ {
+								mr: 1,
+								'& .MuiChip-label': {
+									display: 'none',
+								},
+							} }
+							onClick={ () => sethSowInfoTip( true ) }
+						/>
+					</PromotionInfotip>
+				),
+			} }
+		/>
+	);
+};

package/src/components/promotions/init.tsx

@@ -0,0 +1,13 @@
+import { injectIntoStyleTab } from '../style-tab';
+import { CustomCssSection } from './custom-css';
+
+export const init = () => {
+	//Todo: Remove when v3.37 will released
+	if ( ! window.elementorPro ) {
+		injectIntoStyleTab( {
+			id: 'custom-css',
+			component: CustomCssSection,
+			options: { overwrite: true },
+		} );
+	}
+};

package/src/components/section.tsx

@@ -12,14 +12,18 @@ type Props = PropsWithChildren< {
 	defaultExpanded?: boolean;
 	titleEnd?: CollapsibleValue< ReactNode | string >;
 	unmountOnExit?: boolean;
+	action?: ReactNode;
 } >;
 
-export function Section( { title, children, defaultExpanded = false, titleEnd, unmountOnExit = true }: Props ) {
+export function Section( { title, children, defaultExpanded = false, titleEnd, unmountOnExit = true, action }: Props ) {
 	const [ isOpen, setIsOpen ] = useStateByElement( title, !! defaultExpanded );
 	const ref = useRef< HTMLElement >( null );
+	const isDisabled = !! action;
 
 	const handleClick = () => {
-		setIsOpen( ! isOpen );
+		if ( ! isDisabled ) {
+			setIsOpen( ! isOpen );
+		}
 	};
 
 	const id = useId();
@@ -43,7 +47,8 @@ export function Section( { title, children, defaultExpanded = false, titleEnd, u
 					/>
 					{ getCollapsibleValue( titleEnd, isOpen ) }
 				</Stack>
-				<CollapseIcon open={ isOpen } color="secondary" fontSize="tiny" />
+				{ action }
+				<CollapseIcon open={ isOpen } color="secondary" fontSize="tiny" disabled={ isDisabled } />
 			</ListItemButton>
 			<Collapse
 				id={ contentId }

package/src/components/style-tab-section.tsx

@@ -5,17 +5,18 @@ import { Section } from './section';
 import { getStylesInheritanceIndicators } from './style-tab-collapsible-content';
 
 type SectionType = {
-	component: () => React.JSX.Element;
+	component?: () => React.JSX.Element;
 	name: string;
 	title: string;
+	action?: React.ReactNode;
 };
 
 type Props = { section: SectionType; fields?: string[]; unmountOnExit?: boolean };
 
 export const StyleTabSection = ( { section, fields = [], unmountOnExit = true }: Props ) => {
-	const { component, name, title } = section;
+	const { component, name, title, action } = section;
 	const tabDefaults = useDefaultPanelSettings();
-	const SectionComponent = component;
+	const SectionComponent = component || ( () => <></> );
 	const isExpanded = tabDefaults.defaultSectionsExpanded.style?.includes( name );
 
 	return (
@@ -24,6 +25,7 @@ export const StyleTabSection = ( { section, fields = [], unmountOnExit = true }:
 			defaultExpanded={ isExpanded }
 			titleEnd={ getStylesInheritanceIndicators( fields ) }
 			unmountOnExit={ unmountOnExit }
+			action={ action }
 		>
 			<SectionComponent />
 		</Section>

package/src/init.ts

@@ -3,6 +3,7 @@ import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { blockCommand } from '@elementor/editor-v1-adapters';
 
 import { EditingPanelHooks } from './components/editing-panel-hooks';
+import { init as initPromotionsSections } from './components/promotions/init';
 import { registerElementControls } from './controls-registry/element-controls/registry';
 import { init as initDynamics } from './dynamics/init';
 import { panel } from './panel';
@@ -29,6 +30,8 @@ export function init() {
 	registerElementControls();
 
 	initResetStyleProps();
+
+	initPromotionsSections();
 }
 
 const blockV1Panel = () => {