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

Add `expand` toolbar control #16738

Open
wants to merge 15 commits into
base: master
from

Conversation

@retrofox
Copy link
Contributor

commented Jul 24, 2019

Description

This PR adds a new block-expand-toolbar block, trying to tackle the Full Screen alignment/display option on several blocks (#16385) issue.

Related Issues:

  • #16698: Add vertical alignment to Media & Text block
  • #16385: Full Screen alignment/display option on several blocks

Why adding a new <Toolbar /> block?

First of all, the expand mode is not alignment type but to be honest it's also true that wide and full-width are not alignment types either.
The real reason why I've added this new is that they can operate together, meaning that you could activate an alignment mode and also enable/disable expand option.
If we consider that despite this we should put the option in the alignment toolbar I'll glad to do it.

How does it look

It adds the screen control into the Expand toolbar:

How does it work

The idea behind this new feature is to be able expand the block in high to the device viewport. Combining different configurations between align and expand is possible to kind of interesting results on the page.
This PR integrates the expand toolbar with the core/image and core/cover library blocks.

The following images show the block behavior combining align and expand. The square with border color pink represents the viewport of the device.

align: none - expand: false align: none - expand: screen

align: left|center|right - expand: false align: left|center|right - expand: screen

align: wide - expand: false align: wide - expand: screen

align: full - expand: false align: full - expand: screen
image image

The animation below shows when the image has `right` alignment and `screen` expansion.

gutenberg-expand-block


The next one shows setting the core/cover block with align full and expand screen, with fixed background
gutenberg-expand-cover


...its behavior in the editor:

gutenberg-expand-image-editor

Finally, these videos show the whole workflow in details for core/image and core/coverblocks:
https://cloudup.com/iBwg71ymuJD

How has this been tested?

Apply these change and just follow texting instructions described in these videos.

Pending Tasks

  • Experiment with background image CSS.
  • Consider finding a better control Icon
  • Consider joining the expand control into the alignment toolbar.
  • Test deeply all combinations in different devices/platforms.

@retrofox retrofox marked this pull request as ready for review Jul 24, 2019

@youknowriad youknowriad requested review from jasmussen and mapk Jul 25, 2019

@youknowriad youknowriad requested a review from mtias Jul 25, 2019

@mapk

This comment has been minimized.

Copy link
Contributor

commented Jul 26, 2019

I really like the concept, @retrofox! I believe adjusting a block to be full-screen-height could open up some amazing layout design.

I am concerned about adding another toolbar section for this control. If we do ever decide to include wide width or full width in this section, I could see its validity. However, it does operate well paired with some of those other alignments, so being able to multiselect those is a big part of this feature.

I haven't looked at the code, but taking a look at how it functions in the Editor, I found a few areas needing refinement. I'm using the Gutenberg Starter Theme for testing which uses basic default Gutenberg styles in both the Editor and the frontend.

  1. The icon for this feature left me confused. It took me some time to figure out that it was indicating height and not horizontal margins or fluctuations. Once I understood, it made perfect sense, but I wonder if there's another option?

  2. When toggled "on" the full-screen height distorted the image in my Image block. It probably shouldn't do that. Maybe it should default with something like background-size:cover?

  3. When toggled "on" and having the wide width or full width options "on" the block inside the editor expanded a great deal lower than the image in my Image block. I would imagine the image should fill the block height, but it wasn't.

distort

While you're working on this PR, I'd love to get more design feedback from others.

@mapk

This comment has been minimized.

Copy link
Contributor

commented Jul 26, 2019

Also congrats on your first PR!! 🎉

@mtias

This comment has been minimized.

Copy link
Contributor

commented Jul 26, 2019

@mapk I tend to agree, this makes sense as part of the general alignments group, specially if we are looking at collapsing it always: #16557

However, this also has the advantage of being orthogonal to some of the wide alignments so you could make different interesting combinations. Perhaps we could split the alignment group within the dropdown (with a separator)? Not sure if that would increase or decrease its usability.

@retrofox

This comment has been minimized.

Copy link
Contributor Author

commented Jul 26, 2019

The icon for this feature left me confused. It took me some time to figure out that it was indicating height and not horizontal margins or fluctuations.

I only turned the full width icon 90 degrees.

Once I understood, it made perfect sense, but I wonder if there's another option?

I'd like listening to suggestions in this case since I'm not a designer which leads me to do implementations that only me understand :-D

When toggled "on" the full-screen height distorted the image in my Image block.

Something to fix. 👍

It probably shouldn't do that. Maybe it should default with something like background-size:cover?

yes, for instance, I like how the core/cover handles the image using background-size instead of an <img /> tag. I'm afraid that switching to use CSS for the core/image could require more investment and changes, though. Will glad to follow this path if we consider it worths.

When toggled "on" and having the wide width or full width options "on" the block inside the editor expanded a great deal lower than the image in my Image block. I would imagine the image should fill the block height, but it wasn't.

Yup confirmed. Let me do another iteration.

@retrofox

This comment has been minimized.

Copy link
Contributor Author

commented Jul 26, 2019

Perhaps we could split the alignment group within the dropdown (with a separator)?

Good option imo.

@retrofox

This comment has been minimized.

Copy link
Contributor Author

commented Jul 29, 2019

Hi @mapk!, I've creates a different approach to implement the expand mode fo the core/image block to deal with the issues that mentioned last week. As you suggested, I've tried using the background image CSS approach. I've activated gutenberg-starter-theme as well.

I've added an animation but tbh it isn't enough to show the whole changes. It seems that's just a matter of testing deeply :-D

gutenberg-wide-full-expand

@retrofox retrofox changed the title Update/add block expand toolbar Add `expando` toolbar control Jul 30, 2019

@retrofox retrofox changed the title Add `expando` toolbar control Add `expand` toolbar control Jul 30, 2019

@BinaryMoon

This comment has been minimized.

Copy link

commented Aug 2, 2019

I like the idea of stretching content to 100vh but am not sure about using background-size.

Using the image element means we can take advantage of responsive images sizes, but background-size cover requires the largest image likely to be used, which is bad for small devices on slow connections.

Could this use object-fit instead? There is a cover option available so images can still be scaled nicely.

@retrofox

This comment has been minimized.

Copy link
Contributor Author

commented Aug 4, 2019

Could this use object-fit instead? There is a cover option available so images can still be scaled nicely.

Definitely going to dig on this, @BinaryMoon. 👍

@jasmussen

This comment has been minimized.

Copy link
Contributor

commented Aug 5, 2019

Really nice work.

I would definitely echo Mark and Matías on this one — the only challenge with this one is how we show it in the toolbar. And an additional toolbar group feels like the wrong path for this.

I understand that wide and fullwide are not traditional "alignments" thinking like how we're used to, but they have fit very nicely with left/center/right for exactly the reason you allude to: they do not stack.

At the same time, in the same design, Bold and Italic buttons stack — those are just toggle buttons.

For that reason, I think the option to explore is this one: #16738 (comment)

Go with the dropdown, and put a separator into the dropdown. You could even have a subheading, like:

Block Layout
- Left
- Center
- Right
- Wide
- Full wide
___________
Additional Layout Effects
- Full-height

One of the reasons for the dropdown PR is to enable clearer labels and additional layout options like this. By adding a separator in that dropdown, we keep the "non-stackable" effect of the basic alignments, but allow additional on top of that.

@mapk

This comment has been minimized.

Copy link
Contributor

commented Aug 5, 2019

@retrofox, this is feeling really good. Let's implement Joen's suggestion above #16738 (comment). This probably involves rebasing with master to get the latest collapsed block toolbar version.

After that we can revisit the icon.

@retrofox retrofox force-pushed the retrofox:update/add-block-expand-toolbar branch 3 times, most recently from 682d95b to 652afce Aug 12, 2019

@retrofox retrofox force-pushed the retrofox:update/add-block-expand-toolbar branch from 652afce to 6f24b12 Aug 12, 2019

@mapk

This comment has been minimized.

Copy link
Contributor

commented Aug 14, 2019

Just tested again today, and it appears I can no longer select both "full height" and "full width" as I once was able. I'm not sure if this is because they are both in the same condensed menu now, but I'd like this to work in conjunction with the "full width" and "wide width" selections as well.

Also it appears selecting full height in the editor didn't do anything visually. The frontend doesn't show it as full height anymore either.

full

@mapk

This comment has been minimized.

Copy link
Contributor

commented Aug 14, 2019

Also to think about... if we are now providing multiple items within the dropdown that can be selected, I imagine each selected item should be visible in the block toolbar, yeah?

Screen Shot 2019-08-14 at 7 08 19 AM

This doesn't feel quite right though.

There's also a multi-select issue created here: #17009

@retrofox

This comment has been minimized.

Copy link
Contributor Author

commented Aug 15, 2019

Just tested again today, and it appears I can no longer select both "full height"

right, it's in work in progress. :-/ Sorry, Mark. Going to update soon.

I imagine each selected item should be visible in the block toolbar, yeah?

It makes sense to me, but I guess it will require to create a new Toolbar block (like as I did before of removing it :-))

@shaunandrews

This comment has been minimized.

Copy link

commented Aug 21, 2019

wide and fullwide are not traditional "alignments"

I run into this confusion all the time. I myself always have trouble remember exactly what "full-width" actually means — and I see users who click "full-width" and are never certain exactly what it did. I fear that adding "full-height" to the list of alignments is just going to exacerbate this confusion.

These two options (full-height/width) aren't related to alignment of an element. I wonder if it would make sense to break these out into a "dimensions" control of some sort. I could see other values outside of "full" being useful — that is, imagine being able to set the width to 50%.

@retrofox

This comment has been minimized.

Copy link
Contributor Author

commented Aug 21, 2019

I wonder if it would make sense to break these out into a "dimensions" control of some sort

I had created an which had only the expand button and was tempted to move the wide and width buttons from the alignment toolbar to this one so finally, both toolbars had got with three controls.

@kjellr

This comment has been minimized.

Copy link
Contributor

commented Aug 21, 2019

👋 We discussed this ticket in today's #design chat on slack. (A WordPress.org slack login may be required to view the transcript).

A few things to note:

  • We should consider changing this to a "Full Screen" option, that makes the object both 100vw and 100vh. Full-height is frequently combined with full-width in practice, so this would cover most common use cases. It would also sidestep the multi-select issue at hand.
  • Eventually, we may want to consider breaking out alignment and width/height options into their own control: it's been noted before, but wide/Full/Fullscreen aren't truly alignments.
  • Also, the icon used in this PR is also used for "Flip Image" in core. If we use "fullscreen" here, we should consider using some variation of Material's fullscreen icon for this:

Screen Shot 2019-08-21 at 2 40 31 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
9 participants
You can’t perform that action at this time.