@eightshift/frontend-libs-tailwind 1.0.0 → 1.1.0

package/package.json

@@ -1,93 +1,93 @@
 {
-  "name": "@eightshift/frontend-libs-tailwind",
-  "version": "1.0.0",
-  "description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
-  "author": {
-    "name": "Eightshift team",
-    "email": "team@eightshift.com",
-    "url": "https://eightshift.com/"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/infinum/eightshift-frontend-libs-tailwind.git"
-  },
-  "keywords": [
-    "frontend",
-    "css",
-    "mixin",
-    "js",
-    "utility",
-    "module",
-    "WordPress",
-    "tailwind",
-    "TailwindCSS"
-  ],
-  "bugs": {
-    "url": "https://github.com/infinum/eightshift-frontend-libs-tailwind/issues"
-  },
-  "homepage": "https://github.com/infinum/eightshift-frontend-libs-tailwind#readme",
-  "license": "MIT",
-  "dependencies": {
-    "@eightshift/ui-components": "^1.1.2",
-    "@eslint/compat": "^1.1.0",
-    "@stylistic/eslint-plugin-js": "^2.3.0",
-    "@stylistic/stylelint-plugin": "^2.1.2",
-    "@swc/core": "^1.6.5",
-    "@wordpress/api-fetch": "^7.2.0",
-    "@wordpress/block-editor": "^13.2.0",
-    "@wordpress/dependency-extraction-webpack-plugin": "^5.9.0",
-    "@wordpress/dom-ready": "^4.2.0",
-    "@wordpress/server-side-render": "^5.2.0",
-    "browserslist": "^4.23.1",
-    "css-loader": "^7.1.2",
-    "css-minimizer-webpack-plugin": "^7.0.0",
-    "eslint": "^9.6.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "file-loader": "^6.2.0",
-    "globals": "^15.6.0",
-    "husky": "^9.0.11",
-    "lightningcss": "^1.25.1",
-    "mini-css-extract-plugin": "^2.9.0",
-    "postcss": "^8.4.38",
-    "postcss-loader": "^8.1.1",
-    "prettier": "^3.3.2",
-    "prettier-plugin-tailwindcss": "^0.6.5",
-    "sonner": "^1.5.0",
-    "stylelint": "^16.6.1",
-    "stylelint-config-standard": "^36.0.1",
-    "swc-loader": "^0.2.6",
-    "terser-webpack-plugin": "^5.3.10",
-    "webpack": "^5.92.1",
-    "webpack-cli": "^5.1.4",
-    "webpack-manifest-plugin": "^5.0.0",
-    "webpack-merge": "^5.10.0"
-  },
-  "devDependencies": {
-    "embla-carousel": "^8.1.5",
-    "fluid-tailwind": "^1.0.2",
-    "lint-staged": "^15.2.7",
-    "micromodal": "^0.4.10",
-    "ol": "^9.2.4",
-    "ol-mapbox-style": "^12.3.4",
-    "tailwindcss": "^3.4.4",
-    "tailwindcss-animate": "^1.0.7"
-  },
-  "sideEffects": false,
-  "lint-staged": {
-    "*.css": [
-      "npm run lintStyle"
-    ],
-    "*.js": [
-      "npm run lintJs --ignore-pattern node_modules"
-    ],
-    "*.php": [
-      "composer test"
-    ]
-  },
-  "scripts": {
-    "lintStyle": "stylelint **/*.css",
-    "lintJs": "npx eslint",
-    "lint": "npm run lintJs && npm run lintStyle"
-  }
-}
+	"name": "@eightshift/frontend-libs-tailwind",
+	"version": "1.1.0",
+	"description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
+	"author": {
+		"name": "Eightshift team",
+		"email": "team@eightshift.com",
+		"url": "https://eightshift.com/"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/infinum/eightshift-frontend-libs-tailwind.git"
+	},
+	"keywords": [
+		"frontend",
+		"css",
+		"mixin",
+		"js",
+		"utility",
+		"module",
+		"WordPress",
+		"tailwind",
+		"TailwindCSS"
+	],
+	"bugs": {
+		"url": "https://github.com/infinum/eightshift-frontend-libs-tailwind/issues"
+	},
+	"scripts": {
+		"lintStyle": "stylelint **/*.css",
+		"lintJs": "npx eslint",
+		"lint": "npm run lintJs && npm run lintStyle",
+		"prepare": "husky"
+	},
+	"homepage": "https://github.com/infinum/eightshift-frontend-libs-tailwind#readme",
+	"license": "MIT",
+	"dependencies": {
+		"@eightshift/ui-components": "^1.2.2",
+		"@stylistic/eslint-plugin-js": "^2.3.0",
+		"@stylistic/stylelint-plugin": "^2.1.2",
+		"@swc/core": "^1.6.13",
+		"@wordpress/api-fetch": "^7.2.0",
+		"@wordpress/block-editor": "^13.2.0",
+		"@wordpress/dependency-extraction-webpack-plugin": "^5.9.0",
+		"@wordpress/dom-ready": "^4.2.0",
+		"@wordpress/server-side-render": "^5.2.0",
+		"browserslist": "^4.23.1",
+		"css-loader": "^7.1.2",
+		"css-minimizer-webpack-plugin": "^7.0.0",
+		"eslint": "^9.6.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-prettier": "^5.1.3",
+		"file-loader": "^6.2.0",
+		"globals": "^15.8.0",
+		"husky": "^9.0.11",
+		"lightningcss": "^1.25.1",
+		"mini-css-extract-plugin": "^2.9.0",
+		"postcss": "^8.4.39",
+		"postcss-loader": "^8.1.1",
+		"prettier": "^3.3.2",
+		"prettier-plugin-tailwindcss": "^0.6.5",
+		"sonner": "^1.5.0",
+		"stylelint": "^16.6.1",
+		"stylelint-config-standard": "^36.0.1",
+		"swc-loader": "^0.2.6",
+		"terser-webpack-plugin": "^5.3.10",
+		"webpack": "^5.92.1",
+		"webpack-cli": "^5.1.4",
+		"webpack-manifest-plugin": "^5.0.0",
+		"webpack-merge": "^6.0.1"
+	},
+	"devDependencies": {
+		"embla-carousel": "^8.1.6",
+		"fluid-tailwind": "^1.0.2",
+		"lint-staged": "^15.2.7",
+		"micromodal": "^0.4.10",
+		"ol": "^9.2.4",
+		"ol-mapbox-style": "^12.3.4",
+		"tailwindcss": "^3.4.4",
+		"tailwindcss-animate": "^1.0.7"
+	},
+	"sideEffects": false,
+	"lint-staged": {
+		"*.css": [
+			"npm run lintStyle"
+		],
+		"*.js": [
+			"npm run lintJs"
+		],
+		"*.php": [
+			"composer test"
+		]
+	}
+}

package/schemas/block.json

@@ -295,6 +295,10 @@
 					"additionalProperties": {
 						"type": "string"
 					}
+				},
+				"part": {
+					"type": "string",
+					"description": "Part to assign the class output to. If not specified, the classes are added to the base class."
 				}
 			}
 		}

package/schemas/component.json

@@ -233,6 +233,10 @@
 					"additionalProperties": {
 						"type": "string"
 					}
+				},
+				"part": {
+					"type": "string",
+					"description": "Part to assign the class output to. If not specified, the classes are added to the base class."
 				}
 			}
 		}

package/scripts/components/block-inserter.js

@@ -15,6 +15,7 @@ import { clsx } from '@eightshift/ui-components/utilities';
  * @param {boolean} [props.small] - If `true`, the button's size is reduced, perfect for added visual separation in hierarchical InnerBlocks.
  * @param {string} [props.className] - Additional classes to add to the control base.
  * @param {boolean} [props.prioritizePatterns] - Whether to show patterns before blocks in the inserter.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The BlockInserter component.
  *
@@ -24,13 +25,11 @@ import { clsx } from '@eightshift/ui-components/utilities';
  * @preserve
  */
 export const BlockInserter = (props) => {
-	const {
-		clientId,
-		label,
-		small = false,
-		className,
-		prioritizePatterns = false,
-	} = props;
+	const { clientId, label, small = false, className, prioritizePatterns = false, hidden } = props;
+
+	if (hidden) {
+		return null;
+	}
 
 	return (
 		<Inserter
@@ -40,12 +39,7 @@ export const BlockInserter = (props) => {
 			isAppender
 			isQuick
 			renderToggle={(appenderProps) => {
-				const {
-					onToggle,
-					disabled,
-					hasSingleBlockType,
-					blockTitle,
-				} = appenderProps;
+				const { onToggle, disabled, hasSingleBlockType, blockTitle } = appenderProps;
 
 				let labelText = label;
 
@@ -63,7 +57,7 @@ export const BlockInserter = (props) => {
 					>
 						{labelText}
 					</Button>
-				)
+				);
 			}}
 		/>
 	);

package/scripts/components/file-picker.js

@@ -43,19 +43,19 @@ export const ManageFileButton = (props) => {
 	const strings = {
 		file: {
 			buttonTooltip: {
-				browse: __('Select a file from Media library', '%g_textdomain%'),
-				upload: __('Upload a file', '%g_textdomain%'),
-				replace: __('Replace file', '%g_textdomain%'),
+				browse: __('Select a file from Media library', 'eightshift-frontend-libs-tailwind'),
+				upload: __('Upload a file', 'eightshift-frontend-libs-tailwind'),
+				replace: __('Replace file', 'eightshift-frontend-libs-tailwind'),
 			},
 			buttonLabel: {
-				browse: __('Select', '%g_textdomain%'),
-				upload: __('Upload', '%g_textdomain%'),
-				replace: __('Replace', '%g_textdomain%'),
+				browse: __('Select', 'eightshift-frontend-libs-tailwind'),
+				upload: __('Upload', 'eightshift-frontend-libs-tailwind'),
+				replace: __('Replace', 'eightshift-frontend-libs-tailwind'),
 			},
 			modalTitle: {
-				browse: __('Select a file', '%g_textdomain%'),
-				upload: __('Upload a file', '%g_textdomain%'),
-				replace: __('Select a new file', '%g_textdomain%'),
+				browse: __('Select a file', 'eightshift-frontend-libs-tailwind'),
+				upload: __('Upload a file', 'eightshift-frontend-libs-tailwind'),
+				replace: __('Select a new file', 'eightshift-frontend-libs-tailwind'),
 			},
 			buttonIcon: {
 				browse: icons.itemSelect,
@@ -65,50 +65,50 @@ export const ManageFileButton = (props) => {
 		},
 		video: {
 			buttonTooltip: {
-				browse: __('Select a video from Media library', '%g_textdomain%'),
-				upload: __('Upload a video', '%g_textdomain%'),
-				replace: __('Replace video', '%g_textdomain%'),
+				browse: __('Select a video from Media library', 'eightshift-frontend-libs-tailwind'),
+				upload: __('Upload a video', 'eightshift-frontend-libs-tailwind'),
+				replace: __('Replace video', 'eightshift-frontend-libs-tailwind'),
 			},
 			modalTitle: {
-				browse: __('Select a video', '%g_textdomain%'),
-				upload: __('Upload a video', '%g_textdomain%'),
-				replace: __('Select a new video', '%g_textdomain%'),
+				browse: __('Select a video', 'eightshift-frontend-libs-tailwind'),
+				upload: __('Upload a video', 'eightshift-frontend-libs-tailwind'),
+				replace: __('Select a new video', 'eightshift-frontend-libs-tailwind'),
 			},
 		},
 		image: {
 			buttonTooltip: {
-				browse: __('Select an image from Media library', '%g_textdomain%'),
-				upload: __('Upload an image', '%g_textdomain%'),
-				replace: __('Replace image', '%g_textdomain%'),
+				browse: __('Select an image from Media library', 'eightshift-frontend-libs-tailwind'),
+				upload: __('Upload an image', 'eightshift-frontend-libs-tailwind'),
+				replace: __('Replace image', 'eightshift-frontend-libs-tailwind'),
 			},
 			modalTitle: {
-				browse: __('Select an image', '%g_textdomain%'),
-				upload: __('Upload an image', '%g_textdomain%'),
-				replace: __('Select a new image', '%g_textdomain%'),
+				browse: __('Select an image', 'eightshift-frontend-libs-tailwind'),
+				upload: __('Upload an image', 'eightshift-frontend-libs-tailwind'),
+				replace: __('Select a new image', 'eightshift-frontend-libs-tailwind'),
 			},
 		},
 		subtitle: {
 			buttonTooltip: {
-				browse: __('Select a subtitle file', '%g_textdomain%'),
-				upload: __('Upload a subtitle file', '%g_textdomain%'),
-				replace: __('Replace subtitle file', '%g_textdomain%'),
+				browse: __('Select a subtitle file', 'eightshift-frontend-libs-tailwind'),
+				upload: __('Upload a subtitle file', 'eightshift-frontend-libs-tailwind'),
+				replace: __('Replace subtitle file', 'eightshift-frontend-libs-tailwind'),
 			},
 			modalTitle: {
-				browse: __('Select a subtitle file', '%g_textdomain%'),
-				upload: __('Upload a subtitle file', '%g_textdomain%'),
-				replace: __('Select a new subtitle file', '%g_textdomain%'),
+				browse: __('Select a subtitle file', 'eightshift-frontend-libs-tailwind'),
+				upload: __('Upload a subtitle file', 'eightshift-frontend-libs-tailwind'),
+				replace: __('Select a new subtitle file', 'eightshift-frontend-libs-tailwind'),
 			},
 		},
 		geoJson: {
 			buttonTooltip: {
-				browse: __('Select a GeoJSON file', '%g_textdomain%'),
-				upload: __('Upload a GeoJSON file', '%g_textdomain%'),
-				replace: __('Replace GeoJSON file', '%g_textdomain%'),
+				browse: __('Select a GeoJSON file', 'eightshift-frontend-libs-tailwind'),
+				upload: __('Upload a GeoJSON file', 'eightshift-frontend-libs-tailwind'),
+				replace: __('Replace GeoJSON file', 'eightshift-frontend-libs-tailwind'),
 			},
 			modalTitle: {
-				browse: __('Select a GeoJSON file', '%g_textdomain%'),
-				upload: __('Upload a GeoJSON file', '%g_textdomain%'),
-				replace: __('Select a new GeoJSON file', '%g_textdomain%'),
+				browse: __('Select a GeoJSON file', 'eightshift-frontend-libs-tailwind'),
+				upload: __('Upload a GeoJSON file', 'eightshift-frontend-libs-tailwind'),
+				replace: __('Select a new GeoJSON file', 'eightshift-frontend-libs-tailwind'),
 			},
 		},
 		custom: {
@@ -184,11 +184,11 @@ export const FileSelector = (props) => {
 	};
 
 	const removeTooltips = {
-		file: __('Remove file', '%g_textdomain%'),
-		image: __('Remove image', '%g_textdomain%'),
-		video: __('Remove video', '%g_textdomain%'),
-		subtitle: __('Remove subtitle file', '%g_textdomain%'),
-		geoJson: __('Remove GeoJSON file', '%g_textdomain%'),
+		file: __('Remove file', 'eightshift-frontend-libs-tailwind'),
+		image: __('Remove image', 'eightshift-frontend-libs-tailwind'),
+		video: __('Remove video', 'eightshift-frontend-libs-tailwind'),
+		subtitle: __('Remove subtitle file', 'eightshift-frontend-libs-tailwind'),
+		geoJson: __('Remove GeoJSON file', 'eightshift-frontend-libs-tailwind'),
 		custom: labels?.removeTooltip,
 	};
 
@@ -206,7 +206,10 @@ export const FileSelector = (props) => {
 				icon={fileIcons[kind] ?? icons.file}
 				fileName={fileName}
 			>
-				<HStack noWrap className='es-uic-pl-1'>
+				<HStack
+					noWrap
+					className='es-uic-pl-1'
+				>
 					<ManageFileButton {...commonManageFileButtonProps} />
 					{!noUpload && (
 						<ManageFileButton

package/scripts/components/index.js

@@ -3,4 +3,5 @@ export { LinkSectionEditor } from './link-section-editor';
 export { ManageFileButton, FileSelector } from './file-picker';
 export { MediaPicker } from './media-picker';
 export { ServerSideRender } from './server-side-render';
+export { PickerPlaceholder } from './picker-placeholder';
 export { ThemeOptionsPage, EsThemeOptionsContext } from './settings/settings';

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

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import { useCallback } from 'react';
 import { __ } from '@wordpress/i18n';
 import { RichText } from '@wordpress/block-editor';
@@ -78,6 +77,7 @@ export const LinkSectionEditor = (props) => {
 		(index = -1) => {
 			if (index < 0) {
 				onChange([...links, defaultSection]);
+
 				return;
 			}
 
@@ -95,6 +95,7 @@ export const LinkSectionEditor = (props) => {
 				updateItem(itemIndex, {
 					items: [defaultLink, ...items],
 				});
+
 				return;
 			}
 			const before = items.slice(0, index + 1);
@@ -254,7 +255,10 @@ export const LinkSectionEditor = (props) => {
 		<>
 			{links.map(({ items, header }, index) => {
 				return (
-					<div className={classNames?.sectionContainer} key={index}>
+					<div
+						className={classNames?.sectionContainer}
+						key={index}
+					>
 						<RichText
 							placeholder={__('Section', 'eightshift-frontend-libs')}
 							value={header}

package/scripts/components/picker-placeholder.js

@@ -0,0 +1,109 @@
+import { __ } from '@wordpress/i18n';
+import { RichLabel, Button } from '@eightshift/ui-components';
+import { icons, blockIcons, BlockIcon } from '@eightshift/ui-components/icons';
+import { dispatch } from '@wordpress/data';
+import { createBlock } from '@wordpress/blocks';
+import { BlockInserter } from '@eightshift/frontend-libs-tailwind/scripts';
+
+/**
+ * A placeholder that allows picking from a list of presets.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string|JSX.Element} [props.title] - Block name. Overrides manifest value (if provided).
+ * @param {Array} [props.presets] - Presets to show the user.
+ * @param {string} props.presets.name - Preset name.
+ * @param {string} props.presets.icon - Icon name. (See `icons` object in `@eightshift/ui-components/icons`).
+ * @param {array} [props.presets.blocks] - Inner blocks to be added by the preset.
+ * @param {object} [props.presets.attributes] - Attributes to set to the current block.
+ * @param {string|JSX.Element} [props.blockIcon] - Block icon to show next to the title. Can either be a string (icon/block icon name - block icons have precedence), or a JSX element.
+ * @param {string} props.clientId - Client ID of the block.
+ * @param {object} [props.manifest] - Block/component manifest (if you don't want to provide title, presets, and block icon manually).
+ * @param {boolean|JSX.Element} [props.inserter] - `true` if you want to show the default inserter, or a custom element.
+ * @param {string} [props.presetsHeading] - Heading for the presets section.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The PickerPlaceholder component.
+ *
+ * @example
+ * <PickerPlaceholder presets={presets} title='My block' />
+ *
+ * @preserve
+ */
+export const PickerPlaceholder = (props) => {
+	const {
+		title: rawTitle,
+		presets: rawPresets,
+		blockIcon: rawBlockIcon,
+		onChange,
+		clientId,
+		manifest,
+		inserter,
+		presetsHeading = __('Select a preset', 'eightshift-frontend-libs-tailwind'),
+		hidden,
+	} = props;
+
+	const title = rawTitle ?? manifest?.title;
+	const blockIcon = rawBlockIcon ?? manifest?.icon?.src;
+	const presets = rawPresets ?? manifest?.layoutPresets;
+
+	let icon = blockIcon ?? icons.componentGeneric;
+
+	if (blockIcon in blockIcons) {
+		icon = <BlockIcon iconName={blockIcon} />;
+	} else if (blockIcon in icons) {
+		icon = icons[blockIcon];
+	}
+
+	if (hidden) {
+		return null;
+	}
+
+	return (
+		<div className='es-uic-font-sans es-uic-border-gray-200 es-uic-mx-auto es-uic-grid es-uic-max-w-72 es-uic-grid-cols-2 es-uic-gap-1.5 es-uic-rounded-lg es-uic-border es-uic-p-3 es-uic-text-xs es-uic-shadow-lg'>
+			<RichLabel
+				icon={icon}
+				label={title}
+				className='col-span-2 mb-2 select-none font-medium !text-gray-400'
+			/>
+
+			<span className='es-uic-col-span-2 es-uic-select-none es-uic-justify-self-center'>{presetsHeading}</span>
+
+			{presets.map(({ name, icon, blocks: blockData, attributes: attrsToSet }, index) => {
+				return (
+					<Button
+						key={index}
+						onPress={async () => {
+							const blocksToInsert = blockData.map(({ name: blockName, attributes: blockAttrs }) => createBlock(blockName, blockAttrs));
+
+							onChange(attrsToSet);
+
+							await dispatch('core/block-editor').insertBlocks(blocksToInsert, 0, clientId);
+						}}
+						icon={icons?.[icon]}
+						size='large'
+					>
+						{name}
+					</Button>
+				);
+			})}
+
+			{inserter && (
+				<>
+					<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}
+
+						{inserter === true && (
+							<BlockInserter
+								label
+								clientId={clientId}
+							/>
+						)}
+					</div>
+				</>
+			)}
+		</div>
+	);
+};

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

@@ -23,15 +23,13 @@ import { clsx } from '@eightshift/ui-components/utilities';
  */
 export const ServerSideRender = (props) => {
 	const { block, attributes, className, ...rest } = props;
+
 	return (
 		<GutenbergSsr
 			{...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,23 +10,14 @@ import { useThemeOptions } from './use-theme-options';
 
 export const EsThemeOptionsContext = createContext(null);
 
-export const ThemeOptionsPage = ({
-	title = __('Theme options', '%g_textdomain%'),
-	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;
 
 	return (
 		<EsThemeOptionsContext.Provider value={themeOptions}>
 			<Toaster richColors />
-			<div
-				className={clsx(
-					'es-uic-space-y-4',
-					isLoading && 'es-uic-pointer-events-none es-uic-opacity-60'
-				)}
-			>
+			<div className={clsx('es-uic-space-y-4', isLoading && 'es-uic-pointer-events-none es-uic-opacity-60')}>
 				<HStack className='es-uic-justify-between'>
 					<h1>{title}</h1>
 
@@ -35,9 +26,7 @@ export const ThemeOptionsPage = ({
 						disabled={isLoading}
 						icon={isLoading ? icons.moreH : icons.save}
 					>
-						{isLoading
-							? __('Saving...', '%g_textdomain%')
-							: __('Save', '%g_textdomain%')}
+						{isLoading ? __('Saving...', 'eightshift-frontend-libs-tailwind') : __('Save', 'eightshift-frontend-libs-tailwind')}
 					</Button>
 				</HStack>
 

package/scripts/components/settings/use-theme-options.js

@@ -25,9 +25,9 @@ export const useThemeOptions = (settingName) => {
 				},
 			});
 
-			toast.success(__('Saved successfully', '%g_textdomain%'));
+			toast.success(__('Saved successfully', 'eightshift-frontend-libs-tailwind'));
 		} catch (error) {
-			toast.error(__('Something went wrong while saving', '%g_textdomain%'), {
+			toast.error(__('Something went wrong while saving', 'eightshift-frontend-libs-tailwind'), {
 				description: error.message,
 			});
 		} finally {