diff --git a/CHANGELOG.md b/CHANGELOG.md index 05c2710..0bf4c37 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index c3a828a..ccbb296 100644 --- a/package.json +++ b/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, diff --git a/scripts/editor/fetch.js b/scripts/editor/fetch.js index 942ecce..907f9f4 100644 --- a/scripts/editor/fetch.js +++ b/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 + * 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); + }; +} diff --git a/webpack/base.mjs b/webpack/base.mjs index 1ff4415..f6c5290 100644 --- a/webpack/base.mjs +++ b/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.