Block Animations, Motion & Scroll Effects – Ghost Kit / 3.4.1

Block Animations, Motion & Scroll Effects – Ghost Kit v3.4.1

ghostkit / gutenberg / blocks / image-compare / save.js

save.js in Block Animations, Motion & Scroll Effects – Ghost Kit 3.4.1, at gutenberg/blocks/image-compare/save.js

131 lines 3.5 KB

Raw Download Zip

1	import classnames from 'classnames/dedupe';
2
3	import { RichText, useBlockProps } from '@wordpress/block-editor';
4
5	/**
6	* Block Save Class.
7	*
8	* @param props
9	*/
10	export default function BlockSave(props) {
11	const { attributes } = props;
12	const {
13	direction,
14	trigger,
15	caption,
16
17	showLabels,
18	labelBeforeText,
19	labelAfterText,
20	labelAlign,
21
22	beforeId,
23	beforeUrl,
24	beforeAlt,
25	beforeWidth,
26	beforeHeight,
27
28	afterId,
29	afterUrl,
30	afterAlt,
31	afterWidth,
32	afterHeight,
33	} = attributes;
34
35	if (!beforeUrl \|\| !afterUrl) {
36	return null;
37	}
38
39	let { className } = attributes;
40
41	className = classnames(
42	'ghostkit-image-compare',
43	direction === 'vertical' ? 'ghostkit-image-compare-vertical' : false,
44	trigger ? `ghostkit-image-compare-trigger-${trigger}` : false,
45	showLabels && labelAlign
46	? `ghostkit-image-compare-labels-align-${labelAlign}`
47	: false,
48	className
49	);
50
51	const blockProps = useBlockProps.save({ className });
52
53	return (
54	<figure {...blockProps}>
55	<div className="ghostkit-image-compare-images">
56	<div className="ghostkit-image-compare-image-before">
57	<img
58	src={beforeUrl}
59	alt={beforeAlt}
60	className={beforeId ? `wp-image-${beforeId}` : null}
61	width={beforeWidth}
62	height={beforeHeight}
63	/>
64	{showLabels && !RichText.isEmpty(labelBeforeText) ? (
65	<RichText.Content
66	tagName="div"
67	className="ghostkit-image-compare-image-label ghostkit-image-compare-image-before-label"
68	value={labelBeforeText}
69	/>
70	) : null}
71	</div>
72	<div className="ghostkit-image-compare-image-after">
73	<img
74	src={afterUrl}
75	alt={afterAlt}
76	className={afterId ? `wp-image-${afterId}` : null}
77	width={afterWidth}
78	height={afterHeight}
79	/>
80	{showLabels && !RichText.isEmpty(labelAfterText) ? (
81	<RichText.Content
82	tagName="div"
83	className="ghostkit-image-compare-image-label ghostkit-image-compare-image-after-label"
84	value={labelAfterText}
85	/>
86	) : null}
87	</div>
88	<div className="ghostkit-image-compare-images-divider">
89	<div className="ghostkit-image-compare-images-divider-button-arrow-left">
90	<svg
91	className="ghostkit-svg-icon"
92	width="24"
93	height="24"
94	viewBox="0 0 24 24"
95	fill="none"
96	xmlns="http://www.w3.org/2000/svg"
97	>
98	<path
99	d="M14.7803 17.7803C14.4874 18.0732 14.0126 18.0732 13.7197 17.7803L8.4697 12.5303C8.1768 12.2374 8.1768 11.7626 8.4697 11.4697L13.7197 6.21967C14.0126 5.92678 14.4874 5.92678 14.7803 6.21967C15.0732 6.51256 15.0732 6.98744 14.7803 7.28033L10.0607 12L14.7803 16.7197C15.0732 17.0126 15.0732 17.4874 14.7803 17.7803Z"
100	fill="currentColor"
101	/>
102	</svg>
103	</div>
104	<div className="ghostkit-image-compare-images-divider-button-arrow-right">
105	<svg
106	className="ghostkit-svg-icon"
107	width="24"
108	height="24"
109	viewBox="0 0 24 24"
110	fill="none"
111	xmlns="http://www.w3.org/2000/svg"
112	>
113	<path
114	d="M9.21967 6.2197C9.51256 5.9268 9.98744 5.9268 10.2803 6.2197L15.5303 11.4697C15.8232 11.7626 15.8232 12.2374 15.5303 12.5303L10.2803 17.7803C9.98744 18.0732 9.51256 18.0732 9.21967 17.7803C8.92678 17.4874 8.92678 17.0126 9.21967 16.7197L13.9393 12L9.21967 7.2803C8.92678 6.9874 8.92678 6.5126 9.21967 6.2197Z"
115	fill="currentColor"
116	/>
117	</svg>
118	</div>
119	</div>
120	</div>
121	{!RichText.isEmpty(caption) ? (
122	<RichText.Content
123	className="ghostkit-image-compare-caption"
124	tagName="figcaption"
125	value={caption}
126	/>
127	) : null}
128	</figure>
129	);
130	}
131