Add reusable block tab to inserter. #23296

ZebulanStanphill · 2020-06-19T04:48:07Z

Description

This PR moves reusable blocks from a category mostly hidden at the bottom of the standard blocks tab in the inserter to their own tab.

Currently, it uses the style of the block tab for presenting the reusable blocks. But I think it may make more sense to present them the same way as patterns. Let me know what you think in #22860.

How has this been tested?

I tested to make sure the tab showed reusable blocks, that inserting reusable blocks worked, and that the reusable category was removed from the standard blocks tab.

Screenshots

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-06-19T04:54:53Z

Size Change: +181 B (0%)

Total Size: 1.13 MB

Filename	Size	Change
`build/block-editor/index.js`	109 kB	+169 B (0%)
`build/block-editor/style-rtl.css`	10.7 kB	+6 B (0%)
`build/block-editor/style.css`	10.7 kB	+6 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.14 kB	0 B
`build/annotations/index.js`	3.62 kB	0 B
`build/api-fetch/index.js`	3.4 kB	0 B
`build/autop/index.js`	2.82 kB	0 B
`build/blob/index.js`	620 B	0 B
`build/block-directory/index.js`	7.16 kB	0 B
`build/block-directory/style-rtl.css`	952 B	0 B
`build/block-directory/style.css`	951 B	0 B
`build/block-library/editor-rtl.css`	7.63 kB	0 B
`build/block-library/editor.css`	7.64 kB	0 B
`build/block-library/index.js`	130 kB	0 B
`build/block-library/style-rtl.css`	7.79 kB	0 B
`build/block-library/style.css`	7.79 kB	0 B
`build/block-library/theme-rtl.css`	730 B	0 B
`build/block-library/theme.css`	732 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`	48.2 kB	0 B
`build/components/index.js`	198 kB	0 B
`build/components/style-rtl.css`	15.9 kB	0 B
`build/components/style.css`	15.8 kB	0 B
`build/compose/index.js`	9.65 kB	0 B
`build/core-data/index.js`	11.4 kB	0 B
`build/data-controls/index.js`	1.29 kB	0 B
`build/data/index.js`	8.44 kB	0 B
`build/date/index.js`	5.47 kB	0 B
`build/deprecated/index.js`	772 B	0 B
`build/dom-ready/index.js`	569 B	0 B
`build/dom/index.js`	3.19 kB	0 B
`build/edit-navigation/index.js`	9.97 kB	0 B
`build/edit-navigation/style-rtl.css`	1.02 kB	0 B
`build/edit-navigation/style.css`	1.02 kB	0 B
`build/edit-post/index.js`	304 kB	0 B
`build/edit-post/style-rtl.css`	5.57 kB	0 B
`build/edit-post/style.css`	5.56 kB	0 B
`build/edit-site/index.js`	16.6 kB	0 B
`build/edit-site/style-rtl.css`	3.02 kB	0 B
`build/edit-site/style.css`	3.02 kB	0 B
`build/edit-widgets/index.js`	9.33 kB	0 B
`build/edit-widgets/style-rtl.css`	2.45 kB	0 B
`build/edit-widgets/style.css`	2.45 kB	0 B
`build/editor/editor-styles-rtl.css`	537 B	0 B
`build/editor/editor-styles.css`	539 B	0 B
`build/editor/index.js`	44.8 kB	0 B
`build/editor/style-rtl.css`	3.82 kB	0 B
`build/editor/style.css`	3.82 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.73 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`	622 B	0 B
`build/i18n/index.js`	3.56 kB	0 B
`build/is-shallow-equal/index.js`	710 B	0 B
`build/keyboard-shortcuts/index.js`	2.51 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.3 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.5 kB	0 B
`build/priority-queue/index.js`	788 B	0 B
`build/redux-routine/index.js`	2.85 kB	0 B
`build/rich-text/index.js`	14 kB	0 B
`build/server-side-render/index.js`	2.68 kB	0 B
`build/shortcode/index.js`	1.69 kB	0 B
`build/token-list/index.js`	1.28 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}

MichaelArestad · 2020-06-19T19:02:42Z

This works well. My only suggestion from a design perspective is to change the label, as @mtias suggested, to "Saved."

ZebulanStanphill · 2020-06-20T20:23:25Z

Does that make sense? It seems weird and inconsistent to call them "Saved" in one spot but "Reusable" everywhere else.

michelleweber · 2020-06-22T12:41:47Z

I tend to lean toward sticking with "Reusable" for consistency -- the existence/idea of reusable blocks is still new, so I'd want people to be confident in their ability to find what they need by looking for the "reusable" language that we use elsewhere.

mtias · 2020-06-23T10:44:53Z

I think we should rename to Saved across the board if we lift it up as its own grouping (which I like). I've seen Reusable to suffer from lack of context (reusable blocks is much better than reusable) and translation shortcomings in a few languages. Saved stands on its own a bit better next to Patterns and Blocks.

That said, we should look at renaming separately and review the different contexts in which we show the action, as well as the icon.

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

packages/block-editor/src/components/inserter/reusable-block-list.js

mtias · 2020-06-23T10:52:04Z

packages/block-editor/src/components/inserter/reusable-block-list.js

+			categories,
+			collections,
+			filterValue
+		).filter( ( { category } ) => category === 'reusable' );


Not for this PR, but I think we should let go of "reusable" being a category and instead allow the tab to display other categories. That would allow a site to categorize reusable blocks (with the regular category interface when managing the custom post type) and have the categories listed in this tab as regular block categories.

enriquesanchez · 2020-06-23T22:14:18Z

Tested this PR on Safari + VoiceOver. The tabs are properly announced as before, both their name and the number of tab (ie. 3 of 3), as well as the number of blocks under each one (with the exception of Patterns).

From an accessibility perspective, this looks good to me 👍

ZebulanStanphill · 2020-06-24T19:28:58Z

After #22789 got merged, I needed to rebase this. I did, and now the reusable blocks tab isn't showing up. I'll let you know when I fix it.

ZebulanStanphill · 2020-06-30T03:55:11Z

Alright, I've spent the whole day working on fixing the end-to-end tests. I'm down to just one failing test, and I can't figure out why it's failing:

FAIL packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js (43.064s)
  ● cpt locking › template_lock all › can use the global inserter in inner blocks

    expect(received).not.toBeNull()

    Received: null

      120 | 			await pressKeyTimes( 'Tab', 2 );
      121 | 			await page.keyboard.press( 'Enter' );
    > 122 | 			expect( await page.$( '.wp-block-gallery' ) ).not.toBeNull();
          | 			                                                  ^
      123 | 		} );
      124 | 	} );
      125 | 

      at Object.<anonymous> (specs/editor/plugins/cpt-locking.test.js:122:54)
          at runMicrotasks (<anonymous>)

It seems like the Reusable block tab is being added (causing the inserter to use tabs, and thus causing an extra Tab press to be necessary), but if that's the case (and it might not be), I don't know what's causing the Reusable block tab to appear. I need help to figure this one out.

jasmussen · 2020-06-30T07:58:13Z

I took a look at this, and tests pass for me locally.

I even tried this interactive test:

npm run test-e2e packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js  -- --puppeteer-interactive

and the failing test in question appears to work as intended visually too. Here's the test bit:

			await page.click( '.edit-post-header-toolbar__inserter-toggle' );
			await page.type(
				'.block-editor-inserter__search-input',
				'gallery'
			);
			await pressKeyTimes( 'Tab', 2 );
			await page.keyboard.press( 'Enter' );
			expect( await page.$( '.wp-block-gallery' ) ).not.toBeNull();

So, click the inserter, search for "gallery", press tab twice, and you should've inserted a gallery block. This is where it gets interesting, because regardless of configuration, this always takes 3 tab presses for me. Here's your branch with no reusable blocks:

Here's your branch, with a reusable block:

Here's the master branch with a reusable block:

In all three, you press tab 3 times. Which begs the questions:

Why are the tests passing on master?
Why are the tests passing for me on this branch, locally, but failing here?

@youknowriad — Jorge wrote these tests but is out. Do you have any insights here?

packages/block-editor/src/components/inserter/reusable-blocks-tab.js

youknowriad · 2020-07-01T10:53:34Z

packages/block-editor/src/components/inserter/test/reusable-blocks-tab.js

+
+		assertNoResultsMessageNotToBePresent( container );
+	} );
+} );


I'm not really certain this unit tests is very valuable personally but your call.

I didn't create these tests from scratch. They were originally in the unit test file for the standard blocks tab. I just moved them over since reusable blocks are now in their own tab.

packages/e2e-tests/specs/editor/various/reusable-blocks.test.js

youknowriad · 2020-07-01T11:00:49Z

I think the test failure comes from the fact that if you have reusable blocks, you'll have an extra tab stop on that inserter.
Ideally, the reusable blocks are removed (like the post) at the beginning of end2end tests and end2end tests creating them should clean them when they finish.

youknowriad

Cool stuff, this is looking good, I left some minor comments and suggestions about the e2e tests errors.

youknowriad · 2020-07-01T16:40:42Z

Small tip: instead of amending commits (sometimes it's necessary though), it's better to keep pushing new commits in PRs. This makes it easier for folks following the PR to know what changed in the latest commits.

packages/block-editor/src/components/inserter/reusable-blocks-tab.js

ZebulanStanphill · 2020-07-01T17:09:04Z

I didn't realize reusable blocks were persisted across tests. Is there a simple way to delete all reusable blocks at the end of a test? Or do you have to perform the deletion "manually" (by opening the more menu on each reusable block and clicking the "Remove from Reusable blocks" option).

youknowriad · 2020-07-02T08:31:05Z

@ZebulanStanphill There's a trashExistingPosts function in setup-test-framework.js, we should do something similar for reusable blocks. (Potentially we could make it a utility)

youknowriad

Let's get this in to be ready for 5.5 beta 1.

💯 kudos here @ZebulanStanphill

jasmussen · 2020-07-03T13:18:24Z

👌

ZebulanStanphill · 2020-07-03T13:24:20Z

Thanks for fixing the tests, @youknowriad! 😄

ZebulanStanphill requested review from ellatrix and youknowriad as code owners June 19, 2020 04:48

youknowriad added the Needs Design Feedback Needs general design feedback. label Jun 19, 2020

ZebulanStanphill force-pushed the add/inserter-reusable-block-tab branch from b0c1435 to 0dd3b6d Compare June 19, 2020 15:44

ZebulanStanphill added the Needs Copy Review Needs review of user-facing copy (language, phrasing) label Jun 20, 2020

ZebulanStanphill force-pushed the add/inserter-reusable-block-tab branch from 0dd3b6d to 00125c4 Compare June 21, 2020 00:28

ZebulanStanphill force-pushed the add/inserter-reusable-block-tab branch from 00125c4 to 94a0e3d Compare June 22, 2020 15:41

mtias reviewed Jun 23, 2020

View reviewed changes

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

mtias reviewed Jun 23, 2020

View reviewed changes

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

mtias reviewed Jun 23, 2020

View reviewed changes

MichaelArestad removed the Needs Design Feedback Needs general design feedback. label Jun 23, 2020

ZebulanStanphill force-pushed the add/inserter-reusable-block-tab branch from 94a0e3d to af3e07d Compare June 23, 2020 17:35

ZebulanStanphill removed Needs Accessibility Feedback Need input from accessibility Needs Copy Review Needs review of user-facing copy (language, phrasing) labels Jun 24, 2020

ZebulanStanphill force-pushed the add/inserter-reusable-block-tab branch from af3e07d to 689e38a Compare June 24, 2020 15:40

ZebulanStanphill force-pushed the add/inserter-reusable-block-tab branch 2 times, most recently from a6a2134 to 8ea92db Compare June 25, 2020 03:22

ZebulanStanphill force-pushed the add/inserter-reusable-block-tab branch 2 times, most recently from bc9d192 to 6cb6761 Compare June 29, 2020 23:58

youknowriad reviewed Jul 1, 2020

View reviewed changes

packages/block-editor/src/components/inserter/reusable-blocks-tab.js Outdated Show resolved Hide resolved

youknowriad reviewed Jul 1, 2020

View reviewed changes

packages/e2e-tests/specs/editor/various/reusable-blocks.test.js Outdated Show resolved Hide resolved

youknowriad reviewed Jul 1, 2020

View reviewed changes

ZebulanStanphill force-pushed the add/inserter-reusable-block-tab branch from 6cb6761 to 72e8847 Compare July 1, 2020 16:23

ZebulanStanphill added 2 commits July 1, 2020 11:49

Add reusable blocks tab to inserter.

c698479

Merge ReusableBlocksSearchResults and InsertableReusableBlocks.

35f785a

ZebulanStanphill force-pushed the add/inserter-reusable-block-tab branch from 72e8847 to 35f785a Compare July 1, 2020 16:58

youknowriad reviewed Jul 1, 2020

View reviewed changes

packages/block-editor/src/components/inserter/reusable-blocks-tab.js Outdated Show resolved Hide resolved

Simplify inserter item filtering.

43ab9de

youknowriad force-pushed the add/inserter-reusable-block-tab branch from 1406d6b to c4b6798 Compare July 3, 2020 12:22

Try fixing e2e tests

dad3772

youknowriad force-pushed the add/inserter-reusable-block-tab branch from c4b6798 to dad3772 Compare July 3, 2020 12:37

youknowriad approved these changes Jul 3, 2020

View reviewed changes

youknowriad merged commit 9e0c923 into master Jul 3, 2020

youknowriad deleted the add/inserter-reusable-block-tab branch July 3, 2020 13:05

github-actions bot added this to the Gutenberg 8.5 milestone Jul 3, 2020

youknowriad mentioned this pull request Jul 8, 2020

Fix error triggered when a tab is removed from TabPanel component #23784

Merged

Mamaduka mentioned this pull request Jun 13, 2023

ADD block errors due to layout shift #23392

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add reusable block tab to inserter. #23296

Add reusable block tab to inserter. #23296

ZebulanStanphill commented Jun 19, 2020 •

edited by youknowriad

Loading

github-actions bot commented Jun 19, 2020 •

edited

Loading

MichaelArestad commented Jun 19, 2020

ZebulanStanphill commented Jun 20, 2020

michelleweber commented Jun 22, 2020

mtias commented Jun 23, 2020

mtias Jun 23, 2020

ZebulanStanphill Jun 23, 2020

enriquesanchez commented Jun 23, 2020

ZebulanStanphill commented Jun 24, 2020

ZebulanStanphill commented Jun 30, 2020

jasmussen commented Jun 30, 2020

youknowriad Jul 1, 2020

ZebulanStanphill Jul 1, 2020

youknowriad commented Jul 1, 2020

youknowriad left a comment

youknowriad commented Jul 1, 2020

ZebulanStanphill commented Jul 1, 2020

youknowriad commented Jul 2, 2020

youknowriad left a comment

jasmussen commented Jul 3, 2020

ZebulanStanphill commented Jul 3, 2020

Add reusable block tab to inserter. #23296

Add reusable block tab to inserter. #23296

Conversation

ZebulanStanphill commented Jun 19, 2020 • edited by youknowriad Loading

Description

How has this been tested?

Screenshots

Checklist:

github-actions bot commented Jun 19, 2020 • edited Loading

MichaelArestad commented Jun 19, 2020

ZebulanStanphill commented Jun 20, 2020

michelleweber commented Jun 22, 2020

mtias commented Jun 23, 2020

mtias Jun 23, 2020

Choose a reason for hiding this comment

ZebulanStanphill Jun 23, 2020

Choose a reason for hiding this comment

enriquesanchez commented Jun 23, 2020

ZebulanStanphill commented Jun 24, 2020

ZebulanStanphill commented Jun 30, 2020

jasmussen commented Jun 30, 2020

youknowriad Jul 1, 2020

Choose a reason for hiding this comment

ZebulanStanphill Jul 1, 2020

Choose a reason for hiding this comment

youknowriad commented Jul 1, 2020

youknowriad left a comment

Choose a reason for hiding this comment

youknowriad commented Jul 1, 2020

ZebulanStanphill commented Jul 1, 2020

youknowriad commented Jul 2, 2020

youknowriad left a comment

Choose a reason for hiding this comment

jasmussen commented Jul 3, 2020

ZebulanStanphill commented Jul 3, 2020

ZebulanStanphill commented Jun 19, 2020 •

edited by youknowriad

Loading

github-actions bot commented Jun 19, 2020 •

edited

Loading