Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove Reusable block edit locking from WP 6.0 #40498

Merged
merged 1 commit into from
Apr 29, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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