Especially for custom blocks, but even for programmatic, module-derived blocks, it'd be really neat to be able to hit a "preview" button and know instantaneously what the block's content going to look like before it's live on the site.

Currently, the process for adding a custom block to the site goes like:

  1. Go to admin/build/block/add.
  2. Enter the block body. Also enter in some wacky visibility stuff so your inevitable mistakes aren't visible to your larger website audience.
  3. Save the block page.
  4. Move the block to one of your regions so it's visible.
  5. Gasp in horror at your awful missing </ul> or whatever horrible thing you messed up that completely breaks your site's layout.
  6. click "configure" on the block.
  7. Edit the body, trying to get it right this time.
  8. Save the block page again.
  9. Repeat steps 5-8 until horror gasping subsides.
  10. click "configure" on the block one last time.
  11. Set the visibility on the block how you actually want it.
  12. Save the block page one last time.

That's an awful lot of steps.

How about this?

  1. Go to admin/build/block/add.
  2. Enter some body text. Be bold. Leave off as many tags as you want.
  3. Click "Preview"
  4. Fix as necessary.
  5. Set the visibility how you want it.
  6. Save the form.
  7. Move the block to proper the region.
  8. Go treat yourself to a nice tea, since you just got 5-10 minutes of your life back.

This would work basically like node previews, where on the customize form there's a preview button that, when clicked, would display the block content in the content area, so that you could see what it looked like iteratively before actually saving it to the database.

Maybe it also makes sense to have a preview icon on the main admin/build/block page to save you a click if you want to know what the "OG Details" block will do when enabled. Not sure.

Comments

Michelle’s picture

Michelle
she/her
Primary language English
Location Wisconsin, USA
CreditAttribution: Michelle commented

Awesome idea. I usually go make a story node to test out blocks. This is much better.

Michelle

ScoutBaker’s picture

ScoutBaker CreditAttribution: ScoutBaker commented

+1 This would be a terrific enhancement.

catch’s picture

catch
he/him
Primary language English
CreditAttribution: catch commented

Great idea. Like Michelle, I made a node with a path called block_test once just for setting visibility to, then promptly forgot about it until six months later. It's no fun.

Preview icon on admin/build/block - this'd make lots and lots of sense with drag and drop. I imagine it'd not be a trivial thing to do though. There's also the chance you enable a nasty broken php input format block and WSOD yourself (until refresh I guess, but still).

awakenedvoice’s picture

awakenedvoice CreditAttribution: awakenedvoice commented

This is definitely a much needed feature. The blocks feature in drupal is excellent but creating and editing multiple blocks consumes more time than necessary because I need to save, activate the block, check the block (usually in another browser tab), then repeat if changes are necessary.

catch’s picture

catch
he/him
Primary language English
CreditAttribution: catch commented
Title: Preview feature for blocks » UMN Usability: Preview feature for blocks
Category: feature » bug

Since this came up in testing I'm retitling this.

floretan’s picture

floretan CreditAttribution: floretan commented

Another improvement that I would add to this is the ability to assign a new block to a region directly on admin/build/block/add (similarly to how one can assign a new CCK field to a fieldgroup on the field creation page).
The current workflow is:

  1. Create the content for a new block at admin/build/block/add.
  2. Submit the form, the user gets taken to the top of admin/build/block.
  3. Scroll down to the bottom of the page (can be long) and try to find the block I just created in the "disabled" section.
  4. Drag and drop or set region for my new block.
  5. Scroll down to the save button and save changes.

Suggested:

  1. Create the content for a new block at admin/build/block/add.
  2. Choose region.
  3. Submit.

This really only makes sense in combination with the suggested preview functionality.

Sutharsan’s picture

Sutharsan CreditAttribution: Sutharsan commented
Component: block.module » usability

Moving all usability issues to Drupal - component usability.

gaele’s picture

gaele CreditAttribution: gaele commented
Component: usability » block.module
Issue tags: +Usability

We're currently working on this at the Drupal UX Sprint.
Made a new issue for #6: #503908: Assign a new block to a region on add block page

TravisCarden’s picture

TravisCarden CreditAttribution: TravisCarden commented
Issue tags: +#d7ux

+1 - I've wanted this for a long time. Keep up the good work!

Bojhan’s picture

Bojhan CreditAttribution: Bojhan commented
Version: 7.x-dev » 8.x-dev
Category: bug » task

Somewhat sadden that we could not get this fixed, but I hope we can put more attention to blocks in Drupal 8. Moving it to a more fitting part of the cycle, and hope we can also make it more generic to preview more then just static text

druvision’s picture

druvision CreditAttribution: druvision commented

It would be really great if the block preview would be accessible directly from the list on block on http://example.com/admin/build/block, when I mouseover the block name.

chien_fu’s picture

chien_fu CreditAttribution: chien_fu commented

+1 Yes! This would be great! So many blocks and I keep forgetting what they are!
A preview on the blocks list would be superb.

yoroy’s picture

yoroy CreditAttribution: yoroy commented

Bump! :-)

TravisCarden’s picture

TravisCarden CreditAttribution: TravisCarden commented
Issue tags: -#d7ux +d8ux, +#d8ux

Re-tagging.

yoroy’s picture

yoroy CreditAttribution: yoroy at Roy Scholten commented
Version: 8.0.x-dev » 8.2.x-dev

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

capysara’s picture

capysara CreditAttribution: capysara at Bounteous commented

There's no stable release of this module, but it looks like it might address the issue, or at least be a starting point: https://www.drupal.org/project/entity_preview

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.