Skip to content

Block mover hidden when left or right aligned #12736

@michealengland

Description

@michealengland

Describe the bug
Left or right aligned blocks may have hidden move controls if it floated. This looks intentionally added in #10085.

Could be related to #12290

pull quote test

To Reproduce
Steps to reproduce the behavior:

  1. Create a pull quote block.
  2. Left or right align the pull quote block.
  3. Attempt to drag or move the pull quote block.

Expected behavior
Expected the mover controls to be visible when hovering over the pull quote block.

Screenshots
If applicable, add screenshots to help explain your problem.

screen shot 2018-12-09 at 2 45 30 pm

Initial Investigation

  • While a non floated block pull-quote has a class="editor-block-mover is-visible" the block controls display as expected.
  • While a pull quote block is floated left or right and has class="editor-block-mover is-visible" the block move controls are hidden. This is caused by an overflow on the parent container.
//editor/style.css line 349
.editor-block-list__layout .editor-block-list__block[data-align="left"] .editor-block-mover, .editor-block-list__layout .editor-block-list__block[data-align="left"] .editor-block-list__block-mobile-toolbar, .editor-block-list__layout .editor-block-list__block[data-align="right"] .editor-block-mover, .editor-block-list__layout .editor-block-list__block[data-align="right"] .editor-block-list__block-mobile-toolbar {
    display: none;
}

Turning off display none will display the block menu controls. However, the controls disappear while visible for the paragraph block that the pull quote is floated around.

You can get the block working properly again by changing left: -30px to `left: 0;'. However, the movement controls will display in an awkward place.

screen shot 2018-12-09 at 3 03 29 pm

.editor-block-list__block > .editor-block-mover {
    padding-right: 2px;
    // left: -30px;
    left: 0; // moves the block back in the container.
    display: none;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions