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

Adds dimension controls to Group Block #16730

Closed
wants to merge 43 commits into from
Closed

Adds dimension controls to Group Block #16730

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
1567db0
Adds basic dimension controls to Group Block
getdave Jul 24, 2019
b072dd6
Moves Dim Control to block editor package. Makes size class based rat…
getdave Jul 24, 2019
e75ac86
Moves sizes config to seperate file. Introduces tooltip on size buttons
getdave Jul 24, 2019
851272d
Adds aria pressed support to size buttons
getdave Jul 24, 2019
e8ea617
Improve i18n of strings.
getdave Jul 24, 2019
cca7e68
Renames Huge to Xlarge and adds ability to provide abbr for a11y reasons
getdave Jul 24, 2019
dbd6cdb
Adds reset button to UI
getdave Jul 24, 2019
0574e47
Align UI closer to mockup provided by @kjell
getdave Jul 24, 2019
672c51b
Add Responsive Controls and Attributes
getdave Jul 24, 2019
d59d196
Move Group Inspector to dedicated component
getdave Jul 25, 2019
e63ed10
Remove dependence on clientID to make component more portable and gen…
getdave Jul 25, 2019
4babcb6
Adds doc blocks
getdave Jul 25, 2019
f26ad45
Moves findSizeBySlug util function into sizes file
getdave Jul 25, 2019
11b476c
Adds basics tests
getdave Jul 25, 2019
7d92083
Adds component docs
getdave Jul 25, 2019
45f7aa1
Update to decouple DimensionControl component from knowledge of Block…
getdave Jul 25, 2019
d1b3aa8
Utilise withInstanceId HOC to remove need for id prop
getdave Jul 26, 2019
5d5d198
Updates size buttons for improved comprehension and a11y
getdave Jul 26, 2019
d30b760
Updates UI in response to designer feedback
getdave Jul 26, 2019
f94a15e
Update to utilise dropdown for UI. Improve alignment. Move toggle bel…
getdave Jul 29, 2019
28ca9b4
Remove duplicate Dimension Control
getdave Nov 1, 2019
8d41a49
Refactor dimension controls to use new experimental components
getdave Nov 1, 2019
9923154
Removes Dimension Control docs
getdave Nov 1, 2019
cc3277b
Updates to handle resetting values when toggling responsive mode.
getdave Nov 1, 2019
ad7325b
Adds icons to padding controls
getdave Nov 1, 2019
325c45a
Remove “screens” from viewport labels as already in aria description
getdave Nov 1, 2019
08d1dee
Fix to ensure labels and fields align right hand edges correctly
getdave Nov 1, 2019
3f9579a
Removes responsive setup
getdave Jan 6, 2020
4095617
Remove all responsive CSS styles
getdave Jan 6, 2020
e200219
Add margin and i18n
getdave Jan 6, 2020
44575ec
Adds help text to Dimension Control block
getdave Jan 6, 2020
223ee9a
Adds help notice to Margin controls.
getdave Jan 6, 2020
fd3741f
Update snapshots.
getdave Jan 6, 2020
3c96458
Updates to coolocate all attributes in block.json
getdave Jan 6, 2020
9ad9c74
Update full content integration tests
getdave Jan 6, 2020
e849702
Remove unwanted help text
getdave Feb 24, 2020
af88337
Restore enhancements lost during rebase
getdave Feb 24, 2020
3f516ae
Revert unwanted change to Responsive Controls
getdave Feb 24, 2020
7678379
Remove random new line
getdave Feb 24, 2020
a9bed02
Remove deprecated file reintroduced via rebase
getdave Feb 24, 2020
0a6eec9
Adds help text to controls
getdave Feb 24, 2020
cec67bf
Add padding and margin to saved Block for use on frontend
getdave Feb 24, 2020
f6ec10c
Add subtle animation to margin/padding within Editor only
getdave Feb 24, 2020
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
16 changes: 16 additions & 0 deletions packages/block-library/src/group/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,22 @@
},
"customTextColor": {
"type": "string"
},
"paddingUnit": {
"type": "string",
"default": "px"
},
"paddingSize": {
"type": "string",
"default": ""
},
"marginUnit": {
"type": "string",
"default": "px"
},
"marginSize": {
"type": "string",
"default": ""
}
}
}
71 changes: 68 additions & 3 deletions packages/block-library/src/group/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,29 @@
/**
* External dependencies
*/
import { partialRight } from 'lodash';
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { withSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';
import { InnerBlocks, __experimentalUseColors } from '@wordpress/block-editor';
import {
InnerBlocks,
__experimentalUseColors,
InspectorControls,
} from '@wordpress/block-editor';
import { useRef } from '@wordpress/element';

function GroupEdit( { hasInnerBlocks, className } ) {
import {
PanelBody,
__experimentalDimensionControl as DimensionControl,
} from '@wordpress/components';

import { __ } from '@wordpress/i18n';

function GroupEdit( { hasInnerBlocks, className, attributes, setAttributes } ) {
const ref = useRef();
const {
TextColor,
Expand All @@ -23,12 +40,60 @@ function GroupEdit( { hasInnerBlocks, className } ) {
}
);

/**
* Updates the spacing attribute for a given dimension
* (and optionally a given viewport)
*
* @param {string} size a slug representing a dimension size (eg: `medium`)
* @param {string} dimensionAttr the dimension attribute for a property (eg: `paddingSize`)
* @return {void}
*/
const updateSpacing = ( size, dimensionAttr ) => {
setAttributes( {
[ dimensionAttr ]: size,
} );
};

const hasPadding = !! attributes.paddingSize;
const hasMargin = !! attributes.marginSize;

const classes = classnames( className, {
'has-padding': hasPadding,
'has-margin': hasMargin,
[ `padding-${ attributes.paddingSize }` ]: hasPadding,
[ `margin-${ attributes.marginSize }` ]: hasMargin,
} );

return (
<>
{ InspectorControlsColorPanel }
<InspectorControls>
<PanelBody title={ __( 'Spacing' ) }>
<DimensionControl
label={ __( 'Padding' ) }
value={ attributes.paddingSize }
onChange={ partialRight(
updateSpacing,
'paddingSize'
) }
help={ __(
'Adjust spacing around content within the block.'
) }
/>

<DimensionControl
label={ __( 'Margin' ) }
value={ attributes.marginSize }
onChange={ partialRight( updateSpacing, 'marginSize' ) }
help={ __(
'Adjust spacing on the sides of the block.'
) }
/>
</PanelBody>
</InspectorControls>
<BackgroundColor>
<TextColor>
<div className={ className } ref={ ref }>
<div className={ classes } ref={ ref }>
<div className="wp-block-group__inner-container">
<InnerBlocks
renderAppender={
Expand Down
7 changes: 7 additions & 0 deletions packages/block-library/src/group/save.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ export default function save( { attributes } ) {
customTextColor,
} = attributes;

const hasPadding = !! attributes.paddingSize;
const hasMargin = !! attributes.marginSize;

const backgroundClass = getColorClassName(
'background-color',
backgroundColor
Expand All @@ -24,6 +27,10 @@ export default function save( { attributes } ) {
const className = classnames( backgroundClass, textClass, {
'has-text-color': textColor || customTextColor,
'has-background': backgroundColor || customBackgroundColor,
'has-padding': hasPadding,
'has-margin': hasMargin,
[ `padding-${ attributes.paddingSize }` ]: hasPadding,
[ `margin-${ attributes.marginSize }` ]: hasMargin,
} );

const styles = {
Expand Down
51 changes: 51 additions & 0 deletions packages/block-library/src/group/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,54 @@
margin-bottom: 0;
}
}

.wp-block-group {

.editor-styles-wrapper & {
// Adds animation to improve abilty for users to perceive
// the change occuring within the Editor
@include reduce-motion("transition");
transition: 0.2s ease-out;
transition-property: margin, padding;
}

Copy link
Contributor

Choose a reason for hiding this comment

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

This is going to be really difficult for themes to override if they need to: there are a ton of different breakpoint/margin/padding combinations, and I worry that the theme would essentially need to rewrite all of them. This should work out of the box in many themes (it seems to be okay in Twenty Nineteen based on my testing), but will definitely break some too. For instance, allowing users to adjust the margins in the Gutenberg starter theme causes it to completely fall apart, since it relies on all blocks having auto left and right margins. For that reason, I wonder if this is this "Allow users to control margin and padding for individual blocks" is something that themes opt-in to? Similar to how they opt into wide alignments currently.

On a related note, most themes won't actually use the exact same breakpoints we use here. In #13363, we talked about potentially allowing themes to specify breakpoints for each of these devices. I'm not sure how/if that would best be implemented though. 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is going to be really difficult for themes to override if they need to

I've got to be honest, I've kind of hacked this in, in the hope that someone more famliar with Themes can advise on how best to implement to keep specificity down and allow Themes to extend. I'd greatly value any commits you'd like to push in this direction.

On a related note, most themes won't actually use the exact same breakpoints we use here

Oh god, I didn't think of that. Of course, the Block Editor uses standard breakpoints, but Themes will choose their own.

I agree that we need a way to allow users to opt-in and to specify breakpoints. This seems like a wider project.

What route do we have to allow an initial MVP implementation of Block spacing to be shipped? Or do we need to get the breakpoint registration stuff done first?

Thanks!

Copy link
Contributor

Choose a reason for hiding this comment

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

I've got to be honest, I've kind of hacked this in, in the hope that someone more famliar with Themes can advise on how best to implement to keep specificity down and allow Themes to extend. I'd greatly value any commits you'd like to push in this direction.

I'll have to think about this a little bit. I wonder if @allancole, @laurelfulford, or @davidakennedy has any thoughts too. In general, I think we'll have much more leeway if we make this an opt-in for themes.

What route do we have to allow an initial MVP implementation of Block spacing to be shipped? Or do we need to get the breakpoint registration stuff done first?

I wonder if shipping the automatically-responsive spacing makes the most sense as an MVP. Then we can tackle the breakpoint-specific settings alongside theme-supplied breakpoints in a separate, wider issue.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'll have to think about this a little bit

Thanks 👍

I wonder if shipping the automatically-responsive spacing makes the most sense as an MVP. Then we can tackle the breakpoint-specific settings alongside theme-supplied breakpoints in a separate, wider issue.

Agreed and I think this is what I will do. So MVP will ship with basic controls (no responsive). Then I'll work on branches for

  • a generic component (as seen here but not extracted)
  • the <DimensionControl /> component (as seen here)

Then when we've had a chance to think about the impact of responsive settings on Themes we can look to bring it all together.

Copy link
Member

Choose a reason for hiding this comment

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

Why is this in the theme.scss file if it is an editor-only style?

&.padding-none {
padding: 0;
}

&.padding-small {
padding: $block-padding;
}

&.padding-medium {
padding: $block-padding*2;
}

&.padding-large {
padding: $block-padding*3;
}

&.padding-xlarge {
padding: $block-padding*4;
}

&.margin-none {
margin: 0;
}

&.margin-small {
margin: $block-padding;
}

&.margin-medium {
margin: $block-padding*2;
}

&.margin-large {
margin: $block-padding*3;
}

&.margin-xlarge {
margin: $block-padding*4;
}
}
2 changes: 2 additions & 0 deletions packages/components/src/dimension-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export function DimensionControl( props ) {
icon,
onChange,
className = '',
help = '',
} = props;

const onChangeSpacingSize = ( val ) => {
Expand Down Expand Up @@ -72,6 +73,7 @@ export function DimensionControl( props ) {
value={ value }
onChange={ onChangeSpacingSize }
options={ formatSizesAsOptions( sizes ) }
help={ help }
/>
);
}
Expand Down
11 changes: 9 additions & 2 deletions packages/components/src/dimension-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,20 @@
align-items: center;
margin-right: 1em;
margin-bottom: 0;
width: 10em; // ensure labels and fields align right

.dashicon {
margin-right: 0.5em;
flex-shrink: 0;
}
}

&.is-manual .components-base-control__label {
width: 10em;
.components-base-control__help {
display: flex;
align-items: center;
margin-top: -4px;
margin-left: auto;
margin-bottom: 0;
padding-left: 7em;
}
}
4 changes: 4 additions & 0 deletions packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
exports[`DimensionControl rendering renders with custom sizes 1`] = `
<SelectControl
className="block-editor-dimension-control"
help=""
hideLabelFromVision={false}
label={
<React.Fragment>
Expand Down Expand Up @@ -36,6 +37,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
exports[`DimensionControl rendering renders with defaults 1`] = `
<SelectControl
className="block-editor-dimension-control"
help=""
hideLabelFromVision={false}
label={
<React.Fragment>
Expand Down Expand Up @@ -77,6 +79,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
exports[`DimensionControl rendering renders with icon and custom icon label 1`] = `
<SelectControl
className="block-editor-dimension-control"
help=""
hideLabelFromVision={false}
label={
<React.Fragment>
Expand Down Expand Up @@ -130,6 +133,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
exports[`DimensionControl rendering renders with icon and default icon label 1`] = `
<SelectControl
className="block-editor-dimension-control"
help=""
hideLabelFromVision={false}
label={
<React.Fragment>
Expand Down
6 changes: 5 additions & 1 deletion packages/e2e-tests/fixtures/blocks/core__group.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,11 @@
"isValid": true,
"attributes": {
"backgroundColor": "secondary",
"align": "full"
"align": "full",
"marginSize": "",
"marginUnit": "px",
"paddingSize": "",
"paddingUnit": "px"
},
"innerBlocks": [
{
Expand Down