WordPress / block-directory

Block library: Timeline and plan: https://make.wordpress.org/design/2019/04/26/block-library-installing-blocks-from-within-gutenberg/
28 stars 7 forks source link

Block demo editor design exploration #23

Open MichaelArestad opened 3 years ago

MichaelArestad commented 3 years ago

The block detail view will include a demo of the block with an instance of the Gutenberg editor in order to let a user interact with a block before installing it. For the most part, it should be fairly identical to the standard Gutenberg editor in WordPress.

editor-anatomy

Editor label - Indicates that this editor frame is a a demo of the current block. I have been iterating to find a better way to label it, but so far this is the best option I have come up with. Essential actions only - Because this is a demo, I feel it important to remove any actions/tools that may not make sense for a demo. Border & Shadow - It made sense to add this in order to indicate where the editor begins and ends.

You can try the prototype here.

2020-11-11 10 18 54