Merge pull request #477 from lightspeedwp/2.0.1-map-enhancements

2.0.1 map enhancements

assets/css/scss/_maps.scss

@@ -0,0 +1,59 @@
+.lsx-to-map-marker {
+	-webkit-box-align: start;
+	-ms-flex-align: start;
+	align-items: flex-start;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-orient: horizontal;
+	-webkit-box-direction: normal;
+	-ms-flex-flow: row nowrap;
+	flex-flow: row nowrap;
+	height: auto;
+	-webkit-box-pack: start;
+	-ms-flex-pack: start;
+	justify-content: flex-start;
+	padding: 5px 0;
+	width: 100%;
+
+	.lsx-to-map-marker-content {
+		-webkit-box-flex: 1;
+		-ms-flex-positive: 1;
+		flex-grow: 1;
+
+		&.content-area {
+			margin: 0;
+		}
+
+		.entry-content {
+			p {
+				margin-bottom: 0;
+				margin-top: 1.2rem;
+
+				> a.moretag:after {
+					color: inherit;
+					content: '\f178';
+					display: inline-block;
+					font-family: 'FontAwesome';
+					font-size: inherit;
+					margin-right: 5px;
+					text-rendering: auto;
+					-webkit-font-smoothing: antialiased;
+					-moz-osx-font-smoothing: grayscale;
+				}
+			}
+		}
+	}
+
+	.lsx-to-map-marker-img {
+		margin-right: 15px;
+		max-width: 100px;
+		-ms-flex-negative: 0;
+		flex-shrink: 0;
+	}
+
+	.lsx-to-map-marker-title {
+		margin-bottom: 1.2rem;
+		margin-top: 0;
+	}
+}

assets/css/style.scss

@@ -7,6 +7,7 @@
 @import 'scss/slider';
 @import 'scss/collapse';
 @import 'scss/modals';
+@import 'scss/maps';
 
 .lsx-itinerary-wrapper,
 .lsx-units-wrapper {

assets/js/blocks/general.js

@@ -1,4 +1,3 @@
-// metadata.bindings not handle correctly
 
 wp.domReady(() => {
 
@@ -572,5 +571,73 @@ wp.domReady(() => {
 			renaming: false
 		}
     });
+
+	// Price Block
+	wp.blocks.registerBlockVariation("core/group", {
+		name: "lsx-tour-operator/price",
+		title: "Price",
+		category: 'lsx-tour-operator',
+		icon: 'money-alt',
+		attributes: {
+			metadata: {
+				name: "Price",
+			},
+			align: "wide",
+			layout: {
+				type: "flex",
+				flexWrap: "nowrap",
+			},
+			className: "lsx-price-wrapper",
+			style: {
+				spacing: {
+					blockGap: "5px",
+				},
+			},
+		},
+		innerBlocks: [
+			[
+				"core/paragraph",
+				{
+					padding: {
+						top: "2px",
+						bottom: "2px",
+					},
+					typography: {
+						fontSize: "x-small",
+					},
+					content: "<strong>From:</strong>",
+					className: "has-x-small-font-size",
+				},
+			],
+			[
+				"core/paragraph",
+				{
+					metadata: {
+						bindings: {
+							content: {
+								source: "lsx/post-meta",
+								args: {
+									key: "price"
+								},
+							},
+						},
+					},
+					className: "amount has-primary-color has-text-color has-link-color",
+					padding: {
+						top: "2px",
+						bottom: "2px",
+					},
+					color: {
+						link: "primary-700",
+						text: "primary-700",
+					},
+				},
+			],
+		],
+		isDefault: false,
+		supports: {
+			renaming: false
+		}
+	});
 });
 

assets/js/blocks/maps.js

@@ -0,0 +1,119 @@
+wp.domReady(() => {
+
+	// Map Block
+	wp.blocks.registerBlockVariation("core/group", {
+		name: "lsx-tour-operator/google-map",
+		title: "Google Map",
+		description: "Display a Google Map based on the current Tour Operator page.",
+		category: 'lsx-tour-operator',
+		icon: 'location-alt',
+		attributes: {
+			metadata: {
+				name: "Google Map",
+			},
+			className: "lsx-location-wrapper",
+			style: {
+				spacing: {
+					padding: {
+						top: 'var(--wp--preset--spacing--medium)',
+						bottom: 'var(--wp--preset--spacing--medium)',
+						left: 'var(--wp--preset--spacing--x-small)',
+						right: 'var(--wp--preset--spacing--x-small)'
+					},
+					margin: {
+						top: '0',
+						bottom: '0'
+					}
+				}
+			},
+			align: 'full',
+			layout: {
+				type: 'constrained'
+			},
+			tagName: "section"
+		},
+		innerBlocks: [
+			[
+				'core/group',
+				{
+					align: 'wide',
+					style: {
+						spacing: {
+							margin: { top: '0', bottom: '0' },
+							padding: { top: '0', bottom: 'var(--wp--preset--spacing--small)', left: '0', right: '0' },
+							blockGap: 'var(--wp--preset--spacing--small)'
+						}
+					},
+					metadata: {
+						name: "Title"
+					},
+					layout: { type: 'flex', flexWrap: 'nowrap' }
+				},
+				[
+					['core/separator', { style: { layout: { selfStretch: 'fill', flexSize: null } }, backgroundColor: 'primary' }],
+					['core/heading', { textAlign: 'center', content: 'Location' }],
+					['core/separator', { style: { layout: { selfStretch: 'fill', flexSize: null } }, backgroundColor: 'primary' }]
+				]
+			],
+			[
+				'core/group',
+				{
+					align: 'wide',
+					layout: { type: 'default' },
+					name: "Map Container",
+					metadata: {
+						name: "Map Container",
+					}
+				},
+				[
+					[
+						'core/cover',
+						{
+							url: lsxToEditor.assetsUrl + 'blocks/placeholder-map-1920x656.jpg',
+							dimRatio: 50,
+							customOverlayColor: '#e2f0f7',
+							isUserOverlayColor: false,
+							isDark: false,
+							layout: { type: 'constrained' },
+							className: "lsx-map-preview",
+							name: "Preview",
+						},
+						[
+							[
+								'core/paragraph',
+								{
+									align: 'center',
+									fontSize: 'large',
+									content: '<a href="#">Click here to display the map</a>',
+									className: 'has-text-align-center has-large-font-size'
+								}
+							]
+						]
+					],
+					[
+						'core/group',
+						{
+							align: 'wide',
+							layout: { type: 'default' },
+							className: "hidden",
+							metadata: {
+								name: "Map Details",
+								bindings: {
+									content: {
+										source: 'lsx/map',
+										type: 'google'
+									}
+								}
+							}
+						},
+						[]
+					]
+				]
+			]
+		],
+		isDefault: false,
+		/*supports: {
+			renaming: false
+		}*/
+	});
+});