Merge pull request #64 from infinum/release/1.4.6

1.4.6

CHANGELOG.md

@@ -6,6 +6,13 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 
 ---
 
+## [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 +159,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
+[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.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/frontend-libs-tailwind",
-	"version": "1.4.5",
+	"version": "1.4.6",
 	"description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
 	"author": {
 		"name": "Eightshift team",
@@ -34,31 +34,31 @@
 	"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",
+		"@eightshift/ui-components": "^1.8.0",
+		"@stylistic/eslint-plugin-js": "^2.11.0",
 		"@stylistic/stylelint-plugin": "^3.1.1",
-		"@swc/core": "^1.8.0",
-		"@wordpress/api-fetch": "^7.11.0",
-		"@wordpress/block-editor": "^14.6.0",
+		"@swc/core": "^1.9.3",
+		"@wordpress/api-fetch": "^7.13.0",
+		"@wordpress/block-editor": "^14.8.0",
 		"@wordpress/dependency-extraction-webpack-plugin": "^5.9.0",
-		"@wordpress/dom-ready": "^4.11.0",
-		"@wordpress/server-side-render": "^5.11.0",
+		"@wordpress/dom-ready": "^4.13.0",
+		"@wordpress/server-side-render": "^5.13.0",
 		"browserslist": "^4.24.2",
 		"css-loader": "^7.1.2",
 		"css-minimizer-webpack-plugin": "^7.0.0",
-		"eslint": "^9.14.0",
+		"eslint": "^9.15.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",
+		"husky": "^9.1.7",
+		"lightningcss": "^1.28.2",
 		"mini-css-extract-plugin": "^2.9.2",
-		"postcss": "^8.4.47",
+		"postcss": "^8.4.49",
 		"postcss-loader": "^8.1.1",
-		"prettier": "^3.3.3",
-		"prettier-plugin-tailwindcss": "^0.6.8",
+		"prettier": "^3.4.1",
+		"prettier-plugin-tailwindcss": "^0.6.9",
 		"sonner": "^1.7.0",
-		"stylelint": "^16.10.0",
+		"stylelint": "^16.11.0",
 		"stylelint-config-standard": "^36.0.1",
 		"swc-loader": "^0.2.6",
 		"terser-webpack-plugin": "^5.3.10",
@@ -68,13 +68,13 @@
 		"webpack-merge": "^6.0.1"
 	},
 	"devDependencies": {
-		"embla-carousel": "^8.3.1",
-		"fluid-tailwind": "^1.0.3",
+		"embla-carousel": "^8.5.1",
+		"fluid-tailwind": "^1.0.4",
 		"lint-staged": "^15.2.10",
 		"micromodal": "^0.4.10",
 		"ol": "^10.2.1",
 		"ol-mapbox-style": "^12.3.5",
-		"tailwindcss": "^3.4.14",
+		"tailwindcss": "^3.4.15",
 		"tailwindcss-animate": "^1.0.7"
 	},
 	"sideEffects": false,

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

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.