Style and fix bug

plugins/woocommerce-blocks/assets/css/gutenberg-products-block.scss

@@ -656,4 +656,20 @@ p.wc-products-display-options__option-description {
 	.wc-products-list-card {
 		max-width: 480px;
 	}
-}
+}
+
+/**
+ * Sidebar area
+ */
+ .wc-products-scope-descriptions {
+ 	margin-bottom: 2em;
+ 	position: relative;
+ }
+
+ .wc-products-scope-description--edit-quicklink {
+ 	position: absolute;
+ 	top: 0;
+ 	right: 0;
+ 	cursor: pointer;
+ 	text-decoration: underline;
+ }

plugins/woocommerce-blocks/assets/js/products-block.js

@@ -757,7 +757,7 @@ var ProductsBlockSidebarInfo = withAPIData(function (_ref3) {
 
 	return wp.element.createElement(
 		'div',
-		{ className: 'wc-products-scope-descriptions' },
+		null,
 		descriptions.map(function (description) {
 			return wp.element.createElement(
 				'div',
@@ -857,6 +857,7 @@ var ProductsBlock = function (_React$Component5) {
 			return wp.element.createElement(
 				InspectorControls,
 				{ key: 'inspector' },
+				this.getBlockDescription(),
 				wp.element.createElement(
 					'h3',
 					null,
@@ -945,7 +946,7 @@ var ProductsBlock = function (_React$Component5) {
 			if (!attributes.edit_mode) {
 				editQuickLink = wp.element.createElement(
 					'div',
-					{ className: 'edit-quicklink' },
+					{ className: 'wc-products-scope-description--edit-quicklink' },
 					wp.element.createElement(
 						'a',
 						{ onClick: editQuicklinkHandler },
@@ -955,8 +956,8 @@ var ProductsBlock = function (_React$Component5) {
 			}
 
 			return wp.element.createElement(
-				InspectorControls,
-				{ key: 'description-inspector' },
+				'div',
+				{ className: 'wc-products-scope-descriptions' },
 				wp.element.createElement(
 					'h3',
 					null,
@@ -1030,7 +1031,7 @@ var ProductsBlock = function (_React$Component5) {
 			var edit_mode = attributes.edit_mode;
 
 
-			return [!!focus ? this.getBlockDescription() : null, !!focus ? this.getInspectorControls() : null, !!focus ? this.getToolbarControls() : null, edit_mode ? this.getSettingsEditor() : this.getPreview()];
+			return [!!focus ? this.getInspectorControls() : null, !!focus ? this.getToolbarControls() : null, edit_mode ? this.getSettingsEditor() : this.getPreview()];
 		}
 	}]);
 

plugins/woocommerce-blocks/assets/js/products-block.jsx

@@ -457,7 +457,7 @@ const ProductsBlockSidebarInfo = withAPIData( ( { attributes } ) => {
 	}
 
 	return (
-		<div className="wc-products-scope-descriptions">
+		<div>
 			{ descriptions.map( ( description ) => (
 				<div className="scope-description">{ description }</div>
 			) ) }
@@ -543,6 +543,7 @@ class ProductsBlock extends React.Component {
 
 		return (
 			<InspectorControls key="inspector">
+				{ this.getBlockDescription() }
 				<h3>{ __( 'Layout' ) }</h3>
 				{ columnControl }
 				<RangeControl
@@ -610,18 +611,18 @@ class ProductsBlock extends React.Component {
 		let editQuickLink = null;
 		if ( ! attributes.edit_mode ) {
 			editQuickLink = (
-				<div className="edit-quicklink">
+				<div className="wc-products-scope-description--edit-quicklink">
 					<a onClick={ editQuicklinkHandler }>{ __( 'Edit' ) }</a>
 				</div>
 			);
 		}
 
 		return (
-			<InspectorControls key="description-inspector">
+			<div className="wc-products-scope-descriptions">
 				<h3>{ __( 'Current Source' ) }</h3>
 				{ editQuickLink }
 				<ProductsBlockSidebarInfo attributes={ attributes } />
-			</InspectorControls>
+			</div>
 		);
 	}
 
@@ -673,7 +674,6 @@ class ProductsBlock extends React.Component {
 		const { edit_mode } = attributes;
 
 		return [
-			( !! focus ) ? this.getBlockDescription() : null,
 			( !! focus ) ? this.getInspectorControls() : null,
 			( !! focus ) ? this.getToolbarControls() : null,
 			edit_mode ? this.getSettingsEditor() : this.getPreview(),