woocommerce/plugins/woocommerce-blocks/assets/js/blocks/featured-items/register.tsx

101 lines
2.4 KiB
TypeScript
Raw Normal View History

/**
* External dependencies
*/
import { FunctionComponent } from 'react';
import { InnerBlocks } from '@wordpress/block-editor';
import { BlockConfiguration, registerBlockType } from '@wordpress/blocks';
import { getSetting } from '@woocommerce/settings';
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
/**
* Internal dependencies
*/
import { Edit } from './edit';
export function register(
Block: FunctionComponent,
example: { attributes: Record< string, unknown > },
metadata: BlockConfiguration,
settings: Partial< BlockConfiguration >
): void {
const DEFAULT_SETTINGS = {
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: metadata.supports?.color?.background,
text: metadata.supports?.color?.text,
...( isFeaturePluginBuild() && {
__experimentalDuotone:
metadata.supports?.color?.__experimentalDuotone,
} ),
},
spacing: {
padding: metadata.supports?.spacing?.padding,
...( isFeaturePluginBuild() && {
__experimentalDefaultControls: {
padding:
metadata.supports?.spacing
?.__experimentalDefaultControls,
},
__experimentalSkipSerialization:
metadata.supports?.spacing
?.__experimentalSkipSerialization,
} ),
},
...( isFeaturePluginBuild() && {
__experimentalBorder: metadata?.supports?.__experimentalBorder,
} ),
},
};
const DEFAULT_EXAMPLE = {
attributes: {
alt: '',
contentAlign: 'center',
dimRatio: 50,
editMode: false,
hasParallax: false,
isRepeated: false,
height: getSetting( 'default_height', 500 ),
mediaSrc: '',
overlayColor: '#000000',
showDesc: true,
},
};
registerBlockType( metadata, {
...DEFAULT_SETTINGS,
example: {
...DEFAULT_EXAMPLE,
example,
},
/**
* Renders and manages the block.
*
* @param {Object} props Props to pass to block.
*/
edit: Edit( Block ),
/**
* Block content is rendered in PHP, not via save function.
*/
save: () => <InnerBlocks.Content />,
...settings,
} );
}