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

Block Editor: Disable click-through on desktop. #17239

Merged
merged 1 commit into from
Aug 28, 2019

Conversation

epiqueras
Copy link
Contributor

Description

This PR disables inner block click-through on large, >= medium, viewports.

As expressed in #16888 and #17088, click-through degrades the experience on larger viewports. If the viewport is large enough to click on block paddings, we don't need the click-through behavior to edit inner blocks, so it adds unnecessary friction.

That said, we could revisit the feature in another form for a future release.

How has this been tested?

It was verified that click-through is disabled on large, >= medium, viewports.

Types of Changes

New Feature: Disable click-through on larger viewports where just clicking on paddings is viable and requiring multiple clicks to edit inner blocks degrades the experience.

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.

@epiqueras epiqueras added [Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P [Package] Block editor /packages/block-editor labels Aug 28, 2019
@epiqueras epiqueras added this to the Future milestone Aug 28, 2019
@epiqueras epiqueras self-assigned this Aug 28, 2019
Copy link
Contributor

@mcsf mcsf left a comment

Choose a reason for hiding this comment

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

LGTM!

@epiqueras epiqueras merged commit 1b9eed2 into master Aug 28, 2019
@epiqueras epiqueras deleted the update/disable-click-through-on-desktop branch August 28, 2019 22:30
@jasmussen
Copy link
Contributor

Thank you for this! For anyone curious about more context, and what happens next, I'd like to share some here.

The goal of the "clickthrough" (aka parent-first) interface was to make it easy to select any layer of a block that features nesting. Consider the columns block, where you have to select individual columns to set their dimensions. With the clickthrough interface in place, it's trivial to dig through and configure each layer of a block. That's one example, but there is no limit to how deep a block can nest, and when each layer can have properties, it's important to think about how we can provide simple access to each of those layers.

Even if that interface probably still needs refinement — visual feedback, shortcut keys and the like — it's still definitely a layout first interface. Which is only one half of a block editor.

The other half is editing and writing, and unfortunately that experience suffered from the clickthrough interface. Being able to click the label of a deeply nested Button block and edit it is virtually unbeatable as far as editing templates, which are likely to grow in capabilities soon.

So, in the name of refining the clickthrough experience, it's good to disable it for now to give it more time in the oven. Those refinements are tracked in two tickets I'd recommend you watch if you want to follow along:

  1. Visually indicate navigation mode, and make mouse accessible #17088, which suggests splitting the behavior in two tools, one (default) for editing, and one for layouting.
  2. Create breadcrumb bar for selecting parent block #17089, which suggests introducing a breadcrumb bar so even if you never use the layout tool, you can still see the nesting hierarchy and click each layer to go to the block you want to configure.

@SchneiderSam
Copy link

@epiqueras There's something wrong with the milestones. Should that be 6.5? Its marked as "Future" (and some others too): https://github.com/WordPress/gutenberg/issues?q=is%3Aclosed+milestone%3AFuture

@epiqueras
Copy link
Contributor Author

epiqueras commented Aug 30, 2019 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P [Package] Block editor /packages/block-editor
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants