Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add product search block (https://github.com/woocommerce/woocommerce-blocks/pull/697) 

* basic scaffold

* Progress

* Fix saving

* Move data to form

* Update assets/js/blocks/product-search/editor.scss

Co-Authored-By: Albert Juhé Lluveras <contact@albertjuhe.com>

* Update assets/js/blocks/product-search/block.js

Co-Authored-By: Albert Juhé Lluveras <contact@albertjuhe.com>

* hex case

* Use a span element

* Move render method

* CSS

* Update buttons

* Fix navigation buttons

* remove webkit appearance styles for buttons

* Swap rich to plain text component

* Improved attribute handling

* Update assets/js/blocks/product-search/block.js

Co-Authored-By: Albert Juhé Lluveras <contact@albertjuhe.com>
This commit is contained in:
Mike Jolley 2019-08-05 11:25:57 +01:00 committed by GitHub
parent 5efef42495
commit 6a6d280eb0
9 changed files with 348 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
plugins/woocommerce-blocks/assets/js/blocks/product-categories/style.scss
View File

@ -27,7 +27,6 @@
margin: 0;
border: none;
cursor: pointer;
-webkit-appearance: none;
background: none;
padding: 8px;
color: #555d66;

137
plugins/woocommerce-blocks/assets/js/blocks/product-search/block.js Normal file
View File

@ -0,0 +1,137 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import classnames from 'classnames';
import { Component } from '@wordpress/element';
import PropTypes from 'prop-types';
import { withInstanceId, compose } from '@wordpress/compose';
import { PlainText } from '@wordpress/editor';
/**
* Internal dependencies
*/
import './editor.scss';
import './style.scss';
/**
* Component displaying a product search form.
*/
class ProductSearchBlock extends Component {
renderView() {
const { attributes: { label, placeholder, formId, className, hasLabel, align } } = this.props;
const home = wc_product_block_data.homeUrl;
const classes = classnames(
'wc-block-product-search',
align ? 'align' + align : '',
className,
);
return (
<div className={ classes }>
<form role="search" method="get" action={ home }>
<label
htmlFor={ formId }
className={ hasLabel ? 'wc-block-product-search__label' : 'wc-block-product-search__label screen-reader-text' }
>
{ label }
</label>
<div className="wc-block-product-search__fields">
<input
type="search"
id={ formId }
className="wc-block-product-search__field"
placeholder={ placeholder }
name="s"
/>
<input type="hidden" name="post_type" value="product" />
<button
type="submit"
className="wc-block-product-search__button"
label={ __( 'Search', 'woo-gutenberg-products-block' ) }
>
<svg aria-hidden="true" role="img" focusable="false" className="dashicon dashicons-arrow-right-alt2" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M6 15l5-5-5-5 1-2 7 7-7 7z"></path>
</svg>
</button>
</div>
</form>
</div>
);
}
renderEdit() {
const { attributes, setAttributes, instanceId } = this.props;
const { label, placeholder, formId, className, hasLabel, align } = attributes;
const classes = classnames(
'wc-block-product-search',
align ? 'align' + align : '',
className,
);
if ( ! formId ) {
setAttributes( { formId: `wc-block-product-search-${ instanceId }` } );
}
return (
<div className={ classes }>
{ !! hasLabel && (
<PlainText
className="wc-block-product-search__label"
value={ label }
onChange={ ( value ) => setAttributes( { label: value } ) }
/>
) }
<div className="wc-block-product-search__fields">
<PlainText
className="wc-block-product-search__field input-control"
value={ placeholder }
onChange={ ( value ) => setAttributes( { placeholder: value } ) }
/>
<button
type="submit"
className="wc-block-product-search__button"
label={ __( 'Search', 'woo-gutenberg-products-block' ) }
onClick={ ( e ) => e.preventDefault() }
tabindex="-1"
>
<svg aria-hidden="true" role="img" focusable="false" className="dashicon dashicons-arrow-right-alt2" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M6 15l5-5-5-5 1-2 7 7-7 7z"></path>
</svg>
</button>
</div>
</div>
);
}
render() {
if ( this.props.isPreview ) {
return this.renderEdit();
}
return this.renderView();
}
}
ProductSearchBlock.propTypes = {
/**
* The attributes for this block.
*/
attributes: PropTypes.object.isRequired,
/**
* A unique ID for identifying the label for the select dropdown.
*/
instanceId: PropTypes.number,
/**
* Whether this is the block preview or frontend display.
*/
isPreview: PropTypes.bool,
/**
* A callback to update attributes.
*/
setAttributes: PropTypes.func,
};
export default compose( [
withInstanceId,
] )( ProductSearchBlock );

10
plugins/woocommerce-blocks/assets/js/blocks/product-search/editor.scss Normal file
View File

@ -0,0 +1,10 @@
.wc-block-product-search__field.input-control {
color: #828b96 !important;
}
.wc-block-product-search {
.wc-block-product-search__fields {
.block-editor-rich-text {
flex-grow: 1;
}
}
}

113
plugins/woocommerce-blocks/assets/js/blocks/product-search/index.js Normal file
View File

@ -0,0 +1,113 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { InspectorControls } from '@wordpress/editor';
import { PanelBody, ToggleControl } from '@wordpress/components';
import { Fragment } from '@wordpress/element';
/**
* Internal dependencies
*/
import './style.scss';
import './editor.scss';
import Block from './block.js';
registerBlockType( 'woocommerce/product-search', {
title: __( 'Product Search', 'woo-gutenberg-products-block' ),
icon: {
src: 'search',
foreground: '#96588a',
},
category: 'woocommerce',
keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
description: __(
'Help visitors find your products.',
'woo-gutenberg-products-block'
),
supports: {
align: [ 'wide', 'full' ],
},
attributes: {
/**
* Whether to show the field label.
*/
hasLabel: {
type: 'boolean',
default: true,
},
/**
* Search field label.
*/
label: {
type: 'string',
default: __( 'Search', 'woo-gutenberg-products-block' ),
source: 'text',
selector: 'label',
},
/**
* Search field placeholder.
*/
placeholder: {
type: 'string',
default: __( 'Search products...', 'woo-gutenberg-products-block' ),
source: 'attribute',
selector: 'input.wc-block-product-search__field',
attribute: 'placeholder',
},
/**
* Store the instance ID.
*/
formId: {
type: 'string',
default: '',
},
},
/**
* Renders and manages the block.
*/
edit( props ) {
const { attributes, setAttributes } = props;
const { hasLabel } = attributes;
return (
<Fragment>
<InspectorControls key="inspector">
<PanelBody
title={ __( 'Content', 'woo-gutenberg-products-block' ) }
initialOpen
>
<ToggleControl
label={ __( 'Show search field label', 'woo-gutenberg-products-block' ) }
help={
hasLabel ?
__( 'Label is visible.', 'woo-gutenberg-products-block' ) :
__( 'Label is hidden.', 'woo-gutenberg-products-block' )
}
checked={ hasLabel }
onChange={ () => setAttributes( { hasLabel: ! hasLabel } ) }
/>
</PanelBody>
</InspectorControls>
<Block { ...props } isPreview />
</Fragment>
);
},
/**
* Save the props to post content.
*/
save( attributes ) {
return (
<div>
<Block { ...attributes } />
</div>
);
},
} );

62
plugins/woocommerce-blocks/assets/js/blocks/product-search/style.scss Normal file
View File

@ -0,0 +1,62 @@
.wc-block-product-search {
.wc-block-product-search__fields {
display: flex;
}
.wc-block-product-search__field {
padding: 6px 8px;
line-height: 1.8;
flex-grow: 1;
}
.wc-block-product-search__button {
display: flex;
align-items: center;
text-decoration: none;
font-size: 13px;
margin: 0 0 0 6px;
border: none;
cursor: pointer;
background: none;
padding: 8px;
color: #555d66;
position: relative;
overflow: hidden;
border-radius: 4px;
svg {
fill: currentColor;
outline: none;
}
.screen-reader-text {
height: auto;
}
&:active {
color: currentColor;
}
&:disabled,
&[aria-disabled="true"] {
cursor: default;
opacity: 0.3;
}
&:focus:enabled {
background-color: #fff;
color: #191e23;
box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px #fff;
outline: 2px solid transparent;
outline-offset: -2px;
}
&:not(:disabled):not([aria-disabled="true"]):hover {
background-color: #fff;
color: #191e23;
box-shadow: inset 0 0 0 1px #e2e4e7, inset 0 0 0 2px #fff, 0 1px 1px rgba(25, 30, 35, 0.2);
}
&:not(:disabled):not([aria-disabled="true"]):active {
outline: none;
background-color: #fff;
color: #191e23;
box-shadow: inset 0 0 0 1px #ccd0d4, inset 0 0 0 2px #fff;
}
&[aria-disabled="true"]:focus,
&:disabled:focus {
box-shadow: none;
}
}
}

1
plugins/woocommerce-blocks/src/Assets.php
View File

@ -48,6 +48,7 @@ class Assets {
self::register_script( 'wc-featured-category', plugins_url( 'build/featured-category.js', __DIR__ ), array( 'wc-vendors', 'wc-blocks' ) );
self::register_script( 'wc-product-categories', plugins_url( 'build/product-categories.js', __DIR__ ), array( 'wc-vendors', 'wc-blocks' ) );
self::register_script( 'wc-product-tag', plugins_url( 'build/product-tag.js', __DIR__ ), array( 'wc-vendors', 'wc-blocks' ) );
self::register_script( 'wc-product-search', plugins_url( 'build/product-search.js', __DIR__ ), array( 'wc-vendors', 'wc-blocks' ) );
}
/**

23
plugins/woocommerce-blocks/src/BlockTypes/ProductSearch.php Normal file
View File

@ -0,0 +1,23 @@
<?php
/**
* Product search block.
*
* @package WooCommerce/Blocks
*/
namespace Automattic\WooCommerce\Blocks\BlockTypes;
defined( 'ABSPATH' ) || exit;
/**
* ProductSearch class.
*/
class ProductSearch extends AbstractBlock {
/**
* Block name.
*
* @var string
*/
protected $block_name = 'product-search';
}

1
plugins/woocommerce-blocks/src/Library.php
View File

@ -36,6 +36,7 @@ class Library {
'ProductOnSale',
'ProductsByAttribute',
'ProductTopRated',
'ProductSearch',
'ProductTag',
];
foreach ( $blocks as $class ) {

1
plugins/woocommerce-blocks/webpack.config.js
View File

@ -53,6 +53,7 @@ const GutenbergBlocksConfig = {
'product-top-rated': './assets/js/blocks/product-top-rated/index.js',
'products-by-attribute': './assets/js/blocks/products-by-attribute/index.js',
'featured-product': './assets/js/blocks/featured-product/index.js',
'product-search': './assets/js/blocks/product-search/index.js',
'product-tag': './assets/js/blocks/product-tag/index.js',
'featured-category': './assets/js/blocks/featured-category/index.js',
},