Skip to content

Commit

Permalink
Remove Reusable block edit locking from WP 6.0 (#40498)
Browse files Browse the repository at this point in the history
  • Loading branch information
Mamaduka authored Apr 29, 2022
1 parent 37e930b commit a4fcbb6
Show file tree
Hide file tree
Showing 6 changed files with 8 additions and 100 deletions.
13 changes: 0 additions & 13 deletions docs/reference-guides/data/data-core-block-editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,6 @@ _Returns_

- `boolean`: True if the block has controlled inner blocks.

### canEditBlock

Determines if the given block is allowed to be edited.

_Parameters_

- _state_ `Object`: Editor state.
- _clientId_ `string`: The block client Id.

_Returns_

- `boolean`: Whether the given block is allowed to be edited.

### canInsertBlocks

Determines if the given blocks are allowed to be inserted into the block
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ export default function BlockContentOverlay( {
const [ isHovered, setIsHovered ] = useState( false );

const {
canEdit,
isParentSelected,
hasChildSelected,
isDraggingBlocks,
Expand All @@ -37,10 +36,8 @@ export default function BlockContentOverlay( {
hasSelectedInnerBlock,
isDraggingBlocks: _isDraggingBlocks,
isBlockHighlighted,
canEditBlock,
} = select( blockEditorStore );
return {
canEdit: canEditBlock( clientId ),
isParentSelected: isBlockSelected( clientId ),
hasChildSelected: hasSelectedInnerBlock( clientId, true ),
isDraggingBlocks: _isDraggingBlocks(),
Expand All @@ -62,12 +59,6 @@ export default function BlockContentOverlay( {
);

useEffect( () => {
// The overlay is always active when editing is locked.
if ( ! canEdit ) {
setIsOverlayActive( true );
return;
}

// Reenable when blocks are not in use.
if ( ! isParentSelected && ! hasChildSelected && ! isOverlayActive ) {
setIsOverlayActive( true );
Expand All @@ -84,13 +75,7 @@ export default function BlockContentOverlay( {
if ( hasChildSelected && isOverlayActive ) {
setIsOverlayActive( false );
}
}, [
isParentSelected,
hasChildSelected,
isOverlayActive,
isHovered,
canEdit,
] );
}, [ isParentSelected, hasChildSelected, isOverlayActive, isHovered ] );

// Disabled because the overlay div doesn't actually have a role or functionality
// as far as the a11y is concerned. We're just catching the first click so that
Expand All @@ -103,9 +88,7 @@ export default function BlockContentOverlay( {
onMouseEnter={ () => setIsHovered( true ) }
onMouseLeave={ () => setIsHovered( false ) }
onMouseUp={
isOverlayActive && canEdit
? () => setIsOverlayActive( false )
: undefined
isOverlayActive ? () => setIsOverlayActive( false ) : undefined
}
>
{ wrapperProps?.children }
Expand Down
45 changes: 3 additions & 42 deletions packages/block-editor/src/components/block-lock/modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@ import {
} from '@wordpress/components';
import { lock as lockIcon, unlock as unlockIcon } from '@wordpress/icons';
import { useInstanceId } from '@wordpress/compose';
import { useDispatch, useSelect } from '@wordpress/data';
import { isReusableBlock, getBlockType } from '@wordpress/blocks';
import { useDispatch } from '@wordpress/data';

/**
* Internal dependencies
Expand All @@ -25,18 +24,7 @@ import { store as blockEditorStore } from '../../store';

export default function BlockLockModal( { clientId, onClose } ) {
const [ lock, setLock ] = useState( { move: false, remove: false } );
const { canEdit, canMove, canRemove } = useBlockLock( clientId );
const { isReusable } = useSelect(
( select ) => {
const { getBlockName } = select( blockEditorStore );
const blockName = getBlockName( clientId );

return {
isReusable: isReusableBlock( getBlockType( blockName ) ),
};
},
[ clientId ]
);
const { canMove, canRemove } = useBlockLock( clientId );
const { updateBlockAttributes } = useDispatch( blockEditorStore );
const blockInformation = useBlockDisplayInformation( clientId );
const instanceId = useInstanceId(
Expand All @@ -48,9 +36,8 @@ export default function BlockLockModal( { clientId, onClose } ) {
setLock( {
move: ! canMove,
remove: ! canRemove,
...( isReusable ? { edit: ! canEdit } : {} ),
} );
}, [ canEdit, canMove, canRemove, isReusable ] );
}, [ canMove, canRemove ] );

const isAllChecked = Object.values( lock ).every( Boolean );
const isMixed = Object.values( lock ).some( Boolean ) && ! isAllChecked;
Expand Down Expand Up @@ -94,36 +81,10 @@ export default function BlockLockModal( { clientId, onClose } ) {
setLock( {
move: newValue,
remove: newValue,
...( isReusable ? { edit: newValue } : {} ),
} )
}
/>
<ul className="block-editor-block-lock-modal__checklist">
{ isReusable && (
<li className="block-editor-block-lock-modal__checklist-item">
<CheckboxControl
label={
<>
{ __( 'Restrict editing' ) }
<Icon
icon={
lock.edit
? lockIcon
: unlockIcon
}
/>
</>
}
checked={ !! lock.edit }
onChange={ ( edit ) =>
setLock( ( prevLock ) => ( {
...prevLock,
edit,
} ) )
}
/>
</li>
) }
<li className="block-editor-block-lock-modal__checklist-item">
<CheckboxControl
label={
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-lock/toolbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import useBlockDisplayInformation from '../use-block-display-information';

export default function BlockLockToolbar( { clientId } ) {
const blockInformation = useBlockDisplayInformation( clientId );
const { canEdit, canMove, canRemove, canLock } = useBlockLock( clientId );
const { canMove, canRemove, canLock } = useBlockLock( clientId );

const [ isModalOpen, toggleModal ] = useReducer(
( isActive ) => ! isActive,
Expand All @@ -26,7 +26,7 @@ export default function BlockLockToolbar( { clientId } ) {
return null;
}

if ( canEdit && canMove && canRemove ) {
if ( canMove && canRemove ) {
return null;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ export default function useBlockLock( clientId ) {
return useSelect(
( select ) => {
const {
canEditBlock,
canMoveBlock,
canRemoveBlock,
canLockBlockType,
Expand All @@ -28,16 +27,14 @@ export default function useBlockLock( clientId ) {
} = select( blockEditorStore );
const rootClientId = getBlockRootClientId( clientId );

const canEdit = canEditBlock( clientId );
const canMove = canMoveBlock( clientId, rootClientId );
const canRemove = canRemoveBlock( clientId, rootClientId );

return {
canEdit,
canMove,
canRemove,
canLock: canLockBlockType( getBlockName( clientId ) ),
isLocked: ! canEdit || ! canMove || ! canRemove,
isLocked: ! canMove || ! canRemove,
};
},
[ clientId ]
Expand Down
20 changes: 0 additions & 20 deletions packages/block-editor/src/store/selectors.js
Original file line number Diff line number Diff line change
Expand Up @@ -1695,26 +1695,6 @@ export function canMoveBlocks( state, clientIds, rootClientId = null ) {
);
}

/**
* Determines if the given block is allowed to be edited.
*
* @param {Object} state Editor state.
* @param {string} clientId The block client Id.
*
* @return {boolean} Whether the given block is allowed to be edited.
*/
export function canEditBlock( state, clientId ) {
const attributes = getBlockAttributes( state, clientId );
if ( attributes === null ) {
return true;
}

const { lock } = attributes;

// When the edit is true, we cannot edit the block.
return ! lock?.edit;
}

/**
* Determines if the given block type can be locked/unlocked by a user.
*
Expand Down

0 comments on commit a4fcbb6

Please sign in to comment.