Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Mini Cart Contents block: set minimum width (https://github.com/woocommerce/woocommerce-blocks/pull/9196) 

* Mini Cart Contents block: set minimum width

* Mini Cart Contents block: allow changing the width only in the feature plugin

* Allow resetting the Mini Cart Contents width to the default

* Update assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx

Co-authored-by: Karol Manijak <karol.manijak@automattic.com>

---------

Co-authored-by: Karol Manijak <karol.manijak@automattic.com>
This commit is contained in:
Albert Juhé Lluveras 2023-04-25 18:54:35 +02:00 committed by GitHub
parent 1673fcb3c2
commit 96bd0432cd
1 changed files with 41 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx
View File

@ -8,9 +8,10 @@ import {
InspectorControls,
} from '@wordpress/block-editor';
import { EditorProvider } from '@woocommerce/base-context';
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
import type { TemplateArray } from '@wordpress/blocks';
import { useEffect } from '@wordpress/element';
import type { ReactElement } from 'react';
import type { FocusEvent, ReactElement } from 'react';
import { __ } from '@wordpress/i18n';
import {
PanelBody,
@ -31,6 +32,7 @@ const ALLOWED_BLOCKS = [
'woocommerce/filled-mini-cart-contents-block',
'woocommerce/empty-mini-cart-contents-block',
];
const MIN_WIDTH = 300;
interface Props {
clientId: string;
@ -124,26 +126,44 @@ const Edit = ( {
return (
<>
<InspectorControls key="inspector">
<PanelBody
title={ __( 'Dimensions', 'woo-gutenberg-products-block' ) }
initialOpen
>
<UnitControl
onChange={ ( value ) => {
setAttributes( { width: value } );
} }
value={ width }
units={ [
{
value: 'px',
label: 'px',
default: defaultAttributes.width.default,
},
] }
/>
</PanelBody>
</InspectorControls>
{ isFeaturePluginBuild() && (
<InspectorControls key="inspector">
<PanelBody
title={ __(
'Dimensions',
'woo-gutenberg-products-block'
) }
initialOpen
>
<UnitControl
onChange={ ( value ) => {
setAttributes( { width: value } );
} }
onBlur={ ( e: FocusEvent< HTMLInputElement > ) => {
if ( e.target.value === '' ) {
setAttributes( {
width: defaultAttributes.width.default,
} );
} else if (
Number( e.target.value ) < MIN_WIDTH
) {
setAttributes( {
width: MIN_WIDTH + 'px',
} );
}
} }
value={ width }
units={ [
{
value: 'px',
label: 'px',
default: defaultAttributes.width.default,
},
] }
/>
</PanelBody>
</InspectorControls>
) }
<div
className="wc-block-components-drawer__screen-overlay"
aria-hidden="true"