@eightshift/frontend-libs-tailwind 1.1.1 → 1.3.0

package/.prettierrc

@@ -6,7 +6,7 @@
 	"jsxSingleQuote": true,
 	"singleQuote": true,
 	"singleAttributePerLine": true,
-	"printWidth": 180,
+	"printWidth": 120,
 	"arrowParens": "always",
 	"bracketSpacing": true,
 	"semi": true,

package/CHANGELOG.md

@@ -4,6 +4,19 @@ 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.3.0] - 2024-08-08
+- `twClasses` and `twClassesEditor` can now be passed as an array
+- Updated schemas to account for the `twClasses`/`twClassesEditor` changes.
+- Tailwind output functions will now output the custom classes if no Tailwind classes are in the output.
+- Tweaked Prettier config.
+- Updated dependencies.
+
+## [1.2.0] - 2024-08-08
+- Fixed default `perPage` param in `wpSearchRoute`.
+- Updated image and file pickers with support for `hidden` prop and accepted types passthrough.
+- Fixed some reported bugs in a couple of built-in blocks.
+- Updated dependencies.
+
 ## [1.1.1] - 2024-07-11
 - Fixed default global manifest.
 - Removed erroneous styles.
@@ -22,11 +35,13 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 - Added `PickerPlaceholder` component.
 - Added option for dynamic parts and the `getTwDynamicPart` helper.
 
-## [1.0.0] - 2024-06
+## [1.0.0] - 2024-06-17
 - Initial release.
 
 [Unreleased]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/master...HEAD
 
+[1.3.0]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.2.0...1.3.0
+[1.2.0]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.1.1...1.2.0
 [1.1.1]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.1.0...1.1.1
 [1.1.0]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.0.0...1.1.0
 [1.0.0]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/0.0.1...1.0.0

package/blocks/init/assets/scripts/application-admin.js

@@ -4,4 +4,4 @@
 
 import { dynamicImport } from '@eightshift/frontend-libs-tailwind/scripts/helpers';
 
-dynamicImport(require.context('./../../src/blocks/components', true, /assets-admin\/index\.js$/));
+dynamicImport(require.context('./../../src/Blocks/components', true, /assets-admin\/index\.js$/));

package/blocks/init/src/Blocks/assets/scripts/link-section-editor.js

@@ -175,7 +175,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/blocks/init/src/Blocks/assets/scripts/shared.js

@@ -5,7 +5,9 @@ const colorData = getColorData(themeColors);
 
 export const getColorOption = (key, manifest) => {
 	if (!manifest?.options?.[key]) {
-		throw new Error(`The key ${key} is not defined in the manifest options for ${manifest?.componentName ?? manifest?.title}.`);
+		throw new Error(
+			`The key ${key} is not defined in the manifest options for ${manifest?.componentName ?? manifest?.title}.`,
+		);
 	}
 
 	return colorData?.filter(({ slug }) => manifest?.options?.[key]?.includes(slug)) ?? [];

package/blocks/init/src/Blocks/assets/styles/application-blocks.css

@@ -0,0 +1 @@
+@import './fonts.css';

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

@@ -27,8 +27,14 @@ $buttonContent = Helpers::checkAttr('buttonContent', $attributes, $manifest);
 
 $buttonAriaLabel = Helpers::checkAttr('buttonAriaLabel', $attributes, $manifest);
 
+$buttonIconUse = Helpers::checkAttr('buttonIconUse', $attributes, $manifest);
+
 $buttonAttrs = [];
 
+if (!$buttonIconUse && empty($buttonContent)) {
+	return;
+}
+
 if (!empty($additionalAttributes)) {
 	$buttonAttrs = $additionalAttributes;
 }

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

@@ -1,7 +1,25 @@
 import { __ } from '@wordpress/i18n';
-import { getOption, checkAttr, getAttrKey, props, getOptions, wpSearchRoute, getHiddenOptions } from '@eightshift/frontend-libs-tailwind/scripts';
+import {
+	getOption,
+	checkAttr,
+	getAttrKey,
+	props,
+	getOptions,
+	wpSearchRoute,
+	getHiddenOptions,
+} from '@eightshift/frontend-libs-tailwind/scripts';
 import { IconOptions } from '../../icon/components/icon-options';
-import { ButtonGroup, ColorPicker, ComponentToggle, HStack, InputField, LinkInput, OptionSelect, Spacer, Toggle } from '@eightshift/ui-components';
+import {
+	ButtonGroup,
+	ColorPicker,
+	ComponentToggle,
+	HStack,
+	InputField,
+	LinkInput,
+	OptionSelect,
+	Spacer,
+	Toggle,
+} from '@eightshift/ui-components';
 import { icons } from '@eightshift/ui-components/icons';
 import { upperFirst } from '@eightshift/ui-components/utilities';
 import manifest from './../manifest.json';

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

@@ -15,7 +15,8 @@ export const CardEditor = (attributes) => {
 					additionalClass: {
 						image: getTwPart('image', manifest),
 						picture: getTwPart('imagePicture', 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',
+						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',
 					},
 				})}
 			/>

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

@@ -28,7 +28,9 @@ $icon = $manifest['icons'][$iconName];
 
 $className = Helpers::getTwClasses($attributes, $manifest, $additionalClass);
 
-$icon = str_replace('<svg ', "<svg class=\"{$className}\"", $icon);
+if (!empty($className)) {
+	$icon = str_replace('<svg ', '<svg class="' . htmlspecialchars($className) . '" ', $icon);
+}
 
 // phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
 echo $icon;

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

@@ -1,4 +1,10 @@
-import { checkAttr, getBreakpointData, getBreakpointNames, getTwClasses, getTwPart } from '@eightshift/frontend-libs-tailwind/scripts';
+import {
+	checkAttr,
+	getBreakpointData,
+	getBreakpointNames,
+	getTwClasses,
+	getTwPart,
+} from '@eightshift/frontend-libs-tailwind/scripts';
 import { ImagePlaceholder } from '@eightshift/ui-components';
 import manifest from './../manifest.json';
 

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

@@ -1,5 +1,13 @@
 import { __ } from '@wordpress/i18n';
-import { checkAttr, getAttrKey, MediaPicker, generateOptionsFromValue, getOption, getHiddenOptions, getResponsiveData } from '@eightshift/frontend-libs-tailwind/scripts';
+import {
+	checkAttr,
+	getAttrKey,
+	MediaPicker,
+	generateOptionsFromValue,
+	getOption,
+	getHiddenOptions,
+	getResponsiveData,
+} from '@eightshift/frontend-libs-tailwind/scripts';
 import manifest from './../manifest.json';
 import { ComponentToggle, OptionSelect, Responsive, Spacer, Toggle } from '@eightshift/ui-components';
 import { icons } from '@eightshift/ui-components/icons';
@@ -33,7 +41,11 @@ export const ImageOptions = (attributes) => {
 				icon={icons.imageFile}
 				label={__('Image', 'eightshift-ui-components')}
 				options={generateOptionsFromValue(imageData, (v) =>
-					truncateMiddle(v?.url?.replace(window.location.origin, '')?.replace(/\/wp-content\/uploads\/\d{4}\/\d{2}\//g, '') ?? __('Not set', '%g_textdomain%'), 15),
+					truncateMiddle(
+						v?.url?.replace(window.location.origin, '')?.replace(/\/wp-content\/uploads\/\d{4}\/\d{2}\//g, '') ??
+							__('Not set', '%g_textdomain%'),
+						15,
+					),
 				)}
 				hidden={hiddenOptions?.imagePicker}
 				{...responsiveData}
@@ -86,7 +98,9 @@ export const ImageOptions = (attributes) => {
 				icon={icons.expandXl}
 				label={__('Stretch', '%g_textdomain%')}
 				checked={imageSize === 'stretch'}
-				onChange={(value) => setAttributes({ [getAttrKey('imageSize', attributes, manifest)]: value ? 'stretch' : 'default' })}
+				onChange={(value) =>
+					setAttributes({ [getAttrKey('imageSize', attributes, manifest)]: value ? 'stretch' : 'default' })
+				}
 				hidden={hiddenOptions?.stretch}
 			/>
 

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

@@ -35,7 +35,9 @@ export const ListOptions = (attributes) => {
 				<ToggleButton
 					selected={listFontWeight === '700'}
 					icon={icons.bold}
-					onChange={(value) => setAttributes({ [getAttrKey('listFontWeight', attributes, manifest)]: value ? '700' : '400' })}
+					onChange={(value) =>
+						setAttributes({ [getAttrKey('listFontWeight', attributes, manifest)]: value ? '700' : '400' })
+					}
 					tooltip={__('Bold', '%g_textdomain%')}
 					hidden={hiddenOptions.weight}
 				/>

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

@@ -91,7 +91,7 @@
 	},
 	"tailwind": {
 		"base": {
-			"twClasses": "font-sans [&>a]:underline font-synthesis-none",
+			"twClasses": "font-sans [&_a]:underline font-synthesis-none",
 			"twClassesEditor": "font-sans [&>a]:underline font-synthesis-none"
 		},
 		"options": {

package/blocks/init/src/Blocks/components/modal/assets/index.js

@@ -11,15 +11,17 @@ domReady(() => {
 	}
 
 	elements.forEach((element) => {
-		document.querySelectorAll(`[href=":open-modal-${element.id}:"],[data-micromodal-trigger="${element.id}"]`).forEach((trigger) => {
-			trigger.addEventListener('click', (event) => {
-				event.preventDefault();
+		document
+			.querySelectorAll(`[href=":open-modal-${element.id}:"],[data-micromodal-trigger="${element.id}"]`)
+			.forEach((trigger) => {
+				trigger.addEventListener('click', (event) => {
+					event.preventDefault();
 
-				MicroModal.show(element.id, {
-					disableScroll: true,
-					awaitCloseAnimation: true,
+					MicroModal.show(element.id, {
+						disableScroll: true,
+						awaitCloseAnimation: true,
+					});
 				});
 			});
-		});
 	});
 });

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

@@ -34,7 +34,7 @@ export const ParagraphEditor = (attributes) => {
 			onMerge={mergeBlocks}
 			onReplace={onReplace}
 			onRemove={onRemove}
-			deleteEnter={true}
+			deleteEnter
 		/>
 	);
 };

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

@@ -34,7 +34,9 @@ export const ParagraphOptions = (attributes) => {
 				<ToggleButton
 					selected={paragraphFontWeight === '700'}
 					icon={icons.bold}
-					onChange={(value) => setAttributes({ [getAttrKey('paragraphFontWeight', attributes, manifest)]: value ? '700' : '400' })}
+					onChange={(value) =>
+						setAttributes({ [getAttrKey('paragraphFontWeight', attributes, manifest)]: value ? '700' : '400' })
+					}
 					tooltip={__('Bold', '%g_textdomain%')}
 					hidden={hiddenOptions.weight}
 				/>

package/blocks/init/src/Blocks/components/share/assets/index.js

@@ -2,7 +2,7 @@ import domReady from '@wordpress/dom-ready';
 import manifest from '../manifest.json';
 
 domReady(async () => {
-	const shareTargets = document.querySelectorAll(`.${manifest.componentJsClass}`);
+	const shareTargets = document.querySelectorAll(`.${manifest.componentJsClass}[data-mode='share']`);
 
 	if (shareTargets.length < 1) {
 		return;
@@ -17,7 +17,11 @@ domReady(async () => {
 		if ('share' in navigator && navigator?.canShare(navigatorShareData)) {
 			await navigator?.share(navigatorShareData);
 		} else {
-			window.open(shareUrl, 'share-post', 'height=600,width=800,left=0,top=0,location=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1');
+			window.open(
+				shareUrl,
+				'share-post',
+				'height=600,width=800,left=0,top=0,location=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1',
+			);
 		}
 	};
 

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

@@ -1,7 +1,14 @@
 import { __ } from '@wordpress/i18n';
 import { checkAttr, getAttrKey, getHiddenOptions } from '@eightshift/frontend-libs-tailwind/scripts';
 import manifest from '../manifest.json';
-import { ComponentToggle, OptionSelect, DraggableList, DraggableListItem, Spacer, Switch } from '@eightshift/ui-components';
+import {
+	ComponentToggle,
+	OptionSelect,
+	DraggableList,
+	DraggableListItem,
+	Spacer,
+	Switch,
+} from '@eightshift/ui-components';
 import { icons, JsxSvg } from '@eightshift/ui-components/icons';
 
 export const ShareOptions = (attributes) => {
@@ -36,7 +43,9 @@ export const ShareOptions = (attributes) => {
 		},
 	];
 
-	const pickerSectionTitle = shareMode ? __('Share targets', '%g_textdomain%') : __('Social networks', '%g_textdomain%');
+	const pickerSectionTitle = shareMode
+		? __('Share targets', '%g_textdomain%')
+		: __('Social networks', '%g_textdomain%');
 
 	return (
 		<ComponentToggle

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

@@ -22,9 +22,12 @@ $shareMode = Helpers::checkAttr('shareMode', $attributes, $manifest);
 $additionalClass = $attributes['additionalClass'] ?? '';
 
 ?>
-<div class="<?php echo esc_attr(Helpers::getTwPart('container', $manifest, $additionalClass)); ?>">
+<div
+	class="<?php echo esc_attr(Helpers::getTwPart('container', $manifest, $additionalClass, $manifest['componentJsClass'])); ?>"
+	data-mode="<?php echo esc_attr($shareMode); ?>"
+>
 	<?php
-	if ($shareMode) {
+	if ($shareMode === 'share') {
 		foreach ($shareTargets as $networkName) {
 			$shareUrl = $manifest['networks'][$networkName]['shareUrl'] ?? '';
 			$shareUrl = str_replace('POST_TITLE', get_the_title(), $shareUrl);
@@ -32,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)); ?>"
+				class="<?php echo esc_attr(Helpers::getTwPart('icon', $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()); ?>"
@@ -44,7 +47,7 @@ $additionalClass = $attributes['additionalClass'] ?? '';
 				?>
 			</button>
 		<?php }
-	} else {
+	} elseif ($shareMode === 'links') {
 		foreach ($shareTargets as $networkName) {
 			?>
 			<a

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

@@ -34,10 +34,11 @@ export const VideoEditor = (attributes) => {
 										setAttributes({
 											[getAttrKey('videoId', attributes, manifest)]: id,
 											[getAttrKey('videoUrl', attributes, manifest)]: url,
-											[getAttrKey('videoMimeType', attributes, manifest)]: typeof mime === 'undefined' ? mime_type : mime,
+											[getAttrKey('videoMimeType', attributes, manifest)]:
+												typeof mime === 'undefined' ? mime_type : mime,
 										})
 									}
-									allowedTypes={['video/mp4', 'video/webm']}
+									allowedTypes={manifest.allowedTypes}
 									kind='video'
 								/>
 
@@ -47,7 +48,8 @@ export const VideoEditor = (attributes) => {
 										setAttributes({
 											[getAttrKey('videoId', attributes, manifest)]: id,
 											[getAttrKey('videoUrl', attributes, manifest)]: url,
-											[getAttrKey('videoMimeType', attributes, manifest)]: typeof mime === 'undefined' ? mime_type : mime,
+											[getAttrKey('videoMimeType', attributes, manifest)]:
+												typeof mime === 'undefined' ? mime_type : mime,
 										})
 									}
 									allowedTypes={['video/mp4', 'video/webm']}

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

@@ -1,6 +1,24 @@
 import { __, sprintf } from '@wordpress/i18n';
-import { getOption, checkAttr, getAttrKey, FileSelector, getHiddenOptions, MediaPicker } from '@eightshift/frontend-libs-tailwind/scripts';
-import { AnimatedVisibility, BaseControl, Expandable, InputField, Notice, OptionSelect, Repeater, RepeaterItem, Spacer, Toggle } from '@eightshift/ui-components';
+import {
+	getOption,
+	checkAttr,
+	getAttrKey,
+	FileSelector,
+	getHiddenOptions,
+	MediaPicker,
+} from '@eightshift/frontend-libs-tailwind/scripts';
+import {
+	AnimatedVisibility,
+	BaseControl,
+	Expandable,
+	InputField,
+	Notice,
+	OptionSelect,
+	Repeater,
+	RepeaterItem,
+	Spacer,
+	Toggle,
+} from '@eightshift/ui-components';
 import { icons } from '@eightshift/ui-components/icons';
 import manifest from '../manifest.json';
 
@@ -58,7 +76,7 @@ export const VideoOptions = (attributes) => {
 				}
 				fileId={videoId}
 				fileName={videoUrl?.slice(videoUrl?.lastIndexOf('/') + 1)}
-				allowedTypes={['video/mp4', 'video/webm']}
+				allowedTypes={manifest.allowedTypes}
 				kind='video'
 			/>
 
@@ -109,7 +127,10 @@ export const VideoOptions = (attributes) => {
 				<Notice
 					type='warning'
 					label={__('Video plays automatically, with sound, and without controls', '%g_textdomain%')}
-					subtitle={__('This will bother most users and is an accessibility issue. Consider changing some of the options.', '%g_textdomain%')}
+					subtitle={__(
+						'This will bother most users and is an accessibility issue. Consider changing some of the options.',
+						'%g_textdomain%',
+					)}
 					icon={icons.a11yWarning}
 					alignIconToTitle
 				/>

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

@@ -112,5 +112,9 @@
 				"twClasses": "aspect-video w-full rounded-xl border border-gray-800 bg-gradient-to-br from-gray-800 to-black shadow-md"
 			}
 		}
-	}
+	},
+	"allowedTypes": [
+		"video/mp4",
+		"video/webm"
+	]
 }

package/blocks/init/src/Blocks/custom/carousel/assets/pagination.js

@@ -8,7 +8,8 @@ export const addPagination = (emblaApi, dotsNode) => {
 
 		dotNodes = emblaApi.scrollSnapList().map((_, index) => {
 			const elem = document.createElement('button');
-			elem.className = 'size-2.5 rounded-full border border-gray-500 transition hover:scale-105 focus:outline-none focus-visible:ring focus-visible:ring-navy-500/30';
+			elem.className =
+				'size-2.5 rounded-full border border-gray-500 transition hover:scale-105 focus:outline-none focus-visible:ring focus-visible:ring-navy-500/30';
 
 			elem.addEventListener('click', () => emblaApi.scrollTo(index), false);
 			dotsNode.appendChild(elem);
@@ -26,7 +27,12 @@ export const addPagination = (emblaApi, dotsNode) => {
 		});
 	};
 
-	emblaApi.on('init', addDots).on('reInit', addDots).on('init', toggleDotBtnsActive).on('reInit', toggleDotBtnsActive).on('select', toggleDotBtnsActive);
+	emblaApi
+		.on('init', addDots)
+		.on('reInit', addDots)
+		.on('init', toggleDotBtnsActive)
+		.on('reInit', toggleDotBtnsActive)
+		.on('select', toggleDotBtnsActive);
 
 	return () => {
 		dotsNode.innerHTML = '';

package/blocks/init/src/Blocks/custom/column/components/column-options.js

@@ -209,7 +209,9 @@ export const ColumnOptions = ({ attributes, setAttributes }) => {
 				}
 				icon={icons.gridAutoRows}
 				label={__('Row span', '%g_textdomain%')}
-				options={generateOptionsFromValue(columnRowSpan, (v) => (!v ? __('Not set', '%g_textdomain%') : sprintf(_n('1 row', '%d rows', v, '%g_textdomain%'), v)))}
+				options={generateOptionsFromValue(columnRowSpan, (v) =>
+					!v ? __('Not set', '%g_textdomain%') : sprintf(_n('1 row', '%d rows', v, '%g_textdomain%'), v),
+				)}
 				noModeSelect
 				inline
 				{...responsiveData}
@@ -311,7 +313,9 @@ export const ColumnOptions = ({ attributes, setAttributes }) => {
 								setAttributes({ [getAttrKey('columnBackground', attributes, manifest)]: undefined });
 							} else {
 								setAttributes({
-									[getAttrKey('columnBackground', attributes, manifest)]: Object.keys(manifest.tailwind.options.columnBackground.twClasses).find((key) => key.startsWith(value)),
+									[getAttrKey('columnBackground', attributes, manifest)]: Object.keys(
+										manifest.tailwind.options.columnBackground.twClasses,
+									).find((key) => key.startsWith(value)),
 								});
 							}
 						}}
@@ -323,7 +327,9 @@ export const ColumnOptions = ({ attributes, setAttributes }) => {
 					{backgroundType === 'solid' && (
 						<ColorPicker
 							colors={getColorOption('columnBackgroundSolid', manifest)}
-							onChange={(value) => setAttributes({ [getAttrKey('columnBackground', attributes, manifest)]: `solid-${value}` })}
+							onChange={(value) =>
+								setAttributes({ [getAttrKey('columnBackground', attributes, manifest)]: `solid-${value}` })
+							}
 							value={columnBackground?.replace('solid-', '')}
 							aria-label={__('Background color', '%g_textdomain%')}
 						/>
@@ -360,7 +366,9 @@ export const ColumnOptions = ({ attributes, setAttributes }) => {
 							/>
 							<OptionSelect
 								value={columnGradientDirection}
-								onChange={(value) => setAttributes({ [getAttrKey('columnGradientDirection', attributes, manifest)]: value })}
+								onChange={(value) =>
+									setAttributes({ [getAttrKey('columnGradientDirection', attributes, manifest)]: value })
+								}
 								options={getOption('columnGradientDirection', attributes, manifest)}
 								wrapperProps={{
 									triggerIcon: <div className={rotationClassName[columnGradientDirection]}>{icons.arrowUpCircle}</div>,

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

@@ -10,7 +10,9 @@ import manifest from './../manifest.json';
 export const ColumnsEditor = ({ attributes, setAttributes, clientId }) => {
 	const { title, layoutPresets } = manifest;
 
-	const innerBlockCount = useSelect((select) => select('core/block-editor').getBlock(clientId).innerBlocks?.length ?? 0);
+	const innerBlockCount = useSelect(
+		(select) => select('core/block-editor').getBlock(clientId).innerBlocks?.length ?? 0,
+	);
 
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps(blockProps, {
@@ -36,7 +38,9 @@ export const ColumnsEditor = ({ attributes, setAttributes, clientId }) => {
 							<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),
+									);
 
 									setAttributes(attrsToSet);