In a custom block type, I use the description field to, obviously, describe the custom block, and link to an image that shows the design of the block from the visual designs.

Here's a screen shot from : "/admin/structure/block/block-content/types"

Add Custom Block Type Interface

This looks correct ...

... ... ...

But, on the "/block/add" page the presentation of the block types and selecting them break.

broken presentation of adding a custom block.

Obviously this breaks the UX of having a description field for a block.

Ideally this screen should look something like "/node/add".

CommentFileSizeAuthor
#5 Screen Shot 2018-12-18 at 1.23.32 PM.png123.87 KBchris matthews
#5 Screen Shot 2018-12-18 at 1.39.17 PM.png115.83 KBchris matthews
#5 Screen Shot 2018-12-18 at 1.44.34 PM.png106.13 KBchris matthews
#5 Screen Shot 2018-12-18 at 1.41.44 PM.png104.63 KBchris matthews
#4 add-custom-block-interface-2983998-4.patch1.51 KBtanmaykadam
2018-07-05 13-02-01--vat6j.jpg119.75 KBalphex
2018-07-05 12-59-44--rkmul.jpg240.77 KBalphex

Comments

alphex created an issue. See original summary.

alphex’s picture

alphex commented
Issue summary: View changes
alphex’s picture

alphex commented

Alright, here's how I fixed it.

1. copy /core/themes/seven/templates/block-content-add-list.html.twig to ->
/themes/contrib/adminimal_theme/templates/block-content-add-list.html.twig (creating the templates directory inside of the adminimal_theme directory.

2. change this line of code

<a href="{{ type.url }}"><span class="label">{{ type.label }}</span><div class="description">{{ type.description }}</div></a>

To look like this

<a href="{{ type.url }}"><span class="label">{{ type.label }}</span></a><div class="description">{{ type.description }}</div>

--- I moved where the close was.

3. add this CSS to /themes/contrib/adminimal_theme/css/adminimal.css

#block-adminimal-theme-content ul.admin-list .description {
  margin-bottom: 10px;
}

#block-adminimal-theme-content ul.admin-list .description a {
  background: none;
  padding: 0px;
}

I'll try to get a patch together for this.

tanmaykadam’s picture

tanmaykadam commented
Status: Active » Needs review
StatusFileSize
new add-custom-block-interface-2983998-4.patch1.51 KB

I have added patch for comment #3.

chris matthews’s picture

chris matthews commented
StatusFileSize
new Screen Shot 2018-12-18 at 1.41.44 PM.png104.63 KB
new Screen Shot 2018-12-18 at 1.44.34 PM.png106.13 KB
new Screen Shot 2018-12-18 at 1.39.17 PM.png115.83 KB
new Screen Shot 2018-12-18 at 1.23.32 PM.png123.87 KB

The root cause of this issue does not appear to come from the Adminimal theme as I was able to reproduce the issue on a clean Drupal 8.6.4 install using the default 'Seven' administration theme.

block/add IS NOT broken when using the Seven theme and the custom block type description DOES NOT include a link:

1

2

block/add is IS broken when using the Seven theme and the custom block type description DOES include a link:

3

4

This not not happen when using Bartik as the administration theme.

The link in the custom block description seems to be the breaking element for the Seven theme and of course the Adminimal theme.

asya_asina’s picture

asya_asina commented

The patch applied and working.

asya_asina’s picture

asya_asina commented
Status: Needs review » Reviewed & tested by the community
knyshuk.vova’s picture

knyshuk.vova commented

The patch looks good and applies successfully. +1 for RTBC.

andrtroe’s picture

andrtroe commented
Issue tags: +Adminimal Release 8.x-1.5

andrtroe’s picture

andrtroe commented
Status: Reviewed & tested by the community » Fixed

I've commited the patch from #4.
@Chris Matthews, thank you for this investigation, I think it can be reported to the drupal core, but for adminimal it should work
as it breaks UX, thats why we need to override this template for now.

Status: Fixed » Closed (fixed)

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