← All changes | assets/js/editor-v4-opt-in.js +94 -53 4.1.0 → 3.34.0-beta1 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,30 @@
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.__)('Editor V4', 'elementor'),
	344	+ chip: (0, _i18n.__)('Alpha', '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		- 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'),
334		- 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 Editor V4 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	+ alphaPrefix: (0, _i18n.__)('Editor V4 is currently in alpha, ', 'elementor'),
	352	+ details: [(0, _i18n.__)('and development is still in progress. Do not use it on live sites - use a staging or development environment instead.', 'elementor'), (0, _i18n.__)('When you activate Editor V4, you’ll also be activating Containers, the Top Bar, and Nested Elements. You can turn them back off by going to WP Admin > Elementor > Settings > Features.', 'elementor')]
	353	+ },
335	354	activateButton: (0, _i18n.__)('Activate', 'elementor'),
336	355	cancelButton: (0, _i18n.__)('Cancel', 'elementor')
337	356	},
338	357	optOut: {
339		- titleText: (0, _i18n.__)('You\'re about to lose all content created with Atomic features', 'elementor'),
340		- 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')],
341		- activateButton: (0, _i18n.__)('Deactivate', 'elementor'),
	358	+ titleText: (0, _i18n.__)('You’re deactivating Editor V4', 'elementor'),
	359	+ introText: (0, _i18n.__)('We hope you enjoyed testing and building with these new features.', 'elementor'),
	360	+ notesHeader: (0, _i18n.__)('Keep in mind:', 'elementor'),
	361	+ notes: {
	362	+ details: [(0, _i18n.__)('By deactivating, you’ll lose all Editor V4 features, and any content you created with V4-specific features will no longer be available or appear on your site.', 'elementor'), (0, _i18n.__)('Containers, the Top Bar, and Nested Elements will stay in their current status.', 'elementor')]
	363	+ },
	364	+ activateButton: (0, _i18n.__)('Deactivate V4', 'elementor'),
342	365	cancelButton: (0, _i18n.__)('Cancel', 'elementor')
343	366	}
344	367	};
345	368	var Terms = exports.Terms = function Terms(_ref) {
		@@ -363,35 +386,39 @@
363	386	};
364	387	var currentState = isEnrolled ? 'optOut' : 'optIn';
365	388	return /*#__PURE__*/_react.default.createElement(_ui.Dialog, (0, _extends2.default)({}, props, {
366	389	open: true,
367		- onClose: onClose,
368		- maxWidth: "md"
369		- }), /*#__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, {
	390	+ onClose: onClose
	391	+ }), /*#__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, {
	392	+ label: i18n.chip,
	393	+ color: "secondary",
	394	+ variant: "filled",
	395	+ size: "small"
	396	+ }))), /*#__PURE__*/_react.default.createElement(_ui.DialogContent, {
370	397	dividers: true
371	398	}, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
372	399	gap: 2.5
373	400	}, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
374		- gap: 1.5,
375		- sx: {
376		- mx: 2,
377		- maxWidth: '550px'
378		- }
	401	+ gap: 1
379	402	}, /*#__PURE__*/_react.default.createElement(_optInContent.TextNode, {
380	403	align: "center",
381	404	variant: "h6"
382		- }, i18n[currentState].titleText), i18n[currentState].introText && /*#__PURE__*/_react.default.createElement(_optInContent.TextNode, {
	405	+ }, i18n[currentState].titleText), /*#__PURE__*/_react.default.createElement(_optInContent.TextNode, {
383	406	align: "center",
384		- variant: "body3"
385		- }, i18n[currentState].introText)), /*#__PURE__*/_react.default.createElement(_ui.Stack, null, /*#__PURE__*/_react.default.createElement(_optInContent.ContentList, {
386		- sx: {
387		- mx: 3,
388		- maxWidth: '550px'
389		- }
390		- }, i18n[currentState].details.map(function (entry, index) {
	407	+ variant: "body2"
	408	+ }, i18n[currentState].introText)), /*#__PURE__*/_react.default.createElement(_ui.Stack, {
	409	+ gap: 1
	410	+ }, /*#__PURE__*/_react.default.createElement(_optInContent.TextNode, {
	411	+ variant: "body2"
	412	+ }, i18n[currentState].notesHeader), /*#__PURE__*/_react.default.createElement(_optInContent.ContentList, null, /*#__PURE__*/_react.default.createElement(_optInContent.ContentListItem, {
	413	+ variant: "body2"
	414	+ }, !isEnrolled && /*#__PURE__*/_react.default.createElement(_optInContent.TextNode, {
	415	+ variant: "subtitle2",
	416	+ component: "span"
	417	+ }, i18n.optIn.notes.alphaPrefix), i18n[currentState].notes.details[0]), i18n[currentState].notes.details.slice(1).map(function (entry, index) {
391	418	return /*#__PURE__*/_react.default.createElement(_optInContent.ContentListItem, {
392	419	key: index,
393		- variant: "body3"
	420	+ variant: "body2"
394	421	}, entry);
395	422	}))), /*#__PURE__*/_react.default.createElement(_ui.FormControlLabel, {
396	423	control: /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
397	424	checked: !!checked,
		@@ -439,8 +466,9 @@
439	466	var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
440	467	var _defineProperty2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "../node_modules/@babel/runtime/helpers/defineProperty.js"));
441	468	var _slicedToArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "../node_modules/@babel/runtime/helpers/slicedToArray.js"));
442	469	var _ui = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
	470	+var _icons = __webpack_require__(/*! @elementor/icons */ "@elementor/icons");
443	471	var _i18n = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
444	472	var _optInContent = __webpack_require__(/*! ./opt-in-content */ "../modules/atomic-opt-in/assets/js/opt-in-page/opt-in-content.js");
445	473	var _optInImgPlaceholders = __webpack_require__(/*! ./opt-in-img-placeholders */ "../modules/atomic-opt-in/assets/js/opt-in-page/opt-in-img-placeholders.js");
446	474	var _optInMessage = __webpack_require__(/*! ./opt-in-message */ "../modules/atomic-opt-in/assets/js/opt-in-page/opt-in-message.js");
		@@ -458,13 +486,16 @@
458	486	};
459	487	var OPT_IN_MSG = 'e-editor-v4-opt-in-message';
460	488	var OPT_OUT_MSG = 'e-editor-v4-opt-out-message';
461	489	var i18n = {
462		- title: (0, _i18n.__)('Activate Atomic Editor features', 'elementor'),
463		- 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'),
464		- 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')]],
	490	+ title: (0, _i18n.__)('The road to Editor V4', 'elementor'),
	491	+ chip: (0, _i18n.__)('Alpha', 'elementor'),
	492	+ welcomeText: (0, _i18n.__)('Welcome to a new era of web creation with Editor V4. It’s faster, more flexible, and built with a fresh approach to structure & styling.', 'elementor'),
	493	+ advantagesHeader: (0, _i18n.__)('Here’s what’s inside the alpha version:', 'elementor'),
	494	+ advantages: [(0, _i18n.__)('Unparalleled performance - Cleaner code & a lighter CSS footprint.', 'elementor'), (0, _i18n.__)('Professional tools at your fingertips - classes and states.', 'elementor'), (0, _i18n.__)('Consistent styling experience - A unified Style tab for all elements.', 'elementor'), (0, _i18n.__)('Fully responsive design - Customize any style property per screen.', 'elementor')],
465	495	andMore: (0, _i18n.__)('And much more!', 'elementor'),
466	496	readMore: (0, _i18n.__)('Learn more', 'elementor'),
	497	+ warning: (0, _i18n.__)('Editor V4 is still in alpha and should not be used on live sites yet.', 'elementor'),
467	498	feedback: (0, _i18n.__)('We’d love your feedback!', 'elementor'),
468	499	overToGithub: (0, _i18n.__)('Head over to Github', 'elementor'),
469	500	tellUsWhy: (0, _i18n.__)('Tell us why', 'elementor'),
470	501	image: (0, _i18n.__)('Editor V4', 'elementor'),
		@@ -470,14 +501,14 @@
470	501	image: (0, _i18n.__)('Editor V4', 'elementor'),
471	502	buttons: {
472	503	tryOut: (0, _i18n.__)('Try out the new experience', 'elementor'),
473	504	optIn: (0, _i18n.__)('Activate the new experience', 'elementor'),
474		- optOut: (0, _i18n.__)('Deactivate', 'elementor')
	505	+ optOut: (0, _i18n.__)('Deactivate V4', 'elementor')
475	506	},
476	507	messages: {
477	508	optInSuccess: (0, _i18n.__)('Welcome! You’ve got the newest version of the editor.', 'elementor'),
478	509	optOut: (0, _i18n.__)('You’ve deactivated the new Editor. Have feedback?', 'elementor'),
479		- error: (0, _i18n.__)('Ouch, there was a glitch. Try activating again soon.', 'elementor')
	510	+ error: (0, _i18n.__)('Ouch, there was a glitch. Try activating V4 again soon.', 'elementor')
480	511	}
481	512	};
482	513	var optInLinks = {
483	514	feedbackUrl: 'https://go.elementor.com/wp-dash-opt-in-v4-feedback/',
		@@ -578,28 +609,38 @@
578	609	}, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
579	610	sx: {
580	611	flex: 1,
581	612	maxWidth: {
582		- md: '580px',
	613	+ md: '507px',
583	614	sm: '600px'
584	615	},
585	616	gap: 2.5,
586	617	mx: 'auto'
587	618	}
	619	+ }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
	620	+ direction: "row",
	621	+ alignItems: "center",
	622	+ gap: 1
588	623	}, /*#__PURE__*/_react.default.createElement(_optInContent.TextNode, {
589	624	variant: "h4",
590	625	width: "fit-content"
591		- }, /*#__PURE__*/_react.default.createElement("span", null, i18n.title)), /*#__PURE__*/_react.default.createElement(_ui.Stack, {
	626	+ }, i18n.title), /*#__PURE__*/_react.default.createElement(_ui.Chip, {
	627	+ size: "small",
	628	+ color: "secondary",
	629	+ variant: "filled",
	630	+ label: i18n.chip
	631	+ })), /*#__PURE__*/_react.default.createElement(_ui.Stack, {
592	632	direction: "column",
593		- gap: 1
594		- }, /*#__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, {
	633	+ gap: 3
	634	+ }, /*#__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, {
	635	+ variant: "subtitle1",
595	636	sx: {
596		- gap: 0.5
	637	+ mb: 1.5
597	638	}
598		- }, i18n.advantages.map(function (entry, i) {
	639	+ }, i18n.advantagesHeader), /*#__PURE__*/_react.default.createElement(_optInContent.AdvantagesList, null, i18n.advantages.map(function (entry, i) {
599	640	return /*#__PURE__*/_react.default.createElement(_optInContent.AdvantagesListItem, {
600	641	key: i
601		- }, /*#__PURE__*/_react.default.createElement("b", null, entry[0]), " - ", entry[1]);
	642	+ }, entry);
602	643	}), /*#__PURE__*/_react.default.createElement(_optInContent.AdvantagesListItem, {
603	644	key: i18n.advantages.length
604	645	}, i18n.andMore, " ", /*#__PURE__*/_react.default.createElement(_ui.Link, {
605	646	color: "text.primary",
		@@ -605,8 +646,17 @@
605	646	color: "text.primary",
606	647	href: optInLinks.readMoreUrl,
607	648	target: "_blank"
608	649	}, i18n.readMore))))), /*#__PURE__*/_react.default.createElement(_ui.Stack, {
	650	+ direction: "row",
	651	+ alignItems: "self-start",
	652	+ gap: 0.5,
	653	+ sx: {
	654	+ mb: 2.5
	655	+ }
	656	+ }, /*#__PURE__*/_react.default.createElement(_icons.AlertTriangleIcon, {
	657	+ color: "action"
	658	+ }), /*#__PURE__*/_react.default.createElement(_ui.Box, null, /*#__PURE__*/_react.default.createElement(_optInContent.TextNode, null, i18n.warning))), /*#__PURE__*/_react.default.createElement(_ui.Stack, {
609	659	direction: "column",
610	660	width: "clamp(240px, max(340px, 75%), 340px)",
611	661	maxWidth: "100%",
612	662	gap: 2
		@@ -693,18 +743,9 @@
693	743	isEnrolled: isEnrolled
694	744	}), optInMessage && /*#__PURE__*/_react.default.createElement(_optInMessage.Message, {
695	745	onClose: function onClose() {
696	746	return setOptInMessage('');
697		- },
698		- action: /*#__PURE__*/_react.default.createElement(_ui.Link, {
699		- href: optInLinks.tryOutUrl,
700		- color: "#FFFFFF",
701		- sx: {
702		- cursor: 'pointer',
703		- textDecoration: 'none',
704		- pl: 3
705		- }
706		- }, i18n.buttons.tryOut)
	747	+ }
707	748	}, optInMessage), optOutMessage && /*#__PURE__*/_react.default.createElement(_optInMessage.Message, {
708	749	onClose: function onClose() {
709	750	return setOptOutMessage('');
710	751	},
		@@ -710,9 +751,9 @@
710	751	},
711	752	action: /*#__PURE__*/_react.default.createElement(_ui.Link, {
712	753	href: optInLinks.feedbackUrl,
713	754	target: "_blank",
714		- color: "#FFFFFF",
	755	+ color: "inherit",
715	756	sx: {
716	757	cursor: 'pointer',
717	758	textDecoration: 'none',
718	759	pl: 3