User Profile Builder – Beautiful User Registration Forms, User Profiles & User Role Editor / 3.16.4

User Profile Builder – Beautiful User Registration Forms, User Profiles & User Role Editor v3.16.4

profile-builder / add-ons-free / user-profile-picture / src / block / profile.js

profile.js in User Profile Builder – Beautiful User Registration Forms, User Profiles & User Role Editor 3.16.4, at add-ons-free/user-profile-picture/src/block/profile.js

2,693 lines 155.6 KB

Raw Download Zip

1	/**
2	* External dependencies
3	*/
4	import axios from "axios";
5	const { Component, Fragment } = wp.element;
6
7	const { __ } = wp.i18n;
8
9	const {
10	PanelBody,
11	Placeholder,
12	QueryControls,
13	RangeControl,
14	SelectControl,
15	Spinner,
16	TextControl,
17	ToggleControl,
18	Toolbar,
19	withAPIData,
20	ColorPalette,
21	Button,
22	} = wp.components;
23
24	const {
25	InspectorControls,
26	BlockControls,
27	MediaUpload,
28	RichText,
29	AlignmentToolbar,
30	PanelColorSettings,
31	} = wp.editor;
32
33	// Import block dependencies and components
34	import classnames from "classnames";
35
36	class MPP_Gutenberg_Enhanced extends Component {
37	constructor() {
38	super(...arguments);
39
40	let theme_list = Array();
41	theme_list.push({
42	value: "regular",
43	label: __("Regular", "profile-builder"),
44	});
45	theme_list.push({
46	value: "profile",
47	label: __("Profile", "profile-builder"),
48	});
49	theme_list.push({
50	value: "tabbed",
51	label: __("Tabbed", "profile-builder"),
52	});
53	theme_list.push({
54	value: "compact",
55	label: __("Compact", "profile-builder"),
56	});
57	this.state = {
58	loading: true,
59	users: false,
60	user_list: false,
61	profile_picture: this.props.attributes.profileImgURL,
62	profile_picture_id: this.props.attributes.profileImgID,
63	active_user: false,
64	profile_description: "",
65	profile_name: "",
66	profile_name_unfiltered: "",
67	profile_title: "",
68	show_website: this.props.attributes.showWebsite,
69	profileViewPosts: this.props.attributes.profileViewPosts,
70	profileViewWebsite: this.props.attributes.profileViewWebsite,
71	theme: this.props.attributes.theme,
72	themes: theme_list,
73	socialFacebook: this.props.attributes.socialFacebook,
74	socialGitHub: this.props.attributes.socialGitHub,
75	socialLinkedIn: this.props.attributes.socialLinkedIn,
76	socialPinterest: this.props.attributes.socialPinterest,
77	socialTwitter: this.props.attributes.socialTwitter,
78	socialWordPress: this.props.attributes.socialWordPress,
79	socialYouTube: this.props.attributes.socialYouTube,
80	socialInstagram: this.props.attributes.socialInstagram,
81	website: this.props.attributes.website,
82	showSocialMedia: true,
83	socialMediaOptions: this.props.attributes.socialMediaOptions,
84	socialMediaColors: this.props.attributes.socialMediaColors,
85	tabbedAuthorProfile: this.props.attributes.tabbedAuthorProfile,
86	tabbedAuthorLatestPosts:
87	this.props.attributes.tabbedAuthorLatestPosts,
88	tabbedAuthorSubHeading:
89	this.props.attributes.tabbedAuthorSubHeading,
90	tabbedAuthorProfileHeading:
91	this.props.attributes.tabbedAuthorProfileHeading,
92	activeTab: "profile",
93	loadingLatestPosts: true,
94	latestPosts: {},
95	profileTabColor: this.props.attributes.profileTabColor,
96	profileTabHeadlineColor:
97	this.props.attributes.profileTabHeadlineColor,
98	profileTabPostsColor: this.props.attributes.profileTabPostsColor,
99	profileTabHeadlineTextColor:
100	this.props.attributes.profileTabHeadlineTextColor,
101	profileTabTextColor: this.props.attributes.profileTabTextColor,
102	profileTabPostsTextColor:
103	this.props.attributes.profileTabPostsTextColor,
104	profileLatestPostsOptionsValue:
105	this.props.attributes.profileLatestPostsOptionsValue,
106	profileCompactAlignment:
107	this.props.attributes.profileCompactAlignment,
108	};
109	}
110	get_users = () => {
111	axios
112	.post(
113	mpp_gutenberg.rest_url + `/get_users`,
114	{},
115	{ headers: { "X-WP-Nonce": mpp_gutenberg.nonce } },
116	)
117	.then((response) => {
118	let users = Array();
119	let user_list = Array();
120	let active_user = 0;
121	let profile_picture = "";
122	let profile_picture_id = 0;
123	let profile_name = "";
124	let profile_description = "";
125	let profile_title = "";
126	let profile_url = "";
127	let show_website = "";
128	jQuery.each(response.data, function (key, value) {
129	users[value.ID] = {
130	profile_pictures: value.profile_pictures,
131	has_profile_picture: value.has_profile_picture,
132	display_name: value.display_name,
133	description: value.description,
134	is_user_logged_in: value.is_user_logged_in,
135	profile_picture_id: value.profile_picture_id,
136	default_image: value.default_image,
137	permalink: value.permalink,
138	};
139	if (value.is_user_logged_in) {
140	active_user = value.ID;
141	}
142	user_list.push({
143	value: value.ID,
144	label: value.display_name,
145	});
146	});
147	if (this.props.attributes.user_id !== 0) {
148	active_user = this.props.attributes.user_id;
149	}
150	let active_user_profile = users[active_user];
151	if (active_user_profile.has_profile_picture) {
152	profile_picture =
153	this.props.attributes.profileImgURL.length > 0
154	? this.props.attributes.profileImgURL
155	: active_user_profile.profile_pictures["thumbnail"];
156	profile_picture_id =
157	this.props.attributes.profileImgID.length > 0
158	? this.props.attributes.profileImgID
159	: active_user_profile.profile_picture_id;
160	profile_name =
161	this.props.attributes.profileName.length > 0
162	? this.props.attributes.profileName
163	: active_user_profile.display_name;
164	profile_title =
165	this.props.attributes.profileTitle.length > 0
166	? this.props.attributes.profileTitle
167	: "";
168	profile_url = active_user_profile.permalink;
169	profile_description =
170	this.props.attributes.profileContent.length > 0
171	? this.props.attributes.profileContent
172	: active_user_profile.description;
173	show_website = this.props.attributes.showWebsite;
174	} else {
175	profile_name =
176	this.props.attributes.profileName.length > 0
177	? this.props.attributes.profileName
178	: active_user_profile.display_name;
179	profile_title =
180	this.props.attributes.profileTitle.length > 0
181	? this.props.attributes.profileTitle
182	: "";
183	profile_description =
184	this.props.attributes.profileContent.length > 0
185	? this.props.attributes.profileContent
186	: active_user_profile.description;
187	profile_picture =
188	this.props.attributes.profileImgURL.length > 0
189	? this.props.attributes.profileImgURL
190	: active_user_profile.default_image;
191	profile_picture_id =
192	this.props.attributes.profileImgID.length > 0
193	? this.props.attributes.profileImgID
194	: 0;
195	profile_url = active_user_profile.permalink;
196	show_website = this.props.attributes.showWebsite;
197	}
198	if (undefined == profile_description) {
199	profile_description = "";
200	}
201	this.setState({
202	loading: false,
203	users: users,
204	active_user: active_user,
205	user_list: user_list,
206	profile_picture: profile_picture,
207	profile_picture_id: profile_picture_id,
208	active_user: active_user,
209	profile_name: profile_name,
210	profile_name_unfiltered: active_user_profile.display_name,
211	profile_title: profile_title,
212	profile_description: profile_description,
213	profile_url: profile_url,
214	show_website: show_website,
215	});
216	this.props.setAttributes({
217	profileContent: profile_description,
218	profileName: profile_name,
219	profileTitle: profile_title,
220	profileURL: profile_url,
221	profileImgID: profile_picture_id,
222	profileImgURL: profile_picture,
223	showWebsite: show_website,
224	showSocialMedia: true,
225	profileName: active_user_profile.display_name,
226	});
227	});
228	};
229	on_user_change = (user_id) => {
230	let user = this.state.users[user_id];
231	let profile_picture = "";
232	let profile_picture_id = 0;
233	let profile_name = "";
234	if (!user.has_profile_picture) {
235	profile_picture = mpp_gutenberg.mystery_man;
236	profile_picture_id = 0;
237	} else {
238	profile_picture =
239	this.state.users[user_id]["profile_pictures"]["thumbnail"];
240	profile_picture_id =
241	this.state.users[user_id]["profile_picture_id"];
242	}
243	let description = this.state.users[user_id].description;
244	if (undefined === description) {
245	description = "";
246	}
247	profile_name = this.state.users[user_id].display_name;
248	this.props.setAttributes({
249	profileName: profile_name,
250	profileContent: description,
251	profileTitle: "",
252	profileURL: this.state.users[user_id].permalink,
253	profileImgURL: profile_picture,
254	tabbedAuthorSubHeading: "",
255	tabbedAuthorProfileTitle: "",
256	socialFacebook: "",
257	socialGitHub: "",
258	socialInstagram: "",
259	socialLinkedIn: "",
260	socialPinterest: "",
261	socialTwitter: "",
262	socialWordPress: "",
263	socialYouTube: "",
264	profileName: this.state.users[user_id].display_name,
265	});
266	this.setState({
267	profile_name_unfiltered: this.state.users[user_id].display_name,
268	profile_name: profile_name,
269	profile_description: description,
270	profile_title: "",
271	profile_picture: profile_picture,
272	profile_picture_id: profile_picture_id,
273	active_user: user_id,
274	profile_url: this.state.users[user_id].permalink,
275	socialFacebook: "",
276	socialGitHub: "",
277	socialInstagram: "",
278	socialLinkedIn: "",
279	socialPinterest: "",
280	socialTwitter: "",
281	socialWordPress: "",
282	socialYouTube: "",
283	});
284	this.getLatestPosts();
285	};
286	getLatestPosts = () => {
287	this.setState({
288	loadingLatestPosts: true,
289	});
290	let classRef = this;
291	axios
292	.post(
293	mpp_gutenberg.rest_url + `/get_posts`,
294	{ user_id: this.state.active_user },
295	{ headers: { "X-WP-Nonce": mpp_gutenberg.nonce } },
296	)
297	.then((response) => {
298	const latestPosts = response.data;
299	let postJSX = latestPosts.map(function (data) {
300	return (
301	<li key={data.ID}>
302	<a href={data.permalink}>{data.post_title}</a>
303	</li>
304	);
305	});
306
307	this.setState({
308	loadingLatestPosts: false,
309	latestPosts: postJSX,
310	});
311	});
312	};
313	componentDidMount = () => {
314	this.get_users();
315	};
316	handleImageChange = (image_id, image_url) => {
317	this.setState({
318	profile_picture: image_url,
319	profile_picture_id: image_id,
320	});
321	};
322	onChangeName = (value) => {
323	this.setState({
324	profile_name: value,
325	});
326	};
327	onChangeTitle = (value) => {
328	this.setState({
329	profile_title: value,
330	});
331	};
332	onChangeProfileText = (value) => {
333	this.setState({
334	profile_description: value,
335	});
336	};
337	onThemeChange = (value) => {
338	this.setState({
339	theme: value,
340	});
341	};
342	handleFacebookChange = (value) => {
343	this.setState({
344	socialFacebook: value,
345	});
346	};
347	handleYouTubeChange = (value) => {
348	this.setState({
349	socialYouTube: value,
350	});
351	};
352	handleGitHubChange = (value) => {
353	this.setState({
354	socialGitHub: value,
355	});
356	};
357	handleLinkedInChange = (value) => {
358	this.setState({
359	socialLinkedIn: value,
360	});
361	};
362	handleTwitterChange = (value) => {
363	this.setState({
364	socialTwitter: value,
365	});
366	};
367	handleWordPressChange = (value) => {
368	this.setState({
369	socialWordPress: value,
370	});
371	};
372	handleWebsiteChange = (value) => {
373	this.setState({
374	website: value,
375	});
376	if ("" !== value) {
377	this.props.setAttributes({
378	showWebsite: true,
379	});
380	}
381	};
382	handleInstagramChange = (value) => {
383	this.setState({
384	socialInstagram: value,
385	});
386	};
387	handlePinterestChange = (value) => {
388	this.setState({
389	socialPinterest: value,
390	});
391	};
392	handleSocialMediaChange = (value) => {
393	this.setState({
394	showSocialMedia: value,
395	});
396	this.props.setAttributes({ showSocialMedia: value });
397	};
398	handleSocialMediaOptionChange = (value) => {
399	this.setState({
400	socialMediaOptions: value,
401	});
402	};
403	onChangeTabbedProfileText = (value) => {
404	this.setState({
405	tabbedAuthorProfile: value,
406	});
407	};
408	onChangeTabbedSubHeading = (value) => {
409	this.setState({
410	tabbedAuthorSubHeading: value,
411	});
412	};
413	onChangeActiveProfileTab = () => {
414	this.setState({
415	activeTab: "profile",
416	});
417	};
418	onChangeActivePostTab = () => {
419	this.setState({
420	activeTab: "latest",
421	loadingLatestPosts: true,
422	});
423	this.getLatestPosts();
424	};
425	onChangetabbedAuthorProfile = (value) => {
426	this.setState({
427	tabbedAuthorProfile: value,
428	});
429	};
430	onChangetabbedAuthorProfileHeading = (value) => {
431	this.setState({
432	tabbedAuthorProfileHeading: value,
433	});
434	};
435	onChangetabbedAuthorLatestPosts = (value) => {
436	this.setState({
437	tabbedAuthorLatestPosts: value,
438	});
439	};
440	onChangeProfileTabColor = (value) => {
441	this.setState({
442	profileTabColor: value,
443	});
444	this.props.setAttributes({ profileTabColor: value });
445	};
446	onChangePostsTabColor = (value) => {
447	this.setState({
448	profileTabPostsColor: value,
449	});
450	this.props.setAttributes({ profileTabPostsColor: value });
451	};
452	onChangePostsTabHeadlineColor = (value) => {
453	this.setState({
454	profileTabHeadlineColor: value,
455	});
456	this.props.setAttributes({ profileTabHeadlineColor: value });
457	};
458	onChangeProfileTabPostColorText = (value) => {
459	this.setState({
460	profileTabPostsTextColor: value,
461	});
462	this.props.setAttributes({ profileTabPostsTextColor: value });
463	};
464	onChangeProfileTabHeadlineColorText = (value) => {
465	this.setState({
466	profileTabHeadlineTextColor: value,
467	});
468	this.props.setAttributes({ profileTabHeadlineTextColor: value });
469	};
470	onChangeProfileTabColorText = (value) => {
471	this.setState({
472	profileTabTextColor: value,
473	});
474	this.props.setAttributes({ profileTabTextColor: value });
475	};
476	onLatestPostsChange = (value) => {
477	this.setState({
478	profileLatestPostsOptionsValue: value,
479	});
480	};
481	onCompactAlignmentChange = (value) => {
482	this.setState({
483	profileCompactAlignment: value,
484	});
485	};
486	render() {
487	// Setup the attributes
488	let {
489	attributes: {
490	profileName,
491	profileTitle,
492	profileContent,
493	profileAlignment,
494	profileImgURL,
495	profileImgID,
496	profileURL,
497	profileFontSize,
498	buttonFontSize,
499	headerFontSize,
500	profileBackgroundColor,
501	profileTextColor,
502	profileAvatarShape,
503	profileViewPostsBackgroundColor,
504	profileViewPostsTextColor,
505	profileViewPosts,
506	profileViewWebsite,
507	showTitle,
508	showName,
509	showDescription,
510	showViewPosts,
511	showPostsWidth,
512	showSocialMedia,
513	showWebsite,
514	theme,
515	theme_list,
516	socialFacebook,
517	socialGitHub,
518	socialLinkedIn,
519	socialPinterest,
520	socialTwitter,
521	socialWordPress,
522	socialYouTube,
523	socialMediaColors,
524	profileWebsiteBackgroundColor,
525	profileWebsiteTextColor,
526	padding,
527	border,
528	borderRounded,
529	borderColor,
530	profileLinkColor,
531	tabbedAuthorProfile,
532	tabbedAuthorSubHeading,
533	tabbedAuthorProfileTitle,
534	profileLatestPostsOptionsValue,
535	},
536	attributes,
537	isSelected,
538	editable,
539	className,
540	setAttributes,
541	} = this.props;
542	let profile_pictures = this.state.profile_pictures;
543	profileImgID = this.state.profile_picture_id;
544	profileImgURL = this.state.profile_picture;
545	profileName = this.state.profile_name;
546	profileContent = this.state.profile_description;
547	profileTitle = this.state.profile_title;
548	profileURL = this.state.profile_url;
549	showPostsWidth =
550	this.state.website === "" \|\| !this.props.attributes.showWebsite
551	? "100%"
552	: "";
553	setAttributes({ showPostsWidth: showPostsWidth });
554
555	const onChangeBackgroundColor = (value) =>
556	setAttributes({ profileBackgroundColor: value });
557	const onChangeProfileTextColor = (value) =>
558	setAttributes({ profileTextColor: value });
559	const onChangeViewPostsBackgroundColor = (value) =>
560	setAttributes({ profileViewPostsBackgroundColor: value });
561	const onChangeViewPostsTextColor = (value) =>
562	setAttributes({ profileViewPostsTextColor: value });
563	const onChangeWebsitesBackgroundColor = (value) =>
564	setAttributes({ profileWebsiteBackgroundColor: value });
565	const onChangeWebsiteTextColor = (value) =>
566	setAttributes({ profileWebsiteTextColor: value });
567	const onChangeSocialMediaColor = (value) =>
568	setAttributes({ socialMediaColors: value });
569	const onChangeBorderColor = (value) =>
570	setAttributes({ borderColor: value });
571	const onChangeProfileLinkColor = (value) =>
572	setAttributes({ profileLinkColor: value });
573
574	// Avatar shape options
575	const profileAvatarShapeOptions = [
576	{ value: "square", label: __("Square", "profile-builder") },
577	{ value: "round", label: __("Round", "profile-builder") },
578	];
579
580	// Social Media Options
581	const profileSocialMediaOptions = [
582	{ value: "colors", label: __("Brand Colors", "profile-builder") },
583	{ value: "custom", label: __("Custom", "profile-builder") },
584	];
585
586	// Latest Posts Theme Options
587	const profileLatestPostsOptions = [
588	{ value: "none", label: __("None", "profile-builder") },
589	{ value: "white", label: __("White", "profile-builder") },
590	{ value: "light", label: __("Light", "profile-builder") },
591	{ value: "black", label: __("Black", "profile-builder") },
592	{ value: "magenta", label: __("Magenta", "profile-builder") },
593	{ value: "blue", label: __("Blue", "profile-builder") },
594	{ value: "green", label: __("Green", "profile-builder") },
595	];
596
597	// Profile Comptact Alignment Options
598	const profileCompactOptions = [
599	{ value: "left", label: __("Left", "profile-builder") },
600	{ value: "center", label: __("Center", "profile-builder") },
601	{ value: "right", label: __("Right", "profile-builder") },
602	];
603	let profileFloat = "none";
604	let profileMargin = "";
605	if (this.state.profileCompactAlignment === "center") {
606	profileFloat = "none";
607	profileMargin = "0 auto";
608	}
609	if (this.state.profileCompactAlignment === "left") {
610	profileFloat = "left";
611	profileMargin = "0";
612	}
613	if (this.state.profileCompactAlignment === "right") {
614	profileFloat = "right";
615	profileMargin = "0";
616	}
617	return (
618	<Fragment>
619	{this.state.loading && (
620	<Fragment>
621	<Placeholder>
622	<div>
623	<svg
624	id="Layer_1"
625	data-name="Layer 1"
626	xmlns="http://www.w3.org/2000/svg"
627	width="125px"
628	height="125px"
629	viewBox="0 0 753.53 979.74"
630	>
631	<title>upp</title>
632	<path
633	d="M806.37,185.9c0,40.27-30.49,72.9-68.11,72.9s-68.17-32.63-68.17-72.9S700.62,113,738.26,113,806.37,145.64,806.37,185.9Z"
634	transform="translate(-123.47 -11)"
635	fill="#4063ad"
636	/>
637	<path
638	d="M330.36,183.8c0,40.27-30.49,72.9-68.12,72.9s-68.17-32.63-68.17-72.9,30.52-72.87,68.17-72.87S330.36,143.56,330.36,183.8Z"
639	transform="translate(-123.47 -11)"
640	fill="#a34d9c"
641	/>
642	<path
643	d="M331.3,888.13V698.21H329c-31.64,0-57.28-27.45-57.28-61.29V336.5a118.37,118.37,0,0,1,5.43-34.79H179.84c-31.94,0-56.37,31.57-56.37,56.34V601.46h48.32V888.13Z"
644	transform="translate(-123.47 -11)"
645	fill="#a34d9c"
646	/>
647	<path
648	d="M388.59,636.92V990.74H611.88V636.92H671.5V336.5c0-30.63-27.64-69.57-69.6-69.57H398.56c-39.44,0-69.61,38.94-69.61,69.57V636.92Z"
649	transform="translate(-123.47 -11)"
650	fill="#f4831f"
651	/>
652	<path
653	d="M584.3,101c0,49.69-37.63,90-84,90S416.12,150.67,416.12,101s37.66-90,84.14-90S584.3,51.27,584.3,101Z"
654	transform="translate(-123.47 -11)"
655	fill="#f4831f"
656	/>
657	<path
658	d="M820.61,303.79H724.08a121.69,121.69,0,0,1,4.7,32.71V636.92c0,33.84-25.64,61.29-57.28,61.29h-2.33v192H828.7V603.54H877V360.16C877,335.36,854.62,303.79,820.61,303.79Z"
659	transform="translate(-123.47 -11)"
660	fill="#4063ad"
661	/>
662	</svg>
663	<div className="mpp-spinner">
664	<Spinner />
665	</div>
666	</div>
667	</Placeholder>
668	</Fragment>
669	)}
670	{!this.state.loading && (
671	<Fragment>
672	<InspectorControls>
673	<PanelBody
674	title={__(
675	"User Profile Settings",
676	"profile-builder",
677	)}
678	>
679	<SelectControl
680	label={__(
681	"Select a user",
682	"profile-builder",
683	)}
684	value={this.state.active_user}
685	options={this.state.user_list}
686	onChange={(value) => {
687	this.on_user_change(value);
688	setAttributes({
689	user_id: Number(value),
690	});
691	}}
692	/>
693	<SelectControl
694	label={__(
695	"Select a theme",
696	"profile-builder",
697	)}
698	value={this.state.theme}
699	options={this.state.themes}
700	onChange={(value) => {
701	this.onThemeChange(value);
702	setAttributes({ theme: value });
703	}}
704	/>
705	{this.state.theme === "compact" && (
706	<SelectControl
707	label={__(
708	"Select an alignment",
709	"profile-builder",
710	)}
711	value={
712	this.state.profileCompactAlignment
713	}
714	options={profileCompactOptions}
715	onChange={(value) => {
716	this.onCompactAlignmentChange(
717	value,
718	);
719	setAttributes({
720	profileCompactAlignment: value,
721	});
722	}}
723	/>
724	)}
725	<SelectControl
726	label={__(
727	"Avatar Shape",
728	"profile-builder",
729	)}
730	description={__(
731	"Choose between a round or square avatar shape.",
732	"profile-builder",
733	)}
734	options={profileAvatarShapeOptions}
735	value={profileAvatarShape}
736	onChange={(value) =>
737	this.props.setAttributes({
738	profileAvatarShape: value,
739	})
740	}
741	/>
742	{this.state.theme !== "tabbed" && (
743	<TextControl
744	label={__("Website", "profile-builder")}
745	value={this.state.website}
746	onChange={(value) => {
747	this.props.setAttributes({
748	website: value,
749	});
750	this.handleWebsiteChange(value);
751	}}
752	/>
753	)}
754	<ToggleControl
755	label={__("Show Name", "profile-builder")}
756	checked={showName}
757	onChange={() =>
758	this.props.setAttributes({
759	showName: !showName,
760	})
761	}
762	/>
763	<ToggleControl
764	label={__("Show Title", "profile-builder")}
765	checked={showTitle}
766	onChange={() =>
767	this.props.setAttributes({
768	showTitle: !showTitle,
769	})
770	}
771	/>
772	<ToggleControl
773	label={__(
774	"Show Description",
775	"profile-builder",
776	)}
777	checked={showDescription}
778	onChange={() =>
779	this.props.setAttributes({
780	showDescription: !showDescription,
781	})
782	}
783	/>
784	{this.state.theme !== "tabbed" && (
785	<Fragment>
786	<ToggleControl
787	label={__(
788	"Show View Posts",
789	"profile-builder",
790	)}
791	checked={showViewPosts}
792	onChange={() =>
793	this.props.setAttributes({
794	showViewPosts:
795	!showViewPosts,
796	})
797	}
798	/>
799	{showViewPosts && (
800	<TextControl
801	label={__(
802	"View Posts Text",
803	"profile-builder",
804	)}
805	value={profileViewPosts}
806	onChange={(value) => {
807	this.props.setAttributes({
808	profileViewPosts: value,
809	});
810	}}
811	/>
812	)}
813	<ToggleControl
814	label={__(
815	"Show Website",
816	"profile-builder",
817	)}
818	checked={this.state.show_website}
819	onChange={(value) => {
820	this.props.setAttributes({
821	showWebsite: value,
822	});
823	this.setState({
824	show_website: value,
825	});
826	}}
827	/>
828	{this.state.show_website && (
829	<TextControl
830	label={__(
831	"View Website Text",
832	"profile-builder",
833	)}
834	value={profileViewWebsite}
835	onChange={(value) => {
836	this.props.setAttributes({
837	profileViewWebsite:
838	value,
839	});
840	}}
841	/>
842	)}
843	</Fragment>
844	)}
845	<ToggleControl
846	label={__(
847	"Show Social Media",
848	"profile-builder",
849	)}
850	checked={this.state.showSocialMedia}
851	onChange={(value) => {
852	this.props.setAttributes({
853	showSocialMedia: value,
854	});
855	this.handleSocialMediaChange(value);
856	}}
857	/>
858	</PanelBody>
859	{this.state.theme === "tabbed" && (
860	<PanelBody
861	title={__(
862	"User Profile Settings",
863	"profile-builder",
864	)}
865	>
866	<SelectControl
867	label={__(
868	"Select a theme",
869	"profile-builder",
870	)}
871	value={this.state.latestPostsTheme}
872	options={{}}
873	onChange={(value) => {
874	this.on_user_change(value);
875	setAttributes({
876	user_id: Number(value),
877	});
878	}}
879	/>
880	</PanelBody>
881	)}
882	<PanelBody
883	title={__("Colors", "profile-builder")}
884	initialOpen={false}
885	>
886	<PanelColorSettings
887	title={__(
888	"Background Color",
889	"profile-builder",
890	)}
891	initialOpen={false}
892	colorSettings={[
893	{
894	value: profileBackgroundColor,
895	onChange: onChangeBackgroundColor,
896	label: __(
897	"Background Color",
898	"profile-builder",
899	),
900	},
901	]}
902	></PanelColorSettings>
903	<PanelColorSettings
904	title={__("Text Color", "profile-builder")}
905	initialOpen={false}
906	colorSettings={[
907	{
908	value: profileTextColor,
909	onChange: onChangeProfileTextColor,
910	label: __(
911	"Text Color",
912	"profile-builder",
913	),
914	},
915	]}
916	></PanelColorSettings>
917	{this.state.theme === "profile" && (
918	<PanelColorSettings
919	title={__(
920	"Link Color",
921	"profile-builder",
922	)}
923	initialOpen={false}
924	colorSettings={[
925	{
926	value: profileLinkColor,
927	onChange:
928	onChangeProfileLinkColor,
929	label: __(
930	"Link Color",
931	"profile-builder",
932	),
933	},
934	]}
935	></PanelColorSettings>
936	)}
937	{this.state.theme === "tabbed" && (
938	<Fragment>
939	<PanelColorSettings
940	title={__(
941	"Profile Tab Color",
942	"profile-builder",
943	)}
944	initialOpen={false}
945	colorSettings={[
946	{
947	value: this.state
948	.profileTabColor,
949	onChange:
950	this
951	.onChangeProfileTabColor,
952	label: __(
953	"Color",
954	"profile-builder",
955	),
956	},
957	]}
958	></PanelColorSettings>
959	<PanelColorSettings
960	title={__(
961	"Profile Tab Color Text",
962	"profile-builder",
963	)}
964	initialOpen={false}
965	colorSettings={[
966	{
967	value: this.state
968	.profileTabTextColor,
969	onChange:
970	this
971	.onChangeProfileTabColorText,
972	label: __(
973	"Color",
974	"profile-builder",
975	),
976	},
977	]}
978	></PanelColorSettings>
979	<PanelColorSettings
980	title={__(
981	"Profile Posts Color",
982	"profile-builder",
983	)}
984	initialOpen={false}
985	colorSettings={[
986	{
987	value: this.state
988	.profileTabPostsColor,
989	onChange:
990	this
991	.onChangePostsTabColor,
992	label: __(
993	"Color",
994	"profile-builder",
995	),
996	},
997	]}
998	></PanelColorSettings>
999	<PanelColorSettings
1000	title={__(
1001	"Profile Post Color Text",
1002	"profile-builder",
1003	)}
1004	initialOpen={false}
1005	colorSettings={[
1006	{
1007	value: this.state
1008	.profileTabPostsTextColor,
1009	onChange:
1010	this
1011	.onChangeProfileTabPostColorText,
1012	label: __(
1013	"Color",
1014	"profile-builder",
1015	),
1016	},
1017	]}
1018	></PanelColorSettings>
1019	<PanelColorSettings
1020	title={__(
1021	"Profile Headline Color",
1022	"profile-builder",
1023	)}
1024	initialOpen={false}
1025	colorSettings={[
1026	{
1027	value: this.state
1028	.profileTabHeadlineColor,
1029	onChange:
1030	this
1031	.onChangePostsTabHeadlineColor,
1032	label: __(
1033	"Color",
1034	"profile-builder",
1035	),
1036	},
1037	]}
1038	></PanelColorSettings>
1039	<PanelColorSettings
1040	title={__(
1041	"Profile Headline Color Text",
1042	"profile-builder",
1043	)}
1044	initialOpen={false}
1045	colorSettings={[
1046	{
1047	value: this.state
1048	.profileTabHeadlineColorText,
1049	onChange:
1050	this
1051	.onChangeProfileTabHeadlineColorText,
1052	label: __(
1053	"Color",
1054	"profile-builder",
1055	),
1056	},
1057	]}
1058	></PanelColorSettings>
1059	<SelectControl
1060	label={__(
1061	"Select a Post Theme",
1062	"profile-builder",
1063	)}
1064	value={
1065	this.state
1066	.profileLatestPostsOptionsValue
1067	}
1068	options={profileLatestPostsOptions}
1069	onChange={(value) => {
1070	this.onLatestPostsChange(value);
1071	setAttributes({
1072	profileLatestPostsOptionsValue:
1073	value,
1074	});
1075	}}
1076	/>
1077	</Fragment>
1078	)}
1079	{this.state.theme !== "tabbed" &&
1080	this.state.theme !== "profile" && (
1081	<Fragment>
1082	<PanelColorSettings
1083	title={__(
1084	"View Posts Background Color",
1085	"profile-builder",
1086	)}
1087	initialOpen={false}
1088	colorSettings={[
1089	{
1090	value: profileViewPostsBackgroundColor,
1091	onChange:
1092	onChangeViewPostsBackgroundColor,
1093	label: __(
1094	"View Posts Background",
1095	"profile-builder",
1096	),
1097	},
1098	]}
1099	></PanelColorSettings>
1100	<PanelColorSettings
1101	title={__(
1102	"View Posts Text Color",
1103	"profile-builder",
1104	)}
1105	initialOpen={false}
1106	colorSettings={[
1107	{
1108	value: profileViewPostsTextColor,
1109	onChange:
1110	onChangeViewPostsTextColor,
1111	label: __(
1112	"View Posts Text Color",
1113	"profile-builder",
1114	),
1115	},
1116	]}
1117	></PanelColorSettings>
1118	<PanelColorSettings
1119	title={__(
1120	"Website Background Color",
1121	"profile-builder",
1122	)}
1123	initialOpen={false}
1124	colorSettings={[
1125	{
1126	value: profileWebsiteBackgroundColor,
1127	onChange:
1128	onChangeWebsitesBackgroundColor,
1129	label: __(
1130	"View Website Background",
1131	"profile-builder",
1132	),
1133	},
1134	]}
1135	></PanelColorSettings>
1136	<PanelColorSettings
1137	title={__(
1138	"View Website Text Color",
1139	"profile-builder",
1140	)}
1141	initialOpen={false}
1142	colorSettings={[
1143	{
1144	value: profileWebsiteTextColor,
1145	onChange:
1146	onChangeWebsiteTextColor,
1147	label: __(
1148	"View Website Text Color",
1149	"profile-builder",
1150	),
1151	},
1152	]}
1153	></PanelColorSettings>
1154	</Fragment>
1155	)}
1156	</PanelBody>
1157	<PanelBody
1158	title={__(
1159	"Spacing and Font Settings",
1160	"profile-builder",
1161	)}
1162	initialOpen={false}
1163	>
1164	<RangeControl
1165	label={__(
1166	"Header Font Size",
1167	"profile-builder",
1168	)}
1169	value={headerFontSize}
1170	onChange={(value) =>
1171	this.props.setAttributes({
1172	headerFontSize: value,
1173	})
1174	}
1175	min={14}
1176	max={32}
1177	step={1}
1178	/>
1179	<RangeControl
1180	label={__("Font Size", "profile-builder")}
1181	value={profileFontSize}
1182	onChange={(value) =>
1183	this.props.setAttributes({
1184	profileFontSize: value,
1185	})
1186	}
1187	min={14}
1188	max={24}
1189	step={1}
1190	/>
1191	{this.state.theme !== "tabbed" && (
1192	<RangeControl
1193	label={__(
1194	"Button Size",
1195	"profile-builder",
1196	)}
1197	value={buttonFontSize}
1198	onChange={(value) =>
1199	this.props.setAttributes({
1200	buttonFontSize: value,
1201	})
1202	}
1203	min={10}
1204	max={24}
1205	step={1}
1206	/>
1207	)}
1208	<RangeControl
1209	label={__("Padding", "profile-builder")}
1210	value={padding}
1211	onChange={(value) =>
1212	this.props.setAttributes({
1213	padding: value,
1214	})
1215	}
1216	min={0}
1217	max={60}
1218	step={1}
1219	/>
1220	<RangeControl
1221	label={__("Border", "profile-builder")}
1222	value={border}
1223	onChange={(value) =>
1224	this.props.setAttributes({
1225	border: value,
1226	})
1227	}
1228	min={0}
1229	max={10}
1230	step={1}
1231	/>
1232	<RangeControl
1233	label={__(
1234	"Border Rounded",
1235	"profile-builder",
1236	)}
1237	value={borderRounded}
1238	onChange={(value) =>
1239	this.props.setAttributes({
1240	borderRounded: value,
1241	})
1242	}
1243	min={0}
1244	max={10}
1245	step={1}
1246	/>
1247	<PanelColorSettings
1248	title={__(
1249	"Border Color",
1250	"profile-builder",
1251	)}
1252	initialOpen={false}
1253	colorSettings={[
1254	{
1255	value: borderColor,
1256	onChange: onChangeBorderColor,
1257	label: __(
1258	"Border Color",
1259	"profile-builder",
1260	),
1261	},
1262	]}
1263	></PanelColorSettings>
1264	</PanelBody>
1265	<PanelBody
1266	title={__(
1267	"Social Media Settings",
1268	"profile-builder",
1269	)}
1270	initialOpen={false}
1271	>
1272	<SelectControl
1273	label={__(
1274	"Social Media Colors",
1275	"profile-builder",
1276	)}
1277	value={this.state.socialMediaOptions}
1278	options={profileSocialMediaOptions}
1279	onChange={(value) => {
1280	setAttributes({
1281	socialMediaOptions: value,
1282	});
1283	this.handleSocialMediaOptionChange(
1284	value,
1285	);
1286	}}
1287	/>
1288	{this.state.socialMediaOptions === "custom" && (
1289	<PanelColorSettings
1290	title={__(
1291	"Social Media Color",
1292	"profile-builder",
1293	)}
1294	initialOpen={false}
1295	colorSettings={[
1296	{
1297	value: socialMediaColors,
1298	onChange:
1299	onChangeSocialMediaColor,
1300	label: __(
1301	"Social Media Color",
1302	"profile-builder",
1303	),
1304	},
1305	]}
1306	></PanelColorSettings>
1307	)}
1308	<TextControl
1309	label={__("Facebook", "profile-builder")}
1310	value={this.state.socialFacebook}
1311	onChange={(value) => {
1312	this.props.setAttributes({
1313	socialFacebook: value,
1314	});
1315	this.handleFacebookChange(value);
1316	}}
1317	/>
1318	<TextControl
1319	label={__("Twitter", "profile-builder")}
1320	value={this.state.socialTwitter}
1321	onChange={(value) => {
1322	this.props.setAttributes({
1323	socialTwitter: value,
1324	});
1325	this.handleTwitterChange(value);
1326	}}
1327	/>
1328	<TextControl
1329	label={__("Instagram", "profile-builder")}
1330	value={this.state.socialInstagram}
1331	onChange={(value) => {
1332	this.props.setAttributes({
1333	socialInstagram: value,
1334	});
1335	this.handleInstagramChange(value);
1336	}}
1337	/>
1338	<TextControl
1339	label={__("LinkedIn", "profile-builder")}
1340	value={this.state.socialLinkedIn}
1341	onChange={(value) => {
1342	this.props.setAttributes({
1343	socialLinkedIn: value,
1344	});
1345	this.handleLinkedInChange(value);
1346	}}
1347	/>
1348	<TextControl
1349	label={__("YouTube", "profile-builder")}
1350	value={this.state.socialYouTube}
1351	onChange={(value) => {
1352	this.props.setAttributes({
1353	socialYouTube: value,
1354	});
1355	this.handleYouTubeChange(value);
1356	}}
1357	/>
1358	<TextControl
1359	label={__("GitHub", "profile-builder")}
1360	value={this.state.socialGitHub}
1361	onChange={(value) => {
1362	this.props.setAttributes({
1363	socialGitHub: value,
1364	});
1365	this.handleGitHubChange(value);
1366	}}
1367	/>
1368	<TextControl
1369	label={__("Pinterest", "profile-builder")}
1370	value={this.state.socialPinterest}
1371	onChange={(value) => {
1372	this.props.setAttributes({
1373	socialPinterest: value,
1374	});
1375	this.handlePinterestChange(value);
1376	}}
1377	/>
1378	<TextControl
1379	label={__("WordPress", "profile-builder")}
1380	value={this.state.socialWordPress}
1381	onChange={(value) => {
1382	this.props.setAttributes({
1383	socialWordPress: value,
1384	});
1385	this.handleWordPressChange(value);
1386	}}
1387	/>
1388	</PanelBody>
1389	</InspectorControls>
1390	{this.state.theme !== "tabbed" && (
1391	<div
1392	className={classnames(
1393	"mpp-enhanced-profile-wrap",
1394	this.state.theme,
1395	profileAlignment,
1396	profileAvatarShape,
1397	"mpp-block-profile",
1398	)}
1399	style={{
1400	padding: padding + "px",
1401	border: border + "px solid " + borderColor,
1402	borderRadius: borderRounded + "px",
1403	backgroundColor: profileBackgroundColor,
1404	color: profileTextColor,
1405	float: profileFloat,
1406	margin: profileMargin,
1407	}}
1408	>
1409	{this.state.theme === "regular" && (
1410	<Fragment>
1411	<div
1412	className={classnames(
1413	"mpp-profile-gutenberg-wrap",
1414	"mt-font-size-" +
1415	profileFontSize,
1416	)}
1417	>
1418	<div className="mpp-profile-image-wrapper">
1419	<div className="mpp-profile-image-square">
1420	<MediaUpload
1421	buttonProps={{
1422	className:
1423	"change-image",
1424	}}
1425	onSelect={(img) => {
1426	this.handleImageChange(
1427	img.id,
1428	img.url,
1429	);
1430	setAttributes({
1431	profileImgID:
1432	img.id,
1433	profileImgURL:
1434	img.url,
1435	});
1436	}}
1437	type="image"
1438	value={profileImgID}
1439	render={({ open }) => (
1440	<Button
1441	onClick={open}
1442	>
1443	{!profileImgID ? (
1444	<img
1445	src={
1446	profileImgURL
1447	}
1448	alt="placeholder"
1449	/>
1450	) : (
1451	<img
1452	className="profile-avatar"
1453	src={
1454	profileImgURL
1455	}
1456	alt="avatar"
1457	/>
1458	)}
1459	</Button>
1460	)}
1461	></MediaUpload>
1462	</div>
1463	</div>
1464	<div className="mpp-content-wrap">
1465	{showName && (
1466	<RichText
1467	tagName="h2"
1468	placeholder={__(
1469	"Add name",
1470	"profile-builder",
1471	)}
1472	value={profileName}
1473	className="mpp-profile-name"
1474	style={{
1475	color: profileTextColor,
1476	fontSize:
1477	headerFontSize +
1478	"px",
1479	}}
1480	onChange={(value) => {
1481	this.onChangeName(
1482	value,
1483	);
1484	setAttributes({
1485	profileName:
1486	value,
1487	});
1488	}}
1489	/>
1490	)}
1491	{showTitle && (
1492	<RichText
1493	tagName="p"
1494	placeholder={__(
1495	"Add title",
1496	"atomic-blocks",
1497	)}
1498	value={profileTitle}
1499	className="mpp-profile-title"
1500	style={{
1501	color: profileTextColor,
1502	}}
1503	onChange={(value) => {
1504	this.onChangeTitle(
1505	value,
1506	);
1507	setAttributes({
1508	profileTitle:
1509	value,
1510	});
1511	}}
1512	/>
1513	)}
1514	{showDescription && (
1515	<RichText
1516	tagName="div"
1517	className="mpp-profile-text"
1518	placeholder={__(
1519	"Add profile text...",
1520	"profile-builder",
1521	)}
1522	value={profileContent}
1523	formattingControls={[
1524	"bold",
1525	"italic",
1526	"strikethrough",
1527	"link",
1528	]}
1529	onChange={(value) => {
1530	this.onChangeProfileText(
1531	value,
1532	);
1533	setAttributes({
1534	profileContent:
1535	value,
1536	});
1537	}}
1538	/>
1539	)}
1540	</div>
1541	</div>
1542	{profileURL && !!profileURL.length && (
1543	<div
1544	className="mpp-gutenberg-view-posts"
1545	style={{
1546	width: showPostsWidth,
1547	}}
1548	>
1549	{showViewPosts && (
1550	<div
1551	className="mpp-profile-view-posts"
1552	style={{
1553	backgroundColor:
1554	profileViewPostsBackgroundColor,
1555	color: profileViewPostsTextColor,
1556	width: showPostsWidth,
1557	fontSize:
1558	buttonFontSize +
1559	"px",
1560	}}
1561	>
1562	<a
1563	href={profileURL}
1564	style={{
1565	backgroundColor:
1566	profileViewPostsBackgroundColor,
1567	color: profileViewPostsTextColor,
1568	}}
1569	>
1570	{profileViewPosts}
1571	</a>
1572	</div>
1573	)}
1574	{this.state.website != "" &&
1575	showWebsite && (
1576	<div
1577	className="mpp-profile-view-website"
1578	style={{
1579	backgroundColor:
1580	profileWebsiteBackgroundColor,
1581	color: profileWebsiteTextColor,
1582	fontSize:
1583	buttonFontSize +
1584	"px",
1585	}}
1586	>
1587	<a
1588	href={
1589	this.state
1590	.website
1591	}
1592	style={{
1593	backgroundColor:
1594	profileWebsiteBackgroundColor,
1595	color: profileWebsiteTextColor,
1596	}}
1597	>
1598	{
1599	profileViewWebsite
1600	}
1601	</a>
1602	</div>
1603	)}
1604	</div>
1605	)}
1606	</Fragment>
1607	)}
1608	{this.state.theme === "profile" && (
1609	<div
1610	className={classnames(
1611	"mpp-profile-gutenberg-wrap",
1612	"mt-font-size-" + profileFontSize,
1613	)}
1614	>
1615	{showName && (
1616	<RichText
1617	tagName="h2"
1618	placeholder={__(
1619	"Add name",
1620	"profile-builder",
1621	)}
1622	value={profileName}
1623	className="mpp-profile-name"
1624	style={{
1625	color: profileTextColor,
1626	fontSize:
1627	headerFontSize + "px",
1628	}}
1629	onChange={(value) => {
1630	this.onChangeName(value);
1631	setAttributes({
1632	profileName: value,
1633	});
1634	}}
1635	/>
1636	)}
1637	<div className="mpp-profile-image-wrapper">
1638	<div className="mpp-profile-image-square">
1639	<MediaUpload
1640	buttonProps={{
1641	className:
1642	"change-image",
1643	}}
1644	onSelect={(img) => {
1645	this.handleImageChange(
1646	img.id,
1647	img.url,
1648	);
1649	setAttributes({
1650	profileImgID:
1651	img.id,
1652	profileImgURL:
1653	img.url,
1654	});
1655	}}
1656	type="image"
1657	value={profileImgID}
1658	render={({ open }) => (
1659	<Button onClick={open}>
1660	{!profileImgID ? (
1661	<img
1662	src={
1663	profileImgURL
1664	}
1665	alt="placeholder"
1666	/>
1667	) : (
1668	<img
1669	className="profile-avatar"
1670	src={
1671	profileImgURL
1672	}
1673	alt="avatar"
1674	/>
1675	)}
1676	</Button>
1677	)}
1678	></MediaUpload>
1679	</div>
1680	</div>
1681	{showDescription && (
1682	<RichText
1683	tagName="div"
1684	className="mpp-profile-text"
1685	placeholder={__(
1686	"Add profile text...",
1687	"profile-builder",
1688	)}
1689	value={profileContent}
1690	formattingControls={[
1691	"bold",
1692	"italic",
1693	"strikethrough",
1694	"link",
1695	]}
1696	onChange={(value) => {
1697	this.onChangeProfileText(
1698	value,
1699	);
1700	setAttributes({
1701	profileContent: value,
1702	});
1703	}}
1704	/>
1705	)}
1706	<div
1707	className="mpp-profile-meta"
1708	style={{
1709	fontSize: buttonFontSize + "px",
1710	}}
1711	>
1712	{showViewPosts && (
1713	<div className="mpp-profile-link alignleft">
1714	<a
1715	href={
1716	this.state
1717	.profile_url
1718	}
1719	style={{
1720	color: profileLinkColor,
1721	}}
1722	>
1723	{__(
1724	"View all posts by",
1725	"profile-builder",
1726	)}{" "}
1727	{
1728	this.state
1729	.profile_name_unfiltered
1730	}
1731	</a>
1732	</div>
1733	)}
1734	{this.state.website != "" &&
1735	showWebsite && (
1736	<div className="mpp-profile-link alignright">
1737	<a
1738	href={
1739	this.state
1740	.website
1741	}
1742	style={{
1743	color: profileLinkColor,
1744	}}
1745	>
1746	{__(
1747	"Website",
1748	"profile-builder",
1749	)}
1750	</a>
1751	</div>
1752	)}
1753	</div>
1754	</div>
1755	)}
1756	{this.state.theme === "compact" && (
1757	<div
1758	className={classnames(
1759	"mpp-profile-gutenberg-wrap",
1760	"mt-font-size-" + profileFontSize,
1761	)}
1762	>
1763	{showName && (
1764	<RichText
1765	tagName="h2"
1766	placeholder={__(
1767	"Add name",
1768	"profile-builder",
1769	)}
1770	value={profileName}
1771	className="mpp-profile-name"
1772	style={{
1773	color: profileTextColor,
1774	fontSize:
1775	headerFontSize + "px",
1776	}}
1777	onChange={(value) => {
1778	this.onChangeName(value);
1779	setAttributes({
1780	profileName: value,
1781	});
1782	}}
1783	/>
1784	)}
1785	<div className="mpp-profile-image-wrapper">
1786	<div className="mpp-profile-image-square">
1787	<MediaUpload
1788	buttonProps={{
1789	className:
1790	"change-image",
1791	}}
1792	onSelect={(img) => {
1793	this.handleImageChange(
1794	img.id,
1795	img.url,
1796	);
1797	setAttributes({
1798	profileImgID:
1799	img.id,
1800	profileImgURL:
1801	img.url,
1802	});
1803	}}
1804	type="image"
1805	value={profileImgID}
1806	render={({ open }) => (
1807	<Button onClick={open}>
1808	{!profileImgID ? (
1809	<img
1810	src={
1811	profileImgURL
1812	}
1813	alt="placeholder"
1814	/>
1815	) : (
1816	<img
1817	className="profile-avatar"
1818	src={
1819	profileImgURL
1820	}
1821	alt="avatar"
1822	/>
1823	)}
1824	</Button>
1825	)}
1826	></MediaUpload>
1827	</div>
1828	</div>
1829	{showDescription && (
1830	<RichText
1831	tagName="div"
1832	className="mpp-profile-text"
1833	placeholder={__(
1834	"Add profile text...",
1835	"profile-builder",
1836	)}
1837	value={profileContent}
1838	formattingControls={[
1839	"bold",
1840	"italic",
1841	"strikethrough",
1842	"link",
1843	]}
1844	onChange={(value) => {
1845	this.onChangeProfileText(
1846	value,
1847	);
1848	setAttributes({
1849	profileContent: value,
1850	});
1851	}}
1852	/>
1853	)}
1854	<div className="mpp-compact-meta">
1855	{showViewPosts && (
1856	<div
1857	className="mpp-profile-view-posts"
1858	style={{
1859	backgroundColor:
1860	profileViewPostsBackgroundColor,
1861	color: profileViewPostsTextColor,
1862	width: "90%",
1863	margin: "0 auto 10px auto",
1864	fontSize:
1865	buttonFontSize +
1866	"px",
1867	}}
1868	>
1869	<a
1870	href={profileURL}
1871	style={{
1872	backgroundColor:
1873	profileViewPostsBackgroundColor,
1874	color: profileViewPostsTextColor,
1875	}}
1876	>
1877	{__(
1878	"View Posts",
1879	"profile-builder",
1880	)}
1881	</a>
1882	</div>
1883	)}
1884	{this.state.website != "" &&
1885	showWebsite && (
1886	<div
1887	className="mpp-profile-view-website"
1888	style={{
1889	backgroundColor:
1890	profileWebsiteBackgroundColor,
1891	color: profileWebsiteTextColor,
1892	fontSize:
1893	buttonFontSize +
1894	"px",
1895	width: "90%",
1896	margin: "0 auto",
1897	}}
1898	>
1899	<a
1900	href={
1901	this.state
1902	.website
1903	}
1904	style={{
1905	backgroundColor:
1906	profileWebsiteBackgroundColor,
1907	color: profileWebsiteTextColor,
1908	}}
1909	>
1910	{__(
1911	"View Website",
1912	"profile-builder",
1913	)}
1914	</a>
1915	</div>
1916	)}
1917	</div>
1918	</div>
1919	)}
1920	{this.state.showSocialMedia == true &&
1921	(this.state.theme === "regular" \|\|
1922	this.state.theme === "compact" \|\|
1923	this.state.theme === "profile") && (
1924	<div className="mpp-social">
1925	{this.state.socialFacebook !=
1926	"" && (
1927	<a
1928	href={
1929	this.state
1930	.socialFacebook
1931	}
1932	>
1933	<svg
1934	className="icon icon-facebook"
1935	role="img"
1936	style={{
1937	fill:
1938	this.state
1939	.socialMediaOptions ===
1940	"custom"
1941	? socialMediaColors
1942	: "",
1943	}}
1944	>
1945	<use href="#facebook"></use>
1946	</svg>
1947	</a>
1948	)}
1949	{this.state.socialTwitter != "" && (
1950	<a
1951	href={
1952	this.state.socialTwitter
1953	}
1954	>
1955	<svg
1956	className="icon icon-twitter"
1957	role="img"
1958	style={{
1959	fill:
1960	this.state
1961	.socialMediaOptions ===
1962	"custom"
1963	? socialMediaColors
1964	: "",
1965	}}
1966	>
1967	<use href="#twitter"></use>
1968	</svg>
1969	</a>
1970	)}
1971	{this.state.socialInstagram !=
1972	"" && (
1973	<a
1974	href={
1975	this.state
1976	.socialInstagram
1977	}
1978	>
1979	<svg
1980	className="icon icon-instagram"
1981	role="img"
1982	style={{
1983	fill:
1984	this.state
1985	.socialMediaOptions ===
1986	"custom"
1987	? socialMediaColors
1988	: "",
1989	}}
1990	>
1991	<use href="#instagram"></use>
1992	</svg>
1993	</a>
1994	)}
1995	{this.state.socialPinterest !=
1996	"" && (
1997	<a
1998	href={
1999	this.state
2000	.socialPinterest
2001	}
2002	>
2003	<svg
2004	className="icon icon-pinterest"
2005	role="img"
2006	style={{
2007	fill:
2008	this.state
2009	.socialMediaOptions ===
2010	"custom"
2011	? socialMediaColors
2012	: "",
2013	}}
2014	>
2015	<use href="#pinterest"></use>
2016	</svg>
2017	</a>
2018	)}
2019	{this.state.socialLinkedIn !=
2020	"" && (
2021	<a
2022	href={
2023	this.state
2024	.socialLinkedIn
2025	}
2026	>
2027	<svg
2028	className="icon icon-linkedin"
2029	role="img"
2030	style={{
2031	fill:
2032	this.state
2033	.socialMediaOptions ===
2034	"custom"
2035	? socialMediaColors
2036	: "",
2037	}}
2038	>
2039	<use href="#linkedin"></use>
2040	</svg>
2041	</a>
2042	)}
2043	{this.state.socialYouTube != "" && (
2044	<a
2045	href={
2046	this.state.socialYouTube
2047	}
2048	>
2049	<svg
2050	className="icon icon-youtube"
2051	role="img"
2052	style={{
2053	fill:
2054	this.state
2055	.socialMediaOptions ===
2056	"custom"
2057	? socialMediaColors
2058	: "",
2059	}}
2060	>
2061	<use href="#youtube"></use>
2062	</svg>
2063	</a>
2064	)}
2065	{this.state.socialGitHub != "" && (
2066	<a
2067	href={
2068	this.state.socialGitHub
2069	}
2070	>
2071	<svg
2072	className="icon icon-github"
2073	role="img"
2074	style={{
2075	fill:
2076	this.state
2077	.socialMediaOptions ===
2078	"custom"
2079	? socialMediaColors
2080	: "",
2081	}}
2082	>
2083	<use href="#github"></use>
2084	</svg>
2085	</a>
2086	)}
2087	{this.state.socialWordPress !=
2088	"" && (
2089	<a
2090	href={
2091	this.state
2092	.socialWordPress
2093	}
2094	>
2095	<svg
2096	className="icon icon-wordpress"
2097	role="img"
2098	style={{
2099	fill:
2100	this.state
2101	.socialMediaOptions ===
2102	"custom"
2103	? socialMediaColors
2104	: "",
2105	}}
2106	>
2107	<use href="#wordpress"></use>
2108	</svg>
2109	</a>
2110	)}
2111	</div>
2112	)}
2113	</div>
2114	)}
2115	{this.state.theme === "tabbed" && (
2116	<Fragment>
2117	<div
2118	className={classnames(
2119	"mpp-author-tabbed",
2120	this.state.theme,
2121	profileAlignment,
2122	profileAvatarShape,
2123	"mpp-block-profile",
2124	)}
2125	>
2126	<ul className="mpp-author-tabs">
2127	<li
2128	className={classnames(
2129	"mpp-tab-profile",
2130	this.state.activeTab ===
2131	"profile"
2132	? "active"
2133	: "",
2134	)}
2135	onClick={
2136	this.onChangeActiveProfileTab
2137	}
2138	style={{
2139	backgroundColor:
2140	this.state.profileTabColor,
2141	color: this.state
2142	.profileTabTextColor,
2143	}}
2144	>
2145	<RichText
2146	tagName="span"
2147	placeholder={__(
2148	"Add tab name.",
2149	"profile-builder",
2150	)}
2151	value={
2152	this.state
2153	.tabbedAuthorProfile
2154	}
2155	formattingControls={[]}
2156	onChange={(value) => {
2157	this.onChangetabbedAuthorProfile(
2158	value,
2159	);
2160	setAttributes({
2161	tabbedAuthorProfile:
2162	value,
2163	});
2164	}}
2165	/>
2166	</li>
2167	<li
2168	className={classnames(
2169	"mpp-tab-posts",
2170	this.state.activeTab ===
2171	"latest"
2172	? "active"
2173	: "",
2174	)}
2175	onClick={this.onChangeActivePostTab}
2176	style={{
2177	backgroundColor:
2178	this.state
2179	.profileTabPostsColor,
2180	color: this.state
2181	.profileTabPostsTextColor,
2182	}}
2183	>
2184	<RichText
2185	tagName="span"
2186	placeholder={__(
2187	"Add tab name.",
2188	"profile-builder",
2189	)}
2190	value={
2191	this.state
2192	.tabbedAuthorLatestPosts
2193	}
2194	formattingControls={[]}
2195	onChange={(value) => {
2196	this.onChangetabbedAuthorLatestPosts(
2197	value,
2198	);
2199	setAttributes({
2200	tabbedAuthorLatestPosts:
2201	value,
2202	});
2203	}}
2204	/>
2205	</li>
2206	</ul>
2207	<div
2208	className="mpp-tab-wrapper"
2209	style={{
2210	padding: padding + "px",
2211	border:
2212	border +
2213	"px solid " +
2214	borderColor,
2215	borderRadius: borderRounded + "px",
2216	backgroundColor:
2217	profileBackgroundColor,
2218	color: profileTextColor,
2219	}}
2220	>
2221	{this.state.activeTab === "profile" && (
2222	<Fragment>
2223	<div className="mpp-author-social-wrapper">
2224	<div className="mpp-author-heading">
2225	<RichText
2226	tagName="div"
2227	className="mpp-author-profile-heading"
2228	value={
2229	this.state
2230	.tabbedAuthorProfileHeading
2231	}
2232	formattingControls={[]}
2233	onChange={(
2234	value,
2235	) => {
2236	this.onChangetabbedAuthorProfileHeading(
2237	value,
2238	);
2239	setAttributes({
2240	profileTabHeadlineTextColor:
2241	value,
2242	});
2243	}}
2244	style={{
2245	backgroundColor:
2246	this.state
2247	.profileTabHeadlineColor,
2248	color: this
2249	.state
2250	.profileTabHeadlineTextColor,
2251	}}
2252	/>
2253	</div>
2254	{this.state
2255	.showSocialMedia && (
2256	<div className="mpp-author-social">
2257	<div className="mpp-social">
2258	{this.state
2259	.socialFacebook !=
2260	"" && (
2261	<a
2262	href={
2263	this
2264	.state
2265	.socialFacebook
2266	}
2267	>
2268	<svg
2269	className="icon icon-facebook"
2270	role="img"
2271	style={{
2272	fill:
2273	this
2274	.state
2275	.socialMediaOptions ===
2276	"custom"
2277	? socialMediaColors
2278	: "",
2279	}}
2280	>
2281	<use href="#facebook"></use>
2282	</svg>
2283	</a>
2284	)}
2285	{this.state
2286	.socialTwitter !=
2287	"" && (
2288	<a
2289	href={
2290	this
2291	.state
2292	.socialTwitter
2293	}
2294	>
2295	<svg
2296	className="icon icon-twitter"
2297	role="img"
2298	style={{
2299	fill:
2300	this
2301	.state
2302	.socialMediaOptions ===
2303	"custom"
2304	? socialMediaColors
2305	: "",
2306	}}
2307	>
2308	<use href="#twitter"></use>
2309	</svg>
2310	</a>
2311	)}
2312	{this.state
2313	.socialInstagram !=
2314	"" && (
2315	<a
2316	href={
2317	this
2318	.state
2319	.socialInstagram
2320	}
2321	>
2322	<svg
2323	className="icon icon-instagram"
2324	role="img"
2325	style={{
2326	fill:
2327	this
2328	.state
2329	.socialMediaOptions ===
2330	"custom"
2331	? socialMediaColors
2332	: "",
2333	}}
2334	>
2335	<use href="#instagram"></use>
2336	</svg>
2337	</a>
2338	)}
2339	{this.state
2340	.socialPinterest !=
2341	"" && (
2342	<a
2343	href={
2344	this
2345	.state
2346	.socialPinterest
2347	}
2348	>
2349	<svg
2350	className="icon icon-pinterest"
2351	role="img"
2352	style={{
2353	fill:
2354	this
2355	.state
2356	.socialMediaOptions ===
2357	"custom"
2358	? socialMediaColors
2359	: "",
2360	}}
2361	>
2362	<use href="#pinterest"></use>
2363	</svg>
2364	</a>
2365	)}
2366	{this.state
2367	.socialLinkedIn !=
2368	"" && (
2369	<a
2370	href={
2371	this
2372	.state
2373	.socialLinkedIn
2374	}
2375	>
2376	<svg
2377	className="icon icon-linkedin"
2378	role="img"
2379	style={{
2380	fill:
2381	this
2382	.state
2383	.socialMediaOptions ===
2384	"custom"
2385	? socialMediaColors
2386	: "",
2387	}}
2388	>
2389	<use href="#linkedin"></use>
2390	</svg>
2391	</a>
2392	)}
2393	{this.state
2394	.socialYouTube !=
2395	"" && (
2396	<a
2397	href={
2398	this
2399	.state
2400	.socialYouTube
2401	}
2402	>
2403	<svg
2404	className="icon icon-youtube"
2405	role="img"
2406	style={{
2407	fill:
2408	this
2409	.state
2410	.socialMediaOptions ===
2411	"custom"
2412	? socialMediaColors
2413	: "",
2414	}}
2415	>
2416	<use href="#youtube"></use>
2417	</svg>
2418	</a>
2419	)}
2420	{this.state
2421	.socialGitHub !=
2422	"" && (
2423	<a
2424	href={
2425	this
2426	.state
2427	.socialGitHub
2428	}
2429	>
2430	<svg
2431	className="icon icon-github"
2432	role="img"
2433	style={{
2434	fill:
2435	this
2436	.state
2437	.socialMediaOptions ===
2438	"custom"
2439	? socialMediaColors
2440	: "",
2441	}}
2442	>
2443	<use href="#github"></use>
2444	</svg>
2445	</a>
2446	)}
2447	{this.state
2448	.socialWordPress !=
2449	"" && (
2450	<a
2451	href={
2452	this
2453	.state
2454	.socialWordPress
2455	}
2456	>
2457	<svg
2458	className="icon icon-wordpress"
2459	role="img"
2460	style={{
2461	fill:
2462	this
2463	.state
2464	.socialMediaOptions ===
2465	"custom"
2466	? socialMediaColors
2467	: "",
2468	}}
2469	>
2470	<use href="#wordpress"></use>
2471	</svg>
2472	</a>
2473	)}
2474	</div>
2475	</div>
2476	)}
2477	</div>
2478	<div className="mpp-profile-image-wrapper">
2479	<div className="mpp-profile-image-square">
2480	<MediaUpload
2481	buttonProps={{
2482	className:
2483	"change-image",
2484	}}
2485	onSelect={(img) => {
2486	this.handleImageChange(
2487	img.id,
2488	img.url,
2489	);
2490	setAttributes({
2491	profileImgID:
2492	img.id,
2493	profileImgURL:
2494	img.url,
2495	});
2496	}}
2497	type="image"
2498	value={profileImgID}
2499	render={({
2500	open,
2501	}) => (
2502	<Button
2503	onClick={
2504	open
2505	}
2506	>
2507	{!profileImgID ? (
2508	<img
2509	src={
2510	profileImgURL
2511	}
2512	alt="placeholder"
2513	/>
2514	) : (
2515	<img
2516	className="profile-avatar"
2517	src={
2518	profileImgURL
2519	}
2520	alt="avatar"
2521	/>
2522	)}
2523	</Button>
2524	)}
2525	></MediaUpload>
2526	<RichText
2527	tagName="div"
2528	className="mpp-author-profile-sub-heading"
2529	placeholder={__(
2530	"Add profile description...",
2531	"profile-builder",
2532	)}
2533	value={
2534	this.state
2535	.tabbedAuthorSubHeading
2536	}
2537	formattingControls={[
2538	"bold",
2539	"italic",
2540	"strikethrough",
2541	"link",
2542	]}
2543	onChange={(
2544	value,
2545	) => {
2546	this.onChangeTabbedSubHeading(
2547	value,
2548	);
2549	setAttributes({
2550	tabbedAuthorSubHeading:
2551	value,
2552	});
2553	}}
2554	/>
2555	</div>
2556	</div>
2557	<div className="mpp-tabbed-profile-information">
2558	{showTitle && (
2559	<RichText
2560	tagName="div"
2561	className="mpp-author-profile-title"
2562	placeholder={__(
2563	"Add profile title...",
2564	"profile-builder",
2565	)}
2566	value={
2567	tabbedAuthorProfileTitle
2568	}
2569	formattingControls={[
2570	"bold",
2571	"italic",
2572	"strikethrough",
2573	"link",
2574	]}
2575	onChange={(
2576	value,
2577	) => {
2578	setAttributes({
2579	tabbedAuthorProfileTitle:
2580	value,
2581	});
2582	}}
2583	/>
2584	)}
2585	{showName && (
2586	<RichText
2587	tagName="h2"
2588	placeholder={__(
2589	"Add name",
2590	"profile-builder",
2591	)}
2592	value={profileName}
2593	className="mpp-profile-name"
2594	style={{
2595	color: profileTextColor,
2596	fontSize:
2597	headerFontSize +
2598	"px",
2599	}}
2600	onChange={(
2601	value,
2602	) => {
2603	this.onChangeName(
2604	value,
2605	);
2606	setAttributes({
2607	profileName:
2608	value,
2609	});
2610	}}
2611	/>
2612	)}
2613	{showDescription && (
2614	<RichText
2615	tagName="div"
2616	className={classnames(
2617	"mpp-profile-text",
2618	"mt-font-size-" +
2619	profileFontSize,
2620	)}
2621	placeholder={__(
2622	"Add profile text...",
2623	"profile-builder",
2624	)}
2625	value={
2626	profileContent
2627	}
2628	formattingControls={[
2629	"bold",
2630	"italic",
2631	"strikethrough",
2632	"link",
2633	]}
2634	onChange={(
2635	value,
2636	) => {
2637	this.onChangeProfileText(
2638	value,
2639	);
2640	setAttributes({
2641	profileContent:
2642	value,
2643	});
2644	}}
2645	/>
2646	)}
2647	</div>
2648	</Fragment>
2649	)}
2650	{this.state.activeTab === "latest" && (
2651	<Fragment>
2652	{this.state
2653	.loadingLatestPosts && (
2654	<Fragment>
2655	<div>
2656	<div className="mpp-spinner">
2657	<Spinner />
2658	</div>
2659	</div>
2660	</Fragment>
2661	)}
2662	{!this.state
2663	.loadingLatestPosts && (
2664	<Fragment>
2665	<ul
2666	className={classnames(
2667	"mpp-author-tab-content",
2668	this.state
2669	.profileLatestPostsOptionsValue,
2670	)}
2671	>
2672	{
2673	this.state
2674	.latestPosts
2675	}
2676	</ul>
2677	</Fragment>
2678	)}
2679	</Fragment>
2680	)}
2681	</div>
2682	</div>
2683	</Fragment>
2684	)}
2685	</Fragment>
2686	)}
2687	</Fragment>
2688	);
2689	}
2690	}
2691
2692	export default MPP_Gutenberg_Enhanced;
2693