← All changes | assets/js/editor-v4-opt-in.js +76 -52 4.2.0-beta1 → 3.35.0-dev2 View file →

		@@ -123,8 +123,9 @@
123	123	var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react"));
124	124	var _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ "../node_modules/@babel/runtime/helpers/extends.js"));
125	125	var _objectWithoutProperties2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutProperties */ "../node_modules/@babel/runtime/helpers/objectWithoutProperties.js"));
126	126	var _ui = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
	127	+var _icons = __webpack_require__(/*! @elementor/icons */ "@elementor/icons");
127	128	var _excluded = ["children"],
128	129	_excluded2 = ["children"],
129	130	_excluded3 = ["children"],
130	131	_excluded4 = ["children"],
		@@ -144,9 +145,9 @@
144	145	props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
145	146	return /*#__PURE__*/_react.default.createElement(_ui.Box, (0, _extends2.default)({
146	147	component: "ul",
147	148	sx: {
148		- listStyle: 'disc'
	149	+ my: 0
149	150	}
150	151	}, props), children);
151	152	};
152	153	ContentList.propTypes = {
		@@ -155,9 +156,13 @@
155	156	var ContentListItem = exports.ContentListItem = function ContentListItem(_ref3) {
156	157	var children = _ref3.children,
157	158	props = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
158	159	return /*#__PURE__*/_react.default.createElement(TextNode, (0, _extends2.default)({
159		- component: "li"
	160	+ component: "li",
	161	+ sx: {
	162	+ listStyle: 'disc',
	163	+ marginInlineStart: 3
	164	+ }
160	165	}, props), children);
161	166	};
162	167	ContentListItem.propTypes = {
163	168	children: PropTypes.node
		@@ -167,9 +172,12 @@
167	172	props = (0, _objectWithoutProperties2.default)(_ref4, _excluded4);
168	173	return /*#__PURE__*/_react.default.createElement(_ui.Box, (0, _extends2.default)({
169	174	component: "ul",
170	175	sx: {
171		- marginInlineStart: 2
	176	+ display: 'flex',
	177	+ flexDirection: 'column',
	178	+ gap: 0.5,
	179	+ my: 0
172	180	}
173	181	}, props), children);
174	182	};
175	183	AdvantagesList.propTypes = {
		@@ -180,12 +188,18 @@
180	188	props = (0, _objectWithoutProperties2.default)(_ref5, _excluded5);
181	189	return /*#__PURE__*/_react.default.createElement(TextNode, (0, _extends2.default)({
182	190	component: "li",
183	191	sx: {
	192	+ listStyle: 'none',
	193	+ marginInlineStart: 0,
184	194	lineHeight: '150%',
185		- listStyle: 'disc'
	195	+ display: 'flex',
	196	+ alignItems: 'flex-start',
	197	+ gap: 0.5
186	198	}
187		- }, props), children);
	199	+ }, props), /*#__PURE__*/_react.default.createElement(_icons.CheckIcon, {
	200	+ fontSize: "small"
	201	+ }), children);
188	202	};
189	203	AdvantagesListItem.propTypes = {
190	204	children: PropTypes.node
191	205	};
		@@ -262,9 +276,9 @@
262	276	open: true,
263	277	autoHideDuration: 4000,
264	278	anchorOrigin: {
265	279	vertical: 'bottom',
266		- horizontal: 'center'
	280	+ horizontal: 'right'
267	281	},
268	282	onClose: onClose
269	283	}, 'message' !== severity ? /*#__PURE__*/_react.default.createElement(_ui.Alert, {
270	284	variant: "filled",
		@@ -325,21 +339,26 @@
325	339	var _DialogHeader = _interopRequireDefault(__webpack_require__(/*! @elementor/ui/DialogHeader */ "@elementor/ui/DialogHeader"));
326	340	var _excluded = ["onClose", "onSubmit", "isEnrolled"];
327	341	function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
328	342	var i18n = {
329		- header: (0, _i18n.__)('Atomic Editor', 'elementor'),
	343	+ header: (0, _i18n.__)('Version 4', 'elementor'),
	344	+ chip: (0, _i18n.__)('Beta', 'elementor'),
330	345	checkboxText: (0, _i18n.__)('I’ve read and understood.', 'elementor'),
331	346	optIn: {
332		- titleText: (0, _i18n.__)('You are about to enable Atomic Editor features!', 'elementor'),
333		- // eslint-disable-next-line @wordpress/i18n-no-flanking-whitespace
334		- introText: (0, _i18n.__)('By activating, you’ll get access to the next generation of Elementor’s Editor. This is your chance to explore new capabilities and help shape the future of Elementor! ', 'elementor'),
335		- details: [(0, _i18n.__)('When you activate, you’ll also be activating Containers and Nested Elements. You can turn them back off by going to: WP Admin > Elementor > Settings > Features.', 'elementor')],
	347	+ titleText: (0, _i18n.__)('You are about to enable version 4 features!', 'elementor'),
	348	+ introText: (0, _i18n.__)('By activating, you’ll get early access to the next generation of Elementor’s Editor. This is your chance to explore new capabilities and help shape the future of Elementor! ', 'elementor'),
	349	+ notesHeader: (0, _i18n.__)(' Important notes:', 'elementor'),
	350	+ notes: {
	351	+ details: [(0, _i18n.__)('Features are still in development, but the beta is safe to use in production.', 'elementor'), (0, _i18n.__)('When you activate, you’ll also be activating Containers and Nested Elements. You can turn them back off by going to: WP Admin > Elementor > Settings > Features.', 'elementor')]
	352	+ },
336	353	activateButton: (0, _i18n.__)('Activate', 'elementor'),
337	354	cancelButton: (0, _i18n.__)('Cancel', 'elementor')
338	355	},
339	356	optOut: {
340		- titleText: (0, _i18n.__)('You\'re about to lose all content created with Atomic features', 'elementor'),
341		- details: [(0, _i18n.__)('By deactivating, you’ll lose all Atomic Elements, Classes and Variables. Any content you created with these features will no longer be available or appear on your site.', 'elementor'), (0, _i18n.__)('Containers and Nested Elements will stay in their current status.', 'elementor')],
	357	+ titleText: (0, _i18n.__)('You\'re about to lose all content created with version 4', 'elementor'),
	358	+ notes: {
	359	+ details: [(0, _i18n.__)('By deactivating, you’ll lose all Atomic Elements, Classes and Variables. Any content you created with these features will no longer be available or appear on your site.', 'elementor'), (0, _i18n.__)('Containers and Nested Elements will stay in their current status.', 'elementor')]
	360	+ },
342	361	activateButton: (0, _i18n.__)('Deactivate', 'elementor'),
343	362	cancelButton: (0, _i18n.__)('Cancel', 'elementor')
344	363	}
345	364	};
		@@ -364,35 +383,36 @@
364	383	};
365	384	var currentState = isEnrolled ? 'optOut' : 'optIn';
366	385	return /*#__PURE__*/_react.default.createElement(_ui.Dialog, (0, _extends2.default)({}, props, {
367	386	open: true,
368		- onClose: onClose,
369		- maxWidth: "md"
370		- }), /*#__PURE__*/_react.default.createElement(_DialogHeader.default, null, /*#__PURE__*/_react.default.createElement(_DialogHeaderGroup.default, null, /*#__PURE__*/_react.default.createElement(_ui.DialogTitle, null, i18n.header))), /*#__PURE__*/_react.default.createElement(_ui.DialogContent, {
	387	+ onClose: onClose
	388	+ }), /*#__PURE__*/_react.default.createElement(_DialogHeader.default, null, /*#__PURE__*/_react.default.createElement(_DialogHeaderGroup.default, null, /*#__PURE__*/_react.default.createElement(_ui.DialogTitle, null, i18n.header), /*#__PURE__*/_react.default.createElement(_ui.Chip, {
	389	+ label: i18n.chip,
	390	+ color: "secondary",
	391	+ variant: "filled",
	392	+ size: "small"
	393	+ }))), /*#__PURE__*/_react.default.createElement(_ui.DialogContent, {
371	394	dividers: true
372	395	}, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
373	396	gap: 2.5
374	397	}, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
375		- gap: 1.5,
376		- sx: {
377		- mx: 2,
378		- maxWidth: '550px'
379		- }
	398	+ gap: 1
380	399	}, /*#__PURE__*/_react.default.createElement(_optInContent.TextNode, {
381	400	align: "center",
382	401	variant: "h6"
383		- }, i18n[currentState].titleText), i18n[currentState].introText && /*#__PURE__*/_react.default.createElement(_optInContent.TextNode, {
	402	+ }, i18n[currentState].titleText), /*#__PURE__*/_react.default.createElement(_optInContent.TextNode, {
384	403	align: "center",
385		- variant: "body3"
386		- }, i18n[currentState].introText)), /*#__PURE__*/_react.default.createElement(_ui.Stack, null, /*#__PURE__*/_react.default.createElement(_optInContent.ContentList, {
387		- sx: {
388		- mx: 3,
389		- maxWidth: '550px'
390		- }
391		- }, i18n[currentState].details.map(function (entry, index) {
	404	+ variant: "body2"
	405	+ }, i18n[currentState].introText)), /*#__PURE__*/_react.default.createElement(_ui.Stack, {
	406	+ gap: 1
	407	+ }, /*#__PURE__*/_react.default.createElement(_optInContent.TextNode, {
	408	+ variant: "body2"
	409	+ }, i18n[currentState].notesHeader), /*#__PURE__*/_react.default.createElement(_optInContent.ContentList, null, /*#__PURE__*/_react.default.createElement(_optInContent.ContentListItem, {
	410	+ variant: "body2"
	411	+ }, i18n[currentState].notes.details[0]), i18n[currentState].notes.details.slice(1).map(function (entry, index) {
392	412	return /*#__PURE__*/_react.default.createElement(_optInContent.ContentListItem, {
393	413	key: index,
394		- variant: "body3"
	414	+ variant: "body2"
395	415	}, entry);
396	416	}))), /*#__PURE__*/_react.default.createElement(_ui.FormControlLabel, {
397	417	control: /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
398	418	checked: !!checked,
		@@ -459,11 +479,13 @@
459	479	};
460	480	var OPT_IN_MSG = 'e-editor-v4-opt-in-message';
461	481	var OPT_OUT_MSG = 'e-editor-v4-opt-out-message';
462	482	var i18n = {
463		- title: (0, _i18n.__)('Activate Atomic Editor features', 'elementor'),
464		- welcomeText: (0, _i18n.__)('The Atomic Editor presents a new generation of high-performance, flexible building blocks designed for less bloat and precise styling with a unified interface.', 'elementor'),
465		- advantages: [[(0, _i18n.__)('Combine legacy widgets & new elements', 'elementor'), (0, _i18n.__)('Your current and new workflows work together on the same page.', 'elementor')], [(0, _i18n.__)('Build reusable design systems', 'elementor'), (0, _i18n.__)('Classes, Variables and Components give you a clear path for scale.', 'elementor')], [(0, _i18n.__)('Consistent styling experience', 'elementor'), (0, _i18n.__)('A unified Style tab for all Atomic Elements with full control over responsive design.', 'elementor')], [(0, _i18n.__)('Unparalleled performance', 'elementor'), (0, _i18n.__)('Cleaner code and a lighter CSS footprint with single-div wrappers.', 'elementor')]],
	483	+ title: (0, _i18n.__)('The next generation of web creation', 'elementor'),
	484	+ chip: (0, _i18n.__)('Beta', 'elementor'),
	485	+ welcomeText: (0, _i18n.__)('Welcome to version 4 of Elementor\'s Editor. It’s faster, more flexible, and built on a fully atomic approach to structure & styling.', 'elementor'),
	486	+ advantagesHeader: (0, _i18n.__)('Here’s what’s inside the beta version:', 'elementor'),
	487	+ advantages: [(0, _i18n.__)('Unparalleled performance - Cleaner code & a lighter CSS footprint with single-div wrappers.', 'elementor'), (0, _i18n.__)('Professional tools at your fingertips - Variables, Classes and States.', 'elementor'), (0, _i18n.__)('Consistent styling experience - A unified Style tab for all atomic elements.', 'elementor'), (0, _i18n.__)('Fully responsive design - Customize any style property per screen.', 'elementor')],
466	488	andMore: (0, _i18n.__)('And much more!', 'elementor'),
467	489	readMore: (0, _i18n.__)('Learn more', 'elementor'),
468	490	feedback: (0, _i18n.__)('We’d love your feedback!', 'elementor'),
469	491	overToGithub: (0, _i18n.__)('Head over to Github', 'elementor'),
		@@ -471,14 +493,14 @@
471	493	image: (0, _i18n.__)('Editor V4', 'elementor'),
472	494	buttons: {
473	495	tryOut: (0, _i18n.__)('Try out the new experience', 'elementor'),
474	496	optIn: (0, _i18n.__)('Activate the new experience', 'elementor'),
475		- optOut: (0, _i18n.__)('Deactivate', 'elementor')
	497	+ optOut: (0, _i18n.__)('Deactivate V4', 'elementor')
476	498	},
477	499	messages: {
478	500	optInSuccess: (0, _i18n.__)('Welcome! You’ve got the newest version of the editor.', 'elementor'),
479	501	optOut: (0, _i18n.__)('You’ve deactivated the new Editor. Have feedback?', 'elementor'),
480		- error: (0, _i18n.__)('Ouch, there was a glitch. Try activating again soon.', 'elementor')
	502	+ error: (0, _i18n.__)('Ouch, there was a glitch. Try activating V4 again soon.', 'elementor')
481	503	}
482	504	};
483	505	var optInLinks = {
484	506	feedbackUrl: 'https://go.elementor.com/wp-dash-opt-in-v4-feedback/',
		@@ -588,19 +610,30 @@
588	610	}
589	611	}, /*#__PURE__*/_react.default.createElement(_optInContent.TextNode, {
590	612	variant: "h4",
591	613	width: "fit-content"
592		- }, /*#__PURE__*/_react.default.createElement("span", null, i18n.title)), /*#__PURE__*/_react.default.createElement(_ui.Stack, {
	614	+ }, /*#__PURE__*/_react.default.createElement("span", null, i18n.title), /*#__PURE__*/_react.default.createElement(_ui.Chip, {
	615	+ size: "small",
	616	+ color: "secondary",
	617	+ variant: "filled",
	618	+ label: i18n.chip,
	619	+ sx: {
	620	+ verticalAlign: 'baseline',
	621	+ transform: 'translateY(-4px)',
	622	+ ml: 1
	623	+ }
	624	+ })), /*#__PURE__*/_react.default.createElement(_ui.Stack, {
593	625	direction: "column",
594		- gap: 1
595		- }, /*#__PURE__*/_react.default.createElement(_ui.Box, null, /*#__PURE__*/_react.default.createElement(_optInContent.TextNode, null, i18n.welcomeText)), /*#__PURE__*/_react.default.createElement(_ui.Box, null, /*#__PURE__*/_react.default.createElement(_optInContent.AdvantagesList, {
	626	+ gap: 3
	627	+ }, /*#__PURE__*/_react.default.createElement(_ui.Box, null, /*#__PURE__*/_react.default.createElement(_optInContent.TextNode, null, i18n.welcomeText)), /*#__PURE__*/_react.default.createElement(_ui.Box, null, /*#__PURE__*/_react.default.createElement(_optInContent.TextNode, {
	628	+ variant: "subtitle1",
596	629	sx: {
597		- gap: 0.5
	630	+ mb: 1.5
598	631	}
599		- }, i18n.advantages.map(function (entry, i) {
	632	+ }, i18n.advantagesHeader), /*#__PURE__*/_react.default.createElement(_optInContent.AdvantagesList, null, i18n.advantages.map(function (entry, i) {
600	633	return /*#__PURE__*/_react.default.createElement(_optInContent.AdvantagesListItem, {
601	634	key: i
602		- }, /*#__PURE__*/_react.default.createElement("b", null, entry[0]), " - ", entry[1]);
	635	+ }, entry);
603	636	}), /*#__PURE__*/_react.default.createElement(_optInContent.AdvantagesListItem, {
604	637	key: i18n.advantages.length
605	638	}, i18n.andMore, " ", /*#__PURE__*/_react.default.createElement(_ui.Link, {
606	639	color: "text.primary",
		@@ -694,18 +727,9 @@
694	727	isEnrolled: isEnrolled
695	728	}), optInMessage && /*#__PURE__*/_react.default.createElement(_optInMessage.Message, {
696	729	onClose: function onClose() {
697	730	return setOptInMessage('');
698		- },
699		- action: /*#__PURE__*/_react.default.createElement(_ui.Link, {
700		- href: optInLinks.tryOutUrl,
701		- color: "#FFFFFF",
702		- sx: {
703		- cursor: 'pointer',
704		- textDecoration: 'none',
705		- pl: 3
706		- }
707		- }, i18n.buttons.tryOut)
	731	+ }
708	732	}, optInMessage), optOutMessage && /*#__PURE__*/_react.default.createElement(_optInMessage.Message, {
709	733	onClose: function onClose() {
710	734	return setOptOutMessage('');
711	735	},
		@@ -711,9 +735,9 @@
711	735	},
712	736	action: /*#__PURE__*/_react.default.createElement(_ui.Link, {
713	737	href: optInLinks.feedbackUrl,
714	738	target: "_blank",
715		- color: "#FFFFFF",
	739	+ color: "inherit",
716	740	sx: {
717	741	cursor: 'pointer',
718	742	textDecoration: 'none',
719	743	pl: 3