@eightshift/frontend-libs-tailwind 1.3.3 → 1.4.1

package/blocks/init/src/Blocks/custom/accordion-item/manifest.json

@@ -52,17 +52,17 @@
 		"parts": {
 			"trigger": {
 				"twClasses": "flex items-center justify-between gap-2 group px-2 py-4 w-full border-t border-t-gray-400 text-sm font-medium focus:outline-none focus-visible:ring focus-visible:ring-navy-500/30 transition [&>svg]:size-5 [&>svg]:transition-transform [&[aria-expanded=true]>svg]:rotate-45",
-				"twClassesEditor": "flex items-center justify-between gap-2 group px-2 py-4 w-full border-t border-t-gray-400 text-sm font-medium"
+				"twClassesEditorOnly": "flex items-center justify-between gap-2 group px-2 py-4 w-full border-t border-t-gray-400 text-sm font-medium"
 			},
 			"content-container": {
 				"twClasses": "pl-2 pr-8 pb-4 animate-in fade-in duration-500 fill-mode-forwards",
-				"twClassesEditor": "pl-2 pr-8 pb-4 *:!m-0"
+				"twClassesEditorOnly": "pl-2 pr-8 pb-4 *:!m-0"
 			},
 			"editor-trigger": {
-				"twClassesEditor": "focus:outline-none focus-visible:ring focus-visible:ring-navy-500/30 transition"
+				"twClassesEditorOnly": "focus:outline-none focus-visible:ring focus-visible:ring-navy-500/30 transition"
 			},
 			"editor-trigger-icon": {
-				"twClassesEditor": "size-5 transition duration-300"
+				"twClassesEditorOnly": "size-5 transition duration-300"
 			}
 		}
 	}

package/blocks/init/src/Blocks/custom/carousel/carousel.php

@@ -50,8 +50,8 @@ $carouselPagination = Helpers::checkAttr('carouselPagination', $attributes, $man
 		</div>
 	<?php } ?>
 
-	<div class="<?php echo esc_attr(Helpers::getTwPart('container', $manifest, "{$blockJsClass}-container")); ?>">
-		<div class="<?php echo esc_attr(Helpers::getTwClasses($attributes, $manifest)); ?>">
+	<div class="<?php echo esc_attr(Helpers::tailwindClasses('container', $attributes, $manifest, "{$blockJsClass}-container")); ?>">
+		<div class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest)); ?>">
 			<?php
 			// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
 			echo $renderContent;

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

@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
-import { BlockInserter, getTwClasses, getTwPart } from '@eightshift/frontend-libs-tailwind/scripts';
+import { BlockInserter, tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
 import manifest from '../manifest.json';
 
 export const CarouselEditor = ({ attributes, clientId }) => {
@@ -12,10 +12,10 @@ export const CarouselEditor = ({ attributes, clientId }) => {
 
 	return (
 		<div className='flex items-center gap-2'>
-			<div className={getTwPart('container', manifest)}>
+			<div className={tailwindClasses('container', attributes, manifest)}>
 				<div
 					{...innerBlocksProps}
-					className={getTwClasses(attributes, manifest)}
+					className={tailwindClasses(attributes, manifest)}
 				/>
 			</div>
 

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

@@ -107,12 +107,12 @@
 	"tailwind": {
 		"base": {
 			"twClasses": "grid grid-flow-col justify-items-center auto-cols-[85%] sm:auto-cols-[minmax(20rem,_auto)] *:select-none",
-			"twClassesEditor": "grid grid-flow-col justify-items-center auto-cols-[minmax(20rem,_auto)]"
+			"twClassesEditorOnly": "grid grid-flow-col justify-items-center auto-cols-[minmax(20rem,_auto)]"
 		},
 		"parts": {
 			"container": {
 				"twClasses": "overflow-hidden py-2",
-				"twClassesEditor": "overflow-y-hidden overflow-x-auto w-full has-[>_:empty]:hidden"
+				"twClassesEditorOnly": "overflow-y-hidden overflow-x-auto w-full has-[>_:empty]:hidden"
 			}
 		},
 		"options": {

package/blocks/init/src/Blocks/custom/column/column-hooks.js

@@ -2,7 +2,7 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import globalManifest from '../../manifest.json';
 import manifest from './manifest.json';
-import { getTwClasses } from '@eightshift/frontend-libs-tailwind/scripts';
+import { tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
 
 const { namespace } = globalManifest;
 
@@ -19,7 +19,7 @@ const parentComponentBlock = createHigherOrderComponent((BlockListBlock) => {
 		if (name === fullBlockName) {
 			updatedProps = {
 				...innerProps,
-				className: getTwClasses(attributes, manifest, '[&_>_.wp-block]:!mx-0 !m-0'),
+				className: tailwindClasses(attributes, manifest, '[&_>_.wp-block]:!mx-0 !m-0'),
 			};
 		}
 

package/blocks/init/src/Blocks/custom/column/column.php

@@ -10,7 +10,7 @@ use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
 
 $manifest = Helpers::getManifestByDir(__DIR__);
 
-$blockClass = Helpers::getTwClasses($attributes, $manifest);
+$blockClass = Helpers::tailwindClasses('base', $attributes, $manifest);
 ?>
 
 <div class="<?php echo esc_attr($blockClass); ?>" >

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

@@ -473,7 +473,7 @@
 					"true": "hidden",
 					"false": "flex"
 				},
-				"twClassesEditor": {
+				"twClassesEditorOnly": {
 					"true": "opacity-25",
 					"false": "opacity-100"
 				}

package/blocks/init/src/Blocks/custom/columns/columns.php

@@ -10,7 +10,7 @@ use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
 
 $manifest = Helpers::getManifestByDir(__DIR__);
 
-$blockClass = Helpers::getTwClasses($attributes, $manifest);
+$blockClass = Helpers::tailwindClasses('base', $attributes, $manifest);
 ?>
 
 <div class="<?php echo esc_attr($blockClass); ?>" >

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

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import { useSelect, dispatch } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
-import { BlockInserter, getTwClasses, checkAttr } from '@eightshift/frontend-libs-tailwind/scripts';
+import { BlockInserter, tailwindClasses, checkAttr } from '@eightshift/frontend-libs-tailwind/scripts';
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 import { Button, RichLabel } from '@eightshift/ui-components';
 import { icons, BlockIcon } from '@eightshift/ui-components/icons';
@@ -66,7 +66,7 @@ export const ColumnsEditor = ({ attributes, setAttributes, clientId }) => {
 
 			<div
 				{...innerBlocksProps}
-				className={getTwClasses(attributes, manifest, '[&>.block-list-appender]:hidden')}
+				className={tailwindClasses(attributes, manifest, '[&>.block-list-appender]:hidden')}
 			/>
 
 			{innerBlockCount > 0 && (

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

@@ -1,4 +1,4 @@
-import { ServerSideRender, getTwPart, props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { ServerSideRender, tailwindClasses, props } from '@eightshift/frontend-libs-tailwind/scripts';
 import { LoadMoreEditor } from '../../../components/load-more/components/load-more-editor';
 import manifest from '../manifest.json';
 
@@ -16,7 +16,7 @@ export const FeaturedContentEditor = ({ attributes, setAttributes }) => {
 				}}
 			/>
 
-			<div className={getTwPart('loadMoreContainer', manifest)}>
+			<div className={tailwindClasses('loadMoreContainer', attributes, manifest)}>
 				<LoadMoreEditor
 					{...props('loadMore', attributes, {
 						setAttributes,

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

@@ -105,7 +105,7 @@ $args['posts_per_page'] = $featuredContentPerPage;
 <div>
 	<div
 		id="<?php echo esc_attr($loadMoreId); ?>"
-		class="<?php echo esc_attr(Helpers::getTwClasses($attributes, $manifest)); ?>"
+		class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest)); ?>"
 		aria-live="polite"
 	>
 		<?php
@@ -124,7 +124,7 @@ $args['posts_per_page'] = $featuredContentPerPage;
 	<?php
 	// phpcs:ignore Squiz.NamingConventions.ValidVariableName.MemberNotCamelCaps
 	if (!$featuredContentServerSideRender && $mainQuery->max_num_pages > 1) { ?>
-		<div class="<?php echo esc_attr(Helpers::getTwPart('loadMoreContainer', $manifest)); ?>">
+		<div class="<?php echo esc_attr(Helpers::tailwindClasses('loadMoreContainer', $attributes, $manifest)); ?>">
 			<?php
 			echo Helpers::render('load-more', Helpers::props('loadMore', $attributes, [
 				'loadMoreInitialItems' => wp_json_encode($mainQuery->posts),

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

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { getTwClasses, props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { tailwindClasses, props } from '@eightshift/frontend-libs-tailwind/scripts';
 import { HeadingEditor as EditorComponent } from '../../../components/heading/components/heading-editor';
 import manifest from './../manifest.json';
 
@@ -9,7 +9,7 @@ export const HeadingEditor = ({ attributes, setAttributes }) => {
 			{...props('heading', attributes, {
 				setAttributes,
 			})}
-			additionalClass={getTwClasses(attributes, manifest)}
+			additionalClass={tailwindClasses(attributes, manifest)}
 		/>
 	);
 };

package/blocks/init/src/Blocks/custom/heading/heading.php

@@ -11,5 +11,5 @@ use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
 $manifest = Helpers::getManifestByDir(__DIR__);
 
 echo Helpers::render('heading', Helpers::props('heading', $attributes, [
-	'additionalClass' => Helpers::getTwClasses($attributes, $manifest),
+	'additionalClass' => Helpers::tailwindClasses('base', $attributes, $manifest),
 ]));

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

@@ -1,4 +1,4 @@
-import { getTwClasses, props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { tailwindClasses, props } from '@eightshift/frontend-libs-tailwind/scripts';
 import { ListEditor as EditorComponent } from '../../../components/list/components/list-editor';
 import manifest from '../manifest.json';
 
@@ -7,7 +7,7 @@ export const ListEditor = ({ attributes, setAttributes }) => {
 		<EditorComponent
 			{...props('list', attributes, {
 				setAttributes,
-				additionalClass: getTwClasses(attributes, manifest),
+				additionalClass: tailwindClasses(attributes, manifest),
 			})}
 		/>
 	);

package/blocks/init/src/Blocks/custom/list/list.php

@@ -11,5 +11,5 @@ use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
 $manifest = Helpers::getManifestByDir(__DIR__);
 
 echo Helpers::render('list', Helpers::props('list', $attributes, [
-	'additionalClass' => Helpers::getTwClasses($attributes, $manifest),
+	'additionalClass' => Helpers::tailwindClasses('base', $attributes, $manifest),
 ]));

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

@@ -24,7 +24,7 @@ import { applyStyle as OLMBStyleApply } from 'ol-mapbox-style';
 import { Style, Fill, Stroke, Icon } from 'ol/style';
 
 import manifest from '../manifest.json';
-import { getTwClasses } from '@eightshift/frontend-libs-tailwind/scripts';
+import { tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
 
 export const MapContext = new createContext();
 
@@ -72,7 +72,7 @@ export const OpenLayersMap = ({ children, zoom, center, attributes, manifest })
 		<MapContext.Provider value={{ map }}>
 			<div
 				ref={mapRef}
-				className={getTwClasses(attributes, manifest)}
+				className={tailwindClasses(attributes, manifest)}
 			>
 				{children}
 			</div>

package/blocks/init/src/Blocks/custom/map/map.php

@@ -41,7 +41,7 @@ $activeLayers = array_values($activeLayers);
 ?>
 
 <div
-	class="<?php echo esc_attr(Helpers::getTwClasses($attributes, $manifest, $blockJsClass)); ?>"
+	class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $blockJsClass)); ?>"
 	data-center-lat="<?php echo esc_attr($mapCenterLat); ?>"
 	data-center-lon="<?php echo esc_attr($mapCenterLon); ?>"
 	data-center-zoom="<?php echo esc_attr($mapZoom); ?>"

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

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { createBlock } from '@wordpress/blocks';
-import { getTwClasses, props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { tailwindClasses, props } from '@eightshift/frontend-libs-tailwind/scripts';
 import { ParagraphEditor as EditorComponent } from '../../../components/paragraph/components/paragraph-editor';
 import manifest from './../manifest.json';
 import globalManifest from './../../../manifest.json';
@@ -35,7 +35,7 @@ export const ParagraphEditor = (keyProps) => {
 			mergeBlocks={mergeBlocks}
 			onReplace={onReplace}
 			onRemove={onReplace ? () => onReplace([]) : undefined}
-			additionalClass={getTwClasses(attributes, manifest)}
+			additionalClass={tailwindClasses(attributes, manifest)}
 		/>
 	);
 };

package/blocks/init/src/Blocks/custom/paragraph/paragraph.php

@@ -11,5 +11,5 @@ use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
 $manifest = Helpers::getManifestByDir(__DIR__);
 
 echo Helpers::render('paragraph', Helpers::props('paragraph', $attributes, [
-	'additionalClass' => Helpers::getTwClasses($attributes, $manifest),
+	'additionalClass' => Helpers::tailwindClasses('base', $attributes, $manifest),
 ]));

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

@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import { RichText } from '@wordpress/block-editor';
-import { checkAttr, getAttrKey, getTwClasses, getTwPart, props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { checkAttr, getAttrKey, tailwindClasses, props } from '@eightshift/frontend-libs-tailwind/scripts';
 import { ImagePlaceholder } from '@eightshift/ui-components';
 import { ShareEditor } from '../../../components/share/components/share-editor';
 import { LinkSectionEditor } from '../../../assets/scripts/link-section-editor';
@@ -12,31 +12,31 @@ export const SiteFooterEditor = ({ attributes, setAttributes }) => {
 	const siteFooterLogoUrl = checkAttr('siteFooterLogoUrl', attributes, manifest);
 
 	return (
-		<div className={getTwClasses(attributes, manifest)}>
-			<div className={getTwPart('topContainer', manifest)}>
+		<div className={tailwindClasses(attributes, manifest)}>
+			<div className={tailwindClasses('topContainer', attributes, manifest)}>
 				<ImagePlaceholder
 					style='simple'
 					imageMode='contain'
 					url={siteFooterLogoUrl}
 					size='fullWidth'
-					className={getTwPart('logo', manifest)}
+					className={tailwindClasses('logo', attributes, manifest)}
 				/>
 
-				<div className={getTwPart('linksContainer', manifest)}>
+				<div className={tailwindClasses('linksContainer', attributes, manifest)}>
 					<LinkSectionEditor
 						links={siteFooterPrimary}
 						onChange={(value) => setAttributes({ [getAttrKey('siteFooterPrimary', attributes, manifest)]: value })}
 						classNames={{
-							sectionContainer: getTwPart('sectionContainer', manifest),
-							sectionTitle: getTwPart('sectionTitle', manifest),
-							link: getTwPart('link', manifest),
+							sectionContainer: tailwindClasses('sectionContainer', attributes, manifest),
+							sectionTitle: tailwindClasses('sectionTitle', attributes, manifest),
+							link: tailwindClasses('link', attributes, manifest),
 						}}
 					/>
 				</div>
 			</div>
 
-			<div className={getTwPart('bottomContainer', manifest)}>
-				<span className={getTwPart('copyright', manifest)}>
+			<div className={tailwindClasses('bottomContainer', attributes, manifest)}>
+				<span className={tailwindClasses('copyright', attributes, manifest)}>
 					&copy;
 					<RichText
 						placeholder={__('Copyright', '%g_textdomain%')}

package/blocks/init/src/Blocks/custom/site-footer/manifest.json

@@ -59,11 +59,11 @@
 			},
 			"link": {
 				"twClasses": "block w-fit text-base text-gray-700 hover:underline underline-offset-2 decoration-navy-500 decoration-2",
-				"twClassesEditor": "text-base text-gray-700"
+				"twClassesEditorOnly": "text-base text-gray-700"
 			},
 			"logo": {
 				"twClasses": "min-h-16 w-28",
-				"twClassesEditor": "min-h-16 max-w-28 p-1 [&_img]:!object-contain"
+				"twClassesEditorOnly": "min-h-16 max-w-28 p-1 [&_img]:!object-contain"
 			},
 			"share": {
 				"twClasses": "mt-5"

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

@@ -19,24 +19,24 @@ $siteFooterLogoId = Helpers::checkAttr('siteFooterLogoId', $attributes, $manifes
 $logoAlt = get_post_meta($siteFooterLogoId, '_wp_attachment_image_alt', true) ?? '';
 ?>
 
-<div class="<?php echo esc_attr(Helpers::getTwClasses($attributes, $manifest)); ?>">
-	<div class="<?php echo esc_attr(Helpers::getTwPart('topContainer', $manifest)); ?>">
+<div class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest)); ?>">
+	<div class="<?php echo esc_attr(Helpers::tailwindClasses('topContainer', $attributes, $manifest)); ?>">
 		<a href="<?php echo esc_url(get_home_url()); ?>">
 			<img
 				src="<?php echo esc_attr($siteFooterLogoUrl); ?>"
 				alt="<?php echo esc_attr($logoAlt); ?>"
-				class="<?php echo esc_attr(Helpers::getTwPart('logo', $manifest)); ?>"
+				class="<?php echo esc_attr(Helpers::tailwindClasses('logo', $attributes, $manifest)); ?>"
 			>
 		</a>
-		<div class="<?php echo esc_attr(Helpers::getTwPart('linksContainer', $manifest)); ?>">
+		<div class="<?php echo esc_attr(Helpers::tailwindClasses('linksContainer', $attributes, $manifest)); ?>">
 
 			<?php
 			foreach ($siteFooterPrimary as $index => $value) {
 				$items = $value['items'] ?? [];
 				$header = $value['header'] ?? '';
 				?>
-				<div class="<?php echo esc_attr(Helpers::getTwPart('sectionContainer', $manifest)); ?>">
-					<p class="<?php echo esc_attr(Helpers::getTwPart('sectionTitle', $manifest)); ?>">
+				<div class="<?php echo esc_attr(Helpers::tailwindClasses('sectionContainer', $attributes, $manifest)); ?>">
+					<p class="<?php echo esc_attr(Helpers::tailwindClasses('sectionTitle', $attributes, $manifest)); ?>">
 						<?php echo wp_kses_post($header); ?>
 					</p>
 
@@ -46,7 +46,7 @@ $logoAlt = get_post_meta($siteFooterLogoId, '_wp_attachment_image_alt', true) ??
 						?>
 						<a
 							href="<?php echo esc_url($item['url']); ?>"
-							class="<?php echo esc_attr(Helpers::getTwPart('link', $manifest)); ?>"
+							class="<?php echo esc_attr(Helpers::tailwindClasses('link', $attributes, $manifest)); ?>"
 							<?php if ($item['newTab'] ?? false) { ?>
 								target="_blank"
 								rel="noopener noreferrer"
@@ -60,9 +60,9 @@ $logoAlt = get_post_meta($siteFooterLogoId, '_wp_attachment_image_alt', true) ??
 		</div>
 	</div>
 
-	<div class="<?php echo esc_attr(Helpers::getTwPart('bottomContainer', $manifest)); ?>">
+	<div class="<?php echo esc_attr(Helpers::tailwindClasses('bottomContainer', $attributes, $manifest)); ?>">
 		<?php if (!empty($siteFooterCopyright)) { ?>
-			<span class="<?php echo esc_attr(Helpers::getTwPart('copyright', $manifest)); ?>">
+			<span class="<?php echo esc_attr(Helpers::tailwindClasses('copyright', $attributes, $manifest)); ?>">
 				&copy; <?php echo esc_attr($siteFooterCopyright); ?>
 			</span>
 		<?php } ?>

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

@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import { RichText } from '@wordpress/block-editor';
-import { checkAttr, getAttrKey, getTwClasses, getTwPart } from '@eightshift/frontend-libs-tailwind/scripts';
+import { checkAttr, getAttrKey, tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
 import { ImagePlaceholder } from '@eightshift/ui-components';
 import manifest from '../manifest.json';
 
@@ -9,16 +9,16 @@ export const SiteNavigationEditor = ({ attributes, setAttributes }) => {
 	const siteNavigationLogoUrl = checkAttr('siteNavigationLogoUrl', attributes, manifest);
 
 	return (
-		<div className={getTwClasses(attributes, manifest)}>
+		<div className={tailwindClasses(attributes, manifest)}>
 			<ImagePlaceholder
 				style='simple'
 				imageMode='contain'
 				url={siteNavigationLogoUrl}
 				size='fullWidth'
-				className={getTwPart('logo', manifest)}
+				className={tailwindClasses('logo', attributes, manifest)}
 			/>
 
-			<div className={getTwPart('linkContainer', manifest)}>
+			<div className={tailwindClasses('linkContainer', attributes, manifest)}>
 				{siteNavigationLinks.map(({ text }, index) => {
 					return (
 						<RichText
@@ -30,7 +30,7 @@ export const SiteNavigationEditor = ({ attributes, setAttributes }) => {
 								setAttributes({ [getAttrKey('siteNavigationLinks', attributes, manifest)]: newLinks });
 							}}
 							allowedFormats={[]}
-							className={getTwPart('link', manifest)}
+							className={tailwindClasses('link', attributes, manifest)}
 							withoutInteractiveFormatting
 							disableLineBreaks
 						/>

package/blocks/init/src/Blocks/custom/site-navigation/manifest.json

@@ -40,7 +40,7 @@
 	"tailwind": {
 		"base": {
 			"twClasses": "flex items-center justify-between gap-4 max-w-screen-md mx-auto h-full ~sm/md:~px-8/20",
-			"twClassesEditor": "flex items-center justify-between gap-4 p-1"
+			"twClassesEditorOnly": "flex items-center justify-between gap-4 p-1"
 		},
 		"parts": {
 			"wrapper": {
@@ -48,11 +48,11 @@
 			},
 			"logo": {
 				"twClasses": "~sm/md:~w-20/28",
-				"twClassesEditor": "max-w-32"
+				"twClassesEditorOnly": "max-w-32"
 			},
 			"link": {
 				"twClasses": "text-base text-gray-700 hover:underline underline-offset-2 decoration-red-500 decoration-2",
-				"twClassesEditor": "text-base"
+				"twClassesEditorOnly": "text-base"
 			},
 			"drawerLink": {
 				"twClasses": "text-lg sm:text-base text-gray-700 hover:underline underline-offset-2 decoration-red-500 decoration-2 block py-4 sm:py-2"

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

@@ -21,17 +21,17 @@ $logoAlt = get_post_meta($siteNavigationLogoId, '_wp_attachment_image_alt', true
 $drawerId = 'navbar-mobile-flyout';
 ?>
 
-<nav class="<?php echo esc_attr(Helpers::getTwPart('wrapper', $manifest)); ?>">
-	<div class="<?php echo esc_attr(Helpers::getTwClasses($attributes, $manifest)); ?>">
+<nav class="<?php echo esc_attr(Helpers::tailwindClasses('wrapper', $attributes, $manifest)); ?>">
+	<div class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest)); ?>">
 		<a href="<?php echo esc_url(get_home_url()); ?>">
 			<img
 				src="<?php echo esc_attr($siteNavigationLogoUrl); ?>"
 				alt="<?php echo esc_attr($logoAlt); ?>"
-				class="<?php echo esc_attr(Helpers::getTwPart('logo', $manifest)); ?>"
+				class="<?php echo esc_attr(Helpers::tailwindClasses('logo', $attributes, $manifest)); ?>"
 			>
 		</a>
 
-		<div class="<?php echo esc_attr(Helpers::getTwPart('linkContainer', $manifest)); ?>">
+		<div class="<?php echo esc_attr(Helpers::tailwindClasses('linkContainer', $attributes, $manifest)); ?>">
 			<?php
 			foreach ($siteNavigationLinks as $navLink) {
 				$url = $navLink['url'] ?? '';
@@ -43,7 +43,7 @@ $drawerId = 'navbar-mobile-flyout';
 				?>
 				<a
 					href="<?php echo esc_attr($url); ?>"
-					class="<?php echo esc_attr(Helpers::getTwPart('link', $manifest)); ?>"
+					class="<?php echo esc_attr(Helpers::tailwindClasses('link', $attributes, $manifest)); ?>"
 					<?php if ($navLink['newTab'] ?? false) { ?>
 						target="_blank"
 						rel="noopener noreferrer"
@@ -54,7 +54,7 @@ $drawerId = 'navbar-mobile-flyout';
 			<?php } ?>
 		</div>
 
-		<button class="<?php echo esc_attr(Helpers::getTwPart('button', $manifest, 'sm:hidden')); ?>" data-micromodal-trigger="<?php echo esc_attr($drawerId); ?>">
+		<button class="<?php echo esc_attr(Helpers::tailwindClasses('button', $attributes, $manifest, 'sm:hidden')); ?>" data-micromodal-trigger="<?php echo esc_attr($drawerId); ?>">
 			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
 				<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
 			</svg>
@@ -63,10 +63,10 @@ $drawerId = 'navbar-mobile-flyout';
 </nav>
 
 
-<div id="<?php echo esc_attr($drawerId); ?>" aria-hidden="true" class="<?php echo esc_attr(Helpers::getTwPart('modalWrapper', $manifest)); ?>">
-	<div tabindex="-1" class="<?php echo esc_attr(Helpers::getTwPart('modalBackdrop', $manifest)); ?>" data-micromodal-close>
-		<div class="<?php echo esc_attr(Helpers::getTwPart('modalContent', $manifest)); ?>" role="dialog" aria-modal="true" aria-label="<?php echo esc_html__('Main menu', '%g_textdomain%'); ?>-title">
-			<button class="<?php echo esc_attr(Helpers::getTwPart('button', $manifest, 'ml-auto')); ?>" aria-label="Close menu" data-micromodal-close>
+<div id="<?php echo esc_attr($drawerId); ?>" aria-hidden="true" class="<?php echo esc_attr(Helpers::tailwindClasses('modalWrapper', $attributes, $manifest)); ?>">
+	<div tabindex="-1" class="<?php echo esc_attr(Helpers::tailwindClasses('modalBackdrop', $attributes, $manifest)); ?>" data-micromodal-close>
+		<div class="<?php echo esc_attr(Helpers::tailwindClasses('modalContent', $attributes, $manifest)); ?>" role="dialog" aria-modal="true" aria-label="<?php echo esc_html__('Main menu', '%g_textdomain%'); ?>-title">
+			<button class="<?php echo esc_attr(Helpers::tailwindClasses('button', $attributes, $manifest, 'ml-auto')); ?>" aria-label="Close menu" data-micromodal-close>
 				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
 					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
 				</svg>
@@ -84,7 +84,7 @@ $drawerId = 'navbar-mobile-flyout';
 					?>
 					<a
 						href="<?php echo esc_attr($url); ?>"
-						class="<?php echo esc_attr(Helpers::getTwPart('drawerLink', $manifest)); ?>"
+						class="<?php echo esc_attr(Helpers::tailwindClasses('drawerLink', $attributes, $manifest)); ?>"
 						<?php if ($navLink['newTab'] ?? false) { ?>
 							target="_blank"
 							rel="noopener noreferrer"

package/blocks/init/src/Blocks/custom/table-of-contents/components/table-of-contents-editor.js

@@ -1,6 +1,6 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { RichText } from '@wordpress/block-editor';
-import { checkAttr, getTwPart } from '@eightshift/frontend-libs-tailwind/scripts';
+import { checkAttr, tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
 import { clsx } from '@eightshift/ui-components/utilities';
 import manifest from '../manifest.json';
 
@@ -9,13 +9,13 @@ export const TableOfContentsEditor = ({ attributes, setAttributes }) => {
 	const tableOfContentsHeadingLevels = checkAttr('tableOfContentsHeadingLevels', attributes, manifest);
 
 	return (
-		<div className={getTwPart('container', manifest)}>
+		<div className={tailwindClasses('container', attributes, manifest)}>
 			<RichText
 				placeholder={manifest.attributes.tableOfContentsDescription.default}
 				value={tableOfContentsDescription}
 				onChange={(value) => setAttributes({ [getAttrKey('tableOfContentsDescription', attributes, manifest)]: value })}
 				allowedFormats={[]}
-				className={getTwPart('description', manifest)}
+				className={tailwindClasses('description', attributes, manifest)}
 			/>
 
 			{Object.entries(tableOfContentsHeadingLevels).map(([tag, enabled = false]) => (

package/blocks/init/src/Blocks/custom/table-of-contents/table-of-contents.php

@@ -14,7 +14,7 @@ $blockClass = $attributes['blockClass'] ?? '';
 $blockJsClass = $attributes['blockJsClass'] ?? '';
 
 $tocClass = Helpers::classnames([
-	Helpers::getTwPart('container', $manifest),
+	Helpers::tailwindClasses('container', $attributes, $manifest),
 	$blockJsClass,
 ]);
 
@@ -25,7 +25,7 @@ $headingLevelsToUse = implode(',', array_keys(array_filter($tableOfContentsHeadi
 ?>
 
 <div class="<?php echo esc_attr($tocClass); ?>" data-levels="<?php echo esc_attr($headingLevelsToUse); ?>">
-	<p class="<?php echo esc_attr(Helpers::getTwPart('description', $manifest)); ?>">
+	<p class="<?php echo esc_attr(Helpers::tailwindClasses('description', $attributes, $manifest)); ?>">
 	<?php echo esc_attr($tableOfContentsDescription); ?>
 	</p>
 </div>

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

@@ -1,4 +1,4 @@
-import { checkAttr, getTwClasses } from '@eightshift/frontend-libs-tailwind/scripts';
+import { checkAttr, tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
 import manifest from './../manifest.json';
 
 export const WrapperEditor = ({ attributes, children }) => {
@@ -8,5 +8,5 @@ export const WrapperEditor = ({ attributes, children }) => {
 		return children;
 	}
 
-	return <div className={getTwClasses(attributes, manifest)}>{children}</div>;
+	return <div className={tailwindClasses(attributes, manifest)}>{children}</div>;
 };

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

@@ -327,7 +327,7 @@
 	"tailwind": {
 		"base": {
 			"twClasses": "scroll-my-24",
-			"twClassesEditor": "flow-root"
+			"twClassesEditorOnly": "flow-root"
 		},
 		"options": {
 			"wrapperBackground": {
@@ -384,7 +384,7 @@
 					"true": "hidden",
 					"false": "block"
 				},
-				"twClassesEditor": {
+				"twClassesEditorOnly": {
 					"true": "opacity-25"
 				}
 			},

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

@@ -22,7 +22,7 @@ $wrapperId = Helpers::checkAttr('wrapperId', $attributes, $manifest);
 ?>
 
 <div
-	class="<?php echo esc_attr(Helpers::getTwClasses($attributes, $manifest)); ?>"
+	class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest)); ?>"
 	<?php if (!empty($wrapperId)) { ?>
 		id="<?php echo esc_attr($wrapperId); ?>"
 	<?php } ?>

package/linters/stylelint.config.js

@@ -138,5 +138,12 @@ module.exports = {
 		'no-descending-specificity': null,
 
 		'import-notation': null,
+
+		'at-rule-no-unknown': [
+			true,
+			{
+				ignoreAtRules: ['tailwind'],
+			},
+		],
 	},
 };