Don't allow to start dragging blocks if a lock all exists #7225

jorgefilipecosta · 2018-06-08T09:52:08Z

Description

Fixes: #7191
Part of a general polishing to get #6993.

If a template lock "all" exists, the block cannot be moved anywhere. In that case, we should not allow drag a block to start. In master we allow the block to dragged around, but it could not be dropped anywhere. This PR's avoids to drag&drop to start in this case.

How has this been tested?

I verified that if no locking exists the blocks can be dragged around.
If template locking = insert the block can be dragged around but not dropped anywhere. This is an existing bug, in this locking, it should be possible to move the block. This bug is going to be addressed in a different PR.
If template locking = all, it is not possible to start the drag& drop in a block.
Verify that if a template lock all exists hover and selects still work as expected.

mtias · 2018-06-13T09:34:32Z

editor/components/block-list/block.js

@@ -646,6 +648,7 @@ const applyWithSelect = withSelect( ( select, { uid, rootUID } ) => {
 		initialPosition: getSelectedBlocksInitialCaretPosition(),
 		isEmptyDefaultBlock: block && isUnmodifiedDefaultBlock( block ),
 		isPreviousBlockADefaultEmptyBlock: previousBlock && isUnmodifiedDefaultBlock( previousBlock ),
+		templateLock,


Should this just be isDraggable or isMovable?

gziolo · 2018-06-13T09:54:31Z

isMovable sounds better if you want to cover both mouse and keyboard actions

jorgefilipecosta · 2018-06-13T15:31:36Z

Thank you for the feedback @mtias and @gziolo I added an isMovable prop.

tofumatt

I think a few documentation tweaks would be good here.

~~Also, "draggable" isn't technically a word. Maybe we could do draggingAllowed, canDrag, or isAllowedToDrag or just anything else that wouldn't upset spellcheck 😉~~

Nevermind, I can see it's already the name of the component and I'm late to that party. Still, a few documentation tweaks requested 😅

tofumatt · 2018-06-18T11:43:02Z

components/draggable/README.md

+
+- Type: `boolean`
+- Required: No
+- Default:  `true`


Double-space in here; could be single.

tofumatt · 2018-06-18T11:45:31Z

components/draggable/README.md

@@ -6,6 +6,14 @@

 The component accepts the following props:

+### draggable
+
+If the component is in a draggable state or not. If false, the component is rendered but it is not possible to drag it. Defaults to true.


"If the component is in a draggable state or not." is a bit confusing, I think the point of this is to set the "dragability" of the block, right? Would this be better as:

### draggable Allow the component to be dragged in the editor; defaults to `true`. If `false`, the component is rendered but it is not possible to drag the component.

Agreed, it's very confusing that Draggable component can't be draggable in some circumstances. Ideally, it shouldn't be rendered at all when it is not draggable.

tofumatt · 2018-06-18T11:46:22Z

editor/components/block-list/block.js

@@ -502,6 +503,7 @@ export class BlockListBlock extends Component {
 						onDragEnd={ this.onDragEnd }
 						isDragging={ dragging }
 						elementId={ blockElementId }
+						draggable={ isMovable } // only in locking all moving blocks is totally impossible


What does this comment mean? I don't quite understand it.

Is there any particular reason why we can't perform the check for isMovable outside of the component?

{ ! isMultiSelected && ( <BlockDraggable ... /> ) }

We already have a precedence here, what is blocking us from adding another check in addition to isMultiSelected?

The main reason is that we depend on the styles set by BlockDraggable. Without BlockDraggable being rendered, it becomes almost impossible to get the delete and ellipsis buttons to appear. When multi-selecting it is not a problem because they appear there all the time even if the mouse is not close to the blocks.
I will try to apply a refactor to the styles.

I will try to apply a refactor to the styles.

That would be awesome, thanks for looking into it 👍

jorgefilipecosta · 2018-06-22T15:04:34Z

Hi @gziolo, @tofumatt I applied your suggestions, and now this PR does not change any existing component. BlockDraggable is rendered when in fact we can move the block.

In order to make not rendering BlockDraggable possible, a CSS rule was added that makes blocks hover and select area not dependent on BlockDraggable being present.

tofumatt

I'm not sure what these comments mean. If they could be clarified the code looks good; I just don't know about the comments.

tofumatt · 2018-06-26T16:57:43Z

editor/components/block-list/style.scss

+
+.editor-block-list__block {
+	@include break-small {
+		// use a wider available space for hovering/selecting on top level blocks


These should use capital "U" and have a period at the end of the sentence 🙂

That said, I'm not sure what this (or the comment below) mean.

Hi, @tofumatt thank you for your review. I updated the comments, let me know if you find the new version of the comments more helpful :)

tofumatt

Looks good!

The new comments totally explain it! There were some whitespace issues and I tweaked the comments. If they look good to you merge away 😄

jasmussen · 2018-06-28T09:49:25Z

editor/components/block-list/style.scss

+		&:before {
+			bottom: 0;
+			content: '';
+			left: -$parent-block-padding - $block-padding;


I really appreciate you making this change, and the intent behind it.

It introduced a small regression, though, as it makes a horizontal scrollbar appear when a block is full-wide.

I discovered this while rebasing #7365. I will implement a fix in that branch, perhaps you can help me review it so we can get it in faster? Thanks.

jorgefilipecosta self-assigned this Jun 8, 2018

jorgefilipecosta changed the title ~~Don't allow to start dragging blocks if a locking lock all exists~~ Don't allow to start dragging blocks if a lock all exists Jun 8, 2018

jorgefilipecosta requested a review from a team June 11, 2018 09:35

mtias reviewed Jun 13, 2018

View reviewed changes

jorgefilipecosta force-pushed the fix/dont-allow-drag-start-if-template-lock-exists branch from ececee1 to 94783cb Compare June 13, 2018 15:12

jorgefilipecosta requested a review from a team June 18, 2018 10:03

tofumatt requested changes Jun 18, 2018

View reviewed changes

jorgefilipecosta force-pushed the fix/dont-allow-drag-start-if-template-lock-exists branch from 94783cb to f393392 Compare June 22, 2018 15:00

jorgefilipecosta force-pushed the fix/dont-allow-drag-start-if-template-lock-exists branch from f393392 to c03559f Compare June 22, 2018 15:05

gziolo added this to the 3.2 milestone Jun 25, 2018

tofumatt reviewed Jun 26, 2018

View reviewed changes

Don't allow to start dragging blocks if a locking lock all exists

1a78cd2

jorgefilipecosta force-pushed the fix/dont-allow-drag-start-if-template-lock-exists branch from c03559f to db5f764 Compare June 26, 2018 17:20

Refact block hover and select css

627beea

jorgefilipecosta force-pushed the fix/dont-allow-drag-start-if-template-lock-exists branch from db5f764 to 627beea Compare June 26, 2018 17:30

docs: Clarify docs and fix whitespace

379ed22

tofumatt approved these changes Jun 26, 2018

View reviewed changes

jorgefilipecosta merged commit d316177 into master Jun 26, 2018

jorgefilipecosta deleted the fix/dont-allow-drag-start-if-template-lock-exists branch June 26, 2018 19:05

jasmussen reviewed Jun 28, 2018

View reviewed changes

jasmussen mentioned this pull request Jun 28, 2018

Allow margins to collapse & refactor block toolbar #7365

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Don't allow to start dragging blocks if a lock all exists #7225

Don't allow to start dragging blocks if a lock all exists #7225

jorgefilipecosta commented Jun 8, 2018 •

edited

Loading

mtias Jun 13, 2018

gziolo commented Jun 13, 2018

jorgefilipecosta commented Jun 13, 2018

tofumatt left a comment •

edited

Loading

tofumatt Jun 18, 2018

tofumatt Jun 18, 2018

gziolo Jun 18, 2018

tofumatt Jun 18, 2018

gziolo Jun 18, 2018 •

edited

Loading

jorgefilipecosta Jun 18, 2018

gziolo Jun 18, 2018

jorgefilipecosta commented Jun 22, 2018

tofumatt left a comment

tofumatt Jun 26, 2018

tofumatt Jun 26, 2018

jorgefilipecosta Jun 26, 2018

tofumatt left a comment

jasmussen Jun 28, 2018

Don't allow to start dragging blocks if a lock all exists #7225

Don't allow to start dragging blocks if a lock all exists #7225

Conversation

jorgefilipecosta commented Jun 8, 2018 • edited Loading

Description

How has this been tested?

Choose a reason for hiding this comment

gziolo commented Jun 13, 2018

jorgefilipecosta commented Jun 13, 2018

tofumatt left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gziolo Jun 18, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jorgefilipecosta commented Jun 22, 2018

tofumatt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tofumatt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jorgefilipecosta commented Jun 8, 2018 •

edited

Loading

tofumatt left a comment •

edited

Loading

gziolo Jun 18, 2018 •

edited

Loading