@eightshift/frontend-libs-tailwind 1.5.0 → 2.0.1

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

@@ -1,65 +0,0 @@
-/**
- * This is the main entry point for Block Editor blocks scripts used for the `WordPress admin editor`.
- * This file registers blocks dynamically using `registerBlocks` helper method.
- * File names must follow the naming convention to be able to run dynamically.
- *
- * `src/blocks/custom/block_name/manifest.json`.
- * `src/blocks/custom/block_name/block_name.js`.
- *
- * Usage: `WordPress admin editor`.
- */
-
-import domReady from '@wordpress/dom-ready';
-import { setDefaultBlockName } from '@wordpress/blocks';
-import { select } from '@wordpress/data';
-import { registerBlocks, registerVariations, STORE_NAME } from '@eightshift/frontend-libs-tailwind/scripts/editor';
-import { Wrapper } from '../../wrapper/wrapper';
-import WrapperManifest from '../../wrapper/manifest.json';
-import globalSettingsRaw from '../../manifest.json';
-import { themeColors } from '../../../../assets/scripts/theme-colors';
-import { getColorData } from '@eightshift/frontend-libs-tailwind/scripts/editor/colors';
-import { dynamicImport } from '@eightshift/frontend-libs-tailwind/scripts';
-
-const globalSettings = {
-	...globalSettingsRaw,
-	globalVariables: {
-		...globalSettingsRaw.globalVariables,
-		colors: getColorData(themeColors),
-	},
-};
-
-registerBlocks(
-	globalSettings,
-	Wrapper,
-	WrapperManifest,
-	require.context('./../../components', true, /manifest\.json$/),
-	require.context('./../../custom', true, /manifest\.json$/),
-	require.context('./../../custom', true, /-block.js$/),
-	require.context('./../../custom', true, /-hooks.js$/),
-	require.context('./../../custom', true, /-transforms.js$/),
-	require.context('./../../custom', true, /-deprecations.js$/),
-	require.context('./../../custom', true, /-overrides.js$/),
-);
-
-registerVariations(
-	globalSettings,
-	require.context('./../../variations', true, /manifest.json$/),
-	require.context('./../../custom', true, /manifest.json$/),
-	require.context('./../../variations', true, /overrides.json$/),
-);
-
-// Import styles.
-dynamicImport(require.context('./../../components', true, /styles.css$/));
-dynamicImport(require.context('./../../custom', true, /styles.css$/));
-dynamicImport(require.context('./../../wrapper', true, /styles.css$/));
-
-dynamicImport(require.context('./../../components', true, /styles-editor.css$/));
-dynamicImport(require.context('./../../custom', true, /styles-editor.css$/));
-dynamicImport(require.context('./../../wrapper', true, /styles-editor.css$/));
-
-// Change the default block to the custom paragraph.
-// If changing this block update the blocks filter method in Blocks.php.
-domReady(() => {
-	const namespace = select(STORE_NAME).getSettingsNamespace();
-	setDefaultBlockName(`${namespace}/paragraph`);
-});

package/blocks/init/src/Blocks/assets/scripts/application-blocks-frontend.js

@@ -1,24 +0,0 @@
-/**
- * This is the main entry point for Block Editor blocks scripts used for the `WordPress frontend screen`.
- * This file registers all blocks additional scripts dynamically using `dynamicImport` helper method.
- * File names must follow naming convention to be able run dynamically.
- *
- * `src/blocks/custom/block_name/assets/index.js`.
- *
- * Usage: `WordPress frontend screen`.
- */
-import { dynamicImport } from '@eightshift/frontend-libs-tailwind/scripts/helpers';
-
-// Find all blocks and require assets index.js inside it.
-dynamicImport(require.context('./../../components', true, /assets\/index\.js$/));
-dynamicImport(require.context('./../../custom', true, /assets\/index\.js$/));
-
-// Output all styles.
-dynamicImport(require.context('./../../components', true, /styles.css$/));
-dynamicImport(require.context('./../../custom', true, /styles.css$/));
-dynamicImport(require.context('./../../wrapper', true, /styles.css$/));
-
-// Output all frontend-only styles.
-dynamicImport(require.context('./../../components', true, /styles-frontend.css$/));
-dynamicImport(require.context('./../../custom', true, /styles-frontend.css$/));
-dynamicImport(require.context('./../../wrapper', true, /styles-frontend.css$/));

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

@@ -1,262 +0,0 @@
-import { useCallback } from 'react';
-import { __ } from '@wordpress/i18n';
-import { RichText } from '@wordpress/block-editor';
-import { Button } from '@eightshift/ui-components';
-import { icons } from '@eightshift/ui-components/icons';
-
-export const LinkSectionEditor = (props) => {
-	const { links, onChange, classNames } = props;
-
-	const defaultLink = {
-		text: '',
-		url: '',
-		newTab: false,
-	};
-
-	const defaultSection = {
-		header: '',
-		items: [defaultLink],
-	};
-
-	const addSection = useCallback(
-		(index = -1) => {
-			if (index < 0) {
-				onChange([...links, defaultSection]);
-
-				return;
-			}
-
-			const before = links.slice(0, index + 1);
-			const after = links.slice(index + 1);
-
-			onChange([...before, defaultSection, ...after]);
-		},
-		[links, onChange],
-	);
-
-	const addLink = useCallback(
-		(items, itemIndex, index = -1) => {
-			if (index < 0) {
-				updateItem(itemIndex, {
-					items: [defaultLink, ...items],
-				});
-
-				return;
-			}
-			const before = items.slice(0, index + 1);
-			const after = items.slice(index + 1);
-
-			updateItem(itemIndex, {
-				items: [...before, defaultLink, ...after],
-			});
-		},
-		[links, onChange],
-	);
-
-	const updateItem = useCallback((index, value) => {
-		const newValue = [...links];
-
-		newValue[index] = {
-			...newValue[index],
-			...value,
-		};
-
-		onChange(newValue);
-	});
-
-	const updateInnerItem = useCallback(
-		(index, innerIndex, value) => {
-			const newValue = [...links];
-
-			newValue[index].items[innerIndex] = {
-				...newValue[index].items[innerIndex],
-				...value,
-			};
-
-			onChange(newValue);
-		},
-		[links, onChange],
-	);
-
-	const jumpToEnd = useCallback((element) => {
-		if (!element) {
-			return;
-		}
-
-		const textNode = element.childNodes[0];
-
-		if (!textNode) {
-			return;
-		}
-
-		const selection = document.getSelection();
-		selection.removeAllRanges();
-
-		const range = document.createRange();
-		range.setStart(textNode, textNode?.length);
-		range.setEnd(textNode, textNode?.length);
-
-		selection.addRange(range);
-	});
-
-	const handleKeyDown = useCallback(
-		(event, index, i, text) => {
-			const { code, target } = event;
-
-			const { baseNode, baseOffset } = document.getSelection();
-
-			if (!baseNode || !target.contains(baseNode)) {
-				return;
-			}
-
-			if (baseOffset === text.length && code === 'Enter' && !(event.metaKey || event.ctrlKey)) {
-				event.preventDefault();
-				addLink(links[index].items, index, i);
-
-				setTimeout(() => {
-					target.nextElementSibling?.focus();
-				}, 25);
-			} else if (baseOffset === text.length && code === 'Enter' && (event.metaKey || event.ctrlKey)) {
-				event.preventDefault();
-				addSection(index);
-
-				setTimeout(() => {
-					target.parentElement.nextElementSibling?.querySelector('[contenteditable="true"]')?.focus();
-				}, 25);
-			} else if (code === 'Backspace' && text === '') {
-				event.preventDefault();
-
-				jumpToEnd(target.previousElementSibling);
-
-				updateItem(index, {
-					items: links[index].items.filter((_, j) => j !== i),
-				});
-			} else if (code === 'Delete' && links?.[index].items[i + 1]?.text?.length < 1) {
-				event.preventDefault();
-
-				updateItem(index, {
-					items: links[index].items.filter((_, j) => j !== i + 1),
-				});
-			}
-		},
-		[links, onChange],
-	);
-
-	// keyDown handling for section headers.
-	const handleSectionKeyDown = useCallback(
-		(event, index, items, header) => {
-			const { code, target } = event;
-
-			const { baseNode, baseOffset } = document.getSelection();
-
-			if (!target.contains(baseNode)) {
-				return;
-			}
-
-			if (baseOffset === header.length && code === 'Enter' && !(event.metaKey || event.ctrlKey)) {
-				event.preventDefault();
-
-				// Add a link to the first spot.
-				if (items.length > 1 || items?.[0]?.text !== '') {
-					addLink(links[index].items, index);
-				}
-
-				// Focus on that link.
-				setTimeout(() => {
-					target.nextElementSibling?.focus();
-				}, 25);
-			} else if (baseOffset === header.length && code === 'Enter' && (event.metaKey || event.ctrlKey)) {
-				event.preventDefault();
-
-				// Add a section.
-				addSection(index);
-
-				// Focus on next text input.
-				setTimeout(() => {
-					target.parentElement.nextElementSibling?.querySelector('[contenteditable="true"]')?.focus();
-				}, 25);
-			} else if (
-				code === 'Backspace' &&
-				header === '' &&
-				(items?.length < 1 || items?.every(({ text }) => text === ''))
-			) {
-				event.preventDefault();
-
-				// Jump to end of previous input.
-				jumpToEnd(target.parentElement.previousElementSibling?.querySelector('[contenteditable="true"]:last-of-type'));
-
-				// Remove current element.
-				setTimeout(() => {
-					onChange(links.filter((_, i) => i !== index));
-				}, 25);
-			}
-		},
-		[links, onChange],
-	);
-
-	return (
-		<>
-			{links.map(({ items, header }, index) => {
-				return (
-					<div className={classNames?.sectionContainer}>
-						<RichText
-							placeholder={__('Section', '%g_textdomain%')}
-							value={header}
-							onChange={(value) => updateItem(index, { header: value })}
-							allowedFormats={[]}
-							className={classNames?.sectionTitle}
-							onKeyDown={(event) => handleSectionKeyDown(event, index, items, header)}
-							withoutInteractiveFormatting
-							disableLineBreaks
-						/>
-
-						{items.map(({ text }, i) => {
-							return (
-								<RichText
-									placeholder={__('Item', '%g_textdomain%')}
-									value={text}
-									onChange={(value) => updateInnerItem(index, i, { text: value })}
-									allowedFormats={[]}
-									className={classNames?.link}
-									onKeyDown={(event) => handleKeyDown(event, index, i, text)}
-									withoutInteractiveFormatting
-									disableLineBreaks
-								/>
-							);
-						})}
-
-						<Button
-							size='small'
-							icon={icons.add}
-							tooltip={__('Add link', '%g_textdomain%')}
-							onPress={({ target }) => {
-								updateItem(index, {
-									items: [...links[index].items, defaultLink],
-								});
-
-								setTimeout(() => {
-									target?.previousElementSibling?.focus();
-								}, 20);
-							}}
-						/>
-					</div>
-				);
-			})}
-
-			<Button
-				onPress={({ target }) => {
-					addSection();
-
-					setTimeout(() => {
-						target?.previousElementSibling?.querySelector('[contenteditable="true"]')?.focus();
-					}, 20);
-				}}
-				icon={icons.add}
-				tooltip={__('Add a section', '%g_textdomain%')}
-				className='justify-self-start'
-			>
-				{__('Section', '%g_textdomain%')}
-			</Button>
-		</>
-	);
-};

package/blocks/init/src/Blocks/assets/scripts/shared.js

@@ -1,25 +0,0 @@
-import { getColorData } from '@eightshift/frontend-libs-tailwind/scripts';
-import { themeColors } from '../../../../assets/scripts/theme-colors';
-
-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}.`,
-		);
-	}
-
-	return colorData?.filter(({ slug }) => manifest?.options?.[key]?.includes(slug)) ?? [];
-};
-
-export const rotationClassName = {
-	'to-t': 'rotate-0',
-	'to-tr': 'rotate-45',
-	'to-r': 'rotate-90',
-	'to-br': 'rotate-135',
-	'to-b': 'rotate-180',
-	'to-bl': '-rotate-135',
-	'to-l': '-rotate-90',
-	'to-tl': '-rotate-45',
-};

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

@@ -1,15 +0,0 @@
-/**
- * This is the main entry point for Block Editor blocks styles used for the `WordPress admin editor`.
- * File names must follow naming convention to be able to run dynamically.
- *
- * `src/blocks/custom/block_name/block_name-editor.css`.
- *
- * Usage: `WordPress admin editor`.
- *
- */
-
-/* Eightshift UI components */
-@import '~@eightshift/ui-components/dist/assets/fonts.css';
-@import '~@eightshift/ui-components/dist/assets/wp-font-enhancements.css';
-@import '~@eightshift/ui-components/dist/assets/wp-ui-enhancements.css';
-@import '~@eightshift/ui-components/dist/assets/style.css';

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

@@ -1,9 +0,0 @@
-/**
- * This is the main entry point for Block Editor blocks styles used for the `WordPress frontend screen`.
- * File names must follow naming convention to be able to run dynamically.
- *
- * `src/blocks/custom/block_name/block_name-editor.css`.
- *
- * Usage: `WordPress frontend screen`.
- *
- */

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

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

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

@@ -1,15 +0,0 @@
-.editor-styles-wrapper .wp-block:not(.editor-post-title, .block-list-appender) {
-	@apply !max-w-full;
-}
-
-.editor-post-title {
-	@apply text-3xl max-w-screen-md;
-}
-
-.edit-post-visual-editor__post-title-wrapper {
-	@apply !m-0 !px-4 !py-6 bg-gray-50;
-}
-
-.editor-styles-wrapper.block-editor-writing-flow {
-	@apply p-0 font-sans;
-}

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

@@ -1,90 +0,0 @@
-/*
-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,30 +0,0 @@
-/* stylelint-disable at-rule-no-unknown */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer utilities {
-	.font-soft-0 {
-		font-variation-settings: 'SOFT' 0, 'WONK' 0;
-	}
-
-	.font-soft-25 {
-		font-variation-settings: 'SOFT' 25, 'WONK' 0;
-	}
-
-	.font-soft-50 {
-		font-variation-settings: 'SOFT' 50, 'WONK' 0;
-	}
-
-	.font-soft-100 {
-		font-variation-settings: 'SOFT' 100, 'WONK' 0;
-	}
-
-	.wp-admin-bar-offset {
-		@apply wp-logged-in-mobile:top-[46px] wp-logged-in:top-[32px];
-	}
-
-	.wp-admin-bar-pt {
-		@apply wp-logged-in-mobile:pt-[46px] wp-logged-in:pt-[32px];
-	}
-}

package/blocks/init/src/Blocks/components/admin-theme-options/admin-theme-options.php

@@ -1,20 +0,0 @@
-<?php
-
-/**
- * Theme options settings screen component template.
- *
- * @package %g_namespace%
- */
-
-use %g_namespace%\ThemeOptions\ThemeOptions;
-use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
-
-$manifest = Helpers::getManifestByDir(__DIR__);
-$patterns = wp_json_encode(ThemeOptions::getPatterns());
-?>
-
-<input type="hidden" id="es-pattern-data" value="<?php echo esc_attr($patterns); ?>">
-
-<div class="wrap" id="es-theme-options">
-	<?php echo esc_html__('Loading...', '%g_textdomain%'); ?>
-</div>

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

@@ -1,36 +0,0 @@
-import domReady from '@wordpress/dom-ready';
-import { __ } from '@wordpress/i18n';
-import { createRoot } from '@wordpress/element';
-import { ThemeOptionsPage } from '@eightshift/frontend-libs-tailwind/scripts';
-import { Parts } from './pages/parts';
-import { Tabs, TabList, Tab, TabPanel } from '@eightshift/ui-components';
-import { icons } from '@eightshift/ui-components/icons';
-
-domReady(() => {
-	const rootElement = document.getElementById('es-theme-options');
-
-	if (!rootElement) {
-		return;
-	}
-
-	const root = createRoot(rootElement);
-	const patterns = JSON.parse(document.getElementById('es-pattern-data')?.value ?? '[]');
-
-	root.render(
-		<ThemeOptionsPage>
-			<Tabs>
-				<TabList>
-					<Tab
-						icon={icons.wrench}
-						label={__('Parts', '%g_textdomain%')}
-					/>
-				</TabList>
-				<TabPanel>
-					<Parts patterns={patterns} />
-				</TabPanel>
-			</Tabs>
-		</ThemeOptionsPage>,
-	);
-});
-
-// https://developer.wordpress.org/news/2024/03/26/how-to-use-wordpress-react-components-for-plugin-pages/

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

@@ -1,56 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { Select, OptionsPanel, OptionsPanelSection, Spacer } from '@eightshift/ui-components';
-import { icons } from '@eightshift/ui-components/icons';
-import { useContext } from '@wordpress/element';
-import { EsThemeOptionsContext } from '@eightshift/frontend-libs-tailwind/scripts';
-
-export const Parts = ({ patterns }) => {
-	const { settings, updateSettings, isLoading } = useContext(EsThemeOptionsContext);
-
-	return (
-		<OptionsPanel>
-			<OptionsPanelSection>
-				<Select
-					label={__('Header', '%g_textdomain%')}
-					icon={icons.header}
-					value={settings?.header}
-					onChange={(value) => updateSettings({ header: value })}
-					options={patterns}
-					className='es-uic-w-48'
-					disabled={isLoading}
-					simpleValue
-					clearable
-					inline
-				/>
-
-				<Select
-					label={__('Footer', '%g_textdomain%')}
-					icon={icons.footer}
-					value={settings?.footer}
-					onChange={(value) => updateSettings({ footer: value })}
-					options={patterns}
-					className='es-uic-w-48'
-					disabled={isLoading}
-					simpleValue
-					clearable
-					inline
-				/>
-
-				<Spacer size='s' />
-
-				<Select
-					label={__('404 page', '%g_textdomain%')}
-					icon={icons.emptyCircle}
-					value={settings?.fourOhFour}
-					onChange={(value) => updateSettings({ fourOhFour: value })}
-					options={patterns}
-					className='es-uic-w-48'
-					disabled={isLoading}
-					simpleValue
-					clearable
-					inline
-				/>
-			</OptionsPanelSection>
-		</OptionsPanel>
-	);
-};

package/blocks/init/src/Blocks/components/admin-theme-options/manifest.json

@@ -1,5 +0,0 @@
-{
-	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
-	"componentName": "admin-theme-options",
-	"title": "Theme options"
-}