From a1d158bd0e7f8f6f7b0aae77efd280a5b6cd6f97 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Mon, 22 Jul 2019 19:28:36 +0300 Subject: [PATCH 01/34] if thre is only one there is only one --- .../src/components/inserter/index.js | 88 +++++++++++++++++-- packages/block-editor/src/store/selectors.js | 23 +++++ 2 files changed, 106 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index 5abb1ae4ef9230..f67839324780c2 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -1,11 +1,21 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; +import { + get, +} from 'lodash'; /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Dropdown, IconButton } from '@wordpress/components'; +import { Dropdown, IconButton, Button, Icon } from '@wordpress/components'; import { Component } from '@wordpress/element'; -import { withSelect } from '@wordpress/data'; +import { withDispatch, withSelect } from '@wordpress/data'; import { compose, ifCondition } from '@wordpress/compose'; +import { + createBlock, +} from '@wordpress/blocks'; /** * Internal dependencies @@ -86,7 +96,23 @@ class Inserter extends Component { } render() { - const { position } = this.props; + const { position, hasOneAllowedItem, createIfOne } = this.props; + let toggle = null; + if ( hasOneAllowedItem ) { + toggle = () => { + return ( + + ); + }; + } else { + toggle = this.renderToggle; + } return ( ); @@ -105,10 +131,62 @@ class Inserter extends Component { export default compose( [ withSelect( ( select, { rootClientId } ) => { - const { hasInserterItems } = select( 'core/block-editor' ); + const { hasInserterItems, hasOneAllowedItem } = select( 'core/block-editor' ); return { hasItems: hasInserterItems( rootClientId ), + hasOneAllowedItem: hasOneAllowedItem( rootClientId ), + }; + } ), + withDispatch( ( dispatch, ownProps, { select } ) => { + // eslint-disable-next-line no-restricted-syntax + function getInsertionIndex() { + const { + getBlockIndex, + getBlockSelectionEnd, + getBlockOrder, + } = select( 'core/block-editor' ); + const { clientId, destinationRootClientId, isAppender } = ownProps; + + // If the clientId is defined, we insert at the position of the block. + if ( clientId ) { + return getBlockIndex( clientId, destinationRootClientId ); + } + + // If there a selected block, we insert after the selected block. + const end = getBlockSelectionEnd(); + if ( ! isAppender && end ) { + return getBlockIndex( end, destinationRootClientId ) + 1; + } + + // Otherwise, we insert at the end of the current rootClientId + return getBlockOrder( destinationRootClientId ).length; + } + const { rootClientId } = ownProps; + + // eslint-disable-next-line no-restricted-syntax + function createIfOne( ) { + const { + insertBlock, + } = dispatch( 'core/block-editor' ); + const { + getBlockListSettings, + } = select( 'core/block-editor' ); + const parentBlockListSettings = getBlockListSettings( rootClientId ); + const parentAllowedBlocks = get( parentBlockListSettings, [ 'allowedBlocks' ] ); + if ( parentAllowedBlocks.length > 1 ) { + return false; + } + const insertedBlock = createBlock( parentAllowedBlocks[ 0 ] ); + insertBlock( + insertedBlock, + getInsertionIndex(), + rootClientId + ); + } + + return { + createIfOne, }; } ), ifCondition( ( { hasItems } ) => hasItems ), diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 7f03542fd841da..f8c627ab428465 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1284,6 +1284,29 @@ export const hasInserterItems = createSelector( ], ); +/** + * Determines whether there is only one item that may be inserted. + * @param {Object} state Editor state. + * @param {?string} rootClientId Optional root client ID of block list. + * + * @return {boolean} True if there is one item available, false if zero or more than one. + */ +export const hasOneAllowedItem = createSelector( + ( state, rootClientId = null ) => { + if ( rootClientId ) { + const parentBlockListSettings = getBlockListSettings( state, rootClientId ); + return ( !! get( parentBlockListSettings, [ 'allowedBlocks' ] ) && + get( parentBlockListSettings, [ 'allowedBlocks' ] ).length === 1 ); + } + + return false; + }, + ( state, rootClientId ) => [ + state, + rootClientId, + ], +); + /** * Returns the Block List settings of a block, if any exist. * From 1f5081bfb8c8c28e2734bdbc7d37f532e79f3b44 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Sat, 3 Aug 2019 21:56:58 +0300 Subject: [PATCH 02/34] made a new insertion point selector, some code review refactoring --- .../src/components/inserter/index.js | 40 ++++++------------- .../src/components/inserter/menu.js | 36 +++-------------- packages/block-editor/src/store/selectors.js | 37 ++++++++++------- packages/block-library/src/column/edit.js | 1 + 4 files changed, 42 insertions(+), 72 deletions(-) diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index f67839324780c2..ff3d2c473fce22 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -140,47 +140,31 @@ export default compose( [ } ), withDispatch( ( dispatch, ownProps, { select } ) => { // eslint-disable-next-line no-restricted-syntax - function getInsertionIndex() { + function createIfOne() { + const { rootClientId, clientId, destinationRootClientId, isAppender } = ownProps; const { - getBlockIndex, - getBlockSelectionEnd, - getBlockOrder, + getBlockListSettings, } = select( 'core/block-editor' ); - const { clientId, destinationRootClientId, isAppender } = ownProps; + const parentBlockListSettings = getBlockListSettings( rootClientId ); + const isOnlyOneAllowedBlock = get( parentBlockListSettings, [ 'allowedBlocks', 'length' ], 0 ) === 1; - // If the clientId is defined, we insert at the position of the block. - if ( clientId ) { - return getBlockIndex( clientId, destinationRootClientId ); + if ( ! isOnlyOneAllowedBlock ) { + return false; } - // If there a selected block, we insert after the selected block. - const end = getBlockSelectionEnd(); - if ( ! isAppender && end ) { - return getBlockIndex( end, destinationRootClientId ) + 1; - } + const parentAllowedBlocks = get( parentBlockListSettings, [ 'allowedBlocks' ] ); - // Otherwise, we insert at the end of the current rootClientId - return getBlockOrder( destinationRootClientId ).length; - } - const { rootClientId } = ownProps; + const { + getInsertionIndex, + } = select( 'core/block-editor' ); - // eslint-disable-next-line no-restricted-syntax - function createIfOne( ) { const { insertBlock, } = dispatch( 'core/block-editor' ); - const { - getBlockListSettings, - } = select( 'core/block-editor' ); - const parentBlockListSettings = getBlockListSettings( rootClientId ); - const parentAllowedBlocks = get( parentBlockListSettings, [ 'allowedBlocks' ] ); - if ( parentAllowedBlocks.length > 1 ) { - return false; - } const insertedBlock = createBlock( parentAllowedBlocks[ 0 ] ); insertBlock( insertedBlock, - getInsertionIndex(), + getInsertionIndex( clientId, destinationRootClientId, isAppender ), rootClientId ); } diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 7522c553698653..6c2bceaa938b0a 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -478,6 +478,11 @@ export default compose( }; } ), withDispatch( ( dispatch, ownProps, { select } ) => { + const { clientId, destinationRootClientId, isAppender } = ownProps; + const { + getInsertionIndex, + } = select( 'core/block-editor' ); + const { showInsertionPoint, hideInsertionPoint, @@ -488,38 +493,10 @@ export default compose( __experimentalFetchReusableBlocks: fetchReusableBlocks, } = dispatch( 'core/editor' ); - // To avoid duplication, getInsertionIndex is extracted and used in two event handlers - // This breaks the withDispatch not containing any logic rule. - // Since it's a function only called when the event handlers are called, - // it's fine to extract it. - // eslint-disable-next-line no-restricted-syntax - function getInsertionIndex() { - const { - getBlockIndex, - getBlockSelectionEnd, - getBlockOrder, - } = select( 'core/block-editor' ); - const { clientId, destinationRootClientId, isAppender } = ownProps; - - // If the clientId is defined, we insert at the position of the block. - if ( clientId ) { - return getBlockIndex( clientId, destinationRootClientId ); - } - - // If there a selected block, we insert after the selected block. - const end = getBlockSelectionEnd(); - if ( ! isAppender && end ) { - return getBlockIndex( end, destinationRootClientId ) + 1; - } - - // Otherwise, we insert at the end of the current rootClientId - return getBlockOrder( destinationRootClientId ).length; - } - return { fetchReusableBlocks, showInsertionPoint() { - const index = getInsertionIndex(); + const index = getInsertionIndex( clientId, destinationRootClientId, isAppender ); showInsertionPoint( ownProps.destinationRootClientId, index ); }, hideInsertionPoint, @@ -531,7 +508,6 @@ export default compose( const { getSelectedBlock, } = select( 'core/block-editor' ); - const { isAppender } = ownProps; const { name, initialAttributes } = item; const selectedBlock = getSelectedBlock(); const insertedBlock = createBlock( name, initialAttributes ); diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index f8c627ab428465..5b379c0b692c04 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1291,21 +1291,30 @@ export const hasInserterItems = createSelector( * * @return {boolean} True if there is one item available, false if zero or more than one. */ -export const hasOneAllowedItem = createSelector( - ( state, rootClientId = null ) => { - if ( rootClientId ) { - const parentBlockListSettings = getBlockListSettings( state, rootClientId ); - return ( !! get( parentBlockListSettings, [ 'allowedBlocks' ] ) && - get( parentBlockListSettings, [ 'allowedBlocks' ] ).length === 1 ); - } +export const hasOneAllowedItem = ( state, rootClientId = null ) => { + if ( rootClientId ) { + const parentBlockListSettings = getBlockListSettings( state, rootClientId ); + return get( parentBlockListSettings, [ 'allowedBlocks', 'length' ], 0 ) === 1; + } - return false; - }, - ( state, rootClientId ) => [ - state, - rootClientId, - ], -); + return false; +}; + +export function getInsertionIndex( state, clientId, destinationRootClientId, isAppender ) { + // If the clientId is defined, we insert at the position of the block. + if ( clientId ) { + return getBlockIndex( state, clientId, destinationRootClientId ); + } + + // If there a selected block, we insert after the selected block. + const end = getBlockSelectionEnd( state ); + if ( ! isAppender && end ) { + return getBlockIndex( state, end, destinationRootClientId ) + 1; + } + + // Otherwise, we insert at the end of the current rootClientId + return getBlockOrder( state, destinationRootClientId ).length; +} /** * Returns the Block List settings of a block, if any exist. diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js index 72f359f33da599..9b39f31971da51 100644 --- a/packages/block-library/src/column/edit.js +++ b/packages/block-library/src/column/edit.js @@ -68,6 +68,7 @@ function ColumnEdit( { Date: Sat, 3 Aug 2019 22:05:53 +0300 Subject: [PATCH 03/34] better handling of inserter --- .../src/components/inserter/index.js | 28 ++++++------------- 1 file changed, 9 insertions(+), 19 deletions(-) diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index ff3d2c473fce22..70e014d1d9aca8 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import classnames from 'classnames'; import { get, } from 'lodash'; @@ -9,7 +8,7 @@ import { * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Dropdown, IconButton, Button, Icon } from '@wordpress/components'; +import { Dropdown, IconButton } from '@wordpress/components'; import { Component } from '@wordpress/element'; import { withDispatch, withSelect } from '@wordpress/data'; import { compose, ifCondition } from '@wordpress/compose'; @@ -66,9 +65,15 @@ class Inserter extends Component { renderToggle( { onToggle, isOpen } ) { const { disabled, + hasOneAllowedItem, + createIfOne, renderToggle = defaultRenderToggle, } = this.props; + if ( hasOneAllowedItem ) { + onToggle = createIfOne; + } + return renderToggle( { onToggle, isOpen, disabled } ); } @@ -96,23 +101,8 @@ class Inserter extends Component { } render() { - const { position, hasOneAllowedItem, createIfOne } = this.props; - let toggle = null; - if ( hasOneAllowedItem ) { - toggle = () => { - return ( - - ); - }; - } else { - toggle = this.renderToggle; - } + const { position } = this.props; + const toggle = this.renderToggle; return ( Date: Sat, 3 Aug 2019 23:06:07 +0300 Subject: [PATCH 04/34] refactoring and named block insertion --- .../src/components/inserter/index.js | 33 +++++++++++-------- packages/block-editor/src/store/selectors.js | 32 ++++++++++++++++++ 2 files changed, 51 insertions(+), 14 deletions(-) diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index 70e014d1d9aca8..46930c44005588 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -21,18 +21,21 @@ import { */ import InserterMenu from './menu'; -const defaultRenderToggle = ( { onToggle, disabled, isOpen } ) => ( - -); +const defaultRenderToggle = ( { onToggle, disabled, isOpen, blockName = 'block' } ) => { + const label = `${ __( 'Add' ) } ${ blockName }`; + return ( + + ); +}; class Inserter extends Component { constructor() { @@ -66,6 +69,7 @@ class Inserter extends Component { const { disabled, hasOneAllowedItem, + blockName, createIfOne, renderToggle = defaultRenderToggle, } = this.props; @@ -74,7 +78,7 @@ class Inserter extends Component { onToggle = createIfOne; } - return renderToggle( { onToggle, isOpen, disabled } ); + return renderToggle( { onToggle, isOpen, disabled, blockName } ); } /** @@ -121,11 +125,12 @@ class Inserter extends Component { export default compose( [ withSelect( ( select, { rootClientId } ) => { - const { hasInserterItems, hasOneAllowedItem } = select( 'core/block-editor' ); + const { hasInserterItems, hasOneAllowedItem, getOneAllowedItemName } = select( 'core/block-editor' ); return { hasItems: hasInserterItems( rootClientId ), hasOneAllowedItem: hasOneAllowedItem( rootClientId ), + blockName: getOneAllowedItemName( rootClientId ), }; } ), withDispatch( ( dispatch, ownProps, { select } ) => { diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 5b379c0b692c04..7ebcb03933e238 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1300,6 +1300,38 @@ export const hasOneAllowedItem = ( state, rootClientId = null ) => { return false; }; +/** + * Determines whether there is only one item that may be inserted. + * @param {Object} state Editor state. + * @param {?string} rootClientId Optional root client ID of block list. + * + * @return {string} The name of the allowed block. + */ +export const getOneAllowedItemName = ( state, rootClientId = null ) => { + if ( rootClientId ) { + const parentBlockListSettings = getBlockListSettings( state, rootClientId ); + + if ( get( parentBlockListSettings, [ 'allowedBlocks', 'length' ], 0 ) === 1 ) { + let name = get( parentBlockListSettings, [ 'allowedBlocks' ] )[ 0 ]; + name = name.split( '/' )[ 1 ].replace( '-', ' ' ); + return name; + } + + return false; + } + + return false; +}; + +/** + * Determines whether there is only one item that may be inserted. + * @param {Object} state Editor state. + * @param {?string} clientId Block client ID. + * @param {?string} destinationRootClientId Root client ID of block list. + * @param {boolean} isAppender Determines if the block is added to a set of existing + * blocks in a list. + * @return {number} The insertion index. + */ export function getInsertionIndex( state, clientId, destinationRootClientId, isAppender ) { // If the clientId is defined, we insert at the position of the block. if ( clientId ) { From 525385c17a1b1d5699fe8589fc0e1e257c233cc6 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Tue, 24 Sep 2019 15:56:37 +0300 Subject: [PATCH 05/34] updates to the appender --- .../src/components/inserter/index.js | 17 +++++++------- packages/block-editor/src/store/selectors.js | 23 ++++++++++--------- packages/block-library/src/column/edit.js | 1 - 3 files changed, 21 insertions(+), 20 deletions(-) diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index 46930c44005588..87eabe4dc155d1 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -7,13 +7,14 @@ import { /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, _x, sprintf } from '@wordpress/i18n'; import { Dropdown, IconButton } from '@wordpress/components'; import { Component } from '@wordpress/element'; import { withDispatch, withSelect } from '@wordpress/data'; import { compose, ifCondition } from '@wordpress/compose'; import { createBlock, + getBlockType, } from '@wordpress/blocks'; /** @@ -21,8 +22,8 @@ import { */ import InserterMenu from './menu'; -const defaultRenderToggle = ( { onToggle, disabled, isOpen, blockName = 'block' } ) => { - const label = `${ __( 'Add' ) } ${ blockName }`; +const defaultRenderToggle = ( { onToggle, disabled, isOpen, blockTitle } ) => { + const label = sprintf( _x( 'Add %s', 'directly add the allowed block' ), blockTitle ); return ( { - const { hasInserterItems, hasOneAllowedItem, getOneAllowedItemName } = select( 'core/block-editor' ); - + const { hasInserterItems, hasOneAllowedItem, getOneAllowedItem } = select( 'core/block-editor' ); + const allowedBlock = getBlockType( getOneAllowedItem( rootClientId ) ); return { hasItems: hasInserterItems( rootClientId ), hasOneAllowedItem: hasOneAllowedItem( rootClientId ), - blockName: getOneAllowedItemName( rootClientId ), + blockTitle: allowedBlock ? allowedBlock.title : '', }; } ), withDispatch( ( dispatch, ownProps, { select } ) => { diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 7ebcb03933e238..aacf3539506cbd 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1286,6 +1286,7 @@ export const hasInserterItems = createSelector( /** * Determines whether there is only one item that may be inserted. + * * @param {Object} state Editor state. * @param {?string} rootClientId Optional root client ID of block list. * @@ -1302,29 +1303,29 @@ export const hasOneAllowedItem = ( state, rootClientId = null ) => { /** * Determines whether there is only one item that may be inserted. + * * @param {Object} state Editor state. * @param {?string} rootClientId Optional root client ID of block list. * * @return {string} The name of the allowed block. */ -export const getOneAllowedItemName = ( state, rootClientId = null ) => { - if ( rootClientId ) { - const parentBlockListSettings = getBlockListSettings( state, rootClientId ); - - if ( get( parentBlockListSettings, [ 'allowedBlocks', 'length' ], 0 ) === 1 ) { - let name = get( parentBlockListSettings, [ 'allowedBlocks' ] )[ 0 ]; - name = name.split( '/' )[ 1 ].replace( '-', ' ' ); - return name; - } - +export const getOneAllowedItem = ( state, rootClientId = null ) => { + if ( ! rootClientId ) { + return false; + } + if ( ! hasOneAllowedItem( state, rootClientId ) ) { return false; } - return false; + const parentBlockListSettings = getBlockListSettings( state, rootClientId ); + const name = get( parentBlockListSettings, [ 'allowedBlocks', 0 ], 0 ); + + return name; }; /** * Determines whether there is only one item that may be inserted. + * * @param {Object} state Editor state. * @param {?string} clientId Block client ID. * @param {?string} destinationRootClientId Root client ID of block list. diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js index 9b39f31971da51..72f359f33da599 100644 --- a/packages/block-library/src/column/edit.js +++ b/packages/block-library/src/column/edit.js @@ -68,7 +68,6 @@ function ColumnEdit( { Date: Mon, 30 Sep 2019 13:52:55 +0300 Subject: [PATCH 06/34] update snapshots --- .../default-block-appender/test/__snapshots__/index.js.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap index 9a09dae0d47674..08a0f7df9efe74 100644 --- a/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap @@ -29,7 +29,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1 rows={1} value="Start writing or type / to choose a block" /> - @@ -53,7 +53,7 @@ exports[`DefaultBlockAppender should match snapshot 1`] = ` rows={1} value="Start writing or type / to choose a block" /> - @@ -77,7 +77,7 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = ` rows={1} value="" /> - From 4d89b0b65664fc67ca536e78ff0bfbf0f9e82d32 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Mon, 30 Sep 2019 17:11:34 +0300 Subject: [PATCH 07/34] update docs --- .../developers/data/data-core-block-editor.md | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/docs/designers-developers/developers/data/data-core-block-editor.md b/docs/designers-developers/developers/data/data-core-block-editor.md index eb9201165dafd6..46b80864692e6f 100644 --- a/docs/designers-developers/developers/data/data-core-block-editor.md +++ b/docs/designers-developers/developers/data/data-core-block-editor.md @@ -347,6 +347,21 @@ _Returns_ - `Array`: Items that appear in inserter. +# **getInsertionIndex** + +Determines whether there is only one item that may be inserted. + +_Parameters_ + +- _state_ `Object`: Editor state. +- _clientId_ `?string`: Block client ID. +- _destinationRootClientId_ `?string`: Root client ID of block list. +- _isAppender_ `boolean`: Determines if the block is added to a set of existing blocks in a list. + +_Returns_ + +- `number`: The insertion index. + # **getLastMultiSelectedBlockClientId** Returns the client ID of the last block in the multi-selection set, or null @@ -439,6 +454,19 @@ _Returns_ - `?string`: Adjacent block's client ID, or null if none exists. +# **getOneAllowedItem** + +Determines whether there is only one item that may be inserted. + +_Parameters_ + +- _state_ `Object`: Editor state. +- _rootClientId_ `?string`: Optional root client ID of block list. + +_Returns_ + +- `string`: The name of the allowed block. + # **getPreviousBlockClientId** Returns the previous block's client ID from the given reference start ID. @@ -605,6 +633,19 @@ _Returns_ - `boolean`: Whether multi-selection has been made. +# **hasOneAllowedItem** + +Determines whether there is only one item that may be inserted. + +_Parameters_ + +- _state_ `Object`: Editor state. +- _rootClientId_ `?string`: Optional root client ID of block list. + +_Returns_ + +- `boolean`: True if there is one item available, false if zero or more than one. + # **hasSelectedBlock** Returns true if there is a single selected block, or false otherwise. From d80fc7f22f79af80258b48913b2ade6fd300ed29 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Tue, 1 Oct 2019 13:10:24 +0300 Subject: [PATCH 08/34] default inserter label is used in so many tests --- packages/block-editor/src/components/inserter/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index 87eabe4dc155d1..0b04697e7cfedc 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -23,7 +23,10 @@ import { import InserterMenu from './menu'; const defaultRenderToggle = ( { onToggle, disabled, isOpen, blockTitle } ) => { - const label = sprintf( _x( 'Add %s', 'directly add the allowed block' ), blockTitle ); + let label = sprintf( _x( 'Add %s', 'directly add the allowed block' ), blockTitle ); + if ( blockTitle === '' ) { + label = 'Add block'; + } return ( Date: Tue, 1 Oct 2019 17:21:35 +0300 Subject: [PATCH 09/34] fixed allowed blocks test --- .../e2e-tests/specs/plugins/inner-blocks-allowed-blocks.test.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/e2e-tests/specs/plugins/inner-blocks-allowed-blocks.test.js b/packages/e2e-tests/specs/plugins/inner-blocks-allowed-blocks.test.js index c0a2055ade7623..4e9ee6286dd661 100644 --- a/packages/e2e-tests/specs/plugins/inner-blocks-allowed-blocks.test.js +++ b/packages/e2e-tests/specs/plugins/inner-blocks-allowed-blocks.test.js @@ -62,6 +62,7 @@ describe( 'Allowed Blocks Setting on InnerBlocks ', () => { const parentBlockSelector = '[data-type="test/allowed-blocks-dynamic"]'; const blockAppender = '.block-list-appender button'; const appenderSelector = `${ parentBlockSelector } ${ blockAppender }`; + const listSelector = `${ parentBlockSelector } ${ '.block-editor-rich-text__editable' }`; await page.waitForSelector( appenderSelector ); await page.click( appenderSelector ); await openAllBlockInserterCategories(); @@ -76,6 +77,7 @@ describe( 'Allowed Blocks Setting on InnerBlocks ', () => { ) )[ 0 ]; await insertButton.click(); await insertBlock( 'Image' ); + await page.click( listSelector ); await page.click( appenderSelector ); await openAllBlockInserterCategories(); expect( From ec1eecc6ce4f6d5009f27b719b3eb95807983ff2 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 2 Oct 2019 16:06:01 +0300 Subject: [PATCH 10/34] snapshot updated --- .../specs/__snapshots__/adding-blocks.test.js.snap | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/e2e-tests/specs/__snapshots__/adding-blocks.test.js.snap b/packages/e2e-tests/specs/__snapshots__/adding-blocks.test.js.snap index b8160cb3842efc..0e23e0a66867f0 100644 --- a/packages/e2e-tests/specs/__snapshots__/adding-blocks.test.js.snap +++ b/packages/e2e-tests/specs/__snapshots__/adding-blocks.test.js.snap @@ -33,10 +33,6 @@ exports[`adding blocks Should insert content using the placeholder and the regul

Paragraph block

- -

Second paragraph

- -

Quote block

@@ -50,5 +46,9 @@ Foo [myshortcode]With multiple lines preserved[/myshortcode] -" + + + +

Second paragraph

+" `; From 07b652c651e444e9ce543b3703419330fa33f06d Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 17 Oct 2019 11:11:48 +0300 Subject: [PATCH 11/34] better naming and removed the need for es-lint disabling --- .../src/components/inserter/index.js | 73 +++++++++---------- packages/block-editor/src/store/selectors.js | 6 +- 2 files changed, 38 insertions(+), 41 deletions(-) diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index 0b04697e7cfedc..e54ad32b56cc71 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -72,14 +72,14 @@ class Inserter extends Component { renderToggle( { onToggle, isOpen } ) { const { disabled, - hasOneAllowedItem, + hasOnlyOneAllowedInserterItem, blockTitle, - createIfOne, + insertTheOnlyAllowedItem, renderToggle = defaultRenderToggle, } = this.props; - if ( hasOneAllowedItem ) { - onToggle = createIfOne; + if ( hasOnlyOneAllowedInserterItem ) { + onToggle = insertTheOnlyAllowedItem; } return renderToggle( { onToggle, isOpen, disabled, blockTitle } ); @@ -129,47 +129,44 @@ class Inserter extends Component { export default compose( [ withSelect( ( select, { rootClientId } ) => { - const { hasInserterItems, hasOneAllowedItem, getOneAllowedItem } = select( 'core/block-editor' ); - const allowedBlock = getBlockType( getOneAllowedItem( rootClientId ) ); + const { hasInserterItems, hasOnlyOneAllowedInserterItem, getTheOnlyAllowedItem } = select( 'core/block-editor' ); + const allowedBlock = getBlockType( getTheOnlyAllowedItem( rootClientId ) ); return { hasItems: hasInserterItems( rootClientId ), - hasOneAllowedItem: hasOneAllowedItem( rootClientId ), + hasOnlyOneAllowedInserterItem: hasOnlyOneAllowedInserterItem( rootClientId ), blockTitle: allowedBlock ? allowedBlock.title : '', }; } ), withDispatch( ( dispatch, ownProps, { select } ) => { - // eslint-disable-next-line no-restricted-syntax - function createIfOne() { - const { rootClientId, clientId, destinationRootClientId, isAppender } = ownProps; - const { - getBlockListSettings, - } = select( 'core/block-editor' ); - const parentBlockListSettings = getBlockListSettings( rootClientId ); - const isOnlyOneAllowedBlock = get( parentBlockListSettings, [ 'allowedBlocks', 'length' ], 0 ) === 1; - - if ( ! isOnlyOneAllowedBlock ) { - return false; - } - - const parentAllowedBlocks = get( parentBlockListSettings, [ 'allowedBlocks' ] ); - - const { - getInsertionIndex, - } = select( 'core/block-editor' ); - - const { - insertBlock, - } = dispatch( 'core/block-editor' ); - const insertedBlock = createBlock( parentAllowedBlocks[ 0 ] ); - insertBlock( - insertedBlock, - getInsertionIndex( clientId, destinationRootClientId, isAppender ), - rootClientId - ); - } - return { - createIfOne, + insertTheOnlyAllowedItem: () => { + const { rootClientId, clientId, destinationRootClientId, isAppender } = ownProps; + const { + getBlockListSettings, + } = select( 'core/block-editor' ); + const parentBlockListSettings = getBlockListSettings( rootClientId ); + const isOnlyOneAllowedBlock = get( parentBlockListSettings, [ 'allowedBlocks', 'length' ], 0 ) === 1; + + if ( ! isOnlyOneAllowedBlock ) { + return false; + } + + const parentAllowedBlocks = get( parentBlockListSettings, [ 'allowedBlocks' ] ); + + const { + getInsertionIndex, + } = select( 'core/block-editor' ); + + const { + insertBlock, + } = dispatch( 'core/block-editor' ); + const insertedBlock = createBlock( parentAllowedBlocks[ 0 ] ); + insertBlock( + insertedBlock, + getInsertionIndex( clientId, destinationRootClientId, isAppender ), + rootClientId + ); + }, }; } ), ifCondition( ( { hasItems } ) => hasItems ), diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index aacf3539506cbd..54cb01631e4e3c 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1292,7 +1292,7 @@ export const hasInserterItems = createSelector( * * @return {boolean} True if there is one item available, false if zero or more than one. */ -export const hasOneAllowedItem = ( state, rootClientId = null ) => { +export const hasOnlyOneAllowedInserterItem = ( state, rootClientId = null ) => { if ( rootClientId ) { const parentBlockListSettings = getBlockListSettings( state, rootClientId ); return get( parentBlockListSettings, [ 'allowedBlocks', 'length' ], 0 ) === 1; @@ -1309,11 +1309,11 @@ export const hasOneAllowedItem = ( state, rootClientId = null ) => { * * @return {string} The name of the allowed block. */ -export const getOneAllowedItem = ( state, rootClientId = null ) => { +export const getTheOnlyAllowedItem = ( state, rootClientId = null ) => { if ( ! rootClientId ) { return false; } - if ( ! hasOneAllowedItem( state, rootClientId ) ) { + if ( ! hasOnlyOneAllowedInserterItem( state, rootClientId ) ) { return false; } From ce0ec9d4456b7a89b746542a16686cf6bf781c72 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 17 Oct 2019 11:20:47 +0300 Subject: [PATCH 12/34] improved the inserter label construction --- packages/block-editor/src/components/inserter/index.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index e54ad32b56cc71..07b1ec0f356515 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -23,10 +23,8 @@ import { import InserterMenu from './menu'; const defaultRenderToggle = ( { onToggle, disabled, isOpen, blockTitle } ) => { - let label = sprintf( _x( 'Add %s', 'directly add the allowed block' ), blockTitle ); - if ( blockTitle === '' ) { - label = 'Add block'; - } + const label = blockTitle === '' ? _x( 'Add block', 'Generic label for block inseter button' ) : sprintf( _x( 'Add %s', 'directly add the only allowed block' ), blockTitle ); + return ( ); From 3bf7909826a2b3d433bb8fa761c304946c010c4a Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 17 Oct 2019 11:29:12 +0300 Subject: [PATCH 13/34] improved the doc of getTheOnlyAllowedItem selector --- packages/block-editor/src/store/selectors.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 54cb01631e4e3c..4ac10d588caa05 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1302,19 +1302,19 @@ export const hasOnlyOneAllowedInserterItem = ( state, rootClientId = null ) => { }; /** - * Determines whether there is only one item that may be inserted. + * Gets the name of the only item that may be inserted. * * @param {Object} state Editor state. * @param {?string} rootClientId Optional root client ID of block list. * - * @return {string} The name of the allowed block. + * @return {string?} The name of the allowed block or null. */ export const getTheOnlyAllowedItem = ( state, rootClientId = null ) => { if ( ! rootClientId ) { - return false; + return null; } if ( ! hasOnlyOneAllowedInserterItem( state, rootClientId ) ) { - return false; + return null; } const parentBlockListSettings = getBlockListSettings( state, rootClientId ); @@ -1324,7 +1324,7 @@ export const getTheOnlyAllowedItem = ( state, rootClientId = null ) => { }; /** - * Determines whether there is only one item that may be inserted. + * Get the current insertion index. * * @param {Object} state Editor state. * @param {?string} clientId Block client ID. From c977baf12ac758fbc33f21f8f9fa59d8e2f47567 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 17 Oct 2019 14:18:51 +0300 Subject: [PATCH 14/34] reverting test patches becasue patching without understanding is bad, bad, bad - don't do it --- .../specs/__snapshots__/adding-blocks.test.js.snap | 10 +++++----- .../specs/plugins/inner-blocks-allowed-blocks.test.js | 2 -- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/e2e-tests/specs/__snapshots__/adding-blocks.test.js.snap b/packages/e2e-tests/specs/__snapshots__/adding-blocks.test.js.snap index 0e23e0a66867f0..b8160cb3842efc 100644 --- a/packages/e2e-tests/specs/__snapshots__/adding-blocks.test.js.snap +++ b/packages/e2e-tests/specs/__snapshots__/adding-blocks.test.js.snap @@ -33,6 +33,10 @@ exports[`adding blocks Should insert content using the placeholder and the regul

Paragraph block

+ +

Second paragraph

+ +

Quote block

@@ -46,9 +50,5 @@ Foo [myshortcode]With multiple lines preserved[/myshortcode] - - - -

Second paragraph

-" +" `; diff --git a/packages/e2e-tests/specs/plugins/inner-blocks-allowed-blocks.test.js b/packages/e2e-tests/specs/plugins/inner-blocks-allowed-blocks.test.js index 4e9ee6286dd661..c0a2055ade7623 100644 --- a/packages/e2e-tests/specs/plugins/inner-blocks-allowed-blocks.test.js +++ b/packages/e2e-tests/specs/plugins/inner-blocks-allowed-blocks.test.js @@ -62,7 +62,6 @@ describe( 'Allowed Blocks Setting on InnerBlocks ', () => { const parentBlockSelector = '[data-type="test/allowed-blocks-dynamic"]'; const blockAppender = '.block-list-appender button'; const appenderSelector = `${ parentBlockSelector } ${ blockAppender }`; - const listSelector = `${ parentBlockSelector } ${ '.block-editor-rich-text__editable' }`; await page.waitForSelector( appenderSelector ); await page.click( appenderSelector ); await openAllBlockInserterCategories(); @@ -77,7 +76,6 @@ describe( 'Allowed Blocks Setting on InnerBlocks ', () => { ) )[ 0 ]; await insertButton.click(); await insertBlock( 'Image' ); - await page.click( listSelector ); await page.click( appenderSelector ); await openAllBlockInserterCategories(); expect( From d2fda6e41eb61bcdc666bdf60d168a6f4a9a13af Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 18 Oct 2019 09:06:56 +0300 Subject: [PATCH 15/34] moved getInsertionIndex out of selectos and back into each component that used it --- .../src/components/inserter/index.js | 24 ++++++++++++++--- .../src/components/inserter/menu.js | 25 +++++++++++++++--- packages/block-editor/src/store/selectors.js | 26 ------------------- 3 files changed, 43 insertions(+), 32 deletions(-) diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index 07b1ec0f356515..4123f31f4fb3b0 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -149,9 +149,27 @@ export default compose( [ const parentAllowedBlocks = get( parentBlockListSettings, [ 'allowedBlocks' ] ); - const { - getInsertionIndex, - } = select( 'core/block-editor' ); + const getInsertionIndex = () => { + const { + getBlockIndex, + getBlockSelectionEnd, + getBlockOrder, + } = select( 'core/block-editor' ); + + // If the clientId is defined, we insert at the position of the block. + if ( clientId ) { + return getBlockIndex( clientId, destinationRootClientId ); + } + + // If there a selected block, we insert after the selected block. + const end = getBlockSelectionEnd(); + if ( ! isAppender && end ) { + return getBlockIndex( end, destinationRootClientId ) + 1; + } + + // Otherwise, we insert at the end of the current rootClientId + return getBlockOrder( destinationRootClientId ).length; + }; const { insertBlock, diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 6c2bceaa938b0a..c1eb0824e706a1 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -479,9 +479,28 @@ export default compose( } ), withDispatch( ( dispatch, ownProps, { select } ) => { const { clientId, destinationRootClientId, isAppender } = ownProps; - const { - getInsertionIndex, - } = select( 'core/block-editor' ); + + const getInsertionIndex = () => { + const { + getBlockIndex, + getBlockSelectionEnd, + getBlockOrder, + } = select( 'core/block-editor' ); + + // If the clientId is defined, we insert at the position of the block. + if ( clientId ) { + return getBlockIndex( clientId, destinationRootClientId ); + } + + // If there a selected block, we insert after the selected block. + const end = getBlockSelectionEnd(); + if ( ! isAppender && end ) { + return getBlockIndex( end, destinationRootClientId ) + 1; + } + + // Otherwise, we insert at the end of the current rootClientId + return getBlockOrder( destinationRootClientId ).length; + }; const { showInsertionPoint, diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 4ac10d588caa05..fe562dea744fe1 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1323,32 +1323,6 @@ export const getTheOnlyAllowedItem = ( state, rootClientId = null ) => { return name; }; -/** - * Get the current insertion index. - * - * @param {Object} state Editor state. - * @param {?string} clientId Block client ID. - * @param {?string} destinationRootClientId Root client ID of block list. - * @param {boolean} isAppender Determines if the block is added to a set of existing - * blocks in a list. - * @return {number} The insertion index. - */ -export function getInsertionIndex( state, clientId, destinationRootClientId, isAppender ) { - // If the clientId is defined, we insert at the position of the block. - if ( clientId ) { - return getBlockIndex( state, clientId, destinationRootClientId ); - } - - // If there a selected block, we insert after the selected block. - const end = getBlockSelectionEnd( state ); - if ( ! isAppender && end ) { - return getBlockIndex( state, end, destinationRootClientId ) + 1; - } - - // Otherwise, we insert at the end of the current rootClientId - return getBlockOrder( state, destinationRootClientId ).length; -} - /** * Returns the Block List settings of a block, if any exist. * From 157097be5a83a297bc325b43b360cb0a0ebc0b31 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 18 Oct 2019 09:07:45 +0300 Subject: [PATCH 16/34] docs generated --- .../developers/data/data-core-block-editor.md | 43 ++++++------------- 1 file changed, 14 insertions(+), 29 deletions(-) diff --git a/docs/designers-developers/developers/data/data-core-block-editor.md b/docs/designers-developers/developers/data/data-core-block-editor.md index 46b80864692e6f..bdda4b4c0979ae 100644 --- a/docs/designers-developers/developers/data/data-core-block-editor.md +++ b/docs/designers-developers/developers/data/data-core-block-editor.md @@ -347,21 +347,6 @@ _Returns_ - `Array`: Items that appear in inserter. -# **getInsertionIndex** - -Determines whether there is only one item that may be inserted. - -_Parameters_ - -- _state_ `Object`: Editor state. -- _clientId_ `?string`: Block client ID. -- _destinationRootClientId_ `?string`: Root client ID of block list. -- _isAppender_ `boolean`: Determines if the block is added to a set of existing blocks in a list. - -_Returns_ - -- `number`: The insertion index. - # **getLastMultiSelectedBlockClientId** Returns the client ID of the last block in the multi-selection set, or null @@ -454,19 +439,6 @@ _Returns_ - `?string`: Adjacent block's client ID, or null if none exists. -# **getOneAllowedItem** - -Determines whether there is only one item that may be inserted. - -_Parameters_ - -- _state_ `Object`: Editor state. -- _rootClientId_ `?string`: Optional root client ID of block list. - -_Returns_ - -- `string`: The name of the allowed block. - # **getPreviousBlockClientId** Returns the previous block's client ID from the given reference start ID. @@ -608,6 +580,19 @@ _Returns_ - `?string`: Block Template Lock +# **getTheOnlyAllowedItem** + +Gets the name of the only item that may be inserted. + +_Parameters_ + +- _state_ `Object`: Editor state. +- _rootClientId_ `?string`: Optional root client ID of block list. + +_Returns_ + +- `?string`: The name of the allowed block or null. + # **hasInserterItems** Determines whether there are items to show in the inserter. @@ -633,7 +618,7 @@ _Returns_ - `boolean`: Whether multi-selection has been made. -# **hasOneAllowedItem** +# **hasOnlyOneAllowedInserterItem** Determines whether there is only one item that may be inserted. From 02edd017d3e97e449d3a7a694f7c9582d38dda4e Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 18 Oct 2019 16:02:52 +0300 Subject: [PATCH 17/34] added experimental labels to new selectors, added es-lint comment back --- packages/block-editor/src/components/inserter/index.js | 10 +++++----- packages/block-editor/src/components/inserter/menu.js | 9 +++++++-- packages/block-editor/src/store/selectors.js | 6 +++--- 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index 4123f31f4fb3b0..06a47f22292c5f 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -125,11 +125,11 @@ class Inserter extends Component { export default compose( [ withSelect( ( select, { rootClientId } ) => { - const { hasInserterItems, hasOnlyOneAllowedInserterItem, getTheOnlyAllowedItem } = select( 'core/block-editor' ); - const allowedBlock = getBlockType( getTheOnlyAllowedItem( rootClientId ) ); + const { hasInserterItems, __experimentalHasOnlyOneAllowedInserterItem, __experimentalGetTheOnlyAllowedItem } = select( 'core/block-editor' ); + const allowedBlock = getBlockType( __experimentalGetTheOnlyAllowedItem( rootClientId ) ); return { hasItems: hasInserterItems( rootClientId ), - hasOnlyOneAllowedInserterItem: hasOnlyOneAllowedInserterItem( rootClientId ), + hasOnlyOneAllowedInserterItem: __experimentalHasOnlyOneAllowedInserterItem( rootClientId ), blockTitle: allowedBlock ? allowedBlock.title : '', }; } ), @@ -149,7 +149,7 @@ export default compose( [ const parentAllowedBlocks = get( parentBlockListSettings, [ 'allowedBlocks' ] ); - const getInsertionIndex = () => { + function getInsertionIndex() { const { getBlockIndex, getBlockSelectionEnd, @@ -169,7 +169,7 @@ export default compose( [ // Otherwise, we insert at the end of the current rootClientId return getBlockOrder( destinationRootClientId ).length; - }; + } const { insertBlock, diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index c1eb0824e706a1..674e03fcdedb71 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -480,7 +480,12 @@ export default compose( withDispatch( ( dispatch, ownProps, { select } ) => { const { clientId, destinationRootClientId, isAppender } = ownProps; - const getInsertionIndex = () => { + // To avoid duplication, getInsertionIndex is extracted and used in two event handlers + // This breaks the withDispatch not containing any logic rule. + // Since it's a function only called when the event handlers are called, + // it's fine to extract it. + // eslint-disable-next-line no-restricted-syntax + function getInsertionIndex() { const { getBlockIndex, getBlockSelectionEnd, @@ -500,7 +505,7 @@ export default compose( // Otherwise, we insert at the end of the current rootClientId return getBlockOrder( destinationRootClientId ).length; - }; + } const { showInsertionPoint, diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index fe562dea744fe1..5d06c38a20ada8 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1292,7 +1292,7 @@ export const hasInserterItems = createSelector( * * @return {boolean} True if there is one item available, false if zero or more than one. */ -export const hasOnlyOneAllowedInserterItem = ( state, rootClientId = null ) => { +export const __experimentalHasOnlyOneAllowedInserterItem = ( state, rootClientId = null ) => { if ( rootClientId ) { const parentBlockListSettings = getBlockListSettings( state, rootClientId ); return get( parentBlockListSettings, [ 'allowedBlocks', 'length' ], 0 ) === 1; @@ -1309,11 +1309,11 @@ export const hasOnlyOneAllowedInserterItem = ( state, rootClientId = null ) => { * * @return {string?} The name of the allowed block or null. */ -export const getTheOnlyAllowedItem = ( state, rootClientId = null ) => { +export const __experimentalGetTheOnlyAllowedItem = ( state, rootClientId = null ) => { if ( ! rootClientId ) { return null; } - if ( ! hasOnlyOneAllowedInserterItem( state, rootClientId ) ) { + if ( ! __experimentalHasOnlyOneAllowedInserterItem( state, rootClientId ) ) { return null; } From e451afde4cb907ef1064c0e0fc48d3c586acf697 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 18 Oct 2019 16:42:15 +0300 Subject: [PATCH 18/34] updated docs --- .../developers/data/data-core-block-editor.md | 26 ------------------- 1 file changed, 26 deletions(-) diff --git a/docs/designers-developers/developers/data/data-core-block-editor.md b/docs/designers-developers/developers/data/data-core-block-editor.md index bdda4b4c0979ae..eb9201165dafd6 100644 --- a/docs/designers-developers/developers/data/data-core-block-editor.md +++ b/docs/designers-developers/developers/data/data-core-block-editor.md @@ -580,19 +580,6 @@ _Returns_ - `?string`: Block Template Lock -# **getTheOnlyAllowedItem** - -Gets the name of the only item that may be inserted. - -_Parameters_ - -- _state_ `Object`: Editor state. -- _rootClientId_ `?string`: Optional root client ID of block list. - -_Returns_ - -- `?string`: The name of the allowed block or null. - # **hasInserterItems** Determines whether there are items to show in the inserter. @@ -618,19 +605,6 @@ _Returns_ - `boolean`: Whether multi-selection has been made. -# **hasOnlyOneAllowedInserterItem** - -Determines whether there is only one item that may be inserted. - -_Parameters_ - -- _state_ `Object`: Editor state. -- _rootClientId_ `?string`: Optional root client ID of block list. - -_Returns_ - -- `boolean`: True if there is one item available, false if zero or more than one. - # **hasSelectedBlock** Returns true if there is a single selected block, or false otherwise. From bb2bd63f12e034ad3b2ee6ab0bd6b6de31cdf4dd Mon Sep 17 00:00:00 2001 From: andrei draganescu Date: Thu, 24 Oct 2019 16:50:03 +0300 Subject: [PATCH 19/34] Update packages/block-editor/src/store/selectors.js Co-Authored-By: Miguel Fonseca --- packages/block-editor/src/store/selectors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 5d06c38a20ada8..97339a34f764f7 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1302,7 +1302,7 @@ export const __experimentalHasOnlyOneAllowedInserterItem = ( state, rootClientId }; /** - * Gets the name of the only item that may be inserted. + * Returns the name of the only block type that may be inserted, or null if there isn't exactly one allowed type. * * @param {Object} state Editor state. * @param {?string} rootClientId Optional root client ID of block list. From 97dac6e545b3dc3377caf5a91c6ac5d918bc9fb7 Mon Sep 17 00:00:00 2001 From: andrei draganescu Date: Thu, 24 Oct 2019 16:50:14 +0300 Subject: [PATCH 20/34] Update packages/block-editor/src/store/selectors.js Co-Authored-By: Miguel Fonseca --- packages/block-editor/src/store/selectors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 97339a34f764f7..dc7a10819e2b7c 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1307,7 +1307,7 @@ export const __experimentalHasOnlyOneAllowedInserterItem = ( state, rootClientId * @param {Object} state Editor state. * @param {?string} rootClientId Optional root client ID of block list. * - * @return {string?} The name of the allowed block or null. + * @return {string?} The name of the allowed block type or null. */ export const __experimentalGetTheOnlyAllowedItem = ( state, rootClientId = null ) => { if ( ! rootClientId ) { From 134d182786611cbd83a5b30c549944ca98532f0c Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 24 Oct 2019 19:23:00 +0300 Subject: [PATCH 21/34] refactored and fixed some coding errors --- .../src/components/inserter/index.js | 33 +++++++++---------- .../src/components/inserter/menu.js | 26 ++++++++------- packages/block-editor/src/store/selectors.js | 6 ++-- 3 files changed, 33 insertions(+), 32 deletions(-) diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index 06a47f22292c5f..4d2d8161793929 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -1,9 +1,3 @@ -/** - * External dependencies - */ -import { - get, -} from 'lodash'; /** * WordPress dependencies */ @@ -125,29 +119,34 @@ class Inserter extends Component { export default compose( [ withSelect( ( select, { rootClientId } ) => { - const { hasInserterItems, __experimentalHasOnlyOneAllowedInserterItem, __experimentalGetTheOnlyAllowedItem } = select( 'core/block-editor' ); - const allowedBlock = getBlockType( __experimentalGetTheOnlyAllowedItem( rootClientId ) ); + const { + hasInserterItems, + __experimentalHasOnlyOneAllowedBlockType, + __experimentalGetTheOnlyAllowedBlockType, + } = select( 'core/block-editor' ); + const allowedBlock = getBlockType( __experimentalGetTheOnlyAllowedBlockType( rootClientId ) ); return { hasItems: hasInserterItems( rootClientId ), - hasOnlyOneAllowedInserterItem: __experimentalHasOnlyOneAllowedInserterItem( rootClientId ), + hasOnlyOneAllowedInserterItem: __experimentalHasOnlyOneAllowedBlockType( rootClientId ), blockTitle: allowedBlock ? allowedBlock.title : '', }; } ), withDispatch( ( dispatch, ownProps, { select } ) => { return { insertTheOnlyAllowedItem: () => { - const { rootClientId, clientId, destinationRootClientId, isAppender } = ownProps; + const { rootClientId, clientId, isAppender, destinationRootClientId } = ownProps; const { - getBlockListSettings, + __experimentalHasOnlyOneAllowedBlockType, + __experimentalGetTheOnlyAllowedBlockType, } = select( 'core/block-editor' ); - const parentBlockListSettings = getBlockListSettings( rootClientId ); - const isOnlyOneAllowedBlock = get( parentBlockListSettings, [ 'allowedBlocks', 'length' ], 0 ) === 1; - if ( ! isOnlyOneAllowedBlock ) { + const hasOnlyOneAllowedInserterItem = __experimentalHasOnlyOneAllowedBlockType( rootClientId ); + + if ( ! hasOnlyOneAllowedInserterItem ) { return false; } - const parentAllowedBlocks = get( parentBlockListSettings, [ 'allowedBlocks' ] ); + const parentAllowedBlocks = __experimentalGetTheOnlyAllowedBlockType( rootClientId ); function getInsertionIndex() { const { @@ -174,10 +173,10 @@ export default compose( [ const { insertBlock, } = dispatch( 'core/block-editor' ); - const insertedBlock = createBlock( parentAllowedBlocks[ 0 ] ); + const insertedBlock = createBlock( parentAllowedBlocks ); insertBlock( insertedBlock, - getInsertionIndex( clientId, destinationRootClientId, isAppender ), + getInsertionIndex(), rootClientId ); }, diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 674e03fcdedb71..2c6cc9c85d1869 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -478,7 +478,17 @@ export default compose( }; } ), withDispatch( ( dispatch, ownProps, { select } ) => { - const { clientId, destinationRootClientId, isAppender } = ownProps; + const { + showInsertionPoint, + hideInsertionPoint, + } = dispatch( 'core/block-editor' ); + + // This should be an external action provided in the editor settings. + const { + __experimentalFetchReusableBlocks: fetchReusableBlocks, + } = dispatch( 'core/editor' ); + + const { isAppender } = ownProps; // To avoid duplication, getInsertionIndex is extracted and used in two event handlers // This breaks the withDispatch not containing any logic rule. @@ -492,6 +502,8 @@ export default compose( getBlockOrder, } = select( 'core/block-editor' ); + const { clientId, destinationRootClientId } = ownProps; + // If the clientId is defined, we insert at the position of the block. if ( clientId ) { return getBlockIndex( clientId, destinationRootClientId ); @@ -507,20 +519,10 @@ export default compose( return getBlockOrder( destinationRootClientId ).length; } - const { - showInsertionPoint, - hideInsertionPoint, - } = dispatch( 'core/block-editor' ); - - // This should be an external action provided in the editor settings. - const { - __experimentalFetchReusableBlocks: fetchReusableBlocks, - } = dispatch( 'core/editor' ); - return { fetchReusableBlocks, showInsertionPoint() { - const index = getInsertionIndex( clientId, destinationRootClientId, isAppender ); + const index = getInsertionIndex(); showInsertionPoint( ownProps.destinationRootClientId, index ); }, hideInsertionPoint, diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index dc7a10819e2b7c..ca3006480eef37 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1292,7 +1292,7 @@ export const hasInserterItems = createSelector( * * @return {boolean} True if there is one item available, false if zero or more than one. */ -export const __experimentalHasOnlyOneAllowedInserterItem = ( state, rootClientId = null ) => { +export const __experimentalHasOnlyOneAllowedBlockType = ( state, rootClientId = null ) => { if ( rootClientId ) { const parentBlockListSettings = getBlockListSettings( state, rootClientId ); return get( parentBlockListSettings, [ 'allowedBlocks', 'length' ], 0 ) === 1; @@ -1309,11 +1309,11 @@ export const __experimentalHasOnlyOneAllowedInserterItem = ( state, rootClientId * * @return {string?} The name of the allowed block type or null. */ -export const __experimentalGetTheOnlyAllowedItem = ( state, rootClientId = null ) => { +export const __experimentalGetTheOnlyAllowedBlockType = ( state, rootClientId = null ) => { if ( ! rootClientId ) { return null; } - if ( ! __experimentalHasOnlyOneAllowedInserterItem( state, rootClientId ) ) { + if ( ! __experimentalHasOnlyOneAllowedBlockType( state, rootClientId ) ) { return null; } From b2f709a3e978660412a6bb8f76795873cdbce376 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 24 Oct 2019 19:29:36 +0300 Subject: [PATCH 22/34] small code move --- packages/block-editor/src/components/inserter/menu.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 2c6cc9c85d1869..5eb3c79b0c5cfd 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -488,8 +488,6 @@ export default compose( __experimentalFetchReusableBlocks: fetchReusableBlocks, } = dispatch( 'core/editor' ); - const { isAppender } = ownProps; - // To avoid duplication, getInsertionIndex is extracted and used in two event handlers // This breaks the withDispatch not containing any logic rule. // Since it's a function only called when the event handlers are called, @@ -502,7 +500,7 @@ export default compose( getBlockOrder, } = select( 'core/block-editor' ); - const { clientId, destinationRootClientId } = ownProps; + const { clientId, destinationRootClientId, isAppender } = ownProps; // If the clientId is defined, we insert at the position of the block. if ( clientId ) { @@ -534,6 +532,7 @@ export default compose( const { getSelectedBlock, } = select( 'core/block-editor' ); + const { isAppender } = ownProps; const { name, initialAttributes } = item; const selectedBlock = getSelectedBlock(); const insertedBlock = createBlock( name, initialAttributes ); From 1a4073104a3fad88178858711e7cb4d9da5342fa Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 24 Oct 2019 19:31:27 +0300 Subject: [PATCH 23/34] small code move --- packages/block-editor/src/components/inserter/menu.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 5eb3c79b0c5cfd..7522c553698653 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -499,7 +499,6 @@ export default compose( getBlockSelectionEnd, getBlockOrder, } = select( 'core/block-editor' ); - const { clientId, destinationRootClientId, isAppender } = ownProps; // If the clientId is defined, we insert at the position of the block. From 7049dc4855e24e1ac9de35e83c88fe7c9ec2e10a Mon Sep 17 00:00:00 2001 From: andrei draganescu Date: Fri, 25 Oct 2019 04:14:03 -0700 Subject: [PATCH 24/34] removes aria attrs for autoinserted items --- packages/block-editor/src/components/inserter/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index 4d2d8161793929..8b431949e2185d 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -16,7 +16,7 @@ import { */ import InserterMenu from './menu'; -const defaultRenderToggle = ( { onToggle, disabled, isOpen, blockTitle } ) => { +const defaultRenderToggle = ( { onToggle, disabled, isOpen, blockTitle, hasOnlyOneAllowedInserterItem } ) => { const label = blockTitle === '' ? _x( 'Add block', 'Generic label for block inseter button' ) : sprintf( _x( 'Add %s', 'directly add the only allowed block' ), blockTitle ); return ( @@ -26,8 +26,8 @@ const defaultRenderToggle = ( { onToggle, disabled, isOpen, blockTitle } ) => { labelPosition="bottom" onClick={ onToggle } className="editor-inserter__toggle block-editor-inserter__toggle" - aria-haspopup="true" - aria-expanded={ isOpen } + aria-haspopup={ ! hasOnlyOneAllowedInserterItem ? "true" : false } + aria-expanded={ ! hasOnlyOneAllowedInserterItem ? isOpen : false } disabled={ disabled } /> ); @@ -74,7 +74,7 @@ class Inserter extends Component { onToggle = insertTheOnlyAllowedItem; } - return renderToggle( { onToggle, isOpen, disabled, blockTitle } ); + return renderToggle( { onToggle, isOpen, disabled, blockTitle, hasOnlyOneAllowedInserterItem } ); } /** From 9910348e7b83b0825d4f4fa8a611bc7eeb33c173 Mon Sep 17 00:00:00 2001 From: andrei draganescu Date: Fri, 25 Oct 2019 07:10:13 -0700 Subject: [PATCH 25/34] fixes typo, adds translators comment --- packages/block-editor/src/components/inserter/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index 8b431949e2185d..5741e7a58caf87 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -17,7 +17,9 @@ import { import InserterMenu from './menu'; const defaultRenderToggle = ( { onToggle, disabled, isOpen, blockTitle, hasOnlyOneAllowedInserterItem } ) => { - const label = blockTitle === '' ? _x( 'Add block', 'Generic label for block inseter button' ) : sprintf( _x( 'Add %s', 'directly add the only allowed block' ), blockTitle ); + + // translators: %s: the name of the block when there is only one + const label = blockTitle === '' ? _x( 'Add block', 'Generic label for block inserter button' ) : sprintf( _x( 'Add %s', 'directly add the only allowed block' ), blockTitle ); return ( Date: Fri, 25 Oct 2019 07:19:23 -0700 Subject: [PATCH 26/34] simplifies the intserter logic --- packages/block-editor/src/components/inserter/index.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index 5741e7a58caf87..22738602579a1c 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -66,16 +66,11 @@ class Inserter extends Component { renderToggle( { onToggle, isOpen } ) { const { disabled, - hasOnlyOneAllowedInserterItem, blockTitle, insertTheOnlyAllowedItem, renderToggle = defaultRenderToggle, } = this.props; - if ( hasOnlyOneAllowedInserterItem ) { - onToggle = insertTheOnlyAllowedItem; - } - return renderToggle( { onToggle, isOpen, disabled, blockTitle, hasOnlyOneAllowedInserterItem } ); } @@ -103,7 +98,10 @@ class Inserter extends Component { } render() { - const { position } = this.props; + const { position, hasOnlyOneAllowedInserterItem } = this.props; + if ( hasOnlyOneAllowedInserterItem ) { + return this.renderToggle( { onToggle: insertTheOnlyAllowedItem } ) + } return ( Date: Fri, 25 Oct 2019 07:30:39 -0700 Subject: [PATCH 27/34] fix for the simplification --- packages/block-editor/src/components/inserter/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index 22738602579a1c..4370a2296ab049 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -67,6 +67,7 @@ class Inserter extends Component { const { disabled, blockTitle, + hasOnlyOneAllowedInserterItem, insertTheOnlyAllowedItem, renderToggle = defaultRenderToggle, } = this.props; From 3f0d68ef974b5b4013cdee0e90560ac8f082b804 Mon Sep 17 00:00:00 2001 From: andrei draganescu Date: Fri, 25 Oct 2019 08:30:35 -0700 Subject: [PATCH 28/34] simplifies by using one selector and passing props in compose --- .../src/components/inserter/index.js | 56 +++++++++++-------- packages/block-editor/src/store/selectors.js | 35 ++---------- 2 files changed, 38 insertions(+), 53 deletions(-) diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index 4370a2296ab049..97776243fc636a 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -1,3 +1,7 @@ +/** + * External dependencies + */ +import { get } from 'lodash'; /** * WordPress dependencies */ @@ -16,7 +20,7 @@ import { */ import InserterMenu from './menu'; -const defaultRenderToggle = ( { onToggle, disabled, isOpen, blockTitle, hasOnlyOneAllowedInserterItem } ) => { +const defaultRenderToggle = ( { onToggle, disabled, isOpen, blockTitle, hasOnlyOneAllowedInserterBlockType } ) => { // translators: %s: the name of the block when there is only one const label = blockTitle === '' ? _x( 'Add block', 'Generic label for block inserter button' ) : sprintf( _x( 'Add %s', 'directly add the only allowed block' ), blockTitle ); @@ -28,8 +32,8 @@ const defaultRenderToggle = ( { onToggle, disabled, isOpen, blockTitle, hasOnlyO labelPosition="bottom" onClick={ onToggle } className="editor-inserter__toggle block-editor-inserter__toggle" - aria-haspopup={ ! hasOnlyOneAllowedInserterItem ? "true" : false } - aria-expanded={ ! hasOnlyOneAllowedInserterItem ? isOpen : false } + aria-haspopup={ ! hasOnlyOneAllowedInserterBlockType ? "true" : false } + aria-expanded={ ! hasOnlyOneAllowedInserterBlockType ? isOpen : false } disabled={ disabled } /> ); @@ -67,12 +71,11 @@ class Inserter extends Component { const { disabled, blockTitle, - hasOnlyOneAllowedInserterItem, - insertTheOnlyAllowedItem, + hasOnlyOneAllowedInserterBlockType, renderToggle = defaultRenderToggle, } = this.props; - return renderToggle( { onToggle, isOpen, disabled, blockTitle, hasOnlyOneAllowedInserterItem } ); + return renderToggle( { onToggle, isOpen, disabled, blockTitle, hasOnlyOneAllowedInserterBlockType } ); } /** @@ -99,8 +102,8 @@ class Inserter extends Component { } render() { - const { position, hasOnlyOneAllowedInserterItem } = this.props; - if ( hasOnlyOneAllowedInserterItem ) { + const { position, hasOnlyOneAllowedInserterBlockType, insertTheOnlyAllowedItem } = this.props; + if ( hasOnlyOneAllowedInserterBlockType ) { return this.renderToggle( { onToggle: insertTheOnlyAllowedItem } ) } return ( @@ -122,14 +125,22 @@ export default compose( [ withSelect( ( select, { rootClientId } ) => { const { hasInserterItems, - __experimentalHasOnlyOneAllowedBlockType, - __experimentalGetTheOnlyAllowedBlockType, + __experimentalGetAllowedBlocks,î } = select( 'core/block-editor' ); - const allowedBlock = getBlockType( __experimentalGetTheOnlyAllowedBlockType( rootClientId ) ); + + const allowedBlocks = __experimentalGetAllowedBlocks( rootClientId ); + + const hasOnlyOneAllowedInserterBlockType = allowedBlocks && ( get( allowedBlocks, [ 'length' ], 0 ) === 1 ); + let allowedBlockType = false; + if ( hasOnlyOneAllowedInserterBlockType ) { + allowedBlockType = getBlockType( allowedBlocks ); + } + return { hasItems: hasInserterItems( rootClientId ), - hasOnlyOneAllowedInserterItem: __experimentalHasOnlyOneAllowedBlockType( rootClientId ), - blockTitle: allowedBlock ? allowedBlock.title : '', + hasOnlyOneAllowedInserterBlockType, + blockTitle: allowedBlockType ? allowedBlockType.title : '', + allowedBlockType: allowedBlockType, }; } ), withDispatch( ( dispatch, ownProps, { select } ) => { @@ -137,18 +148,14 @@ export default compose( [ insertTheOnlyAllowedItem: () => { const { rootClientId, clientId, isAppender, destinationRootClientId } = ownProps; const { - __experimentalHasOnlyOneAllowedBlockType, - __experimentalGetTheOnlyAllowedBlockType, - } = select( 'core/block-editor' ); - - const hasOnlyOneAllowedInserterItem = __experimentalHasOnlyOneAllowedBlockType( rootClientId ); - - if ( ! hasOnlyOneAllowedInserterItem ) { + hasOnlyOneAllowedInserterBlockType, + allowedBlockType, + } = ownProps; + + if ( ! hasOnlyOneAllowedInserterBlockType ) { return false; } - - const parentAllowedBlocks = __experimentalGetTheOnlyAllowedBlockType( rootClientId ); - + function getInsertionIndex() { const { getBlockIndex, @@ -174,7 +181,8 @@ export default compose( [ const { insertBlock, } = dispatch( 'core/block-editor' ); - const insertedBlock = createBlock( parentAllowedBlocks ); + console.log('inserting block'); + const insertedBlock = createBlock( allowedBlockType.name ); insertBlock( insertedBlock, getInsertionIndex(), diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index ca3006480eef37..2efa19ae8b9662 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1285,42 +1285,19 @@ export const hasInserterItems = createSelector( ); /** - * Determines whether there is only one item that may be inserted. + * Returns the list of allowed inserter blocks for inner blocks children * * @param {Object} state Editor state. * @param {?string} rootClientId Optional root client ID of block list. * - * @return {boolean} True if there is one item available, false if zero or more than one. + * @return {string?} The name of the allowed block type or false. */ -export const __experimentalHasOnlyOneAllowedBlockType = ( state, rootClientId = null ) => { - if ( rootClientId ) { - const parentBlockListSettings = getBlockListSettings( state, rootClientId ); - return get( parentBlockListSettings, [ 'allowedBlocks', 'length' ], 0 ) === 1; - } - - return false; -}; - -/** - * Returns the name of the only block type that may be inserted, or null if there isn't exactly one allowed type. - * - * @param {Object} state Editor state. - * @param {?string} rootClientId Optional root client ID of block list. - * - * @return {string?} The name of the allowed block type or null. - */ -export const __experimentalGetTheOnlyAllowedBlockType = ( state, rootClientId = null ) => { +export const __experimentalGetAllowedBlocks = ( state, rootClientId = null ) => { if ( ! rootClientId ) { - return null; - } - if ( ! __experimentalHasOnlyOneAllowedBlockType( state, rootClientId ) ) { - return null; + return false; } - - const parentBlockListSettings = getBlockListSettings( state, rootClientId ); - const name = get( parentBlockListSettings, [ 'allowedBlocks', 0 ], 0 ); - - return name; + const { allowedBlocks } = getBlockListSettings( state, rootClientId ); + return allowedBlocks; }; /** From e82ba8f23c6afdc0deadda82b39ef09f94a1712d Mon Sep 17 00:00:00 2001 From: andrei draganescu Date: Sun, 27 Oct 2019 02:52:16 -0700 Subject: [PATCH 29/34] small code updates --- packages/block-editor/src/components/inserter/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index 97776243fc636a..ea2a6fa4c7f259 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -102,9 +102,9 @@ class Inserter extends Component { } render() { - const { position, hasOnlyOneAllowedInserterBlockType, insertTheOnlyAllowedItem } = this.props; + const { position, hasOnlyOneAllowedInserterBlockType, insertOnlyAllowedBlock } = this.props; if ( hasOnlyOneAllowedInserterBlockType ) { - return this.renderToggle( { onToggle: insertTheOnlyAllowedItem } ) + return this.renderToggle( { onToggle: insertOnlyAllowedBlock } ) } return ( { return { - insertTheOnlyAllowedItem: () => { + insertOnlyAllowedBlock() { const { rootClientId, clientId, isAppender, destinationRootClientId } = ownProps; const { hasOnlyOneAllowedInserterBlockType, @@ -153,7 +153,7 @@ export default compose( [ } = ownProps; if ( ! hasOnlyOneAllowedInserterBlockType ) { - return false; + return; } function getInsertionIndex() { From 65a4b58b3f32308ee7e7aa357167ed1e35ed1baf Mon Sep 17 00:00:00 2001 From: andrei draganescu Date: Sun, 27 Oct 2019 03:15:23 -0700 Subject: [PATCH 30/34] lint --- .../src/components/inserter/index.js | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index ea2a6fa4c7f259..1780808c273671 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -21,7 +21,6 @@ import { import InserterMenu from './menu'; const defaultRenderToggle = ( { onToggle, disabled, isOpen, blockTitle, hasOnlyOneAllowedInserterBlockType } ) => { - // translators: %s: the name of the block when there is only one const label = blockTitle === '' ? _x( 'Add block', 'Generic label for block inserter button' ) : sprintf( _x( 'Add %s', 'directly add the only allowed block' ), blockTitle ); @@ -32,7 +31,7 @@ const defaultRenderToggle = ( { onToggle, disabled, isOpen, blockTitle, hasOnlyO labelPosition="bottom" onClick={ onToggle } className="editor-inserter__toggle block-editor-inserter__toggle" - aria-haspopup={ ! hasOnlyOneAllowedInserterBlockType ? "true" : false } + aria-haspopup={ ! hasOnlyOneAllowedInserterBlockType ? 'true' : false } aria-expanded={ ! hasOnlyOneAllowedInserterBlockType ? isOpen : false } disabled={ disabled } /> @@ -104,7 +103,7 @@ class Inserter extends Component { render() { const { position, hasOnlyOneAllowedInserterBlockType, insertOnlyAllowedBlock } = this.props; if ( hasOnlyOneAllowedInserterBlockType ) { - return this.renderToggle( { onToggle: insertOnlyAllowedBlock } ) + return this.renderToggle( { onToggle: insertOnlyAllowedBlock } ); } return ( { const { hasInserterItems, - __experimentalGetAllowedBlocks,î + __experimentalGetAllowedBlocks, } = select( 'core/block-editor' ); - + const allowedBlocks = __experimentalGetAllowedBlocks( rootClientId ); - - const hasOnlyOneAllowedInserterBlockType = allowedBlocks && ( get( allowedBlocks, [ 'length' ], 0 ) === 1 ); + + const hasOnlyOneAllowedInserterBlockType = allowedBlocks && ( get( allowedBlocks, [ 'length' ], 0 ) === 1 ); let allowedBlockType = false; if ( hasOnlyOneAllowedInserterBlockType ) { allowedBlockType = getBlockType( allowedBlocks ); @@ -140,7 +139,7 @@ export default compose( [ hasItems: hasInserterItems( rootClientId ), hasOnlyOneAllowedInserterBlockType, blockTitle: allowedBlockType ? allowedBlockType.title : '', - allowedBlockType: allowedBlockType, + allowedBlockType, }; } ), withDispatch( ( dispatch, ownProps, { select } ) => { @@ -151,11 +150,11 @@ export default compose( [ hasOnlyOneAllowedInserterBlockType, allowedBlockType, } = ownProps; - + if ( ! hasOnlyOneAllowedInserterBlockType ) { return; } - + function getInsertionIndex() { const { getBlockIndex, @@ -181,7 +180,7 @@ export default compose( [ const { insertBlock, } = dispatch( 'core/block-editor' ); - console.log('inserting block'); + const insertedBlock = createBlock( allowedBlockType.name ); insertBlock( insertedBlock, From a3d9ad643ea67348617a77a9b521e9afc822f18d Mon Sep 17 00:00:00 2001 From: andrei draganescu Date: Sun, 27 Oct 2019 03:27:54 -0700 Subject: [PATCH 31/34] renamed insertedBlock --- packages/block-editor/src/components/inserter/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index 1780808c273671..d228aeecd3a477 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -181,9 +181,9 @@ export default compose( [ insertBlock, } = dispatch( 'core/block-editor' ); - const insertedBlock = createBlock( allowedBlockType.name ); + const blockToInsert = createBlock( allowedBlockType.name ); insertBlock( - insertedBlock, + blockToInsert, getInsertionIndex(), rootClientId ); From 50b263767c6e7051178260f8b3b3199b9c3494fd Mon Sep 17 00:00:00 2001 From: andrei draganescu Date: Sun, 27 Oct 2019 03:52:52 -0700 Subject: [PATCH 32/34] small doc update --- packages/block-editor/src/store/selectors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 2efa19ae8b9662..23977517e93675 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1290,7 +1290,7 @@ export const hasInserterItems = createSelector( * @param {Object} state Editor state. * @param {?string} rootClientId Optional root client ID of block list. * - * @return {string?} The name of the allowed block type or false. + * @return {Array?} The list of allowed block types or false. */ export const __experimentalGetAllowedBlocks = ( state, rootClientId = null ) => { if ( ! rootClientId ) { From 488aa5c0d823dd877ccfe4e9ecd60d7943ea0a0d Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Mon, 28 Oct 2019 14:16:34 +0200 Subject: [PATCH 33/34] adds tooltip to the default button appender --- .../components/button-block-appender/index.js | 33 +++++++++++-------- .../src/components/inserter/index.js | 2 -- 2 files changed, 20 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js index 7fd751165f5b45..f0153226862efe 100644 --- a/packages/block-editor/src/components/button-block-appender/index.js +++ b/packages/block-editor/src/components/button-block-appender/index.js @@ -6,8 +6,8 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { Button, Icon } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; +import { Button, Icon, Tooltip } from '@wordpress/components'; +import { _x, sprintf } from '@wordpress/i18n'; /** * Internal dependencies @@ -21,17 +21,24 @@ function ButtonBlockAppender( { rootClientId, className } ) { ( - - ) } + renderToggle={ ( { onToggle, disabled, isOpen, blockTitle, hasOnlyOneAllowedInserterBlockType } ) => { + const label = blockTitle === '' ? _x( 'Add block', 'Generic label for block inserter button' ) : sprintf( _x( 'Add %s', 'directly add the only allowed block' ), blockTitle ); + return ( + + + + ); + } } isAppender /> diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index d228aeecd3a477..09246ffc6148a3 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -23,7 +23,6 @@ import InserterMenu from './menu'; const defaultRenderToggle = ( { onToggle, disabled, isOpen, blockTitle, hasOnlyOneAllowedInserterBlockType } ) => { // translators: %s: the name of the block when there is only one const label = blockTitle === '' ? _x( 'Add block', 'Generic label for block inserter button' ) : sprintf( _x( 'Add %s', 'directly add the only allowed block' ), blockTitle ); - return ( Date: Mon, 28 Oct 2019 14:24:57 +0200 Subject: [PATCH 34/34] refactores for more self documenting varnames --- .../components/button-block-appender/index.js | 15 ++++++--- .../src/components/inserter/index.js | 33 +++++++++++-------- 2 files changed, 30 insertions(+), 18 deletions(-) diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js index f0153226862efe..1cbbb5980903a2 100644 --- a/packages/block-editor/src/components/button-block-appender/index.js +++ b/packages/block-editor/src/components/button-block-appender/index.js @@ -21,15 +21,22 @@ function ButtonBlockAppender( { rootClientId, className } ) { { - const label = blockTitle === '' ? _x( 'Add block', 'Generic label for block inserter button' ) : sprintf( _x( 'Add %s', 'directly add the only allowed block' ), blockTitle ); + renderToggle={ ( { onToggle, disabled, isOpen, blockTitle, hasSingleBlockType } ) => { + let label; + if ( hasSingleBlockType ) { + // translators: %s: the name of the block when there is only one + label = sprintf( _x( 'Add %s', 'directly add the only allowed block' ), blockTitle ); + } else { + label = _x( 'Add block', 'Generic label for block inserter button' ); + } + const isToggleButton = ! hasSingleBlockType; return (