Start using the `block.json` metadata file for the `Featured Product` block (https://github.com/woocommerce/woocommerce-blocks/pull/6296)
* Start using the `block.json` metadata file for the `Feature Product` block * Get default attributes from the block.json file * Add removed comment * Remove unnecessary `get_block_metadata_defaults` function * Add alt default to block.json
This commit is contained in:
Alba Rincón
GitHub
parent
964f6e5965
commit
0aac2c59ef
|
|
@ -0,0 +1,100 @@
|
|||
{
|
||||
"name": "woocommerce/featured-product",
|
||||
"version": "1.0.0",
|
||||
"title": "Featured Product",
|
||||
"description": "Visually highlight a product or variation and encourage prompt action.",
|
||||
"category": "woocommerce",
|
||||
"keywords": [ "WooCommerce" ],
|
||||
"supports": {
|
||||
"align": [
|
||||
"wide",
|
||||
"full"
|
||||
],
|
||||
"html": false,
|
||||
"color": {
|
||||
"background": false,
|
||||
"text": true,
|
||||
"__experimentalDuotone": ".wc-block-featured-product__background-image"
|
||||
},
|
||||
"spacing": {
|
||||
"padding": true,
|
||||
"__experimentalDefaultControls": {
|
||||
"padding": true
|
||||
},
|
||||
"__experimentalSkipSerialization": true
|
||||
},
|
||||
"__experimentalBorder": {
|
||||
"color": true,
|
||||
"radius": true,
|
||||
"width": true,
|
||||
"__experimentalSkipSerialization": true
|
||||
},
|
||||
"multiple": true
|
||||
},
|
||||
"attributes": {
|
||||
"alt": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"contentAlign": {
|
||||
"type": "string",
|
||||
"default": "center"
|
||||
},
|
||||
"dimRatio": {
|
||||
"type": "number",
|
||||
"default": 50
|
||||
},
|
||||
"editMode": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"focalPoint": {
|
||||
"type": "object",
|
||||
"default": false
|
||||
},
|
||||
"imageFit": {
|
||||
"type": "string",
|
||||
"default": "none"
|
||||
},
|
||||
"mediaId": {
|
||||
"type": "number",
|
||||
"default": 0
|
||||
},
|
||||
"mediaSrc": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"minHeight": {
|
||||
"type": "number",
|
||||
"default": 500
|
||||
},
|
||||
"linkText": {
|
||||
"type": "string",
|
||||
"default": "Shop now"
|
||||
},
|
||||
"overlayColor": {
|
||||
"type": "string",
|
||||
"default": "#000000"
|
||||
},
|
||||
"overlayGradient": {
|
||||
"type": "string"
|
||||
},
|
||||
"productId": {
|
||||
"type": "number"
|
||||
},
|
||||
"previewProduct": {
|
||||
"type": "object",
|
||||
"default": null
|
||||
},
|
||||
"showDesc": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"showPrice": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
}
|
||||
},
|
||||
"textdomain": "woo-gutenberg-products-block",
|
||||
"apiVersion": 2
|
||||
}
|
||||
|
|
@ -1,213 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { InnerBlocks } from '@wordpress/block-editor';
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
import { getSetting } from '@woocommerce/settings';
|
||||
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
|
||||
import { Icon, starEmpty } from '@wordpress/icons';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
import { example } from './example';
|
||||
import { Edit } from './edit';
|
||||
|
||||
/**
|
||||
* Register and run the "Featured Product" block.
|
||||
*/
|
||||
registerBlockType( 'woocommerce/featured-product', {
|
||||
apiVersion: 2,
|
||||
title: __( 'Featured Product', 'woo-gutenberg-products-block' ),
|
||||
icon: {
|
||||
src: (
|
||||
<Icon
|
||||
icon={ starEmpty }
|
||||
className="wc-block-editor-components-block-icon"
|
||||
/>
|
||||
),
|
||||
},
|
||||
category: 'woocommerce',
|
||||
keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
|
||||
description: __(
|
||||
'Visually highlight a product or variation and encourage prompt action.',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
supports: {
|
||||
align: [ 'wide', 'full' ],
|
||||
html: false,
|
||||
color: {
|
||||
background: false,
|
||||
text: true,
|
||||
...( isFeaturePluginBuild() && {
|
||||
__experimentalDuotone:
|
||||
'.wc-block-featured-product__background-image',
|
||||
} ),
|
||||
},
|
||||
spacing: {
|
||||
padding: true,
|
||||
...( isFeaturePluginBuild() && {
|
||||
__experimentalDefaultControls: {
|
||||
padding: true,
|
||||
},
|
||||
__experimentalSkipSerialization: true,
|
||||
} ),
|
||||
},
|
||||
...( isFeaturePluginBuild() && {
|
||||
__experimentalBorder: {
|
||||
color: true,
|
||||
radius: true,
|
||||
width: true,
|
||||
__experimentalSkipSerialization: true,
|
||||
},
|
||||
} ),
|
||||
},
|
||||
example,
|
||||
attributes: {
|
||||
alt: {
|
||||
type: 'string',
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* Alignment of content inside block.
|
||||
*/
|
||||
contentAlign: {
|
||||
type: 'string',
|
||||
default: 'center',
|
||||
},
|
||||
|
||||
/**
|
||||
* Percentage opacity of overlay.
|
||||
*/
|
||||
dimRatio: {
|
||||
type: 'number',
|
||||
default: 50,
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggle for edit mode in the block preview.
|
||||
*/
|
||||
editMode: {
|
||||
type: 'boolean',
|
||||
default: true,
|
||||
},
|
||||
|
||||
/**
|
||||
* Focus point for the background image
|
||||
*/
|
||||
focalPoint: {
|
||||
type: 'object',
|
||||
},
|
||||
|
||||
/**
|
||||
* Whether the image should fit the container or not be resized
|
||||
*
|
||||
* Note: when the image is resized to fit the container, the user loses
|
||||
* the ability to have full control over the focus.
|
||||
*/
|
||||
imageFit: {
|
||||
type: 'string',
|
||||
default: 'none',
|
||||
},
|
||||
|
||||
/**
|
||||
* ID for a custom image, overriding the product's featured image.
|
||||
*/
|
||||
mediaId: {
|
||||
type: 'number',
|
||||
default: 0,
|
||||
},
|
||||
|
||||
/**
|
||||
* URL for a custom image, overriding the product's featured image.
|
||||
*/
|
||||
mediaSrc: {
|
||||
type: 'string',
|
||||
default: '',
|
||||
},
|
||||
|
||||
/**
|
||||
* A minimum height for the block.
|
||||
*
|
||||
* Note: if padding is increased, this way the inner content will never
|
||||
* overflow, but instead will resize the container.
|
||||
*
|
||||
* It was decided to change this to make this block more in line with
|
||||
* the “Cover” block.
|
||||
*/
|
||||
minHeight: {
|
||||
type: 'number',
|
||||
default: getSetting( 'default_height', 500 ),
|
||||
},
|
||||
|
||||
/**
|
||||
* Text for the product link.
|
||||
*/
|
||||
linkText: {
|
||||
type: 'string',
|
||||
default: __( 'Shop now', 'woo-gutenberg-products-block' ),
|
||||
},
|
||||
|
||||
/**
|
||||
* Color for the overlay layer on top of the product image.
|
||||
*/
|
||||
overlayColor: {
|
||||
type: 'string',
|
||||
default: '#000000',
|
||||
},
|
||||
|
||||
/**
|
||||
* Gradient for the overlay layer on top of the product image.
|
||||
*/
|
||||
overlayGradient: {
|
||||
type: 'string',
|
||||
},
|
||||
|
||||
/**
|
||||
* The product ID to display.
|
||||
*/
|
||||
productId: {
|
||||
type: 'number',
|
||||
},
|
||||
|
||||
/**
|
||||
* Product preview.
|
||||
*/
|
||||
previewProduct: {
|
||||
type: 'object',
|
||||
default: null,
|
||||
},
|
||||
|
||||
/**
|
||||
* Show the product description.
|
||||
*/
|
||||
showDesc: {
|
||||
type: 'boolean',
|
||||
default: true,
|
||||
},
|
||||
|
||||
/**
|
||||
* Show the product price.
|
||||
*/
|
||||
showPrice: {
|
||||
type: 'boolean',
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Renders and manages the block.
|
||||
*
|
||||
* @param {Object} props Props to pass to block.
|
||||
*/
|
||||
edit: Edit,
|
||||
|
||||
/**
|
||||
* Block content is rendered in PHP, not via save function.
|
||||
*/
|
||||
save() {
|
||||
return <InnerBlocks.Content />;
|
||||
},
|
||||
} );
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { InnerBlocks } from '@wordpress/block-editor';
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
import { getSetting } from '@woocommerce/settings';
|
||||
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
|
||||
import { Icon, starEmpty } from '@wordpress/icons';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
import { example } from './example';
|
||||
import { Edit } from './edit';
|
||||
import metadata from './block.json';
|
||||
|
||||
/**
|
||||
* Register and run the "Featured Product" block.
|
||||
*/
|
||||
registerBlockType( metadata, {
|
||||
icon: {
|
||||
src: (
|
||||
<Icon
|
||||
icon={ starEmpty }
|
||||
className="wc-block-editor-components-block-icon"
|
||||
/>
|
||||
),
|
||||
},
|
||||
attributes: {
|
||||
...metadata.attributes,
|
||||
/**
|
||||
* A minimum height for the block.
|
||||
*
|
||||
* Note: if padding is increased, this way the inner content will never
|
||||
* overflow, but instead will resize the container.
|
||||
*
|
||||
* It was decided to change this to make this block more in line with
|
||||
* the “Cover” block.
|
||||
*/
|
||||
minHeight: {
|
||||
type: 'number',
|
||||
default: getSetting( 'default_height', 500 ),
|
||||
},
|
||||
},
|
||||
supports: {
|
||||
...metadata.supports,
|
||||
color: {
|
||||
background: false,
|
||||
text: true,
|
||||
...( isFeaturePluginBuild() && {
|
||||
__experimentalDuotone:
|
||||
'.wc-block-featured-product__background-image',
|
||||
} ),
|
||||
},
|
||||
spacing: {
|
||||
padding: true,
|
||||
...( isFeaturePluginBuild() && {
|
||||
__experimentalDefaultControls: {
|
||||
padding: true,
|
||||
},
|
||||
__experimentalSkipSerialization: true,
|
||||
} ),
|
||||
},
|
||||
...( isFeaturePluginBuild() && {
|
||||
__experimentalBorder: {
|
||||
color: true,
|
||||
radius: true,
|
||||
width: true,
|
||||
__experimentalSkipSerialization: true,
|
||||
},
|
||||
} ),
|
||||
},
|
||||
example,
|
||||
|
||||
/**
|
||||
* Renders and manages the block.
|
||||
*
|
||||
* @param {Object} props Props to pass to block.
|
||||
*/
|
||||
edit: Edit,
|
||||
|
||||
/**
|
||||
* Block content is rendered in PHP, not via save function.
|
||||
*/
|
||||
save: () => {
|
||||
return <InnerBlocks.Content />;
|
||||
},
|
||||
} );
|
||||
|
|
@ -263,6 +263,10 @@ const getMainConfig = ( options = {} ) => {
|
|||
from: './assets/js/blocks/checkout/block.json',
|
||||
to: './checkout/block.json',
|
||||
},
|
||||
{
|
||||
from: './assets/js/blocks/featured-product/block.json',
|
||||
to: './featured-product/block.json',
|
||||
},
|
||||
],
|
||||
} ),
|
||||
],
|
||||
|
|
|
|||
|
|
@ -15,21 +15,12 @@ class FeaturedProduct extends AbstractDynamicBlock {
|
|||
protected $block_name = 'featured-product';
|
||||
|
||||
/**
|
||||
* Default attribute values, should match what's set in JS `registerBlockType`.
|
||||
* Default attribute values.
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
protected $defaults = array(
|
||||
'align' => 'none',
|
||||
'contentAlign' => 'center',
|
||||
'dimRatio' => 50,
|
||||
'focalPoint' => false,
|
||||
'imageFit' => 'none',
|
||||
'mediaId' => 0,
|
||||
'mediaSrc' => '',
|
||||
'minHeight' => 500,
|
||||
'showDesc' => true,
|
||||
'showPrice' => true,
|
||||
'align' => 'none',
|
||||
);
|
||||
|
||||
/**
|
||||
|
|
@ -37,7 +28,16 @@ class FeaturedProduct extends AbstractDynamicBlock {
|
|||
*
|
||||
* @var array
|
||||
*/
|
||||
protected $global_style_wrapper = array( 'text_color', 'font_size', 'border_color', 'border_radius', 'border_width', 'background_color', 'text_color', 'padding' );
|
||||
protected $global_style_wrapper = array(
|
||||
'text_color',
|
||||
'font_size',
|
||||
'border_color',
|
||||
'border_radius',
|
||||
'border_width',
|
||||
'background_color',
|
||||
'text_color',
|
||||
'padding',
|
||||
);
|
||||
|
||||
/**
|
||||
* Get the supports array for this block type.
|
||||
|
|
@ -147,7 +147,7 @@ class FeaturedProduct extends AbstractDynamicBlock {
|
|||
if ( ! empty( $image ) ) {
|
||||
return sprintf(
|
||||
'<img alt="%1$s" class="wc-block-featured-product__background-image" src="%2$s" style="%3$s" />',
|
||||
wp_kses_post( $attributes['alt'] ?? $product->get_name() ),
|
||||
wp_kses_post( $attributes['alt'] ?: $product->get_name() ),
|
||||
esc_url( $image ),
|
||||
$style
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue