From 12998a3fb531208e8007d8f285341f614279a53c Mon Sep 17 00:00:00 2001 From: Rahmon Date: Thu, 14 Dec 2017 00:52:45 -0200 Subject: [PATCH 1/2] Fix blocks when useOnce is true --- editor/edit-post/modes/visual-editor/inserter.js | 1 + editor/edit-post/modes/visual-editor/style.scss | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/editor/edit-post/modes/visual-editor/inserter.js b/editor/edit-post/modes/visual-editor/inserter.js index 480d18d1fdb013..dfd142d04f5fe4 100644 --- a/editor/edit-post/modes/visual-editor/inserter.js +++ b/editor/edit-post/modes/visual-editor/inserter.js @@ -67,6 +67,7 @@ export class VisualEditorInserter extends Component { className="editor-inserter__block" onClick={ () => this.insertBlock( block.name ) } label={ sprintf( __( 'Insert %s' ), block.title ) } + disabled={ block.useOnce } icon={ ( diff --git a/editor/edit-post/modes/visual-editor/style.scss b/editor/edit-post/modes/visual-editor/style.scss index 39fffa9b60465e..83a74847d456f5 100644 --- a/editor/edit-post/modes/visual-editor/style.scss +++ b/editor/edit-post/modes/visual-editor/style.scss @@ -80,6 +80,10 @@ &:hover > .editor-inserter__block, &.is-showing-controls > .editor-inserter__block { opacity: 1; + + &:disabled { + @include button-style__disabled; + } } } From 8a511f5ce8ff333e25d7e459a387a09ccf1a7f9b Mon Sep 17 00:00:00 2001 From: Rahmon Date: Fri, 15 Dec 2017 00:54:04 -0200 Subject: [PATCH 2/2] Fix when block hasn't been used yet in the post --- editor/edit-post/modes/visual-editor/inserter.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/editor/edit-post/modes/visual-editor/inserter.js b/editor/edit-post/modes/visual-editor/inserter.js index dfd142d04f5fe4..944e5cb8d3dfc1 100644 --- a/editor/edit-post/modes/visual-editor/inserter.js +++ b/editor/edit-post/modes/visual-editor/inserter.js @@ -1,6 +1,7 @@ /** * External dependencies */ +import { find } from 'lodash'; import { connect } from 'react-redux'; import classnames from 'classnames'; @@ -17,7 +18,7 @@ import { createBlock, BlockIcon } from '@wordpress/blocks'; */ import { Inserter } from '../../../components'; import { insertBlock } from '../../../actions'; -import { getMostFrequentlyUsedBlocks, getBlockCount } from '../../../selectors'; +import { getMostFrequentlyUsedBlocks, getBlockCount, getBlocks } from '../../../selectors'; export class VisualEditorInserter extends Component { constructor() { @@ -40,6 +41,10 @@ export class VisualEditorInserter extends Component { onInsertBlock( createBlock( name ) ); } + isDisabledBlock( block ) { + return block.useOnce && find( this.props.blocks, ( { name } ) => block.name === name ); + } + render() { const { blockCount, isLocked } = this.props; const { isShowingControls } = this.state; @@ -67,7 +72,7 @@ export class VisualEditorInserter extends Component { className="editor-inserter__block" onClick={ () => this.insertBlock( block.name ) } label={ sprintf( __( 'Insert %s' ), block.title ) } - disabled={ block.useOnce } + disabled={ this.isDisabledBlock( block ) } icon={ ( @@ -88,6 +93,7 @@ export default compose( return { mostFrequentlyUsedBlocks: getMostFrequentlyUsedBlocks( state ), blockCount: getBlockCount( state ), + blocks: getBlocks( state ), }; }, { onInsertBlock: insertBlock },