From 54043d388d4558872f5d0782d9928f2e65612b78 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Wed, 15 Jul 2020 10:54:00 -0700 Subject: [PATCH 1/3] Add option to disable Image Editor --- packages/block-library/src/image/image.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 87fd783ae5e63..a5bb91443a340 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -226,7 +226,8 @@ export default function Image( { } }, [ isSelected ] ); - const canEditImage = id && naturalWidth && naturalHeight; + const isEditorEnabled = ! window._wpImageEditorDisabled; + const canEditImage = id && naturalWidth && naturalHeight && isEditorEnabled; const controls = ( <> From ccb12e1a9303616cdcad8a9ac97c037db545f1e0 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Thu, 16 Jul 2020 11:20:42 -0700 Subject: [PATCH 2/3] Switch disable to block-editor store --- packages/block-editor/README.md | 1 + packages/block-editor/src/store/defaults.js | 4 +++ packages/block-library/src/image/image.js | 31 +++++++++++-------- .../editor/src/components/provider/index.js | 1 + 4 files changed, 24 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index f4b164a9a58e9..746b38a1d4082 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 +- _disableImageEditor_ `boolean`: Whether or not the Image Editor is disabled. - _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 35865c8680cde..ba4358f89761a 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} disableImageEditor Whether or not the Image Editor is disabled. * @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 + disableImageEditor: false, + // 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 a5bb91443a340..b6f07870f5077 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 { + imageSizes, + disableImageEditor, + isRTL, + maxWidth, + mediaUpload, + } = useSelect( ( select ) => { + const { getSettings } = select( 'core/block-editor' ); + return pick( getSettings(), [ + 'imageSizes', + 'disableImageEditor', + 'isRTL', + 'maxWidth', + 'mediaUpload', + ] ); + } ); const { toggleSelection } = useDispatch( 'core/block-editor' ); const { createErrorNotice, createSuccessNotice } = useDispatch( 'core/notices' @@ -226,8 +231,8 @@ export default function Image( { } }, [ isSelected ] ); - const isEditorEnabled = ! window._wpImageEditorDisabled; - const canEditImage = id && naturalWidth && naturalHeight && isEditorEnabled; + const canEditImage = + id && naturalWidth && naturalHeight && ! disableImageEditor; const controls = ( <> diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 2282b0f4a10f5..3656f7efcd797 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -133,6 +133,7 @@ class EditorProvider extends Component { 'disableCustomColors', 'disableCustomFontSizes', 'disableCustomGradients', + 'disableImageEditor', 'enableCustomUnits', 'enableCustomLineHeight', 'focusMode', From 8e5e189d915c82bb8b3535771a57f2b8777cc0ff Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Fri, 17 Jul 2020 08:01:05 -0700 Subject: [PATCH 3/3] Switch to imageEditing settings --- packages/block-editor/README.md | 2 +- packages/block-editor/src/store/defaults.js | 4 ++-- packages/block-library/src/image/image.js | 7 +++---- packages/editor/src/components/provider/index.js | 2 +- 4 files changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 746b38a1d4082..bc3f7f0465455 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -481,7 +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 -- _disableImageEditor_ `boolean`: Whether or not the Image Editor is 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 ba4358f89761a..6acb482ae5243 100644 --- a/packages/block-editor/src/store/defaults.js +++ b/packages/block-editor/src/store/defaults.js @@ -17,7 +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} disableImageEditor Whether or not the Image Editor is 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 @@ -133,7 +133,7 @@ export const SETTINGS_DEFAULTS = { ], // Allow plugin to disable Image Editor if need be - disableImageEditor: false, + 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 diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index b6f07870f5077..18c06e5c9ebc7 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -88,16 +88,16 @@ export default function Image( { [ id, isSelected ] ); const { + imageEditing, imageSizes, - disableImageEditor, isRTL, maxWidth, mediaUpload, } = useSelect( ( select ) => { const { getSettings } = select( 'core/block-editor' ); return pick( getSettings(), [ + 'imageEditing', 'imageSizes', - 'disableImageEditor', 'isRTL', 'maxWidth', 'mediaUpload', @@ -231,8 +231,7 @@ export default function Image( { } }, [ isSelected ] ); - const canEditImage = - id && naturalWidth && naturalHeight && ! disableImageEditor; + 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 3656f7efcd797..99b1495152ecc 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -133,7 +133,6 @@ class EditorProvider extends Component { 'disableCustomColors', 'disableCustomFontSizes', 'disableCustomGradients', - 'disableImageEditor', 'enableCustomUnits', 'enableCustomLineHeight', 'focusMode', @@ -141,6 +140,7 @@ class EditorProvider extends Component { 'gradients', 'hasFixedToolbar', 'hasPermissionsToManageWidgets', + 'imageEditing', 'imageSizes', 'imageDimensions', 'isRTL',