@eightshift/frontend-libs-tailwind 1.2.0 → 1.3.0

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

@@ -1,6 +1,15 @@
 import { __ } from '@wordpress/i18n';
 import { checkAttr, getAttrKey, getHiddenOptions, 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';
@@ -113,7 +122,9 @@ 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)),
 								});
 							}
 						}}
@@ -126,7 +137,9 @@ 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%')}
 							hidden={hiddenOptions?.backgroundType}
@@ -165,7 +178,9 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/frontend-libs-tailwind",
-	"version": "1.2.0",
+	"version": "1.3.0",
 	"description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
 	"author": {
 		"name": "Eightshift team",
@@ -34,32 +34,32 @@
 	"homepage": "https://github.com/infinum/eightshift-frontend-libs-tailwind#readme",
 	"license": "MIT",
 	"dependencies": {
-		"@eightshift/ui-components": "^1.4.6",
-		"@stylistic/eslint-plugin-js": "^2.6.1",
-		"@stylistic/stylelint-plugin": "^3.0.0",
-		"@swc/core": "^1.7.6",
+		"@eightshift/ui-components": "^1.4.7",
+		"@stylistic/eslint-plugin-js": "^2.6.4",
+		"@stylistic/stylelint-plugin": "^3.0.1",
+		"@swc/core": "^1.7.14",
 		"@wordpress/api-fetch": "^7.5.0",
-		"@wordpress/block-editor": "^13.4.0",
+		"@wordpress/block-editor": "^14.0.0",
 		"@wordpress/dependency-extraction-webpack-plugin": "^5.9.0",
 		"@wordpress/dom-ready": "^4.5.0",
 		"@wordpress/server-side-render": "^5.5.0",
 		"browserslist": "^4.23.3",
 		"css-loader": "^7.1.2",
 		"css-minimizer-webpack-plugin": "^7.0.0",
-		"eslint": "^9.8.0",
+		"eslint": "^9.9.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-prettier": "^5.2.1",
 		"file-loader": "^6.2.0",
 		"globals": "^15.9.0",
-		"husky": "^9.1.4",
+		"husky": "^9.1.5",
 		"lightningcss": "^1.26.0",
-		"mini-css-extract-plugin": "^2.9.0",
+		"mini-css-extract-plugin": "^2.9.1",
 		"postcss": "^8.4.41",
 		"postcss-loader": "^8.1.1",
 		"prettier": "^3.3.3",
-		"prettier-plugin-tailwindcss": "^0.6.5",
+		"prettier-plugin-tailwindcss": "^0.6.6",
 		"sonner": "^1.5.0",
-		"stylelint": "^16.8.1",
+		"stylelint": "^16.8.2",
 		"stylelint-config-standard": "^36.0.1",
 		"swc-loader": "^0.2.6",
 		"terser-webpack-plugin": "^5.3.10",
@@ -69,13 +69,13 @@
 		"webpack-merge": "^6.0.1"
 	},
 	"devDependencies": {
-		"embla-carousel": "^8.1.8",
+		"embla-carousel": "^8.2.0",
 		"fluid-tailwind": "^1.0.3",
-		"lint-staged": "^15.2.8",
+		"lint-staged": "^15.2.9",
 		"micromodal": "^0.4.10",
 		"ol": "^10.0.0",
-		"ol-mapbox-style": "^12.3.4",
-		"tailwindcss": "^3.4.8",
+		"ol-mapbox-style": "^12.3.5",
+		"tailwindcss": "^3.4.10",
 		"tailwindcss-animate": "^1.0.7"
 	},
 	"sideEffects": false,

package/schemas/block.json

@@ -188,12 +188,12 @@
 					"description": "Base classes for the main part of the block.",
 					"properties": {
 						"twClasses": {
-							"type": "string",
-							"description": "Classnames to apply."
+							"type": ["string", "array"],
+							"description": "Classnames to apply. An array of classnames (strings) can also be provided for improved manifest readability."
 						},
 						"twClassesEditor": {
-							"type": "string",
-							"description": "Editor-specific classnames to apply. Overrides 'twClasses'"
+							"type": ["string", "array"],
+							"description": "Editor-specific classnames to apply. Overrides 'twClasses' An array of classnames (strings) can also be provided for improved manifest readability."
 						}
 					},
 					"minProperties": 1
@@ -242,12 +242,12 @@
 								}
 							},
 							"twClasses": {
-								"type": "string",
-								"description": "Classnames to apply if all conditions match. Key is the attribute value, value is the classnames to apply."
+								"type": ["string", "array"],
+								"description": "Classnames to apply if all conditions match. Key is the attribute value, value is the classnames to apply. An array of classnames (strings) can also be provided for improved manifest readability."
 							},
 							"twClassesEditor": {
-								"type": "string",
-								"description": "Editor-specific classnames to apply if all conditions match. Overrides 'twClasses'. Key is the attribute value, value is the classnames to apply."
+								"type": ["string", "array"],
+								"description": "Editor-specific classnames to apply if all conditions match. Overrides 'twClasses'. Key is the attribute value, value is the classnames to apply. An array of classnames (strings) can also be provided for improved manifest readability."
 							}
 						},
 						"required": [
@@ -270,12 +270,12 @@
 			"type": "object",
 			"properties": {
 				"twClasses": {
-					"type": "string",
-					"description": "Classnames to apply."
+					"type": ["string", "array"],
+					"description": "Classnames to apply. An array of classnames (strings) can also be provided for improved manifest readability."
 				},
 				"twClassesEditor": {
-					"type": "string",
-					"description": "Editor-specific classnames to apply. Overrides 'twClasses'."
+					"type": ["string", "array"],
+					"description": "Editor-specific classnames to apply. Overrides 'twClasses'. An array of classnames (strings) can also be provided for improved manifest readability."
 				}
 			}
 		},
@@ -284,16 +284,16 @@
 			"properties": {
 				"twClasses": {
 					"type": "object",
-					"description": "Classnames to apply. Key is the attribute value, value is the classnames to apply.",
+					"description": "Classnames to apply. Key is the attribute value, value is the classnames to apply. An array of classnames (strings) can also be provided for improved manifest readability.",
 					"additionalProperties": {
-						"type": "string"
+						"type": ["string", "array"]
 					}
 				},
 				"twClassesEditor": {
 					"type": "object",
-					"description": "Editor-specific classnames to apply. Overrides 'twClasses'. Key is the attribute value, value is the classnames to apply.",
+					"description": "Editor-specific classnames to apply. Overrides 'twClasses'. Key is the attribute value, value is the classnames to apply. An array of classnames (strings) can also be provided for improved manifest readability.",
 					"additionalProperties": {
-						"type": "string"
+						"type": ["string", "array"]
 					}
 				},
 				"part": {

package/schemas/component.json

@@ -126,12 +126,12 @@
 					"description": "Base classes for the main part of the component.",
 					"properties": {
 						"twClasses": {
-							"type": "string",
-							"description": "Classnames to apply."
+							"type": ["string", "array"],
+							"description": "Classnames to apply. An array of classnames (strings) can also be provided for improved manifest readability."
 						},
 						"twClassesEditor": {
-							"type": "string",
-							"description": "Editor-specific classnames to apply. Overrides 'twClasses'"
+							"type": ["string", "array"],
+							"description": "Editor-specific classnames to apply. Overrides 'twClasses'. An array of classnames (strings) can also be provided for improved manifest readability."
 						}
 					},
 					"minProperties": 1
@@ -180,12 +180,12 @@
 								}
 							},
 							"twClasses": {
-								"type": "string",
-								"description": "Classnames to apply if all conditions match. Key is the attribute value, value is the classnames to apply."
+								"type": ["string", "array"],
+								"description": "Classnames to apply if all conditions match. Key is the attribute value, value is the classnames to apply. An array of classnames (strings) can also be provided for improved manifest readability."
 							},
 							"twClassesEditor": {
-								"type": "string",
-								"description": "Editor-specific classnames to apply if all conditions match. Overrides 'twClasses'. Key is the attribute value, value is the classnames to apply."
+								"type": ["string", "array"],
+								"description": "Editor-specific classnames to apply if all conditions match. Overrides 'twClasses'. Key is the attribute value, value is the classnames to apply. An array of classnames (strings) can also be provided for improved manifest readability."
 							}
 						},
 						"required": [
@@ -208,12 +208,12 @@
 			"type": "object",
 			"properties": {
 				"twClasses": {
-					"type": "string",
-					"description": "Classnames to apply."
+					"type": ["string", "array"],
+					"description": "Classnames to apply. An array of classnames (strings) can also be provided for improved manifest readability."
 				},
 				"twClassesEditor": {
-					"type": "string",
-					"description": "Editor-specific classnames to apply. Overrides 'twClasses'."
+					"type": ["string", "array"],
+					"description": "Editor-specific classnames to apply. Overrides 'twClasses'. An array of classnames (strings) can also be provided for improved manifest readability."
 				}
 			}
 		},
@@ -222,21 +222,21 @@
 			"properties": {
 				"twClasses": {
 					"type": "object",
-					"description": "Classnames to apply. Key is the attribute value, value is the classnames to apply.",
+					"description": "Classnames to apply. Key is the attribute value, value is the classnames to apply. An array of classnames (strings) can also be provided for improved manifest readability.",
 					"additionalProperties": {
-						"type": "string"
+						"type": ["string", "array"]
 					}
 				},
 				"twClassesEditor": {
 					"type": "object",
-					"description": "Editor-specific classnames to apply. Overrides 'twClasses'. Key is the attribute value, value is the classnames to apply.",
+					"description": "Editor-specific classnames to apply. Overrides 'twClasses'. Key is the attribute value, value is the classnames to apply. An array of classnames (strings) can also be provided for improved manifest readability.",
 					"additionalProperties": {
-						"type": "string"
+						"type": ["string", "array"]
 					}
 				},
 				"part": {
-					"type": "string",
-					"description": "Part to assign the class output to. If not specified, the classes are added to the base class."
+					"type": ["string", "array"],
+					"description": "Part to assign the class output to. If not specified, the classes are added to the base class. You can also specify an array of parts to apply the classes to."
 				}
 			}
 		}

package/scripts/components/block-inserter.js

@@ -44,7 +44,10 @@ export const BlockInserter = (props) => {
 				let labelText = label;
 
 				if (label === true) {
-					labelText = sprintf(__('Add %s', 'eightshift-frontend-libs'), hasSingleBlockType ? blockTitle : __('a block', 'eightshift-frontend-libs'));
+					labelText = sprintf(
+						__('Add %s', 'eightshift-frontend-libs'),
+						hasSingleBlockType ? blockTitle : __('a block', 'eightshift-frontend-libs'),
+					);
 				}
 
 				return (

package/scripts/components/link-section-editor.js

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

package/scripts/components/media-picker.js

@@ -43,7 +43,18 @@ const MediaButton = (props) => {
  *
  */
 export const MediaPicker = (props) => {
-	const { onChange, imageId, imageAlt, imageUrl, noDelete, noUpload, imageMode, hidden, allowedTypes = ['image'], className } = props;
+	const {
+		onChange,
+		imageId,
+		imageAlt,
+		imageUrl,
+		noDelete,
+		noUpload,
+		imageMode,
+		hidden,
+		allowedTypes = ['image'],
+		className,
+	} = props;
 
 	if (hidden) {
 		return null;

package/scripts/components/picker-placeholder.js

@@ -74,7 +74,9 @@ export const PickerPlaceholder = (props) => {
 					<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),
+							);
 
 							onChange(attrsToSet);
 
@@ -90,7 +92,9 @@ export const PickerPlaceholder = (props) => {
 
 			{inserter && (
 				<>
-					<span className='es-uic-col-span-2 es-uic-select-none es-uic-justify-self-center'>{__('or', 'fe-libs-tailwind')}</span>
+					<span className='es-uic-col-span-2 es-uic-select-none es-uic-justify-self-center'>
+						{__('or', 'fe-libs-tailwind')}
+					</span>
 
 					<div className='es-uic-col-span-2 es-uic-justify-self-center'>
 						{inserter}

package/scripts/components/server-side-render.js

@@ -29,7 +29,10 @@ export const ServerSideRender = (props) => {
 			{...rest}
 			block={block}
 			attributes={attributes}
-			className={clsx('es-uic-pointer-events-none es-uic-rounded-lg es-uic-border es-uic-border-dotted es-uic-border-gray-300 es-uic-p-2 es-uic-flow-root', className)}
+			className={clsx(
+				'es-uic-pointer-events-none es-uic-rounded-lg es-uic-border es-uic-border-dotted es-uic-border-gray-300 es-uic-p-2 es-uic-flow-root',
+				className,
+			)}
 		/>
 	);
 };

package/scripts/components/settings/settings.js

@@ -10,7 +10,11 @@ import { useThemeOptions } from './use-theme-options';
 
 export const EsThemeOptionsContext = createContext(null);
 
-export const ThemeOptionsPage = ({ title = __('Theme options', 'eightshift-frontend-libs-tailwind'), children, settingName = 'eightshift-theme-options' }) => {
+export const ThemeOptionsPage = ({
+	title = __('Theme options', 'eightshift-frontend-libs-tailwind'),
+	children,
+	settingName = 'eightshift-theme-options',
+}) => {
 	const themeOptions = useThemeOptions(settingName);
 	const { isLoading, saveSettings } = themeOptions;
 
@@ -26,7 +30,9 @@ export const ThemeOptionsPage = ({ title = __('Theme options', 'eightshift-front
 						disabled={isLoading}
 						icon={isLoading ? icons.moreH : icons.save}
 					>
-						{isLoading ? __('Saving...', 'eightshift-frontend-libs-tailwind') : __('Save', 'eightshift-frontend-libs-tailwind')}
+						{isLoading
+							? __('Saving...', 'eightshift-frontend-libs-tailwind')
+							: __('Save', 'eightshift-frontend-libs-tailwind')}
 					</Button>
 				</HStack>
 

package/scripts/editor/attributes.js

@@ -109,15 +109,20 @@ export const checkAttr = (key, attributes, manifest, undefinedAllowed = false) =
 	let tipOutput = '';
 
 	if ('components' in manifest) {
-		tipOutput = ' If you are using additional components, check if you used the correct block/component prefix in your attribute name.';
+		tipOutput =
+			' If you are using additional components, check if you used the correct block/component prefix in your attribute name.';
 	}
 
 	// Bailout if key is missing.
 	if (typeof manifestKey === 'undefined') {
 		if ('blockName' in manifest) {
-			throw Error(`${key} key does not exist in the ${manifest.blockName} block manifest. Please check your implementation.${tipOutput}`);
+			throw Error(
+				`${key} key does not exist in the ${manifest.blockName} block manifest. Please check your implementation.${tipOutput}`,
+			);
 		} else {
-			throw Error(`${key} key does not exist in the ${manifest.componentName} component manifest. Please check your implementation.${tipOutput}`);
+			throw Error(
+				`${key} key does not exist in the ${manifest.componentName} component manifest. Please check your implementation.${tipOutput}`,
+			);
 		}
 	}
 

package/scripts/editor/editor.js

@@ -105,7 +105,13 @@ export const lockIfUndefined = (blockClientId, attributeKey, value) => {
  *
  */
 export const GutenbergBlock = (props) => {
-	const { options: OptionsComponent, toolbar: ToolbarComponent, editor: EditorComponent, noOptionsContainer = false, title } = props;
+	const {
+		options: OptionsComponent,
+		toolbar: ToolbarComponent,
+		editor: EditorComponent,
+		noOptionsContainer = false,
+		title,
+	} = props;
 
 	return (
 		<>

package/scripts/editor/fetch.js

@@ -83,7 +83,8 @@ export function fetchFromWpRest(endpoint, options = {}) {
 
 		return newData.map((item) => {
 			const rawLabel = !noUnescapeTitle ? unescapeHTML(processLabel(item)) : processLabel(item);
-			const truncatedLabel = Number.isInteger(truncateTitle) && truncateTitle > 0 ? truncate(rawLabel, truncateTitle) : rawLabel;
+			const truncatedLabel =
+				Number.isInteger(truncateTitle) && truncateTitle > 0 ? truncate(rawLabel, truncateTitle) : rawLabel;
 
 			return {
 				label: truncatedLabel,

package/scripts/editor/index.js

@@ -7,5 +7,12 @@ export * from './fetch';
 export * from './options';
 export * from './utility';
 export * from './tailwindcss';
-export { getAttributes, getExample, getFullBlockName, getFullBlockNameVariation, registerBlocks, registerVariations } from './registration';
+export {
+	getAttributes,
+	getExample,
+	getFullBlockName,
+	getFullBlockNameVariation,
+	registerBlocks,
+	registerVariations,
+} from './registration';
 export { STORE_NAME, BUILD_VERSION, setStore, setStoreGlobalWindow, setConfigFlags } from './store';

package/scripts/editor/options.js

@@ -46,7 +46,9 @@ export const getOption = (key, attributes, manifest, isColor = false) => {
 	const componentOptions = manifest?.options;
 
 	// Determine if this is component or block and provide the name, not used for anything important but only to output the error msg.
-	const name = Object.prototype.hasOwnProperty.call(manifest, 'blockName') ? manifest.blockName : manifest.componentName;
+	const name = Object.prototype.hasOwnProperty.call(manifest, 'blockName')
+		? manifest.blockName
+		: manifest.componentName;
 
 	// Bailout if componentOptions is missing.
 	if (typeof componentOptions === 'undefined') {