Skip to content
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.

Sign up for GitHub

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

Block API: Adding a useOnce property in the block settings to forbid using it multiple times #1661

Merged
merged 4 commits into from
Jul 25, 2017
Merged

Block API: Adding a useOnce property in the block settings to forbid using it multiple times #1661

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
393c6d9
Block API: Adding a `useOnce` property in the block settings to forbi…
youknowriad Jul 3, 2017
729391b
Inserter: Rename block to blockType for consistency
youknowriad Jul 24, 2017
02de432
Inserter: Hide insertion point for disabled blocks
youknowriad Jul 24, 2017
a0d54b8
Inserter: Loop over recursion to ignore disabled blocks while navigat…
youknowriad Jul 25, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 23 additions & 14 deletions editor/inserter/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { flow, groupBy, sortBy, findIndex, filter, debounce } from 'lodash';
import { flow, groupBy, sortBy, findIndex, filter, debounce, find } from 'lodash';
import { connect } from 'react-redux';

/**
Expand All @@ -17,8 +17,8 @@ import { getCategories, getBlockTypes } from 'blocks';
* Internal dependencies
*/
import './style.scss';
import { getBlocks, getRecentlyUsedBlocks } from '../selectors';
import { showInsertionPoint, hideInsertionPoint } from '../actions';
import { getRecentlyUsedBlocks } from '../selectors';

class InserterMenu extends Component {
constructor() {
Expand Down Expand Up @@ -63,6 +63,10 @@ class InserterMenu extends Component {
}
}

isDisabledBlock( blockType ) {
return blockType.useOnce && find( this.props.blocks, ( { name } ) => blockType.name === name );
}

bindReferenceNode( nodeName ) {
return ( node ) => this.nodes[ nodeName ] = node;
}
Expand Down Expand Up @@ -134,24 +138,26 @@ class InserterMenu extends Component {
}

findByIncrement( blockTypes, increment = 1 ) {
// Prepend a fake search block to the list to cycle through.
const list = [ { name: 'search' }, ...blockTypes ];

const currentIndex = findIndex( list, ( blockType ) => this.state.currentFocus === blockType.name );
const currentIndex = findIndex( blockTypes, ( blockType ) => this.state.currentFocus === blockType.name );
const nextIndex = currentIndex + increment;
const highestIndex = list.length - 1;
const highestIndex = blockTypes.length - 1;
const lowestIndex = 0;

if ( nextIndex > highestIndex ) {
return list[ lowestIndex ].name;
return 'search';
}

if ( nextIndex < lowestIndex ) {
return list[ highestIndex ].name;
return 'search';
}

// Return the name of the next block type.
return list[ nextIndex ].name;
const blockType = blockTypes[ nextIndex ];
if ( this.isDisabledBlock( blockType ) ) {
return this.findByIncrement( blockTypes, increment > 0 ? increment + 1 : increment - 1 );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this case I might have opted for a simple loop rather than recursion, because the findIndex above is non-trivial.

diff --git a/editor/inserter/menu.js b/editor/inserter/menu.js
index 33680f4b..4b95bb9a 100644
--- a/editor/inserter/menu.js
+++ b/editor/inserter/menu.js
@@ -139,10 +139,21 @@ class InserterMenu extends Component {
 
        findByIncrement( blockTypes, increment = 1 ) {
                const currentIndex = findIndex( blockTypes, ( blockType ) => this.state.currentFocus === blockType.name );
-               const nextIndex = currentIndex + increment;
                const highestIndex = blockTypes.length - 1;
                const lowestIndex = 0;
 
+               let nextIndex = currentIndex;
+               let blockType;
+               do {
+                       nextIndex += increment;
+
+                       // Return the name of the next block type.
+                       blockType = blockTypes[ nextIndex ];
+                       if ( blockType && ! this.isDisabledBlock( blockType ) ) {
+                               return blockType.name;
+                       }
+               } while ( blockType );
+
                if ( nextIndex > highestIndex ) {
                        return 'search';
                }
@@ -150,14 +161,6 @@ class InserterMenu extends Component {
                if ( nextIndex < lowestIndex ) {
                        return 'search';
                }
-
-               // Return the name of the next block type.
-               const blockType = blockTypes[ nextIndex ];
-               if ( this.isDisabledBlock( blockType ) ) {
-                       return this.findByIncrement( blockTypes, increment > 0 ? increment + 1 : increment - 1 );
-               }
-
-               return blockType.name;
        }
 
        findNext( blockTypes ) {

}

return blockType.name;
}

findNext( blockTypes ) {
Expand Down Expand Up @@ -267,6 +273,7 @@ class InserterMenu extends Component {
}

getBlockItem( block ) {
const disabled = this.isDisabledBlock( block );
return (
<button
role="menuitem"
Expand All @@ -275,8 +282,9 @@ class InserterMenu extends Component {
onClick={ this.selectBlock( block.name ) }
ref={ this.bindReferenceNode( block.name ) }
tabIndex="-1"
onMouseEnter={ this.props.showInsertionPoint }
onMouseLeave={ this.props.hideInsertionPoint }
onMouseEnter={ ! disabled && this.props.showInsertionPoint }
onMouseLeave={ ! disabled && this.props.hideInsertionPoint }
disabled={ disabled }
>
<Dashicon icon={ block.icon } />
{ block.title }
Expand Down Expand Up @@ -326,7 +334,7 @@ class InserterMenu extends Component {
}
{ this.state.tab === 'blocks' && ! isSearching &&
getCategories()
.map( ( category ) => category.slug !== 'embed' && !! visibleBlocksByCategory[ category.slug ] && (
.map( ( category ) => !! visibleBlocksByCategory[ category.slug ] && (
<div key={ category.slug }>
<div
className="editor-inserter__separator"
Expand All @@ -348,7 +356,7 @@ class InserterMenu extends Component {
}
{ this.state.tab === 'embeds' && ! isSearching &&
getCategories()
.map( ( category ) => category.slug === 'embed' && !! visibleBlocksByCategory[ category.slug ] && (
.map( ( category ) => !! visibleBlocksByCategory[ category.slug ] && (
<div
className="editor-inserter__category-blocks"
role="menu"
Expand Down Expand Up @@ -415,6 +423,7 @@ const connectComponent = connect(
( state ) => {
return {
recentlyUsedBlocks: getRecentlyUsedBlocks( state ),
blocks: getBlocks( state ),
};
},
{ showInsertionPoint, hideInsertionPoint }
Expand Down
10 changes: 8 additions & 2 deletions editor/inserter/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,14 @@ input[type="search"].editor-inserter__search {
background: none;
line-height: 20px;

&:hover,
&:focus {

&:disabled {
opacity: 0.6;
cursor: default;
}

&:hover:not(:disabled),
&:focus:not(:disabled) {
color: $blue-medium-500;
outline: none;
position: relative;
Expand Down