Merge pull request #51 from infinum/release/1.4.0

1.4.0

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

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

@@ -56,7 +56,7 @@
 	$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';
 ?>

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,

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

@@ -12,30 +12,30 @@
 $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>

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>
 	);

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

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}

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

@@ -36,7 +36,7 @@
 
 <<?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

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

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

@@ -19,12 +19,12 @@
 $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),
 		],
 	]));
 	?>

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

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

@@ -26,7 +26,7 @@
 
 $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);

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>

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

@@ -57,6 +57,6 @@ class="<?php echo esc_attr($additionalClass['picture']); ?>"
 	<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>

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'

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

@@ -23,7 +23,7 @@
 ?>
 
 <<?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

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]",

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

@@ -18,17 +18,17 @@
 $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>

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

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

@@ -25,7 +25,7 @@
 }
 ?>
 
-<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;

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%')}