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

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

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

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

358 lines 12.6 KB

Raw Download Zip

1	/**
2	* BLOCK: wp-plugin-info-card
3	*
4	* Registering a basic block with Gutenberg.
5	* Simple block, renders and saves the same content without any interactivity.
6	*/
7
8	// Import CSS.
9	import "./style.scss";
10	import "./editor.scss";
11	/**
12	* BLOCK: Basic with ESNext
13	*
14	* Registering a basic block with Gutenberg.
15	* Simple block, renders and saves the same content without any interactivity.
16	*
17	* Using inline styles - no external stylesheet needed. Not recommended!
18	* because all of these styles will appear in `post_content`.
19	*/
20
21	const { __ } = wp.i18n; // Import __() from wp.i18n
22	const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
23
24	// Import JS
25	import edit from "./profile";
26	import legacyEdit from "./profile-legacy";
27
28	// Extend component
29	const { Component, Fragment } = wp.element;
30
31	export const legacy_name = "mpp/user-profile";
32	export const name = "mpp/user-profile-enhanced";
33
34	// Import block dependencies and components
35	import classnames from "classnames";
36
37	const { RichText } = wp.editor;
38
39	const blockAttributes = {
40	profileName: {
41	type: "string",
42	default: "",
43	},
44	profileTitle: {
45	type: "string",
46	default: "",
47	},
48	profileContent: {
49	type: "string",
50	default: "",
51	},
52	profileAlignment: {
53	type: "string",
54	},
55	profileImgURL: {
56	type: "string",
57	source: "attribute",
58	attribute: "src",
59	selector: "img",
60	default: "",
61	},
62	profileImgID: {
63	type: "number",
64	default: "",
65	},
66	profileURL: {
67	type: "string",
68	default: "",
69	},
70	profileBackgroundColor: {
71	type: "string",
72	default: "#f2f2f2",
73	},
74	profileTextColor: {
75	type: "string",
76	default: "#32373c",
77	},
78	profileViewPostsBackgroundColor: {
79	type: "string",
80	default: "#cf6d38",
81	},
82	profileViewPostsTextColor: {
83	type: "string",
84	default: "#FFFFFF",
85	},
86	profileViewPostsWidth: {
87	type: "number",
88	default: 100,
89	},
90	profileFontSize: {
91	type: "number",
92	default: 18,
93	},
94	profileAvatarShape: {
95	type: "string",
96	default: "square",
97	},
98	showName: {
99	type: "boolean",
100	default: true,
101	},
102	showTitle: {
103	type: "boolean",
104	default: true,
105	},
106	showDescription: {
107	type: "boolean",
108	default: true,
109	},
110	showViewPosts: {
111	type: "boolean",
112	default: true,
113	},
114	user_id: {
115	type: "number",
116	default: 0,
117	},
118	};
119
120	registerBlockType("mpp/user-profile", {
121	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
122	title: __("User Profile Legacy", "profile-builder"), // Block title.
123	icon: (
124	<svg
125	id="Layer_1"
126	data-name="Layer 1"
127	xmlns="http://www.w3.org/2000/svg"
128	viewBox="0 0 753.53 979.74"
129	>
130	<title>upp</title>
131	<path
132	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"
133	transform="translate(-123.47 -11)"
134	fill="#4063ad"
135	/>
136	<path
137	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"
138	transform="translate(-123.47 -11)"
139	fill="#a34d9c"
140	/>
141	<path
142	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"
143	transform="translate(-123.47 -11)"
144	fill="#a34d9c"
145	/>
146	<path
147	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"
148	transform="translate(-123.47 -11)"
149	fill="#f4831f"
150	/>
151	<path
152	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"
153	transform="translate(-123.47 -11)"
154	fill="#f4831f"
155	/>
156	<path
157	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"
158	transform="translate(-123.47 -11)"
159	fill="#4063ad"
160	/>
161	</svg>
162	),
163	category: "mpp", // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
164	// Setup the block attributes
165	attributes: blockAttributes,
166
167	edit: legacyEdit,
168
169	save(props) {
170	const {
171	profileName,
172	profileTitle,
173	profileContent,
174	profileAlignment,
175	profileImgURL,
176	profileImgID,
177	profileFontSize,
178	profileBackgroundColor,
179	profileTextColor,
180	profileLinkColor,
181	profileAvatarShape,
182	profileViewPostsBackgroundColor,
183	profileViewPostsTextColor,
184	profileURL,
185	showTitle,
186	showName,
187	showDescription,
188	showViewPosts,
189	} = props.attributes;
190
191	return (
192	<Fragment>
193	<div
194	className={classnames(
195	"mpp-profile-wrap",
196	profileAlignment,
197	profileAvatarShape,
198	"mt-font-size-" + profileFontSize,
199	"mpp-block-profile",
200	)}
201	style={{
202	backgroundColor: profileBackgroundColor,
203	color: profileTextColor,
204	}}
205	>
206	<div
207	className={classnames(
208	"mpp-profile-gutenberg-wrap",
209	"mpp-block-profile",
210	)}
211	style={{
212	backgroundColor: profileBackgroundColor,
213	color: profileTextColor,
214	}}
215	>
216	<div className="mpp-profile-image-wrapper">
217	<div className="mpp-profile-image-square">
218	<img
219	className="mpp-profile-avatar"
220	src={profileImgURL}
221	alt="avatar"
222	/>
223	</div>
224	</div>
225	<div className="mpp-content-wrap">
226	{profileName &&
227	!!profileName.length &&
228	showName && (
229	<RichText.Content
230	tagName="h2"
231	className="mpp-profile-name"
232	style={{
233	color: profileTextColor,
234	}}
235	value={profileName}
236	/>
237	)}
238
239	{profileTitle &&
240	!!profileTitle.length &&
241	showTitle && (
242	<RichText.Content
243	tagName="p"
244	className="mpp-profile-title"
245	style={{
246	color: profileTextColor,
247	}}
248	value={profileTitle}
249	/>
250	)}
251
252	{profileContent &&
253	!!profileContent.length &&
254	showDescription && (
255	<RichText.Content
256	tagName="div"
257	className="mpp-profile-text"
258	value={profileContent}
259	/>
260	)}
261	</div>
262	</div>
263	{profileURL && !!profileURL.length && (
264	<div className="mpp-gutenberg-view-posts">
265	{showViewPosts && (
266	<div
267	className="mpp-profile-view-posts"
268	style={{
269	backgroundColor:
270	profileViewPostsBackgroundColor,
271	color: profileViewPostsTextColor,
272	}}
273	>
274	<a
275	href={profileURL}
276	style={{
277	backgroundColor:
278	profileViewPostsBackgroundColor,
279	color: profileViewPostsTextColor,
280	}}
281	>
282	{__("View Posts", "profile-builder")}
283	</a>
284	</div>
285	)}
286	</div>
287	)}
288	</div>
289	</Fragment>
290	);
291	},
292	});
293
294	/**
295	* Register Basic Block.
296	*
297	* Registers a new block provided a unique name and an object defining its
298	* behavior. Once registered, the block is made available as an option to any
299	* editor interface where blocks are implemented.
300	*
301	* @param {string} name Block name.
302	* @param {Object} settings Block settings.
303	* @return {?WPBlock} The block, if it has been successfully
304	* registered; otherwise `undefined`.
305	*/
306	registerBlockType("mpp/user-profile-enhanced", {
307	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
308	title: __("User Profile", "profile-builder"), // Block title.
309	icon: (
310	<svg
311	id="Layer_1"
312	data-name="Layer 1"
313	xmlns="http://www.w3.org/2000/svg"
314	viewBox="0 0 753.53 979.74"
315	>
316	<title>upp</title>
317	<path
318	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"
319	transform="translate(-123.47 -11)"
320	fill="#4063ad"
321	/>
322	<path
323	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"
324	transform="translate(-123.47 -11)"
325	fill="#a34d9c"
326	/>
327	<path
328	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"
329	transform="translate(-123.47 -11)"
330	fill="#a34d9c"
331	/>
332	<path
333	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"
334	transform="translate(-123.47 -11)"
335	fill="#f4831f"
336	/>
337	<path
338	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"
339	transform="translate(-123.47 -11)"
340	fill="#f4831f"
341	/>
342	<path
343	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"
344	transform="translate(-123.47 -11)"
345	fill="#4063ad"
346	/>
347	</svg>
348	),
349	category: "mpp", // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
350	// Setup the block attributes
351	getEditWrapperProps(attributes) {},
352	edit: edit,
353
354	save() {
355	return null;
356	},
357	});
358