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.

Sign up for GitHub

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

Block Locking: Add the 'Apply to inner blocks' option #41876

Merged
merged 7 commits into from
Jul 13, 2022
+52 −4
Merged

Block Locking: Add the 'Apply to inner blocks' option #41876

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b5e0d30
Block Locking: Add the 'Apply to inner blocks' option
Mamaduka Jun 22, 2022
988775e
Update label
Mamaduka Jun 23, 2022
5b0c1b2
Disabled toggle when a block cannot apply template lock
Mamaduka Jun 27, 2022
d3daf39
Add top margin
Mamaduka Jun 28, 2022
2f84ee5
Update label
Mamaduka Jun 30, 2022
8262739
Use templateLock value as initial state
Mamaduka Jul 13, 2022
ea2d07d
Cast to boolean
Mamaduka Jul 13, 2022
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
46 changes: 42 additions & 4 deletions packages/block-editor/src/components/block-lock/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
FlexItem,
Icon,
Modal,
ToggleControl,
} from '@wordpress/components';
import { lock as lockIcon, unlock as unlockIcon } from '@wordpress/icons';
import { useInstanceId } from '@wordpress/compose';
Expand All @@ -23,20 +24,41 @@ import useBlockLock from './use-block-lock';
import useBlockDisplayInformation from '../use-block-display-information';
import { store as blockEditorStore } from '../../store';

function getTemplateLockValue( lock ) {
// Prevents all operations.
if ( lock.remove && lock.move ) {
return 'all';
}

// Prevents inserting or removing blocks, but allows moving existing blocks.
if ( lock.remove && ! lock.move ) {
return 'insert';
}

return false;
}

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

return {
isReusable: isReusableBlock( getBlockType( blockName ) ),
isReusable: isReusableBlock( blockType ),
templateLock: getBlockAttributes( clientId )?.templateLock,
hasTemplateLock: !! blockType?.attributes?.templateLock,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm testing block supports by checking if the templateLock attribute is registered for the block type. We can also convert this into a new supports flag.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This way is correct, even if we have a supports flag, some blocks may prefer to register the attribute themselves so they can provide a default value to the attribute.

};
},
[ clientId ]
);
const [ applyTemplateLock, setApplyTemplateLock ] = useState(
!! templateLock
);
const { updateBlockAttributes } = useDispatch( blockEditorStore );
const blockInformation = useBlockDisplayInformation( clientId );
const instanceId = useInstanceId(
Expand Down Expand Up @@ -69,7 +91,12 @@ export default function BlockLockModal( { clientId, onClose } ) {
<form
onSubmit={ ( event ) => {
event.preventDefault();
updateBlockAttributes( [ clientId ], { lock } );
updateBlockAttributes( [ clientId ], {
lock,
templateLock: applyTemplateLock
? getTemplateLockValue( lock )
: undefined,
} );
onClose();
} }
>
Expand Down Expand Up @@ -171,6 +198,17 @@ export default function BlockLockModal( { clientId, onClose } ) {
/>
</li>
</ul>
{ hasTemplateLock && (
<ToggleControl
className="block-editor-block-lock-modal__template-lock"
label={ __( 'Apply to all blocks inside' ) }
checked={ applyTemplateLock }
disabled={ lock.move && ! lock.remove }
onChange={ () =>
setApplyTemplateLock( ! applyTemplateLock )
}
/>
) }
</div>
<Flex
className="block-editor-block-lock-modal__actions"
Expand Down
10 changes: 10 additions & 0 deletions packages/block-editor/src/components/block-lock/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,16 @@
}
}

.block-editor-block-lock-modal__template-lock {
border-top: $border-width solid $gray-300;
margin-top: $grid-unit-20;
padding: $grid-unit-15 0;

.components-base-control__field {
margin: 0;
}
}

.block-editor-block-lock-modal__actions {
margin-top: $grid-unit-30;
}
Expand Down