diff --git a/assets/js/blocks/product-categories/block.js b/assets/js/blocks/product-categories/block.js
index dbb1c057d93..73d27c92139 100644
--- a/assets/js/blocks/product-categories/block.js
+++ b/assets/js/blocks/product-categories/block.js
@@ -2,7 +2,9 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
-import { Component, Fragment } from '@wordpress/element';
+import classnames from 'classnames';
+import { Component, createRef, Fragment } from '@wordpress/element';
+import { IconButton } from '@wordpress/components';
import { repeat } from 'lodash';
import PropTypes from 'prop-types';
import { withInstanceId } from '@wordpress/compose';
@@ -27,14 +29,18 @@ function getCategories( { hasEmpty, isHierarchical } ) {
class ProductCategoriesBlock extends Component {
constructor() {
super( ...arguments );
+ this.select = createRef();
this.onNavigate = this.onNavigate.bind( this );
this.renderList = this.renderList.bind( this );
this.renderOptions = this.renderOptions.bind( this );
}
- onNavigate( event ) {
+ onNavigate() {
const { isPreview = false } = this.props;
- const url = event.target.value;
+ const url = this.select.current.value;
+ if ( 'false' === url ) {
+ return;
+ }
const home = wc_product_block_data.homeUrl;
if ( ! isPreview && 0 === url.indexOf( home ) ) {
@@ -80,19 +86,32 @@ class ProductCategoriesBlock extends Component {
const { attributes, instanceId } = this.props;
const { isDropdown } = attributes;
const categories = getCategories( attributes );
+ const classes = classnames( {
+ 'wc-block-product-categories': true,
+ 'is-dropdown': isDropdown,
+ 'is-list': ! isDropdown,
+ } );
const selectId = `prod-categories-${ instanceId }`;
return (
-
+
{ isDropdown ? (
-
) : (
this.renderList( categories )
diff --git a/assets/js/blocks/product-categories/index.js b/assets/js/blocks/product-categories/index.js
index 83b4b392d24..8375cb87cab 100644
--- a/assets/js/blocks/product-categories/index.js
+++ b/assets/js/blocks/product-categories/index.js
@@ -8,6 +8,7 @@ import { registerBlockType } from '@wordpress/blocks';
* Internal dependencies
*/
import './editor.scss';
+import './style.scss';
import edit from './edit.js';
import { IconFolder } from '../../components/icons';
diff --git a/assets/js/blocks/product-categories/style.scss b/assets/js/blocks/product-categories/style.scss
new file mode 100644
index 00000000000..1ceb684cd5c
--- /dev/null
+++ b/assets/js/blocks/product-categories/style.scss
@@ -0,0 +1,11 @@
+.wc-block-product-categories {
+ margin-bottom: 1em;
+
+ &.is-dropdown {
+ display: flex;
+ }
+
+ select {
+ margin-right: 0.5em;
+ }
+}
diff --git a/assets/php/class-wgpb-block-library.php b/assets/php/class-wgpb-block-library.php
index 3302f9c79d9..a3ffba019d3 100644
--- a/assets/php/class-wgpb-block-library.php
+++ b/assets/php/class-wgpb-block-library.php
@@ -119,7 +119,7 @@ protected static function register_style( $handle, $src, $deps = array(), $media
*/
public static function register_assets() {
self::register_style( 'wc-block-editor', plugins_url( 'build/editor.css', WGPB_PLUGIN_FILE ), array( 'wp-edit-blocks' ) );
- self::register_style( 'wc-block-style', plugins_url( 'build/style.css', WGPB_PLUGIN_FILE ), array() );
+ self::register_style( 'wc-block-style', plugins_url( 'build/style.css', WGPB_PLUGIN_FILE ), array( 'wp-components' ) );
// Shared libraries and components across all blocks.
self::register_script( 'wc-blocks', plugins_url( 'build/blocks.js', WGPB_PLUGIN_FILE ), array(), false );