Problem/Motivation

Problem 1 (originally reported)

Go to the Block layout page (admin/structure/block).

Click on a block name in the "Place blocks" area, choose a region, and submit.

You will see both:

  • A green message at the top saying that "The block configuration has been saved.". This is correct, it has been saved. At least, I think so.
  • The new block shown in yellow in the block list, which normally indicates you have made a change to the blocks that hasn't been saved. This is incorrect, it has been saved. At least, I think so.

I kind of appreciate having a visual representation of where my block ended up, but this particular visual representation is very confusing to me, because it is the same visual representation that says "you have made a change and it hasn't been saved". So, based on what I see on the screen, I do not know whether the block has really been saved or not.

My suggestion would be to have it show up in the list in green, indicating "HERE I AM" but also "This has been saved unless you drag it around or something".

Problem 2 (reported in comment #1

Also on admin/structure/block -- if I use the select list "Region" on a block to move a block from, say, the Header region to Primary menu region, it shows up in the Primary menu list but it is *NOT* yellow, and there is no "You have unsaved changes" message. So I don't really know that I have to save the changes. But if I just go back to admin/structure/block, my block has not been disabled.

I am only seeing the yellow highlighting and the "You have unsaved changes" if I do the move/disable operation by dragging the block around.

Proposed resolution

For problem 1:

When you add a block and it has been saved, make it show up in the block list in green instead of yellow.

For problem 2:

When you use the Select list to change the block region, make it show up in the new region in yellow and make sure there is a "changes need to be saved" message at the top. Basically, it should behave the same as if you dragged the block from one region to another instead of using the Select list to change the region, and it currently doesn't.

Remaining tasks

  1. Make a patch. Presumably there are standard classes that should be used to turn things green or yellow in response to the Ajax events.
  2. Review
  3. Commit

User interface changes

Color representations of changes in the Block layout, and whether they need to be saved, will be more intuitive.

API changes

None.

Beta phase evaluation

Reference: https://www.drupal.org/core/beta-changes
Issue category Bug because the UI is very confusing as it is
Issue priority Normal because it still works, at least if you ignore the colors and messages and save the page no matter what.
Unfrozen changes Unfrozen because it only changes CSS and/or markup.
Prioritized changes The main goal of this issue is usability, so it is a prioritized change
Disruption Not disruptive. Change is limited to the CSS and/or markup in the Ajax on the Block layout admin page.

Comments

jhodgdon’s picture

Priority: Normal » Major

Oh gracious, it gets worse.

If I go to admin/structure/block and use the select list "Region" to move a block from, say, Header to -none-, it shows up in the Disabled list but it is *NOT* yellow, so I don't really know that I have to save the changes. But if I just go back to admin/structure/block, my block has not been disabled.

I am only seeing the yellow highlighting and the "You have unsaved changes" if I do the move/disable operation by dragging.

tim.plunkett’s picture

The highlighting of a newly *added* block was done in #2078951: Highlight the row of block that was just placed.

It also scrolls it into view.

I don't remember any real discussion about the color choice, I think I just mimicked tabledrag. Which is exactly your point, it is conflating two different things (recently-added-and-saved, and yet-to-be-saved).

jhedstrom’s picture

If the fix is to change a few colors, this could probably be knocked out very quickly.

jhodgdon’s picture

Priority: Major » Normal
Issue summary: View changes

That would be good. I'll update the summary with a proposed resolution.

Probably this is just Normal, although I think it's pretty confusing.

tim.plunkett’s picture

Title: Very confusing UI in Block layout page » "Last placed block" color confusing in Block layout page

In light of #2512456: Implement the new block layout design to emphasize the primary interaction of placing a block, I think the color is the only remaining confusing part.

Bojhan’s picture

Agreed, lets fix the color part.

lewisnyman’s picture

Issue tags: +frontend, +CSS

I seems like the success color would be more suitable? We have a class for that ;-) color-success

legolasbo’s picture

Assigned: Unassigned » legolasbo

I will be working on this today.

legolasbo’s picture

Issue summary: View changes
Status: Active » Needs review
Issue tags: +Needs manual testing
StatusFileSize
new2.16 KB

Attached patch implements the proposed resolution.

legolasbo’s picture

Assigned: legolasbo » Unassigned
vj’s picture

@legolasbo,

I have tested your patch. Your patch works nice and resolves both the issues. But found a small issue please check attached screenshot (last_updated_block_patch_issue.PNG).

I have fixed this please check patch.

Thanks,
Vj

legolasbo’s picture

@Vj,

Thanks for reviewing and updating the patch. I've reviewed your changes and I'm happy with them, but we need someone else to RTBC it.

dawehner’s picture

Issue tags: +Needs screenshots

I think some screenshots to describe the changed would be nice.

I like the general idea of the issue. Highlighting better what actually happened is a great step! I personally was not sure multiple times whether the block was actually saved already.

legolasbo’s picture

Working on adding some screenshots.

legolasbo’s picture

Issue summary: View changes
StatusFileSize
new35.43 KB
new47.07 KB
new35.49 KB
new47.32 KB

Updated issue summary with before/after screenshots

legolasbo’s picture

Issue summary: View changes
legolasbo’s picture

Issue tags: -Needs screenshots
lewisnyman’s picture

I manually tested this patch. I'm really happy with the UI changes here and the cohesion between the messaging color and the block color. See screenshot 4.

This seems good to go. I'm assuming we need to add so much code so we can split the logic of the last placed block and a successfully place block. Can someone else varify this?

nod_’s picture

Status: Needs review » Needs work

Some nitpick

var updateLastPlaced = function (table, rowObject)

With our standards it should be: var updateLastPlaced = function ($table, rowObject)

There is an extra pair of // as well.

Other than that it's good to go.

vj’s picture

Status: Needs work » Needs review
StatusFileSize
new2.27 KB

@nod_

I have updated the patch as per suggestion Let me know if anything else we have missed.

legolasbo’s picture

StatusFileSize
new3.17 KB
new3.64 KB

Attached patch updates the table variables to $table to be in line with coding standards.

I'm aware of the scope creep, but i prefer consistency over reviewability in this case.

nod_’s picture

Status: Needs review » Needs work

A bit too much, scope creep is not our friend.

Can you just change it in the new function? Later on we'll run a tool to catch most of the unprefixed jQuery variables, this one will show up, no worries.

legolasbo’s picture

Status: Needs work » Needs review
StatusFileSize
new3.17 KB
new3.64 KB

@nod_,

Ok limited renames to just the function.

legolasbo’s picture

StatusFileSize
new960 bytes
new2.27 KB

*facepalm* I've uploaded the same patch/interdiff as before. This is the correct one.

nod_’s picture

Status: Needs review » Reviewed & tested by the community

All good. :)

Thanks!

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 24: last_placed_block_-2396937-23.patch, failed testing.

legolasbo’s picture

Issue tags: +Needs reroll, +Novice

This needs a reroll, which is why I am tagging it novice.

subhojit777’s picture

Status: Needs work » Needs review
Issue tags: -Needs reroll, -Novice
StatusFileSize
new2.26 KB
legolasbo’s picture

Status: Needs review » Reviewed & tested by the community

Back to RTBC since this was just a plain reroll.

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 28: last_placed_block_-2396937-28.patch, failed testing.

Status: Needs work » Needs review
emma.maria’s picture

Status: Needs review » Reviewed & tested by the community

I noticed this was knocked back to Needs Review whilst looking through open Novice CSS issues. The patch is green I'm putting it back to RTBC.

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Committed 1842da2 and pushed to 8.0.x. Thanks!

Thanks for adding the beta evaluation to the issue summary.

  • alexpott committed 1842da2 on 8.0.x
    Issue #2396937 by legolasbo, Vj, subhojit777, jhodgdon: "Last placed...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.