-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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.
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
Add DimensionControl
component
#16791
Merged
Merged
Changes from all commits
Commits
Show all changes
27 commits
Select commit
Hold shift + click to select a range
2fcb86f
Adds initial component
getdave 56e0670
Remove redunant files. Refactors tests.
getdave 3f2bade
Updates docs
getdave 1acb0a3
Checks callbacks are functions prior to calling
getdave 51d5575
Adds temp testing example usage of component to Group Block
getdave 61d25ee
Updates to allow sizes as an (optionaly) prop dependency
getdave 09a54ec
Update default value label
getdave 0a6864e
Removes unnecessary InstanceId HOC usage
getdave 591979c
Remove unused abbreviation in size table
getdave 46aeac6
Revert "Adds temp testing example usage of component to Group Block"
getdave 4d21bb7
Remove arbitrary size value from sizes list
getdave 3feb767
Remove icon label for a11y reasons
getdave da1c0ff
Update component docs for consistency, spelling and grammar
getdave 93f5dd1
Tweak docblock formats
getdave 93a2929
Update test snapshots to match new default value
getdave d3a8924
Update API from onSpacingChange to more agnostic onChange
getdave 196a8ae
Update tests to cover onChange handler renamed
getdave fc8f003
Update currentSize prop to value for consistency with other components
getdave dbe7a4f
Removes onReset in favour of onChange with undefined for consistency
getdave d36ac83
Move component to @wordpress/components package
getdave 4cea8ad
Remove invalid font sizes style import
getdave 70bc609
Deps update due to rebase
getdave 1a4f6af
Remove unneeded doc blocks
getdave f1d67fc
Remove usage suggestion which was not helpful
getdave 387a993
Update readme docs to match current API
getdave a0b2dca
Export as experimental component
getdave d2d8816
Revert "Deps update due to rebase"
getdave File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,120 @@ | ||
DimensionControl | ||
============================= | ||
|
||
`DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions. | ||
|
||
## Usage | ||
|
||
In a block's `edit` implementation, render a `<DimensionControl />` component. | ||
|
||
|
||
```jsx | ||
import { registerBlockType } from '@wordpress/blocks'; | ||
import { __ } from '@wordpress/i18n'; | ||
import { | ||
DimensionControl, | ||
} from '@wordpress/block-editor'; | ||
|
||
registerBlockType( 'my-plugin/my-block', { | ||
// ... | ||
|
||
attributes: { | ||
// other attributes here | ||
// ... | ||
|
||
paddingSize: { | ||
type: 'string', | ||
}, | ||
}, | ||
|
||
edit( { attributes, setAttributes, clientId } ) { | ||
|
||
const { paddingSize } = attributes; | ||
|
||
|
||
const updateSpacing = ( dimension, size, device = '' ) => { | ||
setAttributes( { | ||
[ `${ dimension }${ device }` ]: size, | ||
} ); | ||
}; | ||
|
||
return ( | ||
<DimensionControl | ||
label={ __( 'Padding' ) } | ||
icon={ 'desktop' } | ||
onChange={ partialRight( updateSpacing, 'paddingSize' ) } | ||
value={ paddingSize } | ||
/> | ||
); | ||
} | ||
} ); | ||
``` | ||
|
||
_Note:_ it is recommended to partially apply the value of the Block attribute to be updated (eg: `paddingSize`, `marginSize`...etc) to your callback functions. This avoids the need to unnecessarily couple the component to the Block attribute schema. | ||
|
||
_Note:_ by default, if you do not provide an initial `value` prop for the current dimension value, then no value will be selected (ie: there is no default dimension set). | ||
|
||
## Props | ||
|
||
### `label` | ||
* **Type:** `String` | ||
* **Default:** `undefined` | ||
* **Required:** Yes | ||
|
||
The human readable label for the control. | ||
|
||
### `value` | ||
* **Type:** `String` | ||
* **Default:** `''` | ||
* **Required:** No | ||
|
||
The current value of the dimension UI control. If provided the UI with automatically select the value. | ||
|
||
### `sizes` | ||
* **Type:** `Array` | ||
* **Default:** See `packages/block-editor/src/components/dimension-control/sizes.js` | ||
* **Required:** No | ||
|
||
An optional array of size objects in the following shape: | ||
|
||
``` | ||
[ | ||
{ | ||
name: __( 'Small' ), | ||
slug: 'small', | ||
}, | ||
{ | ||
name: __( 'Medium' ), | ||
slug: 'small', | ||
}, | ||
// ...etc | ||
] | ||
``` | ||
|
||
By default a set of relative sizes (`small`, `medium`...etc) are provided. See `packages/block-editor/src/components/dimension-control/sizes.js`. | ||
|
||
### `icon` | ||
* **Type:** `String` | ||
* **Default:** `undefined` | ||
* **Required:** No | ||
|
||
An optional dashicon to display before to the control label. | ||
|
||
### `onChange` | ||
* **Type:** `Function` | ||
* **Default:** `undefined` | ||
* **Required:** No | ||
* **Arguments:**: | ||
- `size` - a string representing the selected size (eg: `medium`) | ||
|
||
A callback which is triggered when a spacing size value changes (is selected/clicked). | ||
|
||
|
||
### `className` | ||
* **Type:** `String` | ||
* **Default:** `''` | ||
* **Required:** No | ||
|
||
A string of classes to be added to the control component. | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import classnames from 'classnames'; | ||
import { isFunction } from 'lodash'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
/** | ||
* Internal dependencies | ||
*/ | ||
import { | ||
Icon, | ||
SelectControl, | ||
} from '../'; | ||
import { __ } from '@wordpress/i18n'; | ||
|
||
import { | ||
Fragment, | ||
} from '@wordpress/element'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import sizesTable, { findSizeBySlug } from './sizes'; | ||
|
||
export function DimensionControl( props ) { | ||
const { label, value, sizes = sizesTable, icon, onChange, className = '' } = props; | ||
|
||
const onChangeSpacingSize = ( val ) => { | ||
const theSize = findSizeBySlug( sizes, val ); | ||
|
||
if ( ! theSize || value === theSize.slug ) { | ||
onChange( undefined ); | ||
} else if ( isFunction( onChange ) ) { | ||
onChange( theSize.slug ); | ||
} | ||
}; | ||
|
||
const formatSizesAsOptions = ( theSizes ) => { | ||
const options = theSizes.map( ( { name, slug } ) => ( { | ||
label: name, | ||
value: slug, | ||
} ) ); | ||
|
||
return [ { | ||
label: __( 'Default' ), | ||
value: '', | ||
} ].concat( options ); | ||
}; | ||
|
||
const selectLabel = ( | ||
<Fragment> | ||
{ icon && ( | ||
<Icon | ||
icon={ icon } | ||
/> | ||
) } | ||
{ label } | ||
</Fragment> | ||
); | ||
|
||
return ( | ||
<SelectControl | ||
className={ classnames( className, 'block-editor-dimension-control' ) } | ||
label={ selectLabel } | ||
hideLabelFromVision={ false } | ||
value={ value } | ||
onChange={ onChangeSpacingSize } | ||
options={ formatSizesAsOptions( sizes ) } | ||
/> | ||
); | ||
} | ||
|
||
export default DimensionControl; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
/** | ||
* Sizes | ||
* | ||
* defines the sizes used in dimension controls | ||
* all hardcoded `size` values are based on the value of | ||
* the Sass variable `$block-padding` from | ||
* `packages/block-editor/src/components/dimension-control/sizes.js`. | ||
*/ | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { __ } from '@wordpress/i18n'; | ||
|
||
/** | ||
* Finds the correct size object from the provided sizes | ||
* table by size slug (eg: `medium`) | ||
* | ||
* @param {Array} sizes containing objects for each size definition | ||
* @param {string} slug a string representation of the size (eg: `medium`) | ||
* @return {Object} the matching size definition | ||
*/ | ||
export const findSizeBySlug = ( sizes, slug ) => sizes.find( ( size ) => slug === size.slug ); | ||
|
||
export default [ | ||
{ | ||
name: __( 'None' ), | ||
slug: 'none', | ||
}, | ||
{ | ||
name: __( 'Small' ), | ||
slug: 'small', | ||
}, | ||
{ | ||
name: __( 'Medium' ), | ||
slug: 'medium', | ||
}, | ||
{ | ||
name: __( 'Large' ), | ||
slug: 'large', | ||
}, { | ||
name: __( 'Extra Large' ), | ||
slug: 'xlarge', | ||
}, | ||
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
.block-editor-dimension-control { | ||
|
||
.components-base-control__field { | ||
display: flex; | ||
align-items: center; | ||
} | ||
|
||
.components-base-control__label { | ||
display: flex; | ||
align-items: center; | ||
margin-right: 1em; | ||
margin-bottom: 0; | ||
|
||
.dashicon { | ||
margin-right: 0.5em; | ||
} | ||
} | ||
|
||
&.is-manual .components-base-control__label { | ||
width: 10em; | ||
} | ||
} |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm personally a bit hesitant on making this a public component in
@wordpress/components
.The
@wordpress/components
package is basically the design system while this is more something for the editor, maybe something for theblock-editor
package?What do you all think about moving this to the block-editor package or making it experimental?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nvm, I just saw that it's already experimental :) I wonder if we should move it to the block-editor and stabilize it once we use it a block.