Fix unfiltered html usage of blocks (https://github.com/woocommerce/woocommerce-blocks/pull/4551)
* SSR search * deprecation handling for search * Update snaps * Fix duplicate class and align class property
This commit is contained in:
Mike Jolley
GitHub
parent
a40893ae3a
commit
a7d7ea32bb
|
|
@ -12,6 +12,40 @@ import './editor.scss';
|
|||
import Block from './block.js';
|
||||
import edit from './edit.js';
|
||||
|
||||
const attributes = {
|
||||
/**
|
||||
* Whether to show the field label.
|
||||
*/
|
||||
hasLabel: {
|
||||
type: 'boolean',
|
||||
default: true,
|
||||
},
|
||||
|
||||
/**
|
||||
* Search field label.
|
||||
*/
|
||||
label: {
|
||||
type: 'string',
|
||||
default: __( 'Search', 'woo-gutenberg-products-block' ),
|
||||
},
|
||||
|
||||
/**
|
||||
* Search field placeholder.
|
||||
*/
|
||||
placeholder: {
|
||||
type: 'string',
|
||||
default: __( 'Search products…', 'woo-gutenberg-products-block' ),
|
||||
},
|
||||
|
||||
/**
|
||||
* Store the instance ID.
|
||||
*/
|
||||
formId: {
|
||||
type: 'string',
|
||||
default: '',
|
||||
},
|
||||
};
|
||||
|
||||
registerBlockType( 'woocommerce/product-search', {
|
||||
title: __( 'Product Search', 'woo-gutenberg-products-block' ),
|
||||
icon: {
|
||||
|
|
@ -32,45 +66,7 @@ registerBlockType( 'woocommerce/product-search', {
|
|||
hasLabel: true,
|
||||
},
|
||||
},
|
||||
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: '',
|
||||
},
|
||||
},
|
||||
|
||||
attributes,
|
||||
transforms: {
|
||||
from: [
|
||||
{
|
||||
|
|
@ -89,19 +85,20 @@ registerBlockType( 'woocommerce/product-search', {
|
|||
},
|
||||
],
|
||||
},
|
||||
|
||||
deprecated: [
|
||||
{
|
||||
attributes,
|
||||
save( props ) {
|
||||
return (
|
||||
<div>
|
||||
<Block { ...props } />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
edit,
|
||||
|
||||
/**
|
||||
* Save the props to post content.
|
||||
*
|
||||
* @param {Object} attributes Props to pass to block.
|
||||
*/
|
||||
save( attributes ) {
|
||||
return (
|
||||
<div>
|
||||
<Block { ...attributes } />
|
||||
</div>
|
||||
);
|
||||
save() {
|
||||
return null;
|
||||
},
|
||||
} );
|
||||
|
|
|
|||
|
|
@ -31,6 +31,19 @@ class ProductSearch extends AbstractBlock {
|
|||
* @return string Rendered block type output.
|
||||
*/
|
||||
protected function render( $attributes, $content ) {
|
||||
static $instance_id = 0;
|
||||
|
||||
$attributes = wp_parse_args(
|
||||
$attributes,
|
||||
array(
|
||||
'hasLabel' => true,
|
||||
'align' => '',
|
||||
'className' => '',
|
||||
'label' => __( 'Search', 'woo-gutenberg-products-block' ),
|
||||
'placeholder' => __( 'Search products…', 'woo-gutenberg-products-block' ),
|
||||
)
|
||||
);
|
||||
|
||||
/**
|
||||
* Product Search event.
|
||||
*
|
||||
|
|
@ -57,6 +70,58 @@ class ProductSearch extends AbstractBlock {
|
|||
",
|
||||
'after'
|
||||
);
|
||||
return $content;
|
||||
|
||||
$input_id = 'wp-block-search__input-' . ( ++$instance_id );
|
||||
$wrapper_attributes = get_block_wrapper_attributes(
|
||||
array(
|
||||
'class' => implode(
|
||||
' ',
|
||||
array_filter(
|
||||
[
|
||||
'wc-block-product-search',
|
||||
$attributes['align'] ? 'align' . $attributes['align'] : '',
|
||||
]
|
||||
)
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
$label_markup = $attributes['hasLabel'] ? sprintf(
|
||||
'<label for="%s" class="wc-block-product-search__label">%s</label>',
|
||||
esc_attr( $input_id ),
|
||||
esc_html( $attributes['label'] )
|
||||
) : sprintf(
|
||||
'<label for="%s" class="wc-block-product-search__label screen-reader-text">%s</label>',
|
||||
esc_attr( $input_id ),
|
||||
esc_html( $attributes['label'] )
|
||||
);
|
||||
|
||||
$input_markup = sprintf(
|
||||
'<input type="search" id="%s" className="wc-block-product-search__field" placeholder="%s" name="s" />',
|
||||
esc_attr( $input_id ),
|
||||
esc_attr( $attributes['placeholder'] )
|
||||
);
|
||||
$button_markup = sprintf(
|
||||
'<button type="submit" className="wc-block-product-search__button" aria-label="%s">
|
||||
<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" />
|
||||
</svg>
|
||||
</button>',
|
||||
esc_attr__( 'Search', 'woo-gutenberg-products-block' )
|
||||
);
|
||||
|
||||
$field_markup = '
|
||||
<div className="wc-block-product-search__fields">
|
||||
' . $input_markup . $button_markup . '
|
||||
<input type="hidden" name="post_type" value="product" />
|
||||
</div>
|
||||
';
|
||||
|
||||
return sprintf(
|
||||
'<div %s><form role="search" method="get" action="%s">%s</form></div>',
|
||||
$wrapper_attributes,
|
||||
esc_url( home_url( '/' ) ),
|
||||
$label_markup . $field_markup
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Product Search Block can change field labels in editor 1`] = `
|
||||
"<!-- wp:woocommerce/product-search {\\"formId\\":\\"wc-block-product-search-1\\"} -->
|
||||
<div class=\\"wp-block-woocommerce-product-search\\"><div class=\\"wc-block-product-search\\"><form role=\\"search\\" method=\\"get\\" action=\\"http://localhost:8889/\\"><label for=\\"wc-block-product-search-1\\" class=\\"wc-block-product-search__label\\">The Label</label><div class=\\"wc-block-product-search__fields\\"><input type=\\"search\\" id=\\"wc-block-product-search-1\\" class=\\"wc-block-product-search__field\\" placeholder=\\"The Placeholder\\" name=\\"s\\"/><input type=\\"hidden\\" name=\\"post_type\\" value=\\"product\\"/><button type=\\"submit\\" class=\\"wc-block-product-search__button\\" label=\\"Search\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" class=\\"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></div>
|
||||
<!-- /wp:woocommerce/product-search -->"
|
||||
`;
|
||||
exports[`Product Search Block can change field labels in editor 1`] = `"<!-- wp:woocommerce/product-search {\\"label\\":\\"The Label\\",\\"placeholder\\":\\"The Placeholder\\",\\"formId\\":\\"wc-block-product-search-1\\"} /-->"`;
|
||||
|
|
|
|||
Loading…
Reference in New Issue