@eightshift/frontend-libs-tailwind 1.5.0 → 2.0.0

package/CHANGELOG.md

@@ -6,6 +6,15 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 
 ---
 
+## [2.0.0]
+
+### Removed
+- All legacy built-in blocks.
+
+### Changed
+- Updated WordPress dependency extraction webpack plugin - React 19 is now supported!
+- Updated dependencies.
+
 ## [1.5.0]
 
 ### Added
@@ -184,6 +193,7 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 - Initial release.
 
 [Unreleased]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/master...HEAD
+[2.0.0]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.5.0...2.0.0
 [1.5.0]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.8...1.5.0
 [1.4.8]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.7...1.4.8
 [1.4.7]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.6...1.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/frontend-libs-tailwind",
-	"version": "1.5.0",
+	"version": "2.0.0",
 	"description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
 	"author": {
 		"name": "Eightshift team",
@@ -37,12 +37,12 @@
 		"@eightshift/ui-components": "^3.0.0",
 		"@stylistic/eslint-plugin-js": "^4.2.0",
 		"@stylistic/stylelint-plugin": "^3.1.2",
-		"@swc/core": "^1.11.8",
-		"@wordpress/api-fetch": "^7.19.0",
-		"@wordpress/block-editor": "^14.14.0",
-		"@wordpress/dependency-extraction-webpack-plugin": "^5.9.0",
-		"@wordpress/dom-ready": "^4.19.0",
-		"@wordpress/server-side-render": "^5.19.0",
+		"@swc/core": "^1.11.11",
+		"@wordpress/api-fetch": "^7.20.0",
+		"@wordpress/block-editor": "^14.15.0",
+		"@wordpress/dependency-extraction-webpack-plugin": "^6.20.0",
+		"@wordpress/dom-ready": "^4.20.0",
+		"@wordpress/server-side-render": "^5.20.0",
 		"browserslist": "^4.24.4",
 		"css-loader": "^7.1.2",
 		"css-minimizer-webpack-plugin": "^7.0.2",
@@ -51,31 +51,24 @@
 		"eslint-plugin-prettier": "^5.2.3",
 		"globals": "^16.0.0",
 		"husky": "^9.1.7",
-		"lightningcss": "^1.29.2",
+		"lightningcss": "^1.29.3",
 		"mini-css-extract-plugin": "^2.9.2",
 		"postcss": "^8.5.3",
 		"postcss-loader": "^8.1.1",
 		"prettier": "^3.5.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"sonner": "^2.0.1",
-		"stylelint": "^16.15.0",
+		"stylelint": "^16.16.0",
 		"stylelint-config-standard": "^37.0.0",
 		"swc-loader": "^0.2.6",
 		"terser-webpack-plugin": "^5.3.14",
 		"webpack": "^5.98.0",
 		"webpack-cli": "^6.0.1",
-		"webpack-manifest-plugin": "^5.0.0",
+		"webpack-manifest-plugin": "^5.0.1",
 		"webpack-merge": "^6.0.1"
 	},
 	"devDependencies": {
-		"embla-carousel": "^8.5.2",
-		"fluid-tailwind": "^1.0.4",
-		"lint-staged": "^15.4.3",
-		"micromodal": "^0.4.10",
-		"ol": "^10.4.0",
-		"ol-mapbox-style": "^12.5.0",
-		"tailwindcss": "^4.0.12",
-		"tailwindcss-animate": "^1.0.7"
+		"lint-staged": "^15.5.0"
 	},
 	"sideEffects": false,
 	"lint-staged": {

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

@@ -1,10 +0,0 @@
-/**
- * Main entry point for styles, scripts, and other assets used in the WordPress admin.
- * Does not apply to the Block editor!
- */
-
-// Styles.
-import './styles/application-admin.css';
-
-// Scripts.
-import './scripts/application-admin';

package/blocks/init/assets/application.js

@@ -1,13 +0,0 @@
-/**
- * Main entry point for styles, scripts, and other assets used in the site frontend.
- * Don't load Block editor-related assets here!
- */
-
-// Styles.
-import './styles/application.css';
-
-// Scripts.
-import './scripts/application';
-
-// Images.
-import './images';

package/blocks/init/assets/images/index.js

@@ -1,5 +0,0 @@
-/**
- * Main entry point for project images.
- *
- * Used in the WordPress admin, Block editor, and frontend.
- */

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

@@ -1,7 +0,0 @@
-/**
- * Main entry point for scripts used in the WordPress admin.
- */
-
-import { dynamicImport } from '@eightshift/frontend-libs-tailwind/scripts/helpers';
-
-dynamicImport(require.context('./../../src/Blocks/components', true, /assets-admin\/index\.js$/));

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

@@ -1,3 +0,0 @@
-/**
- * Main entry point for scripts used in the site frontend.
- */

package/blocks/init/assets/scripts/theme-colors.js

@@ -1,39 +0,0 @@
-/**
- * Theme color definitions, used in the Tailwind configuration file and during registration.
- */
-
-import colors from 'tailwindcss/colors';
-
-export const themeColors = {
-	transparent: 'transparent',
-	current: 'currentColor',
-	black: colors.black,
-	white: colors.white,
-	gray: colors.stone,
-	navy: {
-		50: '#eef8ff',
-		100: '#dcf0ff',
-		200: '#b2e3ff',
-		300: '#6dceff',
-		400: '#20b5ff',
-		500: '#009cff',
-		600: '#007bdf',
-		700: '#0061b4',
-		800: '#005395',
-		900: '#00447a',
-		950: '#002c54',
-	},
-	red: {
-		50: '#fff0f2',
-		100: '#ffdde1',
-		200: '#ffc1c9',
-		300: '#ff95a3',
-		400: '#ff596f',
-		500: '#ff2643',
-		600: '#fc0626',
-		700: '#c5001a',
-		800: '#af051b',
-		900: '#900c1d',
-		950: '#50000b',
-	},
-};

package/blocks/init/assets/styles/application-admin.css

@@ -1,6 +0,0 @@
-/**
- * Main entry point for styles used in the WordPress admin.
- */
-
-@import '~@eightshift/ui-components/dist/assets/fonts.css';
-@import '~@eightshift/ui-components/dist/assets/style.css';

package/blocks/init/assets/styles/application.css

@@ -1,3 +0,0 @@
-/**
- * Main entry point for styles used in the site frontend.
- */

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

@@ -1,14 +0,0 @@
-/**
- * This is the main entry point for Block Editor blocks used for the `WordPress admin editor`.
- * This file registers styles and scripts.
- *
- * Usage: `WordPress admin editor`.
- */
-
-// Styles.
-import './styles/tailwind.css';
-import './styles/application-blocks-editor.css';
-import './styles/editor/editor-overrides.css';
-
-// Scripts.
-import './scripts/application-blocks-editor';

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

@@ -1,13 +0,0 @@
-/**
- * This is the main entry point for Block Editor blocks used for the `WordPress frontend screen`.
- * This file registers styles and scripts.
- *
- * Usage: `WordPress frontend screen`.
- */
-
-// Styles.
-import './styles/tailwind.css';
-import './styles/application-blocks-frontend.css';
-
-// Scripts.
-import './scripts/application-blocks-frontend';

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

@@ -1,9 +0,0 @@
-/**
- * This is the main entry point for Block Editor blocks used for the `WordPress frontend screen` and `WordPress admin editor`.
- * This file registers styles and scripts.
- *
- * Usage: `WordPress frontend screen` and `WordPress admin editor`.
- */
-
-// Styles.
-import './styles/application-blocks.css';

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;
-}