@eightshift/frontend-libs-tailwind 1.3.3 → 1.4.0

package/CHANGELOG.md

@@ -4,6 +4,17 @@ 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.4.0] - 2024-09-30
+- Introduced new, more flexible, and simpler to use `tailwindClasses` function. Replaces `getTwPart`, `getTwDynamicPart`, and `getTwClasses`.
+	- **Potentially breaking**: `twClassesEditor` is now appended to `twClasses`. If you need editor-only classes, you can now use the `twClassesEditorOnly` key. Editor-only classes replace `twClasses`, but will also have classes from `twClassesEditor`.
+	- **Potentially breaking**: `parts` key in manifest now supports specifying multiple parts just with a comma-separated string.
+	- You can now apply classes to multiple parts within one option or combination! Also work with responsive options.
+	- There are now (basic) warnings for misconfigurations of parts and options.
+- Updated block and component schemas with new Tailwind functionalities.
+- Updated dependencies.
+- Updated default blocks with new Tailwind functions.
+- Default Stylelint config will no longer report `@tailwind` rules.
+
 ## [1.3.3] - 2024-09-24
 - Updating schema.
 
@@ -49,6 +60,7 @@ 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.4.0]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.3.3...1.4.0
 [1.3.3]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.3.2...1.3.3
 [1.3.2]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.3.1...1.3.2
 [1.3.1]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.3.0...1.3.1

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

@@ -56,7 +56,7 @@ if (!empty($buttonAriaLabel)) {
 	$buttonAttrs['aria-label'] = $buttonAriaLabel;
 }
 
-$buttonAttrs['class'] = Helpers::getTwClasses($attributes, $manifest, 'button', $additionalClass);
+$buttonAttrs['class'] = Helpers::tailwindClasses('base', $attributes, $manifest, 'button', $additionalClass);
 
 $buttonTag = !empty($buttonUrl) ? 'a' : 'button';
 ?>

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

@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import { RichText } from '@wordpress/block-editor';
-import { checkAttr, getAttrKey, getTwClasses, props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { checkAttr, getAttrKey, tailwindClasses, props } from '@eightshift/frontend-libs-tailwind/scripts';
 import { IconEditor } from '../../icon/components/icon-editor';
 import manifest from './../manifest.json';
 
@@ -17,7 +17,7 @@ export const ButtonEditor = (attributes) => {
 	}
 
 	return (
-		<div className={getTwClasses(attributes, manifest, additionalClass)}>
+		<div className={tailwindClasses(attributes, manifest, additionalClass)}>
 			<IconEditor
 				{...props('icon', attributes, {
 					blockClass: componentClass,

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

@@ -12,30 +12,30 @@ $manifest = Helpers::getManifestByDir(__DIR__);
 $additionalClass = $attributes['additionalClass'] ?? '';
 ?>
 
-<div class="<?php echo esc_attr(Helpers::getTwClasses($attributes, $manifest, $additionalClass)); ?>" >
+<div class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass)); ?>" >
 	<?php
 	echo Helpers::render('image', Helpers::props('image', $attributes, [
 		'additionalClass' => [
-			'image' => Helpers::getTwPart('image', $manifest),
-			'picture' => Helpers::getTwPart('imagePicture', $manifest),
+			'image' => Helpers::tailwindClasses('image', $attributes, $manifest),
+			'picture' => Helpers::tailwindClasses('imagePicture', $attributes, $manifest),
 		]
 	]));
 	?>
 
-	<div class="<?php echo esc_attr(Helpers::getTwPart('content-container', $manifest)); ?>">
+	<div class="<?php echo esc_attr(Helpers::tailwindClasses('content-container', $attributes, $manifest)); ?>">
 		<?php
 		echo Helpers::render('paragraph', Helpers::props('intro', $attributes, [
-			'additionalClass' => Helpers::getTwPart('intro', $manifest),
+			'additionalClass' => Helpers::tailwindClasses('intro', $attributes, $manifest),
 		])),
 
 		Helpers::render('heading', Helpers::props('heading', $attributes)),
 
 		Helpers::render('paragraph', Helpers::props('paragraph', $attributes, [
-			'additionalClass' => Helpers::getTwPart('text', $manifest),
+			'additionalClass' => Helpers::tailwindClasses('text', $attributes, $manifest),
 		])),
 
 		Helpers::render('button', Helpers::props('button', $attributes, [
-			'additionalClass' => Helpers::getTwPart('button', $manifest),
+			'additionalClass' => Helpers::tailwindClasses('button', $attributes, $manifest),
 		]));
 		?>
 	</div>

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

@@ -1,4 +1,4 @@
-import { props, getTwClasses, getTwPart } from '@eightshift/frontend-libs-tailwind/scripts';
+import { props, tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
 import { ImageEditor } from '../../image/components/image-editor';
 import { HeadingEditor } from '../../heading/components/heading-editor';
 import { ParagraphEditor } from '../../paragraph/components/paragraph-editor';
@@ -9,30 +9,34 @@ export const CardEditor = (attributes) => {
 	const { additionalClass } = attributes;
 
 	return (
-		<div className={getTwClasses(attributes, manifest, additionalClass)}>
+		<div className={tailwindClasses(attributes, manifest, additionalClass)}>
 			<ImageEditor
 				{...props('image', attributes, {
 					additionalClass: {
-						image: getTwPart('image', manifest),
-						picture: getTwPart('imagePicture', manifest),
+						image: tailwindClasses('image', attributes, manifest),
+						picture: tailwindClasses('imagePicture', attributes, 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',
 					},
 				})}
 			/>
 
-			<div className={getTwPart('content-container', manifest)}>
+			<div className={tailwindClasses('content-container', attributes, manifest)}>
 				<ParagraphEditor
 					{...props('intro', attributes, {
-						additionalClass: getTwPart('intro', manifest),
+						additionalClass: tailwindClasses('intro', attributes, manifest),
 					})}
 				/>
 
 				<HeadingEditor {...props('heading', attributes)} />
 
-				<ParagraphEditor {...props('paragraph', attributes, { additionalClass: getTwPart('text', manifest) })} />
+				<ParagraphEditor
+					{...props('paragraph', attributes, { additionalClass: tailwindClasses('text', attributes, manifest) })}
+				/>
 
-				<ButtonEditor {...props('button', attributes, { additionalClass: getTwPart('button', manifest) })} />
+				<ButtonEditor
+					{...props('button', attributes, { additionalClass: tailwindClasses('button', attributes, manifest) })}
+				/>
 			</div>
 		</div>
 	);

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

@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import { RichText } from '@wordpress/block-editor';
-import { checkAttr, getAttrKey, getTwClasses } from '@eightshift/frontend-libs-tailwind/scripts';
+import { checkAttr, getAttrKey, tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
 import manifest from './../manifest.json';
 
 export const HeadingEditor = (attributes) => {
@@ -16,7 +16,7 @@ export const HeadingEditor = (attributes) => {
 
 	return (
 		<RichText
-			className={getTwClasses(attributes, manifest, additionalClass)}
+			className={tailwindClasses(attributes, manifest, additionalClass)}
 			placeholder={placeholder}
 			value={headingContent}
 			onChange={(value) => setAttributes({ [getAttrKey('headingContent', attributes, manifest)]: value })}

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

@@ -49,10 +49,10 @@ export const HeadingOptions = (attributes) => {
 					type='menu'
 					wrapperProps={{
 						triggerIcon: <span className='es-uic-font-mono uppercase'>{headingTag}</span>,
-						tooltip: __('Heading level', '%g_textdomain%'),
 					}}
 					hidden={hiddenOptions?.headingLevel}
 					noTriggerLabel
+					tooltip
 				/>
 
 				{additionalControls}

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

@@ -36,7 +36,7 @@ if (function_exists('idn_to_ascii') && function_exists('sanitize_title')) {
 
 <<?php echo esc_attr($headingTag); ?>
 	data-slug="<?php echo esc_attr($sanitizedTitle) ?>"
-	class="<?php echo esc_attr(Helpers::getTwClasses($attributes, $manifest, $additionalClass)); ?>"
+	class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass)); ?>"
 >
 	<?php
 		// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped

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

@@ -1,4 +1,4 @@
-import { props, checkAttr, getTwPart, getTwClasses } from '@eightshift/frontend-libs-tailwind/scripts';
+import { props, checkAttr, tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
 import { ImageEditor } from '../../image/components/image-editor';
 import { HeadingEditor } from '../../heading/components/heading-editor';
 import { ParagraphEditor } from '../../paragraph/components/paragraph-editor';
@@ -15,12 +15,12 @@ export const HeroEditor = (attributes) => {
 	}
 
 	return (
-		<div className={getTwClasses(attributes, manifest, additionalClass)}>
+		<div className={tailwindClasses(attributes, manifest, additionalClass)}>
 			<ImageEditor
 				{...props('image', attributes, {
 					additionalClass: {
 						image: '!size-full grayscale',
-						picture: getTwPart('imagePicture', manifest),
+						picture: tailwindClasses('imagePicture', attributes, manifest),
 					},
 				})}
 			/>

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

@@ -19,12 +19,12 @@ if (!$heroUse) {
 $additionalClass = $attributes['additionalClass'] ?? '';
 ?>
 
-<section class="<?php echo esc_attr(Helpers::getTwClasses($attributes, $manifest, $additionalClass)); ?>">
+<section class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass)); ?>">
 	<?php
 	echo Helpers::render('image', Helpers::props('image', $attributes, [
 		'additionalClass' => [
 			'image' => 'size-full grayscale',
-			'picture' => Helpers::getTwPart('imagePicture', $manifest),
+			'picture' => Helpers::tailwindClasses('imagePicture', $attributes, $manifest),
 		],
 	]));
 	?>

package/blocks/init/src/Blocks/components/icon/components/icon-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 { JsxSvg } from '@eightshift/ui-components/icons';
 import manifest from './../manifest.json';
 
@@ -17,7 +17,7 @@ export const IconEditor = (attributes) => {
 	return (
 		<JsxSvg
 			svg={manifestIcons[iconName]}
-			className={getTwClasses(attributes, manifest, additionalClass)}
+			className={tailwindClasses(attributes, manifest, additionalClass)}
 		/>
 	);
 };

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

@@ -26,7 +26,7 @@ if (!isset($manifest['icons'][$iconName])) {
 
 $icon = $manifest['icons'][$iconName];
 
-$className = Helpers::getTwClasses($attributes, $manifest, $additionalClass);
+$className = Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass);
 
 if (!empty($className)) {
 	$icon = str_replace('<svg ', '<svg class="' . htmlspecialchars($className) . '" ', $icon);

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

@@ -2,8 +2,7 @@ import {
 	checkAttr,
 	getBreakpointData,
 	getBreakpointNames,
-	getTwClasses,
-	getTwPart,
+	tailwindClasses,
 } from '@eightshift/frontend-libs-tailwind/scripts';
 import { ImagePlaceholder } from '@eightshift/ui-components';
 import manifest from './../manifest.json';
@@ -47,7 +46,7 @@ export const ImageEditor = (attributes) => {
 						);
 					})}
 					<img
-						className={getTwClasses(attributes, manifest, additionalClass?.image ?? additionalClass)}
+						className={tailwindClasses(attributes, manifest, additionalClass?.image ?? additionalClass)}
 						src={imageData?.['_default'].url}
 					/>
 				</picture>

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

@@ -57,6 +57,6 @@ $breakpoints = Helpers::getTwBreakpoints($isMobileFirst);
 	<img
 		src="<?php echo esc_url($imageData['_default']['url'] ?? ''); ?>"
 		alt="<?php echo esc_attr($imageAlt); ?>"
-		class="<?php echo esc_attr(Helpers::getTwClasses($attributes, $manifest, $additionalClass['image'] ?? $additionalClass)); ?>"
+		class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass['image'] ?? $additionalClass)); ?>"
 	/>
 </picture>

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

@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import { RichText } from '@wordpress/block-editor';
-import { checkAttr, getAttrKey, getTwClasses } from '@eightshift/frontend-libs-tailwind/scripts';
+import { checkAttr, getAttrKey, tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
 import manifest from '../manifest.json';
 
 export const ListEditor = (attributes) => {
@@ -16,7 +16,7 @@ export const ListEditor = (attributes) => {
 	const listType = checkAttr('listType', attributes, manifest);
 
 	return (
-		<div className={getTwClasses(attributes, manifest, additionalClass)}>
+		<div className={tailwindClasses(attributes, manifest, additionalClass)}>
 			<RichText
 				tagName={listType}
 				multiline='li'

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

@@ -23,7 +23,7 @@ $listType = Helpers::checkAttr('listType', $attributes, $manifest);
 ?>
 
 <<?php echo esc_attr($listType); ?>
-	class="<?php echo esc_attr(Helpers::getTwClasses($attributes, $manifest, $additionalClass)); ?>"
+	class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass)); ?>"
 >
 	<?php
 	// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped

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

@@ -92,7 +92,7 @@
 	"tailwind": {
 		"base": {
 			"twClasses": "font-sans [&_a]:underline font-synthesis-none",
-			"twClassesEditor": "font-sans [&>a]:underline font-synthesis-none"
+			"twClassesEditorOnly": "font-sans [&>a]:underline font-synthesis-none"
 		},
 		"options": {
 			"listSize": {
@@ -115,7 +115,7 @@
 					"decimal": "list-decimal ml-[1.125em]",
 					"checks": "list-['✓_'] ml-[1em]"
 				},
-				"twClassesEditor": {
+				"twClassesEditorOnly": {
 					"none": "*:list-none",
 					"disc": "*:list-disc *:ml-[1.125em]",
 					"decimal": "*:list-decimal *:ml-[1.125em]",

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

@@ -18,17 +18,17 @@ $modalTitle = Helpers::checkAttr('modalTitle', $attributes, $manifest);
 $modalContent = Helpers::checkAttr('modalContent', $attributes, $manifest);
 ?>
 
-<div id="<?php echo esc_attr($modalId); ?>" aria-hidden="true" class="<?php echo esc_attr(Helpers::getTwPart('modalWrapper', $manifest, $componentJsClass)); ?>">
-	<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-labelledby="<?php echo esc_attr($modalId); ?>-title">
-			<header class="<?php echo esc_attr(Helpers::getTwPart('modalHeader', $manifest)); ?>">
+<div id="<?php echo esc_attr($modalId); ?>" aria-hidden="true" class="<?php echo esc_attr(Helpers::tailwindClasses('modalWrapper', $attributes, $manifest, $componentJsClass)); ?>">
+	<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-labelledby="<?php echo esc_attr($modalId); ?>-title">
+			<header class="<?php echo esc_attr(Helpers::tailwindClasses('modalHeader', $attributes, $manifest)); ?>">
 				<?php if (!empty($modalTitle)) { ?>
 					<p id="<?php echo esc_attr($modalId); ?>-title">
 						<?php echo esc_html($modalTitle); ?>
 					</p>
 				<?php } ?>
 
-				<button class="<?php echo esc_attr(Helpers::getTwPart('button', $manifest, 'ml-auto')); ?>" aria-label="Close menu" data-micromodal-close>
+				<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>

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

@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import { RichText } from '@wordpress/block-editor';
-import { checkAttr, getAttrKey, getTwClasses } from '@eightshift/frontend-libs-tailwind/scripts';
+import { checkAttr, getAttrKey, tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
 import manifest from './../manifest.json';
 
 export const ParagraphEditor = (attributes) => {
@@ -25,7 +25,7 @@ export const ParagraphEditor = (attributes) => {
 	return (
 		<RichText
 			identifier={getAttrKey('paragraphContent', attributes, manifest)}
-			className={getTwClasses(attributes, manifest, additionalClass)}
+			className={tailwindClasses(attributes, manifest, additionalClass)}
 			placeholder={placeholder}
 			value={paragraphContent}
 			onChange={(value) => setAttributes({ [getAttrKey('paragraphContent', attributes, manifest)]: value })}

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

@@ -25,7 +25,7 @@ if (!$paragraphContent) {
 }
 ?>
 
-<p class="<?php echo esc_attr(Helpers::getTwClasses($attributes, $manifest, $additionalClass)); ?>">
+<p class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass)); ?>">
 	<?php
 		// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
 		echo $paragraphContent;

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

@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import { RichText } from '@wordpress/block-editor';
-import { checkAttr, getTwPart, getAttrKey } from '@eightshift/frontend-libs-tailwind/scripts';
+import { checkAttr, tailwindClasses, getAttrKey } from '@eightshift/frontend-libs-tailwind/scripts';
 import { AnimatedVisibility } from '@eightshift/ui-components';
 import { JsxSvg } from '@eightshift/ui-components/icons';
 import manifest from './../manifest.json';
@@ -19,27 +19,27 @@ export const QuoteEditor = (attributes) => {
 	const quoteAuthor = checkAttr('quoteAuthor', attributes, manifest);
 
 	return (
-		<figure className={getTwPart('container', manifest, additionalClass)}>
+		<figure className={tailwindClasses('container', attributes, manifest, additionalClass)}>
 			<AnimatedVisibility
 				visible={quoteShowIcon}
 				noInitial
 			>
 				<JsxSvg
-					className={getTwPart('icon', manifest)}
+					className={tailwindClasses('icon', attributes, manifest)}
 					svg={manifest.resources.quoteIcon}
 				/>
 			</AnimatedVisibility>
 
 			<RichText
 				tagName='blockquote'
-				className={getTwPart('quote-text', manifest)}
+				className={tailwindClasses('quote-text', attributes, manifest)}
 				placeholder={__('Quote text', '%g_textdomain%')}
 				value={quoteText}
 				onChange={(value) => setAttributes({ [getAttrKey('quoteText', attributes, manifest)]: value })}
 				allowedFormats={[]}
 			/>
 
-			<figcaption className={getTwPart('author', manifest)}>
+			<figcaption className={tailwindClasses('author', attributes, manifest)}>
 				&mdash;
 				<RichText
 					placeholder={__('Quote author', '%g_textdomain%')}

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

@@ -37,7 +37,7 @@
 			},
 			"author": {
 				"twClasses": "font-sans text-sm text-gray-500 mt-4 font-light",
-				"twClassesEditor": "inline-flex gap-1 font-sans text-sm text-gray-500 mt-2 font-light"
+				"twClassesEditorOnly": "inline-flex gap-1 font-sans text-sm text-gray-500 mt-2 font-light"
 			},
 			"icon": {
 				"twClasses": "ml-1 ~mb-3/4 pointer-events-none text-gray-400 size-6"

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

@@ -21,14 +21,14 @@ $quoteText = Helpers::checkAttr('quoteText', $attributes, $manifest);
 $quoteAuthor = Helpers::checkAttr('quoteAuthor', $attributes, $manifest);
 $quoteShowIcon = Helpers::checkAttr('quoteShowIcon', $attributes, $manifest);
 
-$iconClass = Helpers::getTwPart('icon', $manifest);
+$iconClass = Helpers::tailwindClasses('icon', $attributes, $manifest);
 
 $icon = $manifest['resources']['quoteIcon'];
 $icon = str_replace('<svg', '<svg class="' . $iconClass . '"', $icon);
 $icon = str_replace('<svg', '<svg aria-hidden="true"', $icon);
 ?>
 
-<figure class="<?php echo esc_attr(Helpers::getTwPart('container', $manifest, $additionalClass)); ?>">
+<figure class="<?php echo esc_attr(Helpers::tailwindClasses('container', $attributes, $manifest, $additionalClass)); ?>">
 	<?php
 	if ($quoteShowIcon) {
 		// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
@@ -36,12 +36,12 @@ $icon = str_replace('<svg', '<svg aria-hidden="true"', $icon);
 	}
 	?>
 
-	<blockquote class="<?php echo esc_attr(Helpers::getTwPart('quote-text', $manifest)); ?>">
+	<blockquote class="<?php echo esc_attr(Helpers::tailwindClasses('quote-text', $attributes, $manifest)); ?>">
 		<?php echo wp_kses_post($quoteText); ?>
 	</blockquote>
 
 	<?php if (!empty($quoteAuthor)) { ?>
-		<figcaption class="<?php echo esc_attr(Helpers::getTwPart('author', $manifest)); ?>">
+		<figcaption class="<?php echo esc_attr(Helpers::tailwindClasses('author', $attributes, $manifest)); ?>">
 			&mdash;
 			<?php echo wp_kses_post($quoteAuthor); ?>
 		</figcaption>

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

@@ -1,4 +1,4 @@
-import { checkAttr, classnames, getAttrKey, getTwPart } from '@eightshift/frontend-libs-tailwind/scripts';
+import { checkAttr, classnames, getAttrKey, tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
 import { JsxSvg } from '@eightshift/ui-components/icons';
 import manifest from '../manifest.json';
 
@@ -14,11 +14,11 @@ export const ShareEditor = (attributes) => {
 	const shareTargets = checkAttr('shareTargets', attributes, manifest);
 
 	return (
-		<div className={getTwPart('container', manifest, additionalClass)}>
+		<div className={tailwindClasses('container', attributes, manifest, additionalClass)}>
 			{shareTargets.map((network) => {
 				return (
 					<JsxSvg
-						className={getTwPart('icon', manifest)}
+						className={tailwindClasses('icon', attributes, manifest)}
 						svg={manifest?.networks?.[network]?.icon}
 					/>
 				);

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

@@ -65,7 +65,7 @@
 			},
 			"icon": {
 				"twClasses": "text-gray-400 hover:text-gray-900 focus:outline-none focus-visible:text-navy-500 [&>svg]:size-5 transition",
-				"twClassesEditor": "text-gray-400 size-5"
+				"twClassesEditorOnly": "text-gray-400 size-5"
 			}
 		}
 	}

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

@@ -23,7 +23,7 @@ $additionalClass = $attributes['additionalClass'] ?? '';
 
 ?>
 <div
-	class="<?php echo esc_attr(Helpers::getTwPart('container', $manifest, $additionalClass, $manifest['componentJsClass'])); ?>"
+	class="<?php echo esc_attr(Helpers::tailwindClasses('container', $attributes, $manifest, $additionalClass, $manifest['componentJsClass'])); ?>"
 	data-mode="<?php echo esc_attr($shareMode); ?>"
 >
 	<?php
@@ -35,7 +35,7 @@ $additionalClass = $attributes['additionalClass'] ?? '';
 			$shareUrl = str_replace('POST_FEATURED_IMAGE', get_the_post_thumbnail_url(get_the_ID(), 'large'), $shareUrl);
 			?>
 			<button
-				class="<?php echo esc_attr(Helpers::getTwPart('icon', $manifest, "{$manifest['componentJsClass']}-link")); ?>"
+				class="<?php echo esc_attr(Helpers::tailwindClasses('icon', $attributes, $manifest, "{$manifest['componentJsClass']}-link")); ?>"
 				data-network="<?php echo esc_attr($networkName); ?>"
 				data-share-url="<?php echo esc_url($shareUrl); ?>"
 				data-page-title="<?php echo esc_attr(get_the_title()); ?>"
@@ -51,7 +51,7 @@ $additionalClass = $attributes['additionalClass'] ?? '';
 		foreach ($shareTargets as $networkName) {
 			?>
 			<a
-				class="<?php echo esc_attr(Helpers::getTwPart('icon', $manifest)); ?>"
+				class="<?php echo esc_attr(Helpers::tailwindClasses('icon', $attributes, $manifest)); ?>"
 				href="<?php echo esc_url($manifest['networks'][$networkName]['url'] ?? ''); ?>"
 				title="<?php echo esc_attr($manifest['networks'][$networkName]['title'] ?? ''); ?>"
 				target="_blank"

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

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import { ManageFileButton, checkAttr, getAttrKey, getTwPart } from '@eightshift/frontend-libs-tailwind/scripts';
+import { ManageFileButton, checkAttr, getAttrKey, tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
 import { HStack, MediaPlaceholder, VStack } from '@eightshift/ui-components';
 import { icons } from '@eightshift/ui-components/icons';
 import manifest from '../manifest.json';
@@ -63,7 +63,7 @@ export const VideoEditor = (attributes) => {
 
 			{hasVideo && (
 				<video
-					className={getTwPart('video', manifest, additionalClass)}
+					className={tailwindClasses('video', attributes, manifest, additionalClass)}
 					src={videoUrl}
 					controls
 					muted

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

@@ -43,7 +43,7 @@ $additionalAttributes = Helpers::classnames([
 ?>
 
 <video
-	class="<?php echo esc_attr(Helpers::getTwPart('video', $manifest)); ?>"
+	class="<?php echo esc_attr(Helpers::tailwindClasses('video', $attributes, $manifest)); ?>"
 	<?php echo esc_attr($additionalAttributes); ?>
 	preload="<?php echo esc_attr($videoPreload); ?>"
 	<?php if ($videoPosterUrl) { ?>

package/blocks/init/src/Blocks/custom/accordion-item/accordion-item.php

@@ -24,7 +24,7 @@ $accordionItemLabel = Helpers::checkAttr('accordionItemLabel', $attributes, $man
 	id="<?php echo esc_attr($triggerId); ?>"
 	aria-expanded="false"
 	aria-controls="<?php echo esc_attr($panelId); ?>"
-	class="<?php echo esc_attr(Helpers::getTwPart('trigger', $manifest)); ?>"
+	class="<?php echo esc_attr(Helpers::tailwindClasses('trigger', $attributes, $manifest)); ?>"
 	data-accordion-header
 >
 	<?php
@@ -36,7 +36,7 @@ $accordionItemLabel = Helpers::checkAttr('accordionItemLabel', $attributes, $man
 <section
 	id="<?php echo esc_attr($panelId); ?>"
 	aria-labelledby="<?php echo esc_attr($triggerId); ?>"
-	class="<?php echo esc_attr(Helpers::getTwPart('content-container', $manifest)); ?>"
+	class="<?php echo esc_attr(Helpers::tailwindClasses('content-container', $attributes, $manifest)); ?>"
 	hidden
 >
 	<?php

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

@@ -1,6 +1,6 @@
 import React, { useId, useState, useRef } from 'react';
 import { __ } from '@wordpress/i18n';
-import { BlockInserter, checkAttr, getAttrKey, getTwPart } from '@eightshift/frontend-libs-tailwind/scripts';
+import { BlockInserter, checkAttr, getAttrKey, tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
 import { RichText, useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 import manifest from '../manifest.json';
 import { JsxSvg } from '@eightshift/ui-components/icons';
@@ -25,7 +25,7 @@ export const AccordionItemEditor = ({ attributes, setAttributes, clientId }) =>
 		<>
 			<div
 				aria-expanded={expanded}
-				className={getTwPart('trigger', manifest)}
+				className={tailwindClasses('trigger', attributes, manifest)}
 			>
 				<RichText
 					placeholder={__('Section title', '%g_textdomain%')}
@@ -37,11 +37,11 @@ export const AccordionItemEditor = ({ attributes, setAttributes, clientId }) =>
 
 				<button
 					onClick={(e) => setExpanded(!expanded)}
-					className={getTwPart('editor-trigger', manifest)}
+					className={tailwindClasses('editor-trigger', attributes, manifest)}
 				>
 					<JsxSvg
 						svg={manifest.resources.icon}
-						className={getTwPart('editor-trigger-icon', manifest, expanded && 'rotate-45')}
+						className={tailwindClasses('editor-trigger-icon', attributes, manifest, expanded && 'rotate-45')}
 					/>
 				</button>
 			</div>
@@ -52,7 +52,7 @@ export const AccordionItemEditor = ({ attributes, setAttributes, clientId }) =>
 			>
 				<div
 					{...innerBlocksProps}
-					className={getTwPart('content-container', manifest)}
+					className={tailwindClasses('content-container', attributes, manifest)}
 				/>
 			</AnimatedVisibility>
 		</>

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