"Section" block editor UX issues and functionality questions

[wrenaria]

I have some questions and UX concerns related to the new "Section" content block --

Functionality questions

1. Section with gutter set to "none" has extra space underneath it. Gutter "normal" and "narrow" do not. Is this intentional? If so why?
2. What does "apply dark-background class" do? I tried it on every block color in the editor and saw zero visual changes.
3. Is using "object boxes" and "spacers" currently best practice to adjusting the space around the content within this new block when you need to add some?
4. Maybe it doesn't matter because it's not intended use and I hope no one actually tries this in a normal content area, but the section at "full" width leaves a gap on the right when used in the content section that includes a sidebar. Is this intentional behavior?

Editor UX

1. Section with the gutter set to "none" is going to be our most used version of this block, can that be set as the default?
2. Nevermind this one, I forgot to try it on headers. I still think the label is not super intuitive. Maybe "Force default text color" ? I will give it more thought. As far as I can tell, "disable forced contrast" just forces black text. If this is the case, can you relabel the tooltip to read "force black text" ? "Forced contrast" isn't going to mean anything to a content creator.
3. When you apply a background image, the color options move from the local block editing menu to the sidebar. This is pretty confusing UX when controls for the same type of function (in this case color change) change location within the same block while you are working on it. Is it possible to standardize the placement of same-type controls for this block or is this a forced limitation of WP?
4. The naming of the gutters is not intuitive. The gutters are the space to the left and right of the content area, correct? But the "narrow" gutter is visually wider than the "normal" gutter, so what you see does not align with the label. Can the label be changed to from "narrow" to "wide" ?
5. I'm not sure what the "disabled force contrast" button is for once you apply background image, since text color is also controlled in a dropdown in the sidebar once an image is present. Will it cause a problem if an editor changes the text controls in both places? This is another confusing consistency issue for the editing controls.

There are some examples of "Section" set up at the bottom of this Stage page: https://stage.library.ucdavis.edu/june-24-new-content-types/

[spelkey-ucd]

Section with gutter set to "none" has extra space underneath it. Gutter "normal" and "narrow" do not. Is this intentional? If so why?

The extra space is coming from the margin on the last p element not the section itself, but, it's true, the behavior is not consistent when using with the gutter classes. This seems to possibly be an oversight by sitefarm developers. They always use sections in combination with a gutter class, so they probably just never noticed it. I can put in a patch.

---

What does "apply dark-background class" do? I tried it on every block color in the editor and saw zero visual changes.

It mostly controls button color, but a few other components too. To see it in action:
https://stage.library.ucdavis.edu/june-24-new-content-types/#section-dark-background

---

Is using "object boxes" and "spacers" currently best practice to adjusting the space around the content within this new block when you need to add some?

For left and right padding, gutters should be used. Sitefarm completely removed object boxes from their site, but did not remove the styles. I would advocate using object boxes and spacers where appropriate. IMHO, for reasons I think I ??might?? understand, I think they kind of botched this implementation.

---

Maybe it doesn't matter because it's not intended use and I hope no one actually tries this in a normal content area, but the section at "full" width leaves a gap on the right when used in the content section that includes a sidebar. Is this intentional behavior?

When providing this level of flexibility during content creation, it is impossible to control all class combinations. Some combinations will inevitably be bad, and this is where we have to rely on the judgement of creators.

---

Section with the gutter set to "none" is going to be our most used version of this block, can that be set as the default?

It goes against spec, but yes, I don't think it will cause too much of an issue down the road.

---

When you apply a background image, the color options move from the local block editing menu to the sidebar. This is pretty confusing UX when controls for the same type of function (in this case color change) change location within the same block while you are working on it. Is it possible to standardize the placement of same-type controls for this block or is this a forced limitation of WP?

I can move it to the floating toolbar if you want, but to me, the film colors made more sense grouped in the background image panel since then they appear directly below when the "Apply Brand Color Film" toggle is selected.

---

The naming of the gutters is not intuitive. The gutters are the space to the left and right of the content area, correct? But the "narrow" gutter is visually wider than the "normal" gutter, so what you see does not align with the label. Can the label be changed to from "narrow" to "wide" ?

I am disinclined to do this - "narrow" and "wide" refer directly to the underlying class name. From a programmer perspective, it will lead to confusion and possible errors. If you want to think of a new label for "gutters" to reflect that the modifier refers to the content width and not the margin size, I can get behind that.

---

I'm not sure what the "disabled force contrast" button is for once you apply background image, since text color is also controlled in a dropdown in the sidebar once an image is present. Will it cause a problem if an editor changes the text controls in both places? This is another confusing consistency issue for the editing controls.

"disabled force contrast" is a modifier for brand classes. If you are using a background image without a a brand color film, it will have no effect. However, if you are using the brand color film, it will generally take precedence over the background image text modifier.

[wrenaria]

Kimmy: Is using "object boxes" and "spacers" currently best practice to adjusting the space around the content within this new block when you need to add some?

Steve: For left and right padding, gutters should be used. Sitefarm completely removed object boxes from their site, but did not remove the styles. I would advocate using object boxes and spacers where appropriate. IMHO, for reasons I think I ??might?? understand, I think they kind of botched this implementation.

The built-in gutters on "Section" are far too fat for most of our use cases and provide zero top/bottom padding, so unfortunately I think they will be useless most of the time. If object boxes and spacers ever go away on our site without equivalent solutions, that would suck quite a lot.

---

Kimmy: When you apply a background image, the color options move from the local block editing menu to the sidebar. This is pretty confusing UX when controls for the same type of function (in this case color change) change location within the same block while you are working on it. Is it possible to standardize the placement of same-type controls for this block or is this a forced limitation of WP?

Steve: I can move it to the floating toolbar if you want, but to me, the film colors made more sense grouped in the background image panel since then they appear directly below when the "Apply Brand Color Film" toggle is selected.

To me it would make more sense to have colors managed all in the same spot and only have to select once. For example, if you select "wonder blue" and then add a background image and toggle on "brand color," it should just use the brand color you already selected when it didn't have a background color instead of making that palette selector inactive and making you use a different one from a different sector just to potentially select the same color again. One color palette selector to rule them all. Keeping the opacity sliders where they are in the sidebar is fine though.

If that doesn't make sense or isn't doable, let's have an actual zoom chat about it, please.

---

I am disinclined to do this - "narrow" and "wide" refer directly to the underlying class name. From a programmer perspective, it will lead to confusion and possible errors. If you want to think of a new label for "gutters" to reflect that the modifier refers to the content width and not the margin size, I can get behind that.

That's fine with me! Rename "Gutters" to "Content Width."