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 Editor: Add block lock setting #39566

Merged
merged 5 commits into from
Mar 24, 2022
Merged

Block Editor: Add block lock setting #39566

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f79802f
Register settings
Mamaduka Mar 17, 2022
f3b510e
Use setting
Mamaduka Mar 17, 2022
592be7f
Use aria-disabled
Mamaduka Mar 18, 2022
b8c90fe
No opacity
Mamaduka Mar 18, 2022
ee59544
Don't render toolbar icon if user can't interact
Mamaduka Mar 21, 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
1 change: 1 addition & 0 deletions packages/block-editor/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -570,6 +570,7 @@ _Properties_
- _\_\_experimentalBlockPatterns_ `Array`: Array of objects representing the block patterns
- _\_\_experimentalBlockPatternCategories_ `Array`: Array of objects representing the block pattern categories
- _\_\_experimentalGenerateAnchors_ `boolean`: Enable/Disable auto anchor generation for Heading blocks
- _\_\_experimentalCanLockBlocks_ `boolean`: Whether the user can manage Block Lock state
- _\_\_unstableGalleryWithImageBlocks_ `boolean`: Whether the user has enabled the refactored gallery block which uses InnerBlocks

### SkipToSelectedBlock
Expand Down
8 changes: 7 additions & 1 deletion packages/block-editor/src/components/block-lock/menu-item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,18 @@ import BlockLockModal from './modal';
import { store as blockEditorStore } from '../../store';

export default function BlockLockMenuItem( { clientId } ) {
const { isLocked } = useSelect(
const { canLockBlocks, isLocked } = useSelect(
( select ) => {
const {
canMoveBlock,
canRemoveBlock,
getBlockRootClientId,
getSettings,
} = select( blockEditorStore );
const rootClientId = getBlockRootClientId( clientId );

return {
canLockBlocks: getSettings().__experimentalCanLockBlocks,
isLocked:
! canMoveBlock( clientId, rootClientId ) ||
! canRemoveBlock( clientId, rootClientId ),
Expand All @@ -37,6 +39,10 @@ export default function BlockLockMenuItem( { clientId } ) {
false
);

if ( ! canLockBlocks ) {
return null;
}

const label = isLocked ? __( 'Unlock' ) : __( 'Lock' );

return (
Expand Down
11 changes: 9 additions & 2 deletions packages/block-editor/src/components/block-lock/toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,16 @@ import { store as blockEditorStore } from '../../store';

export default function BlockLockToolbar( { clientId } ) {
const blockInformation = useBlockDisplayInformation( clientId );
const { canMove, canRemove } = useSelect(
const { canMove, canRemove, canLockBlocks } = useSelect(
( select ) => {
const { canMoveBlock, canRemoveBlock } = select( blockEditorStore );
const { canMoveBlock, canRemoveBlock, getSettings } = select(
blockEditorStore
);

return {
canMove: canMoveBlock( clientId ),
canRemove: canRemoveBlock( clientId ),
canLockBlocks: getSettings().__experimentalCanLockBlocks,
};
},
[ clientId ]
Expand All @@ -33,6 +36,10 @@ export default function BlockLockToolbar( { clientId } ) {
false
);

if ( ! canLockBlocks ) {
return null;
}

if ( canMove && canRemove ) {
return null;
}
Expand Down
2 changes: 2 additions & 0 deletions packages/block-editor/src/store/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export const PREFERENCES_DEFAULTS = {
* @property {Array} __experimentalBlockPatterns Array of objects representing the block patterns
* @property {Array} __experimentalBlockPatternCategories Array of objects representing the block pattern categories
* @property {boolean} __experimentalGenerateAnchors Enable/Disable auto anchor generation for Heading blocks
* @property {boolean} __experimentalCanLockBlocks Whether the user can manage Block Lock state
* @property {boolean} __unstableGalleryWithImageBlocks Whether the user has enabled the refactored gallery block which uses InnerBlocks
*/
export const SETTINGS_DEFAULTS = {
Expand Down Expand Up @@ -158,6 +159,7 @@ export const SETTINGS_DEFAULTS = {
__experimentalBlockPatternCategories: [],
__experimentalSpotlightEntityBlocks: [],
__experimentalGenerateAnchors: false,
__experimentalCanLockBlocks: true,
Copy link
Member Author

Choose a reason for hiding this comment

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

Do we want to ship this new setting as experimental?

__unstableGalleryWithImageBlocks: false,
// gradients setting is not used anymore now defaults are passed from theme.json on the server and core has its own defaults.
// The setting is only kept for backward compatibility purposes.
Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/components/provider/use-block-editor-settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
'__experimentalPreferredStyleVariations',
'__experimentalSetIsInserterOpened',
'__experimentalGenerateAnchors',
'__experimentalCanLockBlocks',
'__unstableGalleryWithImageBlocks',
'alignWide',
'allowedBlockTypes',
Expand Down