Block Editor: Add block zooming. #16578

epiqueras · 2019-07-13T20:33:46Z

Description

This PR implements a new block zooming feature that lets you focus the editor on the selected blocks through a button in the block toolbar. Furthermore, if one of the blocks selected has descendant blocks, the editor will unwrap them while it is zoomed.

A button on the top right of the block list lets you zoom back out and also serves as an indicator that the editor is zoomed.

This functionality will be crucial for maintaining the current user experience of editing a post after we move to a setup where post content itself is a block, like in #16485, or we introduce other top level blocks with complex descendant hierarchies. The idea is that users can zoom into a block like post content and edit the unwrapped descendants with the same ease of editing top level blocks. It lets them get around the clunkiness of editing inner blocks.

How has this been tested?

Both single and multi selections were zoomed into, with and without blocks with descendants, and the zooming worked as expected. The button to zoom back out also works as expected.

Screenshots

Types of Changes

New Feature: Add block zooming.

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.

jorgefilipecosta

I generally agree with the usefulness of this functionality, but I wonder if we should call it zoom. Zoom may be associated with magnifying/scaling, while this feature does not necessarily make the selected blocks bigger, it just focus/crops the editor to show them. Maybe focus these blocks would be a way to describe the action?

jorgefilipecosta · 2019-07-14T13:33:01Z

packages/block-editor/src/store/reducer.js

@@ -1228,6 +1247,7 @@ export default combineReducers( {
 	isTyping,
 	isCaretWithinFormattedText,
 	blockSelection,
+	blockZoom,


If I create a group block, add some blocks inside it, select all the blocks inside, zoom them, and then press the undo button the editor crashes.
I guess blockZoom probably needs to be inside blocks reducer branch, so it is covered by undo functionality. As a side note, we should decide if zooming in creates a undo level or not, there are pros and cons of either option. But it is possible to have the functionality working correctly with undos without creating undo levels, like the block selection done in #16428.

Related #12327.

Yes I need to move it, but I don't think it should create an undo level. It's not an edit operation, it's more like selections which we also don't expect to create undo levels.

I plan to give this reducer it's own history so that you can zoom out in steps after zooming in multiple times.

I wonder if it'll be easy to nest 2 reducers with history like that.

jorgefilipecosta · 2019-07-14T13:36:36Z

packages/block-editor/src/components/block-list/moving-animation.js

@@ -40,8 +40,8 @@ function useMovingAnimation( ref, isSelected, enableAnimation, triggerAnimationO
 		ref.current.style.transform = 'none';
 		const destination = ref.current.getBoundingClientRect();
 		const newTransform = {
-			x: previous ? previous.left - destination.left : 0,
-			y: previous ? previous.top - destination.top : 0,
+			x: previous ? previous.left - destination.left : -50,


I think this negative margin may be causing a strange movement on the previous block when a new block is inserted:

That's strange. I would think previous is defined there. I'll look into it.

jorgefilipecosta · 2019-07-14T13:47:02Z

packages/block-editor/src/store/reducer.js

+ *
+ * @return {Object} Updated state.
+ */
+export function blockZoom( state, action ) {


Should the blockZoom reduce handle the case where a sibling of the zoomed blocks is inserted?
E.g: If add a paragraph, zoom it and then press enter the editor crashes.

Yes, definitely.

jorgefilipecosta · 2019-07-14T13:48:53Z

packages/block-editor/src/store/reducer.js

+	switch ( action.type ) {
+		case 'ZOOM_BLOCKS':
+			return action.clientIds;
+		case 'CLEAR_ZOOMED_BLOCKS':


Should we add cases for remove and replace block actions?

epiqueras · 2019-07-14T15:26:38Z

@jorgefilipecosta I like "focus" more too, but I thought there was some prior art to this. Here are the next steps:

~~Change the term "zoom" to "focus".~~
Integrate with undo.
Fix animation jump on last block when a new block is inserted.
Handle block insertion, replacement, and removal.

jorgefilipecosta · 2019-07-14T15:37:07Z

Regarding this step Change the term "zoom" to "focus"., feel free to ignore it for now as it was just a thought and other people may think differently.

epiqueras · 2019-07-14T15:46:04Z

Yeah, let’s get more eyes on it :)

…

On Sun, Jul 14, 2019 at 10:37 AM Jorge Costa ***@***.***> wrote: Regarding this step Change the term "zoom" to "focus"., feel free to ignore it for now as it was just a thought and other people may think differently. — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub <#16578?email_source=notifications&email_token=AESFA2AMJQGIQAEJSDWK3GLP7NB3BA5CNFSM4IDB3XI2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZ4HZRY#issuecomment-511212743>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AESFA2GOP4356OK3K2WKG43P7NB3BANCNFSM4IDB3XIQ> .

…serted.

ZebulanStanphill · 2019-07-14T20:10:54Z

I would prefer "focus" to "zoom", since the latter makes me think of visually zooming into something, and I think that calling it "zoom" would cause many people to mistake it for something relating to accessibility. I'm not sure if "focus" is the best term, but I think it is better than "zoom".

epiqueras · 2019-07-14T20:37:28Z

9928699 Block Editor: Lock all templates while zoomed.

I started by trying to support insertions, replacements, and removals, but I quickly realized that it would take a pretty widespread refactor due to a lot of assumptions we make in the logic for getting insertion indexes and other data. I don't think the need for this feature warrants those changes. This makes me think that we might have to try a different approach for #16485 where the editor just switches between editing the template and editing post content with a static post title component like it does now.

68dcb44 Block Editor: Fix animation jump on last block when a new block is inserted.

That seems to do the trick.

0061fc8 Editor: Clear block editor zoom before undos.

I looked at the approach taken in #16428, but I didn't want to reimplement what was done there and just add another property to the new object that gets sent between the editor and the block editor. I also think that this need will start to pop up more and like #12327 describes, we'll need to sync any reference to blocks in history. This encompasses quite a bit of data and it would be better if we come up with some sort of generalized solution.

I would prefer "focus" to "zoom", since the latter makes me think of visually zooming into something, and I think that calling it "zoom" would cause many people to mistake it for something relating to accessibility. I'm not sure if "focus" is the best term, but I think it is better than "zoom".

I'd say that focus is a term much more related to accessibility and that is actually my only concern with it. Focus is something applied to the currently edited field or selected button that gives accessibility tools' commands a target to operate on. I am not sure if it makes sense to reuse that term for what we are doing here.

chrisvanpatten · 2019-07-15T14:40:34Z

I agree with the others that "Zoom" doesn't really accurately describe this feature. "Focus" is closer, but there might be other ideas too.

The main concern I have here is that I guess I'm not clear how things like — as in the example — background colors are handled. If you have a text block where you've applied a white color, but then zoom to the block, does there need to be some kind of accommodation to both (a) change the color to a visible color, and (b) prevent changing the color?

By removing the context of the containing block, attributes which are dependent on that context could become a bit thorny.

talldan · 2019-07-16T07:39:28Z

Looking at some other apps that have similar features

Workflowy and Dynalist are hierarchical note taking apps. They have a feature they also both call 'zoom'. In Dynalist click the little magnifying glass next to a note (https://dynalist.io/demo) and in workflowy click the bulletpoint itself (https://workflowy.com/demo/embed/).

Both use a little breadcrumb trail at the top to make it easy to zoom back out to the right place. Might be a consideration for this feature too.

epiqueras · 2019-07-24T21:48:06Z

I started by trying to support insertions, replacements, and removals, but I quickly realized that it would take a pretty widespread refactor due to a lot of assumptions we make in the logic for getting insertion indexes and other data. I don't think the need for this feature warrants those changes. This makes me think that we might have to try a different approach for #16485 where the editor just switches between editing the template and editing post content with a static post title component like it does now.

We did end up taking a different approach. I'll close this for now.

swissspidy · 2019-08-06T17:10:38Z

@epiqueras Curious, was there any follow-up PR to this, or is this off the table for now?

epiqueras · 2019-08-06T17:21:17Z

The new modes introduced in #16565 are sort of an evolution of this.

https://github.com/WordPress/gutenberg/blob/d4f48403611fb6812af61eff789fcaf71592bf8a/packages/editor/src/editor-modes.js

Block Editor: Add block zooming.

fab407a

epiqueras added the [Package] Block editor /packages/block-editor label Jul 13, 2019

epiqueras added this to the Future milestone Jul 13, 2019

epiqueras requested review from ajitbohra, chrisvanpatten, ellatrix, gziolo, mkaz, talldan and youknowriad as code owners July 13, 2019 20:33

epiqueras self-assigned this Jul 13, 2019

jorgefilipecosta reviewed Jul 14, 2019

View reviewed changes

epiqueras added 3 commits July 14, 2019 15:02

Block Editor: Lock all templates while zoomed.

9928699

Block Editor: Fix animation jump on last block when a new block is in…

68dcb44

…serted.

Editor: Clear block editor zoom before undos.

0061fc8

epiqueras mentioned this pull request Jul 14, 2019

Editor: Operate on template CPT posts and add a default template with post title and content blocks. #16565

Closed

5 tasks

swissspidy mentioned this pull request Jul 19, 2019

Discovery - define which page elements should be zoomed, and which should not ampproject/amp-wp#2791

Closed

epiqueras closed this Jul 24, 2019

youknowriad deleted the add/block-zooming branch July 25, 2019 09:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Block Editor: Add block zooming. #16578

Block Editor: Add block zooming. #16578

epiqueras commented Jul 13, 2019

jorgefilipecosta left a comment

jorgefilipecosta Jul 14, 2019

epiqueras Jul 14, 2019

jorgefilipecosta Jul 14, 2019

epiqueras Jul 14, 2019

jorgefilipecosta Jul 14, 2019

epiqueras Jul 14, 2019

jorgefilipecosta Jul 14, 2019

epiqueras Jul 14, 2019

epiqueras commented Jul 14, 2019 •

edited

Loading

jorgefilipecosta commented Jul 14, 2019

epiqueras commented Jul 14, 2019 via email

ZebulanStanphill commented Jul 14, 2019

epiqueras commented Jul 14, 2019

chrisvanpatten commented Jul 15, 2019

talldan commented Jul 16, 2019

epiqueras commented Jul 24, 2019

swissspidy commented Aug 6, 2019

epiqueras commented Aug 6, 2019

Block Editor: Add block zooming. #16578

Block Editor: Add block zooming. #16578

Conversation

epiqueras commented Jul 13, 2019

Description

How has this been tested?

Screenshots

Types of Changes

Checklist:

jorgefilipecosta 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

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

epiqueras commented Jul 14, 2019 • edited Loading

jorgefilipecosta commented Jul 14, 2019

epiqueras commented Jul 14, 2019 via email

ZebulanStanphill commented Jul 14, 2019

epiqueras commented Jul 14, 2019

chrisvanpatten commented Jul 15, 2019

talldan commented Jul 16, 2019

epiqueras commented Jul 24, 2019

swissspidy commented Aug 6, 2019

epiqueras commented Aug 6, 2019

epiqueras commented Jul 14, 2019 •

edited

Loading