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.

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 width control to separator block #16925

Open
wants to merge 1 commit into
base: master
from

Conversation

@senadir
Copy link
Contributor

commented Aug 6, 2019

Description

follow up to #16784
tackles a point from #16483

this PR adds width control to separator block

How has this been tested?

create separator components in master
switch to this branch
see if no problems happens

Screenshots

separator-width

Problems

  • themes using max-width on the hr will have to stop in order for those changes to be visible
  • in renders full-width useless since that style currently doesn't relay on anything to have it 100%

Changes

  • introduce a new starting width of 25% instead of the 100px.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
@senadir

This comment has been minimized.

Copy link
Contributor Author

commented Aug 6, 2019

this PR had alignment support ready but it was removed in the last moment because of clearfix problems, alignment relayed on floating the hr, but using float seems to cause clearing problems, if anyone have any experience with this, please tell me
image

import {
InspectorControls,
withColors,
PanelColorSettings,
} from '@wordpress/block-editor';

function SeparatorEdit( { color, setColor, className } ) {
function SeparatorEdit( { color, setColor, className, attributes, setAttributes } ) {
const { width = 25 } = attributes;

This comment has been minimized.

Copy link
@jorgefilipecosta

jorgefilipecosta Aug 6, 2019

Member

Should we create a constant at the top of the file for the default width (25)?

} }
/>
<InspectorControls>
<PanelBody title={ __( 'Separator Settings' ) }>
<RangeControl
label={ __( 'Percentage width' ) }

This comment has been minimized.

Copy link
@jorgefilipecosta

jorgefilipecosta Aug 6, 2019

Member

Range control has a initialPosition property https://github.com/WordPress/gutenberg//blob/1e40b281d1db725e512e383b5e00f3b59e333d5a/packages/components/src/range-control/README.md. when the value is unset the property allows the range to be in a give position e.g: 25, but the input is empty to allow the user to differentiate between the state the user set the width to 25 (inline style added) the user did not set any width but currently the default is 25 (no inline style is added).
Would it make sense to use this mechanism here?

@jasmussen

This comment has been minimized.

Copy link
Contributor

commented Aug 7, 2019

Similar to feedback in #16928 (comment), I wonder if this should be added to the Separator block, or be reserved for the Divider block (and similar to my comment there, this PR is equally impressive 💥).

This is more in a gray territory though, because the feature definitely applies to the Separator block globally. I'll leave the "needs design feedback" label on, to gather some more thoughts.

@kjellr

This comment has been minimized.

Copy link
Contributor

commented Aug 7, 2019

This is more in a gray territory though, because the feature definitely applies to the Separator block globally. I'll leave the "needs design feedback" label on, to gather some more thoughts.

A hesitancy I have around this one is whether it's actually likely to be used. This seems like the sort of thing that would more ideally be adjusted globally for a site, not individually for each separator block.

As noted in the description, it'll also require some theme patches in some cases. I'm not sure that's entirely worth if if users aren't likely to use this feature. (This may just be a bug, but) this appears to overwrite some defaults provided by theme — for example, the "wide" variant in Twenty Nineteen no longer takes over the full width by default:

Screen Shot 2019-08-07 at 10 04 02 AM

@senadir

This comment has been minimized.

Copy link
Contributor Author

commented Aug 7, 2019

@kjellr I completely understand that this might require some changes, it's mostly those themes might need to readjust around those new features (an !important for example might be required).
but as you said, I question the need for such deep customization and a site wide settings does seems more appropriate.
still waiting for feedback from @mtias to see if we should drop this feature or take it to another block

@shaunandrews

This comment has been minimized.

Copy link

commented Aug 7, 2019

What if we added a drag handle to manipulate the width right from the canvas — in addition to, or instead of, the Range control in the sidebar?

@senadir

This comment has been minimized.

Copy link
Contributor Author

commented Aug 7, 2019

@shaunandrews that would be as easy as wrapping the block in a ResizableBox I might do it tomorrow, but I will hold on to see if we should move to a divider or not

@jasmussen

This comment has been minimized.

Copy link
Contributor

commented Aug 8, 2019

Probably addition to, as we'll always want to have a purely keyboard accessible interface for anything we do.

@BinaryMoon

This comment has been minimized.

Copy link

commented Aug 9, 2019

I'm not convinced this is a good thing. I can't imagine many people wanting or needing fine grained control over the width of a hr, and having this would open up the likelihood of there being inconsistent separator widths across the site.

Having a global width setting that gets applied consistently across the site makes more sense to me.

@mapk

This comment has been minimized.

Copy link
Contributor

commented Aug 20, 2019

I think we should hold off on this feature as an individual block setting. I'd agree that this feels much more inline with a global setting instead.

@senadir

This comment has been minimized.

Copy link
Contributor Author

commented Aug 20, 2019

@mapk does it make sense to converge it to a shape divider block or just mark this with stale?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
7 participants
You can’t perform that action at this time.