New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show most frequently used blocks next to inserter #2877

Merged
merged 9 commits into from Oct 10, 2017

Conversation

Projects
None yet
5 participants
@notnownikki
Member

notnownikki commented Oct 4, 2017

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

This comment has been minimized.

Show comment
Hide comment
@codecov

codecov bot Oct 4, 2017

Codecov Report

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

Impacted file tree graph

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

codecov bot commented Oct 4, 2017

Codecov Report

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

Impacted file tree graph

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

This is looking very good for me.

I think the getMostFrequentlyUsedBlocks method needs to be memoized

Sounds like a good idea 👍

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

@notnownikki

This comment has been minimized.

Show comment
Hide comment
@notnownikki

notnownikki Oct 9, 2017

Member

Memoize added, and tests fixed up for the inserter.

Member

notnownikki commented Oct 9, 2017

Memoize added, and tests fixed up for the inserter.

@youknowriad

This comment has been minimized.

Show comment
Hide comment
@youknowriad

youknowriad Oct 9, 2017

Contributor

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

Contributor

youknowriad commented Oct 9, 2017

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

This comment has been minimized.

Show comment
Hide comment
@notnownikki

notnownikki Oct 9, 2017

Member

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

Member

notnownikki commented Oct 9, 2017

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

@notnownikki notnownikki requested review from karmatosed and jasmussen Oct 9, 2017

@karmatosed

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Oct 9, 2017

Member

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

2017-10-09 at 21 08

Member

karmatosed commented Oct 9, 2017

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

2017-10-09 at 21 08

@karmatosed

⭐️

@notnownikki notnownikki merged commit 20378c9 into master Oct 10, 2017

3 checks passed

codecov/project Absolute coverage decreased by -0.19% but relative coverage increased by +57.59% compared to 0a02528
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details

@mtias mtias deleted the add/frequently-used-blocks-by-inserter branch Oct 10, 2017

DevinWalker added a commit to DevinWalker/gutenberg that referenced this pull request Oct 12, 2017

Merge branch 'master' into update/html-block-description
* master: (45 commits)
  Parser: Hide the core namespace in serialised data (#2950)
  fix: Undefined index warning (#2982)
  navigation via keydown
  PHPCS improvements (#2914)
  Update/html block description (#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 (#2790)
  Paste: add table support
  Bump version to 1.4.0. (#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 (#2955)
  Editor: HTML Editor per block (#2797)
  Show most frequently used blocks next to inserter (#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
  ...

DevinWalker added a commit to DevinWalker/gutenberg that referenced this pull request Oct 12, 2017

Merge branch 'master' into update/class-editor-block-description
* master: (45 commits)
  Parser: Hide the core namespace in serialised data (#2950)
  fix: Undefined index warning (#2982)
  navigation via keydown
  PHPCS improvements (#2914)
  Update/html block description (#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 (#2790)
  Paste: add table support
  Bump version to 1.4.0. (#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 (#2955)
  Editor: HTML Editor per block (#2797)
  Show most frequently used blocks next to inserter (#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
  ...

DevinWalker added a commit to DevinWalker/gutenberg that referenced this pull request Oct 12, 2017

Merge branch 'master' into update/embed-block-description
* master: (45 commits)
  Parser: Hide the core namespace in serialised data (#2950)
  fix: Undefined index warning (#2982)
  navigation via keydown
  PHPCS improvements (#2914)
  Update/html block description (#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 (#2790)
  Paste: add table support
  Bump version to 1.4.0. (#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 (#2955)
  Editor: HTML Editor per block (#2797)
  Show most frequently used blocks next to inserter (#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

This comment has been minimized.

Show comment
Hide comment
@aduth

aduth Oct 12, 2017

Member

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 😄

Member

aduth commented Oct 12, 2017

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

This comment has been minimized.

Show comment
Hide comment
@notnownikki

notnownikki Oct 12, 2017

Member

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.

Member

notnownikki commented Oct 12, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment