Block Library: Installing Blocks from Within Gutenberg

With the introduction of GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ and blocks comes the need for a way to install new blocks, just like plugins or themes. Step one in this project, for the design team, is installing blocks contextually within Gutenberg. Check out this thread for more details and prior explorations.

Scope

The WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. will provide an endpoint for searching for blocks by name and description, and return metadata similar to that of plugins. Gutenberg’s Inserter could use that endpoint to also show relevant blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. plugins that are available to install, with a button and process for seamless installation.

@tellyworth

This project is limited to installing one block at a time from within the Gutenberg editor. That might encompass:

  • How people discover blocks from within the Gutenberg editor
  • How to give users enough detail to make an informed decision about which block to install
  • How uninstalled blocks are previewed
  • What the Install process would look like
  • What happens if the installation fails
  • Removing installed blocks
  • How to manage installation requests by non-admin users

This scope is intentionally kept small so we can focus on shipping an iterating. A larger exploration of how to download or install blocks from within a Blocks screen in wp-admin, and WordPress.org, will take place in a future project.

Timeline

TaskStageFacilitatorDueStatus
Create repoScope@karmatosedApril 26
Create project board for design tasks in GitHubScope@karmatosedApril 26
Create issues in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ for designScope@karmatosedApril 26
Make/design kick off postScope@melchoyceApril 26
Make/meta kick off postScope@tellyworthMay 3
Competitive analysisResearch@melchoyceMay 17
Competitive analysis summary postResearch@melchoyceMay 17
Experimental explorationsExploration@melchoyceMay 24
Flow diagramExploration@melchoyceMay 24
Iterate on experimentationsRefine@melchoyceMay 31
Make/design post of designsRefine@melchoyceJune 7
Prototyping (click prototype/Figma)Prototyping@melchoyceJune 7
Testing/feedback on prototypePrototyping@melchoyceJuly 5
Update GitHub issue to start developmentDevelopment@melchoyceJuly 5
Prototype (technical prototype)Development@tellyworthTBD
Testing/feedback on prototypeDevelopmentTBDTBD

See the complete timeline on Google Drive.

Where to Follow Along

  • There will be weekly or biweekly updates here on make/design.
  • There will be time during each weekly Design meeting on SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. for updates.
  • Design tasks will exist as issues on GitHub; you can follow along on on our project board.
  • Development will also be happening on GitHub.

Get Involved

Interested in joining @iviolini and I on this project? Let us know in the comments, and follow along on GitHub.

If you don’t have time to devote to working on design tasks, that’s cool — feedback is always welcome, and a great way for you to contribute.

#block-directory, #block-library