diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index f4b164a9a58e96..bc3f7f04654552 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -481,6 +481,7 @@ _Properties_ - _disableCustomColors_ `boolean`: Whether or not the custom colors are disabled - _fontSizes_ `Array`: Available font sizes - _disableCustomFontSizes_ `boolean`: Whether or not the custom font sizes are disabled +- _imageEditing_ `boolean`: Image Editing settings set to false to disable. - _imageSizes_ `Array`: Available image sizes - _maxWidth_ `number`: Max width to constraint resizing - _allowedBlockTypes_ `(boolean|Array)`: Allowed block types diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js index 35865c8680cde6..6acb482ae52437 100644 --- a/packages/block-editor/src/store/defaults.js +++ b/packages/block-editor/src/store/defaults.js @@ -17,6 +17,7 @@ export const PREFERENCES_DEFAULTS = { * @property {boolean} disableCustomColors Whether or not the custom colors are disabled * @property {Array} fontSizes Available font sizes * @property {boolean} disableCustomFontSizes Whether or not the custom font sizes are disabled + * @property {boolean} imageEditing Image Editing settings set to false to disable. * @property {Array} imageSizes Available image sizes * @property {number} maxWidth Max width to constraint resizing * @property {boolean|Array} allowedBlockTypes Allowed block types @@ -131,6 +132,9 @@ export const SETTINGS_DEFAULTS = { { slug: 'full', name: __( 'Full Size' ) }, ], + // Allow plugin to disable Image Editor if need be + imageEditing: true, + // This is current max width of the block inner area // It's used to constraint image resizing and this value could be overridden later by themes maxWidth: 580, diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 87fd783ae5e63c..18c06e5c9ebc76 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -87,17 +87,22 @@ export default function Image( { }, [ id, isSelected ] ); - const { maxWidth, isRTL, imageSizes, mediaUpload } = useSelect( - ( select ) => { - const { getSettings } = select( 'core/block-editor' ); - return pick( getSettings(), [ - 'imageSizes', - 'isRTL', - 'maxWidth', - 'mediaUpload', - ] ); - } - ); + const { + imageEditing, + imageSizes, + isRTL, + maxWidth, + mediaUpload, + } = useSelect( ( select ) => { + const { getSettings } = select( 'core/block-editor' ); + return pick( getSettings(), [ + 'imageEditing', + 'imageSizes', + 'isRTL', + 'maxWidth', + 'mediaUpload', + ] ); + } ); const { toggleSelection } = useDispatch( 'core/block-editor' ); const { createErrorNotice, createSuccessNotice } = useDispatch( 'core/notices' @@ -226,7 +231,7 @@ export default function Image( { } }, [ isSelected ] ); - const canEditImage = id && naturalWidth && naturalHeight; + const canEditImage = id && naturalWidth && naturalHeight && imageEditing; const controls = ( <> diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 2282b0f4a10f59..99b1495152eccf 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -140,6 +140,7 @@ class EditorProvider extends Component { 'gradients', 'hasFixedToolbar', 'hasPermissionsToManageWidgets', + 'imageEditing', 'imageSizes', 'imageDimensions', 'isRTL',