@eightshift/frontend-libs-tailwind 1.4.5 → 1.4.7

package/CHANGELOG.md

@@ -6,6 +6,23 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 
 ---
 
+## [1.4.7]
+
+### Changed
+- Fixed Image component "image" part tailwind class output if not set.
+- Fix Image component responsive output Co-authored-by: goran.alkovic@infinum.com
+- Add "Auto" width to wrapperContent and set is as defaults
+- Add a buttonType attribute to Button component
+- Implement a11y for Icon component either by setting aria-hidden to true (default) or using the existing iconName label from manifest options key
+- Updated dependencies.
+
+## [1.4.6]
+
+### Changed
+- Tweaked webpack config to properly include font files from `@eightshfit` packages from `node_modules`.
+- Added a new `buildWpRestUrl` helper for easily fetching WP REST URLs. (Similar to `fetchFromWpRest`, but allows you control over how you fetch).
+- Updated dependencies.
+
 ## [1.4.5]
 
 ### Changed
@@ -152,6 +169,8 @@ 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
+[1.4.7]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.6...1.4.7
+[1.4.6]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.5...1.4.6
 [1.4.5]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.4...1.4.5
 [1.4.4]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.3...1.4.4
 [1.4.3]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.2...1.4.3

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

@@ -19,6 +19,7 @@ if (!$buttonUse) {
 $additionalClass = $attributes['additionalClass'] ?? '';
 $additionalAttributes = $attributes['additionalAttributes'] ?? [];
 $buttonId = Helpers::checkAttr('buttonId', $attributes, $manifest);
+$buttonType = Helpers::checkAttr('buttonType', $attributes, $manifest);
 
 $buttonUrl = Helpers::checkAttr('buttonUrl', $attributes, $manifest);
 $buttonIsNewTab = Helpers::checkAttr('buttonIsNewTab', $attributes, $manifest);
@@ -59,6 +60,10 @@ if (!empty($buttonAriaLabel)) {
 $buttonAttrs['class'] = Helpers::tailwindClasses('base', $attributes, $manifest, 'button', $additionalClass);
 
 $buttonTag = !empty($buttonUrl) ? 'a' : 'button';
+
+if (empty($buttonUrl) && !empty($buttonType)) {
+	$buttonAttrs['type'] = $buttonType;
+}
 ?>
 
 <<?php echo $buttonTag; // phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped ?>

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

@@ -20,6 +20,9 @@
 		"buttonId": {
 			"type": "string"
 		},
+		"buttonType": {
+			"type": "string"
+		},
 		"buttonColor": {
 			"type": "string",
 			"default": "navy-500"

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

@@ -19,6 +19,7 @@ if (!$iconUse) {
 $additionalClass = $attributes['additionalClass'] ?? '';
 
 $iconName = Helpers::checkAttr('iconName', $attributes, $manifest);
+$iconAriaHidden = Helpers::checkAttr('iconAriaHidden', $attributes, $manifest);
 
 if (!isset($manifest['icons'][$iconName])) {
 	return;
@@ -29,7 +30,23 @@ $icon = $manifest['icons'][$iconName];
 $className = Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass);
 
 if (!empty($className)) {
-	$icon = str_replace('<svg ', '<svg class="' . htmlspecialchars($className) . '" ', $icon);
+	$icon = str_replace('<svg ', '<svg class="' . esc_attr($className) . '" ', $icon);
+}
+
+if ($iconAriaHidden) {
+	$icon = str_replace('<svg ', '<svg aria-hidden="true" ', $icon);
+} else {
+	$iconTitle = '';
+	$iconOption = array_filter($manifest['options']['iconName'], fn($option) => $option['value'] === $iconName);
+
+	if (!empty($iconOption)) {
+		$iconTitle = reset($iconOption)['label'];
+	}
+
+	if (!empty($iconTitle)) {
+		$titleTag = '<title>' . esc_html($iconTitle) . '</title>';
+		$icon = str_replace('</svg>', $titleTag . '</svg>', $icon);
+	}
 }
 
 // phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped

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

@@ -21,6 +21,10 @@
 		"iconUse": {
 			"type": "boolean",
 			"default": true
+		},
+		"iconAriaHidden": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"options": {

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

@@ -25,7 +25,11 @@ $imageAlt = get_post_meta($imageData['_default']['id'], '_wp_attachment_image_al
 $isDesktopFirst = $imageData['_desktopFirst'] ?? false;
 
 $breakpointData = Helpers::getSettingsGlobalVariablesBreakpoints();
-$breakpoints = Helpers::getTwBreakpoints();
+$breakpoints = Helpers::getTwBreakpoints($isDesktopFirst);
+
+if (!$isDesktopFirst) {
+	$breakpoints = array_reverse($breakpoints);
+}
 ?>
 
 <picture
@@ -33,7 +37,8 @@ $breakpoints = Helpers::getTwBreakpoints();
 		class="<?php echo esc_attr($additionalClass['picture']); ?>"
 	<?php } ?>
 >
-	<?php foreach ($breakpoints as $breakpoint) { ?>
+	<?php
+	foreach ($breakpoints as $breakpoint) { ?>
 		<?php
 		if (!isset($imageData[$breakpoint])) {
 			continue;
@@ -45,7 +50,7 @@ $breakpoints = Helpers::getTwBreakpoints();
 			continue;
 		}
 
-		$breakpointWidth = $breakpointData[$breakpoint];
+		$breakpointWidth = $breakpointData[str_replace('max-', '', $breakpoint)];
 
 		$widthMode = $isDesktopFirst ? 'max-width' : 'min-width';
 
@@ -57,7 +62,7 @@ $breakpoints = Helpers::getTwBreakpoints();
 	<img
 		src="<?php echo esc_url($imageData['_default']['url'] ?? ''); ?>"
 		alt="<?php echo esc_attr($imageAlt); ?>"
-		class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass['image'] ?? $additionalClass)); ?>"
+		class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass['image'] ?? '')); ?>"
 	/>
 </picture>
 

package/blocks/init/src/Blocks/wrapper/manifest.json

@@ -90,7 +90,7 @@
 		"wrapperContentWidth": {
 			"type": "object",
 			"default": {
-				"_default": "full",
+				"_default": "auto",
 				"_desktopFirst": true
 			}
 		},
@@ -289,6 +289,11 @@
 			}
 		],
 		"wrapperContentWidth": [
+			{
+				"label": "Auto",
+				"value": "auto",
+				"separator": "below"
+			},
 			{
 				"label": "Full",
 				"value": "full",
@@ -439,6 +444,7 @@
 			"wrapperContentWidth": {
 				"responsive": true,
 				"twClasses": {
+					"auto": "w-auto",
 					"full": "w-full",
 					"half": "w-1/2",
 					"one-third": "w-1/3",

package/package.json

@@ -1,91 +1,92 @@
 {
-  "name": "@eightshift/frontend-libs-tailwind",
-  "version": "1.4.5",
-  "description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
-  "author": {
-    "name": "Eightshift team",
-    "email": "team@eightshift.com",
-    "url": "https://eightshift.com/"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/infinum/eightshift-frontend-libs-tailwind.git"
-  },
-  "keywords": [
-    "frontend",
-    "css",
-    "mixin",
-    "js",
-    "utility",
-    "module",
-    "WordPress",
-    "tailwind",
-    "TailwindCSS"
-  ],
-  "bugs": {
-    "url": "https://github.com/infinum/eightshift-frontend-libs-tailwind/issues"
-  },
-  "homepage": "https://github.com/infinum/eightshift-frontend-libs-tailwind#readme",
-  "license": "MIT",
-  "dependencies": {
-    "@eightshift/ui-components": "^1.7.0",
-    "@stylistic/eslint-plugin-js": "^2.10.1",
-    "@stylistic/stylelint-plugin": "^3.1.1",
-    "@swc/core": "^1.8.0",
-    "@wordpress/api-fetch": "^7.11.0",
-    "@wordpress/block-editor": "^14.6.0",
-    "@wordpress/dependency-extraction-webpack-plugin": "^5.9.0",
-    "@wordpress/dom-ready": "^4.11.0",
-    "@wordpress/server-side-render": "^5.11.0",
-    "browserslist": "^4.24.2",
-    "css-loader": "^7.1.2",
-    "css-minimizer-webpack-plugin": "^7.0.0",
-    "eslint": "^9.14.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "globals": "^15.12.0",
-    "husky": "^9.1.6",
-    "lightningcss": "^1.28.1",
-    "mini-css-extract-plugin": "^2.9.2",
-    "postcss": "^8.4.47",
-    "postcss-loader": "^8.1.1",
-    "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.8",
-    "sonner": "^1.7.0",
-    "stylelint": "^16.10.0",
-    "stylelint-config-standard": "^36.0.1",
-    "swc-loader": "^0.2.6",
-    "terser-webpack-plugin": "^5.3.10",
-    "webpack": "^5.96.1",
-    "webpack-cli": "^5.1.4",
-    "webpack-manifest-plugin": "^5.0.0",
-    "webpack-merge": "^6.0.1"
-  },
-  "devDependencies": {
-    "embla-carousel": "^8.3.1",
-    "fluid-tailwind": "^1.0.3",
-    "lint-staged": "^15.2.10",
-    "micromodal": "^0.4.10",
-    "ol": "^10.2.1",
-    "ol-mapbox-style": "^12.3.5",
-    "tailwindcss": "^3.4.14",
-    "tailwindcss-animate": "^1.0.7"
-  },
-  "sideEffects": false,
-  "lint-staged": {
-    "*.css": [
-      "npm run lintStyle"
-    ],
-    "*.js": [
-      "npm run lintJs"
-    ],
-    "*.php": [
-      "composer test"
-    ]
-  },
-  "scripts": {
-    "lintStyle": "stylelint **/*.css",
-    "lintJs": "npx eslint",
-    "lint": "npm run lintJs && npm run lintStyle"
-  }
-}
+	"name": "@eightshift/frontend-libs-tailwind",
+	"version": "1.4.7",
+	"description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
+	"author": {
+		"name": "Eightshift team",
+		"email": "team@eightshift.com",
+		"url": "https://eightshift.com/"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/infinum/eightshift-frontend-libs-tailwind.git"
+	},
+	"keywords": [
+		"frontend",
+		"css",
+		"mixin",
+		"js",
+		"utility",
+		"module",
+		"WordPress",
+		"tailwind",
+		"TailwindCSS"
+	],
+	"bugs": {
+		"url": "https://github.com/infinum/eightshift-frontend-libs-tailwind/issues"
+	},
+	"scripts": {
+		"lintStyle": "stylelint **/*.css",
+		"lintJs": "npx eslint",
+		"lint": "npm run lintJs && npm run lintStyle",
+		"prepare": "husky"
+	},
+	"homepage": "https://github.com/infinum/eightshift-frontend-libs-tailwind#readme",
+	"license": "MIT",
+	"dependencies": {
+		"@eightshift/ui-components": "^1.9.1",
+		"@stylistic/eslint-plugin-js": "^2.12.1",
+		"@stylistic/stylelint-plugin": "^3.1.1",
+		"@swc/core": "^1.10.1",
+		"@wordpress/api-fetch": "^7.14.0",
+		"@wordpress/block-editor": "^14.9.0",
+		"@wordpress/dependency-extraction-webpack-plugin": "^5.9.0",
+		"@wordpress/dom-ready": "^4.14.0",
+		"@wordpress/server-side-render": "^5.14.0",
+		"browserslist": "^4.24.3",
+		"css-loader": "^7.1.2",
+		"css-minimizer-webpack-plugin": "^7.0.0",
+		"eslint": "^9.17.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-prettier": "^5.2.1",
+		"globals": "^15.13.0",
+		"husky": "^9.1.7",
+		"lightningcss": "^1.28.2",
+		"mini-css-extract-plugin": "^2.9.2",
+		"postcss": "^8.4.49",
+		"postcss-loader": "^8.1.1",
+		"prettier": "^3.4.2",
+		"prettier-plugin-tailwindcss": "^0.6.9",
+		"sonner": "^1.7.1",
+		"stylelint": "^16.12.0",
+		"stylelint-config-standard": "^36.0.1",
+		"swc-loader": "^0.2.6",
+		"terser-webpack-plugin": "^5.3.11",
+		"webpack": "^5.97.1",
+		"webpack-cli": "^5.1.4",
+		"webpack-manifest-plugin": "^5.0.0",
+		"webpack-merge": "^6.0.1"
+	},
+	"devDependencies": {
+		"embla-carousel": "^8.5.1",
+		"fluid-tailwind": "^1.0.4",
+		"lint-staged": "^15.2.11",
+		"micromodal": "^0.4.10",
+		"ol": "^10.3.1",
+		"ol-mapbox-style": "^12.4.0",
+		"tailwindcss": "^3.4.17",
+		"tailwindcss-animate": "^1.0.7"
+	},
+	"sideEffects": false,
+	"lint-staged": {
+		"*.css": [
+			"npm run lintStyle"
+		],
+		"*.js": [
+			"npm run lintJs"
+		],
+		"*.php": [
+			"composer test"
+		]
+	}
+}

package/scripts/editor/fetch.js

@@ -108,3 +108,74 @@ export const wpSearchRoute = fetchFromWpRest('search', {
 	searchColumns: 'post_title',
 	fields: 'id,title,type,subtype,url',
 });
+
+/**
+ * Returns a function that fetches data from WordPress REST API.
+ *
+ * @param {string} endpoint - Endpoint to fetch from.
+ * @param {Object} options - Additional options.
+ * @param {number} [options.perPage=30] - Number of items to fetch per page.
+ * @param {string} [options.routePrefix='wp/v2'] - Route prefix for the API.
+ * @param {string} [options.fields='id,title'] - A comma-separated list of field names to fetch from the API. Good to include as it makes the query faster and the output terser.
+ * @param {string} [options.noSearch=false] - If `true`, only the URL will be returned, without the search query support.
+ * @param {SearchColumnsConfig} [options.searchColumns] - Allows narrowing the search scope.
+ *
+ * @returns {Function} The `(searchText) => url: string` function, or URL as `string` if `noSearch` is set.
+ *
+ * @typedef {'post_title' | 'post_excerpt' | 'post_content'} SearchColumnsConfig
+ *
+ * @example
+ * const data = await fetch(buildWpRestUrl('pages'));
+ * const json = await data.json();
+ *
+ * console.log(json);
+ *
+ * @example
+ * <AsyncSelect
+ *  value={loremIpsum}
+ *  onChange={(value) => setAttributes({ [getAttrKey('loremIpsum', attributes, manifest)]: value })}
+ *  fetchUrl={buildWpRestUrl('pages')}
+ * />
+ *
+ */
+export function buildWpRestUrl(endpoint, options = {}) {
+	const {
+		perPage = 30,
+		routePrefix = 'wp/v2',
+		fields = 'id,title',
+		searchColumns,
+		noSearch,
+		...additionalParams
+	} = options;
+
+	let params = {
+		per_page: perPage,
+	};
+
+	if (fields?.length > 0) {
+		params['_fields'] = fields;
+	}
+
+	if (searchColumns?.length > 0) {
+		params.search_columns = Array.isArray(searchColumns) ? searchColumns.join(',') : searchColumns;
+	}
+
+	if (Object.keys(params).length > 0) {
+		params = {
+			...params,
+			...additionalParams,
+		};
+	}
+
+	if (noSearch) {
+		return addQueryArgs(`${routePrefix}/${endpoint}/`, params);
+	}
+
+	return (searchText) => {
+		if (searchText?.length > 0) {
+			params.search = searchText;
+		}
+
+		return addQueryArgs(`${routePrefix}/${endpoint}/`, params);
+	};
+}

package/webpack/base.mjs

@@ -34,7 +34,7 @@ export default (options) => {
 		);
 	}
 
-	// Output css from Js.
+	// Output CSS from JS.
 	if (!options.overrides.includes('miniCssExtractPlugin')) {
 		plugins.push(
 			new MiniCssExtractPlugin({
@@ -94,6 +94,7 @@ export default (options) => {
 			],
 		});
 
+		// Node modules - CSS.
 		module.rules.push({
 			test: /\.css$/,
 			include: /node_modules/,
@@ -103,6 +104,13 @@ export default (options) => {
 				},
 			],
 		});
+
+		// Node modules - Eightshift package fonts.
+		module.rules.push({
+			test: /\.(woff2|ttf|otf)$/i,
+			type: 'asset/resource',
+			include: /node_modules\/@eightshift/,
+		});
 	}
 
 	// Module for Images.