@eightshift/frontend-libs-tailwind 1.4.4 → 1.4.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/.husky/pre-commit CHANGED
File without changes
package/CHANGELOG.md CHANGED
@@ -6,6 +6,16 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
6
6
 
7
7
  ---
8
8
 
9
+ ## [1.4.5]
10
+
11
+ ### Changed
12
+
13
+ - `BlockInserter` is now only visible when the block it's assigned to is selected. This behavior can be changed by setting `alwaysVisible`.
14
+
15
+ ### Fixed
16
+
17
+ - Image responsive breakpoints render order in the frontend.
18
+
9
19
  ## [1.4.4]
10
20
 
11
21
  ### Added
@@ -142,6 +152,7 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
142
152
  - Initial release.
143
153
 
144
154
  [Unreleased]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/master...HEAD
155
+ [1.4.5]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.4...1.4.5
145
156
  [1.4.4]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.3...1.4.4
146
157
  [1.4.3]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.2...1.4.3
147
158
  [1.4.2]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.1...1.4.2
@@ -22,10 +22,10 @@ if (!$imageUse || empty($imageData['_default']['url'])) {
22
22
 
23
23
  $imageAlt = get_post_meta($imageData['_default']['id'], '_wp_attachment_image_alt', true) ?? '';
24
24
 
25
- $isMobileFirst = $imageData['_desktopFirst'] ?? false;
25
+ $isDesktopFirst = $imageData['_desktopFirst'] ?? false;
26
26
 
27
27
  $breakpointData = Helpers::getSettingsGlobalVariablesBreakpoints();
28
- $breakpoints = Helpers::getTwBreakpoints($isMobileFirst);
28
+ $breakpoints = Helpers::getTwBreakpoints();
29
29
  ?>
30
30
 
31
31
  <picture
@@ -45,12 +45,12 @@ $breakpoints = Helpers::getTwBreakpoints($isMobileFirst);
45
45
  continue;
46
46
  }
47
47
 
48
- $breakpointWidth = $breakpointData[str_replace('max-', '', $breakpoint)];
48
+ $breakpointWidth = $breakpointData[$breakpoint];
49
49
 
50
- $widthMode = $isMobileFirst ? 'min-width' : 'max-width';
50
+ $widthMode = $isDesktopFirst ? 'max-width' : 'min-width';
51
51
 
52
52
  // phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
53
- echo '<source srcset="' . esc_url($value) . '" media="(' . $widthMode . ': ' . $breakpointWidth . 'rem)" />';
53
+ echo '<source srcset="' . esc_url($value) . '" media="(' . $widthMode . ': ' . $breakpointWidth . 'em)" />';
54
54
  ?>
55
55
  <?php } ?>
56
56
 
@@ -60,3 +60,4 @@ $breakpoints = Helpers::getTwBreakpoints($isMobileFirst);
60
60
  class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass['image'] ?? $additionalClass)); ?>"
61
61
  />
62
62
  </picture>
63
+
package/bun.lockb CHANGED
File without changes
package/package.json CHANGED
@@ -1,92 +1,91 @@
1
1
  {
2
- "name": "@eightshift/frontend-libs-tailwind",
3
- "version": "1.4.4",
4
- "description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
5
- "author": {
6
- "name": "Eightshift team",
7
- "email": "team@eightshift.com",
8
- "url": "https://eightshift.com/"
9
- },
10
- "repository": {
11
- "type": "git",
12
- "url": "git+https://github.com/infinum/eightshift-frontend-libs-tailwind.git"
13
- },
14
- "keywords": [
15
- "frontend",
16
- "css",
17
- "mixin",
18
- "js",
19
- "utility",
20
- "module",
21
- "WordPress",
22
- "tailwind",
23
- "TailwindCSS"
24
- ],
25
- "bugs": {
26
- "url": "https://github.com/infinum/eightshift-frontend-libs-tailwind/issues"
27
- },
28
- "scripts": {
29
- "lintStyle": "stylelint **/*.css",
30
- "lintJs": "npx eslint",
31
- "lint": "npm run lintJs && npm run lintStyle",
32
- "prepare": "husky"
33
- },
34
- "homepage": "https://github.com/infinum/eightshift-frontend-libs-tailwind#readme",
35
- "license": "MIT",
36
- "dependencies": {
37
- "@eightshift/ui-components": "^1.7.0",
38
- "@stylistic/eslint-plugin-js": "^2.10.1",
39
- "@stylistic/stylelint-plugin": "^3.1.1",
40
- "@swc/core": "^1.8.0",
41
- "@wordpress/api-fetch": "^7.11.0",
42
- "@wordpress/block-editor": "^14.6.0",
43
- "@wordpress/dependency-extraction-webpack-plugin": "^5.9.0",
44
- "@wordpress/dom-ready": "^4.11.0",
45
- "@wordpress/server-side-render": "^5.11.0",
46
- "browserslist": "^4.24.2",
47
- "css-loader": "^7.1.2",
48
- "css-minimizer-webpack-plugin": "^7.0.0",
49
- "eslint": "^9.14.0",
50
- "eslint-config-prettier": "^9.1.0",
51
- "eslint-plugin-prettier": "^5.2.1",
52
- "globals": "^15.12.0",
53
- "husky": "^9.1.6",
54
- "lightningcss": "^1.28.1",
55
- "mini-css-extract-plugin": "^2.9.2",
56
- "postcss": "^8.4.47",
57
- "postcss-loader": "^8.1.1",
58
- "prettier": "^3.3.3",
59
- "prettier-plugin-tailwindcss": "^0.6.8",
60
- "sonner": "^1.7.0",
61
- "stylelint": "^16.10.0",
62
- "stylelint-config-standard": "^36.0.1",
63
- "swc-loader": "^0.2.6",
64
- "terser-webpack-plugin": "^5.3.10",
65
- "webpack": "^5.96.1",
66
- "webpack-cli": "^5.1.4",
67
- "webpack-manifest-plugin": "^5.0.0",
68
- "webpack-merge": "^6.0.1"
69
- },
70
- "devDependencies": {
71
- "embla-carousel": "^8.3.1",
72
- "fluid-tailwind": "^1.0.3",
73
- "lint-staged": "^15.2.10",
74
- "micromodal": "^0.4.10",
75
- "ol": "^10.2.1",
76
- "ol-mapbox-style": "^12.3.5",
77
- "tailwindcss": "^3.4.14",
78
- "tailwindcss-animate": "^1.0.7"
79
- },
80
- "sideEffects": false,
81
- "lint-staged": {
82
- "*.css": [
83
- "npm run lintStyle"
84
- ],
85
- "*.js": [
86
- "npm run lintJs"
87
- ],
88
- "*.php": [
89
- "composer test"
90
- ]
91
- }
92
- }
2
+ "name": "@eightshift/frontend-libs-tailwind",
3
+ "version": "1.4.5",
4
+ "description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
5
+ "author": {
6
+ "name": "Eightshift team",
7
+ "email": "team@eightshift.com",
8
+ "url": "https://eightshift.com/"
9
+ },
10
+ "repository": {
11
+ "type": "git",
12
+ "url": "git+https://github.com/infinum/eightshift-frontend-libs-tailwind.git"
13
+ },
14
+ "keywords": [
15
+ "frontend",
16
+ "css",
17
+ "mixin",
18
+ "js",
19
+ "utility",
20
+ "module",
21
+ "WordPress",
22
+ "tailwind",
23
+ "TailwindCSS"
24
+ ],
25
+ "bugs": {
26
+ "url": "https://github.com/infinum/eightshift-frontend-libs-tailwind/issues"
27
+ },
28
+ "homepage": "https://github.com/infinum/eightshift-frontend-libs-tailwind#readme",
29
+ "license": "MIT",
30
+ "dependencies": {
31
+ "@eightshift/ui-components": "^1.7.0",
32
+ "@stylistic/eslint-plugin-js": "^2.10.1",
33
+ "@stylistic/stylelint-plugin": "^3.1.1",
34
+ "@swc/core": "^1.8.0",
35
+ "@wordpress/api-fetch": "^7.11.0",
36
+ "@wordpress/block-editor": "^14.6.0",
37
+ "@wordpress/dependency-extraction-webpack-plugin": "^5.9.0",
38
+ "@wordpress/dom-ready": "^4.11.0",
39
+ "@wordpress/server-side-render": "^5.11.0",
40
+ "browserslist": "^4.24.2",
41
+ "css-loader": "^7.1.2",
42
+ "css-minimizer-webpack-plugin": "^7.0.0",
43
+ "eslint": "^9.14.0",
44
+ "eslint-config-prettier": "^9.1.0",
45
+ "eslint-plugin-prettier": "^5.2.1",
46
+ "globals": "^15.12.0",
47
+ "husky": "^9.1.6",
48
+ "lightningcss": "^1.28.1",
49
+ "mini-css-extract-plugin": "^2.9.2",
50
+ "postcss": "^8.4.47",
51
+ "postcss-loader": "^8.1.1",
52
+ "prettier": "^3.3.3",
53
+ "prettier-plugin-tailwindcss": "^0.6.8",
54
+ "sonner": "^1.7.0",
55
+ "stylelint": "^16.10.0",
56
+ "stylelint-config-standard": "^36.0.1",
57
+ "swc-loader": "^0.2.6",
58
+ "terser-webpack-plugin": "^5.3.10",
59
+ "webpack": "^5.96.1",
60
+ "webpack-cli": "^5.1.4",
61
+ "webpack-manifest-plugin": "^5.0.0",
62
+ "webpack-merge": "^6.0.1"
63
+ },
64
+ "devDependencies": {
65
+ "embla-carousel": "^8.3.1",
66
+ "fluid-tailwind": "^1.0.3",
67
+ "lint-staged": "^15.2.10",
68
+ "micromodal": "^0.4.10",
69
+ "ol": "^10.2.1",
70
+ "ol-mapbox-style": "^12.3.5",
71
+ "tailwindcss": "^3.4.14",
72
+ "tailwindcss-animate": "^1.0.7"
73
+ },
74
+ "sideEffects": false,
75
+ "lint-staged": {
76
+ "*.css": [
77
+ "npm run lintStyle"
78
+ ],
79
+ "*.js": [
80
+ "npm run lintJs"
81
+ ],
82
+ "*.php": [
83
+ "composer test"
84
+ ]
85
+ },
86
+ "scripts": {
87
+ "lintStyle": "stylelint **/*.css",
88
+ "lintJs": "npx eslint",
89
+ "lint": "npm run lintJs && npm run lintStyle"
90
+ }
91
+ }
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import { __, sprintf } from '@wordpress/i18n';
3
3
  import { Inserter } from '@wordpress/block-editor';
4
+ import { useSuspenseSelect } from '@wordpress/data';
4
5
  import { Button } from '@eightshift/ui-components';
5
6
  import { icons } from '@eightshift/ui-components/icons';
6
7
  import { clsx } from '@eightshift/ui-components/utilities';
@@ -15,6 +16,7 @@ import { clsx } from '@eightshift/ui-components/utilities';
15
16
  * @param {boolean} [props.small] - If `true`, the button's size is reduced, perfect for added visual separation in hierarchical InnerBlocks.
16
17
  * @param {string} [props.className] - Additional classes to add to the control base.
17
18
  * @param {boolean} [props.prioritizePatterns] - Whether to show patterns before blocks in the inserter.
19
+ * @param {boolean} [props.alwaysVisible=false] - If `true`, the inserter is always visible, regardless of whether the block is selected.
18
20
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
19
21
  *
20
22
  * @returns {JSX.Element} The BlockInserter component.
@@ -25,12 +27,26 @@ import { clsx } from '@eightshift/ui-components/utilities';
25
27
  * @preserve
26
28
  */
27
29
  export const BlockInserter = (props) => {
28
- const { clientId, label, small = false, className, prioritizePatterns = false, hidden } = props;
30
+ const {
31
+ clientId,
32
+ label,
33
+ small = false,
34
+ className,
35
+ prioritizePatterns = false,
36
+ alwaysVisible = false,
37
+ hidden,
38
+ } = props;
39
+
40
+ const currentBlockClientId = useSuspenseSelect((select) => select('core/block-editor')?.getSelectedBlockClientId());
29
41
 
30
42
  if (hidden) {
31
43
  return null;
32
44
  }
33
45
 
46
+ if (!alwaysVisible && currentBlockClientId !== clientId) {
47
+ return null;
48
+ }
49
+
34
50
  return (
35
51
  <Inserter
36
52
  rootClientId={clientId}