@eightshift/frontend-libs-tailwind 1.4.4 → 1.4.6

package/CHANGELOG.md

@@ -6,6 +6,23 @@ 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
+
+- `BlockInserter` is now only visible when the block it's assigned to is selected. This behavior can be changed by setting `alwaysVisible`.
+
+### Fixed
+
+- Image responsive breakpoints render order in the frontend.
+
 ## [1.4.4]
 
 ### Added
@@ -142,6 +159,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.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
 [1.4.2]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.1...1.4.2

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

@@ -22,10 +22,10 @@ if (!$imageUse || empty($imageData['_default']['url'])) {
 
 $imageAlt = get_post_meta($imageData['_default']['id'], '_wp_attachment_image_alt', true) ?? '';
 
-$isMobileFirst = $imageData['_desktopFirst'] ?? false;
+$isDesktopFirst = $imageData['_desktopFirst'] ?? false;
 
 $breakpointData = Helpers::getSettingsGlobalVariablesBreakpoints();
-$breakpoints = Helpers::getTwBreakpoints($isMobileFirst);
+$breakpoints = Helpers::getTwBreakpoints();
 ?>
 
 <picture
@@ -45,12 +45,12 @@ $breakpoints = Helpers::getTwBreakpoints($isMobileFirst);
 			continue;
 		}
 
-		$breakpointWidth = $breakpointData[str_replace('max-', '', $breakpoint)];
+		$breakpointWidth = $breakpointData[$breakpoint];
 
-		$widthMode = $isMobileFirst ? 'min-width' : 'max-width';
+		$widthMode = $isDesktopFirst ? 'max-width' : 'min-width';
 
 		// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
-		echo '<source srcset="' . esc_url($value) . '" media="(' . $widthMode . ': ' . $breakpointWidth . 'rem)" />';
+		echo '<source srcset="' . esc_url($value) . '" media="(' . $widthMode . ': ' . $breakpointWidth . 'em)" />';
 		?>
 	<?php } ?>
 
@@ -60,3 +60,4 @@ $breakpoints = Helpers::getTwBreakpoints($isMobileFirst);
 		class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass['image'] ?? $additionalClass)); ?>"
 	/>
 </picture>
+

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/frontend-libs-tailwind",
-	"version": "1.4.4",
+	"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,

package/scripts/components/block-inserter.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { __, sprintf } from '@wordpress/i18n';
 import { Inserter } from '@wordpress/block-editor';
+import { useSuspenseSelect } from '@wordpress/data';
 import { Button } from '@eightshift/ui-components';
 import { icons } from '@eightshift/ui-components/icons';
 import { clsx } from '@eightshift/ui-components/utilities';
@@ -15,6 +16,7 @@ import { clsx } from '@eightshift/ui-components/utilities';
  * @param {boolean} [props.small] - If `true`, the button's size is reduced, perfect for added visual separation in hierarchical InnerBlocks.
  * @param {string} [props.className] - Additional classes to add to the control base.
  * @param {boolean} [props.prioritizePatterns] - Whether to show patterns before blocks in the inserter.
+ * @param {boolean} [props.alwaysVisible=false] - If `true`, the inserter is always visible, regardless of whether the block is selected.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The BlockInserter component.
@@ -25,12 +27,26 @@ import { clsx } from '@eightshift/ui-components/utilities';
  * @preserve
  */
 export const BlockInserter = (props) => {
-	const { clientId, label, small = false, className, prioritizePatterns = false, hidden } = props;
+	const {
+		clientId,
+		label,
+		small = false,
+		className,
+		prioritizePatterns = false,
+		alwaysVisible = false,
+		hidden,
+	} = props;
+
+	const currentBlockClientId = useSuspenseSelect((select) => select('core/block-editor')?.getSelectedBlockClientId());
 
 	if (hidden) {
 		return null;
 	}
 
+	if (!alwaysVisible && currentBlockClientId !== clientId) {
+		return null;
+	}
+
 	return (
 		<Inserter
 			rootClientId={clientId}

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.