Replace the side inserter by an inserter with shortcuts on empty paragraphs #4953

youknowriad · 2018-02-08T13:11:38Z

This PR updates the side inserter. Instead of having a side inserter at the right of each block we show a quick inserter with shortcuts for the most frequently used blocks on empty paragraphs.

Combined with the default block appender, this allows a nice writing flow, where you click the empty area at the bottom of a post to create a new empty paragraph which will trigger this side inserter.

jasmussen · 2018-02-08T13:18:59Z

Amazingly fast work. Also closes #4954. Taking a look.

jasmussen · 2018-02-08T13:28:44Z

This is already feeling much better than anything we've done in the past.

paulwilde · 2018-02-08T19:26:25Z

I think the hover styles should be rounded like they are in menu at the top. Seems to be 4px.

noisysocks · 2018-02-09T00:53:26Z

editor/store/reducer.js

@@ -627,12 +634,17 @@ export function preferences( state = PREFERENCES_DEFAULTS, action ) {
 						insert,
 						...reject( prevState.recentInserts, isSameAsInsert ),
 					],
+					insertUsage: {
+						...prevState.insertUsage,
+						[ id ]: usage,


I think it would be slightly clearer if we remove lines 624-627 and increment the count right here:

insertUsage: { ...prevState.insertUsage, [ id ]: { count: prevState.insertUsage[ id ] ? prevState.insertUsage[ id ].count + 1 : 1, insert, }, },

noisysocks · 2018-02-09T00:57:05Z

editor/store/selectors.js

+}
+
+/**
+ * Determines the items that appear in the inserter with shortcodes based on the block usage


Typo: s/shortcodes/shortcuts/

noisysocks · 2018-02-09T01:00:19Z

editor/store/selectors.js

- * @return {Editor.InserterItem[]} Items that appear in the 'Recent' tab.
- */
-export function getRecentInserterItems( state, enabledBlockTypes = true ) {
+function getItemsFromInserts( state, inserts, enabledBlockTypes = true, maximum = MAX_RECENT_BLOCKS ) {


I'm wondering if we should we get rid of MAX_RECENT_BLOCKS and force callers to just always pass in a maximum.

noisysocks · 2018-02-09T01:01:46Z

editor/store/selectors.js

+ *
+ * @return {Editor.InserterItem[]} Items that appear in the 'Recent' tab.
+ */
+export function getMostFrequentlyUsedBlocks( state, enabledBlockTypes = true, maximum = MAX_RECENT_BLOCKS ) {


Would getFrequentInserterItems be a better name for this? Then there would be a nice duality between this function and getRecentInserterItems.

noisysocks · 2018-02-09T01:02:16Z

editor/store/test/selectors.js

+				},
+			};
+
+			// We should get back 8 items with no duplicates


Typo: s/8/4/

noisysocks · 2018-02-09T01:04:35Z

editor/components/inserter-with-shortcuts/index.js

+		return null;
+	}
+
+	const itemsWithTheDefaultBlock =


Should this be named itemsWithoutDefaultBlock?

noisysocks · 2018-02-09T01:05:14Z

editor/components/inserter-with-shortcuts/index.js

+export default compose(
+	connect(
+		( state ) => ( {
+			items: getMostFrequentlyUsedBlocks( state, true, 3 ),


We should pass in the proper enabledBlockTypes setting instead of true here.

noisysocks · 2018-02-09T01:12:08Z

editor/components/inserter-with-shortcuts/index.js

+	}
+
+	const itemsWithTheDefaultBlock =
+		filter( items, ( item ) => item.name !== getDefaultBlockName() || ! item.initialAttributes )


! item.initialAttributes will always evaluate to false. I think this should be:

const itemsWithoutDefaultBlock = filter( items, ( item ) => item.name !== getDefaultBlockName() || Object.keys( item.initialAttributes ).length > 0 ).slice( 0, 2 );

Using without and isEmpty would help make it read more naturally:

const itemsWithoutDefaultBlock = without( items, ( item ) => item.name === getDefaultBlockName() && isEmpty( item.initialAttributes ) ).slice( 0, 2 );

noisysocks · 2018-02-09T01:19:14Z

Just realised this has the In Progress label. Apologies for butting in so early with code comments 🙂 —it's looking really good!

youknowriad · 2018-02-09T08:20:08Z

@noisysocks No problem, it's always good to have feedback. And I would have missed most of these ;). Thanks

mtias · 2018-02-09T12:56:09Z

@youknowriad one more thing to look at is the blue inserter line when you click on the + button — it should not be there as you'd be replacing the existing block instead:

Also, related to 4492, none of the block UI should be showing when clicking on the + button.

mellis32 · 2018-02-09T20:32:10Z

Will the inserter shortcuts be grayed out until hovered as in #4951 and Dropbox Paper? I like the subtly of that apperance, which puts the focus back on the content.

…graphs

youknowriad · 2018-02-12T16:14:35Z

I made some tweaks here, this should be closer to merge now. I'd love to have some input.

Feedback addressed

mtias · 2018-02-13T11:53:21Z

@youknowriad this is working really well for me. If there's one last thing to add, it'd be to try not showing the block outline, the paragraph toolbar, and the ellipsis menu when the paragraph block is empty.

youknowriad · 2018-02-13T13:18:50Z

Got a DM approval for this one cc @mtias . Merging to be ready for the release.

There's still an edge-case where the onChange is not triggered properly (clicking backspace while there's a selection, I guess TinyMCE should trigger input in this case. I'm considering this minor and should not be blocking this PR)

jasmussen · 2018-02-13T13:26:10Z

🎉🔥

aduth · 2018-02-14T04:02:33Z

I really like this iteration.

One issue I've noticed: It's not possible to expand the "More Options" block ellipsis menu with an empty default block.

Potentially related to #4872 (comment)

If it is, maybe we should evaluate whether that auto-focus logic is worthwhile?

youknowriad · 2018-02-14T08:45:23Z

@aduth I don't it's related to #4872, it's more related to this comment #4953 (comment) and this commit dbad796

It's a bit tricky though, because we want the empty paragraph block to always appear unselected while allowing these menus on hover.

aduth · 2018-04-19T00:39:37Z

editor/components/inserter-with-shortcuts/index.js

+	}
+
+	const itemsWithoutDefaultBlock = filter( items, ( item ) =>
+		item.name !== getDefaultBlockName() || ! isEmpty( item.initialAttributes )


Why ! isEmpty( item.initialAttributes ) ?

It's so that shared paragraph blocks don't get filtered out.

As a casual observer, I'd have no hints from the context available to reach this conclusion. Even now, I'm not clear what it is about shared blocks that causes us to filter them.

I'd suggest some combination of code comment and/or explaining variable.

youknowriad added the [Status] In Progress Tracking issues with work in progress label Feb 8, 2018

youknowriad self-assigned this Feb 8, 2018

youknowriad requested review from mtias and jasmussen February 8, 2018 13:11

noisysocks previously requested changes Feb 9, 2018

View reviewed changes

youknowriad added 3 commits February 12, 2018 15:13

Replace the side inserter by an inserter with shortcuts on empty para…

99a6e16

…graphs

Use Block insert frequency to fill the quick inserter

efd3fa3

Fix showing/hiding the inserter on type

a611508

youknowriad force-pushed the update/side-inserter branch from ed9f42b to a611508 Compare February 12, 2018 14:36

youknowriad added 3 commits February 12, 2018 15:39

Fix border radius

5bffc9b

Some tweaks per review

9c6459b

Hide insertion point when replacing a block

f2fa42f

Restore removed onChange callback

e723bad

youknowriad removed the [Status] In Progress Tracking issues with work in progress label Feb 13, 2018

youknowriad mentioned this pull request Feb 13, 2018

Proposal: history "buffer"/overwrite, sync RichText history records #4956

Merged

3 tasks

Empty paragraph blocks should always appear unselected

dbad796

youknowriad force-pushed the update/side-inserter branch from 523b376 to dbad796 Compare February 13, 2018 13:08

youknowriad merged commit 15d5ff2 into master Feb 13, 2018

youknowriad deleted the update/side-inserter branch February 13, 2018 13:19

aduth mentioned this pull request Feb 14, 2018

Blocks: Cannot open More Options menu for empty paragraph block #5047

Closed

pento mentioned this pull request Feb 23, 2018

Blocks inserted with the Side Inserter don't increment the usage count #5207

Closed

aduth reviewed Apr 19, 2018

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace the side inserter by an inserter with shortcuts on empty paragraphs #4953

Replace the side inserter by an inserter with shortcuts on empty paragraphs #4953

youknowriad commented Feb 8, 2018 •

edited

Loading

jasmussen commented Feb 8, 2018

jasmussen commented Feb 8, 2018

paulwilde commented Feb 8, 2018 •

edited

Loading

noisysocks Feb 9, 2018

noisysocks Feb 9, 2018

noisysocks Feb 9, 2018

noisysocks Feb 9, 2018

noisysocks Feb 9, 2018

noisysocks Feb 9, 2018

noisysocks Feb 9, 2018

noisysocks Feb 9, 2018

noisysocks commented Feb 9, 2018

youknowriad commented Feb 9, 2018

mtias commented Feb 9, 2018

mellis32 commented Feb 9, 2018

youknowriad commented Feb 12, 2018

mtias commented Feb 13, 2018

youknowriad commented Feb 13, 2018 •

edited

Loading

jasmussen commented Feb 13, 2018

aduth commented Feb 14, 2018

youknowriad commented Feb 14, 2018

aduth Apr 19, 2018

noisysocks Apr 19, 2018

aduth Apr 19, 2018

Replace the side inserter by an inserter with shortcuts on empty paragraphs #4953

Replace the side inserter by an inserter with shortcuts on empty paragraphs #4953

Conversation

youknowriad commented Feb 8, 2018 • edited Loading

jasmussen commented Feb 8, 2018

jasmussen commented Feb 8, 2018

paulwilde commented Feb 8, 2018 • edited Loading

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

Choose a reason for hiding this comment

noisysocks commented Feb 9, 2018

youknowriad commented Feb 9, 2018

mtias commented Feb 9, 2018

mellis32 commented Feb 9, 2018

youknowriad commented Feb 12, 2018

mtias commented Feb 13, 2018

youknowriad commented Feb 13, 2018 • edited Loading

jasmussen commented Feb 13, 2018

aduth commented Feb 14, 2018

youknowriad commented Feb 14, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad commented Feb 8, 2018 •

edited

Loading

paulwilde commented Feb 8, 2018 •

edited

Loading

youknowriad commented Feb 13, 2018 •

edited

Loading