@eightshift/frontend-libs-tailwind 1.0.0 → 1.1.1

package/CHANGELOG.md

@@ -4,10 +4,29 @@ 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.0.0] - 2024-06
+## [1.1.1] - 2024-07-11
+- Fixed default global manifest.
+- Removed erroneous styles.
+
+## [1.1.0] - 2024-07-09
+- Updated dependencies.
+- Tweaked fetch script to use WP `apiFetch`.
+- Added new options to the fetch script: `truncateTitle` and `labelProp`
+- Removed `urlBase` option from fetch script, as it's no longer needed.
+- Updated some built-in blocks
+- Moved fonts from Google Fonts to built-in.
+- Removed `.gitignore` ESLint ignore.
+- Tweaked ESLint config.
+- Updated base blocks.
+- Added `hidden` prop to `BlockInserter`.
+- Added `PickerPlaceholder` component.
+- Added option for dynamic parts and the `getTwDynamicPart` helper.
 
+## [1.0.0] - 2024-06
 - Initial release.
 
 [Unreleased]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/master...HEAD
 
+[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/src/Blocks/assets/scripts/shared.js

@@ -5,9 +5,7 @@ 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-frontend.css

@@ -7,6 +7,3 @@
  * Usage: `WordPress frontend screen`.
  *
  */
-
-/* OpenLayers */
-@import '~ol/ol.css';

package/blocks/init/src/Blocks/assets/styles/editor/editor-overrides.css

@@ -11,5 +11,5 @@
 }
 
 .editor-styles-wrapper.block-editor-writing-flow {
-	@apply p-0;
+	@apply p-0 font-sans;
 }

package/blocks/init/src/Blocks/assets/styles/fonts.css

@@ -0,0 +1,90 @@
+/*
+Font definitions
+Font files are split by charset to optimize loading.
+
+Fonts used are from Google Fonts.
+*/
+
+/* Fraunces Italic - Latin extended */
+@font-face {
+	font-family: 'Fraunces';
+	font-style: italic;
+	font-weight: 100 900;
+	font-display: swap;
+	src: url('../../../../assets/fonts/fraunces-italic-latin-extended.woff2') format('woff2');
+	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* Fraunces Italic - Latin */
+@font-face {
+	font-family: 'Fraunces';
+	font-style: italic;
+	font-weight: 100 900;
+	font-display: swap;
+	src: url('../../../../assets/fonts/fraunces-italic-latin.woff2') format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Fraunces - Latin extended */
+@font-face {
+	font-family: 'Fraunces';
+	font-style: normal;
+	font-weight: 100 900;
+	font-display: swap;
+	src: url('../../../../assets/fonts/fraunces-latin-extended.woff2') format('woff2');
+	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* Fraunces - Latin */
+@font-face {
+	font-family: 'Fraunces';
+	font-style: normal;
+	font-weight: 100 900;
+	font-display: swap;
+	src: url('../../../../assets/fonts/fraunces-latin.woff2') format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Noto Sans Italic - Latin extended */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: italic;
+	font-weight: 100 900;
+	font-stretch: 62.5% 100%;
+	font-display: swap;
+	src: url('../../../../assets/fonts/noto-sans-italic-latin-extended.woff2') format('woff2');
+	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* Noto Sans Italic - Latin */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: italic;
+	font-weight: 100 900;
+	font-stretch: 62.5% 100%;
+	font-display: swap;
+	src: url('../../../../assets/fonts/noto-sans-italic-latin.woff2') format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Noto Sans - Latin extended */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: normal;
+	font-weight: 100 900;
+	font-stretch: 62.5% 100%;
+	font-display: swap;
+	src: url('../../../../assets/fonts/noto-sans-latin-extended.woff2') format('woff2');
+	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* Noto Sans - Latin */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: normal;
+	font-weight: 100 900;
+	font-stretch: 62.5% 100%;
+	font-display: swap;
+	src: url('../../../../assets/fonts/noto-sans-latin.woff2') format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/blocks/init/src/Blocks/assets/styles/tailwind.css

@@ -1,8 +1,4 @@
-/* Fonts */
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0..1;1,9..144,100..900,0..100,0..1&display=swap');
-
-/* stylelint-disable scss/at-rule-no-unknown */
+/* stylelint-disable at-rule-no-unknown */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

package/blocks/init/src/Blocks/components/admin-theme-options/assets-admin/pages/parts.js

@@ -6,6 +6,7 @@ import { EsThemeOptionsContext } from '@eightshift/frontend-libs-tailwind/script
 
 export const Parts = ({ patterns }) => {
 	const { settings, updateSettings, isLoading } = useContext(EsThemeOptionsContext);
+
 	return (
 		<OptionsPanel>
 			<OptionsPanelSection>

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

@@ -7,11 +7,7 @@ import manifest from './../manifest.json';
 export const ButtonEditor = (attributes) => {
 	const { componentClass } = manifest;
 
-	const {
-		setAttributes,
-		additionalClass,
-		placeholder = __('Add content', '%g_textdomain%'),
-	} = attributes;
+	const { setAttributes, additionalClass, placeholder = __('Add content', '%g_textdomain%') } = attributes;
 
 	const buttonContent = checkAttr('buttonContent', attributes, manifest);
 	const buttonUse = checkAttr('buttonUse', attributes, manifest);

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

@@ -1,26 +1,7 @@
 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 {
-	BaseControl,
-	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/button/manifest.json

@@ -222,49 +222,49 @@
 					"buttonColor": "navy-100",
 					"buttonVariant": "secondary"
 				},
-				"twClasses": "text-navy-100 border-navy-100 focus-visible:ring-navy-500/30 hover:bg-navy-50"
+				"twClasses": "text-navy-100 border-navy-100 focus-visible:ring-navy-500/30 hover:bg-navy-100 hover:text-navy-950"
 			},
 			{
 				"attributes": {
 					"buttonColor": "navy-800",
 					"buttonVariant": "secondary"
 				},
-				"twClasses": "text-navy-800 border-navy-800 focus-visible:ring-navy-500/30 hover:bg-navy-50"
+				"twClasses": "text-navy-800 border-navy-800 focus-visible:ring-navy-500/30 hover:bg-navy-800 hover:text-navy-50"
 			},
 			{
 				"attributes": {
 					"buttonColor": "red-100",
 					"buttonVariant": "secondary"
 				},
-				"twClasses": "text-red-100 border-red-100 focus-visible:ring-red-500/30 hover:bg-red-50"
+				"twClasses": "text-red-100 border-red-100 focus-visible:ring-red-500/30 hover:bg-red-100 hover:text-red-950"
 			},
 			{
 				"attributes": {
 					"buttonColor": "red-800",
 					"buttonVariant": "secondary"
 				},
-				"twClasses": "text-red-800 border-red-800 focus-visible:ring-red-500/30 hover:bg-red-50"
+				"twClasses": "text-red-800 border-red-800 focus-visible:ring-red-500/30 hover:bg-red-800 hover:text-red-50"
 			},
 			{
 				"attributes": {
 					"buttonColor": "gray-100",
 					"buttonVariant": "secondary"
 				},
-				"twClasses": "text-gray-100 border-gray-100 focus-visible:ring-gray-500/30 hover:bg-gray-50"
+				"twClasses": "text-gray-100 border-gray-100 focus-visible:ring-gray-500/30 hover:bg-gray-100 hover:text-gray-950"
 			},
 			{
 				"attributes": {
 					"buttonColor": "gray-500",
 					"buttonVariant": "secondary"
 				},
-				"twClasses": "text-gray-500 border-gray-500 focus-visible:ring-gray-500/30 hover:bg-gray-50"
+				"twClasses": "text-gray-500 border-gray-500 focus-visible:ring-gray-500/30 hover:bg-gray-500 hover:text-white"
 			},
 			{
 				"attributes": {
 					"buttonColor": "gray-800",
 					"buttonVariant": "secondary"
 				},
-				"twClasses": "text-gray-800 border-gray-800 focus-visible:ring-gray-500/30"
+				"twClasses": "text-gray-800 border-gray-800 focus-visible:ring-gray-500/30 hover:bg-gray-800 hover:text-gray-50"
 			},
 			{
 				"attributes": {
@@ -278,7 +278,7 @@
 					"buttonColor": "white",
 					"buttonVariant": "link"
 				},
-				"twClasses": "text-gray-50 decoration-gray-100 hover:bg-gray-100 focus-visible:ring-gray-500/30 hover:ring-gray-100"
+				"twClasses": "text-gray-50 decoration-gray-100 hover:bg-gray-100 focus-visible:ring-gray-500/30 hover:ring-gray-100 hover:text-gray-950 hover:decoration-gray-400"
 			},
 			{
 				"attributes": {

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

@@ -15,8 +15,7 @@ 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/card/components/card-options.js

@@ -19,7 +19,6 @@ export const CardOptions = (attributes) => {
 				options={getOption('cardAlign', attributes, manifest)}
 				onChange={(value) => setAttributes({ [getAttrKey('cardAlign', attributes, manifest)]: value })}
 				aria-label={__('Card align', '%g_textdomain%')}
-				itemProps={{ size: 'large' }}
 				noItemLabel
 			/>
 

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

@@ -4,11 +4,7 @@ import { checkAttr, getAttrKey, getTwClasses } from '@eightshift/frontend-libs-t
 import manifest from './../manifest.json';
 
 export const HeadingEditor = (attributes) => {
-	const {
-		setAttributes,
-		additionalClass,
-		placeholder = __('Heading', '%g_textdomain%'),
-	} = attributes;
+	const { setAttributes, additionalClass, placeholder = __('Heading', '%g_textdomain%') } = attributes;
 
 	const headingUse = checkAttr('headingUse', attributes, manifest);
 

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

@@ -1,10 +1,4 @@
-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,13 +1,5 @@
 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';
@@ -41,11 +33,7 @@ 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}
@@ -98,9 +86,7 @@ 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,9 +35,7 @@ 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/load-more/assets/load-more.js

@@ -59,6 +59,7 @@ export class LoadMore {
 			// Disable 'Load more' button if something went wrong.
 			if (!received || !received?.success) {
 				this.element.disabled = true;
+
 				return;
 			}
 
@@ -127,8 +128,6 @@ export class LoadMore {
 			return;
 		}
 
-		console.log({ param });
-
 		this.page = param;
 		this.loadFromQueryParam = true;
 	};

package/blocks/init/src/Blocks/components/load-more/components/load-more-options.js

@@ -4,6 +4,7 @@ import manifest from '../manifest.json';
 
 export const LoadMoreOptions = (attributes) => {
 	const { setAttributes, label, noUseToggle, controlOnly } = attributes;
+
 	return (
 		<ButtonOptions
 			label={label ?? manifest.title}

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

@@ -11,17 +11,15 @@ 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-options.js

@@ -34,9 +34,7 @@ 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/paragraph/manifest.json

@@ -59,23 +59,21 @@
 		]
 	},
 	"tailwind": {
-		"tailwind": {
-			"base": {
-				"twClasses": "font-sans [&>a]:underline font-synthesis-none"
+		"base": {
+			"twClasses": "font-sans [&>a]:underline font-synthesis-none"
+		},
+		"options": {
+			"paragraphSize": {
+				"twClasses": {
+					"sm": "text-sm",
+					"base": "~sm/md:~text-sm/base",
+					"md": "~sm/md:~text-lg/2xl",
+					"lg": "~sm/md:~text-xl/3xl"
+				}
 			},
-			"options": {
-				"paragraphSize": {
-					"twClasses": {
-						"sm": "text-sm",
-						"base": "~sm/md:~text-sm/base",
-						"md": "~sm/md:~text-lg/2xl",
-						"lg": "~sm/md:~text-xl/3xl"
-					}
-				},
-				"paragraphFontWeight": {
-					"twClasses": {
-						"700": "font-bold"
-					}
+			"paragraphFontWeight": {
+				"twClasses": {
+					"700": "font-bold"
 				}
 			}
 		}

package/blocks/init/src/Blocks/components/post-header/post-header.php

@@ -17,7 +17,7 @@ $featuredImage = get_the_post_thumbnail_url(get_the_ID(), 'full') ?? '';
 	<?php if (!empty($featuredImage)) { ?>
 		<img class="w-full h-80 col-span-full -z-10 object-cover row-start-1" src="<?php echo esc_attr($featuredImage); ?>" alt="" role="presentation">
 	<?php } ?>
-	<div class="~sm/md:~mx-4/12 ~sm/md:~px-4/8 ~sm/md:~py-4/6 col-start-2 row-start-1 bg-black/75 text-white border border-b-0 border-black/25 backdrop-blur-2xl backdrop-brightness-200 backdrop-saturate-150 self-end">
+	<div class="~sm/md:~mx-4/12 ~sm/md:~px-4/8 ~sm/md:~py-4/6 col-start-2 row-start-1 bg-black/75 text-white border border-b-0 border-black/25 backdrop-blur-2xl backdrop-brightness-110 backdrop-saturate-150 self-end">
 		<h1 class="font-display text-balance font-synthesis-none ~text-5xl/6xl !leading-none font-soft-25 italic"><?php echo esc_html(get_the_title()); ?></h1>
 		<span class="opacity-75 text-sm"><?php echo esc_html(get_the_date()); ?></span>
 	</div>

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

@@ -17,11 +17,7 @@ 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-editor.js

@@ -3,9 +3,7 @@ import { JsxSvg } from '@eightshift/ui-components/icons';
 import manifest from '../manifest.json';
 
 export const ShareEditor = (attributes) => {
-	const {
-		additionalClass,
-	} = attributes;
+	const { additionalClass } = attributes;
 
 	const shareUse = checkAttr('shareUse', attributes, manifest);
 
@@ -18,7 +16,12 @@ export const ShareEditor = (attributes) => {
 	return (
 		<div className={getTwPart('container', manifest, additionalClass)}>
 			{shareTargets.map((network) => {
-				return <JsxSvg className={getTwPart('icon', manifest)} svg={manifest?.networks?.[network]?.icon} />;
+				return (
+					<JsxSvg
+						className={getTwPart('icon', manifest)}
+						svg={manifest?.networks?.[network]?.icon}
+					/>
+				);
 			})}
 		</div>
 	);

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

@@ -1,14 +1,7 @@
 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) => {
@@ -43,9 +36,7 @@ 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/video/components/video-editor.js

@@ -34,8 +34,7 @@ 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']}
@@ -48,8 +47,7 @@ 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']}