Improve Icon Selection/Upload

Created on 28 November 2023, over 1 year ago
Updated 19 September 2024, 7 months ago

Problem/Motivation

The UI for specifying icons right now is very bare-bones: just typing the path to an icon. This could be improved with the ability to upload an icon.

Steps to reproduce

  • Enable Layout Builder on a content type display mode
  • Edit the Promoted Blocks list
  • For each promoted block, a text field is shown at the bottom of the form

Proposed resolution

Adding the ability to upload an icon would save a lot of questions about where icons should be saved and how to find them. Although configuration management cannot save binary files, modules like Paragraphs allow the upload of SVG icons which are then just stored directly in config. For a rarely access config like a list of icons, that seems like it would be a safe approach for this module as well.

We would have to deal with the same icon being shared (such as across multiple content types), for that I would expect that icons could be keyed based on their block ID (so the same block across multiple content types would have the same icon).

Remaining tasks

User interface changes

API changes

Data model changes

✨ Feature request
Status

Active

Version

2.1

Component

User interface

Created by

πŸ‡ΊπŸ‡ΈUnited States quicksketch

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @quicksketch
  • πŸ‡ΊπŸ‡ΈUnited States quicksketch
  • πŸ‡§πŸ‡ͺBelgium flyke

    I think we should be able to optionally set icons for all blocks, not just the promoted ones.
    That way we could style the 'Other' blocks tab just like the 'Promoted' blocks tab. Both provide the user the option to add a block but both look different right now and that's confusing UX.

  • πŸ‡§πŸ‡ͺBelgium flyke
  • πŸ‡§πŸ‡ͺBelgium flyke

    flyke β†’ changed the visibility of the branch 3404515-improve-icon-selectionupload to hidden.

  • πŸ‡§πŸ‡ͺBelgium flyke

    Added a patch that works on 3.1.x.

    I removed the css adjustments in the patch so that this patch has no conflict with patch from #3469286 ✨ Navigation module integration Needs work .

    Added screenshots and a screen recording of how it looks with this patch if you give all your blocks an icon.

    Since I removed css adjustments from this patch, here is an example of custom css I add for now via a custom module:

    .toolbar-plus-sidebar {
        --admin-toolbar-z-index: 501;
        --admin-toolbar-color-white: rgba(var(--bs-blue-rgb), 1);
        --admin-toolbar-font-family: inter, sans-serif;
        --admin-toolbar-color-gray-100: #d8dfea;
        color: white;
    }
    
    #promoted-block-content, #other-block-content {
        margin: 0 1em;
    }
    
    .draggable-block-list .draggable-block {
        margin: 1em 0;
    }
    
    .draggable-block-list .draggable-block-image {
        padding: 2em;
        text-align: center;
        display: block;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    
    .block-categories .block-category-details {
        background: none;
    }
    
    #other-block-content details {
        border: 1px solid rgba(255, 255, 255, .2);
        box-shadow: none;
    }
    
    #other-block-content .details-wrapper {
        margin: 1em 0;
        padding: 0;
        color: white;
    }
  • πŸ‡§πŸ‡ͺBelgium flyke

    The subquestion to edit icon for all blocks is resolved. It seems you can now set icon for every possible block at /admin/structure/block/icons.

    However, the original issue was a request to be able to upload a file for an icon. Maybe that should still be discussed ? For my opinion it is not necessary, but it is something you can do for Paragraphs: when you create/edit a paragraph then you have the option to either set a path or upload a file for the icon. It makes sense to apply the same options here.

Production build 0.71.5 2024