@eightshift/frontend-libs-tailwind 1.1.1 → 1.3.0

package/blocks/init/src/Blocks/custom/columns/manifest.json

@@ -12,46 +12,57 @@
 	],
 	"example": {
 		"attributes": {
-			"columnsColumnGapLarge": 30,
-			"columnsRowGapLarge": 30
+			"columnsNumOfColumns": {
+				"_default": "2",
+				"_desktopFirst": true,
+				"max-sm": "1"
+			},
+			"wrapperBackground": "solid-gray-50",
+			"wrapperBorderRadius": "lg",
+			"wrapperPaddingTop": {
+				"_default": "md",
+				"_desktopFirst": true
+			},
+			"wrapperPaddingBottom": {
+				"_default": "md",
+				"_desktopFirst": true
+			}
 		},
 		"innerBlocks": [
 			{
 				"name": "eightshift-boilerplate/column",
 				"attributes": {
-					"columnWidthLarge": 4
+					"columnOffset": {
+						"_default": "1",
+						"_desktopFirst": true,
+						"max-sm": "1"
+					},
+					"columnWidth": {
+						"_default": "1",
+						"_desktopFirst": true,
+						"max-sm": "1"
+					},
+					"columnVerticalAlign": {
+						"_default": "center",
+						"_desktopFirst": true
+					}
 				},
 				"innerBlocks": [
 					{
-						"name": "eightshift-boilerplate/card",
+						"name": "eightshift-boilerplate/heading",
 						"attributes": {
-							"cardCardImageUrl": "https://picsum.photos/400/400",
-							"cardCardIntroContent": "Intro",
-							"cardCardIntroSize": "small",
-							"cardCardIntroColor": "light",
-							"cardCardHeadingContent": "Heading",
-							"cardCardParagraphContent": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam est id semper aliquet.",
-							"cardCardButtonUse": false
+							"wrapperNoWidthControls": true,
+							"wrapperWidth": "none",
+							"headingHeadingContent": "Lorem ipsum",
+							"headingHeadingSize": "xl"
 						}
-					}
-				]
-			},
-			{
-				"name": "eightshift-boilerplate/column",
-				"attributes": {
-					"columnWidthLarge": 4
-				},
-				"innerBlocks": [
+					},
 					{
-						"name": "eightshift-boilerplate/card",
+						"name": "eightshift-boilerplate/paragraph",
 						"attributes": {
-							"cardCardImageUrl": "https://picsum.photos/400/400",
-							"cardCardIntroContent": "Intro",
-							"cardCardIntroSize": "small",
-							"cardCardIntroColor": "light",
-							"cardCardHeadingContent": "Heading",
-							"cardCardParagraphContent": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam est id semper aliquet.",
-							"cardCardButtonUse": false
+							"wrapperNoWidthControls": true,
+							"wrapperWidth": "none",
+							"paragraphParagraphContent": "Dolor sit amet"
 						}
 					}
 				]
@@ -59,19 +70,34 @@
 			{
 				"name": "eightshift-boilerplate/column",
 				"attributes": {
-					"columnWidthLarge": 4
+					"columnOffset": {
+						"_default": "2",
+						"_desktopFirst": true,
+						"max-sm": "1"
+					},
+					"columnWidth": {
+						"_default": "1",
+						"_desktopFirst": true,
+						"max-sm": "1"
+					},
+					"columnHorizontalAlign": {
+						"_default": "end",
+						"_desktopFirst": true
+					}
 				},
 				"innerBlocks": [
 					{
-						"name": "eightshift-boilerplate/card",
+						"name": "eightshift-boilerplate/image",
 						"attributes": {
-							"cardCardImageUrl": "https://picsum.photos/400/400",
-							"cardCardIntroContent": "Intro",
-							"cardCardIntroSize": "small",
-							"cardCardIntroColor": "light",
-							"cardCardHeadingContent": "Heading",
-							"cardCardParagraphContent": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam est id semper aliquet.",
-							"cardCardButtonUse": false
+							"wrapperNoWidthControls": true,
+							"wrapperWidth": "none",
+							"imageImageData": {
+								"_desktopFirst": false,
+								"_default": {
+									"id": 245,
+									"url": "https://picsum.photos/id/17/400/400"
+								}
+							}
 						}
 					}
 				]

package/blocks/init/src/Blocks/custom/featured-content/components/featured-content-options.js

@@ -2,7 +2,14 @@ import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { getAttrKey, checkAttr, getOption, props, fetchFromWpRest } from '@eightshift/frontend-libs-tailwind/scripts';
 import { LoadMoreOptions } from '../../../components/load-more/components/load-more-options';
-import { AnimatedVisibility, AsyncMultiSelect, NumberPicker, OptionSelect, Spacer, Toggle } from '@eightshift/ui-components';
+import {
+	AnimatedVisibility,
+	AsyncMultiSelect,
+	NumberPicker,
+	OptionSelect,
+	Spacer,
+	Toggle,
+} from '@eightshift/ui-components';
 import { icons } from '@eightshift/ui-components/icons';
 import manifest from '../manifest.json';
 
@@ -96,7 +103,9 @@ export const FeaturedContentOptions = ({ attributes, setAttributes }) => {
 						label: __('Select posts to show', '%g_textdomain%'),
 						value: true,
 						disabled: featuredContentExcludeCurrentPost || featuredContentTaxonomy,
-						subtitle: (featuredContentExcludeCurrentPost || featuredContentTaxonomy) && __('Unavailable when a taxonomy filter is set', '%g_textdomain%'),
+						subtitle:
+							(featuredContentExcludeCurrentPost || featuredContentTaxonomy) &&
+							__('Unavailable when a taxonomy filter is set', '%g_textdomain%'),
 					},
 				]}
 				type='radiosSegmented'
@@ -112,7 +121,9 @@ export const FeaturedContentOptions = ({ attributes, setAttributes }) => {
 					label={__('Exclude current', '%g_textdomain%')}
 					subtitle={__('Best used with blog posts', '%g_textdomain%')}
 					checked={featuredContentExcludeCurrentPost}
-					onChange={(value) => setAttributes({ [getAttrKey('featuredContentExcludeCurrentPost', attributes, manifest)]: value })}
+					onChange={(value) =>
+						setAttributes({ [getAttrKey('featuredContentExcludeCurrentPost', attributes, manifest)]: value })
+					}
 				/>
 			</AnimatedVisibility>
 
@@ -122,7 +133,10 @@ export const FeaturedContentOptions = ({ attributes, setAttributes }) => {
 			>
 				<AsyncMultiSelect
 					key={featuredContentPostType.value}
-					help={__('Newest 30 items are shown, others can be selected by searching. If blank, all items are shown.', '%g_textdomain%')}
+					help={__(
+						'Newest 30 items are shown, others can be selected by searching. If blank, all items are shown.',
+						'%g_textdomain%',
+					)}
 					value={featuredContentPosts}
 					loadOptions={fetchFromWpRest(featuredContentPostType?.api, {
 						processLabel: ({ title: { rendered } }) => rendered,
@@ -153,10 +167,12 @@ export const FeaturedContentOptions = ({ attributes, setAttributes }) => {
 					setUseSpecificPosts(false);
 					setUseSpecificTerms(false);
 
-					const value = rawValue === '_all' ? allGenericOption : taxonomyOptions.find((option) => option.value === rawValue);
+					const value =
+						rawValue === '_all' ? allGenericOption : taxonomyOptions.find((option) => option.value === rawValue);
 
 					setAttributes({
-						[getAttrKey('featuredContentTaxonomy', attributes, manifest)]: value === allGenericOption ? undefined : value,
+						[getAttrKey('featuredContentTaxonomy', attributes, manifest)]:
+							value === allGenericOption ? undefined : value,
 						[getAttrKey('featuredContentTerms', attributes, manifest)]: undefined,
 						[getAttrKey('featuredContentUseCurrentTerm', attributes, manifest)]: false,
 						[getAttrKey('featuredContentPosts', attributes, manifest)]: undefined,
@@ -183,7 +199,9 @@ export const FeaturedContentOptions = ({ attributes, setAttributes }) => {
 						label: __('Select terms to show', '%g_textdomain%'),
 						value: 'manual',
 						disabled: (featuredContentTaxonomy ?? allGenericOption)?.value === '_all',
-						subtitle: (featuredContentTaxonomy ?? allGenericOption)?.value === '_all' && __('Select a taxonomy to enable', '%g_textdomain%'),
+						subtitle:
+							(featuredContentTaxonomy ?? allGenericOption)?.value === '_all' &&
+							__('Select a taxonomy to enable', '%g_textdomain%'),
 					},
 					{
 						label: __('Show same terms as current post', '%g_textdomain%'),
@@ -200,7 +218,10 @@ export const FeaturedContentOptions = ({ attributes, setAttributes }) => {
 			>
 				<AsyncMultiSelect
 					key={featuredContentTaxonomy?.value}
-					help={__('Newest 30 items are shown, others can be selected by searching. If blank, all items are shown.', '%g_textdomain%')}
+					help={__(
+						'Newest 30 items are shown, others can be selected by searching. If blank, all items are shown.',
+						'%g_textdomain%',
+					)}
 					value={featuredContentTerms}
 					loadOptions={fetchFromWpRest(featuredContentTaxonomy?.api, {
 						fields: 'id,name',

package/blocks/init/src/Blocks/custom/image/manifest.json

@@ -21,85 +21,13 @@
 		"imageAlign": {
 			"type": "string",
 			"default": "center center"
+		},
+		"wrapperDisabledOptions": {
+			"type": "string",
+			"default": "roundedCorners"
 		}
 	},
 	"components": {
 		"image": "image"
-	},
-	"variables": {
-		"imageAlign": {
-			"top left": [
-				{
-					"variable": {
-						"block-image-align-horizontal": "flex-start",
-						"block-image-align-vertical": "flex-start"
-					}
-				}
-			],
-			"top center": [
-				{
-					"variable": {
-						"block-image-align-horizontal": "center",
-						"block-image-align-vertical": "flex-start"
-					}
-				}
-			],
-			"top right": [
-				{
-					"variable": {
-						"block-image-align-horizontal": "flex-end",
-						"block-image-align-vertical": "flex-start"
-					}
-				}
-			],
-			"center left": [
-				{
-					"variable": {
-						"block-image-align-horizontal": "flex-start",
-						"block-image-align-vertical": "center"
-					}
-				}
-			],
-			"center center": [
-				{
-					"variable": {
-						"block-image-align-horizontal": "center",
-						"block-image-align-vertical": "center"
-					}
-				}
-			],
-			"center right": [
-				{
-					"variable": {
-						"block-image-align-horizontal": "flex-end",
-						"block-image-align-vertical": "center"
-					}
-				}
-			],
-			"bottom left": [
-				{
-					"variable": {
-						"block-image-align-horizontal": "flex-start",
-						"block-image-align-vertical": "flex-end"
-					}
-				}
-			],
-			"bottom center": [
-				{
-					"variable": {
-						"block-image-align-horizontal": "center",
-						"block-image-align-vertical": "flex-end"
-					}
-				}
-			],
-			"bottom right": [
-				{
-					"variable": {
-						"block-image-align-horizontal": "flex-end",
-						"block-image-align-vertical": "flex-end"
-					}
-				}
-			]
-		}
 	}
 }

package/blocks/init/src/Blocks/custom/map/components/map-editor.js

@@ -1,5 +1,13 @@
 import { checkAttr } from '@eightshift/frontend-libs-tailwind/scripts';
-import { Interactions, Layers, MapInteraction, OpenLayersMap, Controls, MapControl, processMapLayer } from './map-components';
+import {
+	Interactions,
+	Layers,
+	MapInteraction,
+	OpenLayersMap,
+	Controls,
+	MapControl,
+	processMapLayer,
+} from './map-components';
 import manifest from '../manifest.json';
 
 export const MapEditor = ({ attributes }) => {
@@ -17,7 +25,9 @@ export const MapEditor = ({ attributes }) => {
 			center={[mapCenterLon ?? 16.352532, mapCenterLat ?? 46.314045]}
 			zoom={mapZoom}
 		>
-			<Layers key={mapLayers.map(({ id, type }) => `${id}-${type}`).join(',')}>{[...mapLayers].reverse().map((layer) => processMapLayer(layer))}</Layers>
+			<Layers key={mapLayers.map(({ id, type }) => `${id}-${type}`).join(',')}>
+				{[...mapLayers].reverse().map((layer) => processMapLayer(layer))}
+			</Layers>
 
 			<Interactions>
 				<MapInteraction

package/blocks/init/src/Blocks/custom/map/components/map-options.js

@@ -111,15 +111,33 @@ export const MapOptions = ({ attributes, setAttributes }) => {
 				{(layer) => {
 					const { type, apiKey, geoJsonUrl, geoJsonId, styleUrl, hidden, updateData } = layer;
 
-					const needsApiKey = ['mapBoxVector', 'mapBoxRaster', 'mapTilerVector', 'vectorJson', 'mapTilerRasterXyz', 'mapTilerRasterJson'].includes(type);
-
-					const hasMapStyleOptions = ['mapBoxVector', 'mapBoxRaster', 'mapTilerVector', 'vectorJson', 'mapTilerRasterXyz', 'mapTilerRasterJson'].includes(type);
+					const needsApiKey = [
+						'mapBoxVector',
+						'mapBoxRaster',
+						'mapTilerVector',
+						'vectorJson',
+						'mapTilerRasterXyz',
+						'mapTilerRasterJson',
+					].includes(type);
+
+					const hasMapStyleOptions = [
+						'mapBoxVector',
+						'mapBoxRaster',
+						'mapTilerVector',
+						'vectorJson',
+						'mapTilerRasterXyz',
+						'mapTilerRasterJson',
+					].includes(type);
 
 					return (
 						<RepeaterItem
-							icon={layer?.type ? layerTypes?.[layer?.type]?.icon ?? icons.mapLayer : icons.layerOff}
+							icon={layer?.type ? (layerTypes?.[layer?.type]?.icon ?? icons.mapLayer) : icons.layerOff}
 							label={layerTypes?.[type]?.title ?? __('New layer', '%g_textdomain%')}
-							subtitle={type === 'geoJson' ? truncateMiddle(geoJsonUrl?.slice(geoJsonUrl?.lastIndexOf('/') + 1) ?? '', 20) : layerTypes?.[type]?.subtitle}
+							subtitle={
+								type === 'geoJson'
+									? truncateMiddle(geoJsonUrl?.slice(geoJsonUrl?.lastIndexOf('/') + 1) ?? '', 20)
+									: layerTypes?.[type]?.subtitle
+							}
 							actions={
 								layer?.type?.length < 1 ? (
 									icons.dummySpacer
@@ -160,15 +178,23 @@ export const MapOptions = ({ attributes, setAttributes }) => {
 									onChange={(value) => updateData({ styleUrl: value })}
 									help={
 										<>
-											{!type?.startsWith('mapBox') && __('Copy the full style URL from MapTiler. Keep the API key inside the URL.', '%g_textdomain%')}
+											{!type?.startsWith('mapBox') &&
+												__('Copy the full style URL from MapTiler. Keep the API key inside the URL.', '%g_textdomain%')}
 											{type === 'mapBoxVector' && __('Copy the full style URL from Mapbox.', '%g_textdomain%')}
-											{type === 'mapBoxRaster' && __('Copy the full style URL from Mapbox or a Mapbox-compatible source. Keep the access token inside the URL.', '%g_textdomain%')}
+											{type === 'mapBoxRaster' &&
+												__(
+													'Copy the full style URL from Mapbox or a Mapbox-compatible source. Keep the access token inside the URL.',
+													'%g_textdomain%',
+												)}
 											<br />
 											<br />
 											{['mapBoxRaster', 'mapTilerVector', 'mapTilerRasterXyz'].includes(type) && (
 												<>
 													<code className='es-bg-transparent es-p-0 es-text-3'>{'{z}/{x}/{y}'}</code>
-													{__("should be left as they are in the URL; they're needed for the map to work properly.", '%g_textdomain%')}
+													{__(
+														"should be left as they are in the URL; they're needed for the map to work properly.",
+														'%g_textdomain%',
+													)}
 													<br />
 													<br />
 												</>
@@ -176,7 +202,8 @@ export const MapOptions = ({ attributes, setAttributes }) => {
 											{__('Example', '%g_textdomain%')}:
 											<br />
 											<span className='es-word-break-all'>
-												{['mapTilerRasterJson', 'vectorJson'].includes(type) && 'https://api.maptiler.com/maps/{styleName}/tiles.json?key={apiKey}'}
+												{['mapTilerRasterJson', 'vectorJson'].includes(type) &&
+													'https://api.maptiler.com/maps/{styleName}/tiles.json?key={apiKey}'}
 
 												{type === 'mapTilerVector' && 'https://api.maptiler.com/tiles/v3/{z}/{x}/{y}.pbf?key={apiKey}'}
 
@@ -188,9 +215,11 @@ export const MapOptions = ({ attributes, setAttributes }) => {
 													</>
 												)}
 
-												{type === 'mapBoxRaster' && 'https://api.mapbox.com/v4/{tilesetId}/{z}/{x}/{y}[@2x].{imageFormat}?acess_token={apiKey}'}
+												{type === 'mapBoxRaster' &&
+													'https://api.mapbox.com/v4/{tilesetId}/{z}/{x}/{y}[@2x].{imageFormat}?acess_token={apiKey}'}
 
-												{type === 'mapTilerRasterXyz' && 'https://api.maptiler.com/maps/{styleName}/{z}/{x}/{y}.png?key={apiKey}'}
+												{type === 'mapTilerRasterXyz' &&
+													'https://api.maptiler.com/maps/{styleName}/{z}/{x}/{y}.png?key={apiKey}'}
 											</span>
 										</>
 									}

package/blocks/init/src/Blocks/custom/site-footer/components/site-footer-options.js

@@ -57,7 +57,9 @@ export const SiteFooterOptions = ({ attributes, setAttributes, randId, setRandId
 					return (
 						<RepeaterItem
 							label={header?.length > 0 ? header : __('New section', '%g_textdomain%')}
-							subtitle={items.length > 0 && sprintf(_n('%d link', '%d links', items.length, '%g_textdomain%'), items.length)}
+							subtitle={
+								items.length > 0 && sprintf(_n('%d link', '%d links', items.length, '%g_textdomain%'), items.length)
+							}
 						>
 							<Repeater
 								icon={icons.link}

package/blocks/init/src/Blocks/custom/site-footer/site-footer.php

@@ -61,9 +61,11 @@ $logoAlt = get_post_meta($siteFooterLogoId, '_wp_attachment_image_alt', true) ??
 	</div>
 
 	<div class="<?php echo esc_attr(Helpers::getTwPart('bottomContainer', $manifest)); ?>">
-		<span class="<?php echo esc_attr(Helpers::getTwPart('copyright', $manifest)); ?>">
-			&copy; <?php echo esc_attr($siteFooterCopyright); ?>
-		</span>
+		<?php if (!empty($siteFooterCopyright)) { ?>
+			<span class="<?php echo esc_attr(Helpers::getTwPart('copyright', $manifest)); ?>">
+				&copy; <?php echo esc_attr($siteFooterCopyright); ?>
+			</span>
+		<?php } ?>
 
 		<?php
 		echo Helpers::render('share', Helpers::props('share', $attributes));

package/blocks/init/src/Blocks/custom/video/manifest.json

@@ -25,81 +25,5 @@
 			"type": "string",
 			"default": "center center"
 		}
-	},
-	"variables": {
-		"videoAlign": {
-			"top left": [
-				{
-					"variable": {
-						"block-video-align-horizontal": "flex-start",
-						"block-video-align-vertical": "flex-start"
-					}
-				}
-			],
-			"top center": [
-				{
-					"variable": {
-						"block-video-align-horizontal": "center",
-						"block-video-align-vertical": "flex-start"
-					}
-				}
-			],
-			"top right": [
-				{
-					"variable": {
-						"block-video-align-horizontal": "flex-end",
-						"block-video-align-vertical": "flex-start"
-					}
-				}
-			],
-			"center left": [
-				{
-					"variable": {
-						"block-video-align-horizontal": "flex-start",
-						"block-video-align-vertical": "center"
-					}
-				}
-			],
-			"center center": [
-				{
-					"variable": {
-						"block-video-align-horizontal": "center",
-						"block-video-align-vertical": "center"
-					}
-				}
-			],
-			"center right": [
-				{
-					"variable": {
-						"block-video-align-horizontal": "flex-end",
-						"block-video-align-vertical": "center"
-					}
-				}
-			],
-			"bottom left": [
-				{
-					"variable": {
-						"block-video-align-horizontal": "flex-start",
-						"block-video-align-vertical": "flex-end"
-					}
-				}
-			],
-			"bottom center": [
-				{
-					"variable": {
-						"block-video-align-horizontal": "center",
-						"block-video-align-vertical": "flex-end"
-					}
-				}
-			],
-			"bottom right": [
-				{
-					"variable": {
-						"block-video-align-horizontal": "flex-end",
-						"block-video-align-vertical": "flex-end"
-					}
-				}
-			]
-		}
 	}
 }