Add block directory to inserter menu #17431

talldan · 2019-09-13T18:07:32Z

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

Description

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.

Screenshots

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
https://make.wordpress.org/design/2019/04/26/block-library-installing-blocks-from-within-gutenberg/

[design] Figma
https://www.figma.com/file/QKhoOKXkBN2mHacqvrtdNuI6/Gutenberg-Block-Library%3A-Installation

[design] Mockup feedback
https://make.wordpress.org/design/2019/06/07/block-library-mockups-prototype

[dev] Block Directory Proposal
https://make.wordpress.org/meta/2019/03/08/the-block-directory-and-a-new-type-of-plugin/

[dev] Block Registration
https://github.com/WordPress/gutenberg/blob/master/docs/rfc/block-registration.md

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

GitHub Block Directory issues
https://github.com/WordPress/block-directory/issues

GitHub Block Directory project
https://github.com/WordPress/block-directory/projects/1

Cache search results.

…ation.

packages/block-editor/src/components/inserter/menu.js

gziolo · 2019-09-13T19:57:57Z

packages/block-directory/src/store/controls.js

+	if ( ! asset ) {
+		return;
+	}
+	const existing = document.querySelector( `script[src="${ asset.src }"]` );


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.

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

Adding an update:
This problem could potentially be addressed here:

Wordpress Core Ticket:

Gutenberg Ticket: Delay loading TinyMCE until a classic block is edited #21738

gziolo · 2019-09-13T19:59:56Z

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?

This reverts commit 882d178.

noisysocks

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!

youknowriad · 2019-09-13T21:29:26Z

Great work everyone ❤️

TimothyBJacobs · 2019-09-13T22:14:49Z

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

ck-lee · 2019-09-14T08:21:30Z

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.

gziolo · 2019-09-14T13:39:14Z

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

gziolo · 2019-09-14T13:46:14Z

packages/editor/src/components/inserter-menu-downloadable-blocks-panel/index.js

+import { DownloadableBlocksPanel } from '@wordpress/block-directory';
+import { useState } from '@wordpress/element';
+
+function InserterMenuDownloadableBlocksPanel() {


@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.

aduth · 2020-05-28T16:17:22Z

packages/block-directory/src/components/downloadable-block-header/index.js

+			}
+
+			<div className="block-directory-downloadable-block-header__column">
+				<span role="heading" className="block-directory-downloadable-block-header__title" >


The end-to-end AXE tests require an aria-level be provided when using role="heading"

https://dequeuniversity.com/rules/axe/3.5/aria-required-attr?application=axe-puppeteer

Normally it's not caught in end-to-end tests, but due to some unexpected circumstances, it's become an issue lately (#22712).

What is the intended level here?
Why can't it just be a semantic heading element, vs. role=?

See: #22713

CK added 30 commits July 3, 2019 12:34

Add new properties and panel for discover items

1060588

Add basic component with styling for discover blocks

8fc202a

Dynamically load block into editor.

ebd1148

Increase icon size.

e85b2a0

Handle insert block properly.

7dbdf01

Added another discover block.

673475e

Revert unncessary changes.

069d796

Retrieve discover blocks from a mock api.

a02a3c7

Only show discover blocks when no blocks are found.

7824941

Style discover items header

e08184b

Fill discover item footer elements.

b5e1756

Use BlockIcon components.

810546b

Merged

78e7883

Update documentation.

e363149

Update mock URL.

c67d4f3

Revert changes in BlockIcon for size and use Icon directly.

bdda0cc

Use Fragment from wp.element.

acca61d

Created BlockRatings component.

049297f

Update classNames to follow guidelines.

512b099

Moved mock api to WordPress rest api.

4b8e27a

Merged from upstream

a258146

Separate DiscoverBlocksPanel to a component.

9c2ab35

Implement basic block search.

53e6e57

Handle user without permission to install blocks.

d6cae04

Styling for discover blocks search description.

0e4c81b

Handle error when script can't load.

97326c8

Cache search results.

Removed text to follow design.

c2d142a

Fixed search not returning as array from the mock API.

4ddf8c7

Refactor stars component to a shorter code using @talldan's recommend…

95bcc09

…ation.

Renamed class names based on guideline and recommendation.

3745493

gziolo reviewed Sep 13, 2019

View reviewed changes

packages/block-editor/src/components/inserter/menu.js Outdated Show resolved Hide resolved

noisysocks mentioned this pull request Sep 13, 2019

WIP: Install a block from inserter #16524

Closed

gziolo reviewed Sep 13, 2019

View reviewed changes

This was referenced Sep 13, 2019

Add block directory search settings. #17182

Closed

Added an extension slot for inserter menu. #17183

Closed

Implement REST controller for block directory features. #17243

Closed

Implement new block-directory package #17244

Closed

noisysocks and others added 2 commits September 13, 2019 16:06

s/isMenuEmpty/hasItems/

613223f

Revert "Remove experimental feature flag for block directory"

1025568

This reverts commit 882d178.

noisysocks added the Backport to WP 6.6 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Sep 13, 2019

noisysocks approved these changes Sep 13, 2019

View reviewed changes

talldan merged commit f37be8e into master Sep 13, 2019

talldan deleted the try/discover-new-blocks branch September 13, 2019 20:56

gziolo reviewed Sep 14, 2019

View reviewed changes

noisysocks removed the Backport to WP 6.6 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Sep 14, 2019

noisysocks mentioned this pull request Sep 14, 2019

Follow-up work for the Block Directory #17440

Closed

21 tasks

youknowriad added this to the Gutenberg 6.5 milestone Sep 14, 2019

nerrad mentioned this pull request Sep 20, 2019

Block Directory inclusion explorations (Design & Technical) woocommerce/woocommerce-blocks#975

Closed

talldan mentioned this pull request Sep 23, 2019

Fix inserter / block directory issues #17517

Merged

5 tasks

StevenDufresne mentioned this pull request May 13, 2020

Block Directory: Uninstall newly installed blocks that are not used on save #22307

Closed

aduth reviewed May 28, 2020

View reviewed changes

aduth mentioned this pull request May 28, 2020

Use semantic element for block directory download heading #22713

Merged

tellyworth mentioned this pull request Jun 23, 2020

Block Directory #23378

Closed

20 tasks

ryelle mentioned this pull request Jun 25, 2020

Editor: Remove unnecessary block directory dependency #23476

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add block directory to inserter menu #17431

Add block directory to inserter menu #17431

talldan commented Sep 13, 2019 •

edited

Loading

gziolo Sep 13, 2019

noisysocks Sep 13, 2019

StevenDufresne May 13, 2020

gziolo commented Sep 13, 2019

noisysocks left a comment

youknowriad commented Sep 13, 2019

TimothyBJacobs commented Sep 13, 2019

ck-lee commented Sep 14, 2019

gziolo commented Sep 14, 2019

gziolo Sep 14, 2019

aduth May 28, 2020

Add block directory to inserter menu #17431

Add block directory to inserter menu #17431

Conversation

talldan commented Sep 13, 2019 • edited Loading

Description

Screenshots

Types of changes

Relevant Links

gziolo Sep 13, 2019

Choose a reason for hiding this comment

noisysocks Sep 13, 2019

Choose a reason for hiding this comment

StevenDufresne May 13, 2020

Choose a reason for hiding this comment

gziolo commented Sep 13, 2019

noisysocks left a comment

Choose a reason for hiding this comment

youknowriad commented Sep 13, 2019

TimothyBJacobs commented Sep 13, 2019

ck-lee commented Sep 14, 2019

gziolo commented Sep 14, 2019

gziolo Sep 14, 2019

Choose a reason for hiding this comment

aduth May 28, 2020

Choose a reason for hiding this comment

talldan commented Sep 13, 2019 •

edited

Loading