Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add block directory to inserter menu #17431

merged 160 commits into from Sep 13, 2019


Copy link

commented Sep 13, 2019

Moved over from #16524. Props to @ck-lee for all the hard work on the original PR.


Extend the inserter to show available blocks for download and silently install the block when the block is inserted into the editor

This PR is still a WIP. Can you help guide me with the implementation and avoiding any pitfalls? I'm new to the block editor.


Types of changes

  • Extend inserter to fetch a list of suggestBlocks similar to reusableBlocks
  • The list of suggestBlocks is currently served from a mock API. It is not built yet.
  • Extend the filter to show suggestBlocks if there are no results found.
  • When "Add" button is clicked, download the block assets from plugin.svn. Then, load and insert the block into the editor without installing it.
  • ...

Relevant Links

[design] Main thread

[design] Figma

[design] Mockup feedback

[dev] Block Directory Proposal

[dev] Block Registration

[dev] Block Registration - assets JSON structure
#13693 (comment)

GitHub Block Directory issues

GitHub Block Directory project

@talldan talldan changed the title Try/discover new blocks Add block directory to inserter menu Sep 13, 2019
if ( ! asset ) {
const existing = document.querySelector( `script[src="${ asset.src }"]` );

This comment has been minimized.

Copy link

gziolo Sep 13, 2019


The biggest challenge here is that it doesn't ensure that all dependencies of the script are loaded. It probably won't be the case on the edit post page though unless someone uses one of the WordPress script handles which are not used on this page.

This comment has been minimized.

Copy link

noisysocks Sep 13, 2019


Ah, great point. Let's think about this some more and address it in a follow-up PR.


This comment has been minimized.

Copy link

commented Sep 13, 2019

From #16524 (comment):

This PR has now been split to 4 PRs in preparation for further review and merging:

Add block directory search settings (#17182)
Add an extension slot for inserter menu. (#17183)
Implement REST controller for block directory features. (#17243)
Implement new block-directory package (#17244)

Should we close all those PRs?

noisysocks and others added 2 commits Sep 13, 2019
This reverts commit 882d178.
Copy link

left a comment

Let's get this in behind an experimental flag. Thanks so much to @ck-lee for all your hard work building this, and thanks @talldan for the final push!

@talldan talldan merged commit f37be8e into master Sep 13, 2019
4 of 7 checks passed
4 of 7 checks passed
Header rules - gutenberg-playground No header rules processed
Pages changed - gutenberg-playground 3 new files uploaded
Redirect rules - gutenberg-playground No redirect rules processed
Mixed content - gutenberg-playground No mixed content detected
Travis CI - Pull Request Build Passed
netlify/gutenberg-playground/deploy-preview Deploy preview ready!
@talldan talldan deleted the try/discover-new-blocks branch Sep 13, 2019

This comment has been minimized.

Copy link

commented Sep 13, 2019

Great work everyone ❤️


This comment has been minimized.

Copy link

commented Sep 13, 2019

All these return WP_Error need to be return new WP_Error, they'll fatal otherwise.


This comment has been minimized.

Copy link

commented Sep 14, 2019

Thank you, team. @noisysocks, @talldan: You guys are awesome! I appreciate your final push to merge this big one!

All these return WP_Error need to be return new WP_Error, they'll fatal otherwise.
@TimothyBJacobs. I can help fix this as a separate PR.


This comment has been minimized.

Copy link

commented Sep 14, 2019

@ck-lee great work on this PR 🎉
@noisysocks and @talldan - I appreciate your courage for polishing and merging the big version of PR 💪

import { DownloadableBlocksPanel } from '@wordpress/block-directory';
import { useState } from '@wordpress/element';

function InserterMenuDownloadableBlocksPanel() {

This comment has been minimized.

Copy link

gziolo Sep 14, 2019


@noisysocks and @talldan - it looks like all the code from '@wordpress/block-directory' will still get downloaded even when it's disabled for the user with the GUTENBERG_PHASE flag. We need to find a way to tree-shake this code for WordPress core.

@noisysocks noisysocks referenced this pull request Sep 14, 2019
0 of 21 tasks complete
@youknowriad youknowriad added this to the Gutenberg 6.5 milestone Sep 14, 2019
@talldan talldan referenced this pull request Sep 23, 2019
4 of 5 tasks complete
dd32 pushed a commit to dd32/gutenberg that referenced this pull request Sep 27, 2019
* Add new properties and panel for discover items

* Add basic component with styling for discover blocks

* Dynamically load block into editor.

* Increase icon size.

* Handle insert block properly.

* Added another discover block.

* Revert unncessary changes.

* Retrieve discover blocks from a mock api.

* Only show discover blocks when no blocks are found.

* Style discover items header

* Fill discover item footer elements.

* Use BlockIcon components.

* Update documentation.

* Update mock URL.

* Revert changes in BlockIcon for size and use Icon directly.

* Use Fragment from wp.element.

* Created BlockRatings component.

* Update classNames to follow guidelines.

* Moved mock api to WordPress rest api.

* Separate DiscoverBlocksPanel to a component.

* Implement basic block search.

* Handle user without permission to install blocks.

* Styling for discover blocks search description.

* Handle error when script can't load.
Cache search results.

* Removed text to follow design.

* Fixed search not returning as array from the mock API.

* Refactor stars component to a shorter code using @talldan's recommendation.

* Renamed class names based on guideline and recommendation.

* Make React avoid rendering style attribute when icon is falsey.

* Removed redundant styles.

* Refactor DiscoverBlockListItem to smaller components.

* Renamed class names based on guideline and recommendation.

* Align @param descriptions.

* Removed redundant comments.

* Refactor DiscoverBlockListItem to smaller components.

Renamed class names based on guideline and recommendation.

* Tidy up blocks search controller code.

* Implement Retry button when Block previews can't load.

* Implement block search to

* Map plugin info to discover block.

* Map available plugin properties to block.

Comment for unavailable and ambigous properties.

* Fix typo in comment.

* Map updated metadata from api.

Handle multiple script loads correctly.

* Updated unit test.

* Show loading state when requesting for discover blocks.

* Only show uninstalled blocks.

* Prevent fetching if user has not typed anything.

* Update comments

* Debounce search for blocks.

* Implement spinner for loading state.

* Install and activate plugin after loading to editor.

* Handle error while installing block.

* Added functionality to retry installing block.

* Use regular HTML attributes without string evaluation.

* Use shorthand property names.

* Use WP_Error, improve and fix for feedback from PR.

props @TimothyBJacobs.

* Change install REST methods to allow PUT and POST only.
Update to use get_item_schema.

* Update REST to return response with snake case.

* New downloadable-blocks package to fill a slot in inserter menu.

* Update documentation.

* Passing props to downloadable blocks.

* Moved components from block-editor to its own package.

* Load css for downloadable-blocks.

* Moved debounce filterValue function to editor.

* Moved to use its own data store in downloadable-blocks package.

* Moved code to load block assets out of menu.js

* Remove comment.

* Removed block-icon from downloadable-blocks package.

* Fixed bad reference in scss file.

*  Moved installBlock function to a be next to handleDownloadableBlock.

* Moved the handleDownloadableBlock to actions.

* Renamed downloadable-blocks package to block-directory.

* Export DiscoverBlocksPanel as named exports.

* Update README and package.json.

* Renamed store to core/block-directory.

* Renamed css class name.

* Renamed css class name.

* Renamed discover-block to downloadable-block

* Rename block-ratings to prefix with block-directory.

* Rename rest controller to block directory.

* Limit the number of words in description.

* Update background color to design specs.

* Refactor to call loadAssets asynchronously.

* Refactor downloadBlock and installBlock to be more extensible.

* Rename handleDownloadableBlock to downloadBlock

* Handle if FS_METHOD is not direct.

* Fix retry of installing block.

* Only install block after download is successful.
Add error handling of block has no assets in the metadata.

* Fix onSelect of  item on success.

* Remove block if failed to install block.

* Update documentation.

* Check for permission before fetch.

* Fix unit test

* Uninstall new blocks if user has removed them.

* Remove debug messages from API.

* Fix bug to filter installedBlockType after uninstall.

* Add dependencies into package.json

* Update package-lock.json

* Fix flickering when search for blocks.

* Update package.json

* Update package-lock.json

* Fix the search results flickering.

* Update packages/block-directory/package.json

Co-Authored-By: Grzegorz (Greg) Ziółkowski <>

* Update packages/block-directory/package.json

Co-Authored-By: Grzegorz (Greg) Ziółkowski <>

* Update packages/block-directory/

Co-Authored-By: Grzegorz (Greg) Ziółkowski <>

* Improve accessibility.

* Remove redudant line.

* Rename the selector method.

* Remove isDownloadableBlocksEnabled settings.

If no fills registered for the slot, default to original behaviour.

* Update

* Added feature toggle for block directory in the experiment settings page.

* Update

* Fix typo

* Fixed phpcs errors.

* Fix phpcs warning.

* Rename REST base endpoint to block-directory.

* Update comment for class.

* Use noop instead of empty function.

* Rename discover blocks to downloadable blocks.

* Tidy up code.

* Update bottom section to be footer in an article.

* Fix phpcs warning.

* Mapped author information for block directory

* Remove experimental feature flag for block directory

* Fix block inner-content  overflowing rounded corners

* Remove superfluous css rule

* Use existing scss variables where possible

* Use a `p` tag for the block description

* Remove @access comments

* s/get_items_permissions_check/permissions_check/

* Update @SInCE to 6.5.0

* Mark parse_block_metadata() as private

* Update @SInCE to 6.5.0

* Include end of string anchor in image extension RegExp

* Remove item.isDisabled

* Use unicode apostrophe

* Improve spoken message

* Improve copy

* Add whitespace

* Fix comments and remove unused params

* Pass storeConfig straight to registerStore

* Remove empty quotes

* Use Array.isArray

* Add a comment explaining the block uninstall feature

* Fix plugin rating calculation

* s/isMenuEmpty/hasItems/

* Revert "Remove experimental feature flag for block directory"

This reverts commit 882d178.

Co-authored-by: CK <>
Co-authored-by: Robert Anderson <>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.