@eightshift/frontend-libs-tailwind 1.2.0 → 1.3.1

package/.prettierrc

@@ -6,7 +6,7 @@
 	"jsxSingleQuote": true,
 	"singleQuote": true,
 	"singleAttributePerLine": true,
-	"printWidth": 180,
+	"printWidth": 120,
 	"arrowParens": "always",
 	"bracketSpacing": true,
 	"semi": true,

package/CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to this project will be documented in this file.
 
 This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a CHANGELOG](https://keepachangelog.com/).
 
+## [1.3.1] - 2024-09-13
+- Helper `getFilteredAttributes` used on SSR components to filter out unwanted attributes and optimize the output.
+
+## [1.3.0] - 2024-08-08
+- `twClasses` and `twClassesEditor` can now be passed as an array
+- Updated schemas to account for the `twClasses`/`twClassesEditor` changes.
+- Tailwind output functions will now output the custom classes if no Tailwind classes are in the output.
+- Tweaked Prettier config.
+- Updated dependencies.
+
 ## [1.2.0] - 2024-08-08
 - Fixed default `perPage` param in `wpSearchRoute`.
 - Updated image and file pickers with support for `hidden` prop and accepted types passthrough.
@@ -33,6 +43,8 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 
 [Unreleased]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/master...HEAD
 
+[1.3.1]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.3.0...1.3.1
+[1.3.0]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.2.0...1.3.0
 [1.2.0]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.1.1...1.2.0
 [1.1.1]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.1.0...1.1.1
 [1.1.0]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.0.0...1.1.0

package/blocks/init/assets/scripts/application-admin.js

@@ -4,4 +4,4 @@
 
 import { dynamicImport } from '@eightshift/frontend-libs-tailwind/scripts/helpers';
 
-dynamicImport(require.context('./../../src/blocks/components', true, /assets-admin\/index\.js$/));
+dynamicImport(require.context('./../../src/Blocks/components', true, /assets-admin\/index\.js$/));

package/blocks/init/src/Blocks/assets/scripts/link-section-editor.js

@@ -175,7 +175,11 @@ export const LinkSectionEditor = (props) => {
 				setTimeout(() => {
 					target.parentElement.nextElementSibling?.querySelector('[contenteditable="true"]')?.focus();
 				}, 25);
-			} else if (code === 'Backspace' && header === '' && (items?.length < 1 || items?.every(({ text }) => text === ''))) {
+			} else if (
+				code === 'Backspace' &&
+				header === '' &&
+				(items?.length < 1 || items?.every(({ text }) => text === ''))
+			) {
 				event.preventDefault();
 
 				// Jump to end of previous input.

package/blocks/init/src/Blocks/assets/scripts/shared.js

@@ -5,7 +5,9 @@ const colorData = getColorData(themeColors);
 
 export const getColorOption = (key, manifest) => {
 	if (!manifest?.options?.[key]) {
-		throw new Error(`The key ${key} is not defined in the manifest options for ${manifest?.componentName ?? manifest?.title}.`);
+		throw new Error(
+			`The key ${key} is not defined in the manifest options for ${manifest?.componentName ?? manifest?.title}.`,
+		);
 	}
 
 	return colorData?.filter(({ slug }) => manifest?.options?.[key]?.includes(slug)) ?? [];

package/blocks/init/src/Blocks/components/button/components/button-options.js

@@ -1,7 +1,25 @@
 import { __ } from '@wordpress/i18n';
-import { getOption, checkAttr, getAttrKey, props, getOptions, wpSearchRoute, getHiddenOptions } from '@eightshift/frontend-libs-tailwind/scripts';
+import {
+	getOption,
+	checkAttr,
+	getAttrKey,
+	props,
+	getOptions,
+	wpSearchRoute,
+	getHiddenOptions,
+} from '@eightshift/frontend-libs-tailwind/scripts';
 import { IconOptions } from '../../icon/components/icon-options';
-import { ButtonGroup, ColorPicker, ComponentToggle, HStack, InputField, LinkInput, OptionSelect, Spacer, Toggle } from '@eightshift/ui-components';
+import {
+	ButtonGroup,
+	ColorPicker,
+	ComponentToggle,
+	HStack,
+	InputField,
+	LinkInput,
+	OptionSelect,
+	Spacer,
+	Toggle,
+} from '@eightshift/ui-components';
 import { icons } from '@eightshift/ui-components/icons';
 import { upperFirst } from '@eightshift/ui-components/utilities';
 import manifest from './../manifest.json';

package/blocks/init/src/Blocks/components/card/components/card-editor.js

@@ -15,7 +15,8 @@ export const CardEditor = (attributes) => {
 					additionalClass: {
 						image: getTwPart('image', manifest),
 						picture: getTwPart('imagePicture', manifest),
-						imagePlaceholder: '!border-x-0 !border-t-0 !border-solid !w-full !h-auto aspect-3/2 [&_svg]:!size-12 border-b !rounded-none bg-gray-100 !border-b-gray-200',
+						imagePlaceholder:
+							'!border-x-0 !border-t-0 !border-solid !w-full !h-auto aspect-3/2 [&_svg]:!size-12 border-b !rounded-none bg-gray-100 !border-b-gray-200',
 					},
 				})}
 			/>

package/blocks/init/src/Blocks/components/icon/icon.php

@@ -28,7 +28,9 @@ $icon = $manifest['icons'][$iconName];
 
 $className = Helpers::getTwClasses($attributes, $manifest, $additionalClass);
 
-$icon = str_replace('<svg ', "<svg class=\"{$className}\"", $icon);
+if (!empty($className)) {
+	$icon = str_replace('<svg ', '<svg class="' . htmlspecialchars($className) . '" ', $icon);
+}
 
 // phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
 echo $icon;

package/blocks/init/src/Blocks/components/image/components/image-editor.js

@@ -1,4 +1,10 @@
-import { checkAttr, getBreakpointData, getBreakpointNames, getTwClasses, getTwPart } from '@eightshift/frontend-libs-tailwind/scripts';
+import {
+	checkAttr,
+	getBreakpointData,
+	getBreakpointNames,
+	getTwClasses,
+	getTwPart,
+} from '@eightshift/frontend-libs-tailwind/scripts';
 import { ImagePlaceholder } from '@eightshift/ui-components';
 import manifest from './../manifest.json';
 

package/blocks/init/src/Blocks/components/image/components/image-options.js

@@ -1,5 +1,13 @@
 import { __ } from '@wordpress/i18n';
-import { checkAttr, getAttrKey, MediaPicker, generateOptionsFromValue, getOption, getHiddenOptions, getResponsiveData } from '@eightshift/frontend-libs-tailwind/scripts';
+import {
+	checkAttr,
+	getAttrKey,
+	MediaPicker,
+	generateOptionsFromValue,
+	getOption,
+	getHiddenOptions,
+	getResponsiveData,
+} from '@eightshift/frontend-libs-tailwind/scripts';
 import manifest from './../manifest.json';
 import { ComponentToggle, OptionSelect, Responsive, Spacer, Toggle } from '@eightshift/ui-components';
 import { icons } from '@eightshift/ui-components/icons';
@@ -33,7 +41,11 @@ export const ImageOptions = (attributes) => {
 				icon={icons.imageFile}
 				label={__('Image', 'eightshift-ui-components')}
 				options={generateOptionsFromValue(imageData, (v) =>
-					truncateMiddle(v?.url?.replace(window.location.origin, '')?.replace(/\/wp-content\/uploads\/\d{4}\/\d{2}\//g, '') ?? __('Not set', '%g_textdomain%'), 15),
+					truncateMiddle(
+						v?.url?.replace(window.location.origin, '')?.replace(/\/wp-content\/uploads\/\d{4}\/\d{2}\//g, '') ??
+							__('Not set', '%g_textdomain%'),
+						15,
+					),
 				)}
 				hidden={hiddenOptions?.imagePicker}
 				{...responsiveData}
@@ -86,7 +98,9 @@ export const ImageOptions = (attributes) => {
 				icon={icons.expandXl}
 				label={__('Stretch', '%g_textdomain%')}
 				checked={imageSize === 'stretch'}
-				onChange={(value) => setAttributes({ [getAttrKey('imageSize', attributes, manifest)]: value ? 'stretch' : 'default' })}
+				onChange={(value) =>
+					setAttributes({ [getAttrKey('imageSize', attributes, manifest)]: value ? 'stretch' : 'default' })
+				}
 				hidden={hiddenOptions?.stretch}
 			/>
 

package/blocks/init/src/Blocks/components/list/components/list-options.js

@@ -35,7 +35,9 @@ export const ListOptions = (attributes) => {
 				<ToggleButton
 					selected={listFontWeight === '700'}
 					icon={icons.bold}
-					onChange={(value) => setAttributes({ [getAttrKey('listFontWeight', attributes, manifest)]: value ? '700' : '400' })}
+					onChange={(value) =>
+						setAttributes({ [getAttrKey('listFontWeight', attributes, manifest)]: value ? '700' : '400' })
+					}
 					tooltip={__('Bold', '%g_textdomain%')}
 					hidden={hiddenOptions.weight}
 				/>

package/blocks/init/src/Blocks/components/modal/assets/index.js

@@ -11,15 +11,17 @@ domReady(() => {
 	}
 
 	elements.forEach((element) => {
-		document.querySelectorAll(`[href=":open-modal-${element.id}:"],[data-micromodal-trigger="${element.id}"]`).forEach((trigger) => {
-			trigger.addEventListener('click', (event) => {
-				event.preventDefault();
+		document
+			.querySelectorAll(`[href=":open-modal-${element.id}:"],[data-micromodal-trigger="${element.id}"]`)
+			.forEach((trigger) => {
+				trigger.addEventListener('click', (event) => {
+					event.preventDefault();
 
-				MicroModal.show(element.id, {
-					disableScroll: true,
-					awaitCloseAnimation: true,
+					MicroModal.show(element.id, {
+						disableScroll: true,
+						awaitCloseAnimation: true,
+					});
 				});
 			});
-		});
 	});
 });

package/blocks/init/src/Blocks/components/paragraph/components/paragraph-options.js

@@ -34,7 +34,9 @@ export const ParagraphOptions = (attributes) => {
 				<ToggleButton
 					selected={paragraphFontWeight === '700'}
 					icon={icons.bold}
-					onChange={(value) => setAttributes({ [getAttrKey('paragraphFontWeight', attributes, manifest)]: value ? '700' : '400' })}
+					onChange={(value) =>
+						setAttributes({ [getAttrKey('paragraphFontWeight', attributes, manifest)]: value ? '700' : '400' })
+					}
 					tooltip={__('Bold', '%g_textdomain%')}
 					hidden={hiddenOptions.weight}
 				/>

package/blocks/init/src/Blocks/components/share/assets/index.js

@@ -17,7 +17,11 @@ domReady(async () => {
 		if ('share' in navigator && navigator?.canShare(navigatorShareData)) {
 			await navigator?.share(navigatorShareData);
 		} else {
-			window.open(shareUrl, 'share-post', 'height=600,width=800,left=0,top=0,location=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1');
+			window.open(
+				shareUrl,
+				'share-post',
+				'height=600,width=800,left=0,top=0,location=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1',
+			);
 		}
 	};
 

package/blocks/init/src/Blocks/components/share/components/share-options.js

@@ -1,7 +1,14 @@
 import { __ } from '@wordpress/i18n';
 import { checkAttr, getAttrKey, getHiddenOptions } from '@eightshift/frontend-libs-tailwind/scripts';
 import manifest from '../manifest.json';
-import { ComponentToggle, OptionSelect, DraggableList, DraggableListItem, Spacer, Switch } from '@eightshift/ui-components';
+import {
+	ComponentToggle,
+	OptionSelect,
+	DraggableList,
+	DraggableListItem,
+	Spacer,
+	Switch,
+} from '@eightshift/ui-components';
 import { icons, JsxSvg } from '@eightshift/ui-components/icons';
 
 export const ShareOptions = (attributes) => {
@@ -36,7 +43,9 @@ export const ShareOptions = (attributes) => {
 		},
 	];
 
-	const pickerSectionTitle = shareMode ? __('Share targets', '%g_textdomain%') : __('Social networks', '%g_textdomain%');
+	const pickerSectionTitle = shareMode
+		? __('Share targets', '%g_textdomain%')
+		: __('Social networks', '%g_textdomain%');
 
 	return (
 		<ComponentToggle

package/blocks/init/src/Blocks/components/video/components/video-editor.js

@@ -34,7 +34,8 @@ export const VideoEditor = (attributes) => {
 										setAttributes({
 											[getAttrKey('videoId', attributes, manifest)]: id,
 											[getAttrKey('videoUrl', attributes, manifest)]: url,
-											[getAttrKey('videoMimeType', attributes, manifest)]: typeof mime === 'undefined' ? mime_type : mime,
+											[getAttrKey('videoMimeType', attributes, manifest)]:
+												typeof mime === 'undefined' ? mime_type : mime,
 										})
 									}
 									allowedTypes={manifest.allowedTypes}
@@ -47,7 +48,8 @@ export const VideoEditor = (attributes) => {
 										setAttributes({
 											[getAttrKey('videoId', attributes, manifest)]: id,
 											[getAttrKey('videoUrl', attributes, manifest)]: url,
-											[getAttrKey('videoMimeType', attributes, manifest)]: typeof mime === 'undefined' ? mime_type : mime,
+											[getAttrKey('videoMimeType', attributes, manifest)]:
+												typeof mime === 'undefined' ? mime_type : mime,
 										})
 									}
 									allowedTypes={['video/mp4', 'video/webm']}

package/blocks/init/src/Blocks/components/video/components/video-options.js

@@ -1,6 +1,24 @@
 import { __, sprintf } from '@wordpress/i18n';
-import { getOption, checkAttr, getAttrKey, FileSelector, getHiddenOptions, MediaPicker } from '@eightshift/frontend-libs-tailwind/scripts';
-import { AnimatedVisibility, BaseControl, Expandable, InputField, Notice, OptionSelect, Repeater, RepeaterItem, Spacer, Toggle } from '@eightshift/ui-components';
+import {
+	getOption,
+	checkAttr,
+	getAttrKey,
+	FileSelector,
+	getHiddenOptions,
+	MediaPicker,
+} from '@eightshift/frontend-libs-tailwind/scripts';
+import {
+	AnimatedVisibility,
+	BaseControl,
+	Expandable,
+	InputField,
+	Notice,
+	OptionSelect,
+	Repeater,
+	RepeaterItem,
+	Spacer,
+	Toggle,
+} from '@eightshift/ui-components';
 import { icons } from '@eightshift/ui-components/icons';
 import manifest from '../manifest.json';
 
@@ -109,7 +127,10 @@ export const VideoOptions = (attributes) => {
 				<Notice
 					type='warning'
 					label={__('Video plays automatically, with sound, and without controls', '%g_textdomain%')}
-					subtitle={__('This will bother most users and is an accessibility issue. Consider changing some of the options.', '%g_textdomain%')}
+					subtitle={__(
+						'This will bother most users and is an accessibility issue. Consider changing some of the options.',
+						'%g_textdomain%',
+					)}
 					icon={icons.a11yWarning}
 					alignIconToTitle
 				/>

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

@@ -51,7 +51,7 @@
 			"default": "metadata"
 		},
 		"videoPosterId": {
-			"type": "string"
+			"type": "number"
 		},
 		"videoPosterUrl": {
 			"type": "string"

package/blocks/init/src/Blocks/components/video/video.php

@@ -26,7 +26,6 @@ if (empty($videoUrl)) {
 }
 
 $videoMimeType = Helpers::checkAttr('videoMimeType', $attributes, $manifest);
-$videoPosterId = Helpers::checkAttr('videoPosterId', $attributes, $manifest);
 $videoPosterUrl = Helpers::checkAttr('videoPosterUrl', $attributes, $manifest);
 $videoLoop = Helpers::checkAttr('videoLoop', $attributes, $manifest);
 $videoAutoplay = Helpers::checkAttr('videoAutoplay', $attributes, $manifest);
@@ -47,7 +46,6 @@ $additionalAttributes = Helpers::classnames([
 	class="<?php echo esc_attr(Helpers::getTwPart('video', $manifest)); ?>"
 	<?php echo esc_attr($additionalAttributes); ?>
 	preload="<?php echo esc_attr($videoPreload); ?>"
-	poster="<?php echo esc_attr($videoPosterUrl); ?>"
 	<?php if ($videoPosterUrl) { ?>
 		poster="<?php echo esc_attr($videoPosterUrl); ?>"
 	<?php } ?>

package/blocks/init/src/Blocks/custom/carousel/assets/pagination.js

@@ -8,7 +8,8 @@ export const addPagination = (emblaApi, dotsNode) => {
 
 		dotNodes = emblaApi.scrollSnapList().map((_, index) => {
 			const elem = document.createElement('button');
-			elem.className = 'size-2.5 rounded-full border border-gray-500 transition hover:scale-105 focus:outline-none focus-visible:ring focus-visible:ring-navy-500/30';
+			elem.className =
+				'size-2.5 rounded-full border border-gray-500 transition hover:scale-105 focus:outline-none focus-visible:ring focus-visible:ring-navy-500/30';
 
 			elem.addEventListener('click', () => emblaApi.scrollTo(index), false);
 			dotsNode.appendChild(elem);
@@ -26,7 +27,12 @@ export const addPagination = (emblaApi, dotsNode) => {
 		});
 	};
 
-	emblaApi.on('init', addDots).on('reInit', addDots).on('init', toggleDotBtnsActive).on('reInit', toggleDotBtnsActive).on('select', toggleDotBtnsActive);
+	emblaApi
+		.on('init', addDots)
+		.on('reInit', addDots)
+		.on('init', toggleDotBtnsActive)
+		.on('reInit', toggleDotBtnsActive)
+		.on('select', toggleDotBtnsActive);
 
 	return () => {
 		dotsNode.innerHTML = '';

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

@@ -209,7 +209,9 @@ export const ColumnOptions = ({ attributes, setAttributes }) => {
 				}
 				icon={icons.gridAutoRows}
 				label={__('Row span', '%g_textdomain%')}
-				options={generateOptionsFromValue(columnRowSpan, (v) => (!v ? __('Not set', '%g_textdomain%') : sprintf(_n('1 row', '%d rows', v, '%g_textdomain%'), v)))}
+				options={generateOptionsFromValue(columnRowSpan, (v) =>
+					!v ? __('Not set', '%g_textdomain%') : sprintf(_n('1 row', '%d rows', v, '%g_textdomain%'), v),
+				)}
 				noModeSelect
 				inline
 				{...responsiveData}
@@ -311,7 +313,9 @@ export const ColumnOptions = ({ attributes, setAttributes }) => {
 								setAttributes({ [getAttrKey('columnBackground', attributes, manifest)]: undefined });
 							} else {
 								setAttributes({
-									[getAttrKey('columnBackground', attributes, manifest)]: Object.keys(manifest.tailwind.options.columnBackground.twClasses).find((key) => key.startsWith(value)),
+									[getAttrKey('columnBackground', attributes, manifest)]: Object.keys(
+										manifest.tailwind.options.columnBackground.twClasses,
+									).find((key) => key.startsWith(value)),
 								});
 							}
 						}}
@@ -323,7 +327,9 @@ export const ColumnOptions = ({ attributes, setAttributes }) => {
 					{backgroundType === 'solid' && (
 						<ColorPicker
 							colors={getColorOption('columnBackgroundSolid', manifest)}
-							onChange={(value) => setAttributes({ [getAttrKey('columnBackground', attributes, manifest)]: `solid-${value}` })}
+							onChange={(value) =>
+								setAttributes({ [getAttrKey('columnBackground', attributes, manifest)]: `solid-${value}` })
+							}
 							value={columnBackground?.replace('solid-', '')}
 							aria-label={__('Background color', '%g_textdomain%')}
 						/>
@@ -360,7 +366,9 @@ export const ColumnOptions = ({ attributes, setAttributes }) => {
 							/>
 							<OptionSelect
 								value={columnGradientDirection}
-								onChange={(value) => setAttributes({ [getAttrKey('columnGradientDirection', attributes, manifest)]: value })}
+								onChange={(value) =>
+									setAttributes({ [getAttrKey('columnGradientDirection', attributes, manifest)]: value })
+								}
 								options={getOption('columnGradientDirection', attributes, manifest)}
 								wrapperProps={{
 									triggerIcon: <div className={rotationClassName[columnGradientDirection]}>{icons.arrowUpCircle}</div>,

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

@@ -10,7 +10,9 @@ import manifest from './../manifest.json';
 export const ColumnsEditor = ({ attributes, setAttributes, clientId }) => {
 	const { title, layoutPresets } = manifest;
 
-	const innerBlockCount = useSelect((select) => select('core/block-editor').getBlock(clientId).innerBlocks?.length ?? 0);
+	const innerBlockCount = useSelect(
+		(select) => select('core/block-editor').getBlock(clientId).innerBlocks?.length ?? 0,
+	);
 
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps(blockProps, {
@@ -36,7 +38,9 @@ export const ColumnsEditor = ({ attributes, setAttributes, clientId }) => {
 							<Button
 								key={index}
 								onPress={async () => {
-									const blocksToInsert = blockData.map(({ name: blockName, attributes: blockAttrs }) => createBlock(blockName, blockAttrs));
+									const blocksToInsert = blockData.map(({ name: blockName, attributes: blockAttrs }) =>
+										createBlock(blockName, blockAttrs),
+									);
 
 									setAttributes(attrsToSet);
 

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/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>
 										</>
 									}