Show most frequently used blocks next to inserter #2877

notnownikki · 2017-10-04T15:27:22Z

Description

Instead of hardcoded paragraph and image blocks, this shows
the three most frequently used blocks, based on stored blockUsage

The algorithm for working out the blocks to display is just "most frequently used." I think that's fine for now, but we probably want to think about future refinements that "age" the usage too, in the future.

How to test

Hover over the inserter icon in the main editing section, and your three most used blocks should appear next to it. Click on them to insert them.

Clear your local storage, and paragraph and image should be displayed to start with.

codecov · 2017-10-04T15:32:48Z

Codecov Report

Merging #2877 into master will decrease coverage by 0.19%.
The diff coverage is 91.66%.

@@            Coverage Diff            @@
##           master    #2877     +/-   ##
=========================================
- Coverage   34.06%   33.87%   -0.2%     
=========================================
  Files         192      193      +1     
  Lines        5677     5789    +112     
  Branches      997     1012     +15     
=========================================
+ Hits         1934     1961     +27     
- Misses       3166     3237     +71     
- Partials      577      591     +14

Impacted Files	Coverage Δ
editor/selectors.js	`96.89% <100%> (+0.14%)`	⬆️
editor/modes/visual-editor/inserter.js	`93.33% <80%> (-6.67%)`	⬇️
components/dropdown/index.js	`85.18% <0%> (-1.49%)`	⬇️
editor/actions.js	`40.9% <0%> (-0.27%)`	⬇️
editor/modes/visual-editor/index.js	`0% <0%> (ø)`	⬆️
editor/index.js	`0% <0%> (ø)`	⬆️
editor/block-settings-menu/index.js	`0% <0%> (ø)`	⬆️
editor/sidebar/header.js	`0% <0%> (ø)`	⬆️
editor/header/index.js	`0% <0%> (ø)`	⬆️
editor/block-settings-menu/content.js	`0% <0%> (ø)`
... and 1 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0a02528...e5d4e98. Read the comment docs.

youknowriad · 2017-10-09T08:46:45Z

editor/modes/visual-editor/test/inserter.js

@@ -26,11 +26,17 @@ describe( 'VisualEditorInserter', () => {
 		expect( wrapper.state( 'isShowingControls' ) ).toBe( false );
 	} );

-	it( 'should insert paragraph block', () => {
+/*	it( 'should insert paragraph block', () => {
 		const onInsertBlock = jest.fn();
 		const wrapper = shallow(
 			<VisualEditorInserter onInsertBlock={ onInsertBlock } />


Actually we do not test the "connected" component but just the presentational one, so you just need to provide "mostFrequentlyUsedBlocks" as a prop.

youknowriad

This is looking very good for me.

I think the getMostFrequentlyUsedBlocks method needs to be memoized

Sounds like a good idea 👍

notnownikki · 2017-10-09T10:56:54Z

Memoize added, and tests fixed up for the inserter.

youknowriad · 2017-10-09T11:27:21Z

editor/selectors.js

 *
 * @param {Object} state Global application state
 * @return {Array}       List of block type settings
 */
-export function getMostFrequentlyUsedBlocks( state ) {
+export const getMostFrequentlyUsedBlocks = memoize( ( state ) => {


Should we use createSelector helper instead to memoize the selector (we already use it elsewhere). https://github.com/aduth/rememo

I was going to suggest something like this, I didn't see we already had something :) Will fix!

youknowriad · 2017-10-09T12:00:59Z

While I don't like hardcoding, I wonder if we should hard code the paragraph and image block as default if no usage yet (try clearing localstorage).

Also flagging this for design review, since it changes the quick blocks behavior. cc @jasmussen

notnownikki · 2017-10-09T12:01:56Z

Yeah I guess that's easy enough to do in the selector.

karmatosed · 2017-10-09T20:08:55Z

I really like this. For those looking into this, you can see here:

karmatosed

⭐️

* master: (45 commits) Parser: Hide the core namespace in serialised data (WordPress#2950) fix: Undefined index warning (WordPress#2982) navigation via keydown PHPCS improvements (WordPress#2914) Update/html block description (WordPress#2917) Framework: Merge EditorSettingsProvider into EditorProvider Framework: Move the store initialization to a dedicated component Rotate header ellipsis to match block ellipsis add/459: Added support for ins, sub and sup Refresh nonce with heartbeat (WordPress#2790) Paste: add table support Bump version to 1.4.0. (WordPress#2954) Blocks: The custom classname should be persisted properly in the block's comment Editor: Fix the scroll position when reordering blocks Polish spacing in block ellipsis menu (WordPress#2955) Editor: HTML Editor per block (WordPress#2797) Show most frequently used blocks next to inserter (WordPress#2877) add/459: Added light grey background to selected inline boundaries Extend inline boundaries to other elements Move markdown fix to own plugin-compatibility file ...

aduth · 2017-10-12T12:12:01Z

There's something disconcerting to me about the dynamic nature of this, that it's less predictable. Maybe I'm attached to the idea that there's some comfort in knowing I'd always find the same options in this control, an especially important comfort considering that the controls are hidden until revealed by hover.

Maybe I'm overthinking it 😄

notnownikki · 2017-10-12T12:13:57Z

Initially you'll notice changes, but my thinking was that over time, it'll stabilise, and at least he first two options will be pretty much static, but tailored for the user's usage.

[WIP] Show most frequently used blocks next to inserter

2a54acc

gziolo added the [Status] In Progress Tracking issues with work in progress label Oct 6, 2017

youknowriad reviewed Oct 9, 2017

View reviewed changes

notnownikki added 3 commits October 9, 2017 10:43

Merge branch 'master' into add/frequently-used-blocks-by-inserter

ca5c068

Fix up tests for inserter

09b4a64

Memoize getMostFrequentlyUsedBlocks

ca06c0a

notnownikki changed the title ~~[WIP] Show most frequently used blocks next to inserter~~ Show most frequently used blocks next to inserter Oct 9, 2017

notnownikki removed the [Status] In Progress Tracking issues with work in progress label Oct 9, 2017

youknowriad reviewed Oct 9, 2017

View reviewed changes

notnownikki added 2 commits October 9, 2017 12:49

Merge branch 'master' into add/frequently-used-blocks-by-inserter

ccdb904

switch to createSelector

516c03e

youknowriad added the Needs Design Feedback Needs general design feedback. label Oct 9, 2017

notnownikki added 2 commits October 9, 2017 13:52

Add in paragraph and image blocks if we don't have much usgae data

db7a130

typo fix

c946116

notnownikki requested review from karmatosed and jasmussen October 9, 2017 14:46

typo fix

e5d4e98

karmatosed approved these changes Oct 9, 2017

View reviewed changes

notnownikki removed the Needs Design Feedback Needs general design feedback. label Oct 10, 2017

notnownikki merged commit 20378c9 into master Oct 10, 2017

mtias deleted the add/frequently-used-blocks-by-inserter branch October 10, 2017 12:39

designsimply mentioned this pull request May 14, 2019

Most Used Blocks Constantly Shifting Around #15534

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Show most frequently used blocks next to inserter #2877

Show most frequently used blocks next to inserter #2877

notnownikki commented Oct 4, 2017 •

edited

Loading

codecov bot commented Oct 4, 2017 •

edited

Loading

youknowriad Oct 9, 2017

youknowriad left a comment

notnownikki commented Oct 9, 2017

youknowriad Oct 9, 2017

notnownikki Oct 9, 2017

youknowriad commented Oct 9, 2017 •

edited

Loading

notnownikki commented Oct 9, 2017

karmatosed commented Oct 9, 2017

karmatosed left a comment

aduth commented Oct 12, 2017

notnownikki commented Oct 12, 2017

Show most frequently used blocks next to inserter #2877

Show most frequently used blocks next to inserter #2877

Conversation

notnownikki commented Oct 4, 2017 • edited Loading

Description

How to test

codecov bot commented Oct 4, 2017 • edited Loading

Codecov Report

youknowriad Oct 9, 2017

Choose a reason for hiding this comment

youknowriad left a comment

Choose a reason for hiding this comment

notnownikki commented Oct 9, 2017

youknowriad Oct 9, 2017

Choose a reason for hiding this comment

notnownikki Oct 9, 2017

Choose a reason for hiding this comment

youknowriad commented Oct 9, 2017 • edited Loading

notnownikki commented Oct 9, 2017

karmatosed commented Oct 9, 2017

karmatosed left a comment

Choose a reason for hiding this comment

aduth commented Oct 12, 2017

notnownikki commented Oct 12, 2017

notnownikki commented Oct 4, 2017 •

edited

Loading

codecov bot commented Oct 4, 2017 •

edited

Loading

youknowriad commented Oct 9, 2017 •

edited

Loading