Add Store Notices block (https://github.com/woocommerce/woocommerce-blocks/pull/8157)
* Block scaffolding * Rename to store notices * Register only in the site editor * Update description * Add woocommerce class * Add tests * Delete old test file * Update notices message in the editor * Remove customization * Disable the block server side * Fix TS error * Add custom classes * Reprashed test description * Escape notices * Remove unnecessary disabled component * Only allow to insert the block once * Improve class name * Merge edit and block files * Fix copy * Simplify test case * Remove align support * Remove attributes * Change editor markup * Use the Notice component to display the notice placeholder on the editor * Use sprintf to improve readability * Inline component * Remove styles and unregister scripts * Use ordered placeholders Co-authored-by: Tung Du <dinhtungdu@gmail.com> * Use info as the notices status Co-authored-by: Tung Du <dinhtungdu@gmail.com> * Fix php lint error Co-authored-by: Tung Du <dinhtungdu@gmail.com>
This commit is contained in:
parent
34c7fa95e1
commit
fbd86f8762
|
@ -0,0 +1,14 @@
|
||||||
|
{
|
||||||
|
"name": "woocommerce/store-notices",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"title": "Store Notices",
|
||||||
|
"description": "Display shopper-facing notifications generated by WooCommerce or extensions.",
|
||||||
|
"category": "woocommerce",
|
||||||
|
"keywords": [ "WooCommerce" ],
|
||||||
|
"supports": {
|
||||||
|
"multiple": false
|
||||||
|
},
|
||||||
|
"textdomain": "woo-gutenberg-products-block",
|
||||||
|
"apiVersion": 2,
|
||||||
|
"$schema": "https://schemas.wp.org/trunk/block.json"
|
||||||
|
}
|
|
@ -0,0 +1,25 @@
|
||||||
|
/**
|
||||||
|
* External dependencies
|
||||||
|
*/
|
||||||
|
import { useBlockProps } from '@wordpress/block-editor';
|
||||||
|
import { __ } from '@wordpress/i18n';
|
||||||
|
import { Notice } from '@wordpress/components';
|
||||||
|
|
||||||
|
const Edit = (): JSX.Element => {
|
||||||
|
const blockProps = useBlockProps( {
|
||||||
|
className: 'wc-block-store-notices',
|
||||||
|
} );
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div { ...blockProps }>
|
||||||
|
<Notice status="info" isDismissible={ false }>
|
||||||
|
{ __(
|
||||||
|
'Notices added by WooCommerce or extensions will show up here.',
|
||||||
|
'woo-gutenberg-products-block'
|
||||||
|
) }
|
||||||
|
</Notice>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Edit;
|
|
@ -0,0 +1,30 @@
|
||||||
|
/**
|
||||||
|
* External dependencies
|
||||||
|
*/
|
||||||
|
import { registerBlockType } from '@wordpress/blocks';
|
||||||
|
import { Icon } from '@wordpress/icons';
|
||||||
|
import { totals } from '@woocommerce/icons';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Internal dependencies
|
||||||
|
*/
|
||||||
|
import metadata from './block.json';
|
||||||
|
import edit from './edit';
|
||||||
|
|
||||||
|
registerBlockType( metadata, {
|
||||||
|
icon: {
|
||||||
|
src: (
|
||||||
|
<Icon
|
||||||
|
icon={ totals }
|
||||||
|
className="wc-block-editor-components-block-icon"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
attributes: {
|
||||||
|
...metadata.attributes,
|
||||||
|
},
|
||||||
|
edit,
|
||||||
|
save() {
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
} );
|
|
@ -40,6 +40,7 @@ const blocks = {
|
||||||
'mini-cart-contents': {
|
'mini-cart-contents': {
|
||||||
customDir: 'mini-cart/mini-cart-contents',
|
customDir: 'mini-cart/mini-cart-contents',
|
||||||
},
|
},
|
||||||
|
'store-notices': {},
|
||||||
'price-filter': {},
|
'price-filter': {},
|
||||||
'product-best-sellers': {},
|
'product-best-sellers': {},
|
||||||
'product-category': {},
|
'product-category': {},
|
||||||
|
|
|
@ -0,0 +1,54 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
namespace Automattic\WooCommerce\Blocks\BlockTypes;
|
||||||
|
|
||||||
|
use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* StoreNotices class.
|
||||||
|
*/
|
||||||
|
class StoreNotices extends AbstractBlock {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Block name.
|
||||||
|
*
|
||||||
|
* @var string
|
||||||
|
*/
|
||||||
|
protected $block_name = 'store-notices';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render the block.
|
||||||
|
*
|
||||||
|
* @param array $attributes Block attributes.
|
||||||
|
* @param string $content Block content.
|
||||||
|
* @param WP_Block $block Block instance.
|
||||||
|
*
|
||||||
|
* @return string | void Rendered block output.
|
||||||
|
*/
|
||||||
|
protected function render( $attributes, $content, $block ) {
|
||||||
|
ob_start();
|
||||||
|
woocommerce_output_all_notices();
|
||||||
|
$notices = ob_get_clean();
|
||||||
|
|
||||||
|
if ( ! $notices ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
$classname = isset( $attributes['className'] ) ? $attributes['className'] : '';
|
||||||
|
|
||||||
|
return sprintf(
|
||||||
|
'<div class="woocommerce wc-block-store-notices %1$s">%2$s</div>',
|
||||||
|
esc_attr( $classname ),
|
||||||
|
wc_kses_notice( $notices )
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the frontend script handle for this block type.
|
||||||
|
*
|
||||||
|
* @param string $key Data to get, or default to everything.
|
||||||
|
*/
|
||||||
|
protected function get_block_type_script( $key = null ) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
|
@ -177,6 +177,7 @@ final class BlockTypesController {
|
||||||
'HandpickedProducts',
|
'HandpickedProducts',
|
||||||
'MiniCart',
|
'MiniCart',
|
||||||
'MiniCartContents',
|
'MiniCartContents',
|
||||||
|
'StoreNotices',
|
||||||
'PriceFilter',
|
'PriceFilter',
|
||||||
'ProductAddToCart',
|
'ProductAddToCart',
|
||||||
'ProductBestSellers',
|
'ProductBestSellers',
|
||||||
|
@ -251,6 +252,7 @@ final class BlockTypesController {
|
||||||
'CatalogSorting',
|
'CatalogSorting',
|
||||||
'ClassicTemplate',
|
'ClassicTemplate',
|
||||||
'ProductResultsCount',
|
'ProductResultsCount',
|
||||||
|
'StoreNotices',
|
||||||
]
|
]
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,62 @@
|
||||||
|
/**
|
||||||
|
* External dependencies
|
||||||
|
*/
|
||||||
|
import {
|
||||||
|
canvas,
|
||||||
|
createNewPost,
|
||||||
|
insertBlock,
|
||||||
|
switchUserToAdmin,
|
||||||
|
} from '@wordpress/e2e-test-utils';
|
||||||
|
import { searchForBlock } from '@wordpress/e2e-test-utils/build/inserter';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Internal dependencies
|
||||||
|
*/
|
||||||
|
import { goToSiteEditor, useTheme, waitForCanvas } from '../../utils.js';
|
||||||
|
|
||||||
|
const block = {
|
||||||
|
name: 'Store Notices',
|
||||||
|
slug: 'woocommerce/store-notices',
|
||||||
|
class: '.wc-block-store-notices',
|
||||||
|
selectors: {
|
||||||
|
insertButton: "//button//span[text()='Store Notices']",
|
||||||
|
insertButtonDisabled:
|
||||||
|
"//button[@aria-disabled]//span[text()='Store Notices']",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
describe( `${ block.name } Block`, () => {
|
||||||
|
it( 'can not be inserted in the Post Editor', async () => {
|
||||||
|
await switchUserToAdmin();
|
||||||
|
|
||||||
|
await createNewPost( {
|
||||||
|
postType: 'post',
|
||||||
|
title: block.name,
|
||||||
|
} );
|
||||||
|
await searchForBlock( block.name );
|
||||||
|
expect( page ).toMatch( 'No results found.' );
|
||||||
|
} );
|
||||||
|
|
||||||
|
describe( 'in FSE editor', () => {
|
||||||
|
useTheme( 'emptytheme' );
|
||||||
|
|
||||||
|
beforeEach( async () => {
|
||||||
|
await goToSiteEditor();
|
||||||
|
await waitForCanvas();
|
||||||
|
} );
|
||||||
|
|
||||||
|
it( 'can be inserted in FSE area', async () => {
|
||||||
|
await insertBlock( block.name );
|
||||||
|
await expect( canvas() ).toMatchElement( block.class );
|
||||||
|
} );
|
||||||
|
|
||||||
|
it( 'can only be inserted once', async () => {
|
||||||
|
await insertBlock( block.name );
|
||||||
|
await searchForBlock( block.name );
|
||||||
|
const storeNoticesButton = await page.$x(
|
||||||
|
block.selectors.insertButtonDisabled
|
||||||
|
);
|
||||||
|
expect( storeNoticesButton ).toHaveLength( 1 );
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
} );
|
Loading…
Reference in New Issue