@eightshift/frontend-libs-tailwind 1.1.1 → 1.3.0

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

@@ -1,6 +1,15 @@
 import { __ } from '@wordpress/i18n';
-import { checkAttr, getAttrKey, getOption } from '@eightshift/frontend-libs-tailwind/scripts';
-import { BaseControl, ButtonGroup, ColorPicker, ContainerPanel, OptionSelect, Spacer, Responsive, InputField } from '@eightshift/ui-components';
+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 { icons } from '@eightshift/ui-components/icons';
 import { clsx } from '@eightshift/ui-components/utilities';
 import { getResponsiveData } from '@eightshift/frontend-libs-tailwind/scripts/helpers/breakpoints';
@@ -30,7 +39,11 @@ export const WrapperOptions = ({ attributes, setAttributes }) => {
 
 	const wrapperId = checkAttr('wrapperId', attributes, manifest);
 
-	if (wrapperNoControls) {
+	const wrapperDisabledOptions = checkAttr('wrapperDisabledOptions', attributes, manifest);
+
+	const hiddenOptions = getHiddenOptions(wrapperDisabledOptions);
+
+	if (wrapperNoControls || wrapperDisabledOptions === 'all') {
 		return null;
 	}
 
@@ -79,7 +92,7 @@ export const WrapperOptions = ({ attributes, setAttributes }) => {
 				icon={icons.containerWidth}
 				label={__('Width', '%g_textdomain%')}
 				options={getOption('wrapperContentWidth', attributes, manifest)}
-				hidden={wrapperNoWidthControls}
+				hidden={wrapperNoWidthControls || hiddenOptions?.width}
 				noModeSelect
 				inline
 				{...responsiveData}
@@ -97,6 +110,7 @@ export const WrapperOptions = ({ attributes, setAttributes }) => {
 			<BaseControl
 				icon={icons.backgroundType}
 				label={__('Background', '%g_textdomain%')}
+				hidden={hiddenOptions?.background}
 				inline
 			>
 				<ButtonGroup>
@@ -108,21 +122,27 @@ 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)),
 								});
 							}
 						}}
 						aria-label={__('Background type', '%g_textdomain%')}
 						type='menu'
+						hidden={hiddenOptions?.backgroundType}
 						noItemIcon
 					/>
 
 					{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}
 						/>
 					)}
 					{backgroundType === 'gradient' && (
@@ -152,17 +172,21 @@ export const WrapperOptions = ({ attributes, setAttributes }) => {
 									),
 								}}
 								aria-label={__('Gradient style', '%g_textdomain%')}
+								hidden={hiddenOptions?.backgroundType}
 								noTriggerLabel
 								type='menu'
 							/>
 							<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>,
 								}}
 								aria-label={__('Gradient angle', '%g_textdomain%')}
+								hidden={hiddenOptions?.backgroundType}
 								noTriggerLabel
 								type='menu'
 							/>
@@ -179,6 +203,7 @@ export const WrapperOptions = ({ attributes, setAttributes }) => {
 				options={getOption('wrapperBorderRadius', attributes, manifest)}
 				aria-label={__('Rounded corners', '%g_textdomain%')}
 				type='menu'
+				hidden={hiddenOptions?.roundedCorners}
 				inline
 			/>
 
@@ -199,6 +224,7 @@ export const WrapperOptions = ({ attributes, setAttributes }) => {
 				icon={icons.spacingTop}
 				label={__('Top margin', '%g_textdomain%')}
 				options={getOption('wrapperSpacing', attributes, manifest)}
+				hidden={hiddenOptions?.marginTop}
 				noModeSelect
 				inline
 				{...responsiveData}
@@ -223,6 +249,7 @@ export const WrapperOptions = ({ attributes, setAttributes }) => {
 				icon={icons.spacingBottom}
 				label={__('Bottom margin', '%g_textdomain%')}
 				options={getOption('wrapperSpacing', attributes, manifest)}
+				hidden={hiddenOptions?.marginBottom}
 				noModeSelect
 				inline
 				{...responsiveData}
@@ -249,6 +276,7 @@ export const WrapperOptions = ({ attributes, setAttributes }) => {
 				icon={icons.spacingTopIn}
 				label={__('Top padding', '%g_textdomain%')}
 				options={getOption('wrapperSpacing', attributes, manifest)}
+				hidden={hiddenOptions?.paddingTop}
 				noModeSelect
 				inline
 				{...responsiveData}
@@ -273,6 +301,7 @@ export const WrapperOptions = ({ attributes, setAttributes }) => {
 				icon={icons.spacingBottomIn}
 				label={__('Bottom padding', '%g_textdomain%')}
 				options={getOption('wrapperSpacing', attributes, manifest)}
+				hidden={hiddenOptions?.paddingBottom}
 				noModeSelect
 				inline
 				{...responsiveData}
@@ -304,6 +333,7 @@ export const WrapperOptions = ({ attributes, setAttributes }) => {
 				icon={icons.visibility}
 				label={__('Visibility', '%g_textdomain%')}
 				options={getOption('wrapperHide', attributes, manifest)}
+				hidden={hiddenOptions?.hide}
 				noModeSelect
 				inline
 				{...responsiveData}
@@ -327,6 +357,7 @@ export const WrapperOptions = ({ attributes, setAttributes }) => {
 				value={wrapperId}
 				onChange={(value) => setAttributes({ [getAttrKey('wrapperId', attributes, manifest)]: value })}
 				className='es-uic-font-mono'
+				hidden={hiddenOptions?.id}
 			/>
 		</ContainerPanel>
 	);

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

@@ -96,6 +96,9 @@
 		},
 		"wrapperId": {
 			"type": "string"
+		},
+		"wrapperDisabledOptions": {
+			"type": "string"
 		}
 	},
 	"options": {
@@ -350,7 +353,7 @@
 			},
 			"wrapperGradientDirection": {
 				"twClasses": {
-					"to-t": "bg-gradient-to-r",
+					"to-t": "bg-gradient-to-t",
 					"to-tr": "bg-gradient-to-tr",
 					"to-r": "bg-gradient-to-r",
 					"to-br": "bg-gradient-to-br",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/frontend-libs-tailwind",
-	"version": "1.1.1",
+	"version": "1.3.0",
 	"description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
 	"author": {
 		"name": "Eightshift team",
@@ -34,48 +34,48 @@
 	"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",
+		"@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": "^14.0.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",
+		"@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.6.0",
+		"eslint": "^9.9.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-prettier": "^5.1.3",
+		"eslint-plugin-prettier": "^5.2.1",
 		"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",
+		"globals": "^15.9.0",
+		"husky": "^9.1.5",
+		"lightningcss": "^1.26.0",
+		"mini-css-extract-plugin": "^2.9.1",
+		"postcss": "^8.4.41",
 		"postcss-loader": "^8.1.1",
-		"prettier": "^3.3.2",
-		"prettier-plugin-tailwindcss": "^0.6.5",
+		"prettier": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.6",
 		"sonner": "^1.5.0",
-		"stylelint": "^16.6.1",
+		"stylelint": "^16.8.2",
 		"stylelint-config-standard": "^36.0.1",
 		"swc-loader": "^0.2.6",
 		"terser-webpack-plugin": "^5.3.10",
-		"webpack": "^5.92.1",
+		"webpack": "^5.93.0",
 		"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",
+		"embla-carousel": "^8.2.0",
+		"fluid-tailwind": "^1.0.3",
+		"lint-staged": "^15.2.9",
 		"micromodal": "^0.4.10",
-		"ol": "^9.2.4",
-		"ol-mapbox-style": "^12.3.4",
-		"tailwindcss": "^3.4.4",
+		"ol": "^10.0.0",
+		"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/file-picker.js

@@ -9,18 +9,18 @@ import { icons } from '@eightshift/ui-components/icons';
  *
  * @component
  * @param {Object} props - Component props.
- * @property {ManageFileButtonType} [props.type] - The type of the button (browse, upload, replace).
- * @property {Function} props.onChange - Function that handles the change event.
- * @property {string} [props.currentId] - ID of the currently selected item. Used for the 'replace' type, to mark the currently selected item.
- * @property {boolean} [props.compact] - Whether the button is compact (icon-only).
- * @property {string[]} props.allowedTypes - Determines types of files which are allowed to be uploaded.
- * @property {ManageFileButtonKind} [props.kind] - The kind of file to manage. Controls labels and icons on the buttons.
- * @property {Object} [props.labels] - Custom UI labels for the buttons. Applies only if `kind` is set to `custom`.
+ * @param {ManageFileButtonType} [props.type] - The type of the button (browse, upload, replace).
+ * @param {Function} props.onChange - Function that handles the change event.
+ * @param {string} [props.currentId] - ID of the currently selected item. Used for the 'replace' type, to mark the currently selected item.
+ * @param {boolean} [props.compact] - Whether the button is compact (icon-only).
+ * @param {string[]} props.allowedTypes - Determines types of files which are allowed to be uploaded.
+ * @param {ManageFileButtonKind} [props.kind] - The kind of file to manage. Controls labels and icons on the buttons.
+ * @param {Object} [props.labels] - Custom UI labels for the buttons. Applies only if `kind` is set to `custom`.
  *
  * @returns {JSX.Element} The ManageFileButton component.
  *
  * @typedef {'browse' | 'upload' | 'replace'} ManageFileButtonType
- * @typedef {'file' | 'image' | 'video' | 'subtitle' | 'geoJson' | 'custom'} ManageFileButtonKind
+ * @typedef {'file' | 'image' | 'video' | 'subtitle' | 'geoJson' | 'lottie' | 'custom'} ManageFileButtonKind
  *
  * @example
  * <ManageFileButton />
@@ -111,6 +111,18 @@ export const ManageFileButton = (props) => {
 				replace: __('Select a new GeoJSON file', 'eightshift-frontend-libs-tailwind'),
 			},
 		},
+		lottie: {
+			buttonTooltip: {
+				browse: __('Select a Lottie animation', 'eightshift-frontend-libs-tailwind'),
+				upload: __('Upload a Lottie animation', 'eightshift-frontend-libs-tailwind'),
+				replace: __('Replace Lottie animation', 'eightshift-frontend-libs-tailwind'),
+			},
+			modalTitle: {
+				browse: __('Select a Lottie animation', 'eightshift-frontend-libs-tailwind'),
+				upload: __('Upload a Lottie animation', 'eightshift-frontend-libs-tailwind'),
+				replace: __('Select a new Lottie animation', 'eightshift-frontend-libs-tailwind'),
+			},
+		},
 		custom: {
 			buttonTooltip: labels?.buttonTooltip,
 			buttonLabel: labels?.buttonLabel,
@@ -151,18 +163,18 @@ export const ManageFileButton = (props) => {
  *
  * @component
  * @param {Object} props - Component props.
- * @property {Function} props.onChange - The function that handles the change event.
- * @property {string} props.fileId - ID of the currently selected file. Used to mark the currently selected item when replacing the file.
- * @property {string} props.fileName - URL of the currently selected image.
- * @property {boolean} [props.noDelete] - If `true`, the delete button will be hidden.
- * @property {boolean} [props.noUpload] - If `true`, the upload button will be hidden.
- * @property {string[]} props.allowedTypes - Determines types of files which are allowed to be uploaded.
- * @property {FileKind} [props.kind] - The kind of file to manage.
- * @property {Object} [props.labels] - Custom UI labels for the buttons. Applies only if `kind` is set to `custom`.
+ * @param {Function} props.onChange - The function that handles the change event.
+ * @param {string} props.fileId - ID of the currently selected file. Used to mark the currently selected item when replacing the file.
+ * @param {string} props.fileName - URL of the currently selected image.
+ * @param {boolean} [props.noDelete] - If `true`, the delete button will be hidden.
+ * @param {boolean} [props.noUpload] - If `true`, the upload button will be hidden.
+ * @param {string[]} props.allowedTypes - Determines types of files which are allowed to be uploaded.
+ * @param {FileKind} [props.kind] - The kind of file to manage.
+ * @param {Object} [props.labels] - Custom UI labels for the buttons. Applies only if `kind` is set to `custom`.
  *
  * @returns {JSX.Element} The FileSelector component.
  *
- * @typedef {'file' | 'image' | 'video' | 'subtitle' | 'geoJson' | 'custom'} FileKind
+ * @typedef {'file' | 'image' | 'video' | 'subtitle' | 'geoJson' | 'lottie' | 'custom'} FileKind
  *
  * @example
  * <FileSelector
@@ -189,6 +201,7 @@ export const FileSelector = (props) => {
 		video: __('Remove video', 'eightshift-frontend-libs-tailwind'),
 		subtitle: __('Remove subtitle file', 'eightshift-frontend-libs-tailwind'),
 		geoJson: __('Remove GeoJSON file', 'eightshift-frontend-libs-tailwind'),
+		lottie: __('Remove Lottie animation', 'eightshift-frontend-libs-tailwind'),
 		custom: labels?.removeTooltip,
 	};
 
@@ -197,6 +210,7 @@ export const FileSelector = (props) => {
 		video: icons.videoFile,
 		subtitle: icons.closedCaptions,
 		geoJson: icons.fileMetadata,
+		lottie: icons.animationFile,
 		custom: labels?.removeIcon,
 	};
 

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

@@ -2,14 +2,13 @@ import React from 'react';
 import { __ } from '@wordpress/i18n';
 import { Button, HStack, ImagePlaceholder } from '@eightshift/ui-components';
 import { icons } from '@eightshift/ui-components/icons';
-import { ManageFileButton } from '@eightshift/frontend-libs-tailwind/scripts/components/file-picker';
+import { ManageFileButton } from './file-picker';
 
 const MediaButton = (props) => {
 	return (
 		<ManageFileButton
 			{...props}
 			kind='image'
-			allowedTypes={['image']}
 		/>
 	);
 };
@@ -19,13 +18,16 @@ const MediaButton = (props) => {
  *
  * @component
  * @param {Object} props - Component props.
- * @property {Function} props.onChange - The function that handles the change event.
- * @property {string} props.imageId - ID of the currently selected image. Used to mark the currently selected item when replacing the image.
- * @property {string} props.imageAlt - Alt text of the currently selected image.
- * @property {string} props.imageUrl - URL of the currently selected image.
- * @property {boolean} [props.noDelete] - If `true`, the delete button will be hidden.
- * @property {boolean} [props.noUpload] - If `true`, the upload button will be hidden.
+ * @param {Function} props.onChange - The function that handles the change event.
+ * @param {string} props.imageId - ID of the currently selected image. Used to mark the currently selected item when replacing the image.
+ * @param {string} props.imageAlt - Alt text of the currently selected image.
+ * @param {string} props.imageUrl - URL of the currently selected image.
+ * @param {boolean} [props.noDelete] - If `true`, the delete button will be hidden.
+ * @param {boolean} [props.noUpload] - If `true`, the upload button will be hidden.
  * @param {ImagePlaceholderImageMode} [props.imageMode='cover'] - Determines inner image display mode.
+ * @param {boolean} [props.hidden] - If `true`, the component will be hidden.
+ * @param {string[]} [props.allowedTypes=['image']] - Determines types of files which are allowed to be uploaded.
+ * @param {string} [props.className] - Classes to add to the button wrapper.
  *
  * @returns {JSX.Element} The MediaPicker component.
  *
@@ -41,10 +43,28 @@ const MediaButton = (props) => {
  *
  */
 export const MediaPicker = (props) => {
-	const { onChange, imageId, imageAlt, imageUrl, noDelete, noUpload, imageMode } = props;
+	const {
+		onChange,
+		imageId,
+		imageAlt,
+		imageUrl,
+		noDelete,
+		noUpload,
+		imageMode,
+		hidden,
+		allowedTypes = ['image'],
+		className,
+	} = props;
+
+	if (hidden) {
+		return null;
+	}
 
 	return (
-		<HStack noWrap>
+		<HStack
+			className={className}
+			noWrap
+		>
 			<ImagePlaceholder
 				url={imageUrl}
 				alt={imageAlt}
@@ -53,11 +73,15 @@ export const MediaPicker = (props) => {
 
 			{!imageUrl && (
 				<>
-					<MediaButton onChange={onChange} />
+					<MediaButton
+						onChange={onChange}
+						allowedTypes={allowedTypes}
+					/>
 					{!noUpload && (
 						<MediaButton
 							onChange={onChange}
 							type='upload'
+							allowedTypes={allowedTypes}
 							compact
 						/>
 					)}
@@ -70,6 +94,7 @@ export const MediaPicker = (props) => {
 						type='replace'
 						onChange={onChange}
 						imageId={imageId}
+						allowedTypes={allowedTypes}
 					/>
 					{!noDelete && (
 						<Button

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