Add to Cart Button > Update block registration to rely on metadata and enable usage for the Single Product Block (https://github.com/woocommerce/woocommerce-blocks/pull/9404)
* Adapt the Add to Cart Button block to be registered via block.json * Remove the legacy supports.ts file * Ditch all registration methods from the ProductButton class as it is now registered via metadata (a block.json file) * Update get_block_type_uses_context and register_block_type_assets
This commit is contained in:
Patricia Hillebrandt
GitHub
parent
8d6344a07d
commit
b12cfd2d6a
|
|
@ -1,24 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import type { BlockAttributes } from '@wordpress/blocks';
|
||||
|
||||
export const blockAttributes: BlockAttributes = {
|
||||
productId: {
|
||||
type: 'number',
|
||||
default: 0,
|
||||
},
|
||||
isDescendentOfQueryLoop: {
|
||||
type: 'boolean',
|
||||
default: false,
|
||||
},
|
||||
textAlign: {
|
||||
type: 'string',
|
||||
default: '',
|
||||
},
|
||||
width: {
|
||||
type: 'number',
|
||||
},
|
||||
};
|
||||
|
||||
export default blockAttributes;
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
{
|
||||
"name": "woocommerce/product-button",
|
||||
"version": "1.0.0",
|
||||
"title": "Add to Cart Button",
|
||||
"description": "Display a call to action button which either adds the product to the cart, or links to the product page.",
|
||||
"category": "woocommerce",
|
||||
"keywords": [ "WooCommerce" ],
|
||||
"usesContext": [ "query", "queryId", "postId" ],
|
||||
"textdomain": "woo-gutenberg-products-block",
|
||||
"attributes": {
|
||||
"productId": {
|
||||
"type": "number",
|
||||
"default": 0
|
||||
},
|
||||
"textAlign": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"width": {
|
||||
"type": "number"
|
||||
},
|
||||
"isDescendentOfSingleProductBlock": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"isDescendentOfQueryLoop": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
}
|
||||
},
|
||||
"supports": {
|
||||
"align": [ "wide", "full" ],
|
||||
"color": {
|
||||
"background": false,
|
||||
"link": true
|
||||
},
|
||||
"html": false,
|
||||
"typography": {
|
||||
"fontSize": true,
|
||||
"lineHeight": true
|
||||
}
|
||||
},
|
||||
"ancestor": [
|
||||
"woocommerce/all-products",
|
||||
"woocommerce/single-product",
|
||||
"core/post-template"
|
||||
],
|
||||
"styles": [
|
||||
{
|
||||
"name": "fill",
|
||||
"label": "Fill",
|
||||
"isDefault": true
|
||||
},
|
||||
{
|
||||
"name": "outline",
|
||||
"label": "Outline"
|
||||
}
|
||||
],
|
||||
"apiVersion": 2,
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json"
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Icon, button } from '@wordpress/icons';
|
||||
|
||||
export const BLOCK_TITLE: string = __(
|
||||
'Add to Cart Button',
|
||||
'woo-gutenberg-products-block'
|
||||
);
|
||||
export const BLOCK_ICON: JSX.Element = (
|
||||
<Icon icon={ button } className="wc-block-editor-components-block-icon" />
|
||||
);
|
||||
export const BLOCK_DESCRIPTION: string = __(
|
||||
'Display a call to action button which either adds the product to the cart, or links to the product page.',
|
||||
'woo-gutenberg-products-block'
|
||||
);
|
||||
|
||||
export const BLOCK_NAME = 'woocommerce/product-button';
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
import type { BlockConfiguration } from '@wordpress/blocks';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { supports } from './supports';
|
||||
import attributes from './attributes';
|
||||
import sharedConfig from '../shared/config';
|
||||
import edit from './edit';
|
||||
import save from './save';
|
||||
import {
|
||||
BLOCK_TITLE as title,
|
||||
BLOCK_ICON as icon,
|
||||
BLOCK_DESCRIPTION as description,
|
||||
BLOCK_NAME,
|
||||
} from './constants';
|
||||
|
||||
const blockConfig: BlockConfiguration = {
|
||||
...sharedConfig,
|
||||
apiVersion: 2,
|
||||
title,
|
||||
description,
|
||||
ancestor: [
|
||||
'woocommerce/all-products',
|
||||
'woocommerce/single-product',
|
||||
'core/post-template',
|
||||
],
|
||||
usesContext: [ 'query', 'queryId', 'postId' ],
|
||||
icon: { src: icon },
|
||||
attributes,
|
||||
supports,
|
||||
edit,
|
||||
save,
|
||||
styles: [
|
||||
{
|
||||
name: 'fill',
|
||||
label: __( 'Fill', 'woo-gutenberg-products-block' ),
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
name: 'outline',
|
||||
label: __( 'Outline', 'woo-gutenberg-products-block' ),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
registerBlockType( BLOCK_NAME, { ...blockConfig } );
|
||||
|
|
@ -1,11 +1,19 @@
|
|||
/* eslint-disable @wordpress/no-unsafe-wp-apis */
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { Icon, button } from '@wordpress/icons';
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
|
||||
import { __experimentalGetSpacingClassesAndStyles } from '@wordpress/block-editor';
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import edit from './edit';
|
||||
import save from './save';
|
||||
import metadata from './block.json';
|
||||
|
||||
export const supports = {
|
||||
const featurePluginSupport = {
|
||||
...metadata.supports,
|
||||
...( isFeaturePluginBuild() && {
|
||||
color: {
|
||||
text: true,
|
||||
|
|
@ -47,3 +55,22 @@ export const supports = {
|
|||
},
|
||||
} ),
|
||||
};
|
||||
// @ts-expect-error: `metadata` currently does not have a type definition in WordPress core
|
||||
registerBlockType( metadata, {
|
||||
icon: {
|
||||
src: (
|
||||
<Icon
|
||||
icon={ button }
|
||||
className="wc-block-editor-components-block-icon"
|
||||
/>
|
||||
),
|
||||
},
|
||||
attributes: {
|
||||
...metadata.attributes,
|
||||
},
|
||||
supports: {
|
||||
...featurePluginSupport,
|
||||
},
|
||||
edit,
|
||||
save,
|
||||
} );
|
||||
|
|
@ -14,7 +14,10 @@ type Props = {
|
|||
};
|
||||
|
||||
const Save = ( { attributes }: Props ): JSX.Element | null => {
|
||||
if ( attributes.isDescendentOfQueryLoop ) {
|
||||
if (
|
||||
attributes.isDescendentOfQueryLoop ||
|
||||
attributes.isDescendentOfSingleProductBlock
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ export interface BlockAttributes {
|
|||
className?: string | undefined;
|
||||
textAlign?: string | undefined;
|
||||
isDescendentOfQueryLoop?: boolean | undefined;
|
||||
isDescendentOfSingleProductBlock?: boolean | undefined;
|
||||
width?: number | undefined;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import classnames from 'classnames';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { BLOCK_NAME as PRODUCT_BUTTON_BLOCK_NAME } from '../../atomic/blocks/product-elements/button/constants';
|
||||
import addToCartButtonMetadata from '../../atomic/blocks/product-elements/button/block.json';
|
||||
import { ImageSizing } from '../../atomic/blocks/product-elements/image/types';
|
||||
|
||||
/**
|
||||
|
|
@ -45,7 +45,7 @@ export const getProductLayoutConfig = ( innerBlocks ) => {
|
|||
* This is needed to support "Width Setting" controls available in
|
||||
* "woocommerce/product-button" block.
|
||||
*/
|
||||
...( block.name === PRODUCT_BUTTON_BLOCK_NAME && {
|
||||
...( block.name === addToCartButtonMetadata.name && {
|
||||
className: classnames( block.attributes.className, {
|
||||
[ `has-custom-width wp-block-button__width-${ block.attributes?.width }` ]:
|
||||
block.attributes?.width,
|
||||
|
|
|
|||
|
|
@ -15,43 +15,6 @@ class ProductButton extends AbstractBlock {
|
|||
*/
|
||||
protected $block_name = 'product-button';
|
||||
|
||||
/**
|
||||
* API version name.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $api_version = '2';
|
||||
|
||||
/**
|
||||
* Get block supports. Shared with the frontend.
|
||||
* IMPORTANT: If you change anything here, make sure to update the JS file too.
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
protected function get_block_type_supports() {
|
||||
return array(
|
||||
'color' =>
|
||||
array(
|
||||
'background' => true,
|
||||
'link' => false,
|
||||
'text' => true,
|
||||
'__experimentalSkipSerialization' => true,
|
||||
),
|
||||
'__experimentalBorder' =>
|
||||
array(
|
||||
'radius' => true,
|
||||
'__experimentalSkipSerialization' => true,
|
||||
),
|
||||
'typography' =>
|
||||
array(
|
||||
'fontSize' => true,
|
||||
'__experimentalFontWeight' => true,
|
||||
'__experimentalSkipSerialization' => true,
|
||||
),
|
||||
'__experimentalSelector' => '.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button',
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* It is necessary to register and enqueue assets during the render phase because we want to load assets only if the block has the content.
|
||||
*/
|
||||
|
|
@ -75,12 +38,6 @@ class ProductButton extends AbstractBlock {
|
|||
* @return string Rendered block type output.
|
||||
*/
|
||||
protected function render( $attributes, $content, $block ) {
|
||||
if ( ! empty( $content ) ) {
|
||||
parent::register_block_type_assets();
|
||||
$this->register_chunk_translations( [ $this->block_name ] );
|
||||
return $content;
|
||||
}
|
||||
|
||||
$post_id = $block->context['postId'];
|
||||
$product = wc_get_product( $post_id );
|
||||
|
||||
|
|
@ -91,7 +48,7 @@ class ProductButton extends AbstractBlock {
|
|||
$html_element = $is_ajax_button ? 'button' : 'a';
|
||||
$styles_and_classes = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
|
||||
$text_align_styles_and_classes = StyleAttributesUtils::get_text_align_class_and_style( $attributes );
|
||||
$classname = isset( $attributes['className'] ) ? $attributes['className'] : '';
|
||||
$classname = $attributes['className'] ?? '';
|
||||
$custom_width_classes = isset( $attributes['width'] ) ? 'has-custom-width wp-block-button__width-' . $attributes['width'] : '';
|
||||
$html_classes = implode(
|
||||
' ',
|
||||
|
|
|
|||
Loading…
Reference in New Issue