@eightshift/frontend-libs-tailwind 1.0.0

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

@@ -0,0 +1,106 @@
+import { __, sprintf, _n } from '@wordpress/i18n';
+import { props, checkAttr, getAttrKey, MediaPicker, wpSearchRoute } from '@eightshift/frontend-libs-tailwind/scripts';
+import { ShareOptions } from '../../../components/share/components/share-options';
+import { BaseControl, Repeater, RepeaterItem, LinkInput, Toggle } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import { truncate } from '@eightshift/ui-components/utilities';
+import manifest from '../manifest.json';
+
+export const SiteFooterOptions = ({ attributes, setAttributes, randId, setRandId }) => {
+	const siteFooterLogoUrl = checkAttr('siteFooterLogoUrl', attributes, manifest);
+	const siteFooterLogoId = checkAttr('siteFooterLogoId', attributes, manifest);
+	const siteFooterPrimary = checkAttr('siteFooterPrimary', attributes, manifest);
+
+	return (
+		<>
+			<BaseControl
+				icon={icons.iconGeneric}
+				label={__('Logo', '%g_textdomain%')}
+			>
+				<MediaPicker
+					onChange={({ id, url }) => {
+						setAttributes({
+							[getAttrKey('siteFooterLogoId', attributes, manifest)]: id,
+							[getAttrKey('siteFooterLogoUrl', attributes, manifest)]: url,
+						});
+					}}
+					imageId={siteFooterLogoId}
+					imageUrl={siteFooterLogoUrl}
+					imageMode='contain'
+				/>
+			</BaseControl>
+
+			<ShareOptions
+				{...props('share', attributes, { setAttributes })}
+				noUseToggle
+			/>
+
+			<Repeater
+				icon={icons.linkNav}
+				label={__('Links', '%g_textdomain%')}
+				items={siteFooterPrimary}
+				onChange={(value) => setAttributes({ [getAttrKey('siteFooterPrimary', attributes, manifest)]: value })}
+				addDefaultItem={{
+					header: '',
+					items: [
+						{
+							text: '',
+							url: '',
+							newTab: false,
+						},
+					],
+				}}
+			>
+				{(item) => {
+					const { header, items, updateData, itemIndex } = item;
+
+					return (
+						<RepeaterItem
+							label={header?.length > 0 ? header : __('New section', '%g_textdomain%')}
+							subtitle={
+								items.length > 0 && sprintf(_n('%d link', '%d links', items.length, '%g_textdomain%'), items.length)
+							}
+						>
+							<Repeater
+								icon={icons.link}
+								label={__('Links', '%g_textdomain%')}
+								items={items}
+								onChange={(value) => updateData({ items: value })}
+								addDefaultItem={{
+									text: '',
+									url: '',
+									newTab: false,
+								}}
+							>
+								{(item) => {
+									const { text, url, newTab, updateData } = item;
+
+									return (
+										<RepeaterItem
+											label={text?.length > 0 ? text : __('New link', '%g_textdomain%')}
+											subtitle={truncate(url?.replace(window.location.origin, ''), 30)}
+										>
+											<LinkInput
+												icon={url?.includes('#')}
+												url={url}
+												onChange={({ url }) => updateData({ url: url })}
+												fetchSuggestions={wpSearchRoute}
+											/>
+
+											<Toggle
+												icon={icons.newTab}
+												label={__('Open in new tab', '%g_textdomain%')}
+												checked={newTab}
+												onChange={(value) => updateData({ newTab: value })}
+											/>
+										</RepeaterItem>
+									);
+								}}
+							</Repeater>
+						</RepeaterItem>
+					);
+				}}
+			</Repeater>
+		</>
+	);
+};

package/blocks/init/src/Blocks/custom/site-footer/manifest.json

@@ -0,0 +1,73 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
+	"blockName": "site-footer",
+	"title": "Site footer",
+	"description": "Add extra navigation links, a logo, and social media buttons to complete your posts.",
+	"category": "eightshift",
+	"icon": {
+		"src": "es-card-teaser-alt-2"
+	},
+	"keywords": [
+		"site",
+		"footer"
+	],
+	"example": {
+		"attributes": {
+			"siteFooterLogoUrl": "https://loremflickr.com/200/150"
+		}
+	},
+	"attributes": {
+		"siteFooterPrimary": {
+			"type": "array",
+			"default": []
+		},
+		"siteFooterLogoUrl": {
+			"type": "string"
+		},
+		"siteFooterLogoId": {
+			"type": "string"
+		},
+		"siteFooterCopyright": {
+			"type": "string"
+		}
+	},
+	"components": {
+		"share": "share"
+	},
+	"tailwind": {
+		"base": {
+			"twClasses": "pt-8 pb-4"
+		},
+		"parts": {
+			"topContainer": {
+				"twClasses": "sm:grid sm:grid-cols-[auto,_1fr] sm:gap-x-20 px-2"
+			},
+			"bottomContainer": {
+				"twClasses": "mt-8 flex items-center justify-between gap-8 border-t border-t-gray-200 pt-4 px-2"
+			},
+			"copyright": {
+				"twClasses": "inline-flex gap-1 text-sm text-gray-400"
+			},
+			"linksContainer": {
+				"twClasses": "grid grid-cols-1 sm:grid-cols-[repeat(auto-fill,_minmax(10rem,_1fr))] gap-x-8 gap-y-4 mt-8 sm:mt-0"
+			},
+			"sectionContainer": {
+				"twClasses": "space-y-0.5"
+			},
+			"sectionTitle": {
+				"twClasses": "text-sm font-medium text-gray-500"
+			},
+			"link": {
+				"twClasses": "block w-fit text-base text-gray-700 hover:underline underline-offset-2 decoration-navy-500 decoration-2",
+				"twClassesEditor": "text-base text-gray-700"
+			},
+			"logo": {
+				"twClasses": "min-h-16 w-28",
+				"twClassesEditor": "min-h-16 max-w-28 p-1 [&_img]:!object-contain"
+			},
+			"share": {
+				"twClasses": "mt-5"
+			}
+		}
+	}
+}

package/blocks/init/src/Blocks/custom/site-footer/site-footer-block.js

@@ -0,0 +1,13 @@
+import { SiteFooterEditor } from './components/site-footer-editor';
+import { SiteFooterOptions } from './components/site-footer-options';
+import { GutenbergBlock } from '@eightshift/frontend-libs-tailwind/scripts';
+
+export const SiteFooter = (props) => {
+	return (
+		<GutenbergBlock
+			{...props}
+			options={SiteFooterOptions}
+			editor={SiteFooterEditor}
+		/>
+	);
+};

package/blocks/init/src/Blocks/custom/site-footer/site-footer.php

@@ -0,0 +1,72 @@
+<?php
+
+/**
+ * Site footer block template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+$siteFooterPrimary = Helpers::checkAttr('siteFooterPrimary', $attributes, $manifest);
+$siteFooterCopyright = Helpers::checkAttr('siteFooterCopyright', $attributes, $manifest);
+
+$siteFooterLogoUrl = Helpers::checkAttr('siteFooterLogoUrl', $attributes, $manifest);
+$siteFooterLogoId = Helpers::checkAttr('siteFooterLogoId', $attributes, $manifest);
+
+$logoAlt = get_post_meta($siteFooterLogoId, '_wp_attachment_image_alt', true) ?? '';
+?>
+
+<div class="<?php echo esc_attr(Helpers::getTwClasses($attributes, $manifest)); ?>">
+	<div class="<?php echo esc_attr(Helpers::getTwPart('topContainer', $manifest)); ?>">
+		<a href="<?php echo esc_url(get_home_url()); ?>">
+			<img
+				src="<?php echo esc_attr($siteFooterLogoUrl); ?>"
+				alt="<?php echo esc_attr($logoAlt); ?>"
+				class="<?php echo esc_attr(Helpers::getTwPart('logo', $manifest)); ?>"
+			>
+		</a>
+		<div class="<?php echo esc_attr(Helpers::getTwPart('linksContainer', $manifest)); ?>">
+
+			<?php
+			foreach ($siteFooterPrimary as $index => $value) {
+				$items = $value['items'] ?? [];
+				$header = $value['header'] ?? '';
+				?>
+				<div class="<?php echo esc_attr(Helpers::getTwPart('sectionContainer', $manifest)); ?>">
+					<p class="<?php echo esc_attr(Helpers::getTwPart('sectionTitle', $manifest)); ?>">
+						<?php echo wp_kses_post($header); ?>
+					</p>
+
+					<?php
+					foreach ($items as $item) {
+						$url = $item['url'] ?? '';
+						?>
+						<a
+							href="<?php echo esc_url($item['url']); ?>"
+							class="<?php echo esc_attr(Helpers::getTwPart('link', $manifest)); ?>"
+							<?php if ($item['newTab'] ?? false) { ?>
+								target="_blank"
+								rel="noopener noreferrer"
+							<?php } ?>
+						>
+							<?php echo wp_kses_post($item['text'] ?? ''); ?>
+						</a>
+					<?php } ?>
+				</div>
+			<?php } ?>
+		</div>
+	</div>
+
+	<div class="<?php echo esc_attr(Helpers::getTwPart('bottomContainer', $manifest)); ?>">
+		<span class="<?php echo esc_attr(Helpers::getTwPart('copyright', $manifest)); ?>">
+			&copy; <?php echo esc_attr($siteFooterCopyright); ?>
+		</span>
+
+		<?php
+		echo Helpers::render('share', Helpers::props('share', $attributes));
+		?>
+	</div>
+</div>

package/blocks/init/src/Blocks/custom/site-navigation/assets/index.js

@@ -0,0 +1,9 @@
+import domReady from '@wordpress/dom-ready';
+import MicroModal from 'micromodal';
+
+domReady(() => {
+	MicroModal.init({
+		disableScroll: true,
+		awaitCloseAnimation: true,
+	});
+});

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

@@ -0,0 +1,42 @@
+import { __ } from '@wordpress/i18n';
+import { RichText } from '@wordpress/block-editor';
+import { checkAttr, getAttrKey, getTwClasses, getTwPart } from '@eightshift/frontend-libs-tailwind/scripts';
+import { ImagePlaceholder } from '@eightshift/ui-components';
+import manifest from '../manifest.json';
+
+export const SiteNavigationEditor = ({ attributes, setAttributes }) => {
+	const siteNavigationLinks = checkAttr('siteNavigationLinks', attributes, manifest);
+	const siteNavigationLogoUrl = checkAttr('siteNavigationLogoUrl', attributes, manifest);
+
+	return (
+		<div className={getTwClasses(attributes, manifest)}>
+			<ImagePlaceholder
+				style='simple'
+				imageMode='contain'
+				url={siteNavigationLogoUrl}
+				size='fullWidth'
+				className={getTwPart('logo', manifest)}
+			/>
+
+			<div className={getTwPart('linkContainer', manifest)}>
+				{siteNavigationLinks.map(({ text }, index) => {
+					return (
+						<RichText
+							placeholder={__('Item', '%g_textdomain%')}
+							value={text}
+							onChange={(value) => {
+								const newLinks = [...siteNavigationLinks];
+								newLinks[index].text = value;
+								setAttributes({ [getAttrKey('siteNavigationLinks', attributes, manifest)]: newLinks });
+							}}
+							allowedFormats={[]}
+							className={getTwPart('link', manifest)}
+							withoutInteractiveFormatting
+							disableLineBreaks
+						/>
+					);
+				})}
+			</div>
+		</div>
+	);
+};

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

@@ -0,0 +1,73 @@
+import { __ } from '@wordpress/i18n';
+import { checkAttr, getAttrKey, MediaPicker, wpSearchRoute } from '@eightshift/frontend-libs-tailwind/scripts';
+import { BaseControl, Repeater, RepeaterItem, LinkInput, Toggle, Spacer } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import { truncate } from '@eightshift/ui-components/utilities';
+import manifest from '../manifest.json';
+
+export const SiteNavigationOptions = ({ attributes, setAttributes }) => {
+	const siteNavigationLinks = checkAttr('siteNavigationLinks', attributes, manifest);
+	const siteNavigationLogoUrl = checkAttr('siteNavigationLogoUrl', attributes, manifest);
+	const siteNavigationLogoId = checkAttr('siteNavigationLogoId', attributes, manifest);
+
+	return (
+		<>
+			<BaseControl
+				icon={icons.iconGeneric}
+				label={__('Logo', '%g_textdomain%')}
+			>
+				<MediaPicker
+					onChange={({ id, url }) => {
+						setAttributes({
+							[getAttrKey('siteNavigationLogoId', attributes, manifest)]: id,
+							[getAttrKey('siteNavigationLogoUrl', attributes, manifest)]: url,
+						});
+					}}
+					imageId={siteNavigationLogoId}
+					imageUrl={siteNavigationLogoUrl}
+					imageMode='contain'
+				/>
+
+				<Spacer />
+
+				<Repeater
+					icon={icons.link}
+					label={__('Links', '%g_textdomain%')}
+					items={siteNavigationLinks}
+					onChange={(value) => setAttributes({ [getAttrKey('siteNavigationLinks', attributes, manifest)]: value })}
+					addDefaultItem={{
+						text: '',
+						url: '',
+						newTab: false,
+					}}
+				>
+					{(item) => {
+						const { text, url, newTab, updateData } = item;
+
+						return (
+							<RepeaterItem
+								icon={text?.length < 1 && icons.solidCircleGradient}
+								label={text?.length > 0 ? text : __('New link', '%g_textdomain%')}
+								subtitle={truncate(url?.replace(window.location.origin, ''), 30)}
+							>
+								<LinkInput
+									icon={url?.includes('#')}
+									url={url}
+									onChange={({ url }) => updateData({ url: url })}
+									fetchSuggestions={wpSearchRoute}
+								/>
+
+								<Toggle
+									icon={icons.newTab}
+									label={__('Open in new tab', '%g_textdomain%')}
+									checked={newTab}
+									onChange={(value) => updateData({ newTab: value })}
+								/>
+							</RepeaterItem>
+						);
+					}}
+				</Repeater>
+			</BaseControl>
+		</>
+	);
+};

package/blocks/init/src/Blocks/custom/site-navigation/manifest.json

@@ -0,0 +1,77 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
+	"blockName": "site-navigation",
+	"title": "Site navigation",
+	"description": "Add top-level navigation links to your website.",
+	"category": "eightshift",
+	"icon": {
+		"src": "es-navbar"
+	},
+	"keywords": [
+		"site",
+		"navigation",
+		"navbar"
+	],
+	"example": {
+		"attributes": {
+			"siteNavigationLogoUrl": "https://loremflickr.com/200/150"
+		}
+	},
+	"attributes": {
+		"siteNavigationLinks": {
+			"type": "array",
+			"default": []
+		},
+		"siteNavigationLogoUrl": {
+			"type": "string"
+		},
+		"siteNavigationLogoId": {
+			"type": "string"
+		},
+		"wrapperUse": {
+			"type": "boolean",
+			"default": false
+		},
+		"wrapperNoControls": {
+			"type": "boolean",
+			"default": true
+		}
+	},
+	"tailwind": {
+		"base": {
+			"twClasses": "flex items-center justify-between gap-4 max-w-screen-md mx-auto h-full ~sm/md:~px-8/20",
+			"twClassesEditor": "flex items-center justify-between gap-4 p-1"
+		},
+		"parts": {
+			"wrapper": {
+				"twClasses": "bg-white border-b border-b-gray-100 ~sm/md:~h-16/20"
+			},
+			"logo": {
+				"twClasses": "~sm/md:~w-20/28",
+				"twClassesEditor": "max-w-32"
+			},
+			"link": {
+				"twClasses": "text-base text-gray-700 hover:underline underline-offset-2 decoration-red-500 decoration-2",
+				"twClassesEditor": "text-base"
+			},
+			"drawerLink": {
+				"twClasses": "text-lg sm:text-base text-gray-700 hover:underline underline-offset-2 decoration-red-500 decoration-2 block py-4 sm:py-2"
+			},
+			"linkContainer": {
+				"twClasses": "hidden sm:flex items-center gap-6 pr-2"
+			},
+			"button": {
+				"twClasses": "size-9 flex items-center justify-center rounded-md border border-gray-500 hover:bg-gray-500 focus:outline-none focus-visible:ring focus-visible:ring-navy-500/30 text-gray-600 hover:text-white transition"
+			},
+			"modalWrapper": {
+				"twClasses": "hidden open:block group"
+			},
+			"modalBackdrop": {
+				"twClasses": "fixed inset-0 wp-admin-bar-offset bg-black/50 z-30 duration-300 group-aria-hidden:animate-out group-aria-hidden:fade-out animate-in fade-in-0"
+			},
+			"modalContent": {
+				"twClasses": "bg-white rounded-lg ~sm/md:~m-2/6 sm:w-80 p-6 sm:p-4 sm:pl-6 space-y-3 sm:ml-auto shadow-md animate-in slide-in-from-top-4 group-aria-hidden:animate-out group-aria-hidden:slide-out-to-top-4"
+			}
+		}
+	}
+}

package/blocks/init/src/Blocks/custom/site-navigation/site-navigation-block.js

@@ -0,0 +1,13 @@
+import { SiteNavigationEditor } from './components/site-navigation-editor';
+import { SiteNavigationOptions } from './components/site-navigation-options';
+import { GutenbergBlock } from '@eightshift/frontend-libs-tailwind/scripts';
+
+export const SiteNavigation = (props) => {
+	return (
+		<GutenbergBlock
+			{...props}
+			options={SiteNavigationOptions}
+			editor={SiteNavigationEditor}
+		/>
+	);
+};

package/blocks/init/src/Blocks/custom/site-navigation/site-navigation.php

@@ -0,0 +1,99 @@
+<?php
+
+/**
+ * Site navigation block template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+$blockJsClass = $attributes['blockJsClass'] ?? '';
+
+$siteNavigationLinks = Helpers::checkAttr('siteNavigationLinks', $attributes, $manifest) ?? [];
+$siteNavigationLogoUrl = Helpers::checkAttr('siteNavigationLogoUrl', $attributes, $manifest);
+$siteNavigationLogoId = Helpers::checkAttr('siteNavigationLogoId', $attributes, $manifest);
+
+$logoAlt = get_post_meta($siteNavigationLogoId, '_wp_attachment_image_alt', true) ?? '';
+
+$drawerId = 'navbar-mobile-flyout';
+?>
+
+<nav class="<?php echo esc_attr(Helpers::getTwPart('wrapper', $manifest)); ?>">
+	<div class="<?php echo esc_attr(Helpers::getTwClasses($attributes, $manifest)); ?>">
+		<a href="<?php echo esc_url(get_home_url()); ?>">
+			<img
+				src="<?php echo esc_attr($siteNavigationLogoUrl); ?>"
+				alt="<?php echo esc_attr($logoAlt); ?>"
+				class="<?php echo esc_attr(Helpers::getTwPart('logo', $manifest)); ?>"
+			>
+		</a>
+
+		<div class="<?php echo esc_attr(Helpers::getTwPart('linkContainer', $manifest)); ?>">
+			<?php
+			foreach ($siteNavigationLinks as $navLink) {
+				$url = $navLink['url'] ?? '';
+				$text = $navLink['text'] ?? '';
+
+				if (empty($url) || empty($text)) {
+					continue;
+				}
+				?>
+				<a
+					href="<?php echo esc_attr($url); ?>"
+					class="<?php echo esc_attr(Helpers::getTwPart('link', $manifest)); ?>"
+					<?php if ($navLink['newTab'] ?? false) { ?>
+						target="_blank"
+						rel="noopener noreferrer"
+					<?php } ?>
+				>
+					<?php echo wp_kses_post($text); ?>
+				</a>
+			<?php } ?>
+		</div>
+
+		<button class="<?php echo esc_attr(Helpers::getTwPart('button', $manifest, 'sm:hidden')); ?>" data-micromodal-trigger="<?php echo esc_attr($drawerId); ?>">
+			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+			</svg>
+		</button>
+	</div>
+</nav>
+
+
+<div id="<?php echo esc_attr($drawerId); ?>" aria-hidden="true" class="<?php echo esc_attr(Helpers::getTwPart('modalWrapper', $manifest)); ?>">
+	<div tabindex="-1" class="<?php echo esc_attr(Helpers::getTwPart('modalBackdrop', $manifest)); ?>" data-micromodal-close>
+		<div class="<?php echo esc_attr(Helpers::getTwPart('modalContent', $manifest)); ?>" role="dialog" aria-modal="true" aria-label="<?php echo esc_html__('Main menu', '%g_textdomain%'); ?>-title">
+			<button class="<?php echo esc_attr(Helpers::getTwPart('button', $manifest, 'ml-auto')); ?>" aria-label="Close menu" data-micromodal-close>
+				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+				</svg>
+			</button>
+
+			<div id="<?php echo esc_attr($drawerId); ?>-content">
+				<?php
+				foreach ($siteNavigationLinks as $navLink) {
+					$url = $navLink['url'] ?? '';
+					$text = $navLink['text'] ?? '';
+
+					if (empty($url) || empty($text)) {
+						continue;
+					}
+					?>
+					<a
+						href="<?php echo esc_attr($url); ?>"
+						class="<?php echo esc_attr(Helpers::getTwPart('drawerLink', $manifest)); ?>"
+						<?php if ($navLink['newTab'] ?? false) { ?>
+							target="_blank"
+							rel="noopener noreferrer"
+						<?php } ?>
+					>
+						<?php echo wp_kses_post($text); ?>
+					</a>
+				<?php } ?>
+			</div>
+		</div>
+	</div>
+</div>

package/blocks/init/src/Blocks/custom/table-of-contents/assets/index.js

@@ -0,0 +1,58 @@
+import domReady from '@wordpress/dom-ready';
+
+domReady(async () => {
+	const tocBlocks = document.querySelectorAll('.js-block-table-of-contents');
+
+	if (tocBlocks?.length < 1) {
+		return;
+	}
+
+	tocBlocks.forEach((tocBlock) => {
+		const levelsToUse = tocBlock?.dataset?.levels ?? 'h1,h2,h3,h4,h5,h6';
+
+		const headings = document.querySelectorAll(`.main-content :where(${levelsToUse})`);
+
+		headings.forEach((heading) => {
+			const entry = document.createElement('button');
+			entry.className = 'block py-0.5 focus:outline-none group';
+
+			const itemClassName =
+				'transition text-sm rounded group-hover:bg-navy-100 group-hover:ring-4 group-hover:ring-navy-100 group-hover:text-navy-950 group-focus-visible:bg-navy-950 group-focus-visible:ring-4 group-focus-visible:ring-navy-950 group-focus-visible:text-navy-50';
+
+			let preText = '';
+			const dash = '&ndash;';
+
+			const dashClassName = 'text-gray-300 mr-1.5 tracking-tighter';
+
+			switch (heading.tagName.toLowerCase()) {
+				case 'h2':
+					preText = `<span class="${dashClassName}">${dash}</span>`;
+					break;
+				case 'h3':
+					preText = `<span class="${dashClassName}">${dash.repeat(2)}</span>`;
+					break;
+				case 'h4':
+					preText = `<span class="${dashClassName}">${dash.repeat(3)}</span>`;
+					break;
+				case 'h5':
+					preText = `<span class="${dashClassName}">${dash.repeat(4)}</span>`;
+					break;
+				case 'h6':
+					preText = `<span class="${dashClassName}">${dash.repeat(5)}</span>`;
+					break;
+			}
+
+			entry.innerHTML = `${preText}<span class="${itemClassName}${heading.tagName.toLowerCase() !== 'h1' ? 'px-0.5' : ''}">${heading.innerText}</span>`;
+
+			entry.addEventListener('click', () => {
+				heading.scrollIntoView({
+					behavior: 'smooth',
+					block: 'start',
+					inline: 'start',
+				});
+			});
+
+			tocBlock.appendChild(entry);
+		});
+	});
+});

package/blocks/init/src/Blocks/custom/table-of-contents/components/table-of-contents-editor.js

@@ -0,0 +1,38 @@
+import { __, sprintf } from '@wordpress/i18n';
+import { RichText } from '@wordpress/block-editor';
+import { checkAttr, getTwPart } from '@eightshift/frontend-libs-tailwind/scripts';
+import { clsx } from '@eightshift/ui-components/utilities';
+import manifest from '../manifest.json';
+
+export const TableOfContentsEditor = ({ attributes, setAttributes }) => {
+	const tableOfContentsDescription = checkAttr('tableOfContentsDescription', attributes, manifest);
+	const tableOfContentsHeadingLevels = checkAttr('tableOfContentsHeadingLevels', attributes, manifest);
+
+	return (
+		<div className={getTwPart('container', manifest)}>
+			<RichText
+				placeholder={manifest.attributes.tableOfContentsDescription.default}
+				value={tableOfContentsDescription}
+				onChange={(value) => setAttributes({ [getAttrKey('tableOfContentsDescription', attributes, manifest)]: value })}
+				allowedFormats={[]}
+				className={getTwPart('description', manifest)}
+			/>
+
+			{Object.entries(tableOfContentsHeadingLevels).map(([tag, enabled = false]) => (
+				<DemoTocItem
+					level={parseInt(tag.replace('h', ''))}
+					disabled={!enabled}
+				/>
+			))}
+		</div>
+	);
+};
+
+const DemoTocItem = ({ level, disabled }) => (
+	<div class={clsx('group block select-none py-0.5 focus:outline-none', disabled && 'pointer-events-none opacity-25')}>
+		{level > 1 && <span class='mr-1.5 tracking-tighter text-gray-300'>{'–'.repeat(level - 1)}</span>}
+		<span class='group-focus-visible:text-navy-50px-0.5 rounded text-sm transition group-hover:bg-navy-100 group-hover:text-navy-950 group-hover:ring-4 group-hover:ring-navy-100 group-focus-visible:bg-navy-950 group-focus-visible:ring-4 group-focus-visible:ring-navy-950'>
+			{sprintf(__('Heading %d', '%g_textdomain%'), level)}
+		</span>
+	</div>
+);