Change instances of FormToggle to use ToggleControl component #4996
Conversation
…ch includes the field label and handles the instance ID automatically.
| <label key="label" htmlFor={ commentsToggleId }>{ __( 'Allow Comments' ) }</label>, | ||
| <FormToggle | ||
| return ( | ||
| <ToggleControl | ||
| key="toggle" |
There was a problem hiding this comment.
This key attribute is no longer necessary since we're not returning an array.
| <FormToggle | ||
| id={ pendingId } | ||
| <ToggleControl | ||
| key="toggle" |
There was a problem hiding this comment.
This key is not necessary.
| return [ | ||
| <label key="label" htmlFor={ pingbacksToggleId }>{ __( 'Allow Pingbacks & Trackbacks' ) }</label>, | ||
| <FormToggle | ||
| <ToggleControl | ||
| key="toggle" |
There was a problem hiding this comment.
This key attribute is no longer necessary since we're not returning an array.
| } | ||
|
|
||
| .blocks-base-control:last-child, | ||
| .blocks-toggle-control > .blocks-base-control__label { |
There was a problem hiding this comment.
I'm concerned how this is tying toggle control to panel components, and am wondering if the desired goal here could be generalized more.
Two thoughts of alternatives:
- Should it be that all
.blocks-base-control__labelwithinPanelRowhave their bottom margin removed? - Should it be that all
ToggleControllabels have their bottom margin removed? (applied intoggle-control/style.scss)
There was a problem hiding this comment.
The general problem (which #4997 also has) is that .blocks-base-control is forcing a margin at the bottom of each control. There isn't any utility class which removes that margin forcing it to be globally removed in this instance, where each control is stacked without any space between.
There was a problem hiding this comment.
Right, but should it be that one or the other of .blocks-base-control and .blocks-base-control__label applies a bottom margin, not both?
There was a problem hiding this comment.
Removing the bottom margin from .blocks-base-control__label is due to their being no bottom margin on these controls as they exist currently (For these controls I'm changing). They have a margin-bottom: 5px when used for block inspector controls, but to not change how they look in this case I removed the margin.
It wouldn't make sense to remove that margin for all controls, as having some margin between the label and input/textarea controls makes sense.
Maybe opting to globally remove the label margin for toggle controls would be the best way forward?
There was a problem hiding this comment.
I think applying globally .blocks-base-control:last-child { margin-bottom: 0 } would make sense, as currently the last control in a series of controls does add some updates unnecessary whitespace.
danielbachhuber
added
the
[Status] Needs More Info
|
@paulwilde Are you still planning to pursue this further? |
|
Closing as stale without response. |
Inspired by #4817, this moves all instances of the FormToggle component to use the ToggleControl component. It also adds a showHint prop to the ToggleControl.