@eightshift/frontend-libs-tailwind 1.0.0 → 1.1.1

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

@@ -1,24 +1,6 @@
 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';
 
@@ -49,6 +31,7 @@ export const VideoOptions = (attributes) => {
 			case 'chapters':
 				return icons.videoChapters;
 		}
+
 		return icons.emptyRect;
 	};
 
@@ -126,10 +109,7 @@ 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
 				/>
@@ -155,9 +135,7 @@ export const VideoOptions = (attributes) => {
 					return (
 						<RepeaterItem
 							icon={getTrackIcon(kind)}
-							label={
-								label ? sprintf(__('Track %d', '%g_textdomain%'), index + 1) : __('New track', '%g_textdomain%')
-							}
+							label={label ? sprintf(__('Track %d', '%g_textdomain%'), index + 1) : __('New track', '%g_textdomain%')}
 							subtitle={label}
 						>
 							<FileSelector

package/blocks/init/src/Blocks/custom/accordion/assets/index.js

@@ -28,7 +28,7 @@ domReady(async () => {
 					activeElement = trigger;
 				}
 
-				const expanded = trigger.getAttribute('aria-expanded') === 'true' ?? false;
+				const expanded = (trigger.getAttribute('aria-expanded') ?? 'false') === 'true';
 				trigger.setAttribute('aria-expanded', !expanded);
 				target.hidden = expanded;
 			});

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

@@ -13,5 +13,10 @@ export const AccordionEditor = ({ clientId }) => {
 		),
 	});
 
-	return <div {...innerBlocksProps} className='space-y-0 *:!m-0' />;
+	return (
+		<div
+			{...innerBlocksProps}
+			className='space-y-0 *:!m-0'
+		/>
+	);
 };

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

@@ -8,11 +8,11 @@ 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);
+
 			return elem;
 		});
 	};
@@ -26,12 +26,7 @@ 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-editor.js

@@ -9,7 +9,10 @@ export const ColumnEditor = ({ clientId }) => {
 
 	return (
 		<>
-			<div {...innerBlocksProps} className='contents *:!m-0' />
+			<div
+				{...innerBlocksProps}
+				className='contents *:!m-0'
+			/>
 			<BlockInserter
 				small
 				clientId={clientId}

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

@@ -65,6 +65,7 @@ export const ColumnOptions = ({ attributes, setAttributes }) => {
 	const widthOffsetOptions = generateOptionsFromValue(widthOffsetValue, (value, breakpoint) => {
 		const [_, offset, width] = value.split(',');
 		const numColumns = parseInt(columnsConfig?.[breakpoint] ?? columnsConfig?.['_default']);
+
 		return getColumnConfigOutputText(numColumns, parseInt(offset), parseInt(width));
 	});
 
@@ -208,9 +209,7 @@ 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}
@@ -312,9 +311,7 @@ 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)),
 								});
 							}
 						}}
@@ -326,9 +323,7 @@ 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%')}
 						/>
@@ -365,9 +360,7 @@ 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,9 +10,7 @@ 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, {
@@ -38,9 +36,7 @@ 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,17 +2,7 @@ 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,
-	BaseControl,
-	HStack,
-	NumberPicker,
-	OptionSelect,
-	Select,
-	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';
 
@@ -36,6 +26,14 @@ export const FeaturedContentOptions = ({ attributes, setAttributes }) => {
 	const [useSpecificPosts, setUseSpecificPosts] = useState(featuredContentPosts?.length > 0);
 	const [useSpecificTerms, setUseSpecificTerms] = useState(featuredContentTerms?.length > 0);
 
+	let termsToShow = '';
+
+	if (featuredContentUseCurrentTerm) {
+		termsToShow = 'current';
+	} else {
+		termsToShow = useSpecificTerms ? 'manual' : 'all';
+	}
+
 	return (
 		<>
 			<OptionSelect
@@ -98,7 +96,7 @@ 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'
@@ -114,9 +112,7 @@ 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>
 
@@ -126,14 +122,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,
-						noCache: true,
 					})}
 					onChange={(value) => setAttributes({ [getAttrKey('featuredContentPosts', attributes, manifest)]: value })}
 					reFetchOnSearch
@@ -161,12 +153,10 @@ 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,
@@ -179,7 +169,7 @@ export const FeaturedContentOptions = ({ attributes, setAttributes }) => {
 
 			<OptionSelect
 				aria-label={__('Select terms to show', '%g_textdomain%')}
-				value={featuredContentUseCurrentTerm ? 'current' : useSpecificTerms ? 'manual' : 'all'}
+				value={termsToShow}
 				onChange={(value) => {
 					setUseSpecificTerms(value === 'manual');
 					setAttributes({
@@ -192,6 +182,8 @@ 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%'),
 					},
 					{
 						label: __('Show same terms as current post', '%g_textdomain%'),
@@ -208,16 +200,12 @@ 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',
 						processId: ({ id }) => id,
 						processLabel: ({ name }) => name,
-						noCache: true,
 					})}
 					onChange={(value) => setAttributes({ [getAttrKey('featuredContentTerms', attributes, manifest)]: value })}
 					reFetchOnSearch

package/blocks/init/src/Blocks/custom/featured-content/partials/cards.php

@@ -23,11 +23,11 @@ foreach ($items as $item) {
 		class="group rounded-xl relative overflow-hidden w-full aspect-[0.875] bg-gradient-to-b from-gray-100 to-white shadow-md hover:shadow-lg transition duration-500 hover:duration-1000 border border-gray-200 <?php echo $hasEnterAnimation ? 'animate-in zoom-in-110 fade-in' : ''; ?>"
 	>
 		<?php if (!empty($featuredImage)) { ?>
-			<img class="absolute inset-0 !size-full object-cover group-hover:scale-105 origin-bottom transition-transform duration-500 group-hover:duration-1000 pointer-events-none select-none" src="<?php echo esc_url($featuredImage); ?>" alt="">
-			<div class=" absolute inset-0 backdrop-blur [mask-image:_linear-gradient(to_bottom,_transparent_5%,_black_50%)]"></div>
-			<div class=" absolute inset-0 backdrop-blur-lg [mask-image:_linear-gradient(to_bottom,_transparent_20%,_black_100%)]"></div>
-			<div class=" absolute inset-0 backdrop-blur-3xl [mask-image:_linear-gradient(to_bottom,_transparent_85%,_black_100%)]"></div>
-			<div class="absolute inset-0 backdrop-saturate-[125%] backdrop-brightness-150"></div>
+			<img class="absolute inset-0 !size-full object-cover group-hover:scale-105 origin-bottom transition-transform duration-500 group-hover:duration-1000 pointer-events-none select-none" src="<?php echo esc_url($featuredImage); ?>" alt="" loading="lazy">
+			<div class="absolute inset-0 backdrop-blur [mask-image:_linear-gradient(to_bottom,_transparent_5%,_black_50%)]"></div>
+			<div class="absolute inset-0 backdrop-blur-lg [mask-image:_linear-gradient(to_bottom,_transparent_20%,_black_100%)]"></div>
+			<div class="absolute inset-0 backdrop-blur-3xl [mask-image:_linear-gradient(to_bottom,_transparent_85%,_black_100%)]"></div>
+			<div class="absolute inset-0 backdrop-saturate-[125%] backdrop-brightness-105"></div>
 			<div class="absolute inset-0 bg-black/50 [&+div]:text-white [mask-image:_linear-gradient(to_bottom,_transparent_25%,_black_80%)]"></div>
 		<?php } ?>
 		<div class="flex flex-col justify-end p-6 absolute inset-0 group-hover:scale-[1.025] origin-bottom-left transition-transform duration-500 group-hover:duration-1000">

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

@@ -2,7 +2,5 @@ import { InnerBlocks } from '@wordpress/block-editor';
 import { BlockInserter } from '@eightshift/frontend-libs-tailwind/scripts';
 
 export const GroupEditor = ({ clientId }) => {
-	return (
-		<InnerBlocks renderAppender={() => <BlockInserter clientId={clientId} />} />
-	);
+	return <InnerBlocks renderAppender={() => <BlockInserter clientId={clientId} />} />;
 };

package/blocks/init/src/Blocks/custom/heading/heading-transforms.js

@@ -10,6 +10,7 @@ export const transforms = {
 			blocks: [`${manifest.namespace}/${manifestParagraph.blockName}`],
 			transform: (attributes) => {
 				let headingAttributes = {};
+
 				for (const attribute in attributes) {
 					if (attribute.startsWith('block')) {
 						continue;

package/blocks/init/src/Blocks/custom/map/assets/map-controller.js

@@ -33,7 +33,6 @@ export class MapController {
 			layers: parsedLayers.map((layer) => processMapLayer(layer)),
 			view: view,
 			interactions: OLDefaultInteractions(parsedInteractions).getArray(),
-			// eslint-disable-next-line no-unused-vars
 			controls: Object.entries(parsedControls)
 				.filter(([_, v]) => v === true)
 				.map(([name]) => processMapInteraction(name)),

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

@@ -1,6 +1,3 @@
-/* eslint-disable consistent-return */
-/* eslint-disable react-hooks/exhaustive-deps */
-
 import React, { createContext, useRef, useState, useEffect, useContext } from 'react';
 import { Map as OLMap, View } from 'ol';
 import { OSM, Vector as VectorSource, VectorTile as VectorTileSource, XYZ, TileJSON } from 'ol/source';
@@ -140,6 +137,7 @@ export const MapLayer = (props) => {
 			}
 		};
 	}, [map]);
+
 	return null;
 };
 
@@ -177,6 +175,7 @@ export const MapInteraction = (props) => {
 			}
 		};
 	}, [map]);
+
 	return null;
 };
 
@@ -251,6 +250,7 @@ export const MapControl = (props) => {
 			}
 		};
 	}, [map]);
+
 	return null;
 };
 

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

@@ -1,13 +1,5 @@
 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 }) => {
@@ -25,9 +17,7 @@ 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,33 +111,15 @@ 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);
-					// eslint-disable-next-line max-len
-					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}
 							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
@@ -178,30 +160,15 @@ 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' &&
-												// eslint-disable-next-line max-len
-												__(
-													'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>
-													{
-														// eslint-disable-next-line max-len
-														__(
-															"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 />
 												</>
@@ -209,8 +176,7 @@ 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}'}
 
@@ -222,11 +188,9 @@ 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/paragraph/paragraph-transforms.js

@@ -10,6 +10,7 @@ export const transforms = {
 			blocks: [`${globalManifest.namespace}/${manifestHeading.blockName}`],
 			transform: (attributes) => {
 				let paragraphAttributes = {};
+
 				for (const attribute in attributes) {
 					if (attribute.startsWith('block')) {
 						continue;

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

@@ -57,9 +57,7 @@ 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/table-of-contents/components/table-of-contents-editor.js

@@ -31,7 +31,7 @@ export const TableOfContentsEditor = ({ attributes, setAttributes }) => {
 const DemoTocItem = ({ level, disabled }) => (
 	<div class={clsx('group block select-none py-0.5 focus:outline-none', disabled && 'pointer-events-none opacity-25')}>
 		{level > 1 && <span class='mr-1.5 tracking-tighter text-gray-300'>{'–'.repeat(level - 1)}</span>}
-		<span class='group-focus-visible:text-navy-50px-0.5 rounded text-sm transition group-hover:bg-navy-100 group-hover:text-navy-950 group-hover:ring-4 group-hover:ring-navy-100 group-focus-visible:bg-navy-950 group-focus-visible:ring-4 group-focus-visible:ring-navy-950'>
+		<span class='group-focus-visible:text-navy-50px-0.5 group-hover:bg-navy-100 group-hover:text-navy-950 group-hover:ring-navy-100 group-focus-visible:bg-navy-950 group-focus-visible:ring-navy-950 rounded text-sm transition group-hover:ring-4 group-focus-visible:ring-4'>
 			{sprintf(__('Heading %d', '%g_textdomain%'), level)}
 		</span>
 	</div>

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

@@ -5,10 +5,28 @@
 	"foreground": "#0F766E",
 	"globalVariables": {
 		"breakpoints": {
-			"mobile": 27,
-			"tablet": 80,
-			"desktop": 90,
-			"large": 120
+			"sm": 40,
+			"md": 80,
+			"lg": 90,
+			"xl": 120
+		},
+		"breakpointData": {
+			"sm": {
+				"icon": "screenMobile",
+				"label": "Mobile"
+			},
+			"md": {
+				"icon": "screenTablet",
+				"label": "Tablet"
+			},
+			"lg": {
+				"icon": "screenDesktop",
+				"label": "Desktop"
+			},
+			"xl": {
+				"icon": "screenLarge",
+				"label": "Large"
+			}
 		}
 	}
 }

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

@@ -1,15 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import { checkAttr, getAttrKey, getOption } from '@eightshift/frontend-libs-tailwind/scripts';
-import {
-	BaseControl,
-	ButtonGroup,
-	ColorPicker,
-	ContainerPanel,
-	OptionSelect,
-	Spacer,
-	Responsive,
-	InputField,
-} from '@eightshift/ui-components';
+import { BaseControl, ButtonGroup, ColorPicker, ContainerPanel, OptionSelect, Spacer, Responsive, InputField } from '@eightshift/ui-components';
 import { icons } from '@eightshift/ui-components/icons';
 import { clsx } from '@eightshift/ui-components/utilities';
 import { getResponsiveData } from '@eightshift/frontend-libs-tailwind/scripts/helpers/breakpoints';
@@ -117,9 +108,7 @@ export const WrapperOptions = ({ attributes, setAttributes }) => {
 								setAttributes({ [getAttrKey('wrapperBackground', attributes, manifest)]: undefined });
 							} else {
 								setAttributes({
-									[getAttrKey('wrapperBackground', attributes, manifest)]: Object.keys(
-										manifest.tailwind.options.wrapperBackground.twClasses,
-									).find((key) => key.startsWith(value)),
+									[getAttrKey('wrapperBackground', attributes, manifest)]: Object.keys(manifest.tailwind.options.wrapperBackground.twClasses).find((key) => key.startsWith(value)),
 								});
 							}
 						}}
@@ -131,9 +120,7 @@ export const WrapperOptions = ({ attributes, setAttributes }) => {
 					{backgroundType === 'solid' && (
 						<ColorPicker
 							colors={getColorOption('wrapperBackgroundSolid', manifest)}
-							onChange={(value) =>
-								setAttributes({ [getAttrKey('wrapperBackground', attributes, manifest)]: `solid-${value}` })
-							}
+							onChange={(value) => setAttributes({ [getAttrKey('wrapperBackground', attributes, manifest)]: `solid-${value}` })}
 							value={wrapperBackground?.replace('solid-', '')}
 							aria-label={__('Background color', '%g_textdomain%')}
 						/>
@@ -170,9 +157,7 @@ export const WrapperOptions = ({ attributes, setAttributes }) => {
 							/>
 							<OptionSelect
 								value={wrapperGradientDirection}
-								onChange={(value) =>
-									setAttributes({ [getAttrKey('wrapperGradientDirection', attributes, manifest)]: value })
-								}
+								onChange={(value) => setAttributes({ [getAttrKey('wrapperGradientDirection', attributes, manifest)]: value })}
 								options={getOption('wrapperGradientDirection', attributes, manifest)}
 								wrapperProps={{
 									triggerIcon: <div className={rotationClassName[wrapperGradientDirection]}>{icons.arrowUpCircle}</div>,

package/blocks/init/src/Blocks/wrapper/wrapper.js

@@ -4,10 +4,7 @@ import { WrapperOptions } from './components/wrapper-options';
 
 export const Wrapper = (props) => {
 	const {
-		props: {
-			setAttributes,
-			attributes,
-		},
+		props: { setAttributes, attributes },
 		children,
 	} = props;
 

package/linters/base.config.mjs

@@ -6,7 +6,7 @@ import globals from 'globals';
 
 export default [
 	{
-		ignores: ['**/dist/', 'public/'],
+		ignores: ['**/dist/', 'public/', 'node_modules/', 'vendor/', 'vendor-prefixed/'],
 	},
 	{
 		files: ['**/*.js', '**/*.jsx'],