Add a "reinstall" button when a block type is not found #22631

ryelle · 2020-05-26T14:49:43Z

Description

If editing a post with a missing block, this PR adds the ability to reinstall it. It uses the Block Directory work to search for a block with the same name, and if found, gives you the option to reinstall the block. Once installed, the broken block is converted back into the original.

Fixes #24759

How has this been tested?

Only in-browser testing. I had a post with some missing blocks, one of which can be found on the block directory. You can copy this into the code editor to try it out (will install the Blissful Buttons plugin)

<!-- wp:sortabrilliant/blissful-buttons {"className":"is-style-offset"} -->
<div class="wp-block-sortabrilliant-blissful-buttons is-style-offset"><a class="wp-blissful-buttons__link" href="https://wordpress.org">This is a button.</a></div>
<!-- /wp:sortabrilliant/blissful-buttons -->

Screenshots

When first loaded, it searches for the block on wp.org. If no matching blocks are found, it only shows the Keep as HTML button (bottom). If it finds a block, it shows both Reinstall and Keep as HTML (top).

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

github-actions · 2020-05-26T14:55:25Z

Size Change: +524 B (0%)

Total Size: 1.17 MB

Filename	Size	Change
`build/block-directory/index.js`	8.5 kB	+506 B (5%)	🔍
`build/block-editor/style-rtl.css`	10.8 kB	+4 B (0%)
`build/block-library/index.js`	136 kB	+14 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.14 kB	0 B
`build/annotations/index.js`	3.67 kB	0 B
`build/api-fetch/index.js`	3.44 kB	0 B
`build/autop/index.js`	2.82 kB	0 B
`build/blob/index.js`	620 B	0 B
`build/block-directory/style-rtl.css`	953 B	0 B
`build/block-directory/style.css`	952 B	0 B
`build/block-editor/index.js`	126 kB	0 B
`build/block-editor/style.css`	10.8 kB	0 B
`build/block-library/editor-rtl.css`	8.55 kB	0 B
`build/block-library/editor.css`	8.55 kB	0 B
`build/block-library/style-rtl.css`	7.47 kB	0 B
`build/block-library/style.css`	7.47 kB	0 B
`build/block-library/theme-rtl.css`	741 B	0 B
`build/block-library/theme.css`	742 B	0 B
`build/block-serialization-default-parser/index.js`	1.88 kB	0 B
`build/block-serialization-spec-parser/index.js`	3.1 kB	0 B
`build/blocks/index.js`	47.7 kB	0 B
`build/components/index.js`	200 kB	0 B
`build/components/style-rtl.css`	15.5 kB	0 B
`build/components/style.css`	15.5 kB	0 B
`build/compose/index.js`	9.67 kB	0 B
`build/core-data/index.js`	12.3 kB	0 B
`build/data-controls/index.js`	1.29 kB	0 B
`build/data/index.js`	8.55 kB	0 B
`build/date/index.js`	5.38 kB	0 B
`build/deprecated/index.js`	772 B	0 B
`build/dom-ready/index.js`	568 B	0 B
`build/dom/index.js`	4.48 kB	0 B
`build/edit-navigation/index.js`	11.6 kB	0 B
`build/edit-navigation/style-rtl.css`	1.16 kB	0 B
`build/edit-navigation/style.css`	1.16 kB	0 B
`build/edit-post/index.js`	304 kB	0 B
`build/edit-post/style-rtl.css`	5.61 kB	0 B
`build/edit-post/style.css`	5.61 kB	0 B
`build/edit-site/index.js`	17 kB	0 B
`build/edit-site/style-rtl.css`	3.06 kB	0 B
`build/edit-site/style.css`	3.06 kB	0 B
`build/edit-widgets/index.js`	12 kB	0 B
`build/edit-widgets/style-rtl.css`	2.46 kB	0 B
`build/edit-widgets/style.css`	2.45 kB	0 B
`build/editor/editor-styles-rtl.css`	492 B	0 B
`build/editor/editor-styles.css`	493 B	0 B
`build/editor/index.js`	45.3 kB	0 B
`build/editor/style-rtl.css`	3.81 kB	0 B
`build/editor/style.css`	3.81 kB	0 B
`build/element/index.js`	4.65 kB	0 B
`build/escape-html/index.js`	733 B	0 B
`build/format-library/index.js`	7.71 kB	0 B
`build/format-library/style-rtl.css`	547 B	0 B
`build/format-library/style.css`	548 B	0 B
`build/hooks/index.js`	2.13 kB	0 B
`build/html-entities/index.js`	621 B	0 B
`build/i18n/index.js`	3.57 kB	0 B
`build/is-shallow-equal/index.js`	710 B	0 B
`build/keyboard-shortcuts/index.js`	2.52 kB	0 B
`build/keycodes/index.js`	1.94 kB	0 B
`build/list-reusable-blocks/index.js`	3.12 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	476 B	0 B
`build/list-reusable-blocks/style.css`	476 B	0 B
`build/media-utils/index.js`	5.32 kB	0 B
`build/notices/index.js`	1.79 kB	0 B
`build/nux/index.js`	3.4 kB	0 B
`build/nux/style-rtl.css`	671 B	0 B
`build/nux/style.css`	668 B	0 B
`build/plugins/index.js`	2.56 kB	0 B
`build/primitives/index.js`	1.41 kB	0 B
`build/priority-queue/index.js`	789 B	0 B
`build/redux-routine/index.js`	2.85 kB	0 B
`build/rich-text/index.js`	13.9 kB	0 B
`build/server-side-render/index.js`	2.77 kB	0 B
`build/shortcode/index.js`	1.7 kB	0 B
`build/token-list/index.js`	1.27 kB	0 B
`build/url/index.js`	4.06 kB	0 B
`build/viewport/index.js`	1.85 kB	0 B
`build/warning/index.js`	1.14 kB	0 B
`build/wordcount/index.js`	1.17 kB	0 B

_{compressed-size-action}

StevenDufresne · 2020-05-28T04:00:49Z

I like this idea and I can see it becoming useful in a number of different "missing blocks" use cases.

gziolo · 2020-05-28T11:24:06Z

packages/block-directory/src/plugins/index.js

+ if ( name !== 'core/missing' ) {
+ return settings;
+ }
+ settings.edit = missingInstallView;


It's fine as a temporary approach. However, it could be very hard to maintain in the long run as you would have to keep the implementation in sync with changes applied to the Missing block.

Have you considered using an approach where you could parameterize action items in some way? It could be also done through filters but on the more granular level or through SlotFill approach.

MichaelArestad · 2020-08-18T16:24:41Z

This seems like a pretty valuable feature. I suspect the missing block notice may have been overlooked in the 5.5 design updates. Currently, it looks like this:

Perhaps we can fix up the padding and button styling in this or a follow up PR to bring it closer to the block placeholders:

I did modify the copy slightly:

Your site doesn’t include support for the "%s" block. You can try installing the block, convert it to a Custom HTML block, or remove it entirely.

Install "%s"

Keep as HTML

I wasn't able to get the button to appear locally. I tried with Layout Grid and Gutenslider (which I will not be installing again). Hamze has closed the Blissful Buttons plugin so I tested with Layout Grid.

I would like to see what happens when I click the install button. Is there an installing/activating state? Is it so fast it just magically works?

ryelle · 2020-08-25T22:16:39Z

I've updated the code here to use a filter on the Missing edit view, so that it can fall back to the core missing component when blocks are not found or the block directory is not allowed. The initial view uses the default missing message, once the block directory returns a block it should load in the "Install [block name]" button.

When clicked, it flips to a loading button while the plugin installs

One thing that still needs work is that the attributes aren't carried over, for example in the above screenshots I've added a "Custom heading label", but when the Table of Contents block installs, it wipes out that content & is like a new block.

StevenDufresne

The code looks good.

Can we get the button to left align with the paragraph content and add the same amount of padding/margin under the button?

StevenDufresne · 2020-05-28T02:03:57Z

packages/block-directory/src/plugins/missing-install-view/index.js

+ /* translators: %s: block name */
+ __(
+ 'Your site doesn’t include support for the "%s" block. You can try reinstalling the block, convert its content to a Custom HTML block, or remove it entirely.'
+ ),


I like this copy since it clarifies the 3 actions that i can take. However, we only show 2 of them below. I was expecting to see the remove action next to the "Keep as HTML" link.

The current "missing" block uses the same pattern, so I'd rather leave it the same here.

StevenDufresne · 2020-05-28T02:07:41Z

packages/block-directory/src/plugins/missing-install-view/index.js

+ const hasContent = !! originalUndelimitedContent;
+ const hasHTMLBlock = getBlockType( 'core/html' );
+ const hasPermission = useSelect( ( select ) =>
+ select( 'core/block-directory' ).hasInstallBlocksPermission()


This call delays the "Re-install" button's rendering. It's a bit jarring. Since the block directory uses "plugin install" permissions, is there a better way to get the permissions without having to do it async?

If not, maybe we should assume that the user can and let the endpoint manage it.
Related: https://github.com/WordPress/gutenberg/pull/16524/files#r315493053

StevenDufresne · 2020-05-28T02:13:58Z

packages/block-directory/src/plugins/missing-install-view/install-button.js

+ <Button
+ onClick={ () =>
+ installBlockType( block ).then( ( success ) => {
+ if ( success ) {


I noticed that the block I was testing with errored out because of an issue with its JS. The UI just stares back at you doing nothing.

You can test with Boxer Block.

index.js:94 Uncaught (in promise) TypeError: Cannot read property 'name' of undefined at Object.replaceBlock (index.js:94) at use-dispatch-with-map.js:68 at convertToBlock (index.js:44) at install-button.js:36

More specifically, it installed properly but errored on injection.

StevenDufresne · 2020-05-28T04:02:22Z

packages/block-directory/src/plugins/missing-install-view/install-button.js

@@ -0,0 +1,57 @@
+/**


I expected this file to only have one button, not sure if you named it this with the intention of it being included into core, where it probably would be only 1 button.

ryelle · 2020-08-26T14:59:42Z

@StevenDufresne Something went weird in your review, it looks like GitHub let you review the old version of this PR. I think the current iteration fixes your other points.

StevenDufresne · 2020-08-26T22:58:17Z

@StevenDufresne Something went weird in your review, it looks like GitHub let you review the old version of this PR. I think the current iteration fixes your other points.

I think i may have had added a comment to a review a while ago but never submitted the review. GitHub must hold on to those, and on my end, it looks like they have been submitted but they actually haven't.

MichaelArestad · 2020-08-27T17:03:05Z

I updated the styles to match the mockup and other patterns (like the block placeholder state). In doing so, I noticed a couple things that were confusing to me. Here's a quick screencap of me disabling a block in order to view the warning:

You'll notice a few things. Once I clicked the button to reinstall Layout Grid, I got a new layout grid essentially. If I then refresh the page, I get my old content back along with the "newer version of this document" warning at the top. Do you know why my original content inside Layout Grid wasn't immediately restored?

The other really minor bug is that the buttons change once the warning figures out there is a block it can install. Is there any way we can prevent that button change flash? I'm open to ideas. This is what I'm talking about:

… the block placeholder state * Removed font size declaration - was inconsistent with other patterns particularly because of the use of `em` units for padding * changed padding on the warning and changed margin on the warning message * changed the side the padding was on for warning buttons

ryelle · 2020-09-01T21:26:59Z

The other really minor bug is that the buttons change once the warning figures out there is a block it can install. Is there any way we can prevent that button change flash?

It shows the current missing block view while we're searching the block directory for this block. We don't know if the block exists in the directory (or if it's some custom block), and we don't know the human-friendly name, until the API result comes back. We could add a spinner, or prevent showing any buttons while the search is running, use different copy? I'm not sure what would be best.

Do you know why my original content inside Layout Grid wasn't immediately restored?

Figured it out! It looks like nested blocks weren't being correctly updated, but they should be now.

MichaelArestad · 2020-09-01T22:23:01Z

We could add a spinner

I think something like that could work. Let's shelve that for a future PR. This one looks good to go from a design standpoint.

StevenDufresne · 2020-09-03T01:15:24Z

packages/block-editor/src/components/warning/style.scss

@@ -3,8 +3,7 @@
 display: flex;
 flex-wrap: wrap;
 font-family: $default-font;
- font-size: $default-font-size;
- padding: ($grid-unit-10 - $border-width - $border-width) $grid-unit-15;
+ padding: 1em;


Having padding set as an em unit could lead to some odd outcomes should the block be broken inside of a parent block. It will inherit its font size. May be better to use rem units.

There is an open PR to switch to em units and the block Placeholder state already uses em units. That's the reason for the change. Might as well be consistent.

Thanks for the heads up....

I wonder if that PR is considering third party blocks. This may get interesting. 🍿

That PR looks like it was halting for further testing. That said, this will still be more consistent with the placeholder state for other blocks.

StevenDufresne

Minus my comment about using em units. This works as expected and is good to go.

As @MichaelArestad has mentioned, we will want to address the UI change when we find a block directory block in the future.

mcsf · 2020-09-07T21:00:23Z

I'm late to the party, but have you considered using the existing setUnregisteredTypeHandlerName interface to oust core/missing rather than introducing the editor.missingEdit filter? I'm finding it hard to justify the extra hook (it's fair to say that over time we've been favouring JS hooks less and less when the goal is to extend visual components — typically better solutions are offered either by Slot/Fill or by replacing components, as is the case with setUnregisteredTypeHandlerName).

ryelle · 2020-09-07T21:13:41Z

Wouldn't setUnregisteredTypeHandlerName require me to rewrite all of core/missing again? It seems like I'd need to create an entire new missing block to set the handler to. Unless I'm misreading how setUnregisteredTypeHandlerName works?

I thought about a Slot/Fill approach, but that would probably look a lot like this filter, since I'd want to fall through to core/missing's view unless we find the block in the directory.

youknowriad · 2020-09-08T08:31:07Z

If I'm understanding the issue, the requirements are:

Adding UI to the core missing block but doing it as a "plugin" to leave the "block directory" code on its own module (as a plugin).

--
Without introducing the new editor.missingEdit, can't we just hook into blocks.registerBlockType for the core/missing block and override the edit property?

mcsf · 2020-09-08T10:39:05Z

Wouldn't setUnregisteredTypeHandlerName require me to rewrite all of core/missing again? It seems like I'd need to create an entire new missing block to set the handler to. Unless I'm misreading how setUnregisteredTypeHandlerName works?

I thought about a Slot/Fill approach, but that would probably look a lot like this filter, since I'd want to fall through to core/missing's view unless we find the block in the directory.

Yes to all your questions. :) I see the use case for allowing falling back to core/missing and wanting to avoid repetition. I still thought I'd ask, since filtering components can become more fragile over time if the decorated component changes. In this particular case, though, it's comforting to see that filterMissing is really just a filter — returning either an OriginalComponent instance or something entirely different. So I think a hook was a good call.

Without introducing the new editor.missingEdit, can't we just hook into blocks.registerBlockType for the core/missing block and override the edit property?

This does seem worth looking at.

ryelle · 2020-09-08T14:49:19Z

Adding UI to the core missing block but doing it as a "plugin" to leave the "block directory" code on its own module (as a plugin).

Correct.

Without introducing the new editor.missingEdit, can't we just hook into blocks.registerBlockType for the core/missing block and override the edit property?

This is actually exactly what I did in the first pass of the PR, which @gziolo pointed out would be hard to keep in sync with any core core/missing changes (#22631 (comment)), though that was rewriting more of core/missing. I'll try out a PR for a more combined approach using blocks.registerBlockType.

ryelle added Needs Design Feedback Needs general design feedback. [Feature] Block Directory Related to the Block Directory, a repository of block plugins labels May 26, 2020

ryelle self-assigned this May 26, 2020

ryelle changed the title ~~Block Directory: Add a "reinstall" button when a block type is not found~~ Add a "reinstall" button when a block type is not found May 27, 2020

ryelle requested review from gziolo, StevenDufresne, tellyworth and talldan May 27, 2020 16:52

gziolo reviewed May 28, 2020

View reviewed changes

ryelle mentioned this pull request May 29, 2020

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

Closed

MichaelArestad removed the Needs Design Feedback Needs general design feedback. label Aug 18, 2020

ryelle force-pushed the try/block-directory-install-missing-blocks branch from 22be2a0 to 1b15476 Compare August 25, 2020 22:10

ryelle requested review from ajitbohra and Soean as code owners August 25, 2020 22:10

ryelle mentioned this pull request Aug 25, 2020

Block Directory: Explore linking to the block directory when a block is found in the content but now is not installed. #24759

Closed

StevenDufresne reviewed Aug 25, 2020

View reviewed changes

ryelle requested review from ellatrix and youknowriad as code owners August 27, 2020 16:54

ryelle and others added 5 commits September 1, 2020 15:58

Block Directory: Add a "reinstall" button when a block type is not found

167d48e

Update package-lock.json

d1ad354

Filter the Missing block edit component

9c384e8

Remove debug code

8cabe8c

Run parse to get the correct attributes and innerBlocks

2413b8c

ryelle force-pushed the try/block-directory-install-missing-blocks branch from a289d1e to 2413b8c Compare September 1, 2020 21:26

ryelle requested review from StevenDufresne and gziolo September 2, 2020 14:34

StevenDufresne reviewed Sep 3, 2020

View reviewed changes

StevenDufresne approved these changes Sep 3, 2020

View reviewed changes

ryelle merged commit d62d455 into master Sep 3, 2020

ryelle deleted the try/block-directory-install-missing-blocks branch September 3, 2020 20:22

github-actions bot added this to the Gutenberg 9.0 milestone Sep 3, 2020

ryelle mentioned this pull request Sep 11, 2020

Block Directory: Switch to blocks.registerBlockType filter #25264

Merged

miminari mentioned this pull request Dec 8, 2020

WordPress5.6対応 vektor-inc/vk-blocks-pro#137

Closed

ryelle mentioned this pull request Jan 6, 2021

Block Directory: Fix "missing" block when the block can be installed from the directory #28030

Merged

zzap mentioned this pull request Jan 28, 2022

[HelpHub] About Block Directory WordPress/Documentation-Issue-Tracker#128

Closed

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add a "reinstall" button when a block type is not found #22631

Add a "reinstall" button when a block type is not found #22631

ryelle commented May 26, 2020 •

edited

github-actions bot commented May 26, 2020 •

edited

StevenDufresne commented May 28, 2020

gziolo May 28, 2020

MichaelArestad commented Aug 18, 2020 •

edited

ryelle commented Aug 25, 2020

StevenDufresne left a comment

StevenDufresne May 28, 2020

ryelle Aug 26, 2020

StevenDufresne May 28, 2020

StevenDufresne May 28, 2020

StevenDufresne May 28, 2020

StevenDufresne May 28, 2020

ryelle commented Aug 26, 2020

StevenDufresne commented Aug 26, 2020

MichaelArestad commented Aug 27, 2020

ryelle commented Sep 1, 2020

MichaelArestad commented Sep 1, 2020

StevenDufresne Sep 3, 2020

MichaelArestad Sep 3, 2020 •

edited

StevenDufresne Sep 3, 2020

MichaelArestad Sep 3, 2020

StevenDufresne left a comment

mcsf commented Sep 7, 2020

ryelle commented Sep 7, 2020

youknowriad commented Sep 8, 2020

mcsf commented Sep 8, 2020

ryelle commented Sep 8, 2020

Add a "reinstall" button when a block type is not found #22631

Add a "reinstall" button when a block type is not found #22631

Conversation

ryelle commented May 26, 2020 • edited

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

github-actions bot commented May 26, 2020 • edited

StevenDufresne commented May 28, 2020

Choose a reason for hiding this comment

MichaelArestad commented Aug 18, 2020 • edited

ryelle commented Aug 25, 2020

StevenDufresne left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ryelle commented Aug 26, 2020

StevenDufresne commented Aug 26, 2020

MichaelArestad commented Aug 27, 2020

ryelle commented Sep 1, 2020

MichaelArestad commented Sep 1, 2020

Choose a reason for hiding this comment

MichaelArestad Sep 3, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

StevenDufresne left a comment

Choose a reason for hiding this comment

mcsf commented Sep 7, 2020

ryelle commented Sep 7, 2020

youknowriad commented Sep 8, 2020

mcsf commented Sep 8, 2020

ryelle commented Sep 8, 2020

ryelle commented May 26, 2020 •

edited

github-actions bot commented May 26, 2020 •

edited

MichaelArestad commented Aug 18, 2020 •

edited

MichaelArestad Sep 3, 2020 •

edited