8000 Block API: Adding a `useOnce` property in the block settings to forbid using it multiple times by youknowriad · Pull Request #1661 · WordPress/gutenberg · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

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

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

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 all 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
45 changes: 28 additions & 17 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 ) 8000 {
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,28 @@ 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 nextIndex = currentIndex + increment;
const highestIndex = list.length - 1;
const currentIndex = findIndex( blockTypes, ( blockType ) => this.state.currentFocus === blockType.name );
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 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;
}

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

getBlockItem( block ) {
const disabled = this.isDisabledBlock( block );
return (
<button
role="menuitem"
Expand All @@ -275,8 +284,9 @@ class InserterMenu extends Component {
this.selectBlock( block.name ) }
ref={ this.bindReferenceNode( block.name ) }
tabIndex="-1"
this.props.showInsertionPoint }
this.props.hideInsertionPoint }
! disabled && this.props.showInsertionPoint }
! disabled && this.props.hideInsertionPoint }
disabled={ disabled }
>
<Dashicon icon={ block.icon } />
{ block.title }
Expand Down Expand Up @@ -326,7 +336,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 +358,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 +425,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
0