@automattic/jetpack-shared-extension-utils 0.1.1 → 0.2.0

package/CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.0] - 2022-03-15
+### Added
+- Moved with-has-warning-is-interactive-class-names folder from jetpack plugin shared extensions
+
 ## [0.1.1] - 2022-03-02
 ### Changed
 - Updated package dependencies
@@ -21,4 +25,5 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Core: prepare utility for release
 
+[0.2.0]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.1.1...0.2.0
 [0.1.1]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.1.0...0.1.1

package/index.js

@@ -3,3 +3,4 @@ export { default as getSiteFragment } from './src/get-site-fragment';
 export { isSimpleSite, isAtomicSite, isPrivateSite } from './src/site-type-utils';
 export { default as getJetpackExtensionAvailability } from './src/get-jetpack-extension-availability';
 export { default as registerJetpackPlugin } from './src/register-jetpack-plugin';
+export { default as withHasWarningIsInteractiveClassNames } from './src/with-has-warning-is-interactive-class-names';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-shared-extension-utils",
-	"version": "0.1.1",
+	"version": "0.2.0",
 	"description": "Utility functions used by the block editor extensions",
 	"homepage": "https://jetpack.com",
 	"bugs": {
@@ -16,9 +16,12 @@
 		"test": "NODE_ENV=test NODE_PATH=tests:. js-test-runner --jsdom --initfile=test-main.jsx 'glob:./!(node_modules)/**/test/*.@(jsx|js)'"
 	},
 	"dependencies": {
-		"@wordpress/plugins": "4.1.3"
+		"@wordpress/compose": "5.1.2",
+		"@wordpress/plugins": "4.1.1"
 	},
 	"devDependencies": {
+		"@babel/core": "7.16.0",
+		"@babel/preset-react": "7.16.0",
 		"jetpack-js-test-runner": "workspace:*",
 		"nyc": "15.1.0"
 	},

package/src/with-has-warning-is-interactive-class-names/index.jsx

@@ -0,0 +1,23 @@
+/* eslint-disable react/react-in-jsx-scope */
+
+/**
+ * External dependencies
+ */
+import { createHigherOrderComponent } from '@wordpress/compose';
+
+import './style.scss';
+
+// Injecting the `has-warning` class into the block wrapper component gives us
+// the right kind of borders around the block, both visually and conceptually.
+// However, it also adds styling to prevent user interaction with that block.
+// We thus add a new `is-interactive` class to be able to override that behavior.
+export default name =>
+	createHigherOrderComponent(
+		BlockListBlock => props => (
+			<BlockListBlock
+				{ ...props }
+				className={ props.name === name ? 'has-warning is-interactive' : props.className }
+			/>
+		),
+		'withHasWarningIsInteractiveClassNames'
+	);

package/src/with-has-warning-is-interactive-class-names/style.scss

@@ -0,0 +1,13 @@
+.block-editor-block-list__layout
+	// Override core styles inherited from `.has-warning`:
+	// we do want blocks with upgrade nudge warning to be interactive
+	.block-editor-block-list__block.has-warning.is-interactive {
+	> * {
+		pointer-events: auto;
+		user-select: auto;
+	}
+
+	&:after {
+		content: none;
+	}
+}