Skip to content

Commit

Permalink
First pass at padding support
Browse files Browse the repository at this point in the history
  • Loading branch information
@stacimc
stacimc committed May 27, 2021
1 parent 5888c97 commit 584853c
Show file tree
Hide file tree
Showing 2 changed files with 203 additions and 9 deletions.
169 changes: 168 additions & 1 deletion packages/block-library/src/button/controls.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,30 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { InspectorControls, BlockControls } from '@wordpress/block-editor';
import {
InspectorControls,
BlockControls,
useSetting,
} from '@wordpress/block-editor';
import {
PanelBody,
RangeControl,
ToolbarGroup,
ToolbarButton,
BottomSheetSelectControl,
UnitControl,
getValueAndUnit,
__experimentalUseCustomUnits as useCustomUnits,
} from '@wordpress/components';

import { link } from '@wordpress/icons';

/**
* Internal dependencies
*/
import ColorEdit from './color-edit';
import styles from './editor.scss';
import { cleanEmptyObject } from '../../../block-editor/src/hooks/utils';

const MIN_BORDER_RADIUS_VALUE = 0;
const MAX_BORDER_RADIUS_VALUE = 50;
Expand Down Expand Up @@ -55,6 +65,157 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
);
}

const PaddingInputs = ( props ) => {
const {
values,
units,
sides,
onChange,
onChangeUnits,
unitOptions,
} = props;

const LABELS = {
top: __( 'Top' ),
bottom: __( 'Bottom' ),
left: __( 'Left' ),
right: __( 'Right' ),
};

const handleOnChange = ( nextValues ) => {
onChange( nextValues );
};

const handleOnChangeUnits = ( nextUnits ) => {
onChangeUnits( nextUnits );
};

const createHandleOnChange = ( side ) => ( next ) => {
const nextValues = { ...values };
nextValues[ side ] = next;
handleOnChange( nextValues );
};

const createHandleOnUnitChange = ( side ) => ( next ) => {
const nextUnits = { ...units };
nextUnits[ side ] = next;
handleOnChangeUnits( nextUnits );
};

return (
<>
{ sides.map( ( side ) => (
<UnitControl
{ ...props }
value={ values[ side ] }
unit={ units[ side ] }
units={ unitOptions }
min={ units[ side ] === 'px' ? 0 : 1 }
max={ 100 }
onChange={ createHandleOnChange( side ) }
onUnitChange={ createHandleOnUnitChange( side ) }
style={ styles.rangeCellContainer }
label={ LABELS[ side ] }
key={ `box-control-${ side }` }
/>
) ) }
</>
);
};

const PaddingPanel = ( props ) => {
const {
attributes: { style },
setAttributes,
defaultPadding,
} = props;

const customPaddingSelections = style?.spacing?.padding || {};

const sides = [ 'top', 'bottom', 'left', 'right' ];
const values = {};
const units = {};

sides.forEach( ( side ) => {
// Get custom padding selection from the style attribute, falling back to default.
const paddingForSide = customPaddingSelections[ side ]
? customPaddingSelections[ side ]
: defaultPadding[ side ];

// Break out into value and unit, as UnitControl for native requires setting unit and value separately.
const { valueToConvert, valueUnit } =
getValueAndUnit( paddingForSide ) || {};
values[ side ] = valueToConvert;
units[ side ] = valueUnit;
} );

const unitOptions = useCustomUnits( {
availableUnits: useSetting( 'spacing.units' ) || [
'px',
'em',
'rem',
'vw',
'vh',
],
defaultValues: { px: '430', em: '20', rem: '20', vw: '20', vh: '50' },
} );

// Update the style object with new padding selections.
const updatePadding = ( nextValues, nextUnits ) => {
const updatedPaddingValues = getValuesWithUnits(
nextValues,
nextUnits
);
const newStyle = {
...style,
spacing: {
...style?.spacing,
padding: {
...updatedPaddingValues,
},
},
};
setAttributes( {
style: cleanEmptyObject( newStyle ),
} );
};

// Get the values with units, for updating the style.
const getValuesWithUnits = ( nextValues, nextUnits ) => {
const valuesWithUnits = {};
sides.forEach( ( side ) => {
valuesWithUnits[
side
] = `${ nextValues[ side ] }${ nextUnits[ side ] }`;
} );

return valuesWithUnits;
};

// Update when a value was changed.
const handleChange = ( nextValues ) => {
updatePadding( nextValues, units );
};

// Update when a unit was changed.
const handleUnitsChange = ( nextUnits ) => {
updatePadding( values, nextUnits );
};

return (
<PanelBody title={ __( 'Padding Settings' ) }>
<PaddingInputs
values={ values }
sides={ sides }
units={ units }
unitOptions={ unitOptions }
onChange={ handleChange }
onChangeUnits={ handleUnitsChange }
/>
</PanelBody>
);
};

export default function Controls( {
attributes,
setAttributes,
Expand All @@ -63,6 +224,7 @@ export default function Controls( {
getLinkSettings,
onShowLinkSettings,
onChangeBorderRadius,
defaultPadding,
} ) {
const { url, width } = attributes;

Expand Down Expand Up @@ -98,6 +260,11 @@ export default function Controls( {
selectedWidth={ width }
setAttributes={ setAttributes }
/>
<PaddingPanel
attributes={ attributes }
setAttributes={ setAttributes }
defaultPadding={ defaultPadding }
/>
<PanelBody title={ __( 'Link Settings' ) }>
{ getLinkSettings( true ) }
</PanelBody>
Expand Down
43 changes: 35 additions & 8 deletions packages/block-library/src/button/edit.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
* External dependencies
*/
import { View, AccessibilityInfo, Platform, Text } from 'react-native';
import { get } from 'lodash';

/**
* WordPress dependencies
*/
Expand All @@ -14,8 +16,12 @@ import {
getColorObjectByAttributeValues,
getGradientValueBySlug,
__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
} from '@wordpress/block-editor';
import { LinkSettingsNavigation } from '@wordpress/components';
import {
LinkSettingsNavigation,
useConvertUnitToMobile,
} from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
import { useEffect, useState, useRef } from '@wordpress/element';

Expand All @@ -37,6 +43,13 @@ const MIN_WIDTH_MARGINS = {
25: styles.button25?.marginLeft,
};

const DEFAULT_PADDING = {
top: '0px',
bottom: '0px',
left: richTextStyle.richText.paddingLeft + 'px',
right: richTextStyle.richText.paddingRight + 'px',
};

const ButtonEdit = ( {
attributes,
colors,
Expand Down Expand Up @@ -314,12 +327,30 @@ const ButtonEdit = ( {
}
};

const { paddingTop: spacing, borderWidth } = styles.defaultButton;
const paddingStyles = getSpacingClassesAndStyles( attributes ).style;

// Convert units for mobile.
const convertedPadding = {
paddingTop: useConvertUnitToMobile(
get( paddingStyles, 'paddingTop', DEFAULT_PADDING.top )
),
paddingBottom: useConvertUnitToMobile(
get( paddingStyles, 'paddingBottom', DEFAULT_PADDING.bottom )
),
paddingLeft: useConvertUnitToMobile(
get( paddingStyles, 'paddingLeft', DEFAULT_PADDING.left )
),
paddingRight: useConvertUnitToMobile(
get( paddingStyles, 'paddingRight', DEFAULT_PADDING.right )
),
};

if ( parentWidth === 0 ) {
return null;
}

const { paddingTop: spacing, borderWidth } = styles.defaultButton;

const borderRadiusValue = Number.isInteger( borderRadius )
? borderRadius
: styles.defaultButton.borderRadius;
Expand Down Expand Up @@ -378,12 +409,7 @@ const ButtonEdit = ( {
onChange={ onChangeText }
style={ {
...richTextStyle.richText,
paddingLeft: isFixedWidth
? 0
: richTextStyle.richText.paddingLeft,
paddingRight: isFixedWidth
? 0
: richTextStyle.richText.paddingRight,
...convertedPadding,
color: textColor,
} }
textAlign={ align }
Expand Down Expand Up @@ -416,6 +442,7 @@ const ButtonEdit = ( {
getLinkSettings={ getLinkSettings }
onShowLinkSettings={ onShowLinkSettings }
onChangeBorderRadius={ onChangeBorderRadius }
defaultPadding={ DEFAULT_PADDING }
/>
) }
</View>
Expand Down

0 comments on commit 584853c

Please sign in to comment.