Merge pull request #63 from infinum/release/1.4.5

1.4.5

CHANGELOG.md

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

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

@@ -22,10 +22,10 @@
 
 $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 @@ class="<?php echo esc_attr($additionalClass['picture']); ?>"
 			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 @@ class="<?php echo esc_attr($additionalClass['picture']); ?>"
 		class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass['image'] ?? $additionalClass)); ?>"
 	/>
 </picture>
+

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/frontend-libs-tailwind",
-	"version": "1.4.4",
+	"version": "1.4.5",
 	"description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
 	"author": {
 		"name": "Eightshift team",

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}