From 8812b720c42c129d359dcbc562591d3aee6d60e6 Mon Sep 17 00:00:00 2001 From: Jorge Date: Mon, 28 May 2018 15:39:37 +0100 Subject: [PATCH] Added InnerBlock locking mechanism. --- editor/components/block-drop-zone/index.js | 7 +++-- editor/components/block-list/block.js | 8 +++--- .../components/block-list/insertion-point.js | 6 ++--- editor/components/block-mover/index.js | 5 ++-- .../block-duplicate-button.js | 5 ++-- .../block-remove-button.js | 13 +++++---- .../block-transformations.js | 7 +++-- editor/components/block-switcher/index.js | 7 +++-- .../default-block-appender/index.js | 6 ++--- .../editor-global-keyboard-shortcuts/index.js | 9 ++++--- editor/components/inner-blocks/index.js | 27 ++++++++++--------- .../inserter-with-shortcuts/index.js | 5 ++-- editor/store/selectors.js | 27 ++++++++++++++++--- editor/store/test/selectors.js | 6 ++--- 14 files changed, 80 insertions(+), 58 deletions(-) diff --git a/editor/components/block-drop-zone/index.js b/editor/components/block-drop-zone/index.js index 62197d9357d254..f6b080a058d1d0 100644 --- a/editor/components/block-drop-zone/index.js +++ b/editor/components/block-drop-zone/index.js @@ -137,11 +137,10 @@ export default compose( }, }; } ), - withSelect( ( select ) => { - const { templateLock } = select( 'core/editor' ).getEditorSettings(); - + withSelect( ( select, { rootUID } ) => { + const { getLockedState } = select( 'core/editor' ); return { - isLocked: !! templateLock, + isLocked: !! getLockedState( rootUID ), }; } ) )( BlockDropZone ); diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js index 9a1db98f9dad0b..7b9ca113f524a1 100644 --- a/editor/components/block-list/block.js +++ b/editor/components/block-list/block.js @@ -597,13 +597,15 @@ const applyWithSelect = withSelect( ( select, { uid, rootUID } ) => { getSelectedBlocksInitialCaretPosition, getEditorSettings, hasSelectedInnerBlock, + getLockedState, } = select( 'core/editor' ); const isSelected = isBlockSelected( uid ); const isParentOfSelectedBlock = hasSelectedInnerBlock( uid ); - const { templateLock, hasFixedToolbar } = getEditorSettings(); + const { hasFixedToolbar } = getEditorSettings(); const block = getBlock( uid ); const previousBlockUid = getPreviousBlockUid( uid ); const previousBlock = getBlock( previousBlockUid ); + const lockedState = getLockedState( rootUID ); return { nextBlockUid: getNextBlockUid( uid ), @@ -621,8 +623,8 @@ const applyWithSelect = withSelect( ( select, { uid, rootUID } ) => { initialPosition: getSelectedBlocksInitialCaretPosition(), isEmptyDefaultBlock: block && isUnmodifiedDefaultBlock( block ), isPreviousBlockADefaultEmptyBlock: previousBlock && isUnmodifiedDefaultBlock( previousBlock ), - isMovable: 'all' !== templateLock, - isLocked: !! templateLock, + isMovable: 'all' !== lockedState, + isLocked: !! lockedState, previousBlockUid, block, isSelected, diff --git a/editor/components/block-list/insertion-point.js b/editor/components/block-list/insertion-point.js index 960f3f8793f0bb..ecbc0348843363 100644 --- a/editor/components/block-list/insertion-point.js +++ b/editor/components/block-list/insertion-point.js @@ -83,7 +83,7 @@ export default compose( getBlock, isBlockInsertionPointVisible, isTyping, - getEditorSettings, + getLockedState, } = select( 'core/editor' ); const blockIndex = uid ? getBlockIndex( uid, rootUID ) : -1; const insertIndex = blockIndex; @@ -97,13 +97,13 @@ export default compose( ); return { - templateLock: getEditorSettings().templateLock, + isLocked: !! getLockedState( insertionPoint.rootUID ), showInserter: ! isTyping() && canShowInserter, index: insertIndex, showInsertionPoint, }; } ), - ifCondition( ( { templateLock } ) => ! templateLock ), + ifCondition( ( { isLocked } ) => ! isLocked ), withDispatch( ( dispatch ) => { const { insertDefaultBlock, startTyping } = dispatch( 'core/editor' ); return { diff --git a/editor/components/block-mover/index.js b/editor/components/block-mover/index.js index 1cb87dce0be59c..01989c65786995 100644 --- a/editor/components/block-mover/index.js +++ b/editor/components/block-mover/index.js @@ -107,15 +107,14 @@ export class BlockMover extends Component { export default compose( withSelect( ( select, { uids, rootUID } ) => { - const { getBlock, getBlockIndex, getEditorSettings } = select( 'core/editor' ); + const { getBlock, getBlockIndex, getLockedState } = select( 'core/editor' ); const firstUID = first( castArray( uids ) ); const block = getBlock( firstUID ); - const { templateLock } = getEditorSettings(); return { firstIndex: getBlockIndex( firstUID, rootUID ), blockType: block ? getBlockType( block.name ) : null, - isLocked: templateLock === 'all', + isLocked: getLockedState( rootUID ) === 'all', }; } ), withDispatch( ( dispatch, { uids, rootUID } ) => { diff --git a/editor/components/block-settings-menu/block-duplicate-button.js b/editor/components/block-settings-menu/block-duplicate-button.js index bf66e8fc4f243f..b7766b6b277a5b 100644 --- a/editor/components/block-settings-menu/block-duplicate-button.js +++ b/editor/components/block-settings-menu/block-duplicate-button.js @@ -37,12 +37,11 @@ export function BlockDuplicateButton( { blocks, onDuplicate, onClick = noop, isL export default compose( withSelect( ( select, { uids, rootUID } ) => { - const { getBlocksByUID, getBlockIndex, getEditorSettings } = select( 'core/editor' ); - const { templateLock } = getEditorSettings(); + const { getBlocksByUID, getBlockIndex, getLockedState } = select( 'core/editor' ); return { blocks: getBlocksByUID( uids ), index: getBlockIndex( last( castArray( uids ) ), rootUID ), - isLocked: !! templateLock, + isLocked: !! getLockedState( rootUID ), }; } ), withDispatch( ( dispatch, { blocks, index, rootUID } ) => ( { diff --git a/editor/components/block-settings-menu/block-remove-button.js b/editor/components/block-settings-menu/block-remove-button.js index a9fe8f121eb373..b1927a0de4203d 100644 --- a/editor/components/block-settings-menu/block-remove-button.js +++ b/editor/components/block-settings-menu/block-remove-button.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { flow, noop } from 'lodash'; +import { castArray, flow, noop, some } from 'lodash'; /** * WordPress dependencies @@ -36,11 +36,14 @@ export default compose( dispatch( 'core/editor' ).removeBlocks( uids ); }, } ) ), - withSelect( ( select ) => { - const { templateLock } = select( 'core/editor' ).getEditorSettings(); - + withSelect( ( select, { uids } ) => { + const { getBlockRootUID, getLockedState } = select( 'core/editor' ); return { - isLocked: !! templateLock, + isLocked: some( castArray( uids ), ( uid ) => { + const rootUID = getBlockRootUID( uid ); + const lockedState = getLockedState( rootUID ); + return lockedState === 'all'; + } ), }; } ), )( BlockRemoveButton ); diff --git a/editor/components/block-settings-menu/block-transformations.js b/editor/components/block-settings-menu/block-transformations.js index 8f936e2503752a..6e8033fc1de8f4 100644 --- a/editor/components/block-settings-menu/block-transformations.js +++ b/editor/components/block-settings-menu/block-transformations.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { noop } from 'lodash'; +import { noop, some } from 'lodash'; /** * WordPress dependencies @@ -52,10 +52,9 @@ function BlockTransformations( { blocks, small = false, onTransform, onClick = n } export default compose( [ withSelect( ( select, { uids } ) => { - const { getEditorSettings, getBlocksByUID } = select( 'core/editor' ); - const { templateLock } = getEditorSettings(); + const { getBlockRootUID, getBlocksByUID, getLockedState } = select( 'core/editor' ); return { - isLocked: !! templateLock, + isLocked: some( uids, ( uid ) => !! getLockedState( getBlockRootUID( uid ) ) ), blocks: getBlocksByUID( uids ), }; } ), diff --git a/editor/components/block-switcher/index.js b/editor/components/block-switcher/index.js index 8aa5e69568e786..c9413976792864 100644 --- a/editor/components/block-switcher/index.js +++ b/editor/components/block-switcher/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { get } from 'lodash'; +import { castArray, get, some } from 'lodash'; /** * WordPress dependencies @@ -133,11 +133,10 @@ export class BlockSwitcher extends Component { export default compose( withSelect( ( select, ownProps ) => { - const { getBlock, getEditorSettings } = select( 'core/editor' ); - const { templateLock } = getEditorSettings(); + const { getBlock, getBlockRootUID, getLockedState } = select( 'core/editor' ); return { blocks: ownProps.uids.map( getBlock ), - isLocked: !! templateLock, + isLocked: some( castArray( ownProps.uids ), ( uid ) => !! getLockedState( getBlockRootUID( uid ) ) ), }; } ), withDispatch( ( dispatch, ownProps ) => ( { diff --git a/editor/components/default-block-appender/index.js b/editor/components/default-block-appender/index.js index 292a4fc89ec292..56157178c0b726 100644 --- a/editor/components/default-block-appender/index.js +++ b/editor/components/default-block-appender/index.js @@ -67,18 +67,18 @@ export function DefaultBlockAppender( { } export default compose( withSelect( ( select, ownProps ) => { - const { getBlockCount, getBlock, getEditorSettings } = select( 'core/editor' ); + const { getBlockCount, getBlock, getEditorSettings, getLockedState } = select( 'core/editor' ); const { isTipVisible } = select( 'core/nux' ); const isEmpty = ! getBlockCount( ownProps.rootUID ); const lastBlock = getBlock( ownProps.lastBlockUID ); const isLastBlockDefault = get( lastBlock, [ 'name' ] ) === getDefaultBlockName(); - const { templateLock, bodyPlaceholder } = getEditorSettings(); + const { bodyPlaceholder } = getEditorSettings(); return { isVisible: isEmpty || ! isLastBlockDefault, showPrompt: isEmpty, - isLocked: !! templateLock, + isLocked: !! getLockedState( ownProps.rootUID ), placeholder: bodyPlaceholder, hasTip: isTipVisible( 'core/editor.inserter' ), }; diff --git a/editor/components/editor-global-keyboard-shortcuts/index.js b/editor/components/editor-global-keyboard-shortcuts/index.js index a6d7da92fbab9a..ba99d4a772cda2 100644 --- a/editor/components/editor-global-keyboard-shortcuts/index.js +++ b/editor/components/editor-global-keyboard-shortcuts/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { first, last } from 'lodash'; +import { first, last, some } from 'lodash'; /** * WordPress dependencies @@ -98,16 +98,17 @@ export default compose( [ getBlockOrder, getMultiSelectedBlockUids, hasMultiSelection, - getEditorSettings, isEditedPostDirty, + getBlockRootUID, + getLockedState, } = select( 'core/editor' ); - const { templateLock } = getEditorSettings(); + const multiSelectedBlockUids = getMultiSelectedBlockUids(); return { uids: getBlockOrder(), multiSelectedBlockUids: getMultiSelectedBlockUids(), hasMultiSelection: hasMultiSelection(), - isLocked: !! templateLock, + isLocked: some( multiSelectedBlockUids, ( uid ) => !! getLockedState( getBlockRootUID( uid ) ) ), isDirty: isEditedPostDirty(), }; } ), diff --git a/editor/components/inner-blocks/index.js b/editor/components/inner-blocks/index.js index 8bc74b886c200a..bf1d0293368d0d 100644 --- a/editor/components/inner-blocks/index.js +++ b/editor/components/inner-blocks/index.js @@ -1,13 +1,14 @@ /** * External dependencies */ -import { isEqual, pick } from 'lodash'; import classnames from 'classnames'; +import { pick } from 'lodash'; /** * WordPress dependencies */ import { withContext } from '@wordpress/components'; +import isShallowEqual from '@wordpress/is-shallow-equal'; import { withViewportMatch } from '@wordpress/viewport'; import { Component, compose } from '@wordpress/element'; import { withSelect, withDispatch } from '@wordpress/data'; @@ -21,16 +22,12 @@ import BlockList from '../block-list'; import { withBlockEditContext } from '../block-edit/context'; class InnerBlocks extends Component { - componentWillReceiveProps( nextProps ) { - this.updateNestedSettings( { - supportedBlocks: nextProps.allowedBlocks, - } ); + componentDidUpdate() { + this.updateNestedSettings(); } componentDidMount() { - this.updateNestedSettings( { - supportedBlocks: this.props.allowedBlocks, - } ); + this.updateNestedSettings(); this.insertTemplateBlocks( this.props.template ); } @@ -43,9 +40,14 @@ class InnerBlocks extends Component { } } - updateNestedSettings( newSettings ) { - if ( ! isEqual( this.props.blockListSettings, newSettings ) ) { - this.props.updateNestedSettings( newSettings ); + updateNestedSettings() { + const { allowedBlocks, lock, parentLock, blockListSettings, updateNestedSettings } = this.props; + const newSettings = { + allowedBlocks, + lock: lock === undefined ? parentLock : lock, + }; + if ( ! isShallowEqual( blockListSettings, newSettings ) ) { + updateNestedSettings( newSettings ); } } @@ -54,6 +56,7 @@ class InnerBlocks extends Component { uid, layouts, allowedBlocks, + lock, template, isSmallScreen, isSelectedBlockInRoot, @@ -67,7 +70,7 @@ class InnerBlocks extends Component {
); diff --git a/editor/components/inserter-with-shortcuts/index.js b/editor/components/inserter-with-shortcuts/index.js index 83c282ad594ab0..7109c24ba039eb 100644 --- a/editor/components/inserter-with-shortcuts/index.js +++ b/editor/components/inserter-with-shortcuts/index.js @@ -50,11 +50,10 @@ function InserterWithShortcuts( { items, isLocked, onInsert } ) { export default compose( withSelect( ( select, { rootUID } ) => { - const { getEditorSettings, getInserterItems } = select( 'core/editor' ); - const { templateLock } = getEditorSettings(); + const { getInserterItems, getLockedState } = select( 'core/editor' ); return { items: getInserterItems( rootUID ), - isLocked: !! templateLock, + isLocked: !! getLockedState( rootUID ), }; } ), withDispatch( ( dispatch, ownProps ) => { diff --git a/editor/store/selectors.js b/editor/store/selectors.js index 44b9ab41bc9ec3..ae9b0eb31df943 100644 --- a/editor/store/selectors.js +++ b/editor/store/selectors.js @@ -1334,20 +1334,20 @@ export const canInsertBlockType = createSelector( return false; } - const { allowedBlockTypes, templateLock } = getEditorSettings( state ); + const { allowedBlockTypes } = getEditorSettings( state ); const isBlockAllowedInEditor = checkAllowList( allowedBlockTypes, blockName, true ); if ( ! isBlockAllowedInEditor ) { return false; } - const isEditorLocked = !! templateLock; - if ( isEditorLocked ) { + const isLocked = !! getLockedState( state, parentUID ); + if ( isLocked ) { return false; } const parentBlockListSettings = getBlockListSettings( state, parentUID ); - const parentAllowedBlocks = get( parentBlockListSettings, [ 'supportedBlocks' ] ); + const parentAllowedBlocks = get( parentBlockListSettings, [ 'allowedBlocks' ] ); const hasParentAllowedBlock = checkAllowList( parentAllowedBlocks, blockName ); const blockAllowedParentBlocks = blockType.parent; @@ -1842,3 +1842,22 @@ export function getSupportedBlocks( state, uid, globallyEnabledBlockTypes ) { export function getEditorSettings( state ) { return state.settings; } + +/* + * Returns the locked state in the context of a given root block. + * + * @param {Object} state Editor state. + * @param {?string} rootUID Block UID. + * + * @return {?string} Locked state in the context of a given block. + */ +export function getLockedState( state, rootUID ) { + if ( ! rootUID ) { + return getTemplateLock( state ); + } + const blockListSettings = getBlockListSettings( state, rootUID ); + if ( ! blockListSettings ) { + return null; + } + return blockListSettings.lock; +} diff --git a/editor/store/test/selectors.js b/editor/store/test/selectors.js index c1c665fa8d85d6..57c6abb152a759 100644 --- a/editor/store/test/selectors.js +++ b/editor/store/test/selectors.js @@ -3000,7 +3000,7 @@ describe( 'selectors', () => { }, blockListSettings: { block1: { - supportedBlocks: [ 'core/test-block-c' ], + allowedBlocks: [ 'core/test-block-c' ], }, }, settings: {}, @@ -3019,7 +3019,7 @@ describe( 'selectors', () => { }, blockListSettings: { block1: { - supportedBlocks: [ 'core/test-block-b' ], + allowedBlocks: [ 'core/test-block-b' ], }, }, settings: {}, @@ -3038,7 +3038,7 @@ describe( 'selectors', () => { }, blockListSettings: { block1: { - supportedBlocks: [], + allowedBlocks: [], }, }, settings: {},