← All changes | assets/js/editor-v4-opt-in.js +94 -54 4.2.0-dev2 → 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,22 +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		- // 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 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	+ },
336	354	activateButton: (0, _i18n.__)('Activate', 'elementor'),
337	355	cancelButton: (0, _i18n.__)('Cancel', 'elementor')
338	356	},
339	357	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')],
342		- 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'),
343	365	cancelButton: (0, _i18n.__)('Cancel', 'elementor')
344	366	}
345	367	};
346	368	var Terms = exports.Terms = function Terms(_ref) {
		@@ -364,35 +386,39 @@
364	386	};
365	387	var currentState = isEnrolled ? 'optOut' : 'optIn';
366	388	return /*#__PURE__*/_react.default.createElement(_ui.Dialog, (0, _extends2.default)({}, props, {
367	389	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, {
	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, {
371	397	dividers: true
372	398	}, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
373	399	gap: 2.5
374	400	}, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
375		- gap: 1.5,
376		- sx: {
377		- mx: 2,
378		- maxWidth: '550px'
379		- }
	401	+ gap: 1
380	402	}, /*#__PURE__*/_react.default.createElement(_optInContent.TextNode, {
381	403	align: "center",
382	404	variant: "h6"
383		- }, i18n[currentState].titleText), i18n[currentState].introText && /*#__PURE__*/_react.default.createElement(_optInContent.TextNode, {
	405	+ }, i18n[currentState].titleText), /*#__PURE__*/_react.default.createElement(_optInContent.TextNode, {
384	406	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) {
	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) {
392	418	return /*#__PURE__*/_react.default.createElement(_optInContent.ContentListItem, {
393	419	key: index,
394		- variant: "body3"
	420	+ variant: "body2"
395	421	}, entry);
396	422	}))), /*#__PURE__*/_react.default.createElement(_ui.FormControlLabel, {
397	423	control: /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
398	424	checked: !!checked,
		@@ -440,8 +466,9 @@
440	466	var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
441	467	var _defineProperty2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "../node_modules/@babel/runtime/helpers/defineProperty.js"));
442	468	var _slicedToArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "../node_modules/@babel/runtime/helpers/slicedToArray.js"));
443	469	var _ui = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
	470	+var _icons = __webpack_require__(/*! @elementor/icons */ "@elementor/icons");
444	471	var _i18n = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
445	472	var _optInContent = __webpack_require__(/*! ./opt-in-content */ "../modules/atomic-opt-in/assets/js/opt-in-page/opt-in-content.js");
446	473	var _optInImgPlaceholders = __webpack_require__(/*! ./opt-in-img-placeholders */ "../modules/atomic-opt-in/assets/js/opt-in-page/opt-in-img-placeholders.js");
447	474	var _optInMessage = __webpack_require__(/*! ./opt-in-message */ "../modules/atomic-opt-in/assets/js/opt-in-page/opt-in-message.js");
		@@ -459,13 +486,16 @@
459	486	};
460	487	var OPT_IN_MSG = 'e-editor-v4-opt-in-message';
461	488	var OPT_OUT_MSG = 'e-editor-v4-opt-out-message';
462	489	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')]],
	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')],
466	495	andMore: (0, _i18n.__)('And much more!', 'elementor'),
467	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'),
468	498	feedback: (0, _i18n.__)('We’d love your feedback!', 'elementor'),
469	499	overToGithub: (0, _i18n.__)('Head over to Github', 'elementor'),
470	500	tellUsWhy: (0, _i18n.__)('Tell us why', 'elementor'),
471	501	image: (0, _i18n.__)('Editor V4', 'elementor'),
		@@ -471,14 +501,14 @@
471	501	image: (0, _i18n.__)('Editor V4', 'elementor'),
472	502	buttons: {
473	503	tryOut: (0, _i18n.__)('Try out the new experience', 'elementor'),
474	504	optIn: (0, _i18n.__)('Activate the new experience', 'elementor'),
475		- optOut: (0, _i18n.__)('Deactivate', 'elementor')
	505	+ optOut: (0, _i18n.__)('Deactivate V4', 'elementor')
476	506	},
477	507	messages: {
478	508	optInSuccess: (0, _i18n.__)('Welcome! You’ve got the newest version of the editor.', 'elementor'),
479	509	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')
	510	+ error: (0, _i18n.__)('Ouch, there was a glitch. Try activating V4 again soon.', 'elementor')
481	511	}
482	512	};
483	513	var optInLinks = {
484	514	feedbackUrl: 'https://go.elementor.com/wp-dash-opt-in-v4-feedback/',
		@@ -579,28 +609,38 @@
579	609	}, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
580	610	sx: {
581	611	flex: 1,
582	612	maxWidth: {
583		- md: '580px',
	613	+ md: '507px',
584	614	sm: '600px'
585	615	},
586	616	gap: 2.5,
587	617	mx: 'auto'
588	618	}
	619	+ }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
	620	+ direction: "row",
	621	+ alignItems: "center",
	622	+ gap: 1
589	623	}, /*#__PURE__*/_react.default.createElement(_optInContent.TextNode, {
590	624	variant: "h4",
591	625	width: "fit-content"
592		- }, /*#__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, {
593	632	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, {
	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",
596	636	sx: {
597		- gap: 0.5
	637	+ mb: 1.5
598	638	}
599		- }, i18n.advantages.map(function (entry, i) {
	639	+ }, i18n.advantagesHeader), /*#__PURE__*/_react.default.createElement(_optInContent.AdvantagesList, null, i18n.advantages.map(function (entry, i) {
600	640	return /*#__PURE__*/_react.default.createElement(_optInContent.AdvantagesListItem, {
601	641	key: i
602		- }, /*#__PURE__*/_react.default.createElement("b", null, entry[0]), " - ", entry[1]);
	642	+ }, entry);
603	643	}), /*#__PURE__*/_react.default.createElement(_optInContent.AdvantagesListItem, {
604	644	key: i18n.advantages.length
605	645	}, i18n.andMore, " ", /*#__PURE__*/_react.default.createElement(_ui.Link, {
606	646	color: "text.primary",
		@@ -606,8 +646,17 @@
606	646	color: "text.primary",
607	647	href: optInLinks.readMoreUrl,
608	648	target: "_blank"
609	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, {
610	659	direction: "column",
611	660	width: "clamp(240px, max(340px, 75%), 340px)",
612	661	maxWidth: "100%",
613	662	gap: 2
		@@ -694,18 +743,9 @@
694	743	isEnrolled: isEnrolled
695	744	}), optInMessage && /*#__PURE__*/_react.default.createElement(_optInMessage.Message, {
696	745	onClose: function onClose() {
697	746	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)
	747	+ }
708	748	}, optInMessage), optOutMessage && /*#__PURE__*/_react.default.createElement(_optInMessage.Message, {
709	749	onClose: function onClose() {
710	750	return setOptOutMessage('');
711	751	},
		@@ -711,9 +751,9 @@
711	751	},
712	752	action: /*#__PURE__*/_react.default.createElement(_ui.Link, {
713	753	href: optInLinks.feedbackUrl,
714	754	target: "_blank",
715		- color: "#FFFFFF",
	755	+ color: "inherit",
716	756	sx: {
717	757	cursor: 'pointer',
718	758	textDecoration: 'none',
719	759	pl: 3