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