Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace hardcoded CSS_UNITS and inherit values from theme.json #31822

Merged
merged 13 commits into from
May 19, 2021
Merged

Replace hardcoded CSS_UNITS and inherit values from theme.json #31822

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
4638cc4
Move useCustomUnits
aristath May 13, 2021
a138589
refactor useCustomUnits
aristath May 13, 2021
79918f6
reorder units
aristath May 13, 2021
4dfed69
use layout.units
aristath May 13, 2021
241c175
useCustomUnits in columns
aristath May 13, 2021
313f989
useCustomUnits for cover
aristath May 13, 2021
09ba6b7
useCustomUnits for search
aristath May 13, 2021
6a15ab8
move inside the unit-control component
aristath May 13, 2021
439ad19
move to components & refactor
aristath May 14, 2021
20e17f1
update fontsize
aristath May 14, 2021
c8c8120
remove unstable/experimental units
aristath May 14, 2021
afa56ec
forgot about the native exports
aristath May 14, 2021
e1cad86
Mark the hook as experimental
youknowriad May 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 14 additions & 33 deletions packages/block-editor/src/components/unit-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,27 @@
/**
* WordPress dependencies
*/
import { __experimentalUnitControl as BaseUnitControl } from '@wordpress/components';
import {
__experimentalUseCustomUnits as useCustomUnits,
__experimentalUnitControl as BaseUnitControl,
} from '@wordpress/components';

/**
* Internal dependencies
*/
import useSetting from '../use-setting';

export default function UnitControl( { units: unitsProp, ...props } ) {
const units = useCustomUnits( unitsProp );

return <BaseUnitControl units={ units } { ...props } />;
}

/**
* Filters available units based on values defined by settings.
*
* @param {Array} settings Collection of preferred units.
* @param {Array} units Collection of available units.
*
* @return {Array} Filtered units based on settings.
*/
function filterUnitsWithSettings( settings = [], units = [] ) {
return units.filter( ( unit ) => {
return settings.includes( unit.value );
const units = useCustomUnits( {
availableUnits: useSetting( 'spacing.units' ) || [
'%',
'px',
'em',
'rem',
'vw',
],
units: unitsProp,
} );
}

/**
* Custom hook to retrieve and consolidate units setting from add_theme_support().
*
* @param {Array} units Collection of available units.
*
* @return {Array} Filtered units based on settings.
*/
export function useCustomUnits( units ) {
const availableUnits = useSetting( 'spacing.units' );
const usedUnits = filterUnitsWithSettings(
! availableUnits ? [] : availableUnits,
units
);

return usedUnits.length === 0 ? false : usedUnits;
return <BaseUnitControl units={ units } { ...props } />;
}
45 changes: 13 additions & 32 deletions packages/block-editor/src/hooks/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { has } from 'lodash';
/**
* WordPress dependencies
*/
import { Platform } from '@wordpress/element';
import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
import { addFilter } from '@wordpress/hooks';
import { hasBlockSupport } from '@wordpress/blocks';
Expand All @@ -16,6 +15,7 @@ import {
Button,
ToggleControl,
PanelBody,
__experimentalUseCustomUnits as useCustomUnits,
__experimentalUnitControl as UnitControl,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
Expand All @@ -29,35 +29,6 @@ import { InspectorControls } from '../components';
import useSetting from '../components/use-setting';
import { LayoutStyle } from '../components/block-list/layout';

const isWeb = Platform.OS === 'web';
const CSS_UNITS = [
{
value: '%',
label: isWeb ? '%' : __( 'Percentage (%)' ),
default: '',
},
{
value: 'px',
label: isWeb ? 'px' : __( 'Pixels (px)' ),
default: '',
},
{
value: 'em',
label: isWeb ? 'em' : __( 'Relative to parent font size (em)' ),
default: '',
},
{
value: 'rem',
label: isWeb ? 'rem' : __( 'Relative to root font size (rem)' ),
default: '',
},
{
value: 'vw',
label: isWeb ? 'vw' : __( 'Viewport width (vw)' ),
default: '',
},
];

function LayoutPanel( { setAttributes, attributes } ) {
const { layout = {} } = attributes;
const { wideSize, contentSize, inherit = false } = layout;
Expand All @@ -67,6 +38,16 @@ function LayoutPanel( { setAttributes, attributes } ) {
return getSettings().supportsLayout;
}, [] );

const units = useCustomUnits( {
availableUnits: useSetting( 'layout.units' ) || [
'%',
'px',
'em',
'rem',
'vw',
],
} );

if ( ! themeSupportsLayout ) {
return null;
}
Expand Down Expand Up @@ -103,7 +84,7 @@ function LayoutPanel( { setAttributes, attributes } ) {
},
} );
} }
units={ CSS_UNITS }
units={ units }
/>
<Icon icon={ positionCenter } />
</div>
Expand All @@ -125,7 +106,7 @@ function LayoutPanel( { setAttributes, attributes } ) {
},
} );
} }
units={ CSS_UNITS }
units={ units }
/>
<Icon icon={ stretchWide } />
</div>
Expand Down
45 changes: 13 additions & 32 deletions packages/block-editor/src/hooks/margin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,44 +4,17 @@
import { __ } from '@wordpress/i18n';
import { Platform } from '@wordpress/element';
import { getBlockSupport } from '@wordpress/blocks';
import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
import {
__experimentalUseCustomUnits as useCustomUnits,
__experimentalBoxControl as BoxControl,
} from '@wordpress/components';

/**
* Internal dependencies
*/
import useSetting from '../components/use-setting';
import { SPACING_SUPPORT_KEY, useCustomSides } from './spacing';
import { cleanEmptyObject } from './utils';
import { useCustomUnits } from '../components/unit-control';

const isWeb = Platform.OS === 'web';
const CSS_UNITS = [
{
value: '%',
label: isWeb ? '%' : __( 'Percentage (%)' ),
default: '',
},
{
value: 'px',
label: isWeb ? 'px' : __( 'Pixels (px)' ),
default: '',
},
{
value: 'em',
label: isWeb ? 'em' : __( 'Relative to parent font size (em)' ),
default: '',
},
{
value: 'rem',
label: isWeb ? 'rem' : __( 'Relative to root font size (rem)' ),
default: '',
},
{
value: 'vw',
label: isWeb ? 'vw' : __( 'Viewport width (vw)' ),
default: '',
},
];

/**
* Determines if there is margin support.
Expand Down Expand Up @@ -78,7 +51,15 @@ export function MarginEdit( props ) {
setAttributes,
} = props;

const units = useCustomUnits( CSS_UNITS );
const units = useCustomUnits( {
availableUnits: useSetting( 'spacing.units' ) || [
'%',
'px',
'em',
'rem',
'vw',
],
} );
const sides = useCustomSides( blockName, 'margin' );

if ( useIsMarginDisabled( props ) ) {
Expand Down
45 changes: 13 additions & 32 deletions packages/block-editor/src/hooks/padding.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,44 +4,17 @@
import { __ } from '@wordpress/i18n';
import { Platform } from '@wordpress/element';
import { getBlockSupport } from '@wordpress/blocks';
import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
import {
__experimentalUseCustomUnits as useCustomUnits,
__experimentalBoxControl as BoxControl,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes me wonder why these hooks (margin, padding) are not using the UnitControl component from the block editor components directly.

} from '@wordpress/components';

/**
* Internal dependencies
*/
import useSetting from '../components/use-setting';
import { SPACING_SUPPORT_KEY, useCustomSides } from './spacing';
import { cleanEmptyObject } from './utils';
import { useCustomUnits } from '../components/unit-control';

const isWeb = Platform.OS === 'web';
const CSS_UNITS = [
{
value: '%',
label: isWeb ? '%' : __( 'Percentage (%)' ),
default: '',
},
{
value: 'px',
label: isWeb ? 'px' : __( 'Pixels (px)' ),
default: '',
},
{
value: 'em',
label: isWeb ? 'em' : __( 'Relative to parent font size (em)' ),
default: '',
},
{
value: 'rem',
label: isWeb ? 'rem' : __( 'Relative to root font size (rem)' ),
default: '',
},
{
value: 'vw',
label: isWeb ? 'vw' : __( 'Viewport width (vw)' ),
default: '',
},
];

/**
* Determines if there is padding support.
Expand Down Expand Up @@ -79,7 +52,15 @@ export function PaddingEdit( props ) {
setAttributes,
} = props;

const units = useCustomUnits( CSS_UNITS );
const units = useCustomUnits( {
availableUnits: useSetting( 'spacing.units' ) || [
'%',
'px',
'em',
'rem',
'vw',
],
} );
const sides = useCustomSides( blockName, 'padding' );

if ( useIsPaddingDisabled( props ) ) {
Expand Down
19 changes: 13 additions & 6 deletions packages/block-library/src/column/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,18 @@ import {
BlockVerticalAlignmentToolbar,
InspectorControls,
useBlockProps,
useSetting,
__experimentalUseInnerBlocksProps as useInnerBlocksProps,
store as blockEditorStore,
} from '@wordpress/block-editor';
import {
__experimentalUseCustomUnits as useCustomUnits,
PanelBody,
__experimentalUnitControl as UnitControl,
} from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { sprintf, __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import { CSS_UNITS } from '../columns/utils';

function ColumnEdit( {
attributes: { verticalAlignment, width, templateLock = false },
setAttributes,
Expand All @@ -36,6 +33,16 @@ function ColumnEdit( {
[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
} );

const units = useCustomUnits( {
availableUnits: useSetting( 'layout.units' ) || [
'%',
'px',
'em',
'rem',
'vw',
],
} );

const { columnsIds, hasChildBlocks, rootClientId } = useSelect(
( select ) => {
const { getBlockOrder, getBlockRootClientId } = select(
Expand Down Expand Up @@ -111,7 +118,7 @@ function ColumnEdit( {
0 > parseFloat( nextWidth ) ? '0' : nextWidth;
setAttributes( { width: nextWidth } );
} }
units={ CSS_UNITS }
units={ units }
/>
</PanelBody>
</InspectorControls>
Expand Down
15 changes: 13 additions & 2 deletions packages/block-library/src/column/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,15 @@ import {
BlockVerticalAlignmentToolbar,
InspectorControls,
store as blockEditorStore,
useSetting,
} from '@wordpress/block-editor';
import {
PanelBody,
FooterMessageControl,
UnitControl,
getValueAndUnit,
alignmentHelpers,
__experimentalUseCustomUnits as useCustomUnits,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
/**
Expand All @@ -33,7 +35,6 @@ import {
getWidths,
getWidthWithUnit,
isPercentageUnit,
CSS_UNITS,
} from '../columns/utils';

const { isWider } = alignmentHelpers;
Expand Down Expand Up @@ -63,6 +64,16 @@ function ColumnEdit( {

const [ widthUnit, setWidthUnit ] = useState( valueUnit || '%' );

const units = useCustomUnits( {
availableUnits: useSetting( 'layout.units' ) || [
'%',
'px',
'em',
'rem',
'vw',
],
} );

const updateAlignment = ( alignment ) => {
setAttributes( { verticalAlignment: alignment } );
};
Expand Down Expand Up @@ -169,7 +180,7 @@ function ColumnEdit( {
getWidths( columns )[ selectedColumnIndex ]
}
unit={ widthUnit }
units={ CSS_UNITS }
units={ units }
preview={
<ColumnsPreview
columnWidths={ getWidths(
Expand Down
Loading