The introduction of configuration-based block plugins to Drupal 8 forced a complication of the blocks-by-theme-listing user interface under path admin/structure/block. It also introduced a new set of paths to manage blocks under the path /block.
Much time has been spent in issue debating how to improve the usability regressions in these interfaces and forms. We believe we have arrived at a minimal viable product design (with a few gaps), details in the issues linked from. Essentially we will separate the block placement UX flow from the block creation UX flow.
Invision prototype: https://projects.invisionapp.com/share/PEGD21X4#/screens
Separate the block placement flow from the block creation flow.
Currently the Place blocks button on the block listing page directs the user to a list of block plugins. The main action of this subsequent page is Add custom block. A particular block plugin is selected by again pressing a button labeled Place block, this time a row action in the block listing table.
The updated flow will expose a list of block plugins to the user on the existing block-theme listing page. The layout of the list will be analogous to the layout of the node composition page. Selecting a block from the list will prompt the user to provide the minimal set of configuration fields needed to create a new block instance and place it in a region of the theme.
The designs (invision and comments) should be used as to determine the exact UX of the block placement flow. Below are notes from our discussion with Tim Plunkett, effulgentsia and Kevin O'Leary about this project.
- Use the node edit screen (two columns) as the layout pattern for the block-by-theme-region listing and the list of available blocks to place.
- Placeable blocks listing in the sidebar will be:
- Grouped by “project”. Project will be an annotation -- “a straight API addition”
- Grouping and filtering works just like the Modules and SimpleTest pages.
- Clicking a block placement link from the list of placeable blocks opens a modal dialog with the minimal fields required to define a configurable entity.
- Use the Drupal modal.
- A newly placed block will float to the top of the list of blocks already in a region.
- If the region that a block is placed in is located off screen, the page will scroll to bring the newly placed block into view.
- Also, use Drupal.announce to tell a screen reader user that a new block instance has been placed in a given region.
Isolate the user-generated block creation flow
Currently, a user cannot create a block from a block type outside of the block placement flow. The action to create a block should be moved to the block-list-by-theme page. The two flows available to a user from this page will then be: create block and place block.
Rename Custom block types to Block types
Remove any instance of the word custom from the block UI forms and actions.: Rename custom_block.module to block_content.module
- Proper ARIA attribute markup applied to form UI components.
User interface changes
Yes, see the Invision prototype: https://projects.invisionapp.com/share/PEGD21X4#/screens