search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.57k stars 4.22k forks source link

Zoom Out Mode: Iteration issue: WordPress 6.7 #64197

Open scruffian opened 4 months ago

scruffian commented 4 months ago

This issue tries to summarize the changes we'd like to make to Zoomed Out Mode in the WordPress 6.7 release:

Next:

Later (WP 6.8 cycle)

Bugs

Bugs can be viewed using Zoom Out and Bug labels.

The project board for WP 6.7 tracks the key bugs.

Later

scruffian commented 3 months ago

Here's a demo of the work we have done so far: https://drive.google.com/file/d/1aJFhPpiHqr22IxKSJWQMf98fsv93bgGI/view?usp=sharing

getdave commented 3 months ago

Some thoughts on ways of exiting Zoom Out mode:

I'll create an Issue for these.

Also some other things:

stokesman commented 3 months ago
  • Add "Edit" button to toolbar to allow users to exit zoom out mode.

I’ve tried out the recently merged implementation and here’s my feedback related to it.

Overall, it leaves me wishing for a better solution. So far the only idea I’ve had is a button near the canvas. To illustrate, I have a couple screen recordings.

Icon button in the top right:

https://github.com/user-attachments/assets/b58808a3-1d80-4187-a9ed-2b73fa1d65ea

Text button below:

https://github.com/user-attachments/assets/052ebe41-12f4-40e5-8aec-fe2bee3adc51

This placement might seem off-limits given how scrolling in zoom out currently works. However, if #64117 is to be fixed, I'm pretty confident it will involve applying the frame’s spacing outside of the scrolling area and making the area available. (This is from a branch where I was exploring a slider to control the zoom level and that’s what’s seen in the bottom right).

Also perhaps a button like this only needs to be displayed if zoom out is not explicitly triggered. If someone gets there through the Preview dropdown, it seems like they’d understand how to get back.

getdave commented 2 months ago

@youknowriad @mtias @richtabor I've been watching the advancement of the new "Edit" (previously "Select" and under the hood navigation) mode. Many of its affordances are remarkably similar to what we have in "Zoom Out" today.

There are some exceptions in Zoom Out:

...there are probably more.

However, I'm wondering if there's scope to look to merge these two modes? After all, I expect that users will probably want to make basic edits whilst zoomed out (e.g. amend a heading).

Perhaps we'd have some kind of "click through" whereby once a section is selected in zoom out you could click again to "activate" contentOnly editing on that section.

I don't recall seeing an Issue capturing this so if it's something you think might be useful I can raise an Issue to track it.

youknowriad commented 2 months ago

Yes, I think it seems we can converge in terms of interaction model (selecting sections, potentially selecting content blocks as well) and we can leave the zoom-out mode about setting a zoom level instead.

We need to decide what to do with toolbar: should it switch to vertical toolbar when a zoom level is set or should it always stay consistent.

getdave commented 2 months ago

I think the UX for Zoomed Out is probably better as a vertical toolbar but I would defer to @WordPress/gutenberg-design on that one. Maybe @richtabor as he's been heavily involved in Zoom Out.

getdave commented 2 months ago

@youknowriad I proposed merging the two modes.

getdave commented 1 month ago

@draganescu @MaggieCabrera @jeryj @ajlende @youknowriad @talldan @richtabor

I've drafted the following dev note for Zoom Out in WP 6.7. Feel free to edit/amend as required.

Update: draft available on Make Blog.

Dev note for WordPress 6.7 (draft)

Zoom Out in WordPress 6.7, introduces a new way to easily create and edit content using Patterns rather than lower-level, individual blocks.

Accessible via a toggle in the editor toolbar, when activated the canvas will "zoom out" providing users with a high level view of the content currently being edited. The inserter also automatically enables this new feature when the patterns tab is activated, allowing users to quickly and easily build and/or edit their Page or Template using pre-configured Patterns.

Note that whilst in this mode, blocks outside the "main content" of the current post will be non-editable. This allows users to focus on easily dealing with larger areas of content.

Theme Compatibility

To facilitate this feature, the Editor will attempt to detect the block which is acting as the "main content" of the current post type. This is achieved via a simple algorithm which optimises for detecting the Post Content (core/post-content) block, falling back to a Group with a tagName of main (i.e. the <main> HTML element).

https://github.com/WordPress/gutenberg/blob/7d60169ff4d991f463adb537de9df6abf965854c/packages/editor/src/components/provider/use-block-editor-settings.js#L149-L160

To maximise compatibility with this mode, Theme authors should update their templates to ensure their "main content" is wrapped with a Group block whose tagName attribute is configured as main. This can be found in the block's sidebar controls under Advanced. We recommend using a core/group as it is the most generic and flexible "sectioning element" in the editor.

Decoupling of Zoom Out mode from "zooming" the canvas

As part of this effort, contributors have also elected to decouple the scaling of the Editor canvas from the "Zoom Out" editor mode. This is largely in anticipation of future efforts around simplifying the editing experience. As a result, invoking zoom-out editor mode will not longer automatically scale the Editor canvas.

Further reading:

fabiankaegy commented 1 month ago

@getdave The dev note is looking great to me!

Feel free to publish it on the make blog and I will then reference it in the field guide :) This can be an independant dev note as far as I am concerned 👍

In an ideal world I would love to include a quick video / screenshot similar to the ones we have in the Gutenberg Release posts that showcases the feature.

Looking at the Gutenberg posts this image here has been used:

draganescu commented 1 month ago

I added a few edits @getdave

getdave commented 1 month ago

Update for WordPress 6.7

I posted an update on Friday in WP Slack with my top of mind for the Zoom Out feature in 6.7:

I'll update these as and when they are resolved.

getdave commented 1 month ago

@fabiankaegy Dev note draft created on Make Blog.

fabiankaegy commented 1 month ago

@getdave How do you feel about my suggestion the other day of including an image / video showcasing what it actually looks like in 6.7?

Besides that this is good to go from my perspective 👍

colorful-tones commented 1 month ago

@getdave small edit from your Dev Note preview:

editor mode will not longer automatically scale the Editor canvas.

should be:

editor mode will no longer automatically scale the Editor canvas.

youknowriad commented 1 month ago

Hey folks, just noting that the vertical toolbar has been removed in trunk in https://github.com/WordPress/gutenberg/pull/66039 as it suffers a few issues: doesn't scale well to other buttons like "change design", doesn't support text only buttons, feels disconnected from blocks when centered.

We can consider back-porting this change to 6.7 (it's several bug fixes at once). here's the corresponding manual cherry-pick #66200

getdave commented 1 month ago

Update for WordPress 6.7

In general Zoom Out feels like it's in a good place. That said here are my top of mind items that we need to land prior to RC2:

Note that RC2 is on Tuesday October 29th, so we should look to release packages on Monday October 28th. Therefore all PRs should aim to land by Friday (or early Monday) latest.

cc @ndiego @ellatrix @colorful-tones @cbravobernal @kevin940726