Merge pull request #3988 from Rahmon/fix/3968

Fix blocks when useOnce is true

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,6 +72,7 @@ export class VisualEditorInserter extends Component {
 						className="editor-inserter__block"
 						onClick={ () => this.insertBlock( block.name ) }
 						label={ sprintf( __( 'Insert %s' ), block.title ) }
+						disabled={ this.isDisabledBlock( block ) }
 						icon={ (
 							<span className="editor-visual-editor__inserter-block-icon">
 								<BlockIcon icon={ block.icon } />
@@ -87,6 +93,7 @@ export default compose(
 			return {
 				mostFrequentlyUsedBlocks: getMostFrequentlyUsedBlocks( state ),
 				blockCount: getBlockCount( state ),
+				blocks: getBlocks( state ),
 			};
 		},
 		{ onInsertBlock: insertBlock },

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;
+		}
 	}
 }