Skeleton shopping cart block (https://github.com/woocommerce/woocommerce-blocks/pull/1306)
* basic empty cart block * use a real placeholder for placeholder editor content * remove unnecessary Fragment * updates to config and frontend script * enqueue frontend script * add example config to block registration * change name typo
This commit is contained in:
parent
f7c807a0c6
commit
8e2b94fd69
|
@ -0,0 +1,15 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { Placeholder } from '@wordpress/components';
|
||||
|
||||
/**
|
||||
* Component to handle edit mode of "Cart Block".
|
||||
*/
|
||||
const Cart = () => {
|
||||
return <Placeholder>Cart block coming soon…</Placeholder>;
|
||||
};
|
||||
|
||||
Cart.propTypes = {};
|
||||
|
||||
export default Cart;
|
|
@ -0,0 +1,18 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { DEFAULT_HEIGHT } from '@woocommerce/block-settings';
|
||||
import { previewProducts } from '@woocommerce/resource-previews';
|
||||
|
||||
export const example = {
|
||||
attributes: {
|
||||
contentAlign: 'center',
|
||||
dimRatio: 50,
|
||||
editMode: false,
|
||||
height: DEFAULT_HEIGHT,
|
||||
mediaSrc: '',
|
||||
showDesc: true,
|
||||
productId: 'preview',
|
||||
previewProduct: previewProducts[ 0 ],
|
||||
},
|
||||
};
|
|
@ -0,0 +1,22 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { withRestApiHydration } from '@woocommerce/block-hocs';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Block from './block.js';
|
||||
import renderFrontend from '../../../utils/render-frontend.js';
|
||||
|
||||
const getProps = () => {
|
||||
return {
|
||||
attributes: {},
|
||||
};
|
||||
};
|
||||
|
||||
renderFrontend(
|
||||
'.wp-block-woocommerce-cart',
|
||||
withRestApiHydration( Block ),
|
||||
getProps
|
||||
);
|
|
@ -0,0 +1,45 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { InnerBlocks } from '@wordpress/editor';
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Block from './block';
|
||||
import { example } from './example';
|
||||
/**
|
||||
* Register and run the Cart block.
|
||||
*/
|
||||
registerBlockType( 'woocommerce/cart', {
|
||||
title: __( 'Cart', 'woo-gutenberg-products-block' ),
|
||||
icon: {
|
||||
src: 'cart',
|
||||
foreground: '#96588a',
|
||||
},
|
||||
category: 'woocommerce',
|
||||
keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
|
||||
description: __( 'Shopping cart.', 'woo-gutenberg-products-block' ),
|
||||
supports: {
|
||||
align: [ 'wide', 'full' ],
|
||||
html: false,
|
||||
},
|
||||
example,
|
||||
attributes: {},
|
||||
|
||||
/**
|
||||
* Renders and manages the block.
|
||||
*/
|
||||
edit( props ) {
|
||||
return <Block { ...props } />;
|
||||
},
|
||||
|
||||
/**
|
||||
* Block content is rendered in PHP, not via save function.
|
||||
*/
|
||||
save() {
|
||||
return <InnerBlocks.Content />;
|
||||
},
|
||||
} );
|
|
@ -98,6 +98,7 @@ const getAlias = ( options = {} ) => {
|
|||
const mainEntry = {
|
||||
// Shared blocks code
|
||||
blocks: './assets/js/index.js',
|
||||
|
||||
// Blocks
|
||||
'handpicked-products': './assets/js/blocks/handpicked-products/index.js',
|
||||
'product-best-sellers': './assets/js/blocks/product-best-sellers/index.js',
|
||||
|
@ -123,6 +124,9 @@ const mainEntry = {
|
|||
'active-filters': './assets/js/blocks/active-filters/index.js',
|
||||
'block-error-boundary':
|
||||
'./assets/js/base/components/block-error-boundary/style.scss',
|
||||
|
||||
// cart & checkout blocks
|
||||
cart: './assets/js/blocks/cart-checkout/cart/index.js',
|
||||
};
|
||||
|
||||
const frontEndEntry = {
|
||||
|
@ -131,6 +135,7 @@ const frontEndEntry = {
|
|||
'price-filter': './assets/js/blocks/price-filter/frontend.js',
|
||||
'attribute-filter': './assets/js/blocks/attribute-filter/frontend.js',
|
||||
'active-filters': './assets/js/blocks/active-filters/frontend.js',
|
||||
cart: './assets/js/blocks/cart-checkout/cart/frontend.js',
|
||||
};
|
||||
|
||||
const getEntryConfig = ( main = true, exclude = [] ) => {
|
||||
|
|
|
@ -69,6 +69,7 @@ class Assets {
|
|||
self::register_script( 'wc-price-filter', plugins_url( self::get_block_asset_build_path( 'price-filter' ), __DIR__ ), $block_dependencies );
|
||||
self::register_script( 'wc-attribute-filter', plugins_url( self::get_block_asset_build_path( 'attribute-filter' ), __DIR__ ), $block_dependencies );
|
||||
self::register_script( 'wc-active-filters', plugins_url( self::get_block_asset_build_path( 'active-filters' ), __DIR__ ), $block_dependencies );
|
||||
self::register_script( 'wc-cart', plugins_url( self::get_block_asset_build_path( 'cart' ), __DIR__ ), $block_dependencies );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -0,0 +1,52 @@
|
|||
<?php
|
||||
/**
|
||||
* Cart block.
|
||||
*
|
||||
* @package WooCommerce/Blocks
|
||||
*/
|
||||
|
||||
namespace Automattic\WooCommerce\Blocks\BlockTypes;
|
||||
|
||||
defined( 'ABSPATH' ) || exit;
|
||||
|
||||
/**
|
||||
* Cart class.
|
||||
*/
|
||||
class Cart extends AbstractBlock {
|
||||
/**
|
||||
* Block name.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'cart';
|
||||
|
||||
/**
|
||||
* Registers the block type with WordPress.
|
||||
*/
|
||||
public function register_block_type() {
|
||||
register_block_type(
|
||||
$this->namespace . '/' . $this->block_name,
|
||||
array(
|
||||
'render_callback' => array( $this, 'render' ),
|
||||
'editor_script' => 'wc-' . $this->block_name,
|
||||
'editor_style' => 'wc-block-editor',
|
||||
'style' => 'wc-block-style',
|
||||
'script' => 'wc-' . $this->block_name . '-frontend',
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Append frontend scripts when rendering the Cart block.
|
||||
*
|
||||
* @param array $attributes Block attributes. Default empty array.
|
||||
* @param string $content Block content. Default empty string.
|
||||
* @return string Rendered block type output.
|
||||
*/
|
||||
public function render( $attributes = array(), $content = '' ) {
|
||||
\Automattic\WooCommerce\Blocks\Assets::register_block_script(
|
||||
$this->block_name . '-frontend'
|
||||
);
|
||||
return $content;
|
||||
}
|
||||
}
|
|
@ -50,6 +50,7 @@ class Library {
|
|||
$blocks[] = 'PriceFilter';
|
||||
$blocks[] = 'AttributeFilter';
|
||||
$blocks[] = 'ActiveFilters';
|
||||
$blocks[] = 'Cart';
|
||||
}
|
||||
foreach ( $blocks as $class ) {
|
||||
$class = __NAMESPACE__ . '\\BlockTypes\\' . $class;
|
||||
|
|
|
@ -112,6 +112,7 @@ const LegacyBlocksConfig = {
|
|||
'price-filter',
|
||||
'attribute-filter',
|
||||
'active-filters',
|
||||
'cart',
|
||||
],
|
||||
} ),
|
||||
};
|
||||
|
@ -133,6 +134,7 @@ const LegacyFrontendBlocksConfig = {
|
|||
'price-filter',
|
||||
'attribute-filter',
|
||||
'active-filters',
|
||||
'cart',
|
||||
],
|
||||
} ),
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue